@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

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

@@ -1,724 +1,724 @@
-import { Host, h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { StzhInputDescription } from "./stzh-input-description";
-let inputCounter = 0;
-/**
- * @slot - Slot for label content
- * @slot description - Slot for description
- * @slot description-long - Slot for long description (in popover)
- * @slot error - Slot for error
- * @slot button-right - Slot for right button
- */
-export class StzhInput {
-  constructor() {
-    /** Whether the input is a textarea or an input field */
-    this.multiline = false;
-    /** If input field, this defines the type (if `search`, a search icon will be displayed) */
-    this.type = "text";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */
-    this.clearable = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** The value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /**
-     * Specify what the user agent has to provide as automated assistance.
-     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values
-     */
-    this.autocomplete = "on";
-    /** Whether autocomplete should be turned off  */
-    this.noAutocomplete = false;
-    /** Label */
-    this.label = "";
-    /** Size variant */
-    this.size = "default";
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
-    this.onClearClick = (event) => {
-      this.value = "";
-      this.input.focus();
-      this.stzhChange.emit({
-        component: "stzh-input",
-        originalEvent: event,
-        value: this.value
-      });
-    };
-    this.onInput = (event) => {
-      this.value = this.input.value;
-      this.stzhChange.emit({
-        component: "stzh-input",
-        originalEvent: event,
-        value: this.value
-      });
-    };
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent('focus', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-input",
-        originalEvent: event
-      });
-    };
-    /** Input blur event */
-    this.onBlur = (event) => {
-      // fixes weird bug where autofill selection doesn't get removed
-      this.input.value = this.input.value;
-      const blurEvent = new FocusEvent('blur', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-input",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus input field */
-  async setFocus() {
-    this.input.focus();
-  }
-  valueWatcher(newValue) {
-    this.filled = newValue !== "";
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  typeWatcher(newValue) {
-    const types = [
-      "text", "search", "password", "email", "url", "tel"
-    ];
-    if (!this.multiline && !types.includes(newValue)) {
-      throw new Error(`Type ${newValue} not supported`);
-    }
-  }
-  renderTextarea() {
-    return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
-  }
-  renderInput() {
-    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
-  }
-  async componentWillLoad() {
-    this.inputId = `stzh-input-${inputCounter++}`;
-    this.typeWatcher(this.type);
-    this.valueWatcher(this.value);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'input');
-    }
-  }
-  render() {
-    var _a;
-    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');
-    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-input": true,
-      "stzh-input--has-button-right": buttonRightSlotUsed
-        || this.type === "search"
-        || (this.clearable && this.filled && !this.readonly && !this.disabled),
-      "stzh-input--has-description": descriptionUsed,
-      "stzh-input--has-description-long": descriptionLongUsed,
-      "stzh-input--has-error": errorUsed,
-      "stzh-input--is-invalid": this.invalid,
-      "stzh-input--is-disabled": this.disabled,
-      "stzh-input--is-readonly": this.readonly,
-      "stzh-input--is-required": this.required,
-      "stzh-input--has-placeholder": !!this.placeholder,
-      "stzh-input--is-filled": this.filled,
-      "stzh-input--is-clearable": this.clearable,
-      "stzh-input--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
-      [`stzh-input--size-${this.size}`]: !!this.size,
-      [`stzh-input--type-${this.type}`]: !!this.type,
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), h("label", { class: "stzh-input__label", htmlFor: this.inputId }, this.label ? this.label : h("slot", null), this.showMarker &&
-      h("span", { class: "stzh-input__marker" }, h("span", { class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-input__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText))), this.clearable || this.type === "search"
-      ?
-        h("stzh-button", { class: "stzh-input__button-right", icon: this.disabled || this.readonly || !this.filled ? "search" : "close-circle", "icon-only": true, variant: "input", onClick: this.onClearClick, disabled: this.disabled || this.readonly || !this.filled, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })
-      :
-        h("slot", { name: "button-right" })), h(StzhInputDescription, { classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
-  }
-  static get is() { return "stzh-input"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhLocaleComponent",
-          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
-          "references": {
-            "StzhLocaleComponent": {
-              "location": "import",
-              "path": "../../utils/translation-utils"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      },
-      "multiline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is a textarea or an input field"
-        },
-        "attribute": "multiline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "rows": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Rows attribute if input element is textarea"
-        },
-        "attribute": "rows",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\"",
-          "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If input field, this defines the type (if `search`, a search icon will be displayed)"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"text\""
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the element is readonly or not"
-        },
-        "attribute": "readonly",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the element is disabled or not"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true)"
-        },
-        "attribute": "clearable",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showMarker": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
-        },
-        "attribute": "show-marker",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "minlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum of characters"
-        },
-        "attribute": "minlength",
-        "reflect": false
-      },
-      "maxlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maxlength of characters"
-        },
-        "attribute": "maxlength",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the input element"
-        },
-        "attribute": "name",
-        "reflect": true
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the input element"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Description message (use description slot as alternative)"
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "descriptionLong": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
-        },
-        "attribute": "description-long",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "One or multiple error message (use error slot as alternative)"
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Invalid status"
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Required status"
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder text"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "inputmode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specify inputmode.\r\nSee [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values"
-        },
-        "attribute": "inputmode",
-        "reflect": false
-      },
-      "autocomplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specify what the user agent has to provide as automated assistance.\r\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values"
-        },
-        "attribute": "autocomplete",
-        "reflect": false,
-        "defaultValue": "\"on\""
-      },
-      "noAutocomplete": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether autocomplete should be turned off"
-        },
-        "attribute": "no-autocomplete",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size variant"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "a11yDescribedby": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
-        },
-        "attribute": "a11y-describedby",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "filled": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhChange",
-        "name": "stzhChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Input change event"
-        },
-        "complexType": {
-          "original": "StzhInputChangeEvent",
-          "resolved": "{ component: \"stzh-input\"; originalEvent: MouseEvent | InputEvent; value: string; }",
-          "references": {
-            "StzhInputChangeEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhFocus",
-        "name": "stzhFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Input focus event"
-        },
-        "complexType": {
-          "original": "StzhInputFocusEvent",
-          "resolved": "{ component: \"stzh-input\"; originalEvent: FocusEvent; }",
-          "references": {
-            "StzhInputFocusEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhBlur",
-        "name": "stzhBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Input blur event"
-        },
-        "complexType": {
-          "original": "StzhInputBlurEvent",
-          "resolved": "{ component: \"stzh-input\"; originalEvent: FocusEvent; }",
-          "references": {
-            "StzhInputBlurEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focus input field",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "valueWatcher"
-      }, {
-        "propName": "error",
-        "methodName": "errorWatcher"
-      }, {
-        "propName": "type",
-        "methodName": "typeWatcher"
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { StzhInputDescription } from "./stzh-input-description";
+let inputCounter = 0;
+/**
+ * @slot - Slot for label content
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ * @slot button-right - Slot for right button
+ */
+export class StzhInput {
+  constructor() {
+    /** Whether the input is a textarea or an input field */
+    this.multiline = false;
+    /** If input field, this defines the type (if `search`, a search icon will be displayed) */
+    this.type = "text";
+    /** Whether the element is readonly or not */
+    this.readonly = false;
+    /** Whether the element is disabled or not */
+    this.disabled = false;
+    /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */
+    this.clearable = false;
+    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+    this.showMarker = false;
+    /** The value of the input element */
+    this.value = "";
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /**
+     * Specify what the user agent has to provide as automated assistance.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values
+     */
+    this.autocomplete = "on";
+    /** Whether autocomplete should be turned off  */
+    this.noAutocomplete = false;
+    /** Label */
+    this.label = "";
+    /** Size variant */
+    this.size = "default";
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
+    this.onClearClick = (event) => {
+      this.value = "";
+      this.input.focus();
+      this.stzhChange.emit({
+        component: "stzh-input",
+        originalEvent: event,
+        value: this.value
+      });
+    };
+    this.onInput = (event) => {
+      this.value = this.input.value;
+      this.stzhChange.emit({
+        component: "stzh-input",
+        originalEvent: event,
+        value: this.value
+      });
+    };
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent('focus', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-input",
+        originalEvent: event
+      });
+    };
+    /** Input blur event */
+    this.onBlur = (event) => {
+      // fixes weird bug where autofill selection doesn't get removed
+      this.input.value = this.input.value;
+      const blurEvent = new FocusEvent('blur', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-input",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus input field */
+  async setFocus() {
+    this.input.focus();
+  }
+  valueWatcher(newValue) {
+    this.filled = newValue !== "";
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  typeWatcher(newValue) {
+    const types = [
+      "text", "search", "password", "email", "url", "tel"
+    ];
+    if (!this.multiline && !types.includes(newValue)) {
+      throw new Error(`Type ${newValue} not supported`);
+    }
+  }
+  renderTextarea() {
+    return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
+  }
+  renderInput() {
+    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+  }
+  async componentWillLoad() {
+    this.inputId = `stzh-input-${inputCounter++}`;
+    this.typeWatcher(this.type);
+    this.valueWatcher(this.value);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'input');
+    }
+  }
+  render() {
+    var _a;
+    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');
+    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-input": true,
+      "stzh-input--has-button-right": buttonRightSlotUsed
+        || this.type === "search"
+        || (this.clearable && this.filled && !this.readonly && !this.disabled),
+      "stzh-input--has-description": descriptionUsed,
+      "stzh-input--has-description-long": descriptionLongUsed,
+      "stzh-input--has-error": errorUsed,
+      "stzh-input--is-invalid": this.invalid,
+      "stzh-input--is-disabled": this.disabled,
+      "stzh-input--is-readonly": this.readonly,
+      "stzh-input--is-required": this.required,
+      "stzh-input--has-placeholder": !!this.placeholder,
+      "stzh-input--is-filled": this.filled,
+      "stzh-input--is-clearable": this.clearable,
+      "stzh-input--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
+      [`stzh-input--size-${this.size}`]: !!this.size,
+      [`stzh-input--type-${this.type}`]: !!this.type,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), h("label", { class: "stzh-input__label", htmlFor: this.inputId }, this.label ? this.label : h("slot", null), this.showMarker &&
+      h("span", { class: "stzh-input__marker" }, h("span", { class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-input__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText))), this.clearable || this.type === "search"
+      ?
+        h("stzh-button", { class: "stzh-input__button-right", icon: this.disabled || this.readonly || !this.filled ? "search" : "close-circle", "icon-only": true, variant: "input", onClick: this.onClearClick, disabled: this.disabled || this.readonly || !this.filled, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })
+      :
+        h("slot", { name: "button-right" })), h(StzhInputDescription, { classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+  }
+  static get is() { return "stzh-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "multiline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the input is a textarea or an input field"
+        },
+        "attribute": "multiline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rows attribute if input element is textarea"
+        },
+        "attribute": "rows",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\"",
+          "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input field, this defines the type (if `search`, a search icon will be displayed)"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is readonly or not"
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is disabled or not"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true)"
+        },
+        "attribute": "clearable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "minlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum of characters"
+        },
+        "attribute": "minlength",
+        "reflect": false
+      },
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maxlength of characters"
+        },
+        "attribute": "maxlength",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input element"
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the input element"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "descriptionLong": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        "attribute": "description-long",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status"
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Required status"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": "Placeholder text"
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "inputmode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify inputmode.\nSee [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values"
+        },
+        "attribute": "inputmode",
+        "reflect": false
+      },
+      "autocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify what the user agent has to provide as automated assistance.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values"
+        },
+        "attribute": "autocomplete",
+        "reflect": false,
+        "defaultValue": "\"on\""
+      },
+      "noAutocomplete": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether autocomplete should be turned off"
+        },
+        "attribute": "no-autocomplete",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\"",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "filled": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input change event"
+        },
+        "complexType": {
+          "original": "StzhInputChangeEvent",
+          "resolved": "{ component: \"stzh-input\"; originalEvent: InputEvent | MouseEvent; value: string; }",
+          "references": {
+            "StzhInputChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhFocus",
+        "name": "stzhFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input focus event"
+        },
+        "complexType": {
+          "original": "StzhInputFocusEvent",
+          "resolved": "{ component: \"stzh-input\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhInputFocusEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhBlur",
+        "name": "stzhBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input blur event"
+        },
+        "complexType": {
+          "original": "StzhInputBlurEvent",
+          "resolved": "{ component: \"stzh-input\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhInputBlurEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus input field",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
+        "propName": "error",
+        "methodName": "errorWatcher"
+      }, {
+        "propName": "type",
+        "methodName": "typeWatcher"
+      }];
+  }
+}