@beeq/core 1.8.4 → 1.9.0

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

@@ -2,8 +2,8 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, } from "@stencil/core";
-import { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, isString } from "../../shared/utils";
+import { h } from "@stencil/core";
+import { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, stringToArray, } from "../../shared/utils";
 /**
  * The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.
  *
@@ -118,6 +118,7 @@ export class BqSelect {
     prefixElem;
     suffixElem;
     debounceQuery;
+    debounceInput;
     fallbackInputId = 'select';
     // Reference to host HTML element
     // ===================================
@@ -197,12 +198,23 @@ export class BqSelect {
     // Prop lifecycle events
     // =======================
     handleValueChange() {
-        if (this.multiple && isString(this.value)) {
-            // NOTE: we ensure that value is an array, changing the value will trigger Watch to execute thus the return
-            this.value = Array.from(JSON.parse(String(this.value)));
+        // Early return for undefined/null values
+        if (isNil(this.value)) {
+            this.value = this.multiple ? [] : '';
+            this.internals.setFormValue(undefined);
+            this.syncItemsFromValue();
+            return;
+        }
+        // Handle multiple selection mode
+        if (this.multiple) {
+            this.value = stringToArray(this.value);
             this.internals.setFormValue(this.value.join(','));
+            this.syncItemsFromValue();
             return;
         }
+        // Handle single selection mode
+        this.value = String(this.value);
+        this.internals.setFormValue(this.value);
         this.syncItemsFromValue();
     }
     // Events section
@@ -216,6 +228,8 @@ export class BqSelect {
     bqFocus;
     /** Callback handler emitted when the selected value has changed */
     bqSelect;
+    /** Callback handler emitted when the Select input changes its value while typing */
+    bqInput;
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
@@ -272,18 +286,31 @@ export class BqSelect {
             return;
         const { multiple, inputElem, bqClear, el } = this;
         // Clear value and selected options
-        this.value = undefined;
+        this.value = '';
         this.selectedOptions = [];
         // Clear display value and input element if not multiple
         if (!multiple) {
-            this.displayValue = undefined;
-            inputElem.value = undefined;
+            this.displayValue = '';
+            inputElem.value = '';
         }
         // Update form value and reset options visibility
         this.resetOptionsVisibility();
         // Emit clear event
         bqClear.emit(el);
     }
+    /**
+     * Resets the Select input to a previous value.
+     *
+     * @param {TSelectValue} value - The value to reset the Select input to.
+     * @return {Promise<void>}
+     * @memberof BqSelect
+     */
+    async reset(value) {
+        if (isNil(value))
+            return;
+        this.value = value;
+        this.syncItemsFromValue();
+    }
     // Local methods
     // Internal business logic.
     // These methods cannot be called from the host element.
@@ -336,19 +363,18 @@ export class BqSelect {
         this.selectedOptions = Array.from(selectedOptionsSet);
         this.value = this.selectedOptions.map((item) => item.value);
     };
