@db-ux/wc-core-components 2.0.0-0-custom-select-16b8cce → 2.0.0

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

@@ -1,20 +1,21 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-D-D8lQAG.js';
-import { u as uuid, f as delay, h as handleDataOutside, k as getSearchInput, s as stringPropVisible, e as hasVoiceOver, g as getBooleanAsString, j as getHideProp, c as cls } from './index-fw8E73KY.js';
-import { a as DEFAULT_LABEL, m as DEFAULT_REMOVE, d as DEFAULT_LABEL_ID_SUFFIX, e as DEFAULT_SELECT_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, l as DEFAULT_INVALID_MESSAGE, k as DEFAULT_VALID_MESSAGE, o as DEFAULT_SELECTED, f as DEFAULT_MESSAGE_ID_SUFFIX, c as DEFAULT_MESSAGE, s as DEFAULT_CLOSE_BUTTON } from './constants-DC9V_oNU.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BkYjDIed.js';
+import { e as hasVoiceOver, f as delay, s as stringPropVisible, u as uuid, h as handleDataOutside, m as getSearchInput, g as getBooleanAsString, j as getBoolean, l as getHideProp, c as cls } from './index-TU0pfK1i.js';
+import { l as DEFAULT_INVALID_MESSAGE, a as DEFAULT_LABEL, m as DEFAULT_REMOVE, d as DEFAULT_LABEL_ID_SUFFIX, e as DEFAULT_SELECT_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, o as DEFAULT_SELECTED, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, c as DEFAULT_MESSAGE, s as DEFAULT_CLOSE_BUTTON } from './constants-DC9V_oNU.js';
+import { D as DocumentClickListener } from './document-click-listener-B2jDrCt8.js';
 
 const DBCustomSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onSelect = createEvent(this, "onSelect");
-        this.onAmountChange = createEvent(this, "onAmountChange");
-        this.onDropdownToggle = createEvent(this, "onDropdownToggle");
+        this.amountChange = createEvent(this, "amountChange");
+        this.dropdownToggle = createEvent(this, "dropdownToggle");
+        this.optionSelected = createEvent(this, "optionSelected");
         this.showClearSelection = true;
-        this.clearSelectionLabel = "Clear selection";
-        this._name = undefined;
+        this.clearSelectionText = "Clear selection";
         this._id = undefined;
         this._messageId = undefined;
         this._validMessageId = undefined;
         this._invalidMessageId = undefined;
+        this._invalidMessage = undefined;
         this._selectId = undefined;
         this._labelId = undefined;
         this._summaryId = undefined;
