New Twiddle

components.ui-currency-input.js

import Ember from 'ember';

const {
  Component,
  computed,
  get,
  set,
  guidFor,
  assert,
  isPresent,
} = Ember;

const MISC_KEYS = [
  8, // Backspack
  46, // Delete
  190 // Period
];

export default Ember.Component.extend({
  classNames: ['ui-currency-input'],
  
  value: null,
  maskedValue: computed({
    get() {
      const value = get(this, 'value');
      return this.maskValue(value);
    },
    set(key, value) {
      return this.maskValue(value);
    }
  }),
  
  inputId: null,
  
  keyPress(evt) {
    return this.inputFilter(evt);
  },
  
  inputFilter(evt) {
    const charCode = evt.which || evt.keyCode;
    let keyIsValid = false;

    if (
      (charCode >= 48 && charCode <= 57) || // Top row numbers
      (MISC_KEYS.includes(charCode))
    ) {
      keyIsValid = true;
    }
    
    return keyIsValid;
  },
  
  maskValue(value = '0') {
    value = parseFloat(value).toFixed(2);
    value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return value;
  },
  
  actions: {
    onBlur(amount) {
      amount = amount || '0';
      this.set('maskedValue', amount);
    }
  }
});

components.ui-form-group.js

import Ember from 'ember';

const {
    Component,
    computed,
    get,
    guidFor,
    assert,
    isPresent,
} = Ember;

const LABEL_MSG = 'You must include a "label" attribute in all uses of "{{ui-form-group}}" for disabled users. If you want to hide the label visually, you may also provide the attribute "labelVisible=false".';

export default Component.extend({
    labelVisible: true,
    testId: 'uiFormGroup',
    attributeBindings: ['testId:test-id', 'role'],
    classNames: ['form-group', 'ui-form-group'],

    verifyPresence: (value, message) => assert(message, isPresent(value)),

    label: computed({
        get() {
            this.verifyPresence(null, LABEL_MSG);
            return null;
        },
        set(key, label) {
            this.verifyPresence(label, LABEL_MSG);
            return label;
        },
    }),

    uuid: computed(function() {
        return guidFor(this);
    }),

    inputId: computed(function() {
        const guid = get(this, 'uuid');
        return `${guid}-input`;
    }),

    descriptionId: computed(function() {
        const uuid = get(this, 'uuid');
        return `${uuid}-description`;
    }),
});

components.ui-input.js

import Ember from 'ember';

const {
    Component,
    computed,
    get,
    assert,
    isPresent,
} = Ember;

const ALLOWED_TYPES = ['text', 'search', 'tel', 'password', 'number', 'email'];
const UPDATE_MSG = 'You must include an "update" attribute in all uses of "{{ui-input}}" for the value to be updated. The most common use is "update=(action (mut value))".';
const ID_MSG = 'You must include an "id" attribute in all uses of "{{ui-input}}" for disabled users. This "id" should reference the inputId provided by {{ui-form-group as | inputId |}}.';

const UiInputComponent = Component.extend({
    id: null,
    ariaDescribedBy: null,
    testId: 'fldInput',
    _legitValue: undefined,

    tagName: 'input',
    classNames: ['form-control', 'ui-input'],

    attributeBindings: [
        'type',
        'locPlaceholder:placeholder',
        'testId:test-id',
        'value',
        'ariaDescribedBy:aria-describedby',
    ],

    verifyPresence: (value, message) => assert(message, isPresent(value)),

    init() {
        this._super(...arguments);
        let id = get(this, 'id');
        this.verifyPresence(id, ID_MSG);
        console.log('id', id)
        let update = get(this, 'update');
        this.verifyPresence(update, UPDATE_MSG);
    },

    locPlaceholder: computed('placeholder', function() {
        let placeholder = get(this, 'placeholder');
        if (!placeholder) {
            return;
        }
        let loc = Ember.String.loc(placeholder);
        return loc ? loc : placeholder;
    }),

    update: computed({
        get() {
            return null;
        },
        set(key, update) {
            this.verifyPresence(update, UPDATE_MSG);
            return update;
        },
    }),

    type: computed({
        get() {
            return 'text';
        },

        set(key, type) {
            assert(`The {{ui-input}} component does not support type="${type}".`, ALLOWED_TYPES.indexOf(type) !== -1);
            return type;
        },
    }),

    change(event) {
        let value = this.readDOMAttr('value');
        this._processNewValue(value, event);
    },

    input(event) {
        let value = this.readDOMAttr('value');
        this._processNewValue(value, event);
    },

    _processNewValue(value, event) {
        if (this._legitValue !== value) {
            this._legitValue = value;
            this.sendAction('update', value, event);
        }
    },
});

export default UiInputComponent;

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  name: 'Kris Van Houten',
  amount: '12312335.67'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.ui-form-group {
  margin: 15px 0;
}

.ui-input,
.ui-input-clone {
  width: 100%;
  height: 35px;
  border: 1px solid #CCC;
  padding: 3px 5px;
  font: 14px/20px sans-serif;
}

.ui-input-clone {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  font-style: italic;
}

.ui-currency-input {
  position: relative;
}

.ui-currency-input .ui-input {
 opacity: 0; 
}
.ui-currency-input .ui-input ~ .ui-input-clone {
  opacity: 1; 
  pointer-events: none;
}
.ui-currency-input .ui-input:focus {
 opacity: 1; 
}
.ui-currency-input .ui-input:focus ~ .ui-input-clone {
 opacity: 0; 
}

templates.application.hbs

<h1>Send Moneys</h1>

<p>Focus on the currency input to see an unformatted value</p>

{{#ui-form-group label="Who Wants Money?" as |inputId|}}
	{{ui-input value=name update=(action (mut name)) id=inputId}}
{{/ui-form-group}}

{{#ui-form-group label="How Much Money is Wanted?" as |inputId|}}
	
  {{ui-currency-input value=amount inputId=inputId}}
{{/ui-form-group}}

templates.components.ui-currency-input.hbs

{{ui-input type="number" value=value update=(action (mut value)) focusOut=(action 'onBlur' value) id=inputId}}

<div class="ui-input-clone">
  ${{maskedValue}}
</div>

<ul>
	<li><strong>Value</strong>: {{value}}</li>
	<li><strong>Masked Value</strong>: {{maskedValue}}</li>
</ul>

templates.components.ui-form-group.hbs

<div>
  <label class={{unless labelVisible 'sr-only'}} for={{inputId}} test-id="txtLabel">{{loc label}}</label>

  {{#if hasBlock}}
      <div>
          {{yield inputId descriptionId}}
      </div>
  {{/if}}
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}