@muonic/muon 0.0.2-beta.0

package/mixins/form-associate-mixin.js

@@ -0,0 +1,36 @@
+import { dedupeMixin } from '@muonic/muon';
+
+/**
+ * A mixin to associate the component to the enclosing native form.
+ *
+ * @mixin FormElementMixin
+ */
+
+export const FormAssociateMixin = dedupeMixin((superClass) =>
+  class FormAssociateMixinClass extends superClass {
+
+    static get properties() {
+      return {
+        _internals: {
+          type: Object,
+          state: true
+        }
+      };
+    }
+
+    static get formAssociated() {
+      return true;
+    }
+
+    constructor() {
+      super();
+      this._internals = this.attachInternals();
+    }
+
+    updated(changedProperties) {
+      if (changedProperties.has('value')) {
+        this._internals.setFormValue(this.value);
+      }
+    }
+  }
+);

package/mixins/form-element-mixin.js

@@ -0,0 +1,378 @@
+import { html, MuonElement, dedupeMixin } from '@muonic/muon';
+
+/**
+ * A mixin to hold base setup for a form element.
+ *
+ * @mixin FormElementMixin
+ */
+
+export const FormElementMixin = dedupeMixin((superClass) =>
+  class FormElementMixinClass extends superClass {
+
+    static get properties() {
+      return {
+        name: {
+          type: String,
+          reflect: true
+        },
+
+        value: {
+          type: String,
+          reflect: true
+        },
+
+        heading: {
+          type: String
+        },
+
+        labelID: {
+          type: String
+        },
+
+        _inputElement: {
+          type: Boolean,
+          state: true
+        },
+
+        _id: {
+          type: String,
+          state: true
+        },
+
+        _inputTypes: {
+          type: Object,
+          state: true
+        }
+      };
+    }
+
+    constructor() {
+      super();
+
+      this._inputTypes = {
+        RADIO: 'radio',
+        CHECKBOX: 'checkbox',
+        SELECT: 'select',
+        SEARCH: 'search',
+        DATE: 'date',
+        SINGLE: 'single'
+      };
+
+      this.value = '';
+      this.labelID = '';
+      this.heading = '';
+      this._inputElement = true;
+      this._id = `${this._randomId}-input`;
+    }
+
+    static get shadowRootOptions() {
+      return { ...MuonElement.shadowRootOptions, delegatesFocus: true };
+    }
+
+    /**
+     * A method to generate random Id for html elements.
+     *
+     * @returns {string} - Random generated id.
+     * @protected
+     */
+    get _randomId() {
+      return `mnid-${Math.random().toString(36).substring(2, 15)}`;
+    }
+
+    /**
+     * A method to get input type from the slotted html form elements.
+     *
+     * @returns {string} Input type.
+     * @protected
+     */
+    get _inputType() {
+      const inputType = this.querySelector('input')?.type;
+      if (inputType && Object.values(this._inputTypes).indexOf(inputType) > -1) {
+        return inputType;
+      } else if (this.querySelector('select')) {
+        return this._inputTypes.SELECT;
+      }
+      return this._inputTypes.SINGLE;
+    }
+
+    firstUpdated() {
+      super.firstUpdated();
+      if (!this.name) {
+        this.name = this._slottedInputs?.[0]?.name ?? '';
+      }
+      if (!this._isMultiple) {
+        if (this.labelID?.length > 0) {
+          this._slottedInputs.forEach((slot) => {
+            slot.setAttribute('aria-labelledby', this.labelID);
+          });
+        } else {
+          this._id = this._slottedInputs[0]?.getAttribute('id') || this._id;
+          this._slottedInputs[0]?.setAttribute('id', this._id);
+          this._slottedLabel?.setAttribute('for', this._id);
+        }
+      }
+      this.__syncValue(true);
+
+      this._boundChangeEvent = (changeEvent) => {
+        this._onChange(changeEvent);
+      };
+
+      this._boundBlurEvent = (blurEvent) => {
+        this._onBlur(blurEvent);
+      };
+
+      this._boundInputEvent = (inputEvent) => {
+        this._onInput(inputEvent);
+      };
+
+      this._slottedInputs.forEach((input) => {
+        input.addEventListener('change', this._boundChangeEvent);
+        input.addEventListener('blur', this._boundBlurEvent);
+        input.addEventListener('input', this._boundInputEvent);
+      });
+    }
+
+    focus() {
+      this.updateComplete.then(() => {
+        this._slottedInputs[0].focus();
+      });
+    }
+
+    reset() {
+      this.value = this._slottedValue; // get values from slotted html form elements
+    }
+    /**
+     * A method to sync the value property of the component with value of slotted input elements.
+     *
+     * @param {boolean} firstSync - If first time syncing values.
+     * @returns {void}
+     * @private
+     */
+    __syncValue(firstSync) {
+      if (this._isMultiple) { //Check when component has slotted multi-input
+        if (!this.value && this.__checkedInput) {
+          // If component has null value and slotted input has checked value(s),
+          // assign the value of checked slotted input(s) to value property of the component.
+          this.value = this.__checkedInput;
+        } else if (this.value && !this.__checkedInput) {
+          // If component has not null value and slotted input has no value(s) checked,
+          // mark the multi-input as checked if its value(s) is part of component value property.
+          const values = this.value.toString().split(',');
+          this._slottedInputs.filter((input) => {
+            return values.includes(input.value) && !input.checked;
+          }).forEach((input) => {
+            input.checked = true;
+            if (firstSync) {
+              input.defaultChecked = true;
+            }
+          });
+        }
+      } else { //When component has single-input slot
+        // eslint-disable-next-line no-lonely-if
+        if (!this.value && this._slottedInputs?.[0]?.value) {
+          // If component has null value and slotted input has value,
+          // assign the value of slotted inputs to value property of the component.
+          this.value = this._processFormChangeValue(this._slottedInputs[0].value);
+        } else if (this.value && !this._slottedInputs[0].value) {
+          // If component has not null value and slotted input has null value,
+          // assign the value of the component to value of the slotted input.
+          this._slottedInputs[0].value = this.value;
+
+          if (firstSync) {
+            this._slottedInputs[0].defaultValue = this.value;
+          }
+        }
+      }
+    }
+
+    /**
+     * A method to get all slotted HTML form elements.
+     *
+     * @protected
+     * @override
+     */
+    get _slottedInputs() {
+      const slot = this.querySelectorAll('input, textarea, select');
+      return Array.from(slot);
+    }
+
+    /**
+     * A method to get slotted label element.
+     *
+     * @protected
+     * @override
+     */
+    get _slottedLabel() {
+      return this.querySelector('label[slot="label"]');
+    }
+
+    /**
+     * A method to get slotted element value.
+     *
+     * @protected
+     * @override
+     */
+    get _slottedValue() {
+      return this._isMultiple ? this.__checkedInput : this._slottedInputs[0].value;
+    }
+
+    /**
+     * A method to determine if slotted form element has multiple option.
+     *
+     * @protected
+     * @override
+     */
+    get _isMultiple() {
+      return this._inputType === this._inputTypes.RADIO || this._inputType === this._inputTypes.CHECKBOX;
+    }
+
+    /**
+     * A method to determine if slotted form element has only single option.
+     *
+     * @protected
+     * @override
+     */
+    get _isSingle() {
+      return !(this._isMultiple || this._isSelect);
+    }
+
+    /**
+     * A method to determine if slotted form element has only select option.
+     *
+     * @protected
+     * @override
+     */
+    get _isSelect() {
+      return this._inputType === this._inputTypes.SELECT;
+    }
+
+    /**
+     * A method to handle `change` event from the slotted html elements.
+     *
+     * @protected
+     * @override
+     */
+    _onChange(changeEvent) {
+      changeEvent.stopPropagation();
+      changeEvent.preventDefault();
+      this.value = this._processFormChangeValue(this._slottedValue);
+      this._fireChangeEvent();
+    }
+
+    /**
+     * A method to handle `blur` event from the slotted html elements.
+     *
+     * @protected
+     * @override
+     */
+    _onBlur(blurEvent) {
+      blurEvent.stopPropagation();
+    }
+
+    /**
+     * A method to handle `input` event from the slotted html elements.
+     *
+     * @protected
+     * @override
+     */
+    _onInput(inputEvent) {
+      inputEvent.stopPropagation();
+      inputEvent.preventDefault();
+    }
+
+    /**
+     * A method to fire the 'change' custom event from the form element.
+     *
+     * @protected
+     * @override
+     */
+    _fireChangeEvent() {
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          cancelable: false,
+          detail: {
+            value: this.value
+          }
+        })
+      );
+    }
+
+    /**
+     * A method to remove whitespace from the form element value.
+     *
+     * @param {string} value - Form element value to be trimmed.
+     * @returns {string} - Trimmed value.
+     * @private
+     */
+    __removeWhitespace(value) {
+      return this._isSingle ? value.trim() : value;
+    }
+
+    /**
+     * A method to process form element value before assigning to 'value' property.
+     *
+     * @param {string} value - Form elment value to be processed.
+     * @returns {string} - Processed value.
+     * @protected
+     * @override
+     */
+    _processFormChangeValue(value) {
+      return this.__removeWhitespace(value);
+    }
+
+    /**
+     * A method to get values of checked form element.
+     *
+     * @returns {string} - Array of selected values for multiple option input.
+     * @private
+     */
+    get __checkedInput() {
+      return Array.from(this.querySelectorAll('input')).filter((input) => {
+        return input.checked;
+      }).map((input) => {
+        return input.value;
+      }).toString();
+    }
+
+    /**
+     * A method to get anonymous slot template to hold html form elements.
+     *
+     * @protected
+     * @override
+     */
+    get _addSlottedContent() {
+      return html`<slot></slot>`;
+    }
+
+    /**
+     * A method to get label slot template to hold html form element label.
+     *
+     * @protected
+     * @override
+     */
+    get _addLabel() {
+      return this.labelID.length === 0 ? html`<slot name="label"></slot>` : html``;
+    }
+
+    /**
+     * A method to get heading slot template to hold html form element heading.
+     *
+     * @protected
+     * @override
+     */
+    get _addHeading() {
+      return html`<span class="input-heading">${this.heading}</span>`;
+    }
+
+    /**
+     * A method to get standard template for type `standard`.
+     *
+     * @protected
+     * @override
+     */
+    get standardTemplate() {
+      return this._addSlottedContent;
+    }
+  }
+);

