@beeq/core 1.11.0-beta.2 → 1.11.1

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

@@ -378,18 +378,23 @@ export class BqSelect {
         if (this.disabled)
             return;
         this.debounceQuery?.cancel();
-        if (!isDefined(value)) {
+        const trimmedValue = value?.trim();
+        if (!isDefined(trimmedValue)) {
             this.clear();
+            return;
         }
-        else {
-            this.debounceQuery = debounce(() => {
-                this.options.forEach((item) => {
-                    const itemLabel = this.getOptionLabel(item).toLowerCase();
-                    item.hidden = !itemLabel.includes(value);
-                });
-            }, this.debounceTime);
-            this.debounceQuery();
-        }
+        this.debounceQuery = debounce(() => {
+            this.options.forEach((item) => {
+                // We want to get the entire inner text of the option element
+                // to allow searching across the entire text, not just the first level
+                const optionLabel = item.innerText?.trim().toLowerCase();
+                const optionValue = item.value?.toLowerCase();
+                // Show item if EITHER label OR value matches
+                const matches = optionLabel.includes(trimmedValue.toLowerCase()) || optionValue.includes(trimmedValue.toLowerCase());
+                item.hidden = !matches;
+            });
+        }, this.debounceTime);
+        this.debounceQuery();
         // The panel will close once a selection is made
         // so we need to make sure it's open when the user is typing and the query is not empty
         this.open = true;
@@ -428,7 +433,9 @@ export class BqSelect {
         this.hasHelperText = hasSlotContent(this.helperTextElem);
     };
     resetOptionsVisibility = () => {
-        this.options.forEach((item) => (item.hidden = false));
+        this.options.forEach((item) => {
+            item.hidden = false;
+        });
     };
     syncItemsFromValue = () => {
         const { internals, options, value } = this;
@@ -459,7 +466,7 @@ export class BqSelect {
                 option.selected = value.includes(option.value);
             }
             else {
-                option.selected = option.value.toLowerCase() === lowerCaseValue;
+                option.selected = option.value?.toLowerCase() === lowerCaseValue;
             }
         });
     };
