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

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

@@ -0,0 +1,655 @@
+'use strict';
+
+var index = require('./index-DBEtsnky.js');
+var index$1 = require('./index-DeqKGVDx.js');
+var constants = require('./constants-CTtyzyuo.js');
+
+const DBCustomSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onSelect = index.createEvent(this, "onSelect");
+        this.onAmountChange = index.createEvent(this, "onAmountChange");
+        this.onDropdownToggle = index.createEvent(this, "onDropdownToggle");
+        this.showClearSelection = true;
+        this.clearSelectionLabel = "Clear selection";
+        this._name = undefined;
+        this._id = undefined;
+        this._messageId = undefined;
+        this._validMessageId = undefined;
+        this._invalidMessageId = undefined;
+        this._selectId = undefined;
+        this._labelId = undefined;
+        this._summaryId = undefined;
+        this._placeholderId = undefined;
+        this._infoTextId = undefined;
+        this._validity = "no-validation";
+        this._descByIds = "";
+        this._selectedLabels = "";
+        this._selectedLabelsId = undefined;
+        this._voiceOverFallback = "";
+        this._selectedOptions = [];
+        this.selectAllEnabled = false;
+        this.searchEnabled = false;
+        this.amountOptions = 0;
+        this._values = [];
+        this._options = [];
+        this._hasNoOptions = false;
+        this._internalChangeTimestamp = -1;
+        this._externalChangeTimestamp = -1;
+        this.selectAllChecked = false;
+        this.selectAllIndeterminate = false;
+    }
+    handleDropdownToggle(event) {
+        if (this.onDropdownToggle) {
+            this.onDropdownToggle.emit(event);
+        }
+    }
+    getNativeSelectValue() {
+        var _a, _b;
+        if ((_a = this._values) === null || _a === void 0 ? void 0 : _a.length) {
+            return (_b = this._values.at(0)) !== null && _b !== void 0 ? _b : "";
+        }
+        return "";
+    }
+    setDescById(descId) {
+        var _a;
+        const descByIds = [];
+        if (descId) {
+            descByIds.push(descId);
+        }
+        if (this._selectedLabelsId && ((_a = this._selectedLabels) === null || _a === void 0 ? void 0 : _a.length)) {
+            descByIds.push(this._selectedLabelsId);
+        }
+        this._descByIds = descByIds.join(" ");
+    }
+    getSelectAllLabel() {
+        var _a, _b, _c;
+        if (!this.selectAllRef)
+            return (_a = this.selectAllLabel) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL;
+        if (this.selectAllRef.indeterminate || !this.selectAllChecked) {
+            return (_b = this.selectAllLabel) !== null && _b !== void 0 ? _b : constants.DEFAULT_LABEL;
+        }
+        else {
+            return (_c = this.deSelectAllLabel) !== null && _c !== void 0 ? _c : constants.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);
+        }
+        return false;
+    }
+    getOptionKey(option) {
+        var _a, _b;
+        return ((_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : index$1.uuid()).toString();
+    }
+    getTagRemoveLabel(index) {
+        return this.removeTagsTexts && this.removeTagsTexts.length > index
+            ? this.removeTagsTexts.at(index)
+            : `${constants.DEFAULT_REMOVE} ${this._selectedOptions
+                ? this.getOptionLabel(this._selectedOptions[index])
+                : ""}`;
+    }
+    handleTagRemove(option, event) {
+        event.stopPropagation();
+        this.handleSelect(option.value);
+        this.handleSummaryFocus();
+    }
+    handleAutoPlacement() {
+        if (this.detailsRef) {
+            const dropdown = this.detailsRef.querySelector("article");
+            if (dropdown) {
+                index$1.delay(() => {
+                    index$1.handleDataOutside(dropdown);
+                }, 100);
+            }
+        }
+    }
+    handleArrowDownUp(event) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) {
+            if (document) {
+                const activeElement = document.activeElement;
+                if (activeElement) {
+                    // 1. we check if we are currently focusing a checkbox in the dropdown
+                    const isCheckbox = activeElement.getAttribute("type") === "checkbox" ||
+                        activeElement.getAttribute("type") === "radio";
+                    if (isCheckbox) {
+                        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();
+                            }
+                            else {
+                                // We are on the last checkbox we move to the top checkbox
+                                this.handleFocusFirstDropdownCheckbox(activeElement);
+                            }
+                        }
+                        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();
+                            }
+                            else if (this.detailsRef.querySelector(`input[type="checkbox"]`) !==
+                                activeElement) {
+                                // We are on the top list checkbox but there is a select all checkbox as well
+                                this.handleFocusFirstDropdownCheckbox(activeElement);
+                            }
+                            else {
+                                // We are on the top checkbox, we need to move to the search
+                                // or to the last checkbox
+                                const search = index$1.getSearchInput(this.detailsRef);
+                                if (search) {
+                                    index$1.delay(() => {
+                                        search.focus();
+                                    }, 100);
+                                }
+                                else {
+                                    const checkboxList = Array.from((_d = this.detailsRef) === null || _d === void 0 ? void 0 : _d.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                    if (checkboxList.length) {
+                                        (_e = checkboxList.at(-1)) === null || _e === void 0 ? void 0 : _e.focus();
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        // 2. If we are on the search, and press up we go back to summary and close
+                        if (activeElement.getAttribute("type") === "search" &&
+                            (event.key === "ArrowUp" || event.key === "ArrowLeft")) {
+                            this.handleClose("close");
+                            this.handleSummaryFocus();
+                        }
+                        else {
+                            // 3. Otherwise, we need to move to the first checkbox
+                            this.handleFocusFirstDropdownCheckbox(activeElement);
+                        }
+                    }
+                }
+            }
+            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
+            this.handleAutoPlacement();
+            if (this.detailsRef) {
+                this.detailsRef.open = true;
+            }
+            this.handleOpenByKeyboardFocus();
+            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)) {
+            this.handleClose("close");
+            this.handleSummaryFocus();
+        }
+        else if (event.key === "ArrowDown" ||
+            event.key === "ArrowUp" ||
+            event.key === "ArrowLeft" ||
+            event.key === "ArrowRight") {
+            this.handleArrowDownUp(event);
+        }
+    }
+    handleClose(event) {
+        if (this.detailsRef) {
+            if (event === "close") {
+                this.detailsRef.open = false;
+                this.handleSummaryFocus();
+            }
+            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;
+                }
+            }
+        }
+    }
+    handleDocumentClose(event) {
+        var _a;
+        if (((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) && !this.detailsRef.contains(event.target)) {
+            this.detailsRef.open = false;
+        }
+    }
+    handleSelect(value) {
+        var _a, _b;
+        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);
+                }
+                else {
+                    this._values = [...(this._values || []), value];
+                }
+            }
+            else {
+                this._values = [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 = [];
+        }
+        else {
+            this._values = this.options
+                ? this.options
+                    .filter((option) => !option.isGroupTitle)
+                    .map((option) => { var _a; return (_a = option.value) !== null && _a !== void 0 ? _a : ""; })
+                : [];
+        }
+        this._internalChangeTimestamp = new Date().getTime();
+    }
+    handleFocusFirstDropdownCheckbox(activeElement) {
+        if (this.detailsRef) {
+            const checkboxes = Array.from(this.detailsRef.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+            if (checkboxes.length) {
+                const first = checkboxes.at(0);
+                const checkbox = first === activeElement && checkboxes.length > 1
+                    ? checkboxes.at(1)
+                    : first;
+                if (checkbox) {
+                    index$1.delay(() => {
+                        // Takes some time until element can be focused
+                        checkbox.focus();
+                    }, 100);
+                }
+            }
+        }
+    }
+    handleOpenByKeyboardFocus(onlySearch) {
+        if (this.detailsRef) {
+            // Focus search if possible
+            const search = index$1.getSearchInput(this.detailsRef);
+            if (search) {
+                index$1.delay(() => {
+                    // Takes some time until element can be focused
+                    search.focus();
+                }, 100);
+            }
+            else if (!onlySearch) {
+                // Focus first checkbox otherwise
+                this.handleFocusFirstDropdownCheckbox();
+            }
+        }
+    }
+    handleSearch(event) {
+        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() {
+        this._values = [];
+        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();
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        var _a;
+        this._name = (_a = this.name) !== null && _a !== void 0 ? _a : this._id;
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this._id) {
+            const messageId = this._id + constants.DEFAULT_MESSAGE_ID_SUFFIX;
+            this._labelId = this._id + constants.DEFAULT_LABEL_ID_SUFFIX;
+            this._selectId = this._id + constants.DEFAULT_SELECT_ID_SUFFIX;
+            this._validMessageId = this._id + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+            this._invalidMessageId = this._id + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+            this._placeholderId = this._id + constants.DEFAULT_PLACEHOLDER_ID_SUFFIX;
+            if (index$1.stringPropVisible(this.message, this.showMessage)) {
+                this.setDescById(messageId);
+            }
+            else {
+                this.setDescById();
+            }
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.detailsRef) {
+            const summary = this.detailsRef.querySelector("summary");
+            if (summary) {
+                summary.setAttribute("aria-describedby", this._descByIds || "");
+            }
+        }
+    }
+    watch2() {
+        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;
+        }
+        else if (this._options) {
+            this._hasNoOptions = this._options.length === 0;
+        }
+    }
+    watch4() {
+        this.watch4Fn();
+    }
+    watch5Fn() {
+        this.selectAllEnabled = Boolean(this.multiple && (this.showSelectAll || this.amountOptions > 5));
+    }
+    watch5() {
+        this.watch5Fn();
+    }
+    watch6Fn() {
+        this.searchEnabled = this.showSearch || this.amountOptions > 9;
+    }
+    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 : []);
+            }
+        }
+    }
+    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();
+        }
+    }
+    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 (index$1.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 : constants.DEFAULT_INVALID_MESSAGE;
+                index$1.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 (index$1.hasVoiceOver()) {
+                this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : constants.DEFAULT_VALID_MESSAGE;
+                index$1.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;
+            this.selectAllIndeterminate = false;
+        }
+        else if (((_b = this._values) === null || _b === void 0 ? void 0 : _b.length) === this.amountOptions) {
+            this.selectAllIndeterminate = false;
+            this.selectAllChecked = true;
+        }
+        else if (this._values) {
+            this.selectAllIndeterminate = true;
+        }
+    }
+    watch11() {
+        this.watch11Fn();
+    }
+    watch12Fn() {
+        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();
+    }
+    watch13Fn() {
+        var _a, _b;
+        if ((_a = this._options) === null || _a === void 0 ? void 0 : _a.length) {
+            this._selectedOptions = (_b = this._options) === null || _b === void 0 ? void 0 : _b.filter((option) => {
+                var _a, _b;
+                if (!option.value || !((_a = this._values) === null || _a === void 0 ? void 0 : _a["includes"])) {
+                    return false;
+                }
+                return !option.isGroupTitle && ((_b = this._values) === null || _b === void 0 ? void 0 : _b.includes(option.value));
+            });
+        }
+    }
+    watch13() {
+        this.watch13Fn();
+    }
+    watch14Fn() {
+        var _a, _b, _c;
+        if ((_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) {
+            if (this.selectedType === "amount") {
+                this._selectedLabels = this.amountText
+                    ? this.amountText
+                    : `${(_b = this._selectedOptions) === null || _b === void 0 ? void 0 : _b.length} ${constants.DEFAULT_SELECTED}`;
+            }
+            else {
+                this._selectedLabels = (_c = this._selectedOptions) === null || _c === void 0 ? void 0 : _c.map((option) => this.getOptionLabel(option)).join(", ");
+            }
+        }
+        else {
+            this._selectedLabels = "";
+        }
+    }
+    watch14() {
+        this.watch14Fn();
+    }
+    watch15Fn() {
+        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);
+        }
+    }
+    watch15() {
+        this.watch15Fn();
+    }
+    watch16Fn() {
+        if (this.selectAllRef) {
+            this.selectAllRef.indeterminate = Boolean(this.selectAllIndeterminate);
+        }
+    }
+    watch16() {
+        this.watch16Fn();
+    }
+    componentDidLoad() {
+        var _a;
+        this.enableAttributePassing(this._ref, "db-custom-select");
+        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `custom-select-${index$1.uuid()}`;
+        this._id = mId;
+        this._messageId = mId + constants.DEFAULT_MESSAGE_ID_SUFFIX;
+        this._validMessageId = mId + constants.DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessageId = mId + constants.DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+        this._selectId = mId + constants.DEFAULT_SELECT_ID_SUFFIX;
+        this._labelId = mId + constants.DEFAULT_LABEL_ID_SUFFIX;
+        this._summaryId = mId + "-summary";
+        this._placeholderId = mId + constants.DEFAULT_PLACEHOLDER_ID_SUFFIX;
+        this._selectedLabelsId = mId + "-selected-labels";
+        this._infoTextId = mId + "-info";
+        if (document) {
+            document.addEventListener("click", this.handleDocumentClose);
+        }
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
+        this.watch4Fn();
+        this.watch5Fn();
+        this.watch6Fn();
+        this.watch7Fn();
+        this.watch8Fn();
+        this.watch9Fn();
+        this.watch10Fn();
+        this.watch11Fn();
+        this.watch12Fn();
+        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 (index.h("div", { key: '7bcd0b065dd492b5e1e00c4b22948143d947552a', class: index$1.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": index$1.getBooleanAsString(this.required), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": index$1.getHideProp(this.showIcon) }, index.h("label", { key: '1ddb2c43327a9f046728c57d3da93ef4872f9e3c', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: 'c69f10fe071860ff5478aedc614565a6387d5d13', 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) => (index.h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option)))))), index.h("details", { key: 'd3229a4f6bda6ba5f1c64d3e60c48fd35aec95f5', ref: (el) => {
+                this.detailsRef = el;
+            }, open: this.open, "aria-disabled": this.disabled, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: 'd6c5cfde8195408d10dd586242d27e676be3f9ab' }), this.options ? (index.h(index.Fragment, null, index.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) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_d = this._selectedOptions) === null || _d === void 0 ? void 0 : _d.map((option, index$1) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(index$1), onRemove: (event) => {
+                this.handleTagRemove(option, event);
+            }, key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", showLabel: false, label: (_e = this.searchLabel) !== null && _e !== void 0 ? _e : constants.DEFAULT_LABEL, placeholder: (_f = this.searchPlaceholder) !== null && _f !== void 0 ? _f : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
+                ? this._infoTextId
+                : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (index.h("db-infotext", { id: this._infoTextId, icon: this._hasNoOptions ? undefined : "circular_arrows", semantic: this._hasNoOptions ? "warning" : "informational" }, (_g = (this._hasNoOptions
+            ? this.noResultsText
+            : this.loadingText)) !== null && _g !== void 0 ? _g : constants.DEFAULT_MESSAGE)) : (index.h(index.Fragment, null, this.selectAllEnabled ? (index.h("div", null, index.h("div", { class: "db-checkbox db-custom-select-list-item" }, index.h("label", null, index.h("input", { type: "checkbox", value: "select-all", ref: (el) => {
+                this.selectAllRef = el;
+            }, form: this._id, checked: this.selectAllChecked, onChange: () => this.handleSelectAll() }), this.getSelectAllLabel())))) : null, index.h("db-custom-select-list", { multiple: this.multiple, label: (_h = this.label) !== null && _h !== void 0 ? _h : constants.DEFAULT_LABEL }, (_j = this._options) === null || _j === void 0 ? void 0 : _j.map((option) => (index.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
+            ? this.getOptionLabel(option)
+            : null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", onClick: () => {
+                this.handleClose("close");
+            } }, (_k = this.mobileCloseButtonText) !== null && _k !== void 0 ? _k : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_l = this.showClearSelection) !== null && _l !== void 0 ? _l : true) && ((_m = this._values) === null || _m === void 0 ? void 0 : _m.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, onClick: () => this.handleClearAll() }, this.clearSelectionLabel, index.h("db-tooltip", { placement: "top" }, this.clearSelectionLabel))) : null, index.h("span", { key: '4d15f0a5d709cb329a3c18b907b5e9cf952a6252', "aria-hidden": index$1.getBooleanAsString(true), id: this._placeholderId }, (_o = this.placeholder) !== null && _o !== void 0 ? _o : this.label), this.message ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, index.h("db-infotext", { key: '8e63397ef220c396c55d7d228fbc7e0ee7664688', size: "small", semantic: "successful", id: this._validMessageId }, (_p = this.validMessage) !== null && _p !== void 0 ? _p : constants.DEFAULT_VALID_MESSAGE), index.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) || constants.DEFAULT_INVALID_MESSAGE)), index.h("span", { key: '28db5cbc1feca0e5738148bb87e0df78d596e975', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+    }
+    static get watchers() { return {
+        "name": ["watch0"],
+        "_id": ["watch0", "watch1"],
+        "detailsRef": ["watch2", "watch3"],
+        "_descByIds": ["watch2"],
+        "showNoResults": ["watch4"],
+        "_options": ["watch4", "watch13"],
+        "showSelectAll": ["watch5"],
+        "amountOptions": ["watch5", "watch6", "watch11"],
+        "multiple": ["watch5"],
+        "showSearch": ["watch6"],
+        "_externalChangeTimestamp": ["watch7"],
+        "_internalChangeTimestamp": ["watch7"],
+        "onSelect": ["watch7"],
+        "values": ["watch8"],
+        "_values": ["watch9", "watch11", "watch13"],
+        "validation": ["watch10"],
+        "options": ["watch12"],
+        "_selectedOptions": ["watch14", "watch15"],
+        "selectedType": ["watch14"],
+        "amountText": ["watch14"],
+        "selectAllIndeterminate": ["watch16"],
+        "selectAllRef": ["watch16"]
+    }; }
+};
+
+exports.db_custom_select = DBCustomSelect;
+//# sourceMappingURL=db-custom-select.entry.cjs.js.map
+
+//# sourceMappingURL=db-custom-select.cjs.entry.js.map