package/mixins/image-holder-mixin.js

@@ -0,0 +1,20 @@
+import { dedupeMixin } from '@muonic/muon';
+
+export const ImageHolderMixin = dedupeMixin((superClass) =>
+  class ImageHolderdMixinClass extends superClass {
+
+    static get properties() {
+      return {
+        image: {
+          type: String
+        },
+        alt: {
+          type: String
+        },
+        background: {
+          type: Boolean
+        }
+      };
+    }
+  }
+);

package/mixins/mask-mixin.js

@@ -0,0 +1,159 @@
+import { html, ifDefined, dedupeMixin } from '@muonic/muon';
+import { FormElementMixin } from '@muon/mixins/form-element-mixin';
+
+/**
+ * A mixin to enable mask and separator features to a form element.
+ * `mask` property is supported for input of type text, date, tel.
+ * `separator` property is supported for input of type text, date, tel.
+ *
+ * @mixin
+ */
+
+export const MaskMixin = dedupeMixin((superclass) =>
+  class MaskMixinClass extends FormElementMixin(superclass) {
+    static get properties() {
+      return {
+        mask: {
+          type: String
+        },
+
+        separator: {
+          type: String
+        }
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.mask = '';
+      this.separator = '';
+    }
+
+    firstUpdated() {
+      super.firstUpdated();
+
+      if (this.mask) {
+        this._slottedInputs.map((input) => {
+          input.setAttribute('maxlength', this.mask.length);
+        });
+      }
+    }
+
+    /**
+     * A method to process the form element value in response to `input` event.
+     *
+     * @param {string} value - Value to be processed with mask and separator.
+     * @returns {string} - Processed value.
+     * @protected
+     */
+    _processMaskInputValue(value) {
+      if (!this._isSingle) {
+        return value;
+      }
+      const inputElement = this._slottedInputs[0];
+      if (ifDefined(this.separator)) {
+        value = this.updateValueAndCursor(inputElement);
+      } else {
+        value = inputElement.value;
+      }
+      return value;
+    }
+
+    /**
+     * A method to process the form element value in response to `change` event.
+     *
+     * @param {string} value - Value to be processed with mask and separator.
+     * @returns {string} - Processed value.
+     * @protected
+     */
+    _processMaskChangeValue(value) {
+      if (ifDefined(this.separator)) {
+        value = this.formatWithMaskAndSeparator(value);
+        this._slottedInputs[0].value = value;
+      }
+      return value;
+    }
+
+    /**
+     * A method to update the form element value with separator in adjusted indices and cursor position.
+     *
+     * @param {HTMLElement} input - HTMLInputElement value to be updated with seperators.
+     * @returns {string} - Updated form element value.
+     */
+    updateValueAndCursor(input) {
+      let value = input.value;
+      let cursor = input.selectionStart;
+      const diff = this.value.length - value.length;
+
+      if (diff > 0 && this.mask.charAt(cursor) === this.separator) {
+        value = value.slice(0, cursor - 1) + (cursor < value.length ? value.slice(cursor) : '');
+        cursor -= 1;
+      }
+      const formattedValue = this.formatWithMaskAndSeparator(value);
+      input.value = formattedValue;
+
+      if (this.mask.charAt(cursor) === this.separator) {
+        cursor += 1;
+      }
+      this.updateComplete.then(() => {
+        input.setSelectionRange(cursor, cursor);
+      });
+
+      return formattedValue;
+    }
+
+    /**
+     * A method to format the form element value with separator adjusted to correct indices
+     * after editing the form element value.
+     *
+     * @param {string} value - Value of the form element.
+     * @returns {string} - Value with adjusted separator in correct indices.
+     */
+    formatWithMaskAndSeparator(value) {
+      const formattedValue = this.__formatInputWithoutSeparator(value);
+      const parts = this.mask.split(this.separator);
+      let processedValue = '';
+      let length = 0;
+      let currentLength = 0;
+
+      for (let i = 0; i < parts.length && length < formattedValue.length; i++) {
+        const remainingLength = formattedValue.length - length;
+        const splitPoint = remainingLength > parts[i].length ? parts[i].length : remainingLength;
+
+        processedValue += formattedValue.substr(length, splitPoint);
+        currentLength += parts[i].length;
+
+        if (i < (parts.length - 1) && processedValue.length === currentLength) {
+          processedValue += this.separator;
+          currentLength += 1;
+        }
+
+        length += parts[i].length;
+      }
+
+      return processedValue;
+    }
+
+    /**
+     * A method to remove separator from the value of the form element.
+     *
+     * @param {string} value - Form element value.
+     * @returns {string} - Value with separator removed.
+     */
+    __formatInputWithoutSeparator(value) {
+      return value.split(this.separator).join('');
+    }
+
+    get _addMask() {
+      if (this.mask && this._isSingle) {
+        const length = this.value ? this.value.length : 0;
+        let updatedMask = new Array(length + 1).join(' ');
+        updatedMask += this.mask.slice(length);
+        return html`<div aria-hidden="true" class="input-mask">${updatedMask}</div>`;
+      } else {
+        return undefined;
+      }
+    }
+  }
+);