@oiz/stzh-components 4.10.0 → 4.11.0-beta1

package/dist/esm/stzh-datepicker_3.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-Boyybvcm.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-CIPExL1Q.js';
 import { a as printISODate } from './date-utils-Df1Iqnz9.js';
 import { h as hasSlot } from './utils-BnOofzDv.js';
-import { S as StzhInputDescription } from './stzh-input-description-D7avZ-wq.js';
+import { S as StzhInputDescription } from './stzh-input-description-DTwZSuau.js';
 import { c as camelCase } from './string-utils-BubviQku.js';
 
 const stzhDatepickerCss = () => `.sc-stzh-datepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h,[stzh-hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%;position:relative}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}`;
@@ -214,7 +214,7 @@ const StzhRadio = class {
         this.disabled = false;
         /** The name of the input element */
         this.name = "";
-        /** The value of the input element */
+        /** The value of the input element. Note that boolean values only work with property binding (not with attribute binding). */
         this.value = "";
         /** Invalid status */
         this.invalid = false;
@@ -323,11 +323,11 @@ const StzhRadio = class {
             "stzh-radio--is-invalid": this.invalid || errorUsed,
             "stzh-radio--is-disabled": this.disabled,
         };
-        return (h(Host, { key: '4de55dcf0cf5751dea729849cbca2b766c34baac', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '018a6fa6d79c7f64b3a8b214ef77d63b36e2178d', class: classes }, h("label", { key: 'f6137e3feb9debe11e31eb3c162a7932c82b68aa', class: "stzh-radio__field-wrapper" }, h("input", { key: '118a9e4140741846288154d47bf2e2de2312aaf7', class: "stzh-radio__input", ref: el => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'fb02dbba793d2d5fe03e1825700167044b5911b6', class: "stzh-radio__mark" }, h("div", { key: '198e7d5767f7990d246ab208ada160786fb38ba3', class: "stzh-radio__check" })), h("div", { key: 'fb42d1545bbbd40bf113ac893b756db32e0d9d98', class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '54887af076ec189d17f37cf61a346ee841071706', class: "stzh-radio__marker" }, h("span", { key: '5da875ed1cc969a251a8a3318628476959eb13e8', class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: 'bd9b31ad272a8cd18d45140d767235e837a03410', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '73302c5826e94f6feae495e572c87b1e40bf1318', class: classes }, h("label", { key: '1be103ee6346f1d0001200819c4908bf1ba3d6f8', class: "stzh-radio__field-wrapper" }, h("input", { key: 'fdb598d0673837b7b5f3c3eb073a4bcdfdec3273', class: "stzh-radio__input", ref: el => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: String(this.value), disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'e79b69b5014540a08ac1b3f56ad5c0e449af3677', class: "stzh-radio__mark" }, h("div", { key: '7e334ab8c58ca70206bc8f3bc8d0750c44734c0a', class: "stzh-radio__check" })), h("div", { key: '4df1763708002d51c67b0c392ecee13b8854c131', class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '46e62f8231f0bcb2d2e62ba7c427608be53ff243', class: "stzh-radio__marker" }, h("span", { key: '9e1fc3aee75bb6137c927a3b0ea426fbe0d067ff', class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'c0bded0610f13b04844f33e2db4ea1331ba10378', class: "stzh-radio__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '00c4f1a692763c0b91a14bdb5ad7278c0576c996', class: "stzh-radio__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'e5f84e2d1bba00885e0ebb0e5702ea6cbef4b61a', classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText))))), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'b59c3c6a34323b2eff5d45233af558022ad1b27c', classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -353,10 +353,6 @@ const StzhRadiogroup = class {
         this.required = false;
         /** Hide `(optional)` label (or use `required` inside form to hide it) */
         this.hideOptional = false;
-        /** Select a radio by value */
-        this.value = "";
-        /** Default value (used by reset) */
-        this.defaultValue = "";
         /** Direction */
         this.direction = "vertical";
         /** Current checked radio element (readonly) */
@@ -448,18 +444,10 @@ const StzhRadiogroup = class {
         return hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
     updateCheckedRadioByValue(value) {
-        this.checkedRadio = this.radios.find(radio => radio.value === value);
-        if (this.checkedRadio) {
-            this.checkedRadio.checked = true;
-        }
-        this.uncheckRadios();
-    }
-    uncheckRadios() {
-        // make sure that no other radios are checked than the current one or no one
-        this.radios.forEach((radio) => {
-            if (!this.checkedRadio || radio !== this.checkedRadio) {
-                radio.checked = false;
-            }
+        var _a;
+        this.checkedRadio = (_a = this.radios.find(radio => radio.value === value)) !== null && _a !== void 0 ? _a : null;
+        this.radios.forEach(radio => {
+            radio.checked = this.checkedRadio === radio;
         });
     }
     componentDidLoad() {
@@ -513,11 +501,11 @@ const StzhRadiogroup = class {
             "stzh-radiogroup--hide-legend": this.hideLegend,
             [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,
         };
-        return (h(Host, { key: '4b55ab98e15a04debe63b212cd4f25e65a15ef1d', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: '45d212fee1fea266114221c5c9de0b05f5a5fb9b', class: classes }, this.legend && (h("legend", { key: 'c2a9d48ccbdadb3382382dc2c5bdbf63f3a6d595', class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (h("span", { key: '24e4f867820ab2f2506ffa906fad0af67a492351', class: "stzh-radiogroup__marker" }, h("span", { key: '0c933048161777d8dfa2d690413c591a80c3a7bf', class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '518e4c0ffa325c2e7d300a4930b06b82b36fc396', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: '5d2404976bf5ba1536426fd0fd3e962e184db564', class: classes }, this.legend && (h("legend", { key: 'fb5ceddde0cd7eee159f222b94ae83c1a1d1da46', class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (h("span", { key: 'a1792a4664dd4775b4573da53a9ae006395b08d9', class: "stzh-radiogroup__marker" }, h("span", { key: '0fb399bc810b077e3cd8452efc20b38599e40ef0', class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '3a8343e9de73db242c5c86c17032b8729c3ec22c', class: "stzh-radiogroup__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'b8ffcc4ce47fdcfc77645781f15b485d7b3f4572', class: "stzh-radiogroup__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), h("div", { key: '988907f9f473b15786855ed15401590e97f4d278', class: "stzh-radiogroup__fields" }, h("slot", { key: 'b1b851a932856476fb634fddc33a84e7aa6c71f2' })), (this.errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'd52f2333e6f2e5fa68f740ab7df8856434f1b9d0', classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText))))), h("div", { key: '1d8501b332346d3b78e97dd1c497907e4cf0639d', class: "stzh-radiogroup__fields" }, h("slot", { key: '86146da701c37e1ff14019a01465b17ea6871cc3' })), (this.errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '653cf35547d333af0e814ed11da2e551b8c76299', classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-daterange.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Boyybvcm.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-CIPExL1Q.js';
 import { s as setPropsIfNull } from './utils-BnOofzDv.js';
 import './string-utils-BubviQku.js';
 

package/dist/esm/stzh-details.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Boyybvcm.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-CIPExL1Q.js';
 import { i as isStzhElement } from './utils-BnOofzDv.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './animation-utils-BOO84wnP.js';

package/dist/esm/stzh-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Boyybvcm.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-CIPExL1Q.js';
 import { s as setPropsIfNull } from './utils-BnOofzDv.js';
 import { c as createBaseFocusTrapOptions } from './overlay-utils-BzugsqyR.js';
 import { c as createFocusTrap } from './focus-trap.esm-CBUfcdIy.js';

package/dist/esm/stzh-disturber.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Boyybvcm.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-CIPExL1Q.js';
 import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo } from './animation-utils-BOO84wnP.js';

package/dist/esm/stzh-dropdown.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Boyybvcm.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-CIPExL1Q.js';
 import { h as hasSlot } from './utils-BnOofzDv.js';
-import { S as StzhInputDescription } from './stzh-input-description-D7avZ-wq.js';
+import { S as StzhInputDescription } from './stzh-input-description-DTwZSuau.js';
 import './string-utils-BubviQku.js';
 
 /**
@@ -4964,6 +4964,16 @@ const StzhDropdown = class {
         this.stzhFocus = createEvent(this, "stzhFocus");
         this.stzhBlur = createEvent(this, "stzhBlur");
         this.stzhInit = createEvent(this, "stzhInit");
+        this._options = [];
+        /**
+         * Set selected option values. Always set this in usage with stzh-components-angular (see examples in usage docs).
+         * To get the current (user) selected options, use `getItems` method.
+         */
+        this.items = "";
+        /**
+         * Default items (used by reset)
+         */
+        this.defaultItems = [];
         /**
          * An array of property names to analyze when filtering options.
          * Weights can be given to each field to improve search result:
@@ -5047,8 +5057,10 @@ const StzhDropdown = class {
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
         this.a11yDescribedby = "";
         this.focusedByInput = false;
+        this.typedValueMap = new Map();
         this.handleReset = () => {
-            this.items = [...this.defaultItems];
+            var _a;
+            this.items = this.multiple ? [...this.defaultItems] : ((_a = this.defaultItems[0]) !== null && _a !== void 0 ? _a : "");
         };
         this.onRootFocus = () => {
             if (!this.focusedByInput) {
@@ -5065,21 +5077,29 @@ const StzhDropdown = class {
         }
     }
     optionsWatcher(newValue) {
-        if (typeof newValue === "string") {
-            this._options = JSON.parse(newValue);
-        }
-        else {
-            this._options = newValue;
-        }
+        const parsedOptions = typeof newValue === "string" ? JSON.parse(newValue) : (newValue !== null && newValue !== void 0 ? newValue : []);
+        this.typedValueMap.clear();
+        this._options = parsedOptions.map(option => {
+            const typedValue = option[this.valueField];
+            const internalValue = String(typedValue);
+            this.typedValueMap.set(internalValue, typedValue);
+            return Object.assign(Object.assign({}, option), { [this.valueField]: internalValue });
+        });
     }
     itemsWatcher(newValue) {
         if (typeof newValue === "string") {
-            this._items = JSON.parse(newValue);
+            if (this.isJsonArrayString(newValue)) {
+                const parsed = JSON.parse(newValue);
+                this._items = this.toInternalValues(parsed);
+            }
+            else {
+                this._items = this.toInternalValues(newValue);
+            }
         }
         else {
-            this._items = newValue;
+            this._items = this.toInternalValues(newValue);
         }
-        this.value = this._items;
+        this.value = this.toPublicValue(this._items);
     }
     searchFieldWatcher(newValue) {
         if (typeof newValue === "string") {
@@ -5124,11 +5144,11 @@ const StzhDropdown = class {
      * this returns an array, otherwise a string.
      */
     async getValue() {
-        return this.tomSelect.getValue();
+        return this.toPublicValue(this.tomSelect.items);
     }
     /** Set new value */
     async setValue(newValue, silent = false) {
-        this.tomSelect.setValue(newValue, silent);
+        this.tomSelect.setValue(this.toInternalValues(newValue), silent);
     }
     /** Reset loaded/cached search queries (calls from load property function) */
     async resetLoadedSearches() {
@@ -5140,7 +5160,7 @@ const StzhDropdown = class {
     }
     /** Return current selected items */
     async getItems() {
-        return this.tomSelect.items;
+        return this.toExternalValues(this.tomSelect.items);
     }
     /** Load items by calling load property/function */
     async loadItems(query) {
@@ -5154,6 +5174,34 @@ const StzhDropdown = class {
     async hide() {
         return this.tomSelect.close();
     }
+    // TomSelect can only handle string values, so we need to always convert numbers at component border.
+    isJsonArrayString(value) {
+        const trimmed = value.trim();
+        return trimmed.startsWith("[") && trimmed.endsWith("]");
+    }
+    toInternalValue(value) {
+        return String(value);
+    }
+    toInternalValues(value) {
+        if (value === undefined || value === null || value === "")
+            return [];
+        if (Array.isArray(value)) {
+            return value.map(v => this.toInternalValue(v));
+        }
+        return [this.toInternalValue(value)];
+    }
+    toExternalValue(value) {
+        var _a;
+        return (_a = this.typedValueMap.get(value)) !== null && _a !== void 0 ? _a : value;
+    }
+    toExternalValues(values) {
+        return values.map(v => this.toExternalValue(v));
+    }
+    toPublicValue(values) {
+        if (this.multiple)
+            return this.toExternalValues(values);
+        return values.length > 0 ? this.toExternalValue(values[0]) : "";
+    }
     updateFilled() {
         var _a;
         if (((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -5328,43 +5376,41 @@ const StzhDropdown = class {
                     return `<div class="stzh-dropdown__dropdown"></div>`;
                 },
             },
-            onChange: value => {
+            onChange: _value => {
                 this._items = this.tomSelect.items;
                 this.updateFilled();
-                this.value = this.multiple ? this._items : this._items[0];
+                this.value = this.toPublicValue(this._items);
                 this.stzhChange.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.value,
                 });
             },
             onItemAdd: value => {
                 this._items = this.tomSelect.items;
                 this.stzhItemAdd.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onItemRemove: value => {
                 this._items = this.tomSelect.items;
                 this.stzhItemRemove.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onOptionAdd: value => {
-                this._options = this.tomSelect.options;
                 this.updateFilled();
                 this.stzhOptionAdd.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onOptionRemove: value => {
-                this._options = this.tomSelect.options;
                 this.updateFilled();
                 this.stzhOptionRemove.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onDropdownOpen: () => {
@@ -5429,9 +5475,7 @@ const StzhDropdown = class {
                     component: "stzh-dropdown",
                 });
             },
-            onLoad: () => {
-                this._options = this.tomSelect.options;
-            },
+            onLoad: () => { },
         };
         if (this._options) {
             tomSelectOptions.options = this._options;
@@ -5486,14 +5530,14 @@ const StzhDropdown = class {
             [`stzh-dropdown--size-${this.size}`]: !!this.size,
             [`stzh-dropdown--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'b80b2d3ccc4b56b7ed98086d0af68d5e48496eea', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '1f2079345e46f91407092e99e32317363f30f1b8', class: classes, ref: el => (this.rootElement = el) }, h("div", { key: '8a26d1576afefb40469fa190b573abca34b05557', class: "stzh-dropdown__wrapper" }, h("label", { key: 'a8aa4da2ca1ee43df188e89bb106af2923b41b76', id: `${this.dropdownId}-label`, class: {
+        return (h(Host, { key: '5462784be51749a495688d199853eeaf16b6f15b', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '36a0f64412ef974dac8090c5b46c087a7a1188ec', class: classes, ref: el => (this.rootElement = el) }, h("div", { key: '356cc6843b83d494625d9cfa0595994e60324a06', class: "stzh-dropdown__wrapper" }, h("label", { key: 'bc999b83b4e58e7b3f82e1af629bd17819490505', id: `${this.dropdownId}-label`, class: {
                 "stzh-dropdown__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), !this.hideOptional && (h("span", { key: '4864574a2143cca90fbcd006dc1a68c7e4363c22', class: "stzh-dropdown__marker" }, h("span", { key: '37d2ab0af760d8f33177a6b282187501c7665fc4', class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), !this.hideOptional && (h("span", { key: '6f496a63ac24daa7006aebb89e0feaea2681bf6c', class: "stzh-dropdown__marker" }, h("span", { key: '6ca53123dda9ad21436e3888764f0ab25e017d51', class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'd4816679d592bf80db2e716ae78d4d26991eb796', class: "stzh-dropdown__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '70709e9fc3a480de20fa3f506c53fd2218ea9087', class: "stzh-dropdown__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'b8f197549c2c5946e9e1eb32eda0482e84feb6f0', class: "stzh-dropdown__field-wrapper" }, h("select", { key: '009b652fbe109f310ec66af623d669355f9b1d14', id: this.dropdownId, class: "stzh-dropdown__select", ref: el => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${this.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", { key: '0469863a0fd4699a267e835cb836438b55b2a348' })), this.inline && this.label && h("div", { key: 'c8e5c0a2070699731901ffee238f1b4dbf6220d7', class: "stzh-dropdown__sizer" }, this.label), h("div", { key: '1a77bb8ad1339996fc0f186f80338dea03f1f90c', class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ? (h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })) : (h("slot", { name: "icon-angle" }))), h("div", { key: '2275927a9e3a454eba74d780a495b31d2788fe38', class: "stzh-dropdown__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })) : (h("slot", { name: "icon" }))), this.hideOptional && this.required && (h("div", { key: 'f756e143584e0022a0e0b8067b7ca70fa801809a', id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText)), this.invalid && (h("div", { key: 'da15797ff3de922d87186fd5529c71daa4fbf8d1', id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)))), h("div", { key: '212e39b885f2c6161d9f003eff36de9fdd4f861e', class: "stzh-dropdown__dropdown-wrapper", ref: el => (this.dropdownWrapperElement = el) }), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '846d1bc992b8130882d7dad7b28241eb22295f15', classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'd533af64be9158c32371441306588c5e869bd45c', class: "stzh-dropdown__field-wrapper" }, h("select", { key: '9a85afa16e1b1ba9ed39b81b0c286dbe805b8e36', id: this.dropdownId, class: "stzh-dropdown__select", ref: el => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${this.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", { key: '2429a6330c39b98bf123877cecab2dd9afb32e23' })), this.inline && this.label && h("div", { key: '421913b6e15242f6cfd205f0781cf0b1eacec3f3', class: "stzh-dropdown__sizer" }, this.label), h("div", { key: '665b70613cd19947ecb1fac4e93abdcc33de508b', class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ? (h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })) : (h("slot", { name: "icon-angle" }))), h("div", { key: '763821ad58c5aef9564c4e4fb2c6eebe13e57d72', class: "stzh-dropdown__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })) : (h("slot", { name: "icon" }))), this.hideOptional && this.required && (h("div", { key: 'ebe703b00e5b03419de3c264604e1256e725a96e', id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText)), this.invalid && (h("div", { key: 'ab7357004095ddca09b982d3caf1d1c964a2a9d5', id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)))), h("div", { key: '728abec79d9d8e3049e59176ed5ab3734fa01206', class: "stzh-dropdown__dropdown-wrapper", ref: el => (this.dropdownWrapperElement = el) }), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '1064b6a77486d2b82bed119036b619dd4ddf3c37', classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {