@xplortech/apollo-core 1.0.0-beta.6 → 1.0.0-beta.8

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { v4 as uuid } from 'uuid';
 import flatpickr from 'flatpickr';
 import '../../../font-awesome/fontawesome';
@@ -8,23 +8,27 @@ const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8
   : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
 export class XplInput {
   constructor() {
-    /**
-     * See https://flatpickr.js.org/formatting/
-     */
+    this._id = undefined;
+    this.autocomplete = undefined;
     this.dateFormat = 'Y-m-d';
-    /**
-     * For datepicker inputs, whether to allow only a single
-     * date or a range of dates. (Multiple non-consecutive
-     * dates planned to be supported in the future.)
-     */
+    this.description = undefined;
+    this.disabled = undefined;
+    this.error = undefined;
+    this.label = undefined;
+    this.max = undefined;
+    this.maxCharacterCount = undefined;
+    this.min = undefined;
     this.mode = 'single';
-    /**
-     * Whether to render as a singleline text input or
-     * as a multiline textarea. (If `true`, `pre` and `post`
-     * values will be ignored, if present.)
-     */
     this.multiline = false;
+    this.name = undefined;
+    this.placeholder = undefined;
+    this.post = undefined;
+    this.pre = undefined;
+    this.readonly = undefined;
+    this.required = undefined;
+    this.step = undefined;
     this.type = 'text';
+    this.value = undefined;
     this.characterCount = 0;
     this.passwordVisible = false;
   }
@@ -70,409 +74,392 @@ export class XplInput {
     if (type === 'password' && this.passwordVisible) {
       type = 'text';
     }
-    return (h(Host, { class: className },
-      h("label", { class: "xpl-input-label", htmlFor: this._id },
-        this.label,
-        this.description && h("small", null, this.description)),
-      h("div", { class: "xpl-input-wrapper" },
-        this.pre && !this.multiline && (h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre)),
-        !this.multiline ? (h("input", { autocomplete: this.type === 'date' ? 'off' : this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
-            this.input = el;
-          }, required: this.required, step: this.step, type: type, value: this.value })) : (h("textarea", { disabled: this.disabled, id: this._id, name: this.name, onInput: () => this.updateCharacterCount(), placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
-            this.input = el;
-          }, required: this.required }, this.value)),
-        this.type === 'date' && (h("span", { class: "xpl-input-calendar" },
-          h("i", { class: "far fa-calendar-alt" }))),
-        this.type === 'password' && (h("button", { class: "xpl-input-password", onClick: () => {
-            this.passwordVisible = !this.passwordVisible;
-          }, role: "presentation" },
-          h("span", { class: "sr-only" }, "Toggle password visibility"),
-          h("i", { class: "far fa-eye", style: {
-              display: this.passwordVisible
-                ? 'none'
-                : 'block',
-            } }),
-          h("i", { class: "far fa-eye-slash", style: {
-              display: this.passwordVisible
-                ? 'block'
-                : 'none',
-            } }))),
-        this.post && !this.multiline && (h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)),
-        this.multiline && this.maxCharacterCount !== undefined && (h("span", { class: "xpl-input-characters" },
-          this.characterCount,
-          "/",
-          this.maxCharacterCount))),
-      this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this._id },
-        h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-          h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })),
-        this.error))));
+    return (h(Host, { class: className }, h("label", { class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", null, this.description)), h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && (h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre)), !this.multiline ? (h("input", { autocomplete: this.type === 'date' ? 'off' : this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+        this.input = el;
+      }, required: this.required, step: this.step, type: type, value: this.value })) : (h("textarea", { disabled: this.disabled, id: this._id, name: this.name, onInput: () => this.updateCharacterCount(), placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+        this.input = el;
+      }, required: this.required }, this.value)), this.type === 'date' && (h("span", { class: "xpl-input-calendar" }, h("i", { class: "far fa-calendar-alt" }))), this.type === 'password' && (h("button", { class: "xpl-input-password", onClick: () => {
+        this.passwordVisible = !this.passwordVisible;
+      }, role: "presentation" }, h("span", { class: "sr-only" }, "Toggle password visibility"), h("i", { class: "far fa-eye", style: {
+        display: this.passwordVisible
+          ? 'none'
+          : 'block',
+      } }), h("i", { class: "far fa-eye-slash", style: {
+        display: this.passwordVisible
+          ? 'block'
+          : 'none',
+      } }))), this.post && !this.multiline && (h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)), this.multiline && this.maxCharacterCount !== undefined && (h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount))), this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this._id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error))));
   }
   static get is() { return "xpl-input"; }
