@db-ux/wc-core-components 2.0.8 → 2.0.10-popover-d7e8b9a

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

@@ -1,7 +1,9 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-bH2PZLSq.js';
-import { e as hasVoiceOver, f as delay, s as stringPropVisible, u as uuid, h as handleDataOutside, n as getSearchInput, g as getBooleanAsString, j as getBoolean, m as getHideProp, c as cls } from './index-pglUTSkG.js';
+import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, k as getSearchInput, g as getBooleanAsString, b as getBoolean, j as getHideProp, c as cls } from './index-CQCQcuvr.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-Bn3nIGhA.js';
+import { D as DocumentClickListener } from './document-click-listener-CsfOzbMG.js';
+import { D as DocumentScrollListener } from './document-scroll-listener-QnsLRkL2.js';
+import { h as handleFixedDropdown } from './floating-components-DYeQU2bY.js';
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -35,12 +37,21 @@ const DBCustomSelect = class {
         this._hasNoOptions = false;
         this._documentClickListenerCallbackId = undefined;
         this._internalChangeTimestamp = 0;
+        this._documentScrollListenerCallbackId = undefined;
+        this._observer = undefined;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
-        this.satisfyReact = function satisfyReact() {
-            // This is an empty function to satisfy React
+        this.satisfyReact = function satisfyReact(event) {
+            // This is a function to satisfy React
+            event.stopPropagation();
         };
     }
+    handleDocumentScroll(event) {
+        var _a, _b;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains) && ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.contains(this.detailsRef))) {
+            this.handleAutoPlacement();
+        }
+    }
     hasValidState() {
         var _a;
         return !!((_a = this.validMessage) !== null && _a !== void 0 ? _a : this.validation === "valid");
@@ -83,17 +94,31 @@ const DBCustomSelect = class {
         }
     }
     handleDropdownToggle(event) {
+        var _a, _b;
         if (this.dropdownToggle) {
+            event.stopPropagation();
             this.dropdownToggle.emit(event);
         }
         if (event.target.open) {
             this._documentClickListenerCallbackId =
                 new DocumentClickListener().addCallback((event) => this.handleDocumentClose(event));
+            this._documentScrollListenerCallbackId =
+                new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event));
+            this.handleAutoPlacement();
+            (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(this.detailsRef);
+            if (!event.target.dataset.test) {
+                // We need this workaround for snapshot testing
+                this.handleOpenByKeyboardFocus();
+            }
         }
         else {
             if (this._documentClickListenerCallbackId) {
                 new DocumentClickListener().removeCallback(this._documentClickListenerCallbackId);
             }
+            if (this._documentScrollListenerCallbackId) {
+                new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+            }
+            (_b = this._observer) === null || _b === void 0 ? void 0 : _b.unobserve(this.detailsRef);
         }
     }
     getNativeSelectValue() {
@@ -134,11 +159,14 @@ const DBCustomSelect = class {
         return ((_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : uuid()).toString();
     }
     getTagRemoveLabel(index) {
-        return this.removeTagsTexts && this.removeTagsTexts.length > index
-            ? this.removeTagsTexts.at(index)
-            : `${DEFAULT_REMOVE} ${this._selectedOptions
+        if (this.removeTagsTexts && this.removeTagsTexts.length > index) {
+            return this.removeTagsTexts.at(index);
+        }
+        else {
+            return `${DEFAULT_REMOVE} ${this._selectedOptions
                 ? this.getOptionLabel(this._selectedOptions[index])
                 : ""}`;
+        }
     }
     handleTagRemove(option, event) {
         event.stopPropagation();
@@ -149,17 +177,19 @@ const DBCustomSelect = class {
         if (this.detailsRef) {
             const dropdown = this.detailsRef.querySelector("article");
             if (dropdown) {
+                // This is a workaround for Angular
                 delay(() => {
-                    handleDataOutside(dropdown);
-                }, 100);
+                    var _a;
+                    handleFixedDropdown(dropdown, this.detailsRef, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
+                }, 1);
             }
         }
     }
     handleArrowDownUp(event) {
         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;
+            if (self.document) {
+                const activeElement = self.document.activeElement;
                 if (activeElement) {
                     // 1. we check if we are currently focusing a checkbox in the dropdown
                     const isCheckbox = activeElement.getAttribute("type") === "checkbox" ||
@@ -216,8 +246,6 @@ const DBCustomSelect = class {
                     }
                 }
             }
-            event.stopPropagation();
-            event.preventDefault();
         }
         else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
             // Open dropdown with arrows see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboardinteraction
@@ -226,13 +254,14 @@ const DBCustomSelect = class {
                 this.detailsRef.open = true;
             }
             this.handleOpenByKeyboardFocus();
-            event.stopPropagation();
-            event.preventDefault();
         }
+        event.stopPropagation();
+        event.preventDefault();
     }
     handleKeyboardPress(event) {
         var _a;
-        if (event.key === "Escape" && this.detailsRef && ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open)) {
+        event.stopPropagation();
+        if (event.key === "Escape" && ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open)) {
             this.handleClose("close");
             this.handleSummaryFocus();
         }
@@ -252,25 +281,29 @@ const DBCustomSelect = class {
             else if (this.detailsRef.open && (event === null || event === void 0 ? void 0 : event.relatedTarget)) {
                 const relatedTarget = event.relatedTarget;
                 if (!this.detailsRef.contains(relatedTarget)) {
-                    this.detailsRef.open = false;
+                    // We need to use delay here because the combination of `contains`
+                    // and changing the DOM element causes a race condition inside browser
+                    delay(() => (this.detailsRef.open = false), 1);
                 }
             }
         }
     }
     handleDocumentClose(event) {
-        var _a;
-        // 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;
+        var _a, _b;
+        if (event) {
+            // stencil is sending a custom event which wraps the pointer event into details
+            const target = typeof event.detail === "number" ? event.target : (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
+            if (((_b = this.detailsRef) === null || _b === void 0 ? void 0 : _b.open) && !this.detailsRef.contains(target)) {
+                this.detailsRef.open = false;
+            }
         }
     }
     handleOptionSelected(values) {
         const skip = new Date().getTime() - this._internalChangeTimestamp < 200;
         if (skip)
             return;
+        this._values = values;
         if (this.optionSelected) {
-            this._values = values;
             this.optionSelected.emit(values !== null && values !== void 0 ? values : []);
         }
         this._internalChangeTimestamp = new Date().getTime();
@@ -292,8 +325,9 @@ const DBCustomSelect = class {
             }
         }
     }
-    handleSelectAll() {
+    handleSelectAll(event) {
         var _a;
+        event.stopPropagation();
         if (((_a = this._values) === null || _a === void 0 ? void 0 : _a.length) === this.amountOptions) {
             this.handleOptionSelected([]);
         }
@@ -323,12 +357,12 @@ const DBCustomSelect = class {
                     delay(() => {
                         // Takes some time until element can be focused
                         checkbox.focus();
-                    }, 100);
+                    }, 1);
                 }
             }
         }
     }
-    handleOpenByKeyboardFocus(onlySearch) {
+    handleOpenByKeyboardFocus() {
         if (this.detailsRef) {
             // Focus search if possible
             const search = getSearchInput(this.detailsRef);
@@ -336,9 +370,9 @@ const DBCustomSelect = class {
                 delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
-                }, 100);
+                }, 1);
             }
-            else if (!onlySearch) {
+            else {
                 // Focus first checkbox otherwise
                 this.handleFocusFirstDropdownCheckbox();
             }
@@ -347,21 +381,26 @@ const DBCustomSelect = class {
     handleSearch(event) {
         event.stopPropagation();
         const filterText = event.target.value;
-        this._options =
-            !this.options || !filterText || filterText.length === 0
-                ? this.options
-                : this.options.filter((option) => !option.isGroupTitle &&
-                    this.getOptionLabel(option)
-                        .toLowerCase()
-                        .includes(filterText.toLowerCase()));
-    }
-    handleClearAll() {
+        if (!this.options || !filterText || filterText.length === 0) {
+            this._options = this.options;
+        }
+        else {
+            this._options = this.options.filter((option) => !option.isGroupTitle &&
+                this.getOptionLabel(option)
+                    .toLowerCase()
+                    .includes(filterText.toLowerCase()));
+        }
+    }
+    handleClearAll(event) {
+        event.stopPropagation();
         this.handleOptionSelected([]);
         this.handleSummaryFocus();
     }
     handleSummaryFocus() {
-        var _a, _b;
-        (_b = (_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.querySelector("summary")) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a;
+        if (this.detailsRef) {
+            (_a = this.detailsRef.querySelector("summary")) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -397,19 +436,6 @@ const DBCustomSelect = class {
     }
     watch0Fn() {
         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));
         }
     }
@@ -436,10 +462,11 @@ const DBCustomSelect = class {
         this.watch1Fn();
     }
     watch2Fn() {
+        var _a;
         if (this.detailsRef) {
             const summary = this.detailsRef.querySelector("summary");
             if (summary) {
-                summary.setAttribute("aria-describedby", this._descByIds || "");
+                summary.setAttribute("aria-describedby", (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : (this._descByIds || ""));
             }
         }
     }
@@ -458,13 +485,15 @@ const DBCustomSelect = class {
         this.watch3Fn();
     }
     watch4Fn() {
-        this.selectAllEnabled = Boolean(this.multiple && (this.showSelectAll || this.amountOptions > 5));
+        var _a;
+        this.selectAllEnabled = Boolean(this.multiple && ((_a = this.showSelectAll) !== null && _a !== void 0 ? _a : this.amountOptions > 5));
     }
     watch4() {
         this.watch4Fn();
     }
     watch5Fn() {
-        this.searchEnabled = this.showSearch || this.amountOptions > 9;
+        var _a;
+        this.searchEnabled = (_a = this.showSearch) !== null && _a !== void 0 ? _a : this.amountOptions > 9;
     }
     watch5() {
         this.watch5Fn();
@@ -520,8 +549,8 @@ const DBCustomSelect = class {
     }
     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) => {
+        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) => {
                 var _a, _b;
                 if (!option.value || !((_a = this._values) === null || _a === void 0 ? void 0 : _a["includes"])) {
                     return false;
@@ -594,6 +623,14 @@ const DBCustomSelect = class {
         this._selectedLabelsId = mId + "-selected-labels";
         this._infoTextId = mId + "-info";
         this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
+        this._observer = new IntersectionObserver((payload) => {
+            if (this.detailsRef) {
+                const entry = payload.find(({ target }) => target === this.detailsRef);
+                if (entry && !entry.isIntersecting && this.detailsRef.open) {
+                    this.detailsRef.open = false;
+                }
+            }
+        });
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
@@ -613,19 +650,19 @@ const DBCustomSelect = class {
     }
     render() {
         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) => {
+        return (h("div", { key: '7400da8599cc1504f7231b7634d35aa977124cc4', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required), "data-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.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: 'adbc7c87ddc7ee3c18f968908a6c70237562d677', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '1f6c49037b713f8c86b80706c3d04a835a4b2bc9', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
-            }, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: () => 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) => {
+            }, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
+            ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
+            : null)), h("details", { key: '446bcf73bf7145aa477230787213d80a9adfac20', ref: (el) => {
                 this.detailsRef = el;
-            }, 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) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '4683060808c2b7c561e2707f6e6bde5a74170abf' }), 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
@@ -633,16 +670,16 @@ const DBCustomSelect = class {
             ? this.noResultsText
             : 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: 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
+            }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.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", 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)));
+            : 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: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '08eba6ae310a5049fb26036984c706da224d1dda', "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: '2ceb092c5680a395d3b8a2ec532bcd38df7a0ab9', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '997e41f87225827a6fd73fb1645f3f6e3a1fe569', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "detailsRef": ["watch0", "watch2"],
         "_id": ["watch1"],
         "_descByIds": ["watch2"],
         "showNoResults": ["watch3"],
-        "_options": ["watch3", "watch11"],
+        "_options": ["watch3"],
         "showSelectAll": ["watch4"],
         "amountOptions": ["watch4", "watch5", "watch9"],
         "multiple": ["watch4"],
@@ -650,7 +687,7 @@ const DBCustomSelect = class {
         "values": ["watch6"],
         "_values": ["watch7", "watch9", "watch11"],
         "validation": ["watch8"],
-        "options": ["watch10"],
+        "options": ["watch10", "watch11"],
         "_selectedOptions": ["watch12", "watch13"],
         "selectedType": ["watch12"],
         "amountText": ["watch12"],