@muonic/muon 0.0.2-beta.42 → 0.0.2-beta.44

package/.nycrc

@@ -7,7 +7,8 @@
   "exclude": [
     "**/modular-scale.js",
     "tests",
-    "tokens/**/string.js"
+    "tokens/**/string.js",
+    "js"
   ],
   "check-coverage": true,
   "lines": 99,

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.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)
+
+
+### Features
+
+* move registry to internal ([ed355c0](https://github.com/centrica-engineering/muon/commit/ed355c07bbd673f715470a75e44df1636e0035a3))
+
 ### [0.0.2-beta.42](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.39...v0.0.2-beta.42) (2023-09-01)
 
 

package/js/scoped-custom-element-registry.min.js

@@ -0,0 +1,65 @@
+(function () {
+  /*
+  
+   Copyright (c) 2020 The Polymer Project Authors. All rights reserved.
+   This code may only be used under the BSD style license found at
+   http://polymer.github.io/LICENSE.txt
+   The complete set of authors may be found at
+   http://polymer.github.io/AUTHORS.txt
+   The complete set of contributors may be found at
+   http://polymer.github.io/CONTRIBUTORS.txt
+   Code distributed by Google as part of the polymer project is also
+   subject to an additional IP rights grant found at
+   http://polymer.github.io/PATENTS.txt
+  */
+  'use strict'; function h(b) { var c = 0; return function () { return c < b.length ? { done: !1, value: b[c++] } : { done: !0 } } } function l(b) { var c = "undefined" != typeof Symbol && Symbol.iterator && b[Symbol.iterator]; return c ? c.call(b) : { next: h(b) } } function m(b) { if (!(b instanceof Array)) { b = l(b); for (var c, a = []; !(c = b.next()).done;)a.push(c.value); b = a } return b } var n = "function" == typeof Object.create ? Object.create : function (b) { function c() { } c.prototype = b; return new c };
+  function p(b) { b = ["object" == typeof globalThis && globalThis, b, "object" == typeof window && window, "object" == typeof self && self, "object" == typeof global && global]; for (var c = 0; c < b.length; ++c) { var a = b[c]; if (a && a.Math == Math) return a } throw Error("Cannot find global object"); }
+  var q = p(this), r = function () { function b() { function a() { } new a; Reflect.construct(a, [], function () { }); return new a instanceof a } if ("undefined" != typeof Reflect && Reflect.construct) { if (b()) return Reflect.construct; var c = Reflect.construct; return function (a, d, e) { a = c(a, d); e && Reflect.setPrototypeOf(a, e.prototype); return a } } return function (a, d, e) { void 0 === e && (e = a); e = n(e.prototype || Object.prototype); return Function.prototype.apply.call(a, e, d) || e } }(), t;
+  if ("function" == typeof Object.setPrototypeOf) t = Object.setPrototypeOf; else { var u; a: { var v = { a: !0 }, w = {}; try { w.__proto__ = v; u = w.a; break a } catch (b) { } u = !1 } t = u ? function (b, c) { b.__proto__ = c; if (b.__proto__ !== c) throw new TypeError(b + " is not extensible"); return b } : null } var x = t;
+  if (!ShadowRoot.prototype.createElement) {
+    var y = window.HTMLElement, A = window.customElements.define, B = window.customElements.get, C = window.customElements, D = new WeakMap, E = new WeakMap, F = new WeakMap, G = new WeakMap; window.CustomElementRegistry = function () { this.l = new Map; this.o = new Map; this.j = new Map; this.h = new Map }; window.CustomElementRegistry.prototype.define = function (b, c) {
+      b = b.toLowerCase(); if (void 0 !== this.i(b)) throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': the name \"" + b + '" has already been used with this registry');
+      if (void 0 !== this.o.get(c)) throw new DOMException("Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry"); var a = c.prototype.attributeChangedCallback, d = new Set(c.observedAttributes || []); H(c, d, a); a = {
+        g: c, connectedCallback: c.prototype.connectedCallback, disconnectedCallback: c.prototype.disconnectedCallback, adoptedCallback: c.prototype.adoptedCallback, attributeChangedCallback: a, formAssociated: c.formAssociated, formAssociatedCallback: c.prototype.formAssociatedCallback,
+        formDisabledCallback: c.prototype.formDisabledCallback, formResetCallback: c.prototype.formResetCallback, formStateRestoreCallback: c.prototype.formStateRestoreCallback, observedAttributes: d
+      }; this.l.set(b, a); this.o.set(c, a); d = B.call(C, b); d || (d = I(b), A.call(C, b, d)); this === window.customElements && (F.set(c, a), a.s = d); if (d = this.h.get(b)) { this.h.delete(b); d = l(d); for (var e = d.next(); !e.done; e = d.next())e = e.value, E.delete(e), J(e, a, !0) } a = this.j.get(b); void 0 !== a && (a.resolve(c), this.j.delete(b)); return c
+    }; window.CustomElementRegistry.prototype.upgrade =
+      function () { K.push(this); C.upgrade.apply(C, arguments); K.pop() }; window.CustomElementRegistry.prototype.get = function (b) { var c; return null == (c = this.l.get(b)) ? void 0 : c.g }; window.CustomElementRegistry.prototype.i = function (b) { return this.l.get(b) }; window.CustomElementRegistry.prototype.whenDefined = function (b) { var c = this.i(b); if (void 0 !== c) return Promise.resolve(c.g); var a = this.j.get(b); void 0 === a && (a = {}, a.promise = new Promise(function (d) { return a.resolve = d }), this.j.set(b, a)); return a.promise }; window.CustomElementRegistry.prototype.m =
+        function (b, c, a) { var d = this.h.get(c); d || this.h.set(c, d = new Set); a ? d.add(b) : d.delete(b) }; var L; window.HTMLElement = function () { var b = L; if (b) return L = void 0, b; var c = F.get(this.constructor); if (!c) throw new TypeError("Illegal constructor (custom element class must be registered with global customElements registry to be newable)"); b = Reflect.construct(y, [], c.s); Object.setPrototypeOf(b, this.constructor.prototype); D.set(b, c); return b }; window.HTMLElement.prototype = y.prototype; var I = function (b) {
+          function c() {
+            var a =
+              Reflect.construct(y, [], this.constructor); Object.setPrototypeOf(a, HTMLElement.prototype); a: { var d = a.getRootNode(); if (!(d === document || d instanceof ShadowRoot)) { d = K[K.length - 1]; if (d instanceof CustomElementRegistry) { var e = d; break a } d = d.getRootNode(); d === document || d instanceof ShadowRoot || (d = (null == (e = G.get(d)) ? void 0 : e.getRootNode()) || document) } e = d.customElements } e = e || window.customElements; (d = e.i(b)) ? J(a, d) : E.set(a, e); return a
+          } q.Object.defineProperty(c, "formAssociated", {
+            configurable: !0, enumerable: !0,
+            get: function () { var a = window.customElements.i(b); return a ? a.formAssociated : !1 }
+          }); c.prototype.connectedCallback = function () { var a = D.get(this); a ? a.connectedCallback && a.connectedCallback.apply(this, arguments) : E.get(this).m(this, b, !0) }; c.prototype.disconnectedCallback = function () { var a = D.get(this); a ? a.disconnectedCallback && a.disconnectedCallback.apply(this, arguments) : E.get(this).m(this, b, !1) }; c.prototype.adoptedCallback = function () {
+            var a, d; null == (a = D.get(this)) || null == (d = a.adoptedCallback) || d.apply(this,
+              arguments)
+          }; c.prototype.formAssociatedCallback = function () { var a = D.get(this); if (a && a.formAssociated) { var d; null == a || null == (d = a.formAssociatedCallback) || d.apply(this, arguments) } }; c.prototype.formDisabledCallback = function () { var a = D.get(this); if (null == a ? 0 : a.formAssociated) { var d; null == a || null == (d = a.formDisabledCallback) || d.apply(this, arguments) } }; c.prototype.formResetCallback = function () { var a = D.get(this); if (null == a ? 0 : a.formAssociated) { var d; null == a || null == (d = a.formResetCallback) || d.apply(this, arguments) } };
+          c.prototype.formStateRestoreCallback = function () { var a = D.get(this); if (null == a ? 0 : a.formAssociated) { var d; null == a || null == (d = a.formStateRestoreCallback) || d.apply(this, arguments) } }; return c
+        }, H = function (b, c, a) {
+          if (0 !== c.size && void 0 !== a) {
+            var d = b.prototype.setAttribute; d && (b.prototype.setAttribute = function (f, k) { f = f.toLowerCase(); if (c.has(f)) { var z = this.getAttribute(f); d.call(this, f, k); a.call(this, f, z, k) } else d.call(this, f, k) }); var e = b.prototype.removeAttribute; e && (b.prototype.removeAttribute = function (f) {
+              f =
+              f.toLowerCase(); if (c.has(f)) { var k = this.getAttribute(f); e.call(this, f); a.call(this, f, k, null) } else e.call(this, f)
+            }); var g = b.prototype.toggleAttribute; g && (b.prototype.toggleAttribute = function (f, k) { f = f.toLowerCase(); if (c.has(f)) { var z = this.getAttribute(f); g.call(this, f, k); k = this.getAttribute(f); a.call(this, f, z, k) } else g.call(this, f, k) })
+          }
+        }, M = function (b) { var c = Object.getPrototypeOf(b); if (c !== window.HTMLElement) return c === y ? Object.setPrototypeOf(b, window.HTMLElement) : M(c) }, J = function (b, c, a) {
+          a = void 0 ===
+            a ? !1 : a; Object.setPrototypeOf(b, c.g.prototype); D.set(b, c); L = b; try { new c.g } catch (d) { M(c.g), new c.g } c.attributeChangedCallback && c.observedAttributes.forEach(function (d) { b.hasAttribute(d) && c.attributeChangedCallback.call(b, d, null, b.getAttribute(d)) }); a && c.connectedCallback && b.isConnected && c.connectedCallback.call(b)
+        }, N = Element.prototype.attachShadow; Element.prototype.attachShadow = function (b) { var c = N.apply(this, arguments); b.customElements && (c.customElements = b.customElements); return c }; var K = [document],
+          O = function (b, c, a) { var d = (a ? Object.getPrototypeOf(a) : b.prototype)[c]; b.prototype[c] = function () { K.push(this); var e = d.apply(a || this, arguments); void 0 !== e && G.set(e, this); K.pop(); return e } }; O(ShadowRoot, "createElement", document); O(ShadowRoot, "importNode", document); O(Element, "insertAdjacentHTML"); var P = function (b) { var c = Object.getOwnPropertyDescriptor(b.prototype, "innerHTML"); Object.defineProperty(b.prototype, "innerHTML", Object.assign({}, c, { set: function (a) { K.push(this); c.set.call(this, a); K.pop() } })) }; P(Element);
+    P(ShadowRoot); Object.defineProperty(window, "customElements", { value: new CustomElementRegistry, configurable: !0, writable: !0 }); if (window.ElementInternals && window.ElementInternals.prototype.setFormValue) {
+      var Q = new WeakMap, R = HTMLElement.prototype.attachInternals, methods = ["setFormValue", "setValidity", "checkValidity", "reportValidity"]; HTMLElement.prototype.attachInternals = function (b) { for (var c = [], a = 0; a < arguments.length; ++a)c[a] = arguments[a]; c = R.call.apply(R, [this].concat(m(c))); Q.set(c, this); return c }; methods.forEach(function (b) {
+        var c =
+          window.ElementInternals.prototype, a = c[b]; c[b] = function (d) { for (var e = [], g = 0; g < arguments.length; ++g)e[g] = arguments[g]; g = Q.get(this); if (!0 === D.get(g).formAssociated) return null == a ? void 0 : a.call.apply(a, [this].concat(m(e))); throw new DOMException("Failed to execute " + a + " on 'ElementInternals': The target element is not a form-associated custom element."); }
+      }); var RadioNodeList = function (b) { var c = r(Array, [].concat(m(b)), this.constructor); c.h = b; return c }, S = RadioNodeList, T = Array; S.prototype = n(T.prototype);
+      S.prototype.constructor = S; if (x) x(S, T); else for (var U in T) if ("prototype" != U) if (Object.defineProperties) { var V = Object.getOwnPropertyDescriptor(T, U); V && Object.defineProperty(S, U, V) } else S[U] = T[U]; S.u = T.prototype; q.Object.defineProperty(RadioNodeList.prototype, "value", { configurable: !0, enumerable: !0, get: function () { var b; return (null == (b = this.h.find(function (c) { return !0 === c.checked })) ? void 0 : b.value) || "" } }); var HTMLFormControlsCollection = function (b) {
+        var c = this, a = new Map; b.forEach(function (d, e) {
+          var g = d.getAttribute("name"),
+          f = a.get(g) || []; c[+e] = d; f.push(d); a.set(g, f)
+        }); this.length = b.length; a.forEach(function (d, e) { d && (c[e] = 1 === d.length ? d[0] : new RadioNodeList(d)) })
+      }; HTMLFormControlsCollection.prototype.namedItem = function (b) { return this[b] }; var W = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements"); Object.defineProperty(HTMLFormElement.prototype, "elements", { get: function () { var b = W.get.call(this, []), c = []; b = l(b); for (var a = b.next(); !a.done; a = b.next()) { a = a.value; var d = D.get(a); d && !0 !== d.formAssociated || c.push(a) } return new HTMLFormControlsCollection(c) } })
+    }
+  };
+}).call(typeof globalThis === 'object' ? globalThis : window);

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.42",
+  "version": "0.0.2-beta.44",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,6 @@
     "@web/dev-server-rollup": "0.5.2",
     "@web/dev-server-storybook": "0.7.4",
     "@web/storybook-prebuilt": "0.1.37",
-    "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "app-root-path": "3.1.0",
     "autoprefixer": "10.4.14",
     "chokidar": "3.5.3",
@@ -36,9 +35,10 @@
     "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.7.3",
+    "lit": "2.8.0",
     "lodash": "4.17.21",
     "path-is-inside": "1.0.2",
     "postcss": "8.4.27",

package/scripts/utils/index.mjs

@@ -293,7 +293,7 @@ const createTokens = async () => {
 
 const componentDefiner = async () => {
   const compList = await analyze();
-  let componentDefinition = `import '@webcomponents/scoped-custom-element-registry';`;
+  let componentDefinition = `import '@muonic/muon/js/scoped-custom-element-registry.min.js';`;
 
   componentDefinition += compList.map(({ file, exportName }) => {
     return `import { ${exportName} } from '${file}';
@@ -315,7 +315,7 @@ const componentDefiner = async () => {
 
 const componentImportExport = async () => {
   const compList = await analyze();
-  let componentDefinition = `import '@webcomponents/scoped-custom-element-registry';`;
+  let componentDefinition = `import '@muonic/muon/js/scoped-custom-element-registry.min.js';`;
 
   componentDefinition += compList.map(({ file, exportName }) => {
     return `import { ${exportName} } from '${file}';

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

@@ -64,7 +64,7 @@ testRunner('getConfig config file', async (t) => {
 const componentsDefinitionMacro = async (t, expected) => {
   const componentDefinition = await utilsLibrary.componentDefiner();
   t.true(componentDefinition !== undefined);
-  t.true(componentDefinition.indexOf(`import '@webcomponents/scoped-custom-element-registry';`) > -1);
+  t.true(componentDefinition.indexOf(`import '@muonic/muon/js/scoped-custom-element-registry.min.js';`) > -1);
   Object.keys(expected).forEach((component) => {
     t.true(componentDefinition.indexOf(`import { ${expected[component]} } from '${process.cwd()}/components/${component}/src/${component}-component.js';`) > -1);
     t.true(componentDefinition.indexOf(`customElements.define('muon-${component}', ${expected[component]});`) > -1);
@@ -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);
 };
 

package/web-test-runner.browserstack.config.mjs

@@ -23,7 +23,7 @@ export default {
     `<html>
       <head>
         <script type="module">
-          import '@webcomponents/scoped-custom-element-registry';
+          import '@muonic/muon/js/scoped-custom-element-registry.min.js';
         </script>
       </head>
       <body>

package/web-test-runner.config.mjs

@@ -7,7 +7,7 @@ export default {
     `<html>
       <head>
         <script type="module">
-          import '@webcomponents/scoped-custom-element-registry';
+          import '@muonic/muon/js/scoped-custom-element-registry.min.js';
         </script>
       </head>
       <body>
@@ -39,6 +39,10 @@ export default {
       branches: 99,
       functions: 99,
       lines: 99
-    }
+    },
+    exclude: [
+      '**/node_modules/**',
+      '**/js/*.min.js'
+    ]
   }
 };