@db-ux/wc-core-components 4.4.3 → 4.5.1

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

@@ -323,10 +323,14 @@ export class DBCustomSelect {
             else if (this.detailsRef.open && event) {
                 if (event.relatedTarget) {
                     const relatedTarget = event.relatedTarget;
-                    if (!this.detailsRef.contains(relatedTarget)) {
+                    // We close if the focus is on something like a <button> etc. which is not inside the <details> element
+                    // Inside a <dialog> there is some focus problem because of the top-layer
+                    // We do not want to focus <dialog> itself
+                    if (!this.detailsRef.contains(relatedTarget) &&
+                        relatedTarget.localName !== "dialog") {
                         // 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);
+                        void delay(() => (this.detailsRef.open = false), 1);
                     }
                 }
             }
@@ -464,6 +468,20 @@ export class DBCustomSelect {
             (_a = this.detailsRef.querySelector("summary")) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
+    resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `custom-select-${uuid()}`;
+        this._id = mId;
+        this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
+        this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+        this._selectId = mId + DEFAULT_SELECT_ID_SUFFIX;
+        this._labelId = mId + DEFAULT_LABEL_ID_SUFFIX;
+        this._summaryId = mId + "-summary";
+        this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;
+        this._selectedLabelsId = mId + "-selected-labels";
+        this._infoTextId = mId + "-info";
+    }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -501,14 +519,23 @@ export class DBCustomSelect {
         }
     }
     watch0Fn() {
-        if (this.detailsRef) {
-            this.detailsRef.addEventListener("focusout", (event) => this.handleClose(event));
+        var _a, _b;
+        if ((_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            this.resetIds();
         }
     }
     watch0() {
         this.watch0Fn();
     }
     watch1Fn() {
+        if (this.detailsRef) {
+            this.detailsRef.addEventListener("focusout", (event) => this.handleClose(event));
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
         if (this._id) {
             const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;
             this._labelId = this._id + DEFAULT_LABEL_ID_SUFFIX;
@@ -524,10 +551,10 @@ export class DBCustomSelect {
             }
         }
     }
-    watch1() {
-        this.watch1Fn();
+    watch2() {
+        this.watch2Fn();
     }
-    watch2Fn() {
+    watch3Fn() {
         var _a;
         if (this.detailsRef) {
             const summary = this.detailsRef.querySelector("summary");
@@ -536,10 +563,10 @@ export class DBCustomSelect {
             }
         }
     }
-    watch2() {
-        this.watch2Fn();
+    watch3() {
+        this.watch3Fn();
     }
-    watch3Fn() {
+    watch4Fn() {
         if (this.showNoResults !== undefined) {
             this._hasNoOptions = this.showNoResults;
         }
@@ -547,24 +574,24 @@ export class DBCustomSelect {
             this._hasNoOptions = this._options.length === 0;
         }
     }
-    watch3() {
-        this.watch3Fn();
-    }
-    watch4Fn() {
-        var _a;
-        this.selectAllEnabled = Boolean(this.multiple && ((_a = this.showSelectAll) !== null && _a !== void 0 ? _a : this.amountOptions > 5));
-    }
     watch4() {
         this.watch4Fn();
     }
     watch5Fn() {
         var _a;
-        this.searchEnabled = (_a = this.showSearch) !== null && _a !== void 0 ? _a : this.amountOptions > 9;
+        this.selectAllEnabled = Boolean(this.multiple && ((_a = this.showSelectAll) !== null && _a !== void 0 ? _a : this.amountOptions > 5));
     }
     watch5() {
         this.watch5Fn();
     }
     watch6Fn() {
+        var _a;
+        this.searchEnabled = (_a = this.showSearch) !== null && _a !== void 0 ? _a : this.amountOptions > 9;
+    }
+    watch6() {
+        this.watch6Fn();
+    }
+    watch7Fn() {
         var _a;
         const v = this.values;
         if (Array.isArray(v)) {
@@ -576,18 +603,18 @@ export class DBCustomSelect {
             this._values = [];
         }
     }
-    watch6() {
-        this.watch6Fn();
+    watch7() {
+        this.watch7Fn();
     }
-    watch7Fn() {
+    watch8Fn() {
         if (this.selectRef) {
             this.handleValidation();
         }
     }
-    watch7() {
-        this.watch7Fn();
+    watch8() {
+        this.watch8Fn();
     }
-    watch8Fn() {
+    watch9Fn() {
         if (this.selectRef) {
             let controller = this.abortController;
             if (!controller) {
@@ -606,16 +633,16 @@ export class DBCustomSelect {
             }, controller.signal);
         }
     }
-    watch8() {
-        this.watch8Fn();
-    }
-    watch9Fn() {
-        this._validity = this.validation;
-    }
     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;
@@ -629,29 +656,29 @@ export class DBCustomSelect {
             this.selectAllIndeterminate = true;
         }
     }
-    watch10() {
-        this.watch10Fn();
+    watch11() {
+        this.watch11Fn();
     }
-    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;
     }
-    watch11() {
-        this.watch11Fn();
+    watch12() {
+        this.watch12Fn();
     }
-    watch12Fn() {
+    watch13Fn() {
         this._searchValue = this.searchValue;
         if (this.searchValue) {
             const sValue = this.searchValue; // <- workaround for Angular
             this.handleSearch(sValue);
         }
     }
-    watch12() {
-        this.watch12Fn();
+    watch13() {
+        this.watch13Fn();
     }
-    watch13Fn() {
+    watch14Fn() {
         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) => {
@@ -663,10 +690,10 @@ export class DBCustomSelect {
             });
         }
     }
-    watch13() {
-        this.watch13Fn();
+    watch14() {
+        this.watch14Fn();
     }
-    watch14Fn() {
+    watch15Fn() {
         var _a, _b, _c;
         if (this.selectedLabels) {
             this._selectedLabels = this.selectedLabels;
@@ -693,50 +720,39 @@ export class DBCustomSelect {
             this._selectedLabels = "";
         }
     }
-    watch14() {
-        this.watch14Fn();
+    watch15() {
+        this.watch15Fn();
     }
-    watch15Fn() {
+    watch16Fn() {
         var _a, _b;
         if (this.amountChange) {
             this.amountChange.emit((_b = (_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
         }
     }
-    watch15() {
-        this.watch15Fn();
+    watch16() {
+        this.watch16Fn();
     }
-    watch16Fn() {
+    watch17Fn() {
         if (this.selectAllRef) {
             this.selectAllRef.indeterminate = Boolean(this.selectAllIndeterminate);
         }
     }
-    watch16() {
-        this.watch16Fn();
+    watch17() {
+        this.watch17Fn();
     }
-    watch17Fn() {
+    watch18Fn() {
         var _a;
         this._invalidMessage =
             this.invalidMessage ||
                 ((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
                 DEFAULT_INVALID_MESSAGE;
     }
-    watch17() {
-        this.watch17Fn();
+    watch18() {
+        this.watch18Fn();
     }
     componentDidLoad() {
-        var _a;
         this.enableAttributePassing(this._ref, "db-custom-select");
-        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `custom-select-${uuid()}`;
-        this._id = mId;
-        this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
-        this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
-        this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
-        this._selectId = mId + DEFAULT_SELECT_ID_SUFFIX;
-        this._labelId = mId + DEFAULT_LABEL_ID_SUFFIX;
-        this._summaryId = mId + "-summary";
-        this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;
-        this._selectedLabelsId = mId + "-selected-labels";
-        this._infoTextId = mId + "-info";
+        this.resetIds();
         this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         if (typeof window !== "undefined" && "IntersectionObserver" in window) {
             this._observer = new IntersectionObserver((payload) => {
@@ -766,6 +782,7 @@ export class DBCustomSelect {
         this.watch15Fn();
         this.watch16Fn();
         this.watch17Fn();
+        this.watch18Fn();
     }
     disconnectedCallback() {
         var _a;
@@ -773,19 +790,19 @@ export class DBCustomSelect {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: 'bb7f2bd039a1d7f97bca1408e4c462c029963128', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: '04344ea736f4311c09459970f6c743516c0a45ba', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: 'cf9b29fb5c955bd22928803a491d7a76463c1c42', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'ab1c6f7adafe07b6d91cb12abb058e41faa27c82', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: 'ed856ad29b0f840ebe37c8edf275267efc780f2c', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '093be2cd13041a45a95664e083125f5e4e8c2689', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, "data-custom-validity": this._validity, 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: 'ba829c0fb72fe74896a927f06cb9f8005621524b', ref: (el) => {
+            : null)), h("details", { key: 'e0617c55fb94a72432719b485d922d87cca58d40', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '90e00cda7265025b8299ff92bfac46f2f242c899' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '4a4754177ce637816734d8e195d1d34b0e4a9707' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -795,16 +812,16 @@ export class DBCustomSelect {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '5cc4a48735e41b769c36e059d613f8c83b641ba1', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'ac47ebdaff258f7e19f2dbf447054369a919633c', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'c568834fa90ab614cad1dcdc4de89daf25df1ffb', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: 'ea3f5751609a4383f9d381cfbc7947a4b0192880', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'd8733256a74ba4876d4080a27798f01264d6472d', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '4ca046467d7da79ac48f0e1dddf2712ef2a93074', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-custom-select"; }
     static get properties() {
         return {
-            "id": {
+            "invalidMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"id\"]",
+                    "original": "DBCustomSelectProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -824,13 +841,13 @@ export class DBCustomSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
+                "attribute": "invalid-message"
             },
-            "invalidMessage": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCustomSelectProps[\"invalidMessage\"]",
+                    "original": "DBCustomSelectProps[\"id\"]",
                     "resolved": "string",
                     "references": {
                         "DBCustomSelectProps": {
@@ -850,7 +867,31 @@ export class DBCustomSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "invalid-message"
+                "attribute": "id"
+            },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
+                            "referenceLocation": "DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             },
             "message": {
                 "type": "string",
@@ -2142,104 +2183,110 @@ export class DBCustomSelect {
     }
     static get watchers() {
         return [{
-                "propName": "detailsRef",
+                "propName": "id",
                 "methodName": "watch0"
             }, {
-                "propName": "_id",
-                "methodName": "watch1"
+                "propName": "propOverrides?.id",
+                "methodName": "watch0"
             }, {
                 "propName": "detailsRef",
+                "methodName": "watch1"
+            }, {
+                "propName": "_id",
                 "methodName": "watch2"
+            }, {
+                "propName": "detailsRef",
+                "methodName": "watch3"
             }, {
                 "propName": "_descByIds",
-                "methodName": "watch2"
+                "methodName": "watch3"
             }, {
                 "propName": "showNoResults",
-                "methodName": "watch3"
+                "methodName": "watch4"
             }, {
                 "propName": "showLoading",
-                "methodName": "watch3"
+                "methodName": "watch4"
             }, {
                 "propName": "_options",
-                "methodName": "watch3"
+                "methodName": "watch4"
             }, {
                 "propName": "showSelectAll",
-                "methodName": "watch4"
+                "methodName": "watch5"
             }, {
                 "propName": "amountOptions",
-                "methodName": "watch4"
+                "methodName": "watch5"
             }, {
                 "propName": "multiple",
-                "methodName": "watch4"
+                "methodName": "watch5"
             }, {
                 "propName": "showSearch",
-                "methodName": "watch5"
+                "methodName": "watch6"
             }, {
                 "propName": "amountOptions",
-                "methodName": "watch5"
+                "methodName": "watch6"
             }, {
                 "propName": "values",
-                "methodName": "watch6"
+                "methodName": "watch7"
             }, {
                 "propName": "_values",
-                "methodName": "watch7"
+                "methodName": "watch8"
             }, {
                 "propName": "selectRef",
-                "methodName": "watch7"
+                "methodName": "watch8"
             }, {
                 "propName": "selectRef",
-                "methodName": "watch8"
+                "methodName": "watch9"
             }, {
                 "propName": "validation",
-                "methodName": "watch9"
+                "methodName": "watch10"
             }, {
                 "propName": "_values",
-                "methodName": "watch10"
+                "methodName": "watch11"
             }, {
                 "propName": "amountOptions",
-                "methodName": "watch10"
+                "methodName": "watch11"
             }, {
                 "propName": "options",
-                "methodName": "watch11"
+                "methodName": "watch12"
             }, {
                 "propName": "searchValue",
-                "methodName": "watch12"
+                "methodName": "watch13"
             }, {
                 "propName": "options",
-                "methodName": "watch13"
+                "methodName": "watch14"
             }, {
                 "propName": "_values",
-                "methodName": "watch13"
+                "methodName": "watch14"
             }, {
                 "propName": "_selectedOptions",
-                "methodName": "watch14"
+                "methodName": "watch15"
             }, {
                 "propName": "selectedType",
-                "methodName": "watch14"
+                "methodName": "watch15"
             }, {
                 "propName": "amountText",
-                "methodName": "watch14"
+                "methodName": "watch15"
             }, {
                 "propName": "selectedLabels",
-                "methodName": "watch14"
+                "methodName": "watch15"
             }, {
                 "propName": "transformSelectedLabels",
-                "methodName": "watch14"
+                "methodName": "watch15"
             }, {
                 "propName": "_selectedOptions",
-                "methodName": "watch15"
+                "methodName": "watch16"
             }, {
                 "propName": "selectAllIndeterminate",
-                "methodName": "watch16"
+                "methodName": "watch17"
             }, {
                 "propName": "selectAllRef",
-                "methodName": "watch16"
+                "methodName": "watch17"
             }, {
                 "propName": "selectRef",
-                "methodName": "watch17"
+                "methodName": "watch18"
             }, {
                 "propName": "invalidMessage",
-                "methodName": "watch17"
+                "methodName": "watch18"
             }];
     }
 }

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

@@ -48,9 +48,10 @@ export class DBCustomSelectDropdown {
         this.enableAttributePassing(this._ref, "db-custom-select-dropdown");
     }
     render() {
-        return (h("article", { key: 'ac22786c8688e2f979e626155cb8dea54a5380b7', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        var _a, _b;
+        return (h("article", { key: '978958659b0f3b0fbdc011abfb079086ca90a6d5', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-width": this.width }, h("slot", { key: '2257275bfc7a9f75e944d61e8afc7493770478b5' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width }, h("slot", { key: '21a6a67f222cb5eaf262ad4f3bd8cde81e4ba5c0' })));
     }
     static get is() { return "db-custom-select-dropdown"; }
     static get properties() {
@@ -81,6 +82,30 @@ export class DBCustomSelectDropdown {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectDropdownProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCustomSelectDropdownProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select-dropdown/model.ts::DBCustomSelectDropdownProps",
+                            "referenceLocation": "DBCustomSelectDropdownProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,

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

@@ -45,9 +45,10 @@ export class DBCustomSelectFormField {
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
     }
     render() {
-        return (h("summary", { key: '4ade22e5e7d664747ba44a25cea8778ee76de2c0', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("summary", { key: '960e6eb6b0f7f46884e26a820f3ae38e13d57f33', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '457f965d451fcd6e03199b4273a2e0ebb6b85bb1' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'e109b45a0935d878434ae5e330d55fdab7fb438d' })));
     }
     static get is() { return "db-custom-select-form-field"; }
     static get properties() {
@@ -78,6 +79,30 @@ export class DBCustomSelectFormField {
                 "reflect": false,
                 "attribute": "id"
             },
+            "propOverrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectFormFieldProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
+                    "references": {
+                        "DBCustomSelectFormFieldProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select-form-field/model.ts::DBCustomSelectFormFieldProps",
+                            "referenceLocation": "DBCustomSelectFormFieldProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "mutable": false,