@duetds/components 8.0.6 → 8.1.0

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

@@ -3,1277 +3,1281 @@
  */
 import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 const icons = {
-  search: searchIcon,
-  email: emailIcon,
+    search: searchIcon,
+    email: emailIcon,
 };
 export class DuetInput {
-  constructor() {
-    /**
-     * Own Properties
-     */
-    this.inputId = createID("DuetInput");
-    this.clearId = createID("DuetInputClear");
-    this.labelId = createID("DuetLabel");
-    this.topCaptionId = createID("DuetCaptionTop");
-    this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
-    this.errorId = createID("DuetError");
-    this.disallowPatternRegex = null;
-    this.clearLabel = {
-      en: "Clear",
-      fi: "Tyhjennä",
-      sv: "Rensa",
-    };
-    this.timeAnnouncement = {
-      en: "Time",
-      fi: "Aika",
-      sv: "Tid",
-    };
-    this.showPasswordLabel = {
-      en: "Show password",
-      fi: "Näytä salasana",
-      sv: "Visa lösenord",
-    };
-    this.hidePasswordLabel = {
-      en: "Hide password",
-      fi: "Piilota salasana",
-      sv: "Dölj lösenord",
-    };
-    this.passwordShownAriaAnnouncement = {
-      en: "Password is shown",
-      fi: "Salasana näytetään",
-      sv: "Lösenordet visas",
-    };
-    this.passwordHiddenAriaAnnouncement = {
-      en: "Password is hidden",
-      fi: "Salasana on piilotettu",
-      sv: "Lösenordet är dolt",
-    };
-    /**
-     * Component event handling.
-     */
-    this.onInput = (ev) => {
-      if (this.disallowPatternRegex) {
-        cleanValue(this.nativeInput, this.disallowPatternRegex);
-      }
-      this.value = this.nativeInput.value || "";
-      this.duetInput.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-input",
-      });
-    };
-    this.onBlur = (ev) => {
-      // prevent blur event when focus moves to the reveal password button or the input itself
-      if (ev.relatedTarget === this.nativeInput || ev.relatedTarget === this.togglePasswordRevealedButton) {
-        return;
-      }
-      if (this.variation === "revealable" && this.isPasswordRevealed) {
-        this.isPasswordRevealed = false;
-      }
-      this.isFocused = false;
-      this.duetBlur.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-input",
-      });
-    };
-    this.onFocus = (ev) => {
-      this.isFocused = true;
-      this.duetFocus.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-input",
-      });
-    };
-    this.onClear = (ev) => {
-      this.duetClear.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-input",
-      });
-    };
-    /**
-     * Private functions
-     */
-    this.getDescribedBy = () => {
-      const describedBy = [];
-      if (this.isCaptionVisible && this.topCaptionId) {
-        describedBy.push(this.topCaptionId);
-      }
-      if (this.accessibleDescribedBy) {
-        describedBy.push(this.accessibleDescribedBy);
-      }
-      if (this.error) {
-        describedBy.push(this.errorId);
-      }
-      return describedBy.length > 0 ? describedBy.join(" ") : null;
-    };
-    this.handleClearClick = event => {
-      const clearing = this.clearInput();
-      this.onClear(event);
-      return clearing;
-    };
-    this.keyHandler = event => {
-      if (isEscapeKey(event) && this.clear) {
-        this.handleClearClick(event);
-      }
-      if (isEnterKey(event) && this.variation === "revealable") {
-        if (event.target === this.togglePasswordRevealedButton) {
-          event.stopPropagation();
+    constructor() {
+        /**
+         * Own Properties
+         */
+        this.inputId = createID("DuetInput");
+        this.clearId = createID("DuetInputClear");
+        this.labelId = createID("DuetLabel");
+        this.topCaptionId = createID("DuetCaptionTop");
+        this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+        this.errorId = createID("DuetError");
+        this.disallowPatternRegex = null;
+        this.clearLabel = {
+            en: "Clear",
+            fi: "Tyhjennä",
+            sv: "Rensa",
+        };
+        this.timeAnnouncement = {
+            en: "Time",
+            fi: "Aika",
+            sv: "Tid",
+        };
+        this.showPasswordLabel = {
+            en: "Show password",
+            fi: "Näytä salasana",
+            sv: "Visa lösenord",
+        };
+        this.hidePasswordLabel = {
+            en: "Hide password",
+            fi: "Piilota salasana",
+            sv: "Dölj lösenord",
+        };
+        this.passwordShownAriaAnnouncement = {
+            en: "Password is shown",
+            fi: "Salasana näytetään",
+            sv: "Lösenordet visas",
+        };
+        this.passwordHiddenAriaAnnouncement = {
+            en: "Password is hidden",
+            fi: "Salasana on piilotettu",
+            sv: "Lösenordet är dolt",
+        };
+        /**
+         * Component event handling.
+         */
+        this.onInput = (ev) => {
+            if (this.disallowPatternRegex) {
+                cleanValue(this.nativeInput, this.disallowPatternRegex);
+            }
+            this.value = this.nativeInput.value || "";
+            this.duetInput.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-input",
+            });
+        };
+        this.onBlur = (ev) => {
+            // prevent blur event when focus moves to the reveal password button or the input itself
+            if (ev.relatedTarget === this.nativeInput || ev.relatedTarget === this.togglePasswordRevealedButton) {
+                return;
+            }
+            if (this.variation === "revealable" && this.isPasswordRevealed) {
+                this.isPasswordRevealed = false;
+            }
+            this.isFocused = false;
+            this.duetBlur.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-input",
+            });
+        };
+        this.onFocus = (ev) => {
+            this.isFocused = true;
+            this.duetFocus.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-input",
+            });
+        };
+        this.onClear = (ev) => {
+            this.duetClear.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-input",
+            });
+        };
+        /**
+         * Private functions
+         */
+        this.getDescribedBy = () => {
+            const describedBy = [];
+            if (this.isCaptionVisible && this.topCaptionId) {
+                describedBy.push(this.topCaptionId);
+            }
+            if (this.accessibleDescribedBy) {
+                describedBy.push(this.accessibleDescribedBy);
+            }
+            if (this.error) {
+                describedBy.push(this.errorId);
+            }
+            return describedBy.length > 0 ? describedBy.join(" ") : null;
+        };
+        this.handleClearClick = event => {
+            const clearing = this.clearInput();
+            this.onClear(event);
+            return clearing;
+        };
+        this.keyHandler = event => {
+            if (isEscapeKey(event) && this.clear) {
+                this.handleClearClick(event);
+            }
+            if (isEnterKey(event) && this.variation === "revealable") {
+                if (event.target === this.togglePasswordRevealedButton) {
+                    event.stopPropagation();
+                }
+                else {
+                    this.isPasswordRevealed = false;
+                }
+            }
+            return event;
+        };
+        this.togglePasswordRevealed = () => {
+            this.isPasswordRevealed = !this.isPasswordRevealed;
+        };
+        this.getInputType = () => {
+            if (this.variation === "revealable") {
+                return this.isPasswordRevealed ? "text" : "password";
+            }
+            return this.type;
+        };
+        this.language = getLanguage();
+        this.isPasswordRevealed = undefined;
+        this.isFocused = false;
+        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.accessibleLiveError = "polite";
+        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, "gu") : null;
+    }
+    valueChanged() {
+        var _a;
+        if (((_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
+            const restoreCursor = resetCursor(this.nativeInput);
+            this.nativeInput.value = this.value;
+            // restore selection position after having set value
+            // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
+            restoreCursor();
+        }
+        this.isCaptionVisible = !!this.caption;
+        const emitEvent = () => this.duetChange.emit({
+            value: this.value,
+            component: "duet-input",
+        });
+        if (this.debounce === 0) {
+            emitEvent();
         }
         else {
-          this.isPasswordRevealed = false;
+            clearTimeout(this.timeoutId);
+            this.timeoutId = setTimeout(emitEvent, this.debounce);
         }
-      }
-      return event;
-    };
-    this.togglePasswordRevealed = () => {
-      this.isPasswordRevealed = !this.isPasswordRevealed;
-    };
-    this.getInputType = () => {
-      if (this.variation === "revealable") {
-        return this.isPasswordRevealed ? "text" : "password";
-      }
-      return this.type;
-    };
-    this.language = getLanguage();
-    this.isPasswordRevealed = undefined;
-    this.isFocused = false;
-    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.accessibleLiveError = "polite";
-    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, "gu") : null;
-  }
-  valueChanged() {
-    var _a;
-    if (((_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
-      const restoreCursor = resetCursor(this.nativeInput);
-      this.nativeInput.value = this.value;
-      // restore selection position after having set value
-      // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
-      restoreCursor();
-    }
-    this.isCaptionVisible = !!this.caption;
-    const emitEvent = () => this.duetChange.emit({
-      value: this.value,
-      component: "duet-input",
-    });
-    if (this.debounce === 0) {
-      emitEvent();
     }
-    else {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = setTimeout(emitEvent, this.debounce);
-    }
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.disallowedPatternChange();
-    this.isCaptionVisible = !!this.caption;
-  }
-  componentDidLoad() {
-    if (this.variation === "revealable" && this.nativeInput.form) {
-      this.nativeInput.form.addEventListener("submit", () => {
-        this.isPasswordRevealed = false;
-      });
-    }
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this);
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeInput) {
-      this.nativeInput.focus(options);
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.disallowedPatternChange();
+        this.isCaptionVisible = !!this.caption;
     }
-  }
-  /**
-   * Reset the cursor position on the native element
-   * `input.resetCursor()`.
-   */
-  async resetCursor() {
-    if (this.nativeInput) {
-      const restoreCursor = resetCursor(this.nativeInput);
-      this.nativeInput.value = this.value;
-      restoreCursor();
+    componentDidLoad() {
+        if (this.variation === "revealable" && this.nativeInput.form) {
+            this.nativeInput.form.addEventListener("submit", () => {
+                this.isPasswordRevealed = false;
+            });
+        }
     }
-  }
-  /**
-   * Reset the cursor position on the native element
-   * `input.resetCursor()`.
-   */
-  async clearInput() {
-    if (this.nativeInput) {
-      this.nativeInput.value = "";
-      this.nativeInput.focus();
-      this.value = "";
+    connectedCallback() {
+        connectLanguageChangeObserver(this);
     }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.inputId;
-    const inputProps = {};
-    if (this.numericKeyboard) {
-      inputProps.inputmode = "numeric";
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
     }
-    // Set validation regexes
-    if (this.pattern && this.type !== "tel") {
-      inputProps.pattern = this.pattern;
+    /**
+     * Sets focus on the specified `duet-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus(options) {
+        if (this.nativeInput) {
+            this.nativeInput.focus(options);
+        }
     }
-    else if (!this.pattern && this.type === "tel") {
-      inputProps.pattern = "[0-9+ ]+";
+    /**
+     * Reset the cursor position on the native element
+     * `input.resetCursor()`.
+     */
+    async resetCursor() {
+        if (this.nativeInput) {
+            const restoreCursor = resetCursor(this.nativeInput);
+            this.nativeInput.value = this.value;
+            restoreCursor();
+        }
     }
-    let selectedTime;
-    if (this.value) {
-      selectedTime = new Date();
-      try {
-        selectedTime.setHours(Number(this.value.slice(0, 2)), Number(this.value.slice(3, 5)), 0, 0);
-      }
-      catch (e) {
-        selectedTime = undefined;
-      }
+    /**
+     * Reset the cursor position on the native element
+     * `input.resetCursor()`.
+     */
+    async clearInput() {
+        if (this.nativeInput) {
+            this.nativeInput.value = "";
+            this.nativeInput.focus();
+            this.value = "";
+        }
     }
-    const hasInputIcon = !this.icon &&
-      this.type !== "text" &&
-      this.type !== "tel" &&
-      this.type !== "password" &&
-      this.type !== "time" &&
-      this.variation !== "button";
-    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[this.language]} ${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.variation !== "button" &&
-          (!!this.icon ||
-            (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
-        "has-error": !!this.error,
-        "has-clear": this.clear,
-        "has-focus": this.isFocused,
-        disabled: this.disabled,
-      } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, 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.getInputType(), 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.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "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.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (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": true,
-        "duet-input-clear-icon-single": !hasInputIcon,
-        "duet-input-clear-icon-double": !!this.icon,
-        "duet-input-clear-icon-button": this.variation === "button",
-      } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", 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" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
-        ? this.hidePasswordLabel[this.language]
-        : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed
-      ? this.passwordShownAriaAnnouncement[this.language]
-      : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "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"
-      },
-      "accessibleLiveError": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"off\" | \"polite\" | \"assertive\"",
-          "resolved": "\"assertive\" | \"off\" | \"polite\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
-        },
-        "attribute": "accessible-live-error",
-        "reflect": false,
-        "defaultValue": "\"polite\""
-      },
-      "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",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "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",
-              "id": "src/common-types.d.ts::DuetMargin"
-            }
-          }
-        },
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
-            }
-          }
-        },
-        "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\" | \"revealable\"",
-          "references": {
-            "DuetVariationType": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
-        },
-        "attribute": "variation",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": true,
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
-            }
-          }
-        },
-        "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 | null",
-          "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",
-              "id": "src/common-types.d.ts::DuetIconName"
-            }
-          }
-        },
-        "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",
-              "id": "src/common-types.d.ts::DuetTooltipDirection"
-            }
-          }
-        },
-        "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 states() {
-    return {
-      "language": {},
-      "isPasswordRevealed": {},
-      "isFocused": {}
-    };
-  }
-  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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
-            }
-          }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        if (Build.isServer) {
+            return;
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
-            }
-          }
+        const identifier = this.identifier || this.inputId;
+        const inputProps = {};
+        if (this.numericKeyboard) {
+            inputProps.inputmode = "numeric";
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
-            }
-          }
+        // Set validation regexes
+        if (this.pattern && this.type !== "tel") {
+            inputProps.pattern = this.pattern;
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
-            }
-          }
+        else if (!this.pattern && this.type === "tel") {
+            inputProps.pattern = "[0-9+ ]+";
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
-              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
+        let selectedTime;
+        if (this.value) {
+            selectedTime = new Date();
+            try {
+                selectedTime.setHours(Number(this.value.slice(0, 2)), Number(this.value.slice(3, 5)), 0, 0);
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            catch (e) {
+                selectedTime = undefined;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "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",
-              "id": "global::Promise"
+        const hasInputIcon = !this.icon &&
+            this.type !== "text" &&
+            this.type !== "tel" &&
+            this.type !== "password" &&
+            this.type !== "time" &&
+            this.variation !== "button";
+        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[this.language]} ${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.variation !== "button" &&
+                    (!!this.icon ||
+                        (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
+                "has-error": !!this.error,
+                "has-clear": this.clear,
+                "has-focus": this.isFocused,
+                disabled: this.disabled,
+            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, 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.getInputType(), 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.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "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.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (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": true,
+                "duet-input-clear-icon-single": !hasInputIcon,
+                "duet-input-clear-icon-double": !!this.icon,
+                "duet-input-clear-icon-button": this.variation === "button",
+            } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", 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" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+                ? this.hidePasswordLabel[this.language]
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed
+            ? this.passwordShownAriaAnnouncement[this.language]
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", null)), h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "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"
+            },
+            "accessibleLiveError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"off\" | \"polite\" | \"assertive\"",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+                },
+                "attribute": "accessible-live-error",
+                "reflect": false,
+                "defaultValue": "\"polite\""
+            },
+            "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",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
+                        }
+                    }
+                },
+                "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\" | \"revealable\"",
+                    "references": {
+                        "DuetVariationType": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation of button. Use \"button\" to render a button element next to the input. Use \"revealable\" to render a button that reveals the password."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
+                        }
+                    }
+                },
+                "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 | null",
+                    "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",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/common-types.d.ts::DuetTooltipDirection"
+                        }
+                    }
+                },
+                "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\""
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
-          "tags": []
-        }
-      },
-      "clearInput": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "isPasswordRevealed": {},
+            "isFocused": {}
+        };
+    }
+    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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-input/duet-input.tsx",
+                            "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+                    "tags": []
+                }
+            },
+            "clearInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "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 elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "disallowPattern",
+                "methodName": "disallowedPatternChange"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }