@db-ux/wc-core-components 2.0.9 → 2.1.0

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

@@ -34,6 +34,7 @@ export class DBCustomSelect {
         this._hasNoOptions = false;
         this._documentClickListenerCallbackId = undefined;
         this._internalChangeTimestamp = 0;
+        this._searchValue = undefined;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
         this.satisfyReact = function satisfyReact(event) {
@@ -358,11 +359,24 @@ export class DBCustomSelect {
         }
     }
     handleSearch(event) {
-        event.stopPropagation();
-        const filterText = event.target.value;
+        let filterText;
+        if (typeof event === "string") {
+            filterText = event;
+        }
+        else {
+            event.stopPropagation();
+            if (this.search) {
+                this.search.emit(event);
+            }
+            filterText = event.target.value;
+            this._searchValue = filterText;
+        }
         if (!this.options || !filterText || filterText.length === 0) {
             this._options = this.options;
         }
+        else if (this.searchFilter) {
+            this._options = this.options.filter((option) => this.searchFilter(option, filterText));
+        }
         else {
             this._options = this.options.filter((option) => !option.isGroupTitle &&
                 this.getOptionLabel(option)
@@ -527,6 +541,16 @@ export class DBCustomSelect {
         this.watch10Fn();
     }
     watch11Fn() {
+        this._searchValue = this.searchValue;
+        if (this.searchValue) {
+            const sValue = this.searchValue; // <- workaround for Angular
+            this.handleSearch(sValue);
+        }
+    }
+    watch11() {
+        this.watch11Fn();
+    }
+    watch12Fn() {
         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) => {
@@ -538,12 +562,23 @@ export class DBCustomSelect {
             });
         }
     }
-    watch11() {
-        this.watch11Fn();
+    watch12() {
+        this.watch12Fn();
     }
-    watch12Fn() {
+    watch13Fn() {
         var _a, _b, _c;
+        if (this.selectedLabels) {
+            this._selectedLabels = this.selectedLabels;
+            return;
+        }
         if ((_a = this._selectedOptions) === null || _a === void 0 ? void 0 : _a.length) {
+            if (this.transformSelectedLabels) {
+                // We need to add this to another ``const`` for Angular generated output to work
+                const selectedOptions = this._selectedOptions;
+                const transformFn = this.transformSelectedLabels;
+                this._selectedLabels = transformFn(selectedOptions);
+                return;
+            }
             if (this.selectedType === "amount") {
                 this._selectedLabels = this.amountText
                     ? this.amountText
@@ -557,35 +592,35 @@ export class DBCustomSelect {
             this._selectedLabels = "";
         }
     }
-    watch12() {
-        this.watch12Fn();
+    watch13() {
+        this.watch13Fn();
     }
-    watch13Fn() {
+    watch14Fn() {
         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);
         }
     }
-    watch13() {
-        this.watch13Fn();
+    watch14() {
+        this.watch14Fn();
     }
-    watch14Fn() {
+    watch15Fn() {
         if (this.selectAllRef) {
             this.selectAllRef.indeterminate = Boolean(this.selectAllIndeterminate);
         }
     }
-    watch14() {
-        this.watch14Fn();
+    watch15() {
+        this.watch15Fn();
     }
-    watch15Fn() {
+    watch16Fn() {
         var _a;
         this._invalidMessage =
             this.invalidMessage ||
                 ((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
                 DEFAULT_INVALID_MESSAGE;
     }
-    watch15() {
-        this.watch15Fn();
+    watch16() {
+        this.watch16Fn();
     }
     componentDidLoad() {
         var _a;
@@ -618,24 +653,25 @@ export class DBCustomSelect {
         this.watch13Fn();
         this.watch14Fn();
         this.watch15Fn();
+        this.watch16Fn();
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: 'e5c84bd53166b1c2c326628705bcc7b210373257', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: 'f4df6e0c633b5ccb844b4e34da6d3ffdf2734eba', 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: '6ad1c58cc832e3b305e08291b628038827d85268', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'dc027579b87dae8efd8d35a03984283b4de335ed', 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: 'ee59cf9ef87cf98fd3dc8337472b9490eaf4427a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'a3c8f3bd67f9eed5ec0df5602ab17f4842870b8a', 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: (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: 'a0eb8cd1ebf421ee0cce62f2add79f063b3af8ec', ref: (el) => {
+            : null)), h("details", { key: 'e35e2532b4946d98b2b588783e8275b13bd240b4', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '73b0eb2d2e0ee85a5fa03e8a167f6e29b49bee3f' }), 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: 'fd289344b7b69ac8ad0259393fefe97e73408d15' }), 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
+            }, 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
                 : undefined, onInput: (event) => this.handleSearch(event) }))) : null, this._hasNoOptions || this.showLoading ? (h("db-infotext", { id: this._infoTextId, icon: this._hasNoOptions ? undefined : "circular_arrows", semantic: this._hasNoOptions ? "warning" : "informational" }, (_h = (this._hasNoOptions
             ? this.noResultsText
@@ -643,7 +679,7 @@ 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.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: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '9cc02a4b34f7ec437a89c500b1cb05edf19de421', "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: 'd0843cbcf9ef1b0505f5fe0cc0c79d9568d094a7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '609e7ad21eb1b0c3b131f15ec77b12e584dc7ba7', "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: '545397c50574d5b3798269f18aa797078c785d44', "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: '43731ce611cc55c5a4a482ca9d2af33224d40e52', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'f79eb37128f2859a2aa6fa2beec81353cbe11b39', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-custom-select"; }
     static get properties() {
@@ -946,6 +982,80 @@ export class DBCustomSelect {
                 "getter": false,
                 "setter": false
             },
+            "searchValue": {
+                "type": "string",
+                "attribute": "search-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"searchValue\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "selectedLabels": {
+                "type": "string",
+                "attribute": "selected-labels",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"selectedLabels\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "transformSelectedLabels": {
+                "type": "unknown",
+                "attribute": "transform-selected-labels",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"transformSelectedLabels\"]",
+                    "resolved": "(selectedOptions?: CustomSelectOptionType[]) => string",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "selectedType": {
                 "type": "string",
                 "attribute": "selected-type",
@@ -1095,6 +1205,30 @@ export class DBCustomSelect {
                 "getter": false,
                 "setter": false
             },
+            "searchFilter": {
+                "type": "unknown",
+                "attribute": "search-filter",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCustomSelectProps[\"searchFilter\"]",
+                    "resolved": "(option: CustomSelectOptionType, filterText: string) => boolean",
+                    "references": {
+                        "DBCustomSelectProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/custom-select/model.ts::DBCustomSelectProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "className": {
                 "type": "string",
                 "attribute": "classname",
@@ -1725,6 +1859,7 @@ export class DBCustomSelect {
             "_hasNoOptions": {},
             "_documentClickListenerCallbackId": {},
             "_internalChangeTimestamp": {},
+            "_searchValue": {},
             "selectAllChecked": {},
             "selectAllIndeterminate": {}
         };
@@ -1775,6 +1910,21 @@ export class DBCustomSelect {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
@@ -1830,35 +1980,44 @@ export class DBCustomSelect {
                 "propName": "options",
                 "methodName": "watch10"
             }, {
-                "propName": "options",
+                "propName": "searchValue",
                 "methodName": "watch11"
+            }, {
+                "propName": "options",
+                "methodName": "watch12"
             }, {
                 "propName": "_values",
-                "methodName": "watch11"
+                "methodName": "watch12"
             }, {
                 "propName": "_selectedOptions",
-                "methodName": "watch12"
+                "methodName": "watch13"
             }, {
                 "propName": "selectedType",
-                "methodName": "watch12"
+                "methodName": "watch13"
             }, {
                 "propName": "amountText",
-                "methodName": "watch12"
+                "methodName": "watch13"
             }, {
-                "propName": "_selectedOptions",
+                "propName": "selectedLabels",
                 "methodName": "watch13"
             }, {
-                "propName": "selectAllIndeterminate",
+                "propName": "transformSelectedLabels",
+                "methodName": "watch13"
+            }, {
+                "propName": "_selectedOptions",
                 "methodName": "watch14"
+            }, {
+                "propName": "selectAllIndeterminate",
+                "methodName": "watch15"
             }, {
                 "propName": "selectAllRef",
-                "methodName": "watch14"
+                "methodName": "watch15"
             }, {
                 "propName": "selectRef",
-                "methodName": "watch15"
+                "methodName": "watch16"
             }, {
                 "propName": "invalidMessage",
-                "methodName": "watch15"
+                "methodName": "watch16"
             }];
     }
 }