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

package/dist/collection/components/custom-select/custom-select.js

@@ -1,5 +1,6 @@
-import { cls, delay, getBooleanAsString, getHideProp, getSearchInput, handleDataOutside, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, handleDataOutside, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import { DocumentClickListener } from "../../utils/document-click-listener";
 import { h, Fragment, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -8,12 +9,12 @@ import { h, Fragment, } from "@stencil/core";
 export class DBCustomSelect {
     constructor() {
         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;
@@ -31,14 +32,67 @@ export class DBCustomSelect {
         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() {
@@ -60,24 +114,17 @@ export class DBCustomSelect {
         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;
     }
@@ -108,7 +155,7 @@ export class DBCustomSelect {
         }
     }
     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;
@@ -120,7 +167,7 @@ export class DBCustomSelect {
                         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
@@ -129,7 +176,7 @@ export class DBCustomSelect {
                         }
                         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) {
@@ -146,9 +193,9 @@ export class DBCustomSelect {
                                     }, 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();
                                     }
                                 }
                             }
@@ -211,41 +258,57 @@ export class DBCustomSelect {
     }
     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) {
@@ -281,6 +344,7 @@ export class DBCustomSelect {
         }
     }
     handleSearch(event) {
+        event.stopPropagation();
         const filterText = event.target.value;
         this._options =
             !this.options || !filterText || filterText.length === 0
@@ -291,7 +355,7 @@ export class DBCustomSelect {
                         .includes(filterText.toLowerCase()));
     }
     handleClearAll() {
-        this._values = [];
+        this.handleOptionSelected([]);
         this.handleSummaryFocus();
     }
     handleSummaryFocus() {
@@ -331,8 +395,22 @@ export class DBCustomSelect {
         }
     }
     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();
@@ -368,27 +446,6 @@ export class DBCustomSelect {
         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;
         }
@@ -396,95 +453,45 @@ export class DBCustomSelect {
             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 : []);
-                const fakeEvent = {
-                    target: {
-                        values: this._values,
-                    },
-                };
-            }
-        }
+        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;
@@ -498,19 +505,19 @@ export class DBCustomSelect {
             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) => {
@@ -522,10 +529,10 @@ export class DBCustomSelect {
             });
         }
     }
