@oiz/stzh-components 2.6.0-beta → 2.7.0-alpha

package/dist/collection/components/stzh-dropdown/stzh-dropdown.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Colors
  */
@@ -113,12 +114,14 @@ stzh-dropdown {
   --background-color: var(--stzh-color-white);
   --label-background: var(--stzh-color-white);
   --icon-size: var(--stzh-icon-size-small);
+  --icon-angle-size: var(--stzh-icon-size-medium);
   --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-border-color: var(--hover-color);
   --popover-width: 100%;
   --popover-min-width: var(--stzh-popover-min-width);
   --popover-max-width: var(--stzh-popover-min-width);
   --popover-max-height: calc(6.5 * var(--stzh-menu-item-height));
+  --active-icon-angle-transform: rotate(180deg) translateY(50%);
   width: 100%;
   border-radius: var(--stzh-form-input-border-radius);
   /* Invalid */
@@ -141,6 +144,9 @@ stzh-dropdown[inline]:not([inline=false]) {
   --popover-width: auto;
   width: auto;
 }
+stzh-dropdown[size=small] {
+  --icon-angle-size: var(--stzh-icon-size-small);
+}
 stzh-dropdown[invalid]:not([invalid=false]) {
   --color: var(--stzh-color-error);
   --border-color: var(--stzh-color-error);
@@ -163,11 +169,6 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   --background-color: transparent;
 }
 
-.stzh-dropdown__icon-wrapper stzh-icon,
-.stzh-dropdown__icon {
-  --size: var(--icon-size);
-}
-
 .stzh-dropdown {
   /* Plugin: Input autogrow */
   /* Has Items */
@@ -363,14 +364,14 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 .stzh-dropdown__icon-wrapper {
   position: absolute;
 }
-.stzh-dropdown__select .ts-control > input, .stzh-dropdown__select.single .stzh-dropdown__item, .stzh-dropdown__icon-wrapper, .stzh-dropdown__angle-icon {
+.stzh-dropdown__select .ts-control > input, .stzh-dropdown__select.single .stzh-dropdown__item, .stzh-dropdown__icon-wrapper, .stzh-dropdown__icon-angle-wrapper {
   color: var(--color);
   transition: color var(--stzh-base-transition-animation-speed);
 }
 .stzh-dropdown__select.multi .stzh-dropdown__item {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
-.stzh-dropdown__select:hover .ts-control > input, .stzh-dropdown__select:focus-within .ts-control > input, .stzh-dropdown__select.single:hover .stzh-dropdown__item, .stzh-dropdown__select.single:focus-within .stzh-dropdown__item, .stzh-dropdown__select:hover ~ .stzh-dropdown__icon-wrapper, .stzh-dropdown__select:focus-within ~ .stzh-dropdown__icon-wrapper, .stzh-dropdown__select:hover ~ .stzh-dropdown__angle-icon, .stzh-dropdown__select:focus-within ~ .stzh-dropdown__angle-icon, .stzh-dropdown__select:hover ~ .stzh-dropdown__label, .stzh-dropdown__select:focus-within ~ .stzh-dropdown__label {
+.stzh-dropdown__select:hover .ts-control > input, .stzh-dropdown__select:focus-within .ts-control > input, .stzh-dropdown__select.single:hover .stzh-dropdown__item, .stzh-dropdown__select.single:focus-within .stzh-dropdown__item, .stzh-dropdown__select:hover ~ .stzh-dropdown__icon-wrapper, .stzh-dropdown__select:focus-within ~ .stzh-dropdown__icon-wrapper, .stzh-dropdown__select:hover ~ .stzh-dropdown__icon-angle-wrapper, .stzh-dropdown__select:focus-within ~ .stzh-dropdown__icon-angle-wrapper, .stzh-dropdown__select:hover ~ .stzh-dropdown__label, .stzh-dropdown__select:focus-within ~ .stzh-dropdown__label {
   color: var(--hover-color);
 }
 .stzh-dropdown__sizer {
@@ -398,22 +399,24 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
   padding-right: calc(var(--stzh-icon-size-medium) + var(--stzh-space-medium) + var(--stzh-space-xsmall));
 }
-.stzh-dropdown__icon-wrapper, .stzh-dropdown__angle-icon {
+.stzh-dropdown__icon-wrapper, .stzh-dropdown__icon-angle-wrapper {
+  display: flex;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
 }
 .stzh-dropdown__icon-wrapper {
-  display: flex;
   left: var(--stzh-space-medium);
 }
-.stzh-dropdown stzh-icon.stzh-dropdown__angle-icon {
-  --size: var(--stzh-icon-size-medium);
-}
-.stzh-dropdown__angle-icon {
+.stzh-dropdown__icon-angle-wrapper {
   right: var(--stzh-space-medium);
-  transform-origin: 50% 0%;
+}
+.stzh-dropdown__icon-wrapper stzh-icon, .stzh-dropdown__icon {
+  --size: var(--icon-size);
+}
+.stzh-dropdown__icon-angle-wrapper stzh-icon, .stzh-dropdown__icon-angle {
+  --size: var(--icon-angle-size);
 }
 .stzh-dropdown__label {
   font-family: var(--stzh-font-family-heavy);
@@ -512,6 +515,18 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   display: none;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+.stzh-dropdown__option.selected::before {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  content: "✓";
+}
 .stzh-dropdown__option.selected:hover .stzh-dropdown__option-check, .stzh-dropdown__option.selected.active .stzh-dropdown__option-check {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
@@ -577,8 +592,8 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 .stzh-dropdown__select.has-items .ts-control > input:-ms-input-placeholder {
   color: transparent;
 }
-.stzh-dropdown__select.dropdown-active ~ .stzh-dropdown__angle-icon {
-  transform: rotate(180deg) translateY(-50%);
+.stzh-dropdown__select.dropdown-active ~ .stzh-dropdown__icon-angle-wrapper {
+  transform: var(--active-icon-angle-transform);
 }
 .stzh-dropdown--is-multiple .stzh-dropdown__option-check {
   display: inline-flex;
@@ -693,9 +708,6 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   padding: var(--stzh-space-xxsmall) var(--stzh-space-medium);
   padding-right: calc(var(--stzh-icon-size-small) + var(--stzh-space-medium) + var(--stzh-space-xsmall));
 }
-.stzh-dropdown--size-small stzh-icon.stzh-dropdown__angle-icon {
-  --size: var(--stzh-icon-size-small);
-}
 .stzh-dropdown--has-icon .stzh-dropdown__select.single .ts-control, .stzh-dropdown--has-icon .stzh-dropdown__select.multi .ts-control, .stzh-dropdown--has-icon .stzh-dropdown__sizer {
   padding-left: calc(var(--icon-size) + var(--stzh-space-medium) + var(--stzh-space-xsmall));
 }
@@ -710,7 +722,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 .stzh-dropdown--plain .stzh-dropdown__icon-wrapper {
   left: 0;
 }
-.stzh-dropdown--plain .stzh-dropdown__angle-icon {
+.stzh-dropdown--plain .stzh-dropdown__icon-angle-wrapper {
   right: 0;
 }
 .stzh-dropdown--plain .stzh-dropdown__label {

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

@@ -27,6 +27,8 @@ let dropdownCounter = 0;
  * @slot label - Slot for label content
  * @slot description - Slot for description
  * @slot description-long - Slot for long description (in popover)
+ * @slot icon - Slot for left icon
+ * @slot icon-angle - Slot for angle icon
  * @slot error - Slot for error
  */
 export class StzhDropdown {
@@ -68,6 +70,7 @@ export class StzhDropdown {
     this.popoverPlacement = "bottom";
     this.label = "";
     this.icon = "";
+    this.iconAngle = "angle-down";
     this.noSearch = false;
     this.noBackspaceDelete = false;
     this.invalid = false;
@@ -264,7 +267,7 @@ export class StzhDropdown {
       render: {
         option: (data, escape) => {
           return `
-            <div class="stzh-dropdown__option" title="${escape(data[this.labelField])}">
+            <div class="stzh-dropdown__option">
               <stzh-icon name="checkmark" class="stzh-dropdown__option-check"></stzh-icon>
               <span class="stzh-dropdown__option-title">
                 ${escape(data[this.labelField])}
@@ -288,13 +291,13 @@ export class StzhDropdown {
         },
         no_results: (data, escape) => {
           return `
-            <div class="stzh-dropdown__no-results">
+            <div class="stzh-dropdown__no-results" id="${this.dropdownId}-no-results">
               ${this.localization.noResults.replace(/{x}/gi, escape(data.input))}
             </div>`;
         },
         not_loading: this.load === null ? null : (_data, escape) => {
           return `
-            <div class="stzh-dropdown__not-loading">
+            <div class="stzh-dropdown__not-loading" id="${this.dropdownId}-not-loading">
               ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}
             </div>
           `;
@@ -470,15 +473,20 @@ export class StzhDropdown {
       [`stzh-dropdown--size-${this.size}`]: !!this.size,
       [`stzh-dropdown--${this.variant}`]: !!this.variant
     };
-    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${!this.showMarker && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", null)), h("div", { class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ?
+      h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })
+      :
+        h("slot", { name: "icon-angle" })), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId, "aria-labelledby": `${this.dropdownId}-label-inner ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("span", { id: `${this.dropdownId}-label-inner` }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
+        h("slot", { name: "icon" })), h("label", { id: `${this.dropdownId}-label`, class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
       h("span", { class: "stzh-dropdown__marker" }, h("span", { class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-dropdown__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)), h("span", { class: "stzh-dropdown__vhidden" }, ".")))), h(StzhInputDescription, { classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+        : this.localization.$globals.optionalFieldText))), !this.showMarker && this.required &&
+      h("div", { id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText), this.invalid &&
+      h("div", { id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)), h(StzhInputDescription, { classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   static get is() { return "stzh-dropdown"; }
   static get originalStyleUrls() {
@@ -497,9 +505,14 @@ export class StzhDropdown {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any[] | string",
-          "resolved": "any[] | string",
-          "references": {}
+          "original": "StzhDropdownOption[] | string",
+          "resolved": "StzhDropdownOption[] | string",
+          "references": {
+            "StzhDropdownOption": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -1031,6 +1044,24 @@ export class StzhDropdown {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "iconAngle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Angle icon"
+        },
+        "attribute": "icon-angle",
+        "reflect": false,
+        "defaultValue": "\"angle-down\""
+      },
       "noSearch": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-dropdown/stzh-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-dropdown.js","sourceRoot":"","sources":["../../../src/components/stzh-dropdown/stzh-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Method,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport {\n  StzhDropdownChangeEvent,\n  StzhDropdownItemAddEvent,\n  StzhDropdownItemRemoveEvent,\n  StzhDropdownOptionAddEvent,\n  StzhDropdownOptionRemoveEvent,\n  StzhDropdownOpenEvent,\n  StzhDropdowCloseEvent,\n  StzhDropdownFocusEvent,\n  StzhDropdownBlurEvent,\n  StzhDropdowInitEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhDropdownLocalizedText } from './stzh-dropdown.localization';\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport TomSelect from \"../../libraries/tom-select/esm/tom-select.js\";\nimport TomSelectRemoveButton from \"../../libraries/tom-select/esm/plugins/remove_button/plugin.js\";\nimport TomSelectCheckboxOptions from \"../../libraries/tom-select/esm/plugins/checkbox_options/plugin.js\";\nimport TomSelectInputAutogrow from \"../../libraries/tom-select/esm/plugins/input_autogrow/plugin.js\";\nimport TomSelectNoBackspaceDelete from \"../../libraries/tom-select/esm/plugins/no_backspace_delete/plugin.js\";\n\nconst TomSelectInputReadonly = function (_plugin_options) {\n  const self = this;\n\n  self.on(\"initialize\", () => {\n    const input = self.control_input as HTMLInputElement;\n    if (input) input.readOnly = true;\n  })\n};\n\nconst CLASS_FILLED = \"stzh-dropdown--is-filled\";\nconst CLASS_FOCUS = \"stzh-dropdown--has-focus\";\n\nTomSelect.define(\"remove_button\", TomSelectRemoveButton);\nTomSelect.define(\"checkbox_options\", TomSelectCheckboxOptions);\nTomSelect.define(\"input_autogrow\", TomSelectInputAutogrow);\nTomSelect.define(\"no_backspace_delete\", TomSelectNoBackspaceDelete);\nTomSelect.define(\"input_readonly\", TomSelectInputReadonly);\n\nlet dropdownCounter = 0;\n\n/**\n * @slot label - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-dropdown\",\n  styleUrl: \"stzh-dropdown.scss\"\n})\nexport class StzhDropdown {\n  /** Available options */\n  @Prop() options: any[] | string;\n  private _options: any[];\n\n  /**\n   * Option groups that options will be bucketed into.\n   * Make sure each object in the array has a property named whatever `optgroupValueField` is set to.\n   */\n  @Prop() optgroups: any[] | string;\n  private _optgroups: any[];\n\n  /**\n   * Set selected options. Can be array set with JS or as JSON string.\n   * To get the current (user) selected options, use `getItems` method.\n   */\n  @Prop() items: string[] | string;\n  private _items: string[];\n\n  /**\n   * An array of property names to analyze when filtering options.\n   * Weights can be given to each field to improve search result:\n   * `[{\"field\":\"text\",\"weight\":2},{\"field\":\"text2\",\"weight\":0.5}]`\n   */\n  @Prop() searchField: string[] | string = [\"text\"];\n  private _searchField: string[];\n\n  /** Whether multiple items option can be selected */\n  @Prop({ reflect: true }) multiple: boolean = false;\n\n  /** Show inline (auto width) */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */\n  @Prop() maxOptions: number | null = null;\n\n  /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */\n  @Prop() searchConjunction: \"and\" | \"or\" = \"and\";\n\n  /**  If true, any options with a \"\" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */\n  @Prop() allowEmptyOption: boolean = false;\n\n  /** Show the dropdown immediately when the control receives focus. */\n  @Prop() openOnFocus: boolean = true;\n\n  /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */\n  @Prop() closeAfterSelect: boolean | null = null;\n\n  /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */\n  @Prop() load: (query: string, callback: Function) => any[] | null = null;\n\n  /** Minimum of characters required to execute the `load` function */\n  @Prop() minCharacters: number = 3;\n\n  /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */\n  @Prop() loadThrottle: number = 300;\n\n  /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */\n  @Prop() preload: boolean | \"focus\" = false;\n\n  /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */\n  @Prop() labelField: string = \"text\";\n\n  /** The name of the property to use as the value when an item is selected. */\n  @Prop() valueField: string = \"value\";\n\n  /** The name of the property to group items by. */\n  @Prop() optgroupField: string = \"optgroup\";\n\n  /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */\n  @Prop() optgroupLabelField: string = \"label\";\n\n  /** The name of the option group property that serves as its unique identifier. */\n  @Prop() optgroupValueField: string = \"value\";\n\n  /** If truthy, all optgroups will be displayed in the same order as they were added (by the `$order` property). Otherwise, it will order based on the score of the results in each. */\n  @Prop() lockOptgroupOrder: true;\n\n  /** Name of hidden select element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Initial open state */\n  @Prop() open: boolean = false;\n\n  /** Current open state (readonly) */\n  @Prop({ reflect: true }) isOpen: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"plain\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the dropdown is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement */\n  @Prop({ reflect: true }) popoverPlacement: \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Prevent option search */\n  @Prop() noSearch: boolean = false;\n\n  /** Prevent backspace delete */\n  @Prop() noBackspaceDelete: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Show text in label depending if field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhDropdownLocalizedText;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Watch(\"options\")\n  optionsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._options = JSON.parse(newValue);\n    }\n    else {\n      this._options = newValue;\n    }\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    }\n    else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"searchField\")\n  searchFieldWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._searchField = JSON.parse(newValue);\n    }\n    else {\n      this._searchField = newValue;\n    }\n  }\n\n  @Watch(\"optgroups\")\n  optgroupsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._optgroups = JSON.parse(newValue);\n    }\n    else {\n      this._optgroups = newValue;\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhDropdownElement;\n\n  /**\n   * Returns the value of the control.\n   * If multiple items can be selected,\n   * this returns an array, otherwise a string.\n  */\n  @Method()\n  async getValue(): Promise<string | string[]> {\n    return this.tomSelect.getValue();\n  }\n\n  /** Set new value */\n  @Method()\n  async setValue(newValue: string | string[], silent: boolean = false) {\n    this.tomSelect.setValue(newValue, silent);\n  }\n\n  /** Focus select */\n  @Method()\n  async setFocus() {\n    this.tomSelect.focus();\n  }\n\n  /** Reset loaded/cached search queries (calls from load property function) */\n  @Method()\n  async resetLoadedSearches() {\n    this.tomSelect.loadedSearches = {};\n  }\n\n  /** Return loaded/cached search queries (calls from load property function) */\n  @Method()\n  async getLoadedSearches() {\n    return this.tomSelect.loadedSearches;\n  }\n\n  /** Return current selected items */\n  @Method()\n  async getItems() {\n    return this.tomSelect.items;\n  }\n\n  /** Load items by calling load property/function */\n  @Method()\n  async loadItems(query: string) {\n    return this.tomSelect.load(query);\n  }\n\n  /** Show dropdown popover */\n  @Method()\n  async show() {\n    return this.tomSelect.open();\n  }\n\n  /** Hide dropdown popover */\n  @Method()\n  async hide() {\n    return this.tomSelect.close();\n  }\n\n  /** Dropdown change event */\n  @Event() stzhChange: EventEmitter<StzhDropdownChangeEvent>;\n\n  /** Dropdown item added event */\n  @Event() stzhItemAdd: EventEmitter<StzhDropdownItemAddEvent>;\n\n  /** Dropdown item removed event */\n  @Event() stzhItemRemove: EventEmitter<StzhDropdownItemRemoveEvent>;\n\n  /** Dropdown option added event */\n  @Event() stzhOptionAdd: EventEmitter<StzhDropdownOptionAddEvent>;\n\n  /** Dropdown option removed event */\n  @Event() stzhOptionRemove: EventEmitter<StzhDropdownOptionRemoveEvent>;\n\n  /** Dropdown open event */\n  @Event() stzhOpen: EventEmitter<StzhDropdownOpenEvent>;\n\n  /** Dropdown close event */\n  @Event() stzhClose: EventEmitter<StzhDropdowCloseEvent>;\n\n  /** Dropdown focus event */\n  @Event() stzhFocus: EventEmitter<StzhDropdownFocusEvent>;\n\n  /** Dropdown blur event */\n  @Event() stzhBlur: EventEmitter<StzhDropdownBlurEvent>;\n\n  /** Dropdown focus event */\n  @Event() stzhInit: EventEmitter<StzhDropdowInitEvent>;\n\n  private tomSelect: TomSelect;\n  private select: HTMLSelectElement;\n  private rootElement: HTMLElement;\n  private dropdownId: string;\n  private focusedByInput: boolean = false;\n\n  private updateFilled() {\n    if (this._items.length > 0) {\n      this.rootElement.classList.add(CLASS_FILLED);\n    } else {\n      this.rootElement.classList.remove(CLASS_FILLED);\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  async componentWillLoad() {\n    this.dropdownId = `stzh-dropdown-${dropdownCounter++}`;\n\n    this.optionsWatcher(this.options);\n    this.optgroupsWatcher(this.optgroups);\n    this.itemsWatcher(this.items);\n    this.searchFieldWatcher(this.searchField);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"dropdown\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return [\"isOpen\"].includes(prop) === false;\n  }\n\n  async componentWillUpdate() {\n    if (this.tomSelect) {\n      this.tomSelect.destroy();\n      this.tomSelect = null;\n    }\n  }\n\n  async componentDidRender() {\n    if (this.tomSelect) {\n      return;\n    }\n\n    const plugins = {};\n\n    if (this.noSearch) {\n      plugins[\"input_readonly\"] = {};\n    } else {\n      plugins[\"input_autogrow\"] = {};\n    }\n\n    if (this.noBackspaceDelete) {\n      plugins[\"no_backspace_delete\"] = {};\n    }\n\n    if (this.multiple) {\n      plugins[\"checkbox_options\"] = {};\n      plugins[\"remove_button\"] = {\n        title: this.localization.removeButtonTitle,\n        label: '<stzh-icon name=\"close\" class=\"stzh-dropdown__remove-icon\"></stzh-icon>'\n      };\n    }\n\n    const tomSelectOptions: any = {\n      plugins,\n      maxItems: this.multiple ? null : 1,\n      maxOptions: this.maxOptions,\n      items: this._items,\n      optgroups: this._optgroups,\n      searchField: this._searchField,\n      searchConjunction: this.searchConjunction,\n      allowEmptyOption: this.allowEmptyOption,\n      closeAfterSelect: this.closeAfterSelect !== null\n        ? this.closeAfterSelect\n        : !this.multiple,\n      labelField: this.labelField,\n      valueField: this.valueField,\n      optgroupField: this.optgroupField,\n      optgroupLabelField: this.optgroupLabelField,\n      optgroupValueField: this.optgroupValueField,\n      lockOptgroupOrder: this.lockOptgroupOrder,\n      load: this.load,\n      shouldLoad: (query: string) => {\n        return query.length >= this.minCharacters;\n      },\n      loadThrottle: this.loadThrottle,\n      preload: this.preload,\n      openOnFocus: this.openOnFocus,\n      loadingClass: \"is-loading\",\n      hideSelected: false,\n      duplicates: false,\n      delimiter: \",\",\n      copyClassesToDropdown: false,\n      hidePlaceholder: null,\n      // if you want the user to be able to add own items enable this option\n      // (but checkbox_options plugin throws an error and would need a fix first)\n      // create: function(input, callback) {\n      //   callback({ value: input, text: input });\n      // },\n      // createOnBlur: false,\n      // createFilter: null,\n      // persist: false,\n      render: {\n        option: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__option\" title=\"${escape(data[this.labelField])}\">\n              <stzh-icon name=\"checkmark\" class=\"stzh-dropdown__option-check\"></stzh-icon>\n              <span class=\"stzh-dropdown__option-title\">\n                ${escape(data[this.labelField])}\n              </span>\n            </div>\n          `;\n        },\n        item: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__item\">\n              ${escape(data[this.labelField])}\n            </div>\n          `;\n        },\n        option_create: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__create\">\n              ${this.localization.create.replace(/{x}/gi, escape(data.input))}&hellip;\n            </div>\n          `;\n        },\n        no_results: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__no-results\">\n              ${this.localization.noResults.replace(/{x}/gi, escape(data.input))}\n            </div>`;\n        },\n        not_loading: this.load === null ? null : (_data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__not-loading\">\n              ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}\n            </div>\n          `;\n        },\n        optgroup: (data) => {\n          let optgroup = document.createElement(\"div\");\n          optgroup.className = \"stzh-dropdown__optgroup\";\n          optgroup.appendChild(data.options);\n          return optgroup;\n        },\n        optgroup_header: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__optgroup-header\">\n              ${escape(data.label)}\n            </div>\n          `;\n        },\n        loading: () => {\n          return `\n            <div class=\"stzh-dropdown__loader\">\n              <stzh-loader></stzh-loader>\n            </div>\n          `;\n        },\n        dropdown: () => {\n          return `<div class=\"stzh-dropdown__dropdown\"></div>`;\n        }\n      },\n      onChange: (value) => {\n        this._items = this.tomSelect.items;\n        this.updateFilled();\n\n        this.stzhChange.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onItemAdd: (value) => {\n        this._items = this.tomSelect.items;\n        this.stzhItemAdd.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onItemRemove: (value) => {\n        this._items = this.tomSelect.items;\n        this.stzhItemRemove.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onOptionAdd: (value) => {\n        this._options = this.tomSelect.options;\n        this.updateFilled();\n\n        this.stzhOptionAdd.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onOptionRemove: (value) => {\n        this._options = this.tomSelect.options;\n        this.updateFilled();\n\n        this.stzhOptionRemove.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onDropdownOpen: () => {\n        this.isOpen = true;\n        this.stzhOpen.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onDropdownClose: () => {\n        this.isOpen = false;\n        this.stzhClose.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onFocus: () => {\n        this.focusedByInput = true;\n\n        if (this.tomSelect.load && this.preload === \"focus\") {\n          // to be able to execute load function again, we reset loaded searches\n          this.resetLoadedSearches();\n\n          // if results have been preloaded before, load them now directly with load function\n          if (this.tomSelect.wrapper.classList.contains('preloaded')) {\n            // since tomSelect.preload() doesn't call tomSelect.shouldCall() method internally (to check for minCharacters),\n            // we will also not call it (this.tomSelect.settings.shouldLoad.call(this.tomSelect, ''))\n            this.tomSelect.load('');\n          }\n        }\n\n        this.rootElement.classList.add(CLASS_FOCUS);\n        const focusEvent = new FocusEvent('focus', {\n          view: window,\n          bubbles: false,\n          cancelable: false\n        });\n\n        this.element.dispatchEvent(focusEvent);\n        this.stzhFocus.emit({\n          component: \"stzh-dropdown\",\n          originalEvent: {\n            target: this.tomSelect.control\n          }\n        });\n      },\n      onBlur: () => {\n        this.rootElement.classList.remove(CLASS_FOCUS);\n        const blurEvent = new FocusEvent('blur', {\n          view: window,\n          bubbles: false,\n          cancelable: false\n        });\n\n        this.element.dispatchEvent(blurEvent);\n        this.stzhBlur.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onInitialize: () => {\n        this.stzhInit.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onLoad: () => {\n        this._options = this.tomSelect.options;\n      }\n    };\n\n    if (this._options) {\n      tomSelectOptions.options = this._options;\n    }\n\n    if (this._optgroups) {\n      tomSelectOptions.optgroups = this._optgroups;\n    }\n\n    if (this._items) {\n      tomSelectOptions.items = this._items;\n    }\n\n    this.tomSelect = new TomSelect(this.select, tomSelectOptions);\n\n    if (!this.openOnFocus) {\n      // we still want to enable opening the dropdown by click\n      this.tomSelect.control.addEventListener(\"click\", () => {\n        this.tomSelect.open();\n      });\n    }\n\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.tomSelect) {\n      this.tomSelect.destroy();\n      this.tomSelect = null;\n    }\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, 'icon') || !!this.icon;\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-dropdown\": true,\n      \"stzh-dropdown--is-inline\": this.inline,\n      \"stzh-dropdown--is-multiple\": this.multiple,\n      \"stzh-dropdown--is-disabled\": this.disabled,\n      \"stzh-dropdown--is-required\": this.required,\n      \"stzh-dropdown--is-invalid\": this.invalid,\n      [CLASS_FILLED]: this._items && this._items.length > 0,\n      \"stzh-dropdown--has-icon\": iconUsed,\n      \"stzh-dropdown--has-description\": descriptionUsed,\n      \"stzh-dropdown--has-description-long\": descriptionLongUsed,\n      \"stzh-dropdown--has-error\": errorUsed,\n      \"stzh-dropdown--has-no-search\": this.noSearch,\n      \"stzh-dropdown--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n      [`stzh-dropdown--size-${this.size}`]: !!this.size,\n      [`stzh-dropdown--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div\n          class={classes}\n          ref={(el) => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div class=\"stzh-dropdown__field-wrapper\">\n            {/* tom-select sets aria-labelledby automatically referencing the stzh-dropdown__label element */}\n            <select\n              id={this.dropdownId}\n              class=\"stzh-dropdown__select\"\n              ref={(el) => (this.select = el as HTMLSelectElement)}\n              multiple={this.multiple}\n              name={this.name}\n              disabled={this.disabled}\n            >\n              <slot></slot>\n            </select>\n\n            {/* <div class=\"stzh-dropdown__sizer\">\n              {this.placeholder}\n            </div> */}\n\n            <stzh-icon name=\"angle-down\" class=\"stzh-dropdown__angle-icon\"></stzh-icon>\n\n            <div class=\"stzh-dropdown__icon-wrapper\">\n              {this.icon ?\n                <stzh-icon class=\"stzh-dropdown__icon\" name={this.icon}></stzh-icon>\n                :\n                <slot name=\"icon\"></slot>\n              }\n            </div>\n\n            <label\n              class=\"stzh-dropdown__label\"\n              htmlFor={this.dropdownId}\n              aria-labelledby={`${this.dropdownId}-label-inner ${this.dropdownId}-description ${this.a11yDescribedby}`}\n            >\n              <span id={`${this.dropdownId}-label-inner`}>\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n                {this.showMarker &&\n                  <span class=\"stzh-dropdown__marker\">\n                    <span class=\"stzh-dropdown__marker-symbol\" aria-hidden=\"true\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldMarker\n                        : this.localization.$globals.optionalFieldMarker\n                      }\n                    </span>\n                    <span class=\"stzh-dropdown__marker-text\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldText\n                        : this.localization.$globals.optionalFieldText\n                      }\n                    </span>\n                  </span>\n                }\n                <span class=\"stzh-dropdown__vhidden\">.</span>\n              </span>\n            </label>\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-dropdown\"\n            id={`${this.dropdownId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-dropdown.js","sourceRoot":"","sources":["../../../src/components/stzh-dropdown/stzh-dropdown.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Method,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhDropdownItemAddEvent,\n  StzhDropdownItemRemoveEvent,\n  StzhDropdownOptionAddEvent,\n  StzhDropdownOptionRemoveEvent,\n  StzhDropdownOpenEvent,\n  StzhDropdowCloseEvent,\n  StzhDropdownFocusEvent,\n  StzhDropdownBlurEvent,\n  StzhDropdowInitEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhDropdownLocalizedText } from './stzh-dropdown.localization';\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport TomSelect from \"../../libraries/tom-select/esm/tom-select.js\";\nimport TomSelectRemoveButton from \"../../libraries/tom-select/esm/plugins/remove_button/plugin.js\";\nimport TomSelectCheckboxOptions from \"../../libraries/tom-select/esm/plugins/checkbox_options/plugin.js\";\nimport TomSelectInputAutogrow from \"../../libraries/tom-select/esm/plugins/input_autogrow/plugin.js\";\nimport TomSelectNoBackspaceDelete from \"../../libraries/tom-select/esm/plugins/no_backspace_delete/plugin.js\";\n\nconst TomSelectInputReadonly = function (_plugin_options) {\n  const self = this;\n\n  self.on(\"initialize\", () => {\n    const input = self.control_input as HTMLInputElement;\n    if (input) input.readOnly = true;\n  })\n};\n\nconst CLASS_FILLED = \"stzh-dropdown--is-filled\";\nconst CLASS_FOCUS = \"stzh-dropdown--has-focus\";\n\nTomSelect.define(\"remove_button\", TomSelectRemoveButton);\nTomSelect.define(\"checkbox_options\", TomSelectCheckboxOptions);\nTomSelect.define(\"input_autogrow\", TomSelectInputAutogrow);\nTomSelect.define(\"no_backspace_delete\", TomSelectNoBackspaceDelete);\nTomSelect.define(\"input_readonly\", TomSelectInputReadonly);\n\nlet dropdownCounter = 0;\n\n/**\n * @slot label - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot icon - Slot for left icon\n * @slot icon-angle - Slot for angle icon\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-dropdown\",\n  styleUrl: \"stzh-dropdown.scss\"\n})\nexport class StzhDropdown {\n  /** Available options */\n  @Prop() options: StzhDropdownOption[] | string;\n  private _options: StzhDropdownOption[];\n\n  /**\n   * Option groups that options will be bucketed into.\n   * Make sure each object in the array has a property named whatever `optgroupValueField` is set to.\n   */\n  @Prop() optgroups: any[] | string;\n  private _optgroups: any[];\n\n  /**\n   * Set selected options. Can be array set with JS or as JSON string.\n   * To get the current (user) selected options, use `getItems` method.\n   */\n  @Prop() items: string[] | string;\n  private _items: string[];\n\n  /**\n   * An array of property names to analyze when filtering options.\n   * Weights can be given to each field to improve search result:\n   * `[{\"field\":\"text\",\"weight\":2},{\"field\":\"text2\",\"weight\":0.5}]`\n   */\n  @Prop() searchField: string[] | string = [\"text\"];\n  private _searchField: string[];\n\n  /** Whether multiple items option can be selected */\n  @Prop({ reflect: true }) multiple: boolean = false;\n\n  /** Show inline (auto width) */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */\n  @Prop() maxOptions: number | null = null;\n\n  /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */\n  @Prop() searchConjunction: \"and\" | \"or\" = \"and\";\n\n  /**  If true, any options with a \"\" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */\n  @Prop() allowEmptyOption: boolean = false;\n\n  /** Show the dropdown immediately when the control receives focus. */\n  @Prop() openOnFocus: boolean = true;\n\n  /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */\n  @Prop() closeAfterSelect: boolean | null = null;\n\n  /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */\n  @Prop() load: (query: string, callback: Function) => any[] | null = null;\n\n  /** Minimum of characters required to execute the `load` function */\n  @Prop() minCharacters: number = 3;\n\n  /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */\n  @Prop() loadThrottle: number = 300;\n\n  /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */\n  @Prop() preload: boolean | \"focus\" = false;\n\n  /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */\n  @Prop() labelField: string = \"text\";\n\n  /** The name of the property to use as the value when an item is selected. */\n  @Prop() valueField: string = \"value\";\n\n  /** The name of the property to group items by. */\n  @Prop() optgroupField: string = \"optgroup\";\n\n  /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */\n  @Prop() optgroupLabelField: string = \"label\";\n\n  /** The name of the option group property that serves as its unique identifier. */\n  @Prop() optgroupValueField: string = \"value\";\n\n  /** If truthy, all optgroups will be displayed in the same order as they were added (by the `$order` property). Otherwise, it will order based on the score of the results in each. */\n  @Prop() lockOptgroupOrder: true;\n\n  /** Name of hidden select element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Initial open state */\n  @Prop() open: boolean = false;\n\n  /** Current open state (readonly) */\n  @Prop({ reflect: true }) isOpen: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"plain\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the dropdown is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement */\n  @Prop({ reflect: true }) popoverPlacement: \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Angle icon */\n  @Prop() iconAngle: string = \"angle-down\";\n\n  /** Prevent option search */\n  @Prop() noSearch: boolean = false;\n\n  /** Prevent backspace delete */\n  @Prop() noBackspaceDelete: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Show text in label depending if field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhDropdownLocalizedText;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Watch(\"options\")\n  optionsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._options = JSON.parse(newValue);\n    } else {\n      this._options = newValue;\n    }\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"searchField\")\n  searchFieldWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._searchField = JSON.parse(newValue);\n    } else {\n      this._searchField = newValue;\n    }\n  }\n\n  @Watch(\"optgroups\")\n  optgroupsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._optgroups = JSON.parse(newValue);\n    } else {\n      this._optgroups = newValue;\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhDropdownElement;\n\n  /**\n   * Returns the value of the control.\n   * If multiple items can be selected,\n   * this returns an array, otherwise a string.\n  */\n  @Method()\n  async getValue(): Promise<string | string[]> {\n    return this.tomSelect.getValue();\n  }\n\n  /** Set new value */\n  @Method()\n  async setValue(newValue: string | string[], silent: boolean = false) {\n    this.tomSelect.setValue(newValue, silent);\n  }\n\n  /** Focus select */\n  @Method()\n  async setFocus() {\n    this.tomSelect.focus();\n  }\n\n  /** Reset loaded/cached search queries (calls from load property function) */\n  @Method()\n  async resetLoadedSearches() {\n    this.tomSelect.loadedSearches = {};\n  }\n\n  /** Return loaded/cached search queries (calls from load property function) */\n  @Method()\n  async getLoadedSearches() {\n    return this.tomSelect.loadedSearches;\n  }\n\n  /** Return current selected items */\n  @Method()\n  async getItems() {\n    return this.tomSelect.items;\n  }\n\n  /** Load items by calling load property/function */\n  @Method()\n  async loadItems(query: string) {\n    return this.tomSelect.load(query);\n  }\n\n  /** Show dropdown popover */\n  @Method()\n  async show() {\n    return this.tomSelect.open();\n  }\n\n  /** Hide dropdown popover */\n  @Method()\n  async hide() {\n    return this.tomSelect.close();\n  }\n\n  /** Dropdown change event */\n  @Event() stzhChange: EventEmitter<StzhDropdownChangeEvent>;\n\n  /** Dropdown item added event */\n  @Event() stzhItemAdd: EventEmitter<StzhDropdownItemAddEvent>;\n\n  /** Dropdown item removed event */\n  @Event() stzhItemRemove: EventEmitter<StzhDropdownItemRemoveEvent>;\n\n  /** Dropdown option added event */\n  @Event() stzhOptionAdd: EventEmitter<StzhDropdownOptionAddEvent>;\n\n  /** Dropdown option removed event */\n  @Event() stzhOptionRemove: EventEmitter<StzhDropdownOptionRemoveEvent>;\n\n  /** Dropdown open event */\n  @Event() stzhOpen: EventEmitter<StzhDropdownOpenEvent>;\n\n  /** Dropdown close event */\n  @Event() stzhClose: EventEmitter<StzhDropdowCloseEvent>;\n\n  /** Dropdown focus event */\n  @Event() stzhFocus: EventEmitter<StzhDropdownFocusEvent>;\n\n  /** Dropdown blur event */\n  @Event() stzhBlur: EventEmitter<StzhDropdownBlurEvent>;\n\n  /** Dropdown focus event */\n  @Event() stzhInit: EventEmitter<StzhDropdowInitEvent>;\n\n  private tomSelect: TomSelect;\n  private select: HTMLSelectElement;\n  private rootElement: HTMLElement;\n  private dropdownId: string;\n  private focusedByInput: boolean = false;\n\n  private updateFilled() {\n    if (this._items.length > 0) {\n      this.rootElement.classList.add(CLASS_FILLED);\n    } else {\n      this.rootElement.classList.remove(CLASS_FILLED);\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  async componentWillLoad() {\n    this.dropdownId = `stzh-dropdown-${dropdownCounter++}`;\n\n    this.optionsWatcher(this.options);\n    this.optgroupsWatcher(this.optgroups);\n    this.itemsWatcher(this.items);\n    this.searchFieldWatcher(this.searchField);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"dropdown\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return [\"isOpen\"].includes(prop) === false;\n  }\n\n  async componentWillUpdate() {\n    if (this.tomSelect) {\n      this.tomSelect.destroy();\n      this.tomSelect = null;\n    }\n  }\n\n  async componentDidRender() {\n    if (this.tomSelect) {\n      return;\n    }\n\n    const plugins = {};\n\n    if (this.noSearch) {\n      plugins[\"input_readonly\"] = {};\n    } else {\n      plugins[\"input_autogrow\"] = {};\n    }\n\n    if (this.noBackspaceDelete) {\n      plugins[\"no_backspace_delete\"] = {};\n    }\n\n    if (this.multiple) {\n      plugins[\"checkbox_options\"] = {};\n      plugins[\"remove_button\"] = {\n        title: this.localization.removeButtonTitle,\n        label: '<stzh-icon name=\"close\" class=\"stzh-dropdown__remove-icon\"></stzh-icon>'\n      };\n    }\n\n    const tomSelectOptions: any = {\n      plugins,\n      maxItems: this.multiple ? null : 1,\n      maxOptions: this.maxOptions,\n      items: this._items,\n      optgroups: this._optgroups,\n      searchField: this._searchField,\n      searchConjunction: this.searchConjunction,\n      allowEmptyOption: this.allowEmptyOption,\n      closeAfterSelect: this.closeAfterSelect !== null\n        ? this.closeAfterSelect\n        : !this.multiple,\n      labelField: this.labelField,\n      valueField: this.valueField,\n      optgroupField: this.optgroupField,\n      optgroupLabelField: this.optgroupLabelField,\n      optgroupValueField: this.optgroupValueField,\n      lockOptgroupOrder: this.lockOptgroupOrder,\n      load: this.load,\n      shouldLoad: (query: string) => {\n        return query.length >= this.minCharacters;\n      },\n      loadThrottle: this.loadThrottle,\n      preload: this.preload,\n      openOnFocus: this.openOnFocus,\n      loadingClass: \"is-loading\",\n      hideSelected: false,\n      duplicates: false,\n      delimiter: \",\",\n      copyClassesToDropdown: false,\n      hidePlaceholder: null,\n      // if you want the user to be able to add own items enable this option\n      // (but checkbox_options plugin throws an error and would need a fix first)\n      // create: function(input, callback) {\n      //   callback({ value: input, text: input });\n      // },\n      // createOnBlur: false,\n      // createFilter: null,\n      // persist: false,\n      render: {\n        option: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__option\">\n              <stzh-icon name=\"checkmark\" class=\"stzh-dropdown__option-check\"></stzh-icon>\n              <span class=\"stzh-dropdown__option-title\">\n                ${escape(data[this.labelField])}\n              </span>\n            </div>\n          `;\n        },\n        item: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__item\">\n              ${escape(data[this.labelField])}\n            </div>\n          `;\n        },\n        option_create: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__create\">\n              ${this.localization.create.replace(/{x}/gi, escape(data.input))}&hellip;\n            </div>\n          `;\n        },\n        no_results: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__no-results\" id=\"${this.dropdownId}-no-results\">\n              ${this.localization.noResults.replace(/{x}/gi, escape(data.input))}\n            </div>`;\n        },\n        not_loading: this.load === null ? null : (_data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__not-loading\" id=\"${this.dropdownId}-not-loading\">\n              ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}\n            </div>\n          `;\n        },\n        optgroup: (data) => {\n          let optgroup = document.createElement(\"div\");\n          optgroup.className = \"stzh-dropdown__optgroup\";\n          optgroup.appendChild(data.options);\n          return optgroup;\n        },\n        optgroup_header: (data, escape) => {\n          return `\n            <div class=\"stzh-dropdown__optgroup-header\">\n              ${escape(data.label)}\n            </div>\n          `;\n        },\n        loading: () => {\n          return `\n            <div class=\"stzh-dropdown__loader\">\n              <stzh-loader></stzh-loader>\n            </div>\n          `;\n        },\n        dropdown: () => {\n          return `<div class=\"stzh-dropdown__dropdown\"></div>`;\n        }\n      },\n      onChange: (value) => {\n        this._items = this.tomSelect.items;\n        this.updateFilled();\n\n        this.stzhChange.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onItemAdd: (value) => {\n        this._items = this.tomSelect.items;\n        this.stzhItemAdd.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onItemRemove: (value) => {\n        this._items = this.tomSelect.items;\n        this.stzhItemRemove.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onOptionAdd: (value) => {\n        this._options = this.tomSelect.options;\n        this.updateFilled();\n\n        this.stzhOptionAdd.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onOptionRemove: (value) => {\n        this._options = this.tomSelect.options;\n        this.updateFilled();\n\n        this.stzhOptionRemove.emit({\n          component: \"stzh-dropdown\",\n          value\n        });\n      },\n      onDropdownOpen: () => {\n        this.isOpen = true;\n        this.stzhOpen.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onDropdownClose: () => {\n        this.isOpen = false;\n        this.stzhClose.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onFocus: () => {\n        this.focusedByInput = true;\n\n        if (this.tomSelect.load && this.preload === \"focus\") {\n          // to be able to execute load function again, we reset loaded searches\n          this.resetLoadedSearches();\n\n          // if results have been preloaded before, load them now directly with load function\n          if (this.tomSelect.wrapper.classList.contains('preloaded')) {\n            // since tomSelect.preload() doesn't call tomSelect.shouldCall() method internally (to check for minCharacters),\n            // we will also not call it (this.tomSelect.settings.shouldLoad.call(this.tomSelect, ''))\n            this.tomSelect.load('');\n          }\n        }\n\n        this.rootElement.classList.add(CLASS_FOCUS);\n        const focusEvent = new FocusEvent('focus', {\n          view: window,\n          bubbles: false,\n          cancelable: false\n        });\n\n        this.element.dispatchEvent(focusEvent);\n        this.stzhFocus.emit({\n          component: \"stzh-dropdown\",\n          originalEvent: {\n            target: this.tomSelect.control\n          }\n        });\n      },\n      onBlur: () => {\n        this.rootElement.classList.remove(CLASS_FOCUS);\n        const blurEvent = new FocusEvent('blur', {\n          view: window,\n          bubbles: false,\n          cancelable: false\n        });\n\n        this.element.dispatchEvent(blurEvent);\n        this.stzhBlur.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onInitialize: () => {\n        this.stzhInit.emit({\n          component: \"stzh-dropdown\"\n        });\n      },\n      onLoad: () => {\n        this._options = this.tomSelect.options;\n      }\n    };\n\n    if (this._options) {\n      tomSelectOptions.options = this._options;\n    }\n\n    if (this._optgroups) {\n      tomSelectOptions.optgroups = this._optgroups;\n    }\n\n    if (this._items) {\n      tomSelectOptions.items = this._items;\n    }\n\n    this.tomSelect = new TomSelect(this.select, tomSelectOptions);\n\n    if (!this.openOnFocus) {\n      // we still want to enable opening the dropdown by click\n      this.tomSelect.control.addEventListener(\"click\", () => {\n        this.tomSelect.open();\n      });\n    }\n\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.tomSelect) {\n      this.tomSelect.destroy();\n      this.tomSelect = null;\n    }\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, 'icon') || !!this.icon;\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-dropdown\": true,\n      \"stzh-dropdown--is-inline\": this.inline,\n      \"stzh-dropdown--is-multiple\": this.multiple,\n      \"stzh-dropdown--is-disabled\": this.disabled,\n      \"stzh-dropdown--is-required\": this.required,\n      \"stzh-dropdown--is-invalid\": this.invalid,\n      [CLASS_FILLED]: this._items && this._items.length > 0,\n      \"stzh-dropdown--has-icon\": iconUsed,\n      \"stzh-dropdown--has-description\": descriptionUsed,\n      \"stzh-dropdown--has-description-long\": descriptionLongUsed,\n      \"stzh-dropdown--has-error\": errorUsed,\n      \"stzh-dropdown--has-no-search\": this.noSearch,\n      \"stzh-dropdown--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n      [`stzh-dropdown--size-${this.size}`]: !!this.size,\n      [`stzh-dropdown--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div\n          class={classes}\n          ref={(el) => (this.rootElement = el as HTMLDivElement)}\n        >\n          <div class=\"stzh-dropdown__field-wrapper\">\n            {/* tom-select replaces this select with an combobox.\n                Since it doesn't support aria-(describedby/required/invalid),\n                we write necessary status information in the aria-labelledby */}\n            <select\n              id={this.dropdownId}\n              class=\"stzh-dropdown__select\"\n              ref={(el) => (this.select = el as HTMLSelectElement)}\n              multiple={this.multiple}\n              name={this.name}\n              disabled={this.disabled}\n              aria-labelledby={`${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${!this.showMarker && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}`}\n            >\n              <slot></slot>\n            </select>\n\n            {/* <div class=\"stzh-dropdown__sizer\">\n              {this.placeholder}\n            </div> */}\n\n            <div class=\"stzh-dropdown__icon-angle-wrapper\">\n              {this.iconAngle ?\n                <stzh-icon name={this.iconAngle} class=\"stzh-dropdown__icon-angle\"></stzh-icon>\n                :\n                <slot name=\"icon-angle\"></slot>\n              }\n            </div>\n\n            <div class=\"stzh-dropdown__icon-wrapper\">\n              {this.icon ?\n                <stzh-icon class=\"stzh-dropdown__icon\" name={this.icon}></stzh-icon>\n                :\n                <slot name=\"icon\"></slot>\n              }\n            </div>\n\n            <label\n              id={`${this.dropdownId}-label`}\n              class=\"stzh-dropdown__label\"\n              htmlFor={this.dropdownId}\n            >\n              {this.label ? this.label : <slot name=\"label\"></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-dropdown__marker\">\n                  <span class=\"stzh-dropdown__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-dropdown__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </label>\n\n            {!this.showMarker && this.required &&\n              <div id={`${this.dropdownId}-required`} class=\"stzh-dropdown__vhidden\">\n                {this.localization.$globals.requiredFieldText}\n              </div>\n            }\n\n            {this.invalid &&\n              <div id={`${this.dropdownId}-invalid`} class=\"stzh-dropdown__vhidden\">\n                {this.localization.$globals.invalidFieldText}\n              </div>\n            }\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-dropdown\"\n            id={`${this.dropdownId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css

@@ -152,13 +152,13 @@
   --hover-background-color: var(--stzh-base-invert-color72);
   --hover-border-color: transparent;
 }
-:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false]) {
+:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false]), :host ::slotted(stzh-button[slot=button])[a11y-disabled]:not([a11y-disabled=false]) {
   --border-color: transparent;
   --background-color: var(--stzh-base-invert-color32);
   --hover-border-color: transparent;
   --hover-background-color: var(--stzh-base-invert-color32);
 }
-:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=secondary], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=input], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=tertiary] {
+:host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=secondary], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=input], :host ::slotted(stzh-button[slot=button])[disabled]:not([disabled=false])[variant=tertiary], :host ::slotted(stzh-button[slot=button])[a11y-disabled]:not([a11y-disabled=false])[variant=secondary], :host ::slotted(stzh-button[slot=button])[a11y-disabled]:not([a11y-disabled=false])[variant=input], :host ::slotted(stzh-button[slot=button])[a11y-disabled]:not([a11y-disabled=false])[variant=tertiary] {
   --color: var(--stzh-base-invert-color32);
   --border-color: var(--stzh-base-invert-color32);
   --background-color: transparent;
@@ -351,13 +351,13 @@
   --hover-background-color: var(--stzh-base-invert-color72);
   --hover-border-color: transparent;
 }
-.stzh-ghettobox__close[disabled]:not([disabled=false]) {
+.stzh-ghettobox__close[disabled]:not([disabled=false]), .stzh-ghettobox__close[a11y-disabled]:not([a11y-disabled=false]) {
   --border-color: transparent;
   --background-color: var(--stzh-base-invert-color32);
   --hover-border-color: transparent;
   --hover-background-color: var(--stzh-base-invert-color32);
 }
-.stzh-ghettobox__close[disabled]:not([disabled=false])[variant=secondary], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=input], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=tertiary] {
+.stzh-ghettobox__close[disabled]:not([disabled=false])[variant=secondary], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=input], .stzh-ghettobox__close[disabled]:not([disabled=false])[variant=tertiary], .stzh-ghettobox__close[a11y-disabled]:not([a11y-disabled=false])[variant=secondary], .stzh-ghettobox__close[a11y-disabled]:not([a11y-disabled=false])[variant=input], .stzh-ghettobox__close[a11y-disabled]:not([a11y-disabled=false])[variant=tertiary] {
   --color: var(--stzh-base-invert-color32);
   --border-color: var(--stzh-base-invert-color32);
   --background-color: transparent;

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

@@ -403,7 +403,7 @@ export class StzhInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing"
         },
         "attribute": "show-marker",
         "reflect": true,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-input.js","sourceRoot":"","sources":["../../../src/components/stzh-input/stzh-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Element,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\n      \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n    ];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onClearClick = (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-input\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-input\",\n      originalEvent: event\n    });\n  }\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={(el) => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={(el) => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.type}\n        name={this.name}\n        value={this.value}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\": buttonRightSlotUsed\n        || this.type === \"search\"\n        || (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-input__marker\">\n                  <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-input__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </label>\n            {this.clearable || this.type === \"search\"\n              ?\n              <stzh-button\n                class=\"stzh-input__button-right\"\n                icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n                icon-only\n                variant=\"input\"\n                onClick={this.onClearClick}\n                disabled={this.disabled || this.readonly || !this.filled}\n                a11yLabel={this.localization.$globals.clearButtonLabel}\n                aria-controls={this.inputId}\n              ></stzh-button>\n              :\n              <slot name=\"button-right\"></slot>\n            }\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-input\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-input.js","sourceRoot":"","sources":["../../../src/components/stzh-input/stzh-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Element,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhInputFocusEvent,\n  StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\n      \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n    ];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onClearClick = (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-input\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-input\",\n      originalEvent: event\n    });\n  }\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={(el) => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={(el) => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.type}\n        name={this.name}\n        value={this.value}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\": buttonRightSlotUsed\n        || this.type === \"search\"\n        || (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-input__marker\">\n                  <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-input__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </label>\n            {this.clearable || this.type === \"search\"\n              ?\n              <stzh-button\n                class=\"stzh-input__button-right\"\n                icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n                icon-only\n                variant=\"input\"\n                onClick={this.onClearClick}\n                disabled={this.disabled || this.readonly || !this.filled}\n                a11yLabel={this.localization.$globals.clearButtonLabel}\n                aria-controls={this.inputId}\n              ></stzh-button>\n              :\n              <slot name=\"button-right\"></slot>\n            }\n          </div>\n          <StzhInputDescription\n            classPrefix=\"stzh-input\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}