@beeq/core 1.7.0 → 1.8.0-beta.1

package/dist/collection/components/icon/helper/request.js

@@ -5,33 +5,37 @@
 /* -------------------------------------------------------------------------- */
 /*                             Icon request helper                            */
 /* -------------------------------------------------------------------------- */
-import { isString } from "../../../shared/utils";
+import { isNil, isString } from "../../../shared/utils";
 const requests = new Map();
 const fetchSvg = async (url, sanitize) => {
-    let req;
-    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-        const rsp = await fetch(url);
-        if (rsp.ok) {
-            return rsp.text().then((svgContent) => {
-                if (svgContent && sanitize !== false)
-                    svgContent = validateContent(svgContent);
-                iconContent.set(url, svgContent || '');
-            });
+    if (typeof fetch === 'undefined' || typeof document === 'undefined')
+        return;
+    if (requests.has(url))
+        return requests.get(url);
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            iconContent.set(url, '');
+            return;
         }
+        let svgContent = (await response.text()) || '';
+        if (svgContent && sanitize !== false)
+            svgContent = validateContent(svgContent);
+        iconContent.set(url, svgContent);
+    }
+    catch (error) {
+        console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);
         iconContent.set(url, '');
-        // cache for the same requests
-        requests.set(url, req);
-        return req;
     }
-    iconContent.set(url, '');
-    return Promise.resolve();
 };
 export const iconContent = new Map();
 export const getSvgContent = async (url, sanitize) => {
-    // see if we already have a request for this SVG file
-    const req = await requests.get(url);
-    if (!req)
-        return fetchSvg(url, sanitize);
+    let req = requests.get(url);
+    // NOTE: if the request does not exists we will cache it
+    if (isNil(req)) {
+        req = fetchSvg(url, sanitize);
+        requests.set(url, req);
+    }
     return req;
 };
 export const validateContent = (svgContent) => {

package/dist/collection/components/icon/helper/request.js.map

@@ -1 +1 @@
-{"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/helper/request.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  let req: Promise<unknown>;\n\n  if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n    const rsp = await fetch(url);\n    if (rsp.ok) {\n      return rsp.text().then((svgContent) => {\n        if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n        iconContent.set(url, svgContent || '');\n      });\n    }\n    iconContent.set(url, '');\n    // cache for the same requests\n    requests.set(url, req);\n    return req;\n  }\n\n  iconContent.set(url, '');\n  return Promise.resolve();\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  // see if we already have a request for this SVG file\n  const req = await requests.get(url);\n  if (!req) return fetchSvg(url, sanitize);\n\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n"]}
+{"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/helper/request.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  if (typeof fetch === 'undefined' || typeof document === 'undefined') return;\n\n  if (requests.has(url)) return requests.get(url);\n\n  try {\n    const response = await fetch(url);\n\n    if (!response.ok) {\n      iconContent.set(url, '');\n      return;\n    }\n\n    let svgContent = (await response.text()) || '';\n\n    if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n\n    iconContent.set(url, svgContent);\n  } catch (error) {\n    console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n    iconContent.set(url, '');\n  }\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  let req = requests.get(url);\n\n  // NOTE: if the request does not exists we will cache it\n  if (isNil(req)) {\n    req = fetchSvg(url, sanitize);\n    requests.set(url, req);\n  }\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n"]}

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

