@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

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

@@ -0,0 +1,237 @@
+import { Host, h } from "@stencil/core";
+/**
+ */
+export class StzhDatalist {
+  constructor() {
+    /** Direction */
+    this.direction = "vertical";
+    /** Direction above small breakpoint */
+    this.directionSmall = "horizontal";
+    /** Direction above medium breakpoint  */
+    this.directionMedium = "inherit";
+    /** Direction above large breakpoint  */
+    this.directionLarge = "inherit";
+    /** Direction above ultra breakpoint  */
+    this.directionUltra = "inherit";
+    /** Hide border lines between items */
+    this.hideBorder = false;
+    /**
+     * Items in datalist
+     * Array of objects that must at least include `value` attribute.
+     * Can optionally contain `label`, `meta`, `icon`, `href` attribute:
+     * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2"}]`
+     */
+    this.items = [];
+    this._items = [];
+    this.actionClick = (originalEvent, item) => {
+      this.stzhItemActionClick.emit({
+        component: "stzh-datalist",
+        originalEvent,
+        item
+      });
+    };
+  }
+  itemsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._items = JSON.parse(newValue);
+    }
+    else {
+      this._items = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.itemsWatcher(this.items);
+  }
+  render() {
+    const classes = {
+      "stzh-datalist": true,
+      "stzh-datalist--hide-border": this.hideBorder,
+      [`stzh-datalist--direction-${this.direction}`]: !!this.direction,
+      [`stzh-datalist--direction-small-${this.directionSmall}`]: !!this.directionSmall,
+      [`stzh-datalist--direction-medium-${this.directionMedium}`]: !!this.directionMedium,
+      [`stzh-datalist--direction-large-${this.directionLarge}`]: !!this.directionLarge,
+      [`stzh-datalist--direction-ultra-${this.directionUltra}`]: !!this.directionUltra
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datalist__list", role: "list" }, this._items.map((item) => h("div", { role: "listitem", class: {
+        "stzh-datalist__list-item": true,
+        "stzh-datalist__list-item--has-icon": !!item.icon,
+      } }, h("div", { class: "stzh-datalist__label" }, item.label), h("div", { class: "stzh-datalist__value" }, item.href ? h("stzh-link", { href: item.href, label: item.value, size: "inherit" }) : item.value), h("div", { class: "stzh-datalist__meta" }, item.meta), h("div", { class: "stzh-datalist__action-list" }, h("button", { class: "stzh-datalist__action", onClick: (event) => this.actionClick(event, item) }, h("stzh-icon", { name: item.icon })))))))));
+  }
+  static get is() { return "stzh-datalist"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-datalist.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-datalist.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction"
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
+      "directionSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above small breakpoint"
+        },
+        "attribute": "direction-small",
+        "reflect": true,
+        "defaultValue": "\"horizontal\""
+      },
+      "directionMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above medium breakpoint"
+        },
+        "attribute": "direction-medium",
+        "reflect": true,
+        "defaultValue": "\"inherit\""
+      },
+      "directionLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above large breakpoint"
+        },
+        "attribute": "direction-large",
+        "reflect": true,
+        "defaultValue": "\"inherit\""
+      },
+      "directionUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"vertical\" | \"horizontal\" | \"inherit\"",
+          "resolved": "\"horizontal\" | \"inherit\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction above ultra breakpoint"
+        },
+        "attribute": "direction-ultra",
+        "reflect": true,
+        "defaultValue": "\"inherit\""
+      },
+      "hideBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide border lines between items"
+        },
+        "attribute": "hide-border",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDatalistItemEntry[] | string",
+          "resolved": "StzhDatalistItemEntry[] | string",
+          "references": {
+            "StzhDatalistItemEntry": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `label`, `meta`, `icon`, `href` attribute:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\"}]`"
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhItemActionClick",
+        "name": "stzhItemActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Item action click event"
+        },
+        "complexType": {
+          "original": "StzhDatalistItemActionClickEvent",
+          "resolved": "{ component: \"stzh-datalist\"; originalEvent: MouseEvent; item: StzhDatalistItemEntry; }",
+          "references": {
+            "StzhDatalistItemActionClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "itemsWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-datalist/stzh-datalist.stories.js

@@ -0,0 +1,66 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Datalist',
+  component: 'stzh-datalist',
+  parameters: {
+    actions: {
+      handles: ['stzhItemActionClick']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('datalist'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-datalist {...args}></stzh-datalist>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      "label": "Label",
+      "value": "Value 1",
+      "meta": "Metainfo",
+      "icon": "delete"
+    },
+    {
+      "label": "Really Long Label",
+      "value": "Value 2",
+      "meta": "Metainfo",
+      "icon": "delete"
+    },
+    {
+      "label": "Label",
+      "value": "Value 3",
+      "meta": "Metainfo"
+    },
+    {
+      "label": "Label",
+      "value": "Value 4",
+      "meta": "Metainfo",
+      "icon": "delete"
+    },
+    {
+      "label": "Label",
+      "value": "Value 5",
+      "icon": "delete",
+      "href": "http://example.com"
+    }
+  ]
+};

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

@@ -134,7 +134,7 @@ export class StzhDatepicker {
     };
     return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
       h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
-      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, placeholder: this.placeholder, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
+      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
   }
   static get is() { return "stzh-datepicker"; }
   static get encapsulation() { return "scoped"; }
@@ -402,26 +402,6 @@ export class StzhDatepicker {
         "reflect": true,
         "defaultValue": "false"
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder text"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -98,6 +98,7 @@
   --width: 100%;
   --padding: var(--stzh-space-large);
   --close-color: var(--stzh-base-lead-color);
+  --backdrop-opacity: 0.8;
 }
 @media screen and (min-width: 600px) {
   :host {
@@ -163,7 +164,6 @@
   background-color: var(--stzh-color-white);
   width: var(--width);
   max-width: 100%;
-  padding: var(--padding);
   box-shadow: var(--stzh-box-shadow-overlay);
   height: 100vh;
   max-height: 100vh;
@@ -186,9 +186,14 @@
   overflow-y: auto;
   text-align: center;
   background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  opacity: 0.8;
+  opacity: var(--backdrop-opacity);
+}
+.stzh-dialog__heading {
+  padding: var(--padding);
+  padding-bottom: 0;
 }
 .stzh-dialog__dialog-content {
+  padding: var(--padding);
   padding-top: var(--stzh-space-medium);
   padding-bottom: var(--stzh-space-medium);
   overflow: auto;
@@ -224,6 +229,10 @@
     padding-bottom: var(--stzh-space-xxlarge);
   }
 }
+.stzh-dialog__actions {
+  padding: var(--padding);
+  padding-top: 0;
+}
 .stzh-dialog__close-button {
   position: absolute;
   top: var(--stzh-space-xsmall);

package/dist/collection/components/stzh-dialog/stzh-dialog.stories.js

@@ -50,14 +50,23 @@ const Template = (args) => (
     <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
 
     <stzh-dialog {...args}>
-      <stzh-fieldset>
-        <stzh-input name="first_name" label="First name"></stzh-input>
-        <stzh-input name="last_name" label="Last name"></stzh-input>
-        <stzh-radiogroup legend="Gender options" name="gender">
-          <stzh-radio value="Male" label="Male"></stzh-radio>
-          <stzh-radio value="Female" label="Female"></stzh-radio>
-        </stzh-radiogroup>
-      </stzh-fieldset>
+      <stzh-cspace>
+        <stzh-message label="Label">
+          Description
+        </stzh-message>
+        <stzh-fieldset>
+          <stzh-input name="first_name" label="First name"></stzh-input>
+          <stzh-input name="last_name" label="Last name"></stzh-input>
+          <stzh-radiogroup legend="Gender options" name="gender">
+            <stzh-radio value="Male" label="Male"></stzh-radio>
+            <stzh-radio value="Female" label="Female"></stzh-radio>
+          </stzh-radiogroup>
+        </stzh-fieldset>
+        <stzh-row span="6">
+          <stzh-cell>Cell 1</stzh-cell>
+          <stzh-cell>Cell 2</stzh-cell>
+        </stzh-row>
+      </stzh-cspace>
       <stzh-actions slot="actions">
         <stzh-button slot="primary">Confirm</stzh-button>
         <stzh-button slot="secondary" data-stzh-dialog-close>Cancel</stzh-button>
@@ -71,5 +80,6 @@ Default.args = {
   id: 'test-dialog',
   heading: 'Heading',
   stay: true,
+  open: true,
   'close-on-escape-key': true
 };

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

@@ -398,8 +398,8 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: normal;
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -697,9 +697,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 .stzh-dropdown--plain.stzh-dropdown--has-icon .stzh-dropdown__label {
   left: calc(var(--icon-size) + var(--stzh-space-xsmall) + 0.0625rem);
 }
-.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--has-focus .stzh-dropdown__label, .stzh-dropdown--has-placeholder .stzh-dropdown__label {
-  font-size: var(--stzh-font-nano-font-size);
-  line-height: var(--stzh-font-nano-text-line-height);
+.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--has-focus .stzh-dropdown__label {
   top: 0;
   left: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
   height: 1.25rem;
@@ -708,10 +706,10 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   max-width: calc(100% - (var(--stzh-space-medium) - var(--stzh-space-xxsmall)) * 2);
   pointer-events: all;
 }
-.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--has-placeholder .stzh-dropdown__label:not(:empty)::before {
+.stzh-dropdown--has-fixed-label .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-filled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-disabled .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--is-invalid .stzh-dropdown__label:not(:empty)::before, .stzh-dropdown--has-focus .stzh-dropdown__label:not(:empty)::before {
   display: block;
 }
-.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--has-placeholder .stzh-dropdown__label {
+.stzh-dropdown--plain.stzh-dropdown--has-fixed-label .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-filled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-disabled .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--is-invalid .stzh-dropdown__label, .stzh-dropdown--plain.stzh-dropdown--has-focus .stzh-dropdown__label {
   left: 0;
   padding: 0;
   max-width: 100%;

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

@@ -158,13 +158,25 @@ export class StzhDropdown {
     return this.tomSelect.getValue();
   }
   /** Set new value */
-  async setValue(newValue) {
-    this.tomSelect.setValue(newValue);
+  async setValue(newValue, silent = false) {
+    this.tomSelect.setValue(newValue, silent);
   }
   /** 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);
@@ -241,11 +253,12 @@ export class StzhDropdown {
       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,
+      // create: function(input, callback) {
+      //   callback({ value: input, text: input });
+      // },
       // createOnBlur: false,
       // createFilter: null,
       // persist: false,
@@ -360,6 +373,16 @@ export class StzhDropdown {
         });
       },
       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,
@@ -388,6 +411,9 @@ export class StzhDropdown {
           component: "stzh-dropdown"
         });
       },
+      onLoad: () => {
+        this._options = this.tomSelect.options;
+      }
     };
     if (this._options) {
       tomSelectOptions.options = this._options;
@@ -424,13 +450,12 @@ export class StzhDropdown {
       "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 ?
+    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("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 &&
@@ -1096,26 +1121,6 @@ export class StzhDropdown {
         "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,
@@ -1379,10 +1384,13 @@ export class StzhDropdown {
       },
       "setValue": {
         "complexType": {
-          "signature": "(newValue: string | string[]) => Promise<void>",
+          "signature": "(newValue: string | string[], silent?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -1411,6 +1419,57 @@ export class StzhDropdown {
           "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": []
+        }
       }
     };
   }