-    handleSearchFilter = (ev) => {
+    handleSearchFilter = (value) => {
         if (this.disabled)
             return;
         this.debounceQuery?.cancel();
-        const query = ev.target.value?.toLowerCase().trim();
-        if (!isDefined(query)) {
+        if (!isDefined(value)) {
             this.clear();
         }
         else {
             this.debounceQuery = debounce(() => {
                 this.options.forEach((item) => {
                     const itemLabel = this.getOptionLabel(item).toLowerCase();
-                    item.hidden = !itemLabel.includes(query);
+                    item.hidden = !itemLabel.includes(value);
                 });
             }, this.debounceTime);
             this.debounceQuery();
@@ -357,6 +383,20 @@ export class BqSelect {
         // so we need to make sure it's open when the user is typing and the query is not empty
         this.open = true;
     };
+    handleInput = (ev) => {
+        if (this.disabled)
+            return;
+        const { value } = ev.target;
+        this.debounceInput?.cancel();
+        this.debounceInput = debounce(() => {
+            const inputEvent = this.bqInput.emit({ value });
+            if (!inputEvent.defaultPrevented) {
+                // Continue with search filtering only if the event wasn't prevented
+                this.handleSearchFilter(value);
+            }
+        }, this.debounceTime);
+        this.debounceInput();
+    };
     handleClearClick = (ev) => {
         (async () => {
             await this.clear();
@@ -389,10 +429,8 @@ export class BqSelect {
             // Sync selected options for multiple selection mode
             this.selectedOptions = options.filter((option) => this.value?.includes(option.value));
         }
-        else {
-            // Sync display label for single selection mode
-            this.updateDisplayLabel();
-        }
+        // Always update display value and form value
+        this.updateDisplayLabel();
         internals.setFormValue(!isNil(value) ? `${value}` : undefined);
     };
     /**
@@ -429,7 +467,7 @@ export class BqSelect {
     };
     getOptionLabel = (item) => {
         if (!item)
-            return;
+            return '';
         return item.innerText.trim() ?? '';
     };
     get options() {
@@ -470,19 +508,19 @@ export class BqSelect {
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '5e44b83a85f6938cdbf5b5b0cf73b343efceb6a9', class: "bq-select", part: "base" }, h("label", { key: 'ca0b78359e16b66b75b55b8db86dae3ce87d7c09', 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: '483914810c82f7881a4f2d2a3f8a77872e5051b6', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '7716752c1d9ab32fc445c100200edcb621686fd8', class: "bq-select__dropdown w-full", 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: '01211150f4c2bfd0d5c6df507e43fae84448752f', class: {
+        return (h("div", { key: 'e35e24890bd19104389263f8894acf2c41c8187a', class: "bq-select", part: "base" }, h("label", { key: '844b0b36ce38685955d8a86496005a1b1f192328', 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: '0d6b74970ccca1e3f2a90e342009811630ba8806', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'bcdd59a87e8dcdad4cf8745b914f0f075e640cbf', class: "bq-select__dropdown w-full", 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: 'ed21456637eae3db7709df0190d007973d36b833', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '7dafaad97bd6194e8ed1fc86955d999075ee9320', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '80bf0f97d32b119bd98d95acfb664cd3062f9014', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: '5cf5e7ec36f0c7f44d22e3a8a389d64e28e697a0', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'fe418c58f8f115a8834502c4b6677f9e4c8ca4e5', class: "bq-select__tags", part: "tags" }, h("slot", { key: '7422992668def862a1687fd2f701d975b99d3352', name: "tags" }, this.displayTags))), h("input", { key: '1e28407314a524753705335919cf506bf4702f0b', 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: '3e4ca9629dc984d2ba989c648f73198af228f056', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'b78a369e3a25b0fdcfe8ee9b261c68cccf6758f0', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'b0071ca2c696b4e9c7487992ae8fcd91d960d550', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '163f9726c7e5a16982f272a61474872d3176ff3f', class: "bq-select__tags", part: "tags" }, h("slot", { key: '5158e01695ef3163eac77fac4564e95be690f00d', name: "tags" }, this.displayTags))), h("input", { key: '52539f694ab628d606ef6744a8a3cc36ea3d3cee', 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",
             // Events
-            onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleSearchFilter })), this.hasClearIcon && (
+            onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput })), 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: 'ff96b89aeafb2acc542ce11477f27b300a66ca80', 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: 'a15a6415944cbee2208306c7cddb67e5d6a37d06', name: "clear-icon" }, h("bq-icon", { key: '7f776f8c2a5d226a95c9af30525586d3bdfd0b50', name: "x-circle", class: "flex" })))), h("span", { key: '3535c47119a77de29a2b5ea4dcb3fd174d5da62f', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '3c917b70bd43ffc311703578eeed190ba40579fa', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '175b61a120c1475ec87cbd24d615e3512602ec11', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: '492b3f57b45cf28ac4a3bfb6f16da321641e16fd', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: '3737c1cb94c3dac93882f8f9678fb1aedc9b1be5' }))), h("div", { key: '6108d4384d82c4ee959bfdff969b1ebdb27f3084', class: {
+        h("bq-button", { key: '1fb90179db5d4e181c3e71a0f4915811bf50360e', 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: '223c40a006b7c411617cad57594bf77ee5024d69', name: "clear-icon" }, h("bq-icon", { key: 'd5283c3c50a47e8331ae7685c6b908cd1103f890', name: "x-circle", class: "flex" })))), h("span", { key: '54ad1a8fd54e1a222592d2c350b2a4622abdc611', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'ea46a8e2622ad8f1cd37c670af7efff266ca8a28', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'ae849775777ed7ac51e4da87a51973a591306320', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: '8bc1795e7e6a752d1f8b495546e0c18e84b76df7', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: 'bb8f93be2f520a514a9f458b4c9794143fc7a7ac' }))), h("div", { key: '5c0319bc96533b89133e17a9c32421ad0207ca7f', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'ff8cda8d9c5e057e36b70d079cf96d32b249179d', name: "helper-text", onSlotchange: this.handleSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '15c8dd752535e8f7850ce7c35f0c72310c234e4b', name: "helper-text", onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "bq-select"; }
     static get encapsulation() { return "shadow"; }
@@ -502,6 +540,7 @@ export class BqSelect {
         return {
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -516,11 +555,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": true
             },
             "clearButtonLabel": {
                 "type": "string",
+                "attribute": "clear-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -535,12 +574,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-button-label",
                 "reflect": true,
                 "defaultValue": "'Clear value'"
             },
             "debounceTime": {
                 "type": "number",
+                "attribute": "debounce-time",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -555,12 +594,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce-time",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -575,12 +614,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disableClear": {
                 "type": "boolean",
+                "attribute": "disable-clear",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -595,12 +634,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disable-clear",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "distance": {
                 "type": "number",
+                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -615,12 +654,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "distance",
                 "reflect": true,
                 "defaultValue": "8"
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -635,11 +674,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": true
             },
             "keepOpenOnSelect": {
                 "type": "boolean",
+                "attribute": "keep-open-on-select",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -654,12 +693,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "keep-open-on-select",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -674,11 +713,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true
             },
             "maxTagsVisible": {
                 "type": "number",
+                "attribute": "max-tags-visible",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -693,12 +732,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-tags-visible",
                 "reflect": false,
                 "defaultValue": "2"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -713,12 +752,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -733,12 +772,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "panelHeight": {
                 "type": "string",
+                "attribute": "panel-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -753,11 +792,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "panel-height",
                 "reflect": true
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -772,11 +811,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": true
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -797,12 +836,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'bottom'"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -817,11 +856,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": true
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -836,11 +875,11 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": true
             },
             "sameWidth": {
                 "type": "boolean",
+                "attribute": "same-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -855,12 +894,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "same-width",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "skidding": {
                 "type": "number",
+                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -875,12 +914,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "skidding",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "strategy": {
                 "type": "string",
+                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "'fixed' | 'absolute'",
@@ -895,12 +934,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "strategy",
                 "reflect": true,
                 "defaultValue": "'fixed'"
             },
             "validationStatus": {
                 "type": "string",
+                "attribute": "validation-status",
                 "mutable": false,
                 "complexType": {
                     "original": "TInputValidation",
@@ -924,12 +963,12 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation-status",
                 "reflect": true,
                 "defaultValue": "'none'"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "TSelectValue",
@@ -950,7 +989,6 @@ export class BqSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             }
         };
@@ -1047,6 +1085,21 @@ export class BqSelect {
                         }
                     }
                 }
+            }, {
+                "method": "bqInput",
+                "name": "bqInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback handler emitted when the Select input changes its value while typing"
+                },
+                "complexType": {
+                    "original": "{ value: string | number | string[] }",
+                    "resolved": "{ value: string | number | string[]; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -1073,6 +1126,41 @@ export class BqSelect {
                             "text": "BqSelect"
                         }]
                 }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "(value: TSelectValue) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | string[]",
+                            "docs": "- The value to reset the Select input to."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TSelectValue": {
+                            "location": "local",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
+                            "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the Select input to a previous value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value - The value to reset the Select input to."
+                        }, {
+                            "name": "return",
+                            "text": undefined
+                        }, {
+                            "name": "memberof",
+                            "text": "BqSelect"
+                        }]
+                }
             }
         };
     }