-    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") {
@@ -541,25 +548,35 @@ export class DBCustomSelect {
             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;
@@ -575,9 +592,7 @@ export class DBCustomSelect {
         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();
@@ -594,42 +609,39 @@ export class DBCustomSelect {
         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 is() { return "db-custom-select"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"id\"]",
@@ -650,14 +662,14 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
-            "name": {
+            "invalidMessage": {
                 "type": "string",
+                "attribute": "invalid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"name\"]",
+                    "original": "DBCustomSelectProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -675,11 +687,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "message": {
                 "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"message\"]",
@@ -700,15 +712,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             },
             "showMessage": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-message",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showMessage\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -725,11 +737,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-message",
                 "reflect": false
             },
             "showNoResults": {
                 "type": "boolean",
+                "attribute": "show-no-results",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showNoResults\"]",
@@ -750,15 +762,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-no-results",
                 "reflect": false
             },
             "multiple": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"multiple\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -775,11 +787,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false
             },
             "showSelectAll": {
                 "type": "boolean",
+                "attribute": "show-select-all",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showSelectAll\"]",
@@ -800,11 +812,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-select-all",
                 "reflect": false
             },
             "showSearch": {
                 "type": "boolean",
+                "attribute": "show-search",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showSearch\"]",
@@ -825,11 +837,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-search",
                 "reflect": false
             },
             "values": {
                 "type": "unknown",
+                "attribute": "values",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"values\"]",
@@ -853,6 +865,7 @@ export class DBCustomSelect {
             },
             "validation": {
                 "type": "string",
+                "attribute": "validation",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"validation\"]",
@@ -873,15 +886,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation",
                 "reflect": false
             },
-            "invalidMessage": {
-                "type": "string",
+            "options": {
+                "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"invalidMessage\"]",
-                    "resolved": "string",
+                    "original": "DBCustomSelectProps[\"options\"]",
+                    "resolved": "CustomSelectOptionType[]",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -897,16 +910,15 @@ export class DBCustomSelect {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "invalid-message",
-                "reflect": false
+                "setter": false
             },
-            "required": {
-                "type": "boolean",
+            "selectedType": {
+                "type": "string",
+                "attribute": "selected-type",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"required\"]",
-                    "resolved": "boolean",
+                    "original": "DBCustomSelectProps[\"selectedType\"]",
+                    "resolved": "\"amount\" | \"tag\" | \"text\"",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -923,14 +935,14 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false
             },
-            "validMessage": {
+            "amountText": {
                 "type": "string",
+                "attribute": "amount-text",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"validMessage\"]",
+                    "original": "DBCustomSelectProps[\"amountText\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -948,38 +960,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid-message",
                 "reflect": false
             },
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBCustomSelectProps[\"options\"]",
-                    "resolved": "CustomSelectOptionType[]",
-                    "references": {
-                        "DBCustomSelectProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "selectedType": {
+            "validMessage": {
                 "type": "string",
+                "attribute": "valid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"selectedType\"]",
-                    "resolved": "\"amount\" | \"tag\" | \"text\"",
+                    "original": "DBCustomSelectProps[\"validMessage\"]",
+                    "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -996,15 +985,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected-type",
                 "reflect": false
             },
-            "amountText": {
-                "type": "string",
+            "required": {
+                "type": "any",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"amountText\"]",
-                    "resolved": "string",
+                    "original": "DBCustomSelectProps[\"required\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -1021,39 +1010,14 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "amount-text",
                 "reflect": false
             },
             "selectAllLabel": {
                 "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBCustomSelectProps[\"selectAllLabel\"]",
-                    "resolved": "string",
-                    "references": {
-                        "DBCustomSelectProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
                 "attribute": "select-all-label",
-                "reflect": false
-            },
-            "deSelectAllLabel": {
-                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"deSelectAllLabel\"]",
+                    "original": "DBCustomSelectProps[\"selectAllLabel\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -1071,11 +1035,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "de-select-all-label",
                 "reflect": false
             },
             "removeTagsTexts": {
                 "type": "unknown",
+                "attribute": "remove-tags-texts",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"removeTagsTexts\"]",
@@ -1099,6 +1063,7 @@ export class DBCustomSelect {
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"className\"]",
@@ -1119,14 +1084,14 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
-            "width": {
+            "formFieldWidth": {
                 "type": "string",
+                "attribute": "form-field-width",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"width\"]",
+                    "original": "DBCustomSelectProps[\"formFieldWidth\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -1144,11 +1109,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "width",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"variant\"]",
@@ -1169,11 +1134,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"placement\"]",
@@ -1194,15 +1159,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false
             },
             "showLabel": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showLabel\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -1219,11 +1184,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-label",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"icon\"]",
@@ -1244,15 +1209,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -1269,11 +1234,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"label\"]",
@@ -1294,11 +1259,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"form\"]",
@@ -1319,15 +1284,40 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"name\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -1344,11 +1334,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"open\"]",
@@ -1369,15 +1359,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": false
             },
             "dropdownWidth": {
                 "type": "string",
+                "attribute": "dropdown-width",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"dropdownWidth\"]",
-                    "resolved": "\"auto\" | \"fixed\" | \"full\" | \"string\"",
+                    "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
@@ -1394,11 +1384,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "dropdown-width",
                 "reflect": false
             },
             "searchLabel": {
                 "type": "string",
+                "attribute": "search-label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"searchLabel\"]",
@@ -1419,11 +1409,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search-label",
                 "reflect": false
             },
             "searchPlaceholder": {
                 "type": "string",
+                "attribute": "search-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"searchPlaceholder\"]",
@@ -1444,11 +1434,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search-placeholder",
                 "reflect": false
             },
             "showLoading": {
                 "type": "boolean",
+                "attribute": "show-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showLoading\"]",
@@ -1469,11 +1459,36 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-loading",
+                "reflect": false
+            },
+            "ariaListLabel": {
+                "type": "string",
+                "attribute": "aria-list-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"ariaListLabel\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "noResultsText": {
                 "type": "string",
+                "attribute": "no-results-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"noResultsText\"]",
@@ -1494,11 +1509,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-results-text",
                 "reflect": false
             },
             "loadingText": {
                 "type": "string",
+                "attribute": "loading-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"loadingText\"]",
@@ -1519,11 +1534,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading-text",
                 "reflect": false
             },
             "mobileCloseButtonText": {
                 "type": "string",
+                "attribute": "mobile-close-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"mobileCloseButtonText\"]",
@@ -1544,11 +1559,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mobile-close-button-text",
                 "reflect": false
             },
             "showClearSelection": {
                 "type": "boolean",
+                "attribute": "show-clear-selection",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"showClearSelection\"]",
@@ -1569,15 +1584,15 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-clear-selection",
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "clearSelectionLabel": {
+            "clearSelectionText": {
                 "type": "string",
+                "attribute": "clear-selection-text",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"clearSelectionLabel\"]",
+                    "original": "DBCustomSelectProps[\"clearSelectionText\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -1595,12 +1610,12 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-selection-label",
                 "reflect": false,
                 "defaultValue": "\"Clear selection\""
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"placeholder\"]",
@@ -1621,11 +1636,11 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "messageIcon": {
                 "type": "string",
+                "attribute": "message-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCustomSelectProps[\"messageIcon\"]",
@@ -1646,18 +1661,17 @@ export class DBCustomSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message-icon",
                 "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "_name": {},
             "_id": {},
             "_messageId": {},
             "_validMessageId": {},
             "_invalidMessageId": {},
+            "_invalidMessage": {},
             "_selectId": {},
             "_labelId": {},
             "_summaryId": {},
@@ -1675,16 +1689,16 @@ export class DBCustomSelect {
             "_values": {},
             "_options": {},
             "_hasNoOptions": {},
+            "_documentClickListenerCallbackId": {},
             "_internalChangeTimestamp": {},
-            "_externalChangeTimestamp": {},
             "selectAllChecked": {},
             "selectAllIndeterminate": {}
         };
     }
     static get events() {
         return [{
-                "method": "onSelect",
-                "name": "onSelect",
+                "method": "amountChange",
+                "name": "amountChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1698,8 +1712,8 @@ export class DBCustomSelect {
                     "references": {}
                 }
             }, {
-                "method": "onAmountChange",
-                "name": "onAmountChange",
+                "method": "dropdownToggle",
+                "name": "dropdownToggle",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1713,8 +1727,8 @@ export class DBCustomSelect {
                     "references": {}
                 }
             }, {
-                "method": "onDropdownToggle",
-                "name": "onDropdownToggle",
+                "method": "optionSelected",
+                "name": "optionSelected",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1731,10 +1745,7 @@ export class DBCustomSelect {
     }
     static get watchers() {
         return [{
-                "propName": "name",
-                "methodName": "watch0"
-            }, {
-                "propName": "_id",
+                "propName": "detailsRef",
                 "methodName": "watch0"
             }, {
                 "propName": "_id",
@@ -1745,81 +1756,75 @@ export class DBCustomSelect {
             }, {
                 "propName": "_descByIds",
                 "methodName": "watch2"
-            }, {
-                "propName": "detailsRef",
-                "methodName": "watch3"
             }, {
                 "propName": "showNoResults",
-                "methodName": "watch4"
+                "methodName": "watch3"
             }, {
                 "propName": "_options",
-                "methodName": "watch4"
+                "methodName": "watch3"
             }, {
                 "propName": "showSelectAll",
-                "methodName": "watch5"
+                "methodName": "watch4"
             }, {
                 "propName": "amountOptions",
-                "methodName": "watch5"
+                "methodName": "watch4"
             }, {
                 "propName": "multiple",
-                "methodName": "watch5"
+                "methodName": "watch4"
             }, {
                 "propName": "showSearch",
-                "methodName": "watch6"
+                "methodName": "watch5"
             }, {
                 "propName": "amountOptions",
-                "methodName": "watch6"
-            }, {
-                "propName": "_externalChangeTimestamp",
-                "methodName": "watch7"
-            }, {
-                "propName": "_internalChangeTimestamp",
-                "methodName": "watch7"
-            }, {
-                "propName": "onSelect",
-                "methodName": "watch7"
+                "methodName": "watch5"
             }, {
                 "propName": "values",
-                "methodName": "watch8"
+                "methodName": "watch6"
             }, {
                 "propName": "_values",
-                "methodName": "watch9"
+                "methodName": "watch7"
             }, {
                 "propName": "validation",
-                "methodName": "watch10"
+                "methodName": "watch8"
             }, {
                 "propName": "_values",
-                "methodName": "watch11"
+                "methodName": "watch9"
             }, {
                 "propName": "amountOptions",
-                "methodName": "watch11"
+                "methodName": "watch9"
             }, {
                 "propName": "options",
-                "methodName": "watch12"
+                "methodName": "watch10"
             }, {
                 "propName": "_options",
-                "methodName": "watch13"
+                "methodName": "watch11"
             }, {
                 "propName": "_values",
-                "methodName": "watch13"
+                "methodName": "watch11"
             }, {
                 "propName": "_selectedOptions",
-                "methodName": "watch14"
+                "methodName": "watch12"
             }, {
                 "propName": "selectedType",
-                "methodName": "watch14"
+                "methodName": "watch12"
             }, {
                 "propName": "amountText",
-                "methodName": "watch14"
+                "methodName": "watch12"
             }, {
                 "propName": "_selectedOptions",
-                "methodName": "watch15"
+                "methodName": "watch13"
             }, {
                 "propName": "selectAllIndeterminate",
-                "methodName": "watch16"
+                "methodName": "watch14"
             }, {
                 "propName": "selectAllRef",
-                "methodName": "watch16"
+                "methodName": "watch14"
+            }, {
+                "propName": "selectRef",
+                "methodName": "watch15"
+            }, {
+                "propName": "invalidMessage",
+                "methodName": "watch15"
             }];
     }
 }