Add Glint support to the {{au-inputmask}} modifier

Author: Windvis

addon/modifiers/au-inputmask.js

@@ -0,0 +1,22 @@
+import { modifier } from 'ember-modifier';
+import Inputmask from 'inputmask';
+
+interface Args {
+  // TODO: we could probably expose the underlying Inputmask options types here?
+  // Not sure if we want to do that, since it requires a `@types` package as well?
+  options: object;
+}
+
+export default modifier(function auInputmask(
+  element: HTMLElement,
+  positional,
+  { options = {} }: Args,
+) {
+  const inputmask = new Inputmask(options);
+
+  inputmask.mask(element);
+
+  return () => {
+    element.inputmask?.remove();
+  };
+});

addon/modifiers/au-inputmask.ts

@@ -46,6 +46,7 @@ import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolb
 
 // Modifiers
 import type AuDateInputModifier from '@appuniversum/ember-appuniversum/modifiers/au-date-input';
+import type AuInputMaskModifier from '@appuniversum/ember-appuniversum/modifiers/au-inputmask';
 
 export default interface AppuniversumRegistry {
   // Components
@@ -96,4 +97,5 @@ export default interface AppuniversumRegistry {
 
   // Modifiers
   'au-date-input': typeof AuDateInputModifier;
+  'au-inputmask': typeof AuInputMaskModifier;
 }

addon/template-registry.ts

@@ -322,4 +322,12 @@ module('Integration | Modifier | Loose mode', function (hooks) {
 
     assert.dom('[data-test-date-input]').hasValue('02-02-2023');
   });
+
+  test('`{{au-inputmask}}` resolves in loose mode', async function (assert) {
+    await render(hbs`
+    <AuInput data-test-inputmask value="123" {{au-inputmask options=(hash mask="9.9.9")}} />
+  `);
+
+    assert.dom('[data-test-inputmask]').hasValue('1.2.3');
+  });
 });

tests/integration/components/loose-mode-test.ts

@@ -0,0 +1,64 @@
+import inputmask from '@appuniversum/ember-appuniversum/modifiers/au-inputmask';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { fillIn, find, render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Modifier | au-inputmask', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    await render(
+      <template>
+        <label>Foo<input
+            value="123"
+            {{inputmask options=(hash mask="9.9.9")}}
+          /></label>
+      </template>,
+    );
+
+    const inputElement = find('input')!;
+    assert.ok(
+      inputElement.inputmask,
+      'the inputmask property is added to the element after initialising',
+    );
+
+    assert.strictEqual(
+      inputElement.value,
+      '1.2.3',
+      '.value returns the masked value',
+    );
+    assert.strictEqual(
+      inputElement.inputmask?.unmaskedvalue(),
+      '123',
+      '.unmaskedvalue() returns the unmasked value',
+    );
+  });
+
+  test('it supports regular input events', async function (assert) {
+    const handleChange = (event: Event) => {
+      const inputElement = event.target as HTMLInputElement;
+      assert.step(inputElement.value);
+
+      if (inputElement.inputmask) {
+        assert.step(inputElement.inputmask.unmaskedvalue());
+      }
+    };
+    await render(
+      <template>
+        <label>Foo
+          <input
+            {{inputmask options=(hash mask="9.9.9")}}
+            {{on "change" handleChange}}
+          />
+        </label>
+      </template>,
+    );
+
+    const inputElement = find('input')!;
+    await fillIn(inputElement, '123');
+
+    assert.verifySteps(['1.2.3', '123']);
+  });
+});