Feature/validation mixin

packages/library/components/inputter/src/inputter-component.js

@@ -2,7 +2,7 @@ import { css, html, MuonElement, unsafeCSS, classMap } from '@muon/library';
 import {
   INPUTTER_TYPE
 } from '@muon/library/build/tokens/es6/muon-tokens';
-import { FormElementMixin } from '@muon/library/mixins/form-element-mixin.js';
+import { ValidationMixin } from '../../../mixins/validation-mixin';
 import styles from './styles.css';
 
 /**
@@ -12,19 +12,13 @@ import styles from './styles.css';
  *
  */
 
-export class Inputter extends FormElementMixin(MuonElement) {
+export class Inputter extends ValidationMixin(MuonElement) {
 
   static get properties() {
     return {
-      validation: { type: Array },
       helper: { type: String },
-      labelID: { type: String }, // to override the need for a label, incase it is somewhere else on the page
       mask: { type: String },
       separator: { type: String },
-      ignoreSeparator: { type: Boolean },
-      disableNativeValidation: { type: Boolean },
-      disableEventBubbling: { type: Boolean },
-      showError: { type: Boolean },
       isHelperOpen: { type: Boolean }
     };
   }
@@ -37,16 +31,7 @@ export class Inputter extends FormElementMixin(MuonElement) {
     super();
 
     this.type = INPUTTER_TYPE;
-    this.pristine = true;
-    this._error = undefined;
-    this.maskInputValue = this.mask;
-    this.inFocus = null;
     this.isHelperOpen = false;
-    this.disableNativeValidation = false;
-  }
-
-  get dirty() {
-    return !this.pristine;
   }
 
   get validity() {
@@ -55,33 +40,18 @@ export class Inputter extends FormElementMixin(MuonElement) {
     return this._validity;
   }
 
-  get showLabel() {
-    if (this.labelID.length === 0) {
-      if (this.heading.length > 0 && this._inputType === this._inputTypes.MULTIPLE) {
-        const parent = this.parentElement;
-        const classes = {
-          'in-fieldset': parent.isFieldset // @TODO: make this change for fieldsets
-        };
-
-        return html`<span id="input-heading" class="${classMap(classes)}">${this.heading}</span>`;
-      }
-
-      return html`<slot name="label"></slot>`;
-    }
-    return undefined;
-  }
-
   get standardTemplate() {
     const classes = {
       'slotted-content': true,
-      'select-arrow': this._inputType === this._inputTypes.SELECT
+      'select-arrow': this._inputType === this._isSelect
     };
 
     return html`
       ${this._labelTemplate}
       <div class="${classMap(classes)}">
         ${this._htmlFormElementTemplate}
       </div>
+      ${this._validationMessageTemplate}
     `;
   }
 

packages/library/components/inputter/story.js

@@ -11,21 +11,21 @@ const innerInputText = (args) => `
 `;
 
 export const Standard = (args) => details.template(args, innerInputText);
-Standard.args = { label: 'A label', value: 'this is a test' };
+Standard.args = { label: 'A label', value: 'this is a test', validation: '["isRequired","minLength(6)"]' };
 
 const choiceInputText = (args) => `
   <h4 slot="heading">What is your heating source?</h4>
   <p slot="tip-details">more about this</p>
-  <input type="${args.inputtype}" name="question" value="gas" checked></input>
+  <input type="${args.inputtype}" name="question" value="gas"></input>
   <label for="gas">Gas</label>
   <input type="${args.inputtype}" name="question" value="electricity"></input>
   <label for="electricity">Electricity</label>
 `;
 export const Radio = (args) => details.template(args, choiceInputText);
-Radio.args = { inputtype: 'radio', label: 'A label', value: 'gas' };
+Radio.args = { inputtype: 'radio', label: 'A label', value: '', validation: '[&quot;isRequired&quot;]' };
 
 export const Checkbox = (args) => details.template(args, choiceInputText);
-Checkbox.args = { inputtype: 'checkbox', label: 'A label', value: 'gas' };
+Checkbox.args = { inputtype: 'checkbox', label: 'A label', value: '', validation: '[&quot;isRequired&quot;]' };
 
 const selectInputText = (args) => `
 <label slot="label" for="select-input">${args.label}</label>
@@ -48,3 +48,18 @@ const textareaInputText = (args) => `
 
 export const Textarea = (args) => details.template(args, textareaInputText);
 Textarea.args = { label: 'A label', value: 'gas' };
+
+const innerInputDate = (args) => `
+  <label slot="label">${args.label}</label>
+  <input type="text" value="${args.value}" />
+`;
+export const Date = (args) => details.template(args, innerInputDate);
+Date.args = { label: 'A label', value: '', validation: '[&quot;isRequired&quot;,&quot;minDate(\'11/11/2021\')&quot;]' };
+
+const innerInputTel = (args) => `
+  <label slot="label">${args.label}</label>
+  <input type="tel" value="${args.value}" pattern="[0-9]{3}" title="match the pattern"/>
+`;
+
+export const Tel = (args) => details.template(args, innerInputTel);
+Tel.args = { label: 'A label', value: '', validation: '[&quot;isRequired&quot;]' };

packages/library/index.js

@@ -17,6 +17,7 @@ import { AsyncDirective } from 'lit/async-directive.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { literal, html as staticHTML } from 'lit/static-html.js';
 import { until } from 'lit/directives/until.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { MuonElement } from '@muon/library/muon-element';
 
 export {
@@ -39,5 +40,6 @@ export {
   literal,
   staticHTML,
   until,
-  noChange
+  noChange,
+  repeat
 };

packages/library/mixins/form-element-mixin.js

@@ -90,6 +90,7 @@ export const FormElementMixin = (superClass) =>
     firstUpdated() {
       this._slottedInputs.map((input) => {
         input.addEventListener('change', this._onChange.bind(this));
+        input.addEventListener('blur', this._onBlur.bind(this));
       });
 
       if (!this._isMultiple) {
@@ -172,6 +173,15 @@ export const FormElementMixin = (superClass) =>
       this._fireChangeEvent();
     }
 
+    /**
+     * A method to handle `blur` event from the slotted html elements.
+     * @protected
+     * @override
+     */
+    _onBlur(blurEvent) {
+      blurEvent.stopPropagation();
+    }
+
     /**
      * A method to fire the 'change' custom event from the form element.
      * @protected