@@ -3,7 +3,7 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { h } from "@stencil/core";
-import { debounce, hasSlotContent, isDefined, isHTMLElement } from "../../shared/utils";
+import { debounce, hasSlotContent, isDefined, isHTMLElement, isNil } from "../../shared/utils";
 /**
  * @part base - The component's base wrapper.
  * @part button - The native HTML button used under the hood in the clear button.
@@ -48,6 +48,7 @@ export class BqInput {
             if (!isHTMLElement(ev.target, 'input'))
                 return;
             this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;
+            this.internals.setFormValue(`${this.value}`);
             this.debounceBqInput = debounce(() => {
                 this.bqInput.emit({ value: this.value, el: this.el });
             }, this.debounceTime);
@@ -59,18 +60,29 @@ export class BqInput {
             if (!isHTMLElement(ev.target, 'input'))
                 return;
             this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;
+            this.internals.setFormValue(`${this.value}`);
             this.bqChange.emit({ value: this.value, el: this.el });
         };
-        this.handleClearClick = (ev) => {
+        this.handleClear = () => {
             if (this.disabled)
                 return;
-            this.inputElem.value = '';
-            this.value = this.inputElem.value;
-            this.bqClear.emit(this.el);
-            this.bqInput.emit({ value: this.value, el: this.el });
-            this.bqChange.emit({ value: this.value, el: this.el });
-            this.inputElem.focus();
+            const { inputElem, internals } = this;
+            // Clear input element value
+            inputElem.value = '';
+            this.value = inputElem.value;
+            // Update associated form control value
+            internals.setFormValue(undefined);
+        };
+        this.handleClearClick = (ev) => {
             ev.stopPropagation();
+            this.handleClear();
+            const { bqClear, bqChange, bqInput, el, inputElem } = this;
+            // Emit events
+            bqClear.emit(el);
+            bqInput.emit({ value: this.value, el });
+            bqChange.emit({ value: this.value, el });
+            // Refocus input element
+            inputElem.focus();
         };
         this.handleLabelSlotChange = () => {
             this.hasLabel = hasSlotContent(this.labelElem);
@@ -118,37 +130,45 @@ export class BqInput {
     handleValueChange() {
         if (Array.isArray(this.value)) {
             this.hasValue = this.value.some((val) => val.length > 0);
+            this.internals.setFormValue(this.value.join(','));
             return;
         }
         this.hasValue = isDefined(this.value);
+        this.internals.setFormValue(`${this.value}`);
     }
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
-    componentDidLoad() {
+    componentWillLoad() {
         this.handleValueChange();
     }
+    formResetCallback() {
+        if (isNil(this.value))
+            return;
+        this.handleClear();
+    }
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '1ae2deecd4fa19bd61218aa9d19f904484920f41', class: "bq-input", part: "base" }, h("label", { key: '9de5803ed7c8d8a8a891f9e18956ea35c826c8f4', class: { 'bq-input--label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '7f0c67232346e6f3b4406a85dc32f8cff07bf92f', name: "label", onSlotchange: this.handleLabelSlotChange })), h("div", { key: '81fc67ce7d417e3bd058b002084b5d4caf4d34b3', class: {
+        return (h("div", { key: 'c9d184b8abfbaebda3478f7b8892c7d2bf024fdc', class: "bq-input", part: "base" }, h("label", { key: 'a938804cb78f78b65c1c2139d90fd98e5edecb52', class: { 'bq-input--label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '37c407ab1b0399be8371629431d839f138f751df', name: "label", onSlotchange: this.handleLabelSlotChange })), h("div", { key: '130305745ed36bbe2d1012508f3ae2653b6794b2', class: {
                 'bq-input--control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control" }, h("span", { key: '21bfb1ba4c4696c903d89912a9792a516229065e', class: { 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '6c1e6fadf86ac71e4625a76ef4db47145f7f0536', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: '2a9f590bebc2e4ee3c499f9b886fbb8e93c5dd4e', id: this.name || this.fallbackInputId, class: "bq-input--control__input", "aria-disabled": this.disabled ? 'true' : 'false', autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, disabled: this.disabled, form: this.form, inputMode: this.inputmode, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, part: "input",
+            }, part: "control" }, h("span", { key: '59c8d5f28373cae3741f4420da1fbc4744869806', class: { 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '4f6a705b9a4e7deb46e334c11c6b242b091afec6', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: '6c238b5c2329d3f77dd4cb8a0aac9ffbfc937aad', id: this.name || this.fallbackInputId, class: "bq-input--control__input", "aria-disabled": this.disabled ? 'true' : 'false', autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, disabled: this.disabled, form: this.form, inputMode: this.inputmode, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, part: "input",
             // Events
             onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onInput: this.handleInput }), this.hasValue && !this.disabled && !this.disableClear && (
         // 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: 'bf70483fba3d6702235ef13cc233264d54e2ee56', class: "bq-input--control__clear ms-[--bq-input--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'c373c061079d75103a196ad5e02abc5d1b6b6419', name: "clear-icon" }, h("bq-icon", { key: 'd95569e369733dd13595fbe1e48ae52dea01f86f', name: "x-circle", class: "flex" })))), h("span", { key: 'ef24c4e495c264be6568fcd69eb26bdb8759cd45', class: { 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '387273312fe4b196a2ab360af65a625761396a74', name: "suffix", onSlotchange: this.handleSuffixSlotChange }))), h("div", { key: '1d053fcabb1ea861b787af8a6e859592d04a1ed7', class: {
+        h("bq-button", { key: 'bae89f316a8c7cfb04d1bcff8df6e418c93fa838', class: "bq-input--control__clear ms-[--bq-input--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'd00287e78d20d2fdcbac8aa89a3bb30c40c6b8f1', name: "clear-icon" }, h("bq-icon", { key: '9be1f57ece6cea670a5c7adc76fb70feb66663c5', name: "x-circle", class: "flex" })))), h("span", { key: '93421c6d1e061e2a19315d1d8aadbcc2a01f19c3', class: { 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'ccb589bdc3b227467885d728c82f3fcedacb1695', name: "suffix", onSlotchange: this.handleSuffixSlotChange }))), h("div", { key: 'b0374c936b4e3839ed936ade23ad59aa3c69cf9a', class: {
                 [`bq-input--helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '71c49f2521db11b80a1c0dc8ae4466411a732ea6', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'a0a8c8d546efa959d6126e96ddf97a702263026f', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
     }
     static get is() { return "bq-input"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["./scss/bq-input.scss"]
@@ -703,5 +723,6 @@ export class BqInput {
                 "methodName": "handleValueChange"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=bq-input.js.map

package/dist/collection/components/input/bq-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-input.js","sourceRoot":"","sources":["../../../../../../src/components/input/bq-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG/F,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAEnG;;;;;;;;;;GAUG;AAQH,MAAM,OAAO,OAAO;;QAWV,oBAAe,GAAG,OAAO,CAAC;QAqLlC,YAAY;QACZ,iBAAiB;QAEjB,qBAAqB;QACrB,iDAAiD;QACjD,wBAAwB;QACxB,gCAAgC;QAChC,gDAAgD;QAChD,kDAAkD;QAElD,gBAAgB;QAChB,2BAA2B;QAC3B,wDAAwD;QACxD,0DAA0D;QAElD,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;;YAClC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAA,IAAI,CAAC,eAAe,0CAAE,MAAM,EAAE,CAAC;YAE/B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;gBAAE,OAAO;YAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YAEhF,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;gBACnC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;YACxD,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,EAAS,EAAE,EAAE;YACnC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;gBAAE,OAAO;YAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YAEhF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QACzD,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAe,EAAE,EAAE;YAC7C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YAElC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;YACtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;YAEvB,EAAE,CAAC,eAAe,EAAE,CAAC;QACvB,CAAC,CAAC;QAEM,0BAAqB,GAAG,GAAG,EAAE;YACnC,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,CAAC,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,CAAC,CAAC;QAEM,+BAA0B,GAAG,GAAG,EAAE;YACxC,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,CAAC,CAAC;6BAxPuB,KAAK;wBACV,KAAK;yBACJ,KAAK;yBACL,KAAK;wBACN,KAAK;8BAUyB,KAAK;4BAMP,KAAK;2BAMA,KAAK;;gCAMb,aAAa;4BAMF,CAAC;wBAMX,KAAK;4BAGV,KAAK;;;;;;;;;;;;;oBA4DF,MAAM;gCAYY,MAAM;;;IAKpE,wBAAwB;IACxB,0BAA0B;IAG1B,iBAAiB;QACf,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACzD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IA2BD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAkFD,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM;YAE/B,8DACE,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC7D,OAAO,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EAC1C,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,EAChD,IAAI,EAAC,OAAO;gBAEZ,6DAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAAI,CACzD;YAER,4DACE,KAAK,EAAE;oBACL,mBAAmB,EAAE,IAAI;oBACzB,CAAC,cAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI;oBAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,EACD,IAAI,EAAC,SAAS;gBAGd,6DACE,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACxE,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAC/C,IAAI,EAAC,QAAQ;oBAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC5D;gBAEP,8DACE,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EACrC,KAAK,EAAC,0BAA0B,mBACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,OAAO;oBACZ,SAAS;oBACT,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB;gBAED,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI;gBACxD,oEAAoE;gBACpE,sDAAsD;gBACtD,kEACE,KAAK,EAAC,sDAAsD,EAC5D,UAAU,EAAC,MAAM,gBACL,IAAI,CAAC,gBAAgB,EACjC,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,IAAI,EAAC,WAAW,EAChB,WAAW,EAAC,QAAQ;oBAEpB,6DAAM,IAAI,EAAC,YAAY;wBACrB,gEAAS,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,GAAG,CACnC,CACG,CACb;gBAED,6DACE,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACxE,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAC/C,IAAI,EAAC,QAAQ;oBAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC5D,CACH;YAEN,4DACE,KAAK,EAAE;oBACL,CAAC,oCAAoC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI;oBACnE,SAAS,EAAE,CAAC,IAAI,CAAC,aAAa;iBAC/B,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EACjD,IAAI,EAAC,aAAa;gBAElB,6DAAM,IAAI,EAAC,aAAa,EAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,GAAI,CACtE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TInputType, TInputValidation, TInputValue } from './bq-input.types';\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /**\n   * Controls whether or not the input field should have autocorrect enabled.\n   * Possible values are 'on' and 'off'.\n   */\n  @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (Array.isArray(this.value)) {\n      this.hasValue = this.value.some((val) => val.length > 0);\n      return;\n    }\n\n    this.hasValue = isDefined(this.value);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleValueChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    if (this.disabled) return;\n\n    this.inputElem.value = '';\n    this.value = this.inputElem.value;\n\n    this.bqClear.emit(this.el);\n    this.bqInput.emit({ value: this.value, el: this.el });\n    this.bqChange.emit({ value: this.value, el: this.el });\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private handleHelperTextSlotChange = () => {\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            id={this.name || this.fallbackInputId}\n            class=\"bq-input--control__input\"\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            disabled={this.disabled}\n            form={this.form}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            ref={(inputElem) => (this.inputElem = inputElem)}\n            readOnly={this.readonly}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n            part=\"input\"\n            // Events\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n          />\n          {/* Clear Button */}\n          {this.hasValue && !this.disabled && !this.disableClear && (\n            // The clear button will be visible as long as the input has a value\n            // and the parent group is hovered or has focus-within\n            <bq-button\n              class=\"bq-input--control__clear ms-[--bq-input--gap] hidden\"\n              appearance=\"text\"\n              aria-label={this.clearButtonLabel}\n              size=\"small\"\n              onBqClick={this.handleClearClick}\n              part=\"clear-btn\"\n              exportparts=\"button\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon name=\"x-circle\" class=\"flex\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            ref={(spanElem) => (this.suffixElem = spanElem)}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-input.js","sourceRoot":"","sources":["../../../../../../src/components/input/bq-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TInputType, TInputValidation, TInputValue } from './bq-input.types';\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /**\n   * Controls whether or not the input field should have autocorrect enabled.\n   * Possible values are 'on' and 'off'.\n   */\n  @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (Array.isArray(this.value)) {\n      this.hasValue = this.value.some((val) => val.length > 0);\n      this.internals.setFormValue(this.value.join(','));\n      return;\n    }\n\n    this.hasValue = isDefined(this.value);\n    this.internals.setFormValue(`${this.value}`);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleValueChange();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.handleClear();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    this.internals.setFormValue(`${this.value}`);\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    this.internals.setFormValue(`${this.value}`);\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClear = () => {\n    if (this.disabled) return;\n\n    const { inputElem, internals } = this;\n\n    // Clear input element value\n    inputElem.value = '';\n    this.value = inputElem.value;\n\n    // Update associated form control value\n    internals.setFormValue(undefined);\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    this.handleClear();\n\n    const { bqClear, bqChange, bqInput, el, inputElem } = this;\n    // Emit events\n    bqClear.emit(el);\n    bqInput.emit({ value: this.value, el });\n    bqChange.emit({ value: this.value, el });\n    // Refocus input element\n    inputElem.focus();\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private handleHelperTextSlotChange = () => {\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            id={this.name || this.fallbackInputId}\n            class=\"bq-input--control__input\"\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            disabled={this.disabled}\n            form={this.form}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            ref={(inputElem) => (this.inputElem = inputElem)}\n            readOnly={this.readonly}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n            part=\"input\"\n            // Events\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n          />\n          {/* Clear Button */}\n          {this.hasValue && !this.disabled && !this.disableClear && (\n            // The clear button will be visible as long as the input has a value\n            // and the parent group is hovered or has focus-within\n            <bq-button\n              class=\"bq-input--control__clear ms-[--bq-input--gap] hidden\"\n              appearance=\"text\"\n              aria-label={this.clearButtonLabel}\n              size=\"small\"\n              onBqClick={this.handleClearClick}\n              part=\"clear-btn\"\n              exportparts=\"button\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon name=\"x-circle\" class=\"flex\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            ref={(spanElem) => (this.suffixElem = spanElem)}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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, getTextContent, hasSlotContent, isDefined, isHTMLElement, isString, } from "../../shared/utils";
+import { h, } from "@stencil/core";
+import { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, isString } from "../../shared/utils";
 /**
  * @part base - The component's base wrapper.
  * @part button - The native HTML button used under the hood in the clear button.
@@ -125,34 +125,58 @@ export class BqSelect {
             this.options.forEach((item) => (item.hidden = false));
         };
         this.syncItemsFromValue = () => {
-            var _a;
-            const items = this.options;
-            if (!items.length)
+            const { internals, options, value } = this;
+            if (!options.length)
                 return;
             // Sync selected state of the BqOption elements
-            this.options.forEach((option) => {
-                if (this.multiple && Array.isArray(this.value)) {
-                    option.selected = this.value.includes(option.value);
+            this.syncSelectedOptionsState();
+            if (this.multiple) {
+                // Sync selected options for multiple selection mode
+                this.selectedOptions = options.filter((option) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(option.value); });
+            }
+            else {
+                // Sync display label for single selection mode
+                this.updateDisplayLabel();
+            }
+            internals.setFormValue(!isNil(value) ? `${value}` : undefined);
+        };
+        /**
+         * Syncs the selected state of the BqOption elements which value is included in the `value` property.
+         * Notice that value can be a string or an array of strings.
+         *
+         * @private
+         * @memberof BqSelect
+         */
+        this.syncSelectedOptionsState = () => {
+            const { options, multiple, value } = this;
+            const lowerCaseValue = String(value).toLowerCase();
+            options.forEach((option) => {
+                if (multiple && Array.isArray(value)) {
+                    option.selected = value.includes(option.value);
                 }
                 else {
-                    option.selected = option.value.toLowerCase() === String(this.value).toLowerCase();
+                    option.selected = option.value.toLowerCase() === lowerCaseValue;
                 }
             });
-            if (!this.multiple) {
-                // Sync display label
-                const checkedItem = items.filter((item) => item.value === this.value)[0];
-                this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';
-                this.inputElem.value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : '';
-            }
-            else {
-                this.selectedOptions = this.options.filter((item) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item.value); });
-            }
+        };
+        /**
+         * Updates the display value of the input element based on the selected option.
+         *
+         * @private
+         * @memberof BqSelect
+         */
+        this.updateDisplayLabel = () => {
+            const { value, options, inputElem } = this;
+            const checkedItem = options.find((item) => item.value === value);
+            const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';
+            inputElem.value = displayValue;
+            this.displayValue = displayValue;
         };
         this.getOptionLabel = (item) => {
-            const slot = item.shadowRoot.querySelector('slot:not([name])');
-            if (!slot)
+            var _a;
+            if (!item)
                 return;
-            return getTextContent(slot);
+            return (_a = item.innerText.trim()) !== null && _a !== void 0 ? _a : '';
         };
         this.displayValue = undefined;
         this.hasHelperText = false;
