@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

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

@@ -1,1436 +1,1514 @@
-import { Host, h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { StzhInputDescription } from "../stzh-input/stzh-input-description";
-import TomSelect from "tom-select/dist/js/tom-select.base.js";
-import TomSelectRemoveButton from "tom-select/dist/js/plugins/remove_button.js";
-import TomSelectCheckboxOptions from "tom-select/dist/js/plugins/checkbox_options.js";
-import TomSelectInputAutogrow from "tom-select/dist/js/plugins/input_autogrow.js";
-import TomSelectNoBackspaceDelete from "tom-select/dist/js/plugins/no_backspace_delete.js";
-const TomSelectInputHide = function (_plugin_options) {
-  // const self = this;
-  // self.on("initialize", () => {
-  //   const input = self.control_input as HTMLInputElement;
-  //   if (input) input.disabled = true;
-  // })
-};
-const CLASS_FILLED = "stzh-dropdown--is-filled";
-const CLASS_FOCUS = "stzh-dropdown--has-focus";
-TomSelect.define("remove_button", TomSelectRemoveButton);
-TomSelect.define("checkbox_options", TomSelectCheckboxOptions);
-TomSelect.define("input_autogrow", TomSelectInputAutogrow);
-TomSelect.define("no_backspace_delete", TomSelectNoBackspaceDelete);
-TomSelect.define("input_hide", TomSelectInputHide);
-let dropdownCounter = 0;
-/**
- * @slot label - Slot for label content
- * @slot description - Slot for description
- * @slot description-long - Slot for long description (in popover)
- * @slot error - Slot for error
- */
-export class StzhDropdown {
-  constructor() {
-    /**
-     * An array of property names to analyze when filtering options.
-     * Weights can be given to each field to improve search result:
-     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
-     */
-    this.searchField = ["text"];
-    /** Whether multiple items option can be selected */
-    this.multiple = false;
-    /** Show inline (auto width) */
-    this.inline = false;
-    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
-    this.maxOptions = 50;
-    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
-    this.searchConjunction = "and";
-    /**  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. */
-    this.allowEmptyOption = false;
-    /** Show the dropdown immediately when the control receives focus. */
-    this.openOnFocus = true;
-    /** 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. */
-    this.closeAfterSelect = null;
-    /** 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). */
-    this.load = null;
-    /** Minimum of characters required to execute the `load` function */
-    this.minCharacters = 3;
-    /** 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. */
-    this.loadThrottle = 300;
-    /** 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. */
-    this.preload = false;
-    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
-    this.labelField = "text";
-    /** The name of the property to use as the value when an item is selected. */
-    this.valueField = "value";
-    /** The name of the property to group items by. */
-    this.optgroupField = "optgroup";
-    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
-    this.optgroupLabelField = "label";
-    /** The name of the option group property that serves as its unique identifier. */
-    this.optgroupValueField = "value";
-    /** Name of hidden select element */
-    this.name = "";
-    /** Variant */
-    this.variant = "default";
-    /** Size variant */
-    this.size = "default";
-    /** Whether the dropdown is disabled */
-    this.disabled = false;
-    /** Popover placement */
-    this.popoverPlacement = "bottom";
-    /** Label */
-    this.label = "";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Prevent option search */
-    this.noSearch = false;
-    /** Prevent backspace delete */
-    this.noBackspaceDelete = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Show text in label depending if field is optional/required */
-    this.showMarker = false;
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
-  }
-  optionsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._options = JSON.parse(newValue);
-    }
-    else {
-      this._options = newValue;
-    }
-  }
-  itemsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._items = JSON.parse(newValue);
-    }
-    else {
-      this._items = newValue;
-    }
-  }
-  searchFieldWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._searchField = JSON.parse(newValue);
-    }
-    else {
-      this._searchField = newValue;
-    }
-  }
-  optgroupsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._optgroups = JSON.parse(newValue);
-    }
-    else {
-      this._optgroups = newValue;
-    }
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  /**
-   * Returns the value of the control.
-   * If multiple items can be selected,
-   * this returns an array, otherwise a string.
-  */
-  async getValue() {
-    return this.tomSelect.getValue();
-  }
-  /** Set new value */
-  async setValue(newValue) {
-    this.tomSelect.setValue(newValue);
-  }
-  /** Focus select */
-  async setFocus() {
-    this.tomSelect.focus();
-  }
-  updateFilled() {
-    if (this._items.length > 0) {
-      this.rootElement.classList.add(CLASS_FILLED);
-    }
-    else {
-      this.rootElement.classList.remove(CLASS_FILLED);
-    }
-  }
-  async componentWillLoad() {
-    this.dropdownId = `stzh-dropdown-${dropdownCounter++}`;
-    this.optionsWatcher(this.options);
-    this.optgroupsWatcher(this.optgroups);
-    this.itemsWatcher(this.items);
-    this.searchFieldWatcher(this.searchField);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'dropdown');
-    }
-  }
-  async componentWillUpdate() {
-    if (this.tomSelect) {
-      this.tomSelect.destroy();
-      this.tomSelect = null;
-    }
-  }
-  async componentDidRender() {
-    if (this.tomSelect) {
-      return;
-    }
-    const plugins = {};
-    if (this.noSearch) {
-      plugins["input_hide"] = {};
-    }
-    else {
-      plugins["input_autogrow"] = {};
-    }
-    if (this.noBackspaceDelete) {
-      plugins["no_backspace_delete"] = {};
-    }
-    if (this.multiple) {
-      plugins["checkbox_options"] = {};
-      plugins["remove_button"] = {
-        title: this.localization.removeButtonTitle,
-        label: '<stzh-icon name="close" class="stzh-dropdown__remove-icon"></stzh-icon>'
-      };
-    }
-    const tomSelectOptions = {
-      plugins,
-      maxItems: this.multiple ? null : 1,
-      maxOptions: this.maxOptions,
-      items: this._items,
-      optgroups: this._optgroups,
-      searchField: this._searchField,
-      searchConjunction: this.searchConjunction,
-      allowEmptyOption: this.allowEmptyOption,
-      closeAfterSelect: this.closeAfterSelect !== null
-        ? this.closeAfterSelect
-        : !this.multiple,
-      labelField: this.labelField,
-      valueField: this.valueField,
-      optgroupField: this.optgroupField,
-      optgroupLabelField: this.optgroupLabelField,
-      optgroupValueField: this.optgroupValueField,
-      lockOptgroupOrder: this.lockOptgroupOrder,
-      load: this.load,
-      shouldLoad: (query) => {
-        return query.length >= this.minCharacters;
-      },
-      loadThrottle: this.loadThrottle,
-      preload: this.preload,
-      openOnFocus: this.openOnFocus,
-      loadingClass: "is-loading",
-      hideSelected: false,
-      duplicates: false,
-      delimiter: ",",
-      copyClassesToDropdown: false,
-      placeholder: this.placeholder,
-      hidePlaceholder: null,
-      // if you want the user to be able to add own items enable this option
-      // (but checkbox_options plugin throws an error and would need a fix first)
-      // create: true,
-      // createOnBlur: false,
-      // createFilter: null,
-      // persist: false,
-      render: {
-        option: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__option" title="${escape(data[this.labelField])}">
-              <stzh-icon name="checkmark" class="stzh-dropdown__option-check"></stzh-icon>
-              <span class="stzh-dropdown__option-title">
-                ${escape(data[this.labelField])}
-              </span>
-            </div>
-          `;
-        },
-        item: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__item">
-              ${escape(data[this.labelField])}
-            </div>
-          `;
-        },
-        option_create: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__create">
-              ${this.localization.create.replace(/{x}/gi, escape(data.input))}&hellip;
-            </div>
-          `;
-        },
-        no_results: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__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">
-              ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}
-            </div>
-          `;
-        },
-        optgroup: (data) => {
-          let optgroup = document.createElement("div");
-          optgroup.className = "stzh-dropdown__optgroup";
-          optgroup.appendChild(data.options);
-          return optgroup;
-        },
-        optgroup_header: (data, escape) => {
-          return `
-            <div class="stzh-dropdown__optgroup-header">
-              ${escape(data.label)}
-            </div>
-          `;
-        },
-        loading: () => {
-          return `
-            <div class="stzh-dropdown__loader">
-              <stzh-loader></stzh-loader>
-            </div>
-          `;
-        },
-        dropdown: () => {
-          return `<div class="stzh-dropdown__dropdown"></div>`;
-        }
-      },
-      onChange: (value) => {
-        this._items = this.tomSelect.items;
-        this.updateFilled();
-        this.stzhChange.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onItemAdd: (value) => {
-        this._items = this.tomSelect.items;
-        this.stzhItemAdd.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onItemRemove: (value) => {
-        this._items = this.tomSelect.items;
-        this.stzhItemRemove.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onOptionAdd: (value) => {
-        this._options = this.tomSelect.options;
-        this.updateFilled();
-        this.stzhOptionAdd.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onOptionRemove: (value) => {
-        this._options = this.tomSelect.options;
-        this.updateFilled();
-        this.stzhOptionRemove.emit({
-          component: "stzh-dropdown",
-          value
-        });
-      },
-      onDropdownOpen: () => {
-        this.stzhOpen.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onDropdownClose: () => {
-        this.stzhClose.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onFocus: () => {
-        this.rootElement.classList.add(CLASS_FOCUS);
-        const focusEvent = new FocusEvent('focus', {
-          view: window,
-          bubbles: false,
-          cancelable: false
-        });
-        this.element.dispatchEvent(focusEvent);
-        this.stzhFocus.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onBlur: () => {
-        this.rootElement.classList.remove(CLASS_FOCUS);
-        const blurEvent = new FocusEvent('blur', {
-          view: window,
-          bubbles: false,
-          cancelable: false
-        });
-        this.element.dispatchEvent(blurEvent);
-        this.stzhBlur.emit({
-          component: "stzh-dropdown"
-        });
-      },
-      onInitialize: () => {
-        this.stzhInit.emit({
-          component: "stzh-dropdown"
-        });
-      },
-    };
-    if (this._options) {
-      tomSelectOptions.options = this._options;
-    }
-    if (this._optgroups) {
-      tomSelectOptions.optgroups = this._optgroups;
-    }
-    if (this._items) {
-      tomSelectOptions.items = this._items;
-    }
-    this.tomSelect = new TomSelect(this.select, tomSelectOptions);
-  }
-  disconnectedCallback() {
-    if (this.tomSelect) {
-      this.tomSelect.destroy();
-      this.tomSelect = null;
-    }
-  }
-  render() {
-    var _a;
-    const iconUsed = hasSlot(this.element, 'icon') || !!this.icon;
-    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-dropdown": true,
-      "stzh-dropdown--is-inline": this.inline,
-      "stzh-dropdown--is-multiple": this.multiple,
-      "stzh-dropdown--is-disabled": this.disabled,
-      "stzh-dropdown--is-required": this.required,
-      "stzh-dropdown--is-invalid": this.invalid,
-      [CLASS_FILLED]: this._items && this._items.length > 0,
-      "stzh-dropdown--has-icon": iconUsed,
-      "stzh-dropdown--has-description": descriptionUsed,
-      "stzh-dropdown--has-description-long": descriptionLongUsed,
-      "stzh-dropdown--has-error": errorUsed,
-      "stzh-dropdown--has-placeholder": !!this.placeholder,
-      "stzh-dropdown--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
-      [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
-      [`stzh-dropdown--size-${this.size}`]: !!this.size,
-      [`stzh-dropdown--${this.variant}`]: !!this.variant
-    };
-    return (h(Host, null, 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-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("div", { class: "stzh-dropdown__sizer" }, this.placeholder), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), 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 }, 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(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() {
-    return {
-      "$": ["stzh-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "options": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "any[] | string",
-          "resolved": "any[] | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Available options"
-        },
-        "attribute": "options",
-        "reflect": false
-      },
-      "optgroups": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "any[] | string",
-          "resolved": "any[] | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Option groups that options will be bucketed into.\r\nMake sure each object in the array has a property named whatever `optgroupValueField` is set to."
-        },
-        "attribute": "optgroups",
-        "reflect": false
-      },
-      "items": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string[] | string",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Selected values"
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "searchField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string[] | string",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An array of property names to analyze when filtering options.\r\nWeights can be given to each field to improve search result:\r\n`[{\"field\":\"text\",\"weight\":2},{\"field\":\"text2\",\"weight\":0.5}]`"
-        },
-        "attribute": "search-field",
-        "reflect": false,
-        "defaultValue": "[\"text\"]"
-      },
-      "multiple": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether multiple items option can be selected"
-        },
-        "attribute": "multiple",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show inline (auto width)"
-        },
-        "attribute": "inline",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "maxOptions": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number | null",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The max number of options to display in the dropdown. Set to `null` for an unlimited number of options."
-        },
-        "attribute": "max-options",
-        "reflect": false,
-        "defaultValue": "50"
-      },
-      "searchConjunction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"and\" | \"or\"",
-          "resolved": "\"and\" | \"or\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or'"
-        },
-        "attribute": "search-conjunction",
-        "reflect": false,
-        "defaultValue": "\"and\""
-      },
-      "allowEmptyOption": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "allow-empty-option",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "openOnFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show the dropdown immediately when the control receives focus."
-        },
-        "attribute": "open-on-focus",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "closeAfterSelect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | null",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "close-after-select",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "load": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(query: string, callback: Function) => any[] | null",
-          "resolved": "(query: string, callback: Function) => any[]",
-          "references": {
-            "Function": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "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)."
-        },
-        "defaultValue": "null"
-      },
-      "minCharacters": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum of characters required to execute the `load` function"
-        },
-        "attribute": "min-characters",
-        "reflect": false,
-        "defaultValue": "3"
-      },
-      "loadThrottle": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "load-throttle",
-        "reflect": false,
-        "defaultValue": "300"
-      },
-      "preload": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | \"focus\"",
-          "resolved": "\"focus\" | boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "preload",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "labelField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the property to render as an option / item label (not needed when custom rendering functions are defined)."
-        },
-        "attribute": "label-field",
-        "reflect": false,
-        "defaultValue": "\"text\""
-      },
-      "valueField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the property to use as the value when an item is selected."
-        },
-        "attribute": "value-field",
-        "reflect": false,
-        "defaultValue": "\"value\""
-      },
-      "optgroupField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the property to group items by."
-        },
-        "attribute": "optgroup-field",
-        "reflect": false,
-        "defaultValue": "\"optgroup\""
-      },
-      "optgroupLabelField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the property to render as an option group label (not needed when custom rendering functions are defined)."
-        },
-        "attribute": "optgroup-label-field",
-        "reflect": false,
-        "defaultValue": "\"label\""
-      },
-      "optgroupValueField": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the option group property that serves as its unique identifier."
-        },
-        "attribute": "optgroup-value-field",
-        "reflect": false,
-        "defaultValue": "\"value\""
-      },
-      "lockOptgroupOrder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "true",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "lock-optgroup-order",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of hidden select element"
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"plain\"",
-          "resolved": "\"default\" | \"plain\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant"
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size variant"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the dropdown is disabled"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "popoverPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"bottom\" | \"top\"",
-          "resolved": "\"bottom\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Popover placement"
-        },
-        "attribute": "popover-placement",
-        "reflect": true,
-        "defaultValue": "\"bottom\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon (use instead of icon slot)"
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "noSearch": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prevent option search"
-        },
-        "attribute": "no-search",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noBackspaceDelete": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Prevent backspace delete"
-        },
-        "attribute": "no-backspace-delete",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Invalid status"
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Required status"
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "showMarker": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show text in label depending if field is optional/required"
-        },
-        "attribute": "show-marker",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Description message (use description slot as alternative)"
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "descriptionLong": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
-        },
-        "attribute": "description-long",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "One or multiple error message (use error slot as alternative)"
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder option"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhDropdownLocalizedText",
-          "resolved": "StzhLocaleComponent & { create: string; notLoading: string; noResults: string; removeButtonTitle: string; }",
-          "references": {
-            "StzhDropdownLocalizedText": {
-              "location": "import",
-              "path": "./stzh-dropdown.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings"
-        }
-      },
-      "a11yDescribedby": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
-        },
-        "attribute": "a11y-describedby",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhChange",
-        "name": "stzhChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown change event"
-        },
-        "complexType": {
-          "original": "StzhDropdownChangeEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
-          "references": {
-            "StzhDropdownChangeEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhItemAdd",
-        "name": "stzhItemAdd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdownItemAddEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
-          "references": {
-            "StzhDropdownItemAddEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhItemRemove",
-        "name": "stzhItemRemove",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdownItemRemoveEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
-          "references": {
-            "StzhDropdownItemRemoveEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhOptionAdd",
-        "name": "stzhOptionAdd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdownOptionAddEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
-          "references": {
-            "StzhDropdownOptionAddEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhOptionRemove",
-        "name": "stzhOptionRemove",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdownOptionRemoveEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
-          "references": {
-            "StzhDropdownOptionRemoveEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhOpen",
-        "name": "stzhOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdownOpenEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
-          "references": {
-            "StzhDropdownOpenEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhClose",
-        "name": "stzhClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdowCloseEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
-          "references": {
-            "StzhDropdowCloseEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhFocus",
-        "name": "stzhFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdownFocusEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
-          "references": {
-            "StzhDropdownFocusEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhBlur",
-        "name": "stzhBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown blur event"
-        },
-        "complexType": {
-          "original": "StzhDropdownBlurEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
-          "references": {
-            "StzhDropdownBlurEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhInit",
-        "name": "stzhInit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown focus event"
-        },
-        "complexType": {
-          "original": "StzhDropdowInitEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
-          "references": {
-            "StzhDropdowInitEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getValue": {
-        "complexType": {
-          "signature": "() => Promise<string | string[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<string | string[]>"
-        },
-        "docs": {
-          "text": "Returns the value of the control.\r\nIf multiple items can be selected,\r\nthis returns an array, otherwise a string.",
-          "tags": []
-        }
-      },
-      "setValue": {
-        "complexType": {
-          "signature": "(newValue: string | string[]) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set new value",
-          "tags": []
-        }
-      },
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focus select",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "options",
-        "methodName": "optionsWatcher"
-      }, {
-        "propName": "items",
-        "methodName": "itemsWatcher"
-      }, {
-        "propName": "searchField",
-        "methodName": "searchFieldWatcher"
-      }, {
-        "propName": "optgroups",
-        "methodName": "optgroupsWatcher"
-      }, {
-        "propName": "error",
-        "methodName": "errorWatcher"
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+import TomSelect from "tom-select/dist/js/tom-select.base.js";
+import TomSelectRemoveButton from "tom-select/dist/js/plugins/remove_button.js";
+import TomSelectCheckboxOptions from "tom-select/dist/js/plugins/checkbox_options.js";
+import TomSelectInputAutogrow from "tom-select/dist/js/plugins/input_autogrow.js";
+import TomSelectNoBackspaceDelete from "tom-select/dist/js/plugins/no_backspace_delete.js";
+const TomSelectInputHide = function (_plugin_options) {
+  // const self = this;
+  // self.on("initialize", () => {
+  //   const input = self.control_input as HTMLInputElement;
+  //   if (input) input.disabled = true;
+  // })
+};
+const CLASS_FILLED = "stzh-dropdown--is-filled";
+const CLASS_FOCUS = "stzh-dropdown--has-focus";
+TomSelect.define("remove_button", TomSelectRemoveButton);
+TomSelect.define("checkbox_options", TomSelectCheckboxOptions);
+TomSelect.define("input_autogrow", TomSelectInputAutogrow);
+TomSelect.define("no_backspace_delete", TomSelectNoBackspaceDelete);
+TomSelect.define("input_hide", TomSelectInputHide);
+let dropdownCounter = 0;
+/**
+ * @slot label - Slot for label content
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ */
+export class StzhDropdown {
+  constructor() {
+    /**
+     * An array of property names to analyze when filtering options.
+     * Weights can be given to each field to improve search result:
+     * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
+     */
+    this.searchField = ["text"];
+    /** Whether multiple items option can be selected */
+    this.multiple = false;
+    /** Show inline (auto width) */
+    this.inline = false;
+    /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
+    this.maxOptions = 50;
+    /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
+    this.searchConjunction = "and";
+    /**  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. */
+    this.allowEmptyOption = false;
+    /** Show the dropdown immediately when the control receives focus. */
+    this.openOnFocus = true;
+    /** 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. */
+    this.closeAfterSelect = null;
+    /** 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). */
+    this.load = null;
+    /** Minimum of characters required to execute the `load` function */
+    this.minCharacters = 3;
+    /** 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. */
+    this.loadThrottle = 300;
+    /** 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. */
+    this.preload = false;
+    /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
+    this.labelField = "text";
+    /** The name of the property to use as the value when an item is selected. */
+    this.valueField = "value";
+    /** The name of the property to group items by. */
+    this.optgroupField = "optgroup";
+    /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
+    this.optgroupLabelField = "label";
+    /** The name of the option group property that serves as its unique identifier. */
+    this.optgroupValueField = "value";
+    /** Name of hidden select element */
+    this.name = "";
+    /** Variant */
+    this.variant = "default";
+    /** Size variant */
+    this.size = "default";
+    /** Whether the dropdown is disabled */
+    this.disabled = false;
+    /** Popover placement */
+    this.popoverPlacement = "bottom";
+    /** Label */
+    this.label = "";
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Prevent option search */
+    this.noSearch = false;
+    /** Prevent backspace delete */
+    this.noBackspaceDelete = false;
+    /** Invalid status */
+    this.invalid = false;
+    /** Required status */
+    this.required = false;
+    /** Show text in label depending if field is optional/required */
+    this.showMarker = false;
+    /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
+  }
+  optionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._options = JSON.parse(newValue);
+    }
+    else {
+      this._options = newValue;
+    }
+  }
+  itemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  searchFieldWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._searchField = JSON.parse(newValue);
+    }
+    else {
+      this._searchField = newValue;
+    }
+  }
+  optgroupsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._optgroups = JSON.parse(newValue);
+    }
+    else {
+      this._optgroups = newValue;
+    }
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  /**
+   * Returns the value of the control.
+   * If multiple items can be selected,
+   * this returns an array, otherwise a string.
+  */
+  async getValue() {
+    return this.tomSelect.getValue();
+  }
+  /** Set new value */
+  async setValue(newValue) {
+    this.tomSelect.setValue(newValue);
+  }
+  /** Focus select */
+  async setFocus() {
+    this.tomSelect.focus();
+  }
+  /** Reset loaded/cached search queries (calls from load property function) */
+  async resetLoadedSearches() {
+    this.tomSelect.loadedSearches = {};
+  }
+  /** Return loaded/cached search queries (calls from load property function) */
+  async getLoadedSearches() {
+    return this.tomSelect.loadedSearches;
+  }
+  /** Load items by calling load property/function  */
+  async loadItems(query) {
+    return this.tomSelect.load(query);
+  }
+  updateFilled() {
+    if (this._items.length > 0) {
+      this.rootElement.classList.add(CLASS_FILLED);
+    }
+    else {
+      this.rootElement.classList.remove(CLASS_FILLED);
+    }
+  }
+  async componentWillLoad() {
+    this.dropdownId = `stzh-dropdown-${dropdownCounter++}`;
+    this.optionsWatcher(this.options);
+    this.optgroupsWatcher(this.optgroups);
+    this.itemsWatcher(this.items);
+    this.searchFieldWatcher(this.searchField);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'dropdown');
+    }
+  }
+  async componentWillUpdate() {
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
+      this.tomSelect = null;
+    }
+  }
+  async componentDidRender() {
+    if (this.tomSelect) {
+      return;
+    }
+    const plugins = {};
+    if (this.noSearch) {
+      plugins["input_hide"] = {};
+    }
+    else {
+      plugins["input_autogrow"] = {};
+    }
+    if (this.noBackspaceDelete) {
+      plugins["no_backspace_delete"] = {};
+    }
+    if (this.multiple) {
+      plugins["checkbox_options"] = {};
+      plugins["remove_button"] = {
+        title: this.localization.removeButtonTitle,
+        label: '<stzh-icon name="close" class="stzh-dropdown__remove-icon"></stzh-icon>'
+      };
+    }
+    const tomSelectOptions = {
+      plugins,
+      maxItems: this.multiple ? null : 1,
+      maxOptions: this.maxOptions,
+      items: this._items,
+      optgroups: this._optgroups,
+      searchField: this._searchField,
+      searchConjunction: this.searchConjunction,
+      allowEmptyOption: this.allowEmptyOption,
+      closeAfterSelect: this.closeAfterSelect !== null
+        ? this.closeAfterSelect
+        : !this.multiple,
+      labelField: this.labelField,
+      valueField: this.valueField,
+      optgroupField: this.optgroupField,
+      optgroupLabelField: this.optgroupLabelField,
+      optgroupValueField: this.optgroupValueField,
+      lockOptgroupOrder: this.lockOptgroupOrder,
+      load: this.load,
+      shouldLoad: (query) => {
+        return query.length >= this.minCharacters;
+      },
+      loadThrottle: this.loadThrottle,
+      preload: this.preload,
+      openOnFocus: this.openOnFocus,
+      loadingClass: "is-loading",
+      hideSelected: false,
+      duplicates: false,
+      delimiter: ",",
+      copyClassesToDropdown: false,
+      placeholder: this.placeholder,
+      hidePlaceholder: null,
+      // if you want the user to be able to add own items enable this option
+      // (but checkbox_options plugin throws an error and would need a fix first)
+      // create: function(input, callback) {
+      //   callback({ value: input, text: input });
+      // },
+      // createOnBlur: false,
+      // createFilter: null,
+      // persist: false,
+      render: {
+        option: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__option" title="${escape(data[this.labelField])}">
+              <stzh-icon name="checkmark" class="stzh-dropdown__option-check"></stzh-icon>
+              <span class="stzh-dropdown__option-title">
+                ${escape(data[this.labelField])}
+              </span>
+            </div>
+          `;
+        },
+        item: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__item">
+              ${escape(data[this.labelField])}
+            </div>
+          `;
+        },
+        option_create: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__create">
+              ${this.localization.create.replace(/{x}/gi, escape(data.input))}&hellip;
+            </div>
+          `;
+        },
+        no_results: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__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">
+              ${this.localization.notLoading.replace(/{x}/gi, escape(this.minCharacters.toString()))}
+            </div>
+          `;
+        },
+        optgroup: (data) => {
+          let optgroup = document.createElement("div");
+          optgroup.className = "stzh-dropdown__optgroup";
+          optgroup.appendChild(data.options);
+          return optgroup;
+        },
+        optgroup_header: (data, escape) => {
+          return `
+            <div class="stzh-dropdown__optgroup-header">
+              ${escape(data.label)}
+            </div>
+          `;
+        },
+        loading: () => {
+          return `
+            <div class="stzh-dropdown__loader">
+              <stzh-loader></stzh-loader>
+            </div>
+          `;
+        },
+        dropdown: () => {
+          return `<div class="stzh-dropdown__dropdown"></div>`;
+        }
+      },
+      onChange: (value) => {
+        this._items = this.tomSelect.items;
+        this.updateFilled();
+        this.stzhChange.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onItemAdd: (value) => {
+        this._items = this.tomSelect.items;
+        this.stzhItemAdd.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onItemRemove: (value) => {
+        this._items = this.tomSelect.items;
+        this.stzhItemRemove.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onOptionAdd: (value) => {
+        this._options = this.tomSelect.options;
+        this.updateFilled();
+        this.stzhOptionAdd.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onOptionRemove: (value) => {
+        this._options = this.tomSelect.options;
+        this.updateFilled();
+        this.stzhOptionRemove.emit({
+          component: "stzh-dropdown",
+          value
+        });
+      },
+      onDropdownOpen: () => {
+        this.stzhOpen.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onDropdownClose: () => {
+        this.stzhClose.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onFocus: () => {
+        if (this.tomSelect.load && this.preload === "focus") {
+          // to be able to execute load function again, we reset loaded searches
+          this.resetLoadedSearches();
+          // if results have been preloaded before, load them now directly with load function
+          if (this.tomSelect.wrapper.classList.contains('preloaded')) {
+            // since tomSelect.preload() doesn't call tomSelect.shouldCall() method internally (to check for minCharacters),
+            // we will also not call it (this.tomSelect.settings.shouldLoad.call(this.tomSelect, ''))
+            this.tomSelect.load('');
+          }
+        }
+        this.rootElement.classList.add(CLASS_FOCUS);
+        const focusEvent = new FocusEvent('focus', {
+          view: window,
+          bubbles: false,
+          cancelable: false
+        });
+        this.element.dispatchEvent(focusEvent);
+        this.stzhFocus.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onBlur: () => {
+        this.rootElement.classList.remove(CLASS_FOCUS);
+        const blurEvent = new FocusEvent('blur', {
+          view: window,
+          bubbles: false,
+          cancelable: false
+        });
+        this.element.dispatchEvent(blurEvent);
+        this.stzhBlur.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onInitialize: () => {
+        this.stzhInit.emit({
+          component: "stzh-dropdown"
+        });
+      },
+      onLoad: () => {
+        this._options = this.tomSelect.options;
+      }
+    };
+    if (this._options) {
+      tomSelectOptions.options = this._options;
+    }
+    if (this._optgroups) {
+      tomSelectOptions.optgroups = this._optgroups;
+    }
+    if (this._items) {
+      tomSelectOptions.items = this._items;
+    }
+    this.tomSelect = new TomSelect(this.select, tomSelectOptions);
+  }
+  disconnectedCallback() {
+    if (this.tomSelect) {
+      this.tomSelect.destroy();
+      this.tomSelect = null;
+    }
+  }
+  render() {
+    var _a;
+    const iconUsed = hasSlot(this.element, 'icon') || !!this.icon;
+    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-dropdown": true,
+      "stzh-dropdown--is-inline": this.inline,
+      "stzh-dropdown--is-multiple": this.multiple,
+      "stzh-dropdown--is-disabled": this.disabled,
+      "stzh-dropdown--is-required": this.required,
+      "stzh-dropdown--is-invalid": this.invalid,
+      [CLASS_FILLED]: this._items && this._items.length > 0,
+      "stzh-dropdown--has-icon": iconUsed,
+      "stzh-dropdown--has-description": descriptionUsed,
+      "stzh-dropdown--has-description-long": descriptionLongUsed,
+      "stzh-dropdown--has-error": errorUsed,
+      "stzh-dropdown--has-placeholder": !!this.placeholder,
+      "stzh-dropdown--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
+      [`stzh-dropdown--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
+      [`stzh-dropdown--size-${this.size}`]: !!this.size,
+      [`stzh-dropdown--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, 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-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("div", { class: "stzh-dropdown__sizer" }, this.placeholder), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), 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 }, 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(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() {
+    return {
+      "$": ["stzh-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Available options"
+        },
+        "attribute": "options",
+        "reflect": false
+      },
+      "optgroups": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Option groups that options will be bucketed into.\nMake sure each object in the array has a property named whatever `optgroupValueField` is set to."
+        },
+        "attribute": "optgroups",
+        "reflect": false
+      },
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string[] | string",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selected values"
+        },
+        "attribute": "items",
+        "reflect": false
+      },
+      "searchField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string[] | string",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An array of property names to analyze when filtering options.\nWeights can be given to each field to improve search result:\n`[{\"field\":\"text\",\"weight\":2},{\"field\":\"text2\",\"weight\":0.5}]`"
+        },
+        "attribute": "search-field",
+        "reflect": false,
+        "defaultValue": "[\"text\"]"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether multiple items option can be selected"
+        },
+        "attribute": "multiple",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show inline (auto width)"
+        },
+        "attribute": "inline",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "maxOptions": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The max number of options to display in the dropdown. Set to `null` for an unlimited number of options."
+        },
+        "attribute": "max-options",
+        "reflect": false,
+        "defaultValue": "50"
+      },
+      "searchConjunction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"and\" | \"or\"",
+          "resolved": "\"and\" | \"or\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or'"
+        },
+        "attribute": "search-conjunction",
+        "reflect": false,
+        "defaultValue": "\"and\""
+      },
+      "allowEmptyOption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "allow-empty-option",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "openOnFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show the dropdown immediately when the control receives focus."
+        },
+        "attribute": "open-on-focus",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "closeAfterSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | null",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "close-after-select",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "load": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(query: string, callback: Function) => any[] | null",
+          "resolved": "(query: string, callback: Function) => any[]",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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)."
+        },
+        "defaultValue": "null"
+      },
+      "minCharacters": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum of characters required to execute the `load` function"
+        },
+        "attribute": "min-characters",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "loadThrottle": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "load-throttle",
+        "reflect": false,
+        "defaultValue": "300"
+      },
+      "preload": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | \"focus\"",
+          "resolved": "\"focus\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "preload",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "labelField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the property to render as an option / item label (not needed when custom rendering functions are defined)."
+        },
+        "attribute": "label-field",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "valueField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the property to use as the value when an item is selected."
+        },
+        "attribute": "value-field",
+        "reflect": false,
+        "defaultValue": "\"value\""
+      },
+      "optgroupField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the property to group items by."
+        },
+        "attribute": "optgroup-field",
+        "reflect": false,
+        "defaultValue": "\"optgroup\""
+      },
+      "optgroupLabelField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the property to render as an option group label (not needed when custom rendering functions are defined)."
+        },
+        "attribute": "optgroup-label-field",
+        "reflect": false,
+        "defaultValue": "\"label\""
+      },
+      "optgroupValueField": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the option group property that serves as its unique identifier."
+        },
+        "attribute": "optgroup-value-field",
+        "reflect": false,
+        "defaultValue": "\"value\""
+      },
+      "lockOptgroupOrder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "true",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "lock-optgroup-order",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of hidden select element"
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"plain\"",
+          "resolved": "\"default\" | \"plain\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\"",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the dropdown is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"bottom\" | \"top\"",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon (use instead of icon slot)"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "noSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prevent option search"
+        },
+        "attribute": "no-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noBackspaceDelete": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prevent backspace delete"
+        },
+        "attribute": "no-backspace-delete",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status"
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Required status"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show text in label depending if field is optional/required"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "descriptionLong": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        "attribute": "description-long",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": "Placeholder option"
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDropdownLocalizedText",
+          "resolved": "StzhLocaleComponent & { create: string; notLoading: string; noResults: string; removeButtonTitle: string; }",
+          "references": {
+            "StzhDropdownLocalizedText": {
+              "location": "import",
+              "path": "./stzh-dropdown.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown change event"
+        },
+        "complexType": {
+          "original": "StzhDropdownChangeEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+          "references": {
+            "StzhDropdownChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhItemAdd",
+        "name": "stzhItemAdd",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdownItemAddEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+          "references": {
+            "StzhDropdownItemAddEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhItemRemove",
+        "name": "stzhItemRemove",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdownItemRemoveEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+          "references": {
+            "StzhDropdownItemRemoveEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOptionAdd",
+        "name": "stzhOptionAdd",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdownOptionAddEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+          "references": {
+            "StzhDropdownOptionAddEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOptionRemove",
+        "name": "stzhOptionRemove",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdownOptionRemoveEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+          "references": {
+            "StzhDropdownOptionRemoveEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOpen",
+        "name": "stzhOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdownOpenEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "references": {
+            "StzhDropdownOpenEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClose",
+        "name": "stzhClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdowCloseEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "references": {
+            "StzhDropdowCloseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhFocus",
+        "name": "stzhFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdownFocusEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "references": {
+            "StzhDropdownFocusEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhBlur",
+        "name": "stzhBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown blur event"
+        },
+        "complexType": {
+          "original": "StzhDropdownBlurEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "references": {
+            "StzhDropdownBlurEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhInit",
+        "name": "stzhInit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown focus event"
+        },
+        "complexType": {
+          "original": "StzhDropdowInitEvent",
+          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "references": {
+            "StzhDropdowInitEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getValue": {
+        "complexType": {
+          "signature": "() => Promise<string | string[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string | string[]>"
+        },
+        "docs": {
+          "text": "Returns the value of the control.\nIf multiple items can be selected,\nthis returns an array, otherwise a string.",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(newValue: string | string[]) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set new value",
+          "tags": []
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus select",
+          "tags": []
+        }
+      },
+      "resetLoadedSearches": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Reset loaded/cached search queries (calls from load property function)",
+          "tags": []
+        }
+      },
+      "getLoadedSearches": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Return loaded/cached search queries (calls from load property function)",
+          "tags": []
+        }
+      },
+      "loadItems": {
+        "complexType": {
+          "signature": "(query: string) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Load items by calling load property/function",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "options",
+        "methodName": "optionsWatcher"
+      }, {
+        "propName": "items",
+        "methodName": "itemsWatcher"
+      }, {
+        "propName": "searchField",
+        "methodName": "searchFieldWatcher"
+      }, {
+        "propName": "optgroups",
+        "methodName": "optgroupsWatcher"
+      }, {
+        "propName": "error",
+        "methodName": "errorWatcher"
+      }];
+  }
+}