@muonic/muon 0.0.2-beta.43 → 0.0.2-beta.45

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.45](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.44...v0.0.2-beta.45) (2023-09-18)
+
+### [0.0.2-beta.44](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.43...v0.0.2-beta.44) (2023-09-15)
+
+
+### Features
+
+* ignoreSeparator inputter property ([769e872](https://github.com/centrica-engineering/muon/commit/769e872137986ffd9beaa76d4271d75d6833b2b1))
+
 ### [0.0.2-beta.43](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.42...v0.0.2-beta.43) (2023-09-07)
 
 

package/mixins/form-associate-mixin.js

@@ -1,5 +1,5 @@
 import { dedupeMixin } from '@muonic/muon';
-
+import 'element-internals-polyfill';
 /**
  * A mixin to associate the component to the enclosing native form.
  *

package/mixins/mask-mixin.js

@@ -19,6 +19,11 @@ export const MaskMixin = dedupeMixin((superclass) =>
 
         separator: {
           type: String
+        },
+
+        ignoreSeparator: {
+          type: Boolean,
+          attribute: 'ignore-separator'
         }
       };
     }
@@ -28,6 +33,7 @@ export const MaskMixin = dedupeMixin((superclass) =>
 
       this.mask = '';
       this.separator = '';
+      this.ignoreSeparator = false;
     }
 
     firstUpdated() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.43",
+  "version": "0.0.2-beta.45",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -35,6 +35,7 @@
     "command-line-args": "5.2.1",
     "cssnano": "6.0.1",
     "deepmerge": "4.3.1",
+    "element-internals-polyfill": "^1.3.8",
     "glob": "10.2.2",
     "glob-to-regexp": "0.4.1",
     "lit": "2.8.0",

package/scripts/utils/index.mjs

@@ -305,9 +305,17 @@ const componentDefiner = async () => {
   });
 
   componentDefinition += `
-    document.addEventListener('DOMContentLoaded', () => {
+    function defineComponents() {
       ${definingCompnents.join('')}
-    });
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        defineComponents();
+      });
+    } else {
+      defineComponents();
+    }
   `;
 
   return componentDefinition;

package/tests/components/inputter/__snapshots__/inputter.test.snap.js

@@ -219,3 +219,21 @@ snapshots["Inputter date standard date"] =
 `;
 /* end snapshot Inputter date standard date */
 
+snapshots["Inputter text mask & separator text"] = 
+`<div class="has-mask inputter type-text">
+  <slot name="label">
+  </slot>
+  <div class="wrapper">
+    <slot>
+    </slot>
+    <div
+      aria-hidden="true"
+      class="input-mask"
+    >
+      00-00
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot Inputter text mask & separator text */
+

package/tests/components/inputter/inputter.test.js

@@ -262,6 +262,63 @@ describe('Inputter', () => {
       inputMask = shadowRoot.querySelector('.input-mask');
       expect(inputMask.textContent).to.be.equal('   0', '`input-mask` has correct value');
     });
+
+    it('mask & separator text', async () => {
+      const inputter = await fixture(html`
+        <${tag} mask="00-00" separator="-" ignore-separator="" validation=["isRequired","minLength(4)"]>
+          <label slot="label">input label</label>
+          <input type="text" value=""/>
+        </${tag}>`);
+      const shadowRoot = inputter.shadowRoot;
+
+      await defaultChecks(inputter);
+      const changeEventSpy = sinon.spy();
+      inputter.addEventListener('change', changeEventSpy);
+
+      expect(inputter.type).to.equal('standard', 'default type is set');
+      expect(inputter.separator).to.be.equal('-', 'seperator should be present');
+      expect(inputter.id).to.not.be.null; // eslint-disable-line no-unused-expressions
+
+      const mask = shadowRoot.querySelector('.has-mask');
+      expect(mask).to.not.be.null; // eslint-disable-line no-unused-expressions
+
+      let inputMask = shadowRoot.querySelector('.input-mask');
+      expect(inputMask).to.not.be.null; // eslint-disable-line no-unused-expressions
+
+      const inputElement = inputter.querySelector('input');
+      await fillIn(inputElement, '0', 'input');
+
+      await inputter.updateComplete;
+      expect(changeEventSpy.callCount).to.equal(1, '`change` event fired');
+      expect(changeEventSpy.lastCall.args[0].detail.value).to.equal('0', '`change` event has value `0`');
+      let validation = shadowRoot.querySelector('.validation');
+      expect(validation).to.be.not.null; // eslint-disable-line no-unused-expressions
+
+      await fillIn(inputElement, '', 'input');
+      await inputter.updateComplete;
+      expect(changeEventSpy.callCount).to.equal(2, '`change` event fired');
+      expect(changeEventSpy.lastCall.args[0].detail.value).to.equal('', '`change` event has value ``');
+      validation = shadowRoot.querySelector('.validation');
+      expect(validation).to.not.be.null; // eslint-disable-line no-unused-expressions
+      expect(getComputedStyle(validation).color).to.equal('rgb(227, 102, 14)', 'validation has correct color');
+
+      const validationMessage = shadowRoot.querySelector('.validation .message');
+      expect(validationMessage).to.not.be.null; // eslint-disable-line no-unused-expressions
+      expect(validationMessage.textContent.trim()).to.equal('This field is required.', 'validation message has correct value');
+
+      const validationIcon = shadowRoot.querySelector('.validation .icon');
+      expect(validationIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
+      expect(validationIcon.name).to.equal('exclamation-circle', 'validation icon has correct value');
+
+      await fillIn(inputElement, '123', 'input');
+      await inputter.updateComplete;
+      expect(changeEventSpy.callCount).to.equal(3, '`change` event fired');
+      expect(changeEventSpy.lastCall.args[0].detail.value).to.equal('12-3', '`change` event has value `12-3`');
+      expect(validationMessage.textContent.trim()).to.equal('Length must be at least 4 characters.', 'validation message has correct value');
+
+      inputMask = shadowRoot.querySelector('.input-mask');
+      expect(inputMask.textContent).to.be.equal('    0', '`input-mask` has correct value');
+    });
   });
 
   describe('radio', async () => {

package/tests/scripts/utils/utils-test.mjs

@@ -204,7 +204,7 @@ testRunner('sourceFilesAnalyzer', async (t) => {
     'muon-form': ['standardTemplate', 'type'],
     'muon-icon': ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'describe', 'type'],
     'muon-image': ['src', 'classes', 'inlineStyles', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
-    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
+    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'ignoreSeparator', 'type'],
     'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type']
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
@@ -230,7 +230,7 @@ testRunner('sourceFilesAnalyzer with prefix override', async (t) => {
   const components = ['muon-cta', 'muon-inputter', 'inputter-detail', 'mnx-cta'];
   const propertiesMap = {
     'muon-cta': ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
-    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
+    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'ignoreSeparator', 'type'],
     'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
     'mnx-cta': ['enabled', 'type']
   };

package/tests/utils/validation.functions.test.js

@@ -23,6 +23,13 @@ describe('validation', () => {
     validation = customValidations.isNumber(inputElement, '343');
     expect(validation).to.equal(false, 'validation has correct value');
 
+    validation = customValidations.isNumber(inputElement, '343-23');
+    expect(validation).to.equal('Needs to be a number', 'validation has correct value');
+
+    inputElement = { separator: '-', ignoreSeparator: true };
+    validation = customValidations.isNumber(inputElement, 'fdgd-fdf');
+    expect(validation).to.equal('Needs to be a number', 'validation has correct value');
+
     validation = customValidations.isNumber(inputElement, '343-23');
     expect(validation).to.equal(false, 'validation has correct value');
   });
@@ -39,6 +46,10 @@ describe('validation', () => {
     validation = customValidations.isInteger(inputElement, 'Infinity');
     expect(validation).to.equal('Needs to be a whole number', 'validation has correct value');
 
+    validation = customValidations.isInteger(inputElement, '343-67');
+    expect(validation).to.equal('Needs to be a whole number', 'validation has correct value');
+
+    inputElement = { separator: '-', ignoreSeparator: true };
     validation = customValidations.isInteger(inputElement, '343-67');
     expect(validation).to.equal(false, 'validation has correct value');
   });
@@ -72,6 +83,13 @@ describe('validation', () => {
 
     inputElement = { separator: '-' };
     validation = customValidations.minLength(inputElement, 'djfg-dfg', 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.minLength(inputElement, 'djfg-dfg8', 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    inputElement = { separator: '-', ignoreSeparator: true };
+    validation = customValidations.minLength(inputElement, 'djfg-dfg', 8);
     expect(validation).to.equal('Length must be at least 8 characters', 'validation has correct value');
 
     validation = customValidations.minLength(inputElement, 'djfg-dfg8', 8);
@@ -91,10 +109,14 @@ describe('validation', () => {
 
     inputElement = { separator: '-' };
     validation = customValidations.maxLength(inputElement, '353-434', 6);
-    expect(validation).to.equal(false, 'validation has correct value');
+    expect(validation).to.equal('Length must be no longer than 6 characters', 'validation has correct value');
 
     validation = customValidations.maxLength(inputElement, 'fer', 2);
     expect(validation).to.equal('Length must be no longer than 2 characters', 'validation has correct value');
+
+    inputElement = { separator: '-', ignoreSeparator: true };
+    validation = customValidations.maxLength(inputElement, '353-434', 6);
+    expect(validation).to.equal(false, 'validation has correct value');
   });
 
   it('isBetween', async () => {
@@ -116,6 +138,13 @@ describe('validation', () => {
 
     inputElement = { separator: '-' };
     validation = customValidations.isBetween(inputElement, 'd-', 2, 8);
+    expect(validation).to.equal(false, 'validation has correct value');
+
+    validation = customValidations.isBetween(inputElement, 'd-jfg-dfg', 2, 8);
+    expect(validation).to.equal('Length must be between 2 and 8 characters', 'validation has correct value');
+
+    inputElement = { separator: '-', ignoreSeparator: true };
+    validation = customValidations.isBetween(inputElement, 'd-', 2, 8);
     expect(validation).to.equal('Length must be between 2 and 8 characters', 'validation has correct value');
 
     validation = customValidations.isBetween(inputElement, 'd-jfg-dfg', 2, 8);

package/utils/validation/index.js

@@ -31,14 +31,14 @@ const isRequired = (inputter, value) => {
 };
 
 const isNumber = (inputter, value) => {
-  const number = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const number = inputter.ignoreSeparator ? withoutChar(value, inputter.separator) : value;
   const val = Number(number);
   const isNum = typeof val === 'number' && !isNaN(val);
   return value.length > 0 && !isNum && VALIDATION_IS_NUMBER_MESSAGE;
 };
 
 const isInteger = (inputter, value) => {
-  const number = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const number = inputter.ignoreSeparator ? withoutChar(value, inputter.separator) : value;
   const val = Number(number);
   const isInt = typeof val === 'number' && isFinite(val) && Math.floor(val) === val;
 
@@ -51,17 +51,17 @@ const isEmail = (inputter, value) => {
 };
 
 const minLength = (inputter, value, min) => {
-  const str = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const str = inputter.ignoreSeparator ? withoutChar(value, inputter.separator) : value;
   return value.length > 0 && str.length < min && VALIDATION_MIN_LENGTH_MESSAGE.replace('$min', min);
 };
 
 const maxLength = (inputter, value, max) => {
-  const str = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const str = inputter.ignoreSeparator ? withoutChar(value, inputter.separator) : value;
   return value.length > 0 && str.length > max && VALIDATION_MAX_LENGTH_MESSAGE.replace('$max', max);
 };
 
 const isBetween = (inputter, value, min, max) => {
-  const str = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const str = inputter.ignoreSeparator ? withoutChar(value, inputter.separator) : value;
   return value.length > 0 && (str.length < min || str.length > max) && VALIDATION_IS_BETWEEN_MESSAGE.replace('$min', min).replace('$max', max);
 };