@db-ux/wc-core-components 4.0.3 → 4.1.0

package/dist/esm/db-custom-select-dropdown_5.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, c as createEvent } from './index-C6WmMqtR.js';
 import { c as cls, e as getBoolean, u as uuid, g as getBooleanAsString, h as hasVoiceOver, d as delay, s as stringPropVisible, i as isArrayOfStrings, j as getInputValue, f as getNumber, b as isIOSSafari, k as getHideProp } from './index-DhKljLRG.js';
 import { l as DEFAULT_INVALID_MESSAGE, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, a as DEFAULT_LABEL, m as DEFAULT_REMOVE } from './constants-DC9V_oNU.js';
+import { c as addValueResetEventListener } from './form-components-DmI6JmyJ.js';
 
 const DBCustomSelectDropdown = class {
     constructor(hostRef) {
@@ -188,6 +189,7 @@ const DBInput = class {
         this._descByIds = undefined;
         this._value = undefined;
         this._voiceOverFallback = "";
+        this.abortController = undefined;
     }
     hasValidState() {
         var _a;
@@ -223,13 +225,13 @@ const DBInput = class {
             this._descByIds = undefined;
         }
     }
-    handleInput(event) {
+    handleInput(event, reset) {
         if (this.input) {
             this.input.emit(event);
         }
         this.handleValidation();
     }
-    handleChange(event) {
+    handleChange(event, reset) {
         if (this.change) {
             this.change.emit(event);
         }
@@ -320,6 +322,26 @@ const DBInput = class {
     watch2() {
         this.watch2Fn();
     }
+    watch3Fn() {
+        if (this._ref) {
+            const defaultValue = undefined;
+            let controller = this.abortController;
+            if (!controller) {
+                controller = new AbortController();
+                this.abortController = controller;
+            }
+            addValueResetEventListener(this._ref, {
+                value: this.value,
+                defaultValue,
+            }, (event) => {
+                this.handleChange(event, true);
+                this.handleInput(event, true);
+            }, controller.signal);
+        }
+    }
+    watch3() {
+        this.watch3Fn();
+    }
     componentDidLoad() {
         var _a;
         this.enableAttributePassing(this._ref, "db-input");
@@ -333,10 +355,15 @@ const DBInput = class {
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
+        this.watch3Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h("div", { key: '59fbbec2fe8d2e6dce0d9fba875b713b90c8828e', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: '4aca80e0a332dc2c7ba19cd3ae7340aeae4deeb6', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: 'd05ae2e32650952ecbaae193e0f20134db378152', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: 'b3e0deb3a86964b8de452dece18f95f027151832', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: 'c6b0cf9b7526b0c77fcd7a0bdd373d391fa18ea6', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: 'c12dd974640a41ff64c8b0bf6aabb8ed9a654bfb', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, name: this.name, type: this.type || "text", multiple: getBoolean(this.multiple, "multiple"), placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getNumber(this.step), value: (_e = this.value) !== null && _e !== void 0 ? _e : this._value, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
                 getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: getBoolean(this.autofocus, "autofocus"), enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_f = this.ariaDescribedBy) !== null && _f !== void 0 ? _f : this._descByIds, role: [
@@ -348,10 +375,10 @@ const DBInput = class {
                 "color",
             ].includes((_g = this.type) !== null && _g !== void 0 ? _g : "") && isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'f0f507b8d96500e3825ec6d0dafbdc2564caa34b' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'dd47a5d8978035e50eb637cc9b5adf250b657684', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: 'fa3b768f599b592341a3d60d30b8af7ae3ed0d7d', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '231c238218940050bb92948c798d9cc4bcd4b1f8' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '101dc9398ba3394dc0d2f3b9dbd9f9414a96f59a', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: '4b2b099a5ee1f0e3d57f591fa8af8ea8633d4d21', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
-        "_ref": ["watch0"],
+        "_ref": ["watch0", "watch3"],
         "invalidMessage": ["watch0"],
         "_id": ["watch1"],
         "value": ["watch2"]

package/dist/esm/db-custom-select.entry.js

@@ -4,6 +4,7 @@ import { h as hasVoiceOver, d as delay, s as stringPropVisible, l as getSearchIn
 import { D as DocumentClickListener } from './document-click-listener-D1ZXrKSx.js';
 import { D as DocumentScrollListener } from './document-scroll-listener-DF6f0ByI.js';
 import { a as handleFixedDropdown } from './floating-components-G-TursYV.js';
+import { b as addResetEventListener } from './form-components-DmI6JmyJ.js';
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -26,6 +27,7 @@ const DBCustomSelect = class {
         this._infoTextId = undefined;
         this._validity = "no-validation";
         this._userInteraction = false;
+        this.abortController = undefined;
         this._descByIds = undefined;
         this._selectedLabels = "";
         this._selectedLabelsId = undefined;
@@ -66,7 +68,7 @@ const DBCustomSelect = class {
         }
         /* For a11y reasons we need to map the correct message with the select */
         if (!((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.validity.valid) || this.validation === "invalid") {
-            this._descByIds = this._invalidMessageId;
+            this.setDescById(this._invalidMessageId);
             this._invalidMessage =
                 this.invalidMessage ||
                     ((_b = this.selectRef) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
@@ -82,7 +84,7 @@ const DBCustomSelect = class {
         else if (this.hasValidState() &&
             ((_d = this.selectRef) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
             this.required) {
-            this._descByIds = this._validMessageId;
+            this.setDescById(this._validMessageId);
             if (hasVoiceOver()) {
                 this._voiceOverFallback = (_e = this.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE;
                 delay(() => (this._voiceOverFallback = ""), 1000);
@@ -90,11 +92,11 @@ const DBCustomSelect = class {
             this._validity = (_f = this.validation) !== null && _f !== void 0 ? _f : "valid";
         }
         else if (stringPropVisible(this.message, this.showMessage)) {
-            this._descByIds = this._messageId;
+            this.setDescById(this._messageId);
             this._validity = (_g = this.validation) !== null && _g !== void 0 ? _g : "no-validation";
         }
         else {
-            this._descByIds = this._placeholderId;
+            this.setDescById(this._placeholderId);
             this._validity = (_h = this.validation) !== null && _h !== void 0 ? _h : "no-validation";
         }
     }
@@ -576,12 +578,34 @@ const DBCustomSelect = class {
         this.watch7Fn();
     }
     watch8Fn() {
-        this._validity = this.validation;
+        if (this.selectRef) {
+            let controller = this.abortController;
+            if (!controller) {
+                controller = new AbortController();
+                this.abortController = controller;
+            }
+            const initialValues = this.values;
+            addResetEventListener(this.selectRef, () => {
+                const resetValue = initialValues
+                    ? initialValues
+                    : this.selectRef.value
+                        ? [this.selectRef.value]
+                        : [];
+                this.handleOptionSelected(resetValue);
+                this.handleValidation();
+            }, controller.signal);
+        }
     }
     watch8() {
         this.watch8Fn();
     }
     watch9Fn() {
+        this._validity = this.validation;
+    }
+    watch9() {
+        this.watch9Fn();
+    }
+    watch10Fn() {
         var _a, _b;
         if (((_a = this._values) === null || _a === void 0 ? void 0 : _a.length) === 0) {
             this.selectAllChecked = false;
@@ -595,29 +619,29 @@ const DBCustomSelect = class {
             this.selectAllIndeterminate = true;
         }
     }
-    watch9() {
-        this.watch9Fn();
+    watch10() {
+        this.watch10Fn();
     }
-    watch10Fn() {
+    watch11Fn() {
         var _a, _b;
         this._options = this.options;
         this.amountOptions =
             (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0;
     }
-    watch10() {
-        this.watch10Fn();
+    watch11() {
+        this.watch11Fn();
     }
-    watch11Fn() {
+    watch12Fn() {
         this._searchValue = this.searchValue;
         if (this.searchValue) {
             const sValue = this.searchValue; // <- workaround for Angular
             this.handleSearch(sValue);
         }
     }
-    watch11() {
-        this.watch11Fn();
+    watch12() {
+        this.watch12Fn();
     }
-    watch12Fn() {
+    watch13Fn() {
         var _a, _b;
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
             this._selectedOptions = (_b = this.options) === null || _b === void 0 ? void 0 : _b.filter((option) => {
@@ -629,10 +653,10 @@ const DBCustomSelect = class {
             });
         }
     }
-    watch12() {
-        this.watch12Fn();
+    watch13() {
+        this.watch13Fn();
     }
-    watch13Fn() {
+    watch14Fn() {
         var _a, _b, _c;
         if (this.selectedLabels) {
             this._selectedLabels = this.selectedLabels;
@@ -659,35 +683,35 @@ const DBCustomSelect = class {
             this._selectedLabels = "";
         }
     }
-    watch13() {
-        this.watch13Fn();
+    watch14() {
+        this.watch14Fn();
     }
-    watch14Fn() {
+    watch15Fn() {
         var _a, _b;
         if (this.amountChange) {
             this.amountChange.emit((_b = (_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
         }
     }
-    watch14() {
-        this.watch14Fn();
+    watch15() {
+        this.watch15Fn();
     }
-    watch15Fn() {
+    watch16Fn() {
         if (this.selectAllRef) {
             this.selectAllRef.indeterminate = Boolean(this.selectAllIndeterminate);
         }
     }
-    watch15() {
-        this.watch15Fn();
+    watch16() {
+        this.watch16Fn();
     }
-    watch16Fn() {
+    watch17Fn() {
         var _a;
         this._invalidMessage =
             this.invalidMessage ||
                 ((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
                 DEFAULT_INVALID_MESSAGE;
     }
-    watch16() {
-        this.watch16Fn();
+    watch17() {
+        this.watch17Fn();
     }
     componentDidLoad() {
         var _a;
@@ -731,22 +755,27 @@ const DBCustomSelect = class {
         this.watch14Fn();
         this.watch15Fn();
         this.watch16Fn();
+        this.watch17Fn();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: '11b17fa4f655a38ae5c5612053ed44d533bf730e', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: '18f3a8ad101671d2aba404bd45c80b928bb5e8f4', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '7d7ba83bded2a0f96c20e464a2ffb9702c7aade7', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '2b7c5ccf1e2033613069958a9de22c4d03d5a2c6', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '8799fa0a17b43d88b24ecee1b1061274524d84f1', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'f3f4af4a27d30308028524213d0ab8a5a40a8d3a', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
             ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), h("details", { key: 'e72a8ffae9e67b8ffa4a864fc67777863ab4ae2f', ref: (el) => {
+            : null)), h("details", { key: '413be6e72060b2395772985bc287bd67bc1ad268', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '8a8cdada441011327ceada802a840222e1fee64a' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: 'f157d0435eab97c98c97d31447e32a9e9cd97d98' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -756,7 +785,7 @@ const DBCustomSelect = class {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '7bd868a984b59aac7554ce7a414fbc5dcf6f9852', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '600afcfae8dd16acad934de05031077efb821e88', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '296afa4aaa8ea8bd7aeabcf43e50a8068540c6c4', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '0f9dc87d3b0289a335acf336964fc78d22a5798a', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '6a32b77468c503d5ee57c509aa2ec7ff5b4c1f21', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'b67bda119e8c547d7975632376ea72c81625a471', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "detailsRef": ["watch0", "watch2"],
@@ -766,23 +795,23 @@ const DBCustomSelect = class {
         "showLoading": ["watch3"],
         "_options": ["watch3"],
         "showSelectAll": ["watch4"],
-        "amountOptions": ["watch4", "watch5", "watch9"],
+        "amountOptions": ["watch4", "watch5", "watch10"],
         "multiple": ["watch4"],
         "showSearch": ["watch5"],
         "values": ["watch6"],
-        "_values": ["watch7", "watch9", "watch12"],
-        "selectRef": ["watch7", "watch16"],
-        "validation": ["watch8"],
-        "options": ["watch10", "watch12"],
-        "searchValue": ["watch11"],
-        "_selectedOptions": ["watch13", "watch14"],
-        "selectedType": ["watch13"],
-        "amountText": ["watch13"],
-        "selectedLabels": ["watch13"],
-        "transformSelectedLabels": ["watch13"],
-        "selectAllIndeterminate": ["watch15"],
-        "selectAllRef": ["watch15"],
-        "invalidMessage": ["watch16"]
+        "_values": ["watch7", "watch10", "watch13"],
+        "selectRef": ["watch7", "watch8", "watch17"],
+        "validation": ["watch9"],
+        "options": ["watch11", "watch13"],
+        "searchValue": ["watch12"],
+        "_selectedOptions": ["watch14", "watch15"],
+        "selectedType": ["watch14"],
+        "amountText": ["watch14"],
+        "selectedLabels": ["watch14"],
+        "transformSelectedLabels": ["watch14"],
+        "selectAllIndeterminate": ["watch16"],
+        "selectAllRef": ["watch16"],
+        "invalidMessage": ["watch17"]
     }; }
 };