@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,1436 @@
+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"
+      }];
+  }
+}