@@ -32,14 +33,67 @@ const DBCustomSelect = class {
         this._values = [];
         this._options = [];
         this._hasNoOptions = false;
-        this._internalChangeTimestamp = -1;
-        this._externalChangeTimestamp = -1;
+        this._documentClickListenerCallbackId = undefined;
+        this._internalChangeTimestamp = 0;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
+        this.satisfyReact = function satisfyReact() {
+            // This is an empty function to satisfy React
+        };
+    }
+    hasValidState() {
+        var _a;
+        return !!((_a = this.validMessage) !== null && _a !== void 0 ? _a : this.validation === "valid");
+    }
+    handleValidation() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this.selectRef) {
+            this.selectRef.value = this.getNativeSelectValue();
+        }
+        /* 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._invalidMessage =
+                this.invalidMessage ||
+                    ((_b = this.selectRef) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
+                    DEFAULT_INVALID_MESSAGE;
+            if (hasVoiceOver()) {
+                this._voiceOverFallback = this._invalidMessage;
+                delay(() => (this._voiceOverFallback = ""), 1000);
+            }
+            this._validity = (_c = this.validation) !== null && _c !== void 0 ? _c : "invalid";
+        }
+        else if (this.hasValidState() &&
+            ((_d = this.selectRef) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
+            this.required) {
+            this._descByIds = this._validMessageId;
+            if (hasVoiceOver()) {
+                this._voiceOverFallback = (_e = this.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE;
+                delay(() => (this._voiceOverFallback = ""), 1000);
+            }
+            this._validity = (_f = this.validation) !== null && _f !== void 0 ? _f : "valid";
+        }
+        else if (stringPropVisible(this.message, this.showMessage)) {
+            this._descByIds = this._messageId;
+            this._validity = (_g = this.validation) !== null && _g !== void 0 ? _g : "no-validation";
+        }
+        else {
+            this._descByIds = this._placeholderId;
+            this._validity = (_h = this.validation) !== null && _h !== void 0 ? _h : "no-validation";
+        }
     }
     handleDropdownToggle(event) {
-        if (this.onDropdownToggle) {
-            this.onDropdownToggle.emit(event);
+        if (this.dropdownToggle) {
+            this.dropdownToggle.emit(event);
+        }
+        if (event.target.open) {
+            this._documentClickListenerCallbackId =
+                new DocumentClickListener().addCallback((event) => this.handleDocumentClose(event));
+        }
+        else {
+            if (this._documentClickListenerCallbackId) {
+                new DocumentClickListener().removeCallback(this._documentClickListenerCallbackId);
+            }
         }
     }
     getNativeSelectValue() {
@@ -61,24 +115,17 @@ const DBCustomSelect = class {
         this._descByIds = descByIds.join(" ");
     }
     getSelectAllLabel() {
-        var _a, _b, _c;
-        if (!this.selectAllRef)
-            return (_a = this.selectAllLabel) !== null && _a !== void 0 ? _a : DEFAULT_LABEL;
-        if (this.selectAllRef.indeterminate || !this.selectAllChecked) {
-            return (_b = this.selectAllLabel) !== null && _b !== void 0 ? _b : DEFAULT_LABEL;
-        }
-        else {
-            return (_c = this.deSelectAllLabel) !== null && _c !== void 0 ? _c : DEFAULT_LABEL;
-        }
+        var _a;
+        return (_a = this.selectAllLabel) !== null && _a !== void 0 ? _a : DEFAULT_LABEL;
     }
     getOptionLabel(option) {
         var _a, _b, _c;
         return (_c = (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "";
     }
     getOptionChecked(value) {
-        var _a;
-        if (value && this._values && this._values.includes) {
-            return (_a = this._values) === null || _a === void 0 ? void 0 : _a.includes(value);
+        var _a, _b;
+        if (value && ((_a = this._values) === null || _a === void 0 ? void 0 : _a.includes)) {
+            return (_b = this._values) === null || _b === void 0 ? void 0 : _b.includes(value);
         }
         return false;
     }
@@ -109,7 +156,7 @@ const DBCustomSelect = class {
         }
     }
     handleArrowDownUp(event) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) {
             if (document) {
                 const activeElement = document.activeElement;
@@ -121,7 +168,7 @@ const DBCustomSelect = class {
                         const listElement = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest("li");
                         if (event.key === "ArrowDown" || event.key === "ArrowRight") {
                             if (listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling) {
-                                (_b = listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling.querySelector("input")) === null || _b === void 0 ? void 0 : _b.focus();
+                                (_c = (_b = listElement === null || listElement === void 0 ? void 0 : listElement.nextElementSibling) === null || _b === void 0 ? void 0 : _b.querySelector("input")) === null || _c === void 0 ? void 0 : _c.focus();
                             }
                             else {
                                 // We are on the last checkbox we move to the top checkbox
@@ -130,7 +177,7 @@ const DBCustomSelect = class {
                         }
                         else {
                             if (listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling) {
-                                (_c = listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling.querySelector("input")) === null || _c === void 0 ? void 0 : _c.focus();
+                                (_e = (_d = listElement === null || listElement === void 0 ? void 0 : listElement.previousElementSibling) === null || _d === void 0 ? void 0 : _d.querySelector("input")) === null || _e === void 0 ? void 0 : _e.focus();
                             }
                             else if (this.detailsRef.querySelector(`input[type="checkbox"]`) !==
                                 activeElement) {
@@ -147,9 +194,9 @@ const DBCustomSelect = class {
                                     }, 100);
                                 }
                                 else {
-                                    const checkboxList = Array.from((_d = this.detailsRef) === null || _d === void 0 ? void 0 : _d.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                    const checkboxList = Array.from((_f = this.detailsRef) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
                                     if (checkboxList.length) {
-                                        (_e = checkboxList.at(-1)) === null || _e === void 0 ? void 0 : _e.focus();
+                                        (_g = checkboxList.at(-1)) === null || _g === void 0 ? void 0 : _g.focus();
                                     }
                                 }
                             }
@@ -212,41 +259,57 @@ const DBCustomSelect = class {
     }
     handleDocumentClose(event) {
         var _a;
-        if (((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) && !this.detailsRef.contains(event.target)) {
+        // stencil is sending a custom event which wraps the pointer event into details
+        const target = typeof event.detail === "number" ? event.target : event.detail.target;
+        if (((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) && !this.detailsRef.contains(target)) {
             this.detailsRef.open = false;
         }
     }
+    handleOptionSelected(values) {
+        const skip = new Date().getTime() - this._internalChangeTimestamp < 200;
+        if (skip)
+            return;
+        if (this.optionSelected) {
+            this._values = values;
+            this.optionSelected.emit(values !== null && values !== void 0 ? values : []);
+        }
+        this._internalChangeTimestamp = new Date().getTime();
+    }
     handleSelect(value) {
-        var _a, _b;
+        var _a;
         if (value) {
             if (this.multiple) {
                 if ((_a = this._values) === null || _a === void 0 ? void 0 : _a.includes(value)) {
-                    this._values = (_b = this._values) === null || _b === void 0 ? void 0 : _b.filter((v) => v !== value);
+                    this.handleOptionSelected(this._values.filter((v) => v !== value));
                 }
                 else {
-                    this._values = [...(this._values || []), value];
+                    this.handleOptionSelected([...(this._values || []), value]);
                 }
             }
             else {
-                this._values = [value];
+                this.handleOptionSelected([value]);
                 this.handleClose("close");
             }
-            this._internalChangeTimestamp = new Date().getTime();
         }
     }
     handleSelectAll() {
         var _a;
         if (((_a = this._values) === null || _a === void 0 ? void 0 : _a.length) === this.amountOptions) {
-            this._values = [];
+            this.handleOptionSelected([]);
         }
         else {
-            this._values = this.options
-                ? this.options
-                    .filter((option) => !option.isGroupTitle)
-                    .map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : ""; })
-                : [];
+            const searchValue = this.searchEnabled && this.searchInputRef
+                ? this.searchInputRef.value
+                : undefined;
+            this.handleOptionSelected(this.options
+                ? this.options.filter((option) => {
+                    var _a;
+                    return !option.isGroupTitle &&
+                        (!searchValue ||
+                            ((_a = option.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase())));
+                }).map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : ""; })
+                : []);
         }
-        this._internalChangeTimestamp = new Date().getTime();
     }
     handleFocusFirstDropdownCheckbox(activeElement) {
         if (this.detailsRef) {
@@ -282,6 +345,7 @@ const DBCustomSelect = class {
         }
     }
     handleSearch(event) {
+        event.stopPropagation();
         const filterText = event.target.value;
         this._options =
             !this.options || !filterText || filterText.length === 0
@@ -292,7 +356,7 @@ const DBCustomSelect = class {
                         .includes(filterText.toLowerCase()));
     }
     handleClearAll() {
-        this._values = [];
+        this.handleOptionSelected([]);
         this.handleSummaryFocus();
     }
     handleSummaryFocus() {
@@ -332,8 +396,22 @@ const DBCustomSelect = class {
         }
     }
     watch0Fn() {
-        var _a;
-        this._name = (_a = this.name) !== null && _a !== void 0 ? _a : this._id;
+        if (this.detailsRef) {
+            const summary = this.detailsRef.querySelector("summary");
+            if (summary) {
+                summary.addEventListener("click", () => {
+                    this.handleAutoPlacement();
+                    this.handleOpenByKeyboardFocus(true);
+                });
+                summary.addEventListener("keydown", (event) => {
+                    var _a;
+                    if (event.code === "Space" && !((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open)) {
+                        this.handleOpenByKeyboardFocus();
+                    }
+                });
+            }
+            this.detailsRef.addEventListener("focusout", (event) => this.handleClose(event));
+        }
     }
     watch0() {
         this.watch0Fn();
@@ -369,27 +447,6 @@ const DBCustomSelect = class {
         this.watch2Fn();
     }
     watch3Fn() {
-        if (this.detailsRef) {
-            const summary = this.detailsRef.querySelector("summary");
-            if (summary) {
-                summary.addEventListener("click", () => {
-                    this.handleAutoPlacement();
-                    this.handleOpenByKeyboardFocus(true);
-                });
-                summary.addEventListener("keydown", (event) => {
-                    var _a;
-                    if (event.code === "Space" && !((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open)) {
-                        this.handleOpenByKeyboardFocus();
-                    }
-                });
-            }
-            this.detailsRef.addEventListener("focusout", (event) => this.handleClose(event));
-        }
-    }
-    watch3() {
-        this.watch3Fn();
-    }
-    watch4Fn() {
         if (this.showNoResults !== undefined) {
             this._hasNoOptions = this.showNoResults;
         }
@@ -397,90 +454,45 @@ const DBCustomSelect = class {
             this._hasNoOptions = this._options.length === 0;
         }
     }
+    watch3() {
+        this.watch3Fn();
+    }
+    watch4Fn() {
+        this.selectAllEnabled = Boolean(this.multiple && (this.showSelectAll || this.amountOptions > 5));
+    }
     watch4() {
         this.watch4Fn();
     }
     watch5Fn() {
-        this.selectAllEnabled = Boolean(this.multiple && (this.showSelectAll || this.amountOptions > 5));
+        this.searchEnabled = this.showSearch || this.amountOptions > 9;
     }
     watch5() {
         this.watch5Fn();
     }
     watch6Fn() {
-        this.searchEnabled = this.showSearch || this.amountOptions > 9;
+        var _a;
+        if (this.values &&
+            Array.isArray(this.values) &&
+            this.values !== this._values) {
+            this._values = (_a = this.values) !== null && _a !== void 0 ? _a : [];
+        }
     }
     watch6() {
         this.watch6Fn();
     }
     watch7Fn() {
-        var _a;
-        if (this.onSelect &&
-            (this._externalChangeTimestamp || this._internalChangeTimestamp)) {
-            const onlyInternalChange = this._internalChangeTimestamp && !this._externalChangeTimestamp;
-            const bothChangeButInternalNew = this._internalChangeTimestamp &&
-                this._externalChangeTimestamp &&
-                this._internalChangeTimestamp > this._externalChangeTimestamp;
-            if (onlyInternalChange || bothChangeButInternalNew) {
-                this.onSelect.emit((_a = this._values) !== null && _a !== void 0 ? _a : []);
-            }
-        }
+        this.handleValidation();
     }
     watch7() {
         this.watch7Fn();
     }
     watch8Fn() {
-        var _a;
-        if (this.values && Array.isArray(this.values)) {
-            this._values = (_a = this.values) !== null && _a !== void 0 ? _a : [];
-            this._externalChangeTimestamp = new Date().getTime();
-        }
+        this._validity = this.validation;
     }
     watch8() {
         this.watch8Fn();
     }
     watch9Fn() {
-        var _a, _b, _c, _d, _e, _f;
-        if (this.selectRef) {
-            this.selectRef.value = this.getNativeSelectValue();
-        }
-        /* 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._validity = "invalid";
-            this.setDescById(this._invalidMessageId);
-            if (hasVoiceOver()) {
-                this._voiceOverFallback =
-                    (_d = (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (_c = this.selectRef) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE;
-                delay(() => (this._voiceOverFallback = ""), 1000);
-            }
-        }
-        else if (this.validation === "valid" ||
-            (((_e = this.selectRef) === null || _e === void 0 ? void 0 : _e.validity.valid) && this.required)) {
-            this._validity = "valid";
-            this.setDescById(this._validMessageId);
-            if (hasVoiceOver()) {
-                this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE;
-                delay(() => (this._voiceOverFallback = ""), 1000);
-            }
-        }
-        else if (this.message) {
-            this._validity = "no-validation";
-            this.setDescById(this._messageId);
-        }
-        else {
-            this._validity = "no-validation";
-            this.setDescById(this._placeholderId);
-        }
-    }
-    watch9() {
-        this.watch9Fn();
-    }
-    watch10Fn() {
-        this._validity = this.validation;
-    }
-    watch10() {
-        this.watch10Fn();
-    }
-    watch11Fn() {
         var _a, _b;
         if (((_a = this._values) === null || _a === void 0 ? void 0 : _a.length) === 0) {
             this.selectAllChecked = false;
@@ -494,19 +506,19 @@ const DBCustomSelect = class {
             this.selectAllIndeterminate = true;
         }
     }
-    watch11() {
-        this.watch11Fn();
+    watch9() {
+        this.watch9Fn();
     }
-    watch12Fn() {
+    watch10Fn() {
         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;
     }
-    watch12() {
-        this.watch12Fn();
+    watch10() {
+        this.watch10Fn();
     }
-    watch13Fn() {
+    watch11Fn() {
         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) => {
@@ -518,10 +530,10 @@ const DBCustomSelect = class {
             });
         }
     }
-    watch13() {
-        this.watch13Fn();
+    watch11() {
+        this.watch11Fn();
     }
-    watch14Fn() {
+    watch12Fn() {
         var _a, _b, _c;
         if ((_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) {
             if (this.selectedType === "amount") {
@@ -537,25 +549,35 @@ const DBCustomSelect = class {
             this._selectedLabels = "";
         }
     }
-    watch14() {
-        this.watch14Fn();
+    watch12() {
+        this.watch12Fn();
     }
-    watch15Fn() {
+    watch13Fn() {
         var _a, _b;
-        if (this.onAmountChange) {
-            this.onAmountChange.emit((_b = (_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+        if (this.amountChange) {
+            this.amountChange.emit((_b = (_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
         }
     }
-    watch15() {
-        this.watch15Fn();
+    watch13() {
+        this.watch13Fn();
     }
-    watch16Fn() {
+    watch14Fn() {
         if (this.selectAllRef) {
             this.selectAllRef.indeterminate = Boolean(this.selectAllIndeterminate);
         }
     }
-    watch16() {
-        this.watch16Fn();
+    watch14() {
+        this.watch14Fn();
+    }
+    watch15Fn() {
+        var _a;
+        this._invalidMessage =
+            this.invalidMessage ||
+                ((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+                DEFAULT_INVALID_MESSAGE;
+    }
+    watch15() {
+        this.watch15Fn();
     }
     componentDidLoad() {
         var _a;
@@ -571,9 +593,7 @@ const DBCustomSelect = class {
         this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;
         this._selectedLabelsId = mId + "-selected-labels";
         this._infoTextId = mId + "-info";
-        if (document) {
-            document.addEventListener("click", this.handleDocumentClose);
-        }
+        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
@@ -590,60 +610,54 @@ const DBCustomSelect = class {
         this.watch13Fn();
         this.watch14Fn();
         this.watch15Fn();
-        this.watch16Fn();
-    }
-    disconnectedCallback() {
-        if (document) {
-            document.removeEventListener("click", this.handleDocumentClose);
-        }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        return (h("div", { key: '7bcd0b065dd492b5e1e00c4b22948143d947552a', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        return (h("div", { key: 'ba168e109d3b2e75b46145033a88119ac46cf3f7', 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.width, "data-variant": this.variant, "data-required": getBooleanAsString(this.required), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon) }, h("label", { key: '1ddb2c43327a9f046728c57d3da93ef4872f9e3c', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'c69f10fe071860ff5478aedc614565a6387d5d13', role: "none", hidden: true, id: this._selectId, tabIndex: -1, 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-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon) }, h("label", { key: 'a92ba45f913e2c7a78140da705da166af94484b5', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '093c76705744d56d0d3c2c33f108a74b088381a5', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
-            }, form: this.form, disabled: this.disabled, multiple: this.multiple, required: this.required, onChange: () => { } }, (_b = this._options) === null || _b === void 0 ? void 0 : _b.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option)))))), h("details", { key: 'd3229a4f6bda6ba5f1c64d3e60c48fd35aec95f5', ref: (el) => {
+            }, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: () => this.satisfyReact() }, ((_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: '64c5745a0fc32954f792b7fb81c8b26f11304565', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, "aria-disabled": this.disabled, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: 'd6c5cfde8195408d10dd586242d27e676be3f9ab' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-labelledby": this._labelId }, ((_c = this._selectedLabels) === null || _c === void 0 ? void 0 : _c.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_d = this._selectedOptions) === null || _d === void 0 ? void 0 : _d.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(index), 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", showLabel: false, label: (_e = this.searchLabel) !== null && _e !== void 0 ? _e : DEFAULT_LABEL, placeholder: (_f = this.searchPlaceholder) !== null && _f !== void 0 ? _f : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '1b1683fa3e54c249efd67e1ca960d61accd125c3' }), 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(index), 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, 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
-                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (h("db-infotext", { id: this._infoTextId, icon: this._hasNoOptions ? undefined : "circular_arrows", semantic: this._hasNoOptions ? "warning" : "informational" }, (_g = (this._hasNoOptions
+                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (h("db-infotext", { id: this._infoTextId, icon: this._hasNoOptions ? undefined : "circular_arrows", semantic: this._hasNoOptions ? "warning" : "informational" }, (_h = (this._hasNoOptions
             ? this.noResultsText
-            : this.loadingText)) !== null && _g !== void 0 ? _g : DEFAULT_MESSAGE)) : (h(Fragment, null, this.selectAllEnabled ? (h("div", null, h("div", { class: "db-checkbox db-custom-select-list-item" }, h("label", null, h("input", { type: "checkbox", value: "select-all", ref: (el) => {
+            : this.loadingText)) !== null && _h !== void 0 ? _h : DEFAULT_MESSAGE)) : (h(Fragment, null, this.selectAllEnabled ? (h("div", null, h("div", { class: "db-checkbox db-custom-select-list-item" }, h("label", null, h("input", { type: "checkbox", value: "select-all", ref: (el) => {
                 this.selectAllRef = el;
-            }, form: this._id, checked: this.selectAllChecked, onChange: () => this.handleSelectAll() }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: this.multiple, label: (_h = this.label) !== null && _h !== void 0 ? _h : DEFAULT_LABEL }, (_j = this._options) === null || _j === void 0 ? void 0 : _j.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._name, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => {
-                this.handleSelect(option.value);
-            }, key: undefined }, !option.isGroupTitle
+            }, form: this._id, checked: this.selectAllChecked, onChange: () => this.handleSelectAll() }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.ariaListLabel) !== 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", onClick: () => {
-                this.handleClose("close");
-            } }, (_k = this.mobileCloseButtonText) !== null && _k !== void 0 ? _k : DEFAULT_CLOSE_BUTTON))))) : null), ((_l = this.showClearSelection) !== null && _l !== void 0 ? _l : true) && ((_m = this._values) === null || _m === void 0 ? void 0 : _m.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, onClick: () => this.handleClearAll() }, this.clearSelectionLabel, h("db-tooltip", { placement: "top" }, this.clearSelectionLabel))) : null, h("span", { key: '4d15f0a5d709cb329a3c18b907b5e9cf952a6252', "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_o = this.placeholder) !== null && _o !== void 0 ? _o : this.label), this.message ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: '8e63397ef220c396c55d7d228fbc7e0ee7664688', size: "small", semantic: "successful", id: this._validMessageId }, (_p = this.validMessage) !== null && _p !== void 0 ? _p : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: 'a8bc6cbd7a61e70f9956b1c47b175fd4b5d25004', size: "small", semantic: "critical", id: this._invalidMessageId }, (_q = this.invalidMessage) !== null && _q !== void 0 ? _q : (((_r = this.selectRef) === null || _r === void 0 ? void 0 : _r.validationMessage) || DEFAULT_INVALID_MESSAGE)), h("span", { key: '28db5cbc1feca0e5738148bb87e0df78d596e975', "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("close") }, (_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: () => this.handleClearAll() }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '309d5096cdbdfee24bd9a8a1941241586b60b3a4', "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: '8f0fe04ea553fbffd86a7e30baa9cab7be708fd6', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'c106041467983c90b5a56ee4a6a56f8653dccaab', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
-        "name": ["watch0"],
-        "_id": ["watch0", "watch1"],
-        "detailsRef": ["watch2", "watch3"],
+        "detailsRef": ["watch0", "watch2"],
+        "_id": ["watch1"],
         "_descByIds": ["watch2"],
-        "showNoResults": ["watch4"],
-        "_options": ["watch4", "watch13"],
-        "showSelectAll": ["watch5"],
-        "amountOptions": ["watch5", "watch6", "watch11"],
-        "multiple": ["watch5"],
-        "showSearch": ["watch6"],
-        "_externalChangeTimestamp": ["watch7"],
-        "_internalChangeTimestamp": ["watch7"],
-        "onSelect": ["watch7"],
-        "values": ["watch8"],
-        "_values": ["watch9", "watch11", "watch13"],
-        "validation": ["watch10"],
-        "options": ["watch12"],
-        "_selectedOptions": ["watch14", "watch15"],
-        "selectedType": ["watch14"],
-        "amountText": ["watch14"],
-        "selectAllIndeterminate": ["watch16"],
-        "selectAllRef": ["watch16"]
+        "showNoResults": ["watch3"],
+        "_options": ["watch3", "watch11"],
+        "showSelectAll": ["watch4"],
+        "amountOptions": ["watch4", "watch5", "watch9"],
+        "multiple": ["watch4"],
+        "showSearch": ["watch5"],
+        "values": ["watch6"],
+        "_values": ["watch7", "watch9", "watch11"],
+        "validation": ["watch8"],
+        "options": ["watch10"],
+        "_selectedOptions": ["watch12", "watch13"],
+        "selectedType": ["watch12"],
+        "amountText": ["watch12"],
+        "selectAllIndeterminate": ["watch14"],
+        "selectAllRef": ["watch14"],
+        "selectRef": ["watch15"],
+        "invalidMessage": ["watch15"]
     }; }
 };