@@ -481,7 +488,37 @@ export class BqSelect {
     getOptionLabel = (item) => {
         if (!item)
             return '';
-        return item.innerText.trim() ?? '';
+        if (item.displayValue) {
+            return item.displayValue.trim();
+        }
+        const defaultSlot = item.shadowRoot?.querySelector('slot:not([name])');
+        if (!defaultSlot) {
+            return item.innerText.trim();
+        }
+        const text = this.getItemTextContent(defaultSlot);
+        if (text)
+            return text;
+        // Fallback to innerText
+        return item.innerText.trim();
+    };
+    getItemTextContent = (slot) => {
+        const nodes = slot.assignedNodes({ flatten: true });
+        for (const node of nodes) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent?.trim();
+                if (text)
+                    return text;
+            }
+            // Element node - get first child text
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                for (const child of Array.from(node.childNodes)) {
+                    const text = child.textContent?.trim();
+                    if (text)
+                        return text;
+                }
+            }
+        }
+        return '';
     };
     get options() {
         return Array.from(this.el.querySelectorAll('bq-option'));
@@ -493,16 +530,16 @@ export class BqSelect {
     get displayTags() {
         return this.selectedOptions.map((item, index) => {
             if (index < this.maxTagsVisible || this.maxTagsVisible < 0) {
-                return (h("bq-tag", { key: item.value, removable: true, size: "xsmall", variant: "filled", onBqClose: (event) => {
+                return (h("bq-tag", { exportparts: "wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close", key: item.value,
+                    // Prevent the tag from closing the panel when clicked
+                    onBqClick: (ev) => ev.stopPropagation(), onBqClose: (event) => {
                         // NOTE: prevents triggering bqClose on parent
                         event.stopPropagation();
                         this.handleTagRemove(item);
-                    },
-                    // Prevent the tag from closing the panel when clicked
-                    onClick: (ev) => ev.stopPropagation(), exportparts: "wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close", part: "tag" }, this.getOptionLabel(item)));
+                    }, part: "tag", removable: true, size: "xsmall", variant: "filled" }, this.getOptionLabel(item)));
             }
             else if (index === this.maxTagsVisible) {
-                return (h("bq-tag", { key: "more", size: "xsmall", variant: "filled", exportparts: "wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close", part: "tag" }, "+", this.selectedOptions.length - index));
+                return (h("bq-tag", { exportparts: "wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close", key: "more", part: "tag", size: "xsmall", variant: "filled" }, "+", this.selectedOptions.length - index));
             }
             return null;
         });
@@ -521,19 +558,29 @@ export class BqSelect {
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: 'bbf912ea507a1a281113cbe76c2605dc980f3c89', class: "bq-select", part: "base" }, h("label", { key: '470f333b436122cea154ca92644ee5075279f062', id: labelId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, "aria-label": this.name || this.fallbackInputId, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '9a77f1c7dfd54e1d21f6d19b4f53988b0037ba73', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '23aac1a5508b7787f0265945dc37ec6f2330fed3', class: "bq-select__dropdown w-full", disableScrollLock: this.disableScrollLock, disabled: this.disabled, distance: this.distance, keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, exportparts: "panel" }, h("div", { key: '8298ee8993401383db6b3ceeec0a85ca12d051cd', class: {
+        return (h("div", { key: '919b73d9ce38b8cb69ef20aded428799f02cc895', class: "bq-select", part: "base" }, h("label", { key: '3cc4a13f7ab0c8b7e76bf41be582bbfe332f86d7', "aria-label": this.name || this.fallbackInputId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, id: labelId, part: "label", ref: (labelElem) => {
+                this.labelElem = labelElem;
+            } }, h("slot", { key: '5399f161d7b41dc2b7b1279ea3462ac5d612b0cd', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '9cb8818c2a2171a03aecafa73c3e119c524cd463', class: "bq-select__dropdown w-full", disabled: this.disabled, disableScrollLock: this.disableScrollLock, distance: this.distance, exportparts: "panel", keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy }, h("div", { key: '8cab01796bd14de8e5422ffd0bdced61181f6229', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '77ce85d6e993713608f16ea13719baa042eb640a', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'dcccd397df3f1d614bdc67505cf503d45b44ee37', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'e27ced3bbc801c6190e470096c188df4cb2211f4', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'cc9e4270929f8c4d80ce96d41c294c1773ba27d3', class: "bq-select__tags", part: "tags" }, h("slot", { key: '7c54e6055fdcf0c39dd13d6a29cfdf59daec0bcf', name: "tags" }, this.displayTags))), h("input", { key: '07256fff2d2bba3b039d3b3995fc3a40c1c1fb51', id: this.name || this.fallbackInputId, class: "bq-select__control--input flex-grow is-full", autoComplete: "off", autoCapitalize: "off", "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `bq-options-${this.name}`, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", disabled: this.disabled, form: this.form, name: this.name, placeholder: this.displayPlaceholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, role: "combobox", spellcheck: false, type: "text", value: this.displayValue, part: "input",
+            }, part: "control", slot: "trigger" }, h("span", { key: 'b809f899ca4321ed45f353f2f6bec2cf505067ff', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
+                this.prefixElem = spanElem;
+            } }, h("slot", { key: '17fa949788f26ba4e37823ba1cd4432ea74008b5', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'ee404bdf6eba46532bf5047824498eebcd3beb5e', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'ad689cf4d2fd15316212072b03c50ab20fb1faa4', class: "bq-select__tags", part: "tags" }, h("slot", { key: '947826e42948103681c138b2e0d002fa3cf622a6', name: "tags" }, this.displayTags))), h("input", { key: 'f7776379a2cbbdf726772e8a46367d1874ad7cd3', "aria-controls": `bq-options-${this.name}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", autoCapitalize: "off", autoComplete: "off", class: "bq-select__control--input is-full flex-grow", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, part: "input", placeholder: this.displayPlaceholder, readOnly: this.readonly, ref: (inputElem) => {
+                this.inputElem = inputElem;
+            }, required: this.required, role: "combobox",
             // Events
-            onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput })), this.hasClearIcon && (
+            spellcheck: false, type: "text", value: this.displayValue })), this.hasClearIcon && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: '8c7747a1067fd3836ef98968e8796f64bf84d751', class: "bq-select__control--clear ms-[--bq-select--gap]", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button", tabIndex: -1 }, h("slot", { key: '34a603d4a11a815f558cc3fb8ede4fabbec7634d', name: "clear-icon" }, h("bq-icon", { key: '2634bf14fcc94bf13fcb83c152cd78cf4e77c40d', name: "x-circle", class: "flex" })))), h("span", { key: '00f7ff2898ad17ea073b2526041b5ec61c686ffb', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '0d06f6aa448c0b6db6df9a87a7e61bad16a1f7b1', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '8d44056d4f923a5ca6cdd974529a6cba6f997ab4', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: '610636b535580db5954fcd184349cbc893187ed5', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: '1a5cc3382d22d7330638d8b0f73934eeb5e14e0d' }))), h("div", { key: '0d928ae774143970609208de5ad0cfe6e6c05e57', class: {
+        h("bq-button", { key: 'bafaa9b345a0a9f38cc470e807439a4f866f7e68', appearance: "text", "aria-label": this.clearButtonLabel, class: "bq-select__control--clear ms-[--bq-select--gap]", exportparts: "button", onBqClick: this.handleClearClick, part: "clear-btn", size: "small", tabIndex: -1 }, h("slot", { key: '349693ab10166f852d47290055e969335a6ac923', name: "clear-icon" }, h("bq-icon", { key: 'c9a781865e27d19f11ee8b26ba0103eba75348b3', class: "flex", name: "x-circle" })))), h("span", { key: '7c437ffcb350d373c89bff1a87b33d224d95feb6', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, part: "suffix", ref: (spanElem) => {
+                this.suffixElem = spanElem;
+            } }, h("slot", { key: '1ab78063ebb3969d4a6ad79db69866bbfae2b51d', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '5acd19de14317eed2a0ecc2512e0426ab9d248f2', class: "flex", name: "caret-down" })))), h("bq-option-list", { key: 'a0f940a8f8465eeb5148cde67eb9dc6d7404a4fb', "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, role: "listbox" }, h("slot", { key: '5f756255cd104806ebb0c3ee3982a828eac433f2' }))), h("div", { key: '244934ab7fb22967b35923724eaf2276ad009897', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '39ea668e38c9112ef62156ae539e25b615d57f34', name: "helper-text", onSlotchange: this.handleSlotChange }))));
+            }, part: "helper-text", ref: (divElem) => {
+                this.helperTextElem = divElem;
+            } }, h("slot", { key: '37b58965763703b4460d467366a92c7871132bed', name: "helper-text", onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "bq-select"; }
     static get encapsulation() { return "shadow"; }
@@ -553,7 +600,6 @@ export class BqSelect {
         return {
             "autofocus": {
                 "type": "boolean",
-                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -568,11 +614,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "autofocus"
             },
             "clearButtonLabel": {
                 "type": "string",
-                "attribute": "clear-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -588,11 +634,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "clear-button-label",
                 "defaultValue": "'Clear value'"
             },
             "debounceTime": {
                 "type": "number",
-                "attribute": "debounce-time",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -608,11 +654,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "debounce-time",
                 "defaultValue": "0"
             },
             "disableScrollLock": {
                 "type": "boolean",
-                "attribute": "disable-scroll-lock",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -628,11 +674,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disable-scroll-lock",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -648,11 +694,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "disableClear": {
                 "type": "boolean",
-                "attribute": "disable-clear",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -668,11 +714,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disable-clear",
                 "defaultValue": "false"
             },
             "distance": {
                 "type": "number",
-                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -688,11 +734,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "distance",
                 "defaultValue": "8"
             },
             "form": {
                 "type": "string",
-                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -707,11 +753,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "form"
             },
             "keepOpenOnSelect": {
                 "type": "boolean",
-                "attribute": "keep-open-on-select",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -727,11 +773,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "keep-open-on-select",
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -746,11 +792,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "name"
             },
             "maxTagsVisible": {
                 "type": "number",
-                "attribute": "max-tags-visible",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -766,11 +812,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-tags-visible",
                 "defaultValue": "2"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -786,11 +832,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "multiple",
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -806,11 +852,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "panelHeight": {
                 "type": "string",
-                "attribute": "panel-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -825,11 +871,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "panel-height"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -844,11 +890,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "placeholder"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -870,11 +916,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'bottom'"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -889,11 +935,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "readonly"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -908,11 +954,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "required"
             },
             "sameWidth": {
                 "type": "boolean",
-                "attribute": "same-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -928,11 +974,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "same-width",
                 "defaultValue": "true"
             },
             "skidding": {
                 "type": "number",
-                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -948,11 +994,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "skidding",
                 "defaultValue": "0"
             },
             "strategy": {
                 "type": "string",
-                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "'fixed' | 'absolute'",
@@ -968,11 +1014,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "strategy",
                 "defaultValue": "'fixed'"
             },
             "validationStatus": {
                 "type": "string",
-                "attribute": "validation-status",
                 "mutable": false,
                 "complexType": {
                     "original": "TInputValidation",
@@ -997,11 +1043,11 @@ export class BqSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "validation-status",
                 "defaultValue": "'none'"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "TSelectValue",
@@ -1009,7 +1055,7 @@ export class BqSelect {
                     "references": {
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     }
@@ -1022,7 +1068,8 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             }
         };
     }
@@ -1175,7 +1222,7 @@ export class BqSelect {
                         },
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     },