@duetds/components 6.2.3 → 6.2.5

package/lib/collection/components/duet-input/duet-input.js

@@ -3,7 +3,7 @@
  */
 import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
-import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
@@ -35,111 +35,6 @@ export class DuetInput {
       fi: "Aika",
       sv: "Tid",
     });
-    /**
-     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
-     */
-    this.accessibleDescribedBy = "";
-    /**
-     * Indicates value of any popup element associated with the input.
-     */
-    this.accessibleHasPopup = undefined;
-    /**
-     * Aria Details of the component
-     */
-    this.accessibleDetails = undefined;
-    /**
-     * String of id's that indicate alternative labels elements
-     */
-    this.accessibleLabelledBy = undefined;
-    /**
-     * Aria description the button
-     */
-    this.accessibleDescription = undefined;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the duetChange
-     * event after each keystroke.
-     */
-    this.debounce = 0;
-    /**
-     * If set, the input field will display a clear button that can be accessed with tabbing.
-     */
-    this.clear = false;
-    /**
-     * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
-     * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
-     */
-    this.echoPlaceholder = false;
-    /**
-     * Theme of the input.
-     */
-    this.theme = "";
-    /**
-     * Expands the input to fill 100% of the container width.
-     */
-    this.expand = false;
-    /**
-     * Makes the input component disabled. This prevents users from being able to
-     * interact with the input, and conveys its inactive state to assistive technologies.
-     */
-    this.disabled = false;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Set whether the input is required or not. Please note that this is necessary for
-     * accessible inputs when the user is required to fill them. When using this property
-     * you need to also set “novalidate” attribute to your form element to prevent
-     * browser from displaying its own validation errors.
-     */
-    this.required = false;
-    /**
-     * Type of the input.
-     */
-    this.type = "text";
-    /**
-     * Variation of button.
-     */
-    this.variation = "default";
-    /**
-     * Label for the input.
-     */
-    this.label = "label";
-    /**
-     * Display the input in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Enable numeric keyboard for the input.
-     */
-    this.numericKeyboard = false;
-    /**
-     * Used internally in Duet to adjust whether this component acts as e.g. number input.
-     */
-    this.component = "input";
-    /**
-     * Enable or disable automatic completion by the browser
-     */
-    this.autoComplete = "on";
-    /**
-     * A regular expression that matches any characters which should be *disallowed*.
-     * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
-     * e.g. the following will disallow any non-numeric characters `[^0-9]`
-     */
-    this.disallowPattern = null;
-    /**
-     * Tooltip to display next to the label of the input.
-     */
-    this.tooltip = "";
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
     /**
      * Component event handling.
      */
@@ -205,6 +100,45 @@ export class DuetInput {
       }
       return event;
     };
+    this.accessibleActiveDescendant = undefined;
+    this.accessibleAutocomplete = undefined;
+    this.accessibleControls = undefined;
+    this.accessibleOwns = undefined;
+    this.accessibleExpanded = undefined;
+    this.accessibleDescribedBy = "";
+    this.accessibleHasPopup = undefined;
+    this.accessibleDetails = undefined;
+    this.accessibleLabelledBy = undefined;
+    this.accessibleDescription = undefined;
+    this.debounce = 0;
+    this.clear = false;
+    this.caption = undefined;
+    this.echoPlaceholder = false;
+    this.theme = "";
+    this.expand = false;
+    this.disabled = false;
+    this.identifier = undefined;
+    this.margin = "auto";
+    this.required = false;
+    this.type = "text";
+    this.variation = "default";
+    this.label = "label";
+    this.error = "";
+    this.labelHidden = false;
+    this.numericKeyboard = false;
+    this.name = undefined;
+    this.pattern = undefined;
+    this.maxlength = undefined;
+    this.minlength = undefined;
+    this.placeholder = undefined;
+    this.component = "input";
+    this.role = undefined;
+    this.icon = undefined;
+    this.autoComplete = "on";
+    this.disallowPattern = null;
+    this.value = undefined;
+    this.tooltip = "";
+    this.tooltipDirection = "auto";
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
@@ -296,935 +230,929 @@ export class DuetInput {
         selectedTime = undefined;
       }
     }