-  static get properties() { return {
-    "_id": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Because `id` is a reserved HTMLElement attribute,\nwe prefix it with an underscore here so that it\ndoesn't get automatically applied to the outer container."
-      },
-      "attribute": "_id",
-      "reflect": false
-    },
-    "autocomplete": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "autocomplete",
-      "reflect": false
-    },
-    "dateFormat": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "See https://flatpickr.js.org/formatting/"
-      },
-      "attribute": "date-format",
-      "reflect": false,
-      "defaultValue": "'Y-m-d'"
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Optional text that appears below the input label."
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message."
-      },
-      "attribute": "error",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "max": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Only used when `type` = 'number' or 'date'"
-      },
-      "attribute": "max",
-      "reflect": false
-    },
-    "maxCharacterCount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "For multiline inputs, a max. character count will\ndisplay along with the current character count,\nand will automatically render as an error if the\ncharacter count exceeds the max."
-      },
-      "attribute": "max-character-count",
-      "reflect": false
-    },
-    "min": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Only used when `type` = 'number' or 'date'"
-      },
-      "attribute": "min",
-      "reflect": false
-    },
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'single' | /* \"multiple\" | */ 'range'",
-        "resolved": "\"range\" | \"single\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "For datepicker inputs, whether to allow only a single\ndate or a range of dates. (Multiple non-consecutive\ndates planned to be supported in the future.)"
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "'single'"
-    },
-    "multiline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Whether to render as a singleline text input or\nas a multiline textarea. (If `true`, `pre` and `post`\nvalues will be ignored, if present.)"
-      },
-      "attribute": "multiline",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "post": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A string (recommended max 3 characters) that gets shown\nvisually to the left of (before) the input."
-      },
-      "attribute": "post",
-      "reflect": false
-    },
-    "pre": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A string (recommended max 8 characters) that gets shown\nvisually to the right of (after) the input."
-      },
-      "attribute": "pre",
-      "reflect": false
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false
-    },
-    "step": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "step",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'date' | 'text' | 'number' | 'password'",
-        "resolved": "\"date\" | \"number\" | \"password\" | \"text\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'text'"
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Including a `value` will prepopulate the input\nwith the given string."
-      },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "characterCount": {},
-    "passwordVisible": {}
-  }; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Because `id` is a reserved HTMLElement attribute,\nwe prefix it with an underscore here so that it\ndoesn't get automatically applied to the outer container."
+        },
+        "attribute": "_id",
+        "reflect": false
+      },
+      "autocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "autocomplete",
+        "reflect": false
+      },
+      "dateFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "See https://flatpickr.js.org/formatting/"
+        },
+        "attribute": "date-format",
+        "reflect": false,
+        "defaultValue": "'Y-m-d'"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional text that appears below the input label."
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message."
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "max": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Only used when `type` = 'number' or 'date'"
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "maxCharacterCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "For multiline inputs, a max. character count will\ndisplay along with the current character count,\nand will automatically render as an error if the\ncharacter count exceeds the max."
+        },
+        "attribute": "max-character-count",
+        "reflect": false
+      },
+      "min": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Only used when `type` = 'number' or 'date'"
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'single' | /* \"multiple\" | */ 'range'",
+          "resolved": "\"range\" | \"single\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "For datepicker inputs, whether to allow only a single\ndate or a range of dates. (Multiple non-consecutive\ndates planned to be supported in the future.)"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "'single'"
+      },
+      "multiline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether to render as a singleline text input or\nas a multiline textarea. (If `true`, `pre` and `post`\nvalues will be ignored, if present.)"
+        },
+        "attribute": "multiline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Most inputs are used in forms, and should have a\n`name` associated with the input for handling form data."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "post": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A string (recommended max 3 characters) that gets shown\nvisually to the left of (before) the input."
+        },
+        "attribute": "post",
+        "reflect": false
+      },
+      "pre": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A string (recommended max 8 characters) that gets shown\nvisually to the right of (after) the input."
+        },
+        "attribute": "pre",
+        "reflect": false
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'date' | 'text' | 'number' | 'password'",
+          "resolved": "\"date\" | \"number\" | \"password\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Including a `value` will prepopulate the input\nwith the given string."
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "characterCount": {},
+      "passwordVisible": {}
+    };
+  }
 }