Add number-input which optionally uses a sanitizer

app/components/erf-html-input.js

@@ -0,0 +1,15 @@
+import HTMLInput from 'ember-rapid-forms/components/html-input';
+import layout from '../templates/components/html-input';
+
+export default HTMLInput.extend({
+  layout,
+  actions: {
+    update(value) {
+      let sanitize = this.get('mainComponent.sanitize');
+      if (sanitize && sanitize.call) {
+        value = sanitize(value);
+      }
+      this.set('selectedValue', value);
+    }
+  }
+});

app/components/number-input.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  sanitizeFunction(value) {
+    return value.replace(new RegExp(/([^0-9|.]+)/g), '');
+  },
+  tagName: '',
+  actions: {
+    sanitize(value) {
+      return this.get('sanitizeFunction')(value);
+    }
+  }
+});

app/initializers/i18n.js

@@ -9,4 +9,4 @@ export default {
     app.inject('mixin', 'i18n', 'service:i18n');
     app.inject('model', 'i18n', 'service:i18n');
   }
-};
+};

app/templates/components/html-input.hbs

@@ -0,0 +1,17 @@
+{{input
+  type=mainComponent.type
+
+  placeholder=mainComponent.placeholder
+  value=(readonly selectedValue)
+  name=mainComponent.name
+  disabled=mainComponent.disabled
+  class=(concat "form-control " mainComponent.elementClass)
+  id=mainComponent.id
+  required=mainComponent.required
+  title=mainComponent.title
+  pattern=mainComponent.pattern
+  autofocus=mainComponent.autofocus
+  readonly=mainComponent.readonly
+  autoresize=mainComponent.autoresize
+  input=(action "update" value="target.value")
+}}

app/templates/components/number-input.hbs

@@ -0,0 +1 @@
+{{em-input property=property label=label class=class sanitize=(action 'sanitize')}}

tests/integration/components/number-input-test.js

@@ -0,0 +1,42 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+moduleForComponent('number-input', 'Integration | Component | number input', {
+  integration: true
+});
+
+test('the number-input renders', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{#em-form model=model}}
+      {{number-input property='petType' label='Pet Type' class='test-number-input'}}
+    {{/em-form}}
+  `);
+
+  assert.equal(this.$('label').text().trim(), 'Pet Type', 'it renders the label');
+  assert.ok(Ember.isPresent(this.$('.test-number-input')), 'it renders the input field');
+});
+
+test('the number input sanitizes the data', function(assert) {
+  assert.expect(1);
+
+  this.set('sanitizeFunction', (value) => {
+    assert.equal(value, 'dragons', 'it passes the value to the sanitize function');
+  });
+
+  this.render(hbs`
+    {{#em-form model=model}}
+      {{number-input
+        property='petType'
+        sanitizeFunction=sanitizeFunction
+        label='Pet Type'
+        class='test-number-input'}}
+    {{/em-form}}
+  `);
+
+  this.$('input').eq(0).val('dragons');
+  this.$('input').trigger('input');
+  this.$('input').trigger('change');
+});