-    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) },
-      this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement} ${selectedTime.toLocaleTimeString()}` : "")),
-      h("div", { class: {
-          "duet-input-container": true,
-          "duet-theme-turva": this.theme === "turva",
-          [`duet-input-variation-${this.variation}`]: true,
-          "duet-label-hidden": this.labelHidden,
-          "duet-input-top-caption-shown": this.isCaptionVisible,
-          "has-icon": !!this.icon ||
-            (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time"),
-          "has-error": !!this.error,
-          "has-clear": this.clear,
-        } },
-        h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
-        this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
-        this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        h("div", { class: "duet-input-relative" },
-          this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)),
-          h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
-              "duet-input": true,
-              disabled: this.disabled,
-              "is-number": this.component === "number",
-              "is-date": this.component === "date",
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy
-              ? `${this.errorId} ${this.labelId}  ${this.accessibleLabelledBy}`
-              : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
-          !this.icon &&
-            this.type !== "text" &&
-            this.type !== "tel" &&
-            this.type !== "password" &&
-            this.type !== "time" &&
-            this.variation !== "button" && (h("div", { class: "duet-input-icon" },
-            h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))),
-          this.clear && this.value && (h("div", { class: "duet-input-clear-icon" },
-            h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" },
-              h("duet-icon", { margin: "none", size: "xx-small", name: "activity-close", color: "currentColor" })))),
-          this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" },
-            h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
-          this.variation === "button" && h("slot", { name: "button" }),
-          h("slot", null)),
-        h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { class: {
+        "duet-input-container": true,
+        "duet-theme-turva": this.theme === "turva",
+        [`duet-input-variation-${this.variation}`]: true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-input-top-caption-shown": this.isCaptionVisible,
+        "has-icon": !!this.icon ||
+          (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time"),
+        "has-error": !!this.error,
+        "has-clear": this.clear,
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
+        "duet-input": true,
+        disabled: this.disabled,
+        "is-number": this.component === "number",
+        "is-date": this.component === "date",
+      }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy
+        ? `${this.errorId} ${this.labelId}  ${this.accessibleLabelledBy}`
+        : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.icon &&
+      this.type !== "text" &&
+      this.type !== "tel" &&
+      this.type !== "password" &&
+      this.type !== "time" &&
+      this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: "duet-input-clear-icon" }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "xx-small", name: "activity-close", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-input.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-input.css"]
-  }; }
-  static get properties() { return {
-    "accessibleActiveDescendant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a related component\u2019s visually focused element."
-      },
-      "attribute": "accessible-active-descendant",
-      "reflect": false
-    },
-    "accessibleAutocomplete": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates what kind of user input completion suggestions are provided."
-      },
-      "attribute": "accessible-autocomplete",
-      "reflect": false
-    },
-    "accessibleControls": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
-      },
-      "attribute": "accessible-controls",
-      "reflect": false
-    },
-    "accessibleOwns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id of a component owned by the input."
-      },
-      "attribute": "accessible-owns",
-      "reflect": false
-    },
-    "accessibleExpanded": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expanded state of the element, if needed"
-      },
-      "attribute": "accessible-expanded",
-      "reflect": false
-    },
-    "accessibleDescribedBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
-      },
-      "attribute": "accessible-described-by",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "accessibleHasPopup": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates value of any popup element associated with the input."
-      },
-      "attribute": "accessible-has-popup",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleDetails": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria Details of the component"
-      },
-      "attribute": "accessible-details",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleLabelledBy": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "String of id's that indicate alternative labels elements"
-      },
-      "attribute": "accessible-labelled-by",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "accessibleDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria description the button"
-      },
-      "attribute": "accessible-description",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "debounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the amount of time, in milliseconds, to wait to trigger the duetChange\nevent after each keystroke."
-      },
-      "attribute": "debounce",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "clear": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set, the input field will display a clear button that can be accessed with tabbing."
-      },
-      "attribute": "clear",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Caption (underneath label) that can be set as a way of adding extra information"
-      },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "echoPlaceholder": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
-      },
-      "attribute": "echo-placeholder",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleActiveDescendant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a related component\u2019s visually focused element."
+        },
+        "attribute": "accessible-active-descendant",
+        "reflect": false
+      },
+      "accessibleAutocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates what kind of user input completion suggestions are provided."
+        },
+        "attribute": "accessible-autocomplete",
+        "reflect": false
+      },
+      "accessibleControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this prop to add an aria-controls attribute. Use the attribute to\nindicate the id of a component controlled by this component."
+        },
+        "attribute": "accessible-controls",
+        "reflect": false
+      },
+      "accessibleOwns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component owned by the input."
+        },
+        "attribute": "accessible-owns",
+        "reflect": false
+      },
+      "accessibleExpanded": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expanded state of the element, if needed"
+        },
+        "attribute": "accessible-expanded",
+        "reflect": false
+      },
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "accessibleHasPopup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates value of any popup element associated with the input."
+        },
+        "attribute": "accessible-has-popup",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleDetails": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria Details of the component"
+        },
+        "attribute": "accessible-details",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "String of id's that indicate alternative labels elements"
+        },
+        "attribute": "accessible-labelled-by",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "accessibleDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria description the button"
+        },
+        "attribute": "accessible-description",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the amount of time, in milliseconds, to wait to trigger the duetChange\nevent after each keystroke."
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "clear": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set, the input field will display a clear button that can be accessed with tabbing."
+        },
+        "attribute": "clear",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caption (underneath label) that can be set as a way of adding extra information"
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "echoPlaceholder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+        },
+        "attribute": "echo-placeholder",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the input."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "expand": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expands the input to fill 100% of the container width."
-      },
-      "attribute": "expand",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Makes the input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the input."
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the input."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "expand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expands the input to fill 100% of the container width."
+        },
+        "attribute": "expand",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the input."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetInputType",
-        "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\"",
-        "references": {
-          "DuetInputType": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetInputType",
+          "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\"",
+          "references": {
+            "DuetInputType": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Type of the input."
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "\"text\""
-    },
-    "variation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetVariationType",
-        "resolved": "\"button\" | \"default\"",
-        "references": {
-          "DuetVariationType": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of the input."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetVariationType",
+          "resolved": "\"button\" | \"default\"",
+          "references": {
+            "DuetVariationType": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Variation of button."
-      },
-      "attribute": "variation",
-      "reflect": false,
-      "defaultValue": "\"default\""
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for the input."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"label\""
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display the input in error state along with an error message."
-      },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "numericKeyboard": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable numeric keyboard for the input."
-      },
-      "attribute": "numeric-keyboard",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the input."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "pattern": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A regular expression to check the value against. Please note that this\nuses native HTML5 pattern validation."
-      },
-      "attribute": "pattern",
-      "reflect": false
-    },
-    "maxlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
-      },
-      "attribute": "maxlength",
-      "reflect": false
-    },
-    "minlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
-      },
-      "attribute": "minlength",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hint text to display."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "component": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetInputComponentType",
-        "resolved": "\"date\" | \"input\" | \"number\"",
-        "references": {
-          "DuetInputComponentType": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation of button."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for the input."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"label\""
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display the input in error state along with an error message."
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the label, but still show it to screen readers."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "numericKeyboard": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable numeric keyboard for the input."
+        },
+        "attribute": "numeric-keyboard",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the input."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "pattern": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A regular expression to check the value against. Please note that this\nuses native HTML5 pattern validation."
+        },
+        "attribute": "pattern",
+        "reflect": false
+      },
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use maxlength to specify the maximum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        "attribute": "maxlength",
+        "reflect": false
+      },
+      "minlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use minlength to specify the minimum length of the value that can be entered.\nPlease note that this uses native HTML5 pattern validation."
+        },
+        "attribute": "minlength",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hint text to display."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "component": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetInputComponentType",
+          "resolved": "\"date\" | \"input\" | \"number\"",
+          "references": {
+            "DuetInputComponentType": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used internally in Duet to adjust whether this component acts as e.g. number input."
-      },
-      "attribute": "component",
-      "reflect": false,
-      "defaultValue": "\"input\""
-    },
-    "role": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines a specific role attribute for the input."
-      },
-      "attribute": "role",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used internally in Duet to adjust whether this component acts as e.g. number input."
+        },
+        "attribute": "component",
+        "reflect": false,
+        "defaultValue": "\"input\""
+      },
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines a specific role attribute for the input."
+        },
+        "attribute": "role",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon to display on the right side (from Duet\u2019s icons). Example: \"form-location\""
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "autoComplete": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable or disable automatic completion by the browser"
-      },
-      "attribute": "auto-complete",
-      "reflect": false,
-      "defaultValue": "\"on\""
-    },
-    "disallowPattern": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A regular expression that matches any characters which should be *disallowed*.\nThis differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.\ne.g. the following will disallow any non-numeric characters `[^0-9]`"
-      },
-      "attribute": "disallow-pattern",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Value of the input."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "tooltip": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tooltip to display next to the label of the input."
-      },
-      "attribute": "tooltip",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "tooltipDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetTooltipDirection",
-        "resolved": "\"auto\" | \"left\" | \"right\"",
-        "references": {
-          "DuetTooltipDirection": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display on the right side (from Duet\u2019s icons). Example: \"form-location\""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "autoComplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable automatic completion by the browser"
+        },
+        "attribute": "auto-complete",
+        "reflect": false,
+        "defaultValue": "\"on\""
+      },
+      "disallowPattern": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A regular expression that matches any characters which should be *disallowed*.\nThis differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.\ne.g. the following will disallow any non-numeric characters `[^0-9]`"
+        },
+        "attribute": "disallow-pattern",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of the input."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip to display next to the label of the input."
+        },
+        "attribute": "tooltip",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "tooltipDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetTooltipDirection",
+          "resolved": "\"auto\" | \"left\" | \"right\"",
+          "references": {
+            "DuetTooltipDirection": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
-      },
-      "attribute": "tooltip-direction",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    }
-  }; }
-  static get events() { return [{
-      "method": "duetInput",
-      "name": "duetInput",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a keyboard input ocurred."
-      },
-      "complexType": {
-        "original": "DuetInputEvent",
-        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
-        "references": {
-          "DuetInputEvent": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+        },
+        "attribute": "tooltip-direction",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetInput",
+        "name": "duetInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a keyboard input ocurred."
+        },
+        "complexType": {
+          "original": "DuetInputEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+          "references": {
+            "DuetInputEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetChange",
-      "name": "duetChange",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value has changed."
-      },
-      "complexType": {
-        "original": "DuetInputEvent",
-        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
-        "references": {
-          "DuetInputEvent": {
-            "location": "local"
+      }, {
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed."
+        },
+        "complexType": {
+          "original": "DuetInputEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+          "references": {
+            "DuetInputEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetBlur",
-      "name": "duetBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input loses focus."
-      },
-      "complexType": {
-        "original": "DuetInputEvent",
-        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
-        "references": {
-          "DuetInputEvent": {
-            "location": "local"
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input loses focus."
+        },
+        "complexType": {
+          "original": "DuetInputEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+          "references": {
+            "DuetInputEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetClear",
-      "name": "duetClear",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input is cleared."
-      },
-      "complexType": {
-        "original": "DuetInputEvent",
-        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
-        "references": {
-          "DuetInputEvent": {
-            "location": "local"
+      }, {
+        "method": "duetClear",
+        "name": "duetClear",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input is cleared."
+        },
+        "complexType": {
+          "original": "DuetInputEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+          "references": {
+            "DuetInputEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetFocus",
-      "name": "duetFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the input has focus."
-      },
-      "complexType": {
-        "original": "DuetInputEvent",
-        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
-        "references": {
-          "DuetInputEvent": {
-            "location": "local"
+      }, {
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the input has focus."
+        },
+        "complexType": {
+          "original": "DuetInputEvent",
+          "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+          "references": {
+            "DuetInputEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the specified `duet-input`. Use this method instead of the global\n`input.focus()`.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets focus on the specified `duet-input`. Use this method instead of the global\n`input.focus()`.",
-        "tags": []
-      }
-    },
-    "resetCursor": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "resetCursor": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
-        "tags": []
-      }
-    },
-    "clearInput": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "clearInput": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
-        "tags": []
+        "docs": {
+          "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "disallowPattern",
-      "methodName": "disallowedPatternChange"
-    }, {
-      "propName": "value",
-      "methodName": "valueChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disallowPattern",
+        "methodName": "disallowedPatternChange"
+      }, {
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
 }