@maggioli-design-system/mds-input 1.0.0

package/dist/collection/components/mds-input/mds-input.js

@@ -0,0 +1,586 @@
+import { Component, Element, Event, Host, Method, Prop, State, Watch, h, } from '@stencil/core';
+import clsx from 'clsx';
+export class MdsInput {
+  constructor() {
+    this.hasFocus = false;
+    /**
+     * Specifies whether the element should have autocomplete enabled
+     */
+    this.autocomplete = 'off';
+    /**
+     * Specifies that the element should automatically get focus when the page loads
+     */
+    this.autofocus = false;
+    /**
+     * If true, the element is displayed as disabled
+     */
+    this.disabled = false;
+    /**
+     * Specifies that the element is read-only
+     */
+    this.readonly = false;
+    /**
+     * Specifies that the element must be filled out before submitting the form
+     */
+    this.required = false;
+    /**
+     * Specifies the type of input element
+     */
+    this.type = 'text';
+    /**
+     * Specifies the value of the input element
+     */
+    this.value = '';
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      this.keyDownEvent.emit(ev);
+    };
+    this.onBlur = () => {
+      this.hasFocus = false;
+      this.blurEvent.emit();
+    };
+    this.onFocus = (ev) => {
+      const input = ev.target;
+      this.hasFocus = true;
+      this.focusEvent.emit();
+      if (this.readonly) {
+        // setTimeout to avoid Safari 14.1.2
+        // to unselect text when mouse is clicked slowly
+        setTimeout(() => {
+          input.select();
+        }, 10);
+      }
+    };
+  }
+  componentWillLoad() {
+    // If the mds-input has a tabindex attribute we get the value
+    // and pass it down to the native input, then remove it from the
+    // mds-input to avoid causing tabbing twice on the same element
+    if (this.el.hasAttribute('tabindex')) {
+      const tabindex = this.el.getAttribute('tabindex');
+      this.tabindex = tabindex !== null ? parseInt(tabindex) : undefined;
+      this.el.removeAttribute('tabindex');
+    }
+  }
+  /**
+   * Emits the change event when the component value changes
+   */
+  valueChanged() {
+    this.changeEvent.emit({ value: this.value === null ? this.value : this.value.toString() });
+  }
+  /**
+   * Sets focus on the specified `my-input`.
+   * Use this method instead
+   * of the global `input.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput !== null) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  getInputElement() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return Promise.resolve(this.nativeInput);
+  }
+  getValue() {
+    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+  }
+  render() {
+    const value = this.getValue();
+    return (h(Host, null,
+      this.type === 'textarea'
+        ? h("textarea", { class: clsx('input', this.icon && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
+        : h("input", { class: clsx('input', this.icon && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }),
+      this.required && h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"),
+      this.disabled && h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"),
+      this.readonly && h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"),
+      this.variant && this.variantTip && h("mds-text", { typography: "option", class: "tip-variant bottom-1" }, this.variantTip),
+      this.datalist &&
+        h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+          h("option", { value: element });
+        })),
+      this.icon && h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
+  }
+  static get is() { return "mds-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mds-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mds-input.css"]
+  }; }
+  static get properties() { return {
+    "autocomplete": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AutocompleteType",
+        "resolved": "\"additional-name\" | \"address\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-additional-name\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"email\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"impp\" | \"language\" | \"name\" | \"new-password\" | \"nickname\" | \"off\" | \"on\" | \"one-time-code\" | \"organization\" | \"organization-title\" | \"photo\" | \"postal-code\" | \"sex\" | \"street-address\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"transaction-amount\" | \"transaction-currency\" | \"url\" | \"username\"",
+        "references": {
+          "AutocompleteType": {
+            "location": "import",
+            "path": "../../types/autocomplete"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies whether the element should have autocomplete enabled"
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "'off'"
+    },
+    "autofocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies that the element should automatically get focus when the page loads"
+      },
+      "attribute": "autofocus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "datalist": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A list of search terms to be searched from the input field,\nit should be used with type=\"search\" input."
+      }
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If true, the element is displayed as disabled"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "An icon displayed at the right of the input"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maximum value\nuse it with input type=\"number\" or type=\"date\"\nExample: max=\"180\", max=\"2046-12-04\""
+      },
+      "attribute": "max",
+      "reflect": false
+    },
+    "maxlength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the maximum number of characters allowed in an element\nuse it with input type=\"number\""
+      },
+      "attribute": "maxlength",
+      "reflect": false
+    },
+    "min": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the minimum value\nuse it with input type=\"number\" or type=\"date\"\nExample: min=\"-3\", min=\"1988-04-15\""
+      },
+      "attribute": "min",
+      "reflect": false
+    },
+    "minlength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the minimum number of characters allowed in an element\nuse it with input type=\"number\""
+      },
+      "attribute": "minlength",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Is needed to reference the form data after the form is submitted"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "pattern": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a regular expression that element\\'s value is checked against"
+      },
+      "attribute": "pattern",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a short hint that describes the expected value of the element"
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies that the element is read-only"
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies that the element must be filled out before submitting the form"
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ThemeStatusVariantType",
+        "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+        "references": {
+          "ThemeStatusVariantType": {
+            "location": "import",
+            "path": "../../types/variant"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets the variant of the input field"
+      },
+      "attribute": "variant",
+      "reflect": true
+    },
+    "variantTip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets the word(s) of the variant of the input field"
+      },
+      "attribute": "variant-tip",
+      "reflect": false
+    },
+    "step": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the interval between legal numbers in an input field"
+      },
+      "attribute": "step",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "InputTextType",
+        "resolved": "\"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\"",
+        "references": {
+          "InputTextType": {
+            "location": "import",
+            "path": "../../types/input-text-type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the type of input element"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "InputValueType",
+        "resolved": "number | string",
+        "references": {
+          "InputValueType": {
+            "location": "import",
+            "path": "../../types/input-value-type"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the value of the input element"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "hasFocus": {}
+  }; }
+  static get events() { return [{
+      "method": "changeEvent",
+      "name": "changeEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits an InputChangeEventDetail when the value of the input element changes"
+      },
+      "complexType": {
+        "original": "InputValue",
+        "resolved": "InputValue",
+        "references": {
+          "InputValue": {
+            "location": "import",
+            "path": "./meta/interfaces"
+          }
+        }
+      }
+    }, {
+      "method": "keyDownEvent",
+      "name": "keyDownEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits a KeyboardEvent when a keboard key is pressed on the focused input element"
+      },
+      "complexType": {
+        "original": "KeyboardEvent",
+        "resolved": "KeyboardEvent",
+        "references": {
+          "KeyboardEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "blurEvent",
+      "name": "blurEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits a void event when input element is blurred"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "focusEvent",
+      "name": "focusEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits a void event when input element is focused"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the specified `my-input`.\nUse this method instead\nof the global `input.focus()`.",
+        "tags": []
+      }
+    },
+    "getInputElement": {
+      "complexType": {
+        "signature": "() => Promise<HTMLInputElement | HTMLTextAreaElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLInputElement": {
+            "location": "global"
+          },
+          "HTMLTextAreaElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLInputElement | HTMLTextAreaElement>"
+      },
+      "docs": {
+        "text": "Returns the native `<input>` element used under the hood.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueChanged"
+    }]; }
+}

package/dist/collection/components/mds-input/meta/interfaces.js

@@ -0,0 +1 @@
+export {};