xenon-money-input.html

<!--
    The component will bind the money property and
    style it to look like US Currency.

        `<xenon-money-input label="Income" money="{{money}}"></xenon-money-input>`

    @group Xenon Elements
    @element xenon-money-input
    @demo demo/index.html
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/all-imports.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../xenon-money-behavior/xenon-money-behavior.html">
<dom-module id="xenon-money-input">
    <template>
        <style>
            :host{display:block;}
            :host([focused]) { outline: none; }
        </style>
        <paper-input-container tabindex="-1" no-label-float="[[noLabelFloat]]" always-float-label="[[alwaysFloatLabel]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
            <label tabindex="-1" hidden$="[[!label]]" aria-hidden="true" for$="money-[[_inputId]]">[[label]]</label>
            <div tabindex="-1" style="display:flex; align-items:center;">
                $
                <input is="iron-input"
                       id$="money-[[_inputId]]"
                       class="input-element"
                       aria-labelledby$="[[_ariaLabelledBy]]"
                       aria-describedby$="[[_ariaDescribedBy]]"
                       disabled$="[[disabled]]"
                       title$="[[title]]"
                       bind-value="{{_money}}"
                       invalid="{{invalid}}"
                       name$="[[name]]"
                       value="{{_money}}"
                       prevent-invalid-input
                       maxlength="8"
                       allowed-pattern="[0-9\,.]"
                       required$="[[required]]"
                       placeholder="[[placeholder]]">
            </div>
            
            <template is="dom-if" if="[[errorMessage]]">
                <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
            </template>
        </paper-input-container>
    </template>
    <script>
        Polymer({
            is: "xenon-money-input",
            behaviors: [
                Polymer.PaperInputBehavior,
                Polymer.IronValidatableBehavior,
                Polymer.IronFormElementBehavior,
             ACAXLabs.XenonMoneyBehavior
            ],
            properties: {
                /* internal string value of money ex. $54.30 */
                _money: { type: String, notify: true, value: "", observer: "_onInternalMoneyChange" },
                /* external numeric value of money ex. 54.30 */
                money: { type: Number, notify: true, value: "", observer: "_onExternalMoneyChange" },
                /* flag indicating if we should show cents in the value */
                decimal: { type: Boolean, notify: true, value: false, reflectToAttribute:true, observer:"_onDecimalChanged" }
            },
            _onInternalMoneyChange: function (val) {
                var decPos = val.indexOf(".");
                // if the string has no decimal or has two digits after the decimal, reformat it
                // in other words don't reformat 54. or 54.0 because the user is typing cents
                if (decPos == -1 || decPos <= val.length - 3) {
                    this._money = this.formatMoney(val, this.decimal && decPos != -1);
                }
                // figure out the numeric value of the private string _money
                var numvalue = Number(this._money.replace(/[^0-9\.]/g, ""));
                // if the external value is different, save this to the external value
                if (this.money != numvalue) this.money = numvalue;
            },
            _onExternalMoneyChange: function (val) {
                // figure out the numeric value of the private string _money
                var numvalue = Number(this._money.replace(/[^0-9\.]/g, ""));
                // if the external value != the internal numeric value then reset the internal _money
                if (val != numvalue) this._money = this.formatMoney(val, this.decimal);
            },
            validate: function () {
                return this.$$("input").validate();
            },
            _onDecimalChanged: function (allowDecimal) {
                var input = this.$$("input");
                input.maxlength = allowDecimal ? "11" : "8";
                console.log("_onDecimalChanged", input.maxlength)
            }
        });
    </script>
</dom-module>