@@ -190,6 +214,7 @@ export class BqSelect {
         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)));
+            this.internals.setFormValue(this.value.join(','));
             return;
         }
         this.syncItemsFromValue();
@@ -208,6 +233,16 @@ export class BqSelect {
         }
         this.handleValueChange();
     }
+    formAssociatedCallback() {
+        this.internals.role = 'combobox';
+        this.internals.ariaExpanded = this.open ? 'true' : 'false';
+    }
+    async formResetCallback() {
+        if (isNil(this.value))
+            return;
+        this.internals.setValidity({});
+        this.clear();
+    }
     // Listeners
     // ==============
     handleOpenChange(ev) {
@@ -236,14 +271,19 @@ export class BqSelect {
     async clear() {
         if (this.disabled)
             return;
+        const { multiple, inputElem, bqClear, el } = this;
+        // Clear value and selected options
         this.value = undefined;
         this.selectedOptions = [];
-        if (!this.multiple) {
+        // Clear display value and input element if not multiple
+        if (!multiple) {
             this.displayValue = undefined;
-            this.inputElem.value = undefined;
+            inputElem.value = undefined;
         }
+        // Update form value and reset options visibility
         this.resetOptionsVisibility();
-        this.bqClear.emit(this.el);
+        // Emit clear event
+        bqClear.emit(el);
     }
     get options() {
         return Array.from(this.el.querySelectorAll('bq-option'));
@@ -283,23 +323,24 @@ export class BqSelect {
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '7fe45a350c812326e4c0d354a10428526acf3dab', class: "bq-select", part: "base" }, h("label", { key: '0fc5472d31a357442190386917746e57366576d3', id: labelId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: 'e17c800558900192e3f5d2f278a70eeb94c31c42', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '29ac93789cbbed8fb381b576a247c78ce444b9bc', 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: '5cebdda4786fbb0d47355f8a41b4b0a19d5974ad', class: {
+        return (h("div", { key: 'b0822a6c3f418c4baadbdd0fffe0678c85d4a858', class: "bq-select", part: "base" }, h("label", { key: '1cdf1bbf83b43cc794b08ba4fe175317cd562930', id: labelId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '98b253b36c68a4ab56f269959f50f0539ddaf9b3', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: 'b614f2d5b71c6d1b246c19b716cebca8a5776c63', 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: 'c0f4ea4d05b2411ebe95f32393702e1b566203c4', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '80b821225b8f498f34e918715e40633d3f442b18', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '04f266b634aa2ae77892f3de9ceb648966795bbe', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '62cad8517118b225d6c35b7620565262ea9f7355', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '22a2750d5fe67baa59a0ac007426ba84ae1b2454', class: "bq-select__tags", part: "tags" }, h("slot", { key: 'd05869bf1d4375acc7b70a26ebea3b13531dd3c9', name: "tags" }, this.displayTags))), h("input", { key: '04488420c90a56708717ae70628d484b99208ed6', id: this.name || this.fallbackInputId, class: "bq-select__control--input flex-grow is-full", autoComplete: "off", autoCapitalize: "off", autoFocus: this.autofocus, "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: 'e87b700d7682189ae49c28ce5f0341ca32944827', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'b2117317d53f0fd3c62880fb73f47d8a0032bd0e', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '22c024d6ab811d60930217b4e0f0397f47f4af4e', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '230c6552acbcb80cd15dc2b712da9b48b4fb0a87', class: "bq-select__tags", part: "tags" }, h("slot", { key: 'd466eb5a20ef181e6c7671a9c4f177d6e2e3bd30', name: "tags" }, this.displayTags))), h("input", { key: 'f7b1dd41dfa8a87cbc5747fd9b3f8d965c1702c9', id: this.name || this.fallbackInputId, class: "bq-select__control--input flex-grow is-full", autoComplete: "off", autoCapitalize: "off", autoFocus: this.autofocus, "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 && (
         // 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: '64461843191cdf3935c464d28d93d3fff050c491', 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: 'a0dfdde0bd4276bf42aae558fbd640ca652038ce', name: "clear-icon" }, h("bq-icon", { key: 'f147f74f440efe09bba58b20887f4b3a4b44d367', name: "x-circle", class: "flex" })))), h("span", { key: '6fcb1a3e3f3e91538acbe1b397d42403b0b3da79', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '2bfa95fd7b42673ae8926ff1cc32cb69a54aaf2e', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '5cefb7d796850bdc69db617462eeebd1ef30ce0a', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: 'dc4afacc19225ee195a92c5f79f6da798231cb7f', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: '95a0fe75c20d2d6f43b795926a281c9c20b8eb29' }))), h("div", { key: '237548a08bdaef24d61c0e4b0d0d53b75cd8b71b', class: {
+        h("bq-button", { key: 'a414e48a85ecb319fbd2dfa92303d56139281947', 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: 'adb12a220b55c1b0b772f1309b0dfcf1f3543879', name: "clear-icon" }, h("bq-icon", { key: '9f4c77e3f7547b39f7015a34d99f44acae1ff552', name: "x-circle", class: "flex" })))), h("span", { key: '57f5b28c0cdb54098c683b437a9e9b18df122d99', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'a897f738544a13d4283232d7e6601210477884fa', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '4d92c46edda852f4290f4d26294a4d396e3359c8', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: 'e1d33bd852ccddb2b11871a8a589bfd7424659ca', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: 'efc2746ae6ed636498a93f02852c2b5f9b6810ed' }))), h("div", { key: '7af06c40296fb14b27d53f903a84acb879a0c48c', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'a02b29c26ce956e1621a5fa6e411b01715ea7a9a', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '82a339ec99ea0d9fbc991644f609e93fddf0aed1', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
     }
     static get is() { return "bq-select"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["./scss/bq-select.scss"]
@@ -707,7 +748,7 @@ export class BqSelect {
                     "references": {
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/workflows/workspace/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     }
@@ -872,5 +913,6 @@ export class BqSelect {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=bq-select.js.map