npm - @beeq/core - Versions diffs - 1.3.0 → 1.3.2 - Mend

@beeq/core 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (253) hide show

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

@@ -3,7 +3,7 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { h } from "@stencil/core";
-import { debounce, getTextContent, hasSlotContent, isDefined, isHTMLElement } from "../../shared/utils";
+import { debounce, getTextContent, hasSlotContent, isDefined, isHTMLElement, 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.
@@ -144,6 +144,9 @@ export class BqSelect {
                 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); });
+            }
         };
         this.getOptionLabel = (item) => {
             const slot = item.shadowRoot.querySelector('slot:not([name])');
@@ -184,6 +187,11 @@ 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)));
+            return;
+        }
         this.syncItemsFromValue();
     }
     // Component lifecycle events
@@ -200,9 +208,6 @@ export class BqSelect {
         }
         this.handleValueChange();
     }
-    componentDidRender() {
-        this.syncItemsFromValue();
-    }
     // Listeners
     // ==============
     handleOpenChange(ev) {
@@ -250,7 +255,11 @@ export class BqSelect {
     get displayTags() {
         return this.selectedOptions.map((item, index) => {
             if (index < this.maxTagsVisible || this.maxTagsVisible < 0) {
-                return (h("bq-tag", { key: item.value, removable: true, size: "xsmall", variant: "filled", onBqClose: () => this.handleTagRemove(item),
+                return (h("bq-tag", { key: item.value, removable: true, size: "xsmall", variant: "filled", onBqClose: (event) => {
+                        // NOTE: prevents triggering bqClose on parent
+                        event.stopPropagation();
+                        this.handleTagRemove(item);
+                    },
                     // Prevent the tag from closing the panel when clicked
                     onClick: (ev) => ev.stopPropagation(), exportparts: "wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close", part: "tag" }, this.getOptionLabel(item)));
             }
@@ -274,19 +283,19 @@ export class BqSelect {
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '02f9d50d197ecd012e03c270405457dbf14f9144', class: "bq-select", part: "base" }, h("label", { key: '7d57662924ea12872edaf0b769c42f680f16d2dd', 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: '95fd243c08024aa5ec821282b1a648e42b1ae4fc', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '93b96ada984d062715c4a1cee51c950d7655e710', 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: '990ba26e0d8f88ecc2d4a789c5917bba6e4aa87d', class: {
+        return (h("div", { key: '93365bce60725fc80034b51de1e7ef751fe65c37', class: "bq-select", part: "base" }, h("label", { key: '0065e122f209644a1fa877fed37b96cdd43332c2', 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: '377f747dacc7fdde8a131763d6f936643675606f', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '5e5a1cb415f5dca1cb5bd300a97551e619e8f7ec', 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: 'e26f9abac85ac1aa4eef36866862eb9284a96aad', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '26009add5f23f3b33e6912b804428e67da347fef', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '03d70e1cd969c7c26b95b94af36958a84fb5c52d', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '5ac3eb995b5d5dc6fab0ac73962b260cd7834303', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '732309cc836b6363c1dd4e30014fe19d790489e4', class: "me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex", part: "tags" }, this.displayTags)), h("input", { key: '17461304fab0315baec7afaa053b80c54d234b68', id: this.name || this.fallbackInputId, class: "bq-select__control--input w-full flex-grow", 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: '01ce8b1b75f83ab2cdec682ee2b68e1cd2cea2ab', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '0a6404d02c4cf3ea68d76cda304627629172d505', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '5d9f95e9371c8dc78cbc89b519f1d523efb56fbb', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'e2a41a90ff515cb050cb50d562fd3456a0c5a971', class: "me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex", part: "tags" }, this.displayTags)), h("input", { key: '179962a0c3572cf267c5787f5258f3251d0865a9', id: this.name || this.fallbackInputId, class: "bq-select__control--input w-full flex-grow", 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: 'bcb8c3f5fad488f98abcd0ce6d650309ae579ef9', 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: '014f8b03b759e8834896d1ef3b97de5be36cff61', name: "clear-icon" }, h("bq-icon", { key: '09b481745b2c21fa3e7e025ab65d6ec65c6799ad', name: "x-circle", class: "flex" })))), h("span", { key: '3a472bb44053d4db6bd23a8903e3cf2302ba8175', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '7ab67db44451d26e47025141562f4964a959cebd', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: 'a275bc3592809db0400d4997347215cfcbe1c7ea', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: 'f35debbc5f66029cbb4e629f121cdd07d9f8d7d1', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: 'd3f0221adf2f45de44c2ac8c5b015ff9db45ee87' }))), h("div", { key: 'acacde82dfed85687cfa8b443992f79cc3f2f145', class: {
+        h("bq-button", { key: '2f94a0813747b23caaeaab20f28bd687b7cb7d3b', 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: '5b0168c7b8bce6ccc05080a8111216d098c987a7', name: "clear-icon" }, h("bq-icon", { key: 'ad6b5016896acb1226726599603465fb1b280b65', name: "x-circle", class: "flex" })))), h("span", { key: '505eebe64f8faed6b31a34b80429ea23a4517948', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'f4ae5ea77e67b54e32206e68735a8eb1afd4d0e1', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '005e9c61ba8353db41f4aeb9ca0d5c47fae41bfe', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: '206613838b1af99cbf41fe64bb9d5d008cd6fd92', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: '57b47f994fccfea12105b8fb45ab8f72766134a5' }))), h("div", { key: '3702dbb3eebc9485fc6089068c8aa3f318527c86', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'b94d5f1dc8769ba3f06794c2648351695887152f', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '9464eeac52d5252be2e6d991688e4411a29bc148', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
     }
     static get is() { return "bq-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/bq-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-select.js","sourceRoot":"","sources":["../../../../../../src/components/select/bq-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG/G,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAKnH;;;;;;;;;;;;;;;;;;;GAmBG;AAQH,MAAM,OAAO,QAAQ;;QAYX,oBAAe,GAAG,QAAQ,CAAC;QAqMnC,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,iBAAY,GAAG,CAAC,EAAmE,EAAE,EAAE;YAC7F,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,EAAE,CAAC,eAAe,EAAE,CAAC;YACvB,CAAC;YAED,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC;YAElC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;gBACnC,gDAAgD;gBAChD,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC1B,wFAAwF;gBACxF,yDAAyD;gBACzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YAClD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,CAAC;YAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,IAAyB,EAAE,EAAE;YAC9D,sGAAsG;YACtG,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAEzD,IAAI,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;gBACjC,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;YAED,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9D,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,EAAS,EAAE,EAAE;;YACzC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,EAAE,CAAC;YAE7B,MAAM,KAAK,GAAG,MAAC,EAAE,CAAC,MAA2B,CAAC,KAAK,0CAAE,WAAW,GAAG,IAAI,EAAE,CAAC;YAE1E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;oBACjC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAyB,EAAE,EAAE;wBACjD,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;wBAC1D,IAAI,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBAC3C,CAAC,CAAC,CAAC;gBACL,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;gBAEtB,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;YAED,gDAAgD;YAChD,uFAAuF;YACvF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAe,EAAE,EAAE;YAC7C,CAAC,KAAK,IAAI,EAAE;gBACV,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC,CAAC,EAAE,CAAC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;YAEvB,EAAE,CAAC,eAAe,EAAE,CAAC;QACvB,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,IAAyB,EAAE,EAAE;YACtD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QAClD,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;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAyB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;QAC7E,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAG,EAAE;;YAChC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,MAAM;gBAAE,OAAO;YAE1B,+CAA+C;YAC/C,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAA2B,EAAE,EAAE;gBACnD,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC/C,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACtD,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;gBACpF,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,qBAAqB;gBACrB,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBACzE,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACxE,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,EAAE,CAAC;YACjD,CAAC;QACH,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,IAAyB,EAAE,EAAE;YACrD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YAC/D,IAAI,CAAC,IAAI;gBAAE,OAAO;YAElB,OAAO,cAAc,CAAC,IAAuB,CAAC,CAAC;QACjD,CAAC,CAAC;;6BAvUuB,KAAK;+BACoB,EAAE;wBAEhC,KAAK;yBACJ,KAAK;yBACL,KAAK;wBACN,KAAK;;gCASoB,aAAa;4BAMF,CAAC;wBAMX,KAAK;4BAGV,KAAK;wBAGD,CAAC;;gCAMQ,KAAK;;8BAMT,CAAC;wBAGL,KAAK;oBAGM,KAAK;;;yBASH,QAAQ;;;yBASpB,IAAI;wBAGN,CAAC;wBAGa,OAAO;gCAYJ,MAAM;;;IAKpE,wBAAwB;IACxB,0BAA0B;IAG1B,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAkBD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnG,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACxF,CAAC;QAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,YAAY;IACZ,iBAAiB;IAGjB,gBAAgB,CAAC,EAAkC;QACjD,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAEjD,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;IAC7B,CAAC;IAID,8BAA8B,CAAC,EAAe;QAC5C,iFAAiF;QACjF,IAAI,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;YAAE,OAAO;QAElD,EAAE,CAAC,eAAe,EAAE,CAAC;IACvB,CAAC;IAED,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD;;;;;OAKG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC;IAkJD,IAAY,OAAO;QACjB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,kBAAkB;QAC5B,uFAAuF;QACvF,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAC3F,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,EAAE,CAAC;gBAC3D,OAAO,CACL,cACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,SAAS,QACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBAC3C,sDAAsD;oBACtD,OAAO,EAAE,CAAC,EAAc,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,EACjD,WAAW,EAAC,8EAA8E,EAC1F,IAAI,EAAC,KAAK,IAET,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CACnB,CACV,CAAC;YACJ,CAAC;iBAAM,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzC,OAAO,CACL,cACE,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,QAAQ,EAChB,WAAW,EAAC,8EAA8E,EAC1F,IAAI,EAAC,KAAK;;oBAER,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,KAAK,CAC9B,CACV,CAAC;YACJ,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAY,YAAY;QACtB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtC,CAAC;IAED,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,OAAO,GAAG,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;QAExE,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;YAEhC,8DACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC9D,OAAO,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EAC1C,GAAG,EAAE,CAAC,SAA0B,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,EACjE,IAAI,EAAC,OAAO;gBAEZ,6DAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAAI,CACzD;YAER,oEACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAC,OAAO;gBAGnB,4DACE,KAAK,EAAE;wBACL,oBAAoB,EAAE,IAAI;wBAC1B,CAAC,cAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI;wBAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ;qBACxB,EACD,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,SAAS;oBAGd,6DACE,KAAK,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACzE,GAAG,EAAE,CAAC,QAAyB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAChE,IAAI,EAAC,QAAQ;wBAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC5D;oBACP,4DAAK,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,eAAe;wBAE1D,IAAI,CAAC,QAAQ,IAAI,CAChB,6DACE,KAAK,EAAC,2HAA2H,EACjI,IAAI,EAAC,MAAM,IAEV,IAAI,CAAC,WAAW,CACZ,CACR;wBAED,8DACE,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EACrC,KAAK,EAAC,4CAA4C,EAClD,YAAY,EAAC,KAAK,EAClB,cAAc,EAAC,KAAK,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,mBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,cAAc,IAAI,CAAC,IAAI,EAAE,mBACzB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC7B,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,kBAAkB,EACpC,GAAG,EAAE,CAAC,SAA2B,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,EAClE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,UAAU,EAAE,KAAK,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,IAAI,EAAC,OAAO;4BACZ,SAAS;4BACT,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,kBAAkB,GAChC,CACE;oBAEL,IAAI,CAAC,YAAY,IAAI;oBACpB,oEAAoE;oBACpE,sDAAsD;oBACtD,kEACE,KAAK,EAAC,iDAAiD,EACvD,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,EACpB,QAAQ,EAAE,CAAC,CAAC;wBAEZ,6DAAM,IAAI,EAAC,YAAY;4BACrB,gEAAS,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,GAAG,CACnC,CACG,CACb;oBAED,6DACE,KAAK,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC9F,GAAG,EAAE,CAAC,QAAyB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAChE,IAAI,EAAC,QAAQ;wBAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB;4BAC3D,gEAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,MAAM,GAAG,CACrC,CACF,CACH;gBACN,uEACE,EAAE,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,EAC7B,UAAU,EAAE,IAAI,CAAC,YAAY,mBACd,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3C,WAAW,EAAC,kBAAkB,EAC9B,IAAI,EAAC,SAAS;oBAEd,8DAAQ,CACO,CACL;YAEd,4DACE,KAAK,EAAE;oBACL,CAAC,qCAAqC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI;oBACpE,SAAS,EAAE,CAAC,IAAI,CAAC,aAAa;iBAC/B,EACD,GAAG,EAAE,CAAC,OAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EACjE,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, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { FloatingUIPlacement } from '../../services/interfaces';\nimport { debounce, getTextContent, hasSlotContent, isDefined, isHTMLElement, TDebounce } from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string \| string[];\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 input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n /\n@Component({\n tag: 'bq-select',\n styleUrl: './scss/bq-select.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSelect {\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 debounceQuery: TDebounce<void>;\n\n private fallbackInputId = 'select';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSelectElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() displayValue?: string;\n @State() hasHelperText = false;\n @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If true, the Select 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 Select input is disabled or not.\n * If `true`, the Select 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 /* Represents the distance (gutter or margin) between the Select panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The ID of the form that the Select input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* If true, the Select panel will remain open after a selection is made. /\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /* The Select input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* The maximum number of tags to display when multiple selection is enabled /\n @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n /* If true, the Select input will allow multiple selections. /\n @Prop({ reflect: true }) multiple?: boolean = false;\n\n /* If true, the Select panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Select panel. /\n @Prop({ reflect: true }) panelHeight?: string;\n\n /* The Select input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Select panel /\n @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom';\n\n /* If true, the list of options cannot be filtered (searching won't be available) /\n @Prop({ reflect: true }) readonly?: boolean;\n\n /* Indicates whether or not the Select input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Whether the panel should have the Select same width as the input element /\n @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n /* Represents the skidding between the Select panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Defines the strategy to position the Select panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select 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 select input value, it can be used to reset the field to a previous value /\n @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n this.syncItemsFromValue();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the Select input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the Select input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has changed /\n @Event() bqSelect!: EventEmitter<{ value: string \| number \| string[]; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (this.multiple) {\n this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\n }\n }\n\n componentDidLoad() {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n }\n\n this.handleValueChange();\n }\n\n componentDidRender() {\n this.syncItemsFromValue();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n }\n\n @Listen('bqFocus', { capture: true })\n @Listen('bqBlur', { capture: true })\n stopOptionFocusBlurPropagation(ev: CustomEvent) {\n // Stop propagation of focus and blur events coming from the `bq-option` elements\n if (isHTMLElement(ev.target, 'bq-select')) return;\n\n ev.stopPropagation();\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 /\n Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n this.value = undefined;\n this.selectedOptions = [];\n if (!this.multiple) {\n this.displayValue = undefined;\n this.inputElem.value = undefined;\n }\n\n this.resetOptionsVisibility();\n this.bqClear.emit(this.el);\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n if (this.disabled) return;\n\n if (this.multiple) {\n ev.stopPropagation();\n }\n\n const { value, item } = ev.detail;\n\n if (this.multiple) {\n this.handleMultipleSelection(item);\n // Clear the input value after selecting an item\n this.inputElem.value = '';\n // If multiple selection is enabled, emit the selected items array instead of relying on\n // the option list to emit the value of the selected item\n this.bqSelect.emit({ value: this.value, item });\n } else {\n this.value = value;\n }\n\n this.resetOptionsVisibility();\n this.inputElem.focus();\n };\n\n private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n const selectedOptionsSet = new Set(this.selectedOptions);\n\n if (selectedOptionsSet.has(item)) {\n selectedOptionsSet.delete(item);\n } else {\n selectedOptionsSet.add(item);\n }\n\n this.selectedOptions = Array.from(selectedOptionsSet);\n this.value = this.selectedOptions.map((item) => item.value);\n };\n\n private handleSearchFilter = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceQuery?.cancel();\n\n const query = (ev.target as HTMLInputElement).value?.toLowerCase().trim();\n\n if (!isDefined(query)) {\n this.clear();\n } else {\n this.debounceQuery = debounce(() => {\n this.options.forEach((item: HTMLBqOptionElement) => {\n const itemLabel = this.getOptionLabel(item).toLowerCase();\n item.hidden = !itemLabel.includes(query);\n });\n }, this.debounceTime);\n\n this.debounceQuery();\n }\n\n // The panel will close once a selection is made\n // so we need to make sure it's open when the user is typing and the query is not empty\n this.open = true;\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n (async () => {\n await this.clear();\n })();\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleTagRemove = (item: HTMLBqOptionElement) => {\n if (this.disabled) return;\n\n this.handleMultipleSelection(item);\n this.bqSelect.emit({ value: this.value, item });\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 private resetOptionsVisibility = () => {\n this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n };\n\n private syncItemsFromValue = () => {\n const items = this.options;\n if (!items.length) return;\n\n // Sync selected state of the BqOption elements\n this.options.forEach((option: HTMLBqOptionElement) => {\n if (this.multiple && Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = option.value.toLowerCase() === String(this.value).toLowerCase();\n }\n });\n\n if (!this.multiple) {\n // Sync display label\n const checkedItem = items.filter((item) => item.value === this.value)[0];\n this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n this.inputElem.value = this.displayValue ?? '';\n }\n };\n\n private getOptionLabel = (item: HTMLBqOptionElement) => {\n const slot = item.shadowRoot.querySelector('slot:not([name])');\n if (!slot) return;\n\n return getTextContent(slot as HTMLSlotElement);\n };\n\n private get options() {\n return Array.from(this.el.querySelectorAll('bq-option'));\n }\n\n private get displayPlaceholder() {\n // Hide the placeholder when multiple selection is enabled and there are selected items\n return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n }\n\n private get displayTags() {\n return this.selectedOptions.map((item, index) => {\n if (index < this.maxTagsVisible \|\| this.maxTagsVisible < 0) {\n return (\n <bq-tag\n key={item.value}\n removable\n size=\"xsmall\"\n variant=\"filled\"\n onBqClose={() => this.handleTagRemove(item)}\n // Prevent the tag from closing the panel when clicked\n onClick={(ev: MouseEvent) => ev.stopPropagation()}\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n {this.getOptionLabel(item)}\n </bq-tag>\n );\n } else if (index === this.maxTagsVisible) {\n return (\n <bq-tag\n key=\"more\"\n size=\"xsmall\"\n variant=\"filled\"\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n +{this.selectedOptions.length - index}\n </bq-tag>\n );\n }\n\n return null;\n });\n }\n\n private get hasClearIcon() {\n if (this.disableClear \|\| this.disabled) {\n return false;\n }\n\n if (this.multiple) {\n return this.selectedOptions.length > 0;\n }\n\n return isDefined(this.displayValue);\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const labelId = `bq-select__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-select\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n </label>\n {/ Select dropdown /}\n <bq-dropdown\n class=\"bq-select__dropdown w-full\"\n disabled={this.disabled}\n distance={this.distance}\n keepOpenOnSelect={this.keepOpenOnSelect}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-select__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n </span>\n <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n {/ Display selected values using BqTags for multiple selection /}\n {this.multiple && (\n <span\n class=\"me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex\"\n part=\"tags\"\n >\n {this.displayTags}\n </span>\n )}\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-select__control--input w-full flex-grow\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n autoFocus={this.autofocus}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`bq-options-${this.name}`}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.displayPlaceholder}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n role=\"combobox\"\n spellcheck={false}\n type=\"text\"\n value={this.displayValue}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInput={this.handleSearchFilter}\n />\n </div>\n {/ Clear Button /}\n {this.hasClearIcon && (\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-select__control--clear ms-[--bq-select--gap]\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n tabIndex={-1}\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-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange}>\n <bq-icon name=\"caret-down\" class=\"flex\" />\n </slot>\n </span>\n </div>\n <bq-option-list\n id={`bq-options-${this.name}`}\n onBqSelect={this.handleSelect}\n aria-expanded={this.open ? 'true' : 'false'}\n exportparts=\"base:option-list\"\n role=\"listbox\"\n >\n <slot />\n </bq-option-list>\n </bq-dropdown>\n {/ Helper text */}\n <div\n class={{\n [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}\n part=\"helper-text\"\n >\n <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-select.js","sourceRoot":"","sources":["../../../../../../src/components/select/bq-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { FloatingUIPlacement } from '../../services/interfaces';\nimport {\n debounce,\n getTextContent,\n hasSlotContent,\n isDefined,\n isHTMLElement,\n isString,\n TDebounce,\n} from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string \| string[];\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 input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n /\n@Component({\n tag: 'bq-select',\n styleUrl: './scss/bq-select.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSelect {\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 debounceQuery: TDebounce<void>;\n\n private fallbackInputId = 'select';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSelectElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() displayValue?: string;\n @State() hasHelperText = false;\n @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If true, the Select 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 Select input is disabled or not.\n * If `true`, the Select 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 /* Represents the distance (gutter or margin) between the Select panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The ID of the form that the Select input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* If true, the Select panel will remain open after a selection is made. /\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /* The Select input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* The maximum number of tags to display when multiple selection is enabled /\n @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n /* If true, the Select input will allow multiple selections. /\n @Prop({ reflect: true }) multiple?: boolean = false;\n\n /* If true, the Select panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Select panel. /\n @Prop({ reflect: true }) panelHeight?: string;\n\n /* The Select input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Select panel /\n @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom';\n\n /* If true, the list of options cannot be filtered (searching won't be available) /\n @Prop({ reflect: true }) readonly?: boolean;\n\n /* Indicates whether or not the Select input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Whether the panel should have the Select same width as the input element /\n @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n /* Represents the skidding between the Select panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Defines the strategy to position the Select panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select 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 select input value, it can be used to reset the field to a previous value /\n @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n if (this.multiple && isString(this.value)) {\n // NOTE: we ensure that value is an array, changing the value will trigger Watch to execute thus the return\n this.value = Array.from(JSON.parse(String(this.value)));\n return;\n }\n\n this.syncItemsFromValue();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the Select input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the Select input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has changed /\n @Event() bqSelect!: EventEmitter<{ value: string \| number \| string[]; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (this.multiple) {\n this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\n }\n }\n\n componentDidLoad() {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n }\n\n this.handleValueChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n }\n\n @Listen('bqFocus', { capture: true })\n @Listen('bqBlur', { capture: true })\n stopOptionFocusBlurPropagation(ev: CustomEvent) {\n // Stop propagation of focus and blur events coming from the `bq-option` elements\n if (isHTMLElement(ev.target, 'bq-select')) return;\n\n ev.stopPropagation();\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 /\n Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n this.value = undefined;\n this.selectedOptions = [];\n if (!this.multiple) {\n this.displayValue = undefined;\n this.inputElem.value = undefined;\n }\n\n this.resetOptionsVisibility();\n this.bqClear.emit(this.el);\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n if (this.disabled) return;\n\n if (this.multiple) {\n ev.stopPropagation();\n }\n\n const { value, item } = ev.detail;\n\n if (this.multiple) {\n this.handleMultipleSelection(item);\n // Clear the input value after selecting an item\n this.inputElem.value = '';\n // If multiple selection is enabled, emit the selected items array instead of relying on\n // the option list to emit the value of the selected item\n this.bqSelect.emit({ value: this.value, item });\n } else {\n this.value = value;\n }\n\n this.resetOptionsVisibility();\n this.inputElem.focus();\n };\n\n private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n const selectedOptionsSet = new Set(this.selectedOptions);\n\n if (selectedOptionsSet.has(item)) {\n selectedOptionsSet.delete(item);\n } else {\n selectedOptionsSet.add(item);\n }\n\n this.selectedOptions = Array.from(selectedOptionsSet);\n this.value = this.selectedOptions.map((item) => item.value);\n };\n\n private handleSearchFilter = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceQuery?.cancel();\n\n const query = (ev.target as HTMLInputElement).value?.toLowerCase().trim();\n\n if (!isDefined(query)) {\n this.clear();\n } else {\n this.debounceQuery = debounce(() => {\n this.options.forEach((item: HTMLBqOptionElement) => {\n const itemLabel = this.getOptionLabel(item).toLowerCase();\n item.hidden = !itemLabel.includes(query);\n });\n }, this.debounceTime);\n\n this.debounceQuery();\n }\n\n // The panel will close once a selection is made\n // so we need to make sure it's open when the user is typing and the query is not empty\n this.open = true;\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n (async () => {\n await this.clear();\n })();\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleTagRemove = (item: HTMLBqOptionElement) => {\n if (this.disabled) return;\n\n this.handleMultipleSelection(item);\n this.bqSelect.emit({ value: this.value, item });\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 private resetOptionsVisibility = () => {\n this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n };\n\n private syncItemsFromValue = () => {\n const items = this.options;\n if (!items.length) return;\n\n // Sync selected state of the BqOption elements\n this.options.forEach((option: HTMLBqOptionElement) => {\n if (this.multiple && Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = option.value.toLowerCase() === String(this.value).toLowerCase();\n }\n });\n\n if (!this.multiple) {\n // Sync display label\n const checkedItem = items.filter((item) => item.value === this.value)[0];\n this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n this.inputElem.value = this.displayValue ?? '';\n } else {\n this.selectedOptions = this.options.filter((item) => this.value?.includes(item.value));\n }\n };\n\n private getOptionLabel = (item: HTMLBqOptionElement) => {\n const slot = item.shadowRoot.querySelector('slot:not([name])');\n if (!slot) return;\n\n return getTextContent(slot as HTMLSlotElement);\n };\n\n private get options() {\n return Array.from(this.el.querySelectorAll('bq-option'));\n }\n\n private get displayPlaceholder() {\n // Hide the placeholder when multiple selection is enabled and there are selected items\n return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n }\n\n private get displayTags() {\n return this.selectedOptions.map((item, index) => {\n if (index < this.maxTagsVisible \|\| this.maxTagsVisible < 0) {\n return (\n <bq-tag\n key={item.value}\n removable\n size=\"xsmall\"\n variant=\"filled\"\n onBqClose={(event) => {\n // NOTE: prevents triggering bqClose on parent\n event.stopPropagation();\n this.handleTagRemove(item);\n }}\n // Prevent the tag from closing the panel when clicked\n onClick={(ev: MouseEvent) => ev.stopPropagation()}\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n {this.getOptionLabel(item)}\n </bq-tag>\n );\n } else if (index === this.maxTagsVisible) {\n return (\n <bq-tag\n key=\"more\"\n size=\"xsmall\"\n variant=\"filled\"\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n +{this.selectedOptions.length - index}\n </bq-tag>\n );\n }\n\n return null;\n });\n }\n\n private get hasClearIcon() {\n if (this.disableClear \|\| this.disabled) {\n return false;\n }\n\n if (this.multiple) {\n return this.selectedOptions.length > 0;\n }\n\n return isDefined(this.displayValue);\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const labelId = `bq-select__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-select\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n </label>\n {/ Select dropdown /}\n <bq-dropdown\n class=\"bq-select__dropdown w-full\"\n disabled={this.disabled}\n distance={this.distance}\n keepOpenOnSelect={this.keepOpenOnSelect}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-select__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n </span>\n <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n {/ Display selected values using BqTags for multiple selection /}\n {this.multiple && (\n <span\n class=\"me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex\"\n part=\"tags\"\n >\n {this.displayTags}\n </span>\n )}\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-select__control--input w-full flex-grow\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n autoFocus={this.autofocus}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`bq-options-${this.name}`}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.displayPlaceholder}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n role=\"combobox\"\n spellcheck={false}\n type=\"text\"\n value={this.displayValue}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInput={this.handleSearchFilter}\n />\n </div>\n {/ Clear Button /}\n {this.hasClearIcon && (\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-select__control--clear ms-[--bq-select--gap]\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n tabIndex={-1}\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-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange}>\n <bq-icon name=\"caret-down\" class=\"flex\" />\n </slot>\n </span>\n </div>\n <bq-option-list\n id={`bq-options-${this.name}`}\n onBqSelect={this.handleSelect}\n aria-expanded={this.open ? 'true' : 'false'}\n exportparts=\"base:option-list\"\n role=\"listbox\"\n >\n <slot />\n </bq-option-list>\n </bq-dropdown>\n {/ Helper text */}\n <div\n class={{\n [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem: HTMLDivElement) => (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/slider/bq-slider.js CHANGED Viewed

@@ -35,7 +35,7 @@ export class BqSlider {
         };
         this.calculateMinValue = (value) => {
             var _a;
-            const isMaxValue = ((_a = this.maxValue) !== null && _a !== void 0 ? _a : value[1]) === this.max;
+            const isMaxValue = ((_a = this.minValue) !== null && _a !== void 0 ? _a : value[0]) === this.max;
             const isGapExceeded = value[0] + this.gap > this.max;
             // Make sure that the min value gets adjusted according to the gap value
             return isMaxValue || isGapExceeded ? this.max - this.gap : value[0];
@@ -72,7 +72,9 @@ export class BqSlider {
             const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();
             target.value = reflectedValue;
             target.setAttribute('value', reflectedValue);
-            this.emitBqChange();
+            // Sync the prop value.
+            // This will trigger the `@Watch('value')` method and emit the `bqChange` event.
+            this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;
         };
         this.calculatePercent = (value) => {
             const totalRange = Number(this.max) - Number(this.min);
@@ -140,7 +142,7 @@ export class BqSlider {
         };
         this.renderInput = (type, value, refCallback) => {
             return (h("input", { type: "range", class: {
-                    'absolute top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed': true,
+                    'absolute start-0 top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed': true,
                     'pointer-events-none': this.isRangeType,
                 }, disabled: this.disabled, min: this.min, max: this.max, step: this.step, ref: refCallback, onInput: (ev) => this.handleInputChange(type, ev), onBlur: this.handleBlur, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, value: value, part: `input-${type}` }));
         };
@@ -211,7 +213,7 @@ export class BqSlider {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '9408f87c933fc29816396213661129f38da4d109', "aria-disabled": this.disabled ? 'true' : 'false', class: { 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }, part: "base" }, this.renderLabel(this.minValue, 'start', 'me-xs text-end'), h("div", { key: '2d85ff90ea6377d45ad4c7780eeefccf42a15cc3', class: "relative w-full", part: "container" }, h("span", { key: '5ef5178ec7673a75676f247faf5da969947d6af9', class: "absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]", ref: (elem) => (this.trackElem = elem), part: "track-area" }), h("span", { key: '09cfc93bdace0a8e33a749d97f9a1770c2ac1d35', class: "absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]", ref: (elem) => (this.progressElem = elem), part: "progress-area" }), this.enableTooltip &&
+        return (h("div", { key: '00d0d3f5aae2c226b09b953683eddee11976e083', "aria-disabled": this.disabled ? 'true' : 'false', class: { 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }, part: "base" }, this.renderLabel(this.minValue, 'start', 'me-xs text-end'), h("div", { key: '73de9e8e4799bb759ddba94b7aa41b26dc237a6a', class: "relative w-full", part: "container" }, h("span", { key: 'fc06180b69041faf2c633b538452ca330706e3e8', class: "absolute start-0 top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]", ref: (elem) => (this.trackElem = elem), part: "track-area" }), h("span", { key: 'cf39bf309deb4ff6a652074ed015f56ae8bf180a', class: "absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]", ref: (elem) => (this.progressElem = elem), part: "progress-area" }), this.enableTooltip &&
             this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem)), this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input)), this.enableTooltip &&
             this.isRangeType &&
             this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem)), this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))), this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')));
@@ -386,7 +388,7 @@ export class BqSlider {
                 "mutable": true,
                 "complexType": {
                     "original": "TSliderValue",
-                    "resolved": "[number, number] | number | string",
+                    "resolved": "number | number[] | string",
                     "references": {
                         "TSliderValue": {
                             "location": "import",
@@ -463,7 +465,7 @@ export class BqSlider {
                 },
                 "complexType": {
                     "original": "{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }",
-                    "resolved": "{ value: number | [number, number]; el: HTMLBqSliderElement; }",
+                    "resolved": "{ value: number | number[]; el: HTMLBqSliderElement; }",
                     "references": {
                         "Exclude": {
                             "location": "global",

package/dist/collection/components/slider/bq-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-slider.js","sourceRoot":"","sources":["../../../../../../src/components/slider/bq-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/*\n @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n /\n@Component({\n tag: 'bq-slider',\n styleUrl: './scss/bq-slider.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSlider {\n // Own Properties\n // ====================\n\n private inputMinElem: HTMLInputElement;\n private inputMaxElem: HTMLInputElement;\n private minTooltipElem: HTMLBqTooltipElement;\n private maxTooltipElem: HTMLBqTooltipElement;\n private progressElem: HTMLSpanElement;\n private trackElem: HTMLSpanElement;\n private debounceBqChange: TDebounce<void>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSliderElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n /\n The `minValue` state is the only value when the slider type is `single`\n * and the minimum value when the slider type is `range`.\n /\n @State() minValue: number;\n /* The `maxValue` state is only used when the slider type is `range`. /\n @State() maxValue: number;\n /* It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) /\n @State() minThumbPosition: number;\n /* It hold the left position of the Thumb for the maximum value (if the slider type is `range`) /\n @State() maxThumbPosition: number;\n\n // Public Property API\n // ========================\n\n /* The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. /\n @Prop({ reflect: true }) debounceTime = 0;\n\n /* If `true` the slider is disabled. /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If `true` it will show the value label on a side of the slider track area /\n @Prop({ reflect: true }) enableValueIndicator? = false;\n\n /* A number representing the amount to remain between the minimum and maximum values (only for range type). /\n @Prop({ reflect: true, mutable: true }) gap = 0;\n\n /* A number representing the max value of the slider. /\n @Prop({ reflect: true }) max = 100;\n\n /* A number representing the min value of the slider. /\n @Prop({ reflect: true }) min = 0;\n\n /\n A number representing the step of the slider.\n * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n /\n @Prop({ reflect: true }) step = 1;\n\n /* It defines the type of slider to display /\n @Prop({ reflect: true }) type: TSliderType = 'single';\n\n /\n The value of the slider.\n * - If the slider type is `single`, the value is a number.\n * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n /\n @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n /* If `true`, a tooltip will be shown displaying the progress value /\n @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n /\n If `true`, a tooltip will always display the progress value.\n * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n /\n @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValuePropChange(newValue: TSliderValue) {\n this.setState(newValue);\n this.emitBqChange();\n }\n\n @Watch('step')\n handleStepPropChange() {\n this.minValue = Math.round(this.minValue / this.step) this.step;\n this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n }\n\n @Watch('gap')\n handleGapChange(newValue: number) {\n if (!this.isRangeType) return;\n // Use the this.value prop value when the component is initialized\n // Otherwise, use the current this.min and this.max state values\n const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n // If the gap is less than the min or greater than the max, set it to 0\n this.gap = newValue < value[0] \|\| newValue > value[1] ? 0 : newValue;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when change the value on range inputs /\n @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n /* Handler to be called when the slider loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n /* Handler to be called when the slider gets focused /\n @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.handleGapChange(this.gap);\n this.setState(this.value);\n this.handleStepPropChange();\n }\n\n componentDidLoad() {\n this.runUpdates();\n }\n\n componentDidUpdate() {\n this.runUpdates();\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 runUpdates = () => {\n this.updateProgressTrack();\n this.syncInputsValue();\n this.setThumbPosition();\n };\n\n private calculateMinValue = (value: TSliderValue) => {\n const isMaxValue = (this.maxValue ?? value[1]) === this.max;\n const isGapExceeded = value[0] + this.gap > this.max;\n // Make sure that the min value gets adjusted according to the gap value\n return isMaxValue \|\| isGapExceeded ? this.max - this.gap : value[0];\n };\n\n private calculateMaxValue = (value: TSliderValue, minValue: number) => Math.max(value[1], minValue + this.gap);\n\n private setState = (newValue: TSliderValue) => {\n const isRangeType = this.isRangeType;\n const value = this.stringToObject(newValue);\n\n this.minValue = isRangeType ? this.calculateMinValue(value) : value;\n this.maxValue = isRangeType ? this.calculateMaxValue(value, this.minValue) : this.minValue;\n };\n\n private setThumbPosition = () => {\n if (!this.enableTooltip) return;\n\n // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n };\n\n private syncInputsValue = () => {\n this.inputMinElem?.setAttribute('value', this.minValue.toString());\n this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n };\n\n private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n private handleInputChange = (type: 'min' \| 'max', event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n const value = parseFloat(target.value);\n\n if (type === 'min') {\n this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n } else if (type === 'max') {\n this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n }\n\n // Update the input value to reflect the clamped value\n const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n target.value = reflectedValue;\n target.setAttribute('value', reflectedValue);\n\n this.emitBqChange();\n };\n\n private calculatePercent = (value: number) => {\n const totalRange = Number(this.max) - Number(this.min);\n return (value / totalRange) 100;\n };\n\n private updateProgressTrack = () => {\n if (!this.progressElem) return;\n\n // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n // For non-range type, left starts from 0 and width is the `min` value.\n const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n const width = this.isRangeType\n ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))\n : this.calculatePercent(this.minValue);\n\n this.progressElem.style.left = `${left}%`;\n this.progressElem.style.width = `${width}%`;\n };\n\n private calculateThumbPosition = (value: number): number => {\n if (!this.progressElem) return;\n\n // Get the width of the track area and the size of the input range thumb\n const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n // We need to also add 4px to the thumb size,\n // this is because the thumb is 2px border (`border-2`)\n const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n const totalWidth = trackAreaWidth - inputThumbSize;\n\n return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n };\n\n private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n const minThumbPosition = this.calculateThumbPosition(this.minValue);\n const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n return { minThumbPosition, maxThumbPosition };\n };\n\n private emitBqChange = () => {\n this.debounceBqChange?.cancel();\n\n const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n this.debounceBqChange();\n };\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'remove');\n };\n\n private handleMouseUp = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'add');\n };\n\n private handleTooltipVisibility = (event: MouseEvent, action: 'add' \| 'remove') => {\n if (!this.enableTooltip \|\| this.tooltipAlwaysVisible) return;\n\n const target = event.target as HTMLElement;\n const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n tooltipElem.classList[action]('hidden');\n };\n\n private get decimalCount(): number {\n // Return the length of the decimal part of the step value.\n return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n }\n\n private get isRangeType() {\n return this.type === 'range';\n }\n\n private get isTooltipAlwaysVisible(): boolean {\n return this.tooltipAlwaysVisible && this.enableTooltip;\n }\n\n private renderLabel = (value: number, position: 'start' \| 'end', css?: string) => {\n return (\n <span\n class={{\n [`${css} box-content block w-fit min-w-8 text-s font-medium leading-regular text-text-primary [font-variant:tabular-nums]`]:\n true,\n hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator \|\| !this.isRangeType,\n }}\n part={`label-${position}`}\n >\n {value.toFixed(this.decimalCount)}\n </span>\n );\n };\n\n private renderInput = (type: 'max' \| 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n return (\n <input\n type=\"range\"\n class={{\n 'absolute top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed':\n true,\n 'pointer-events-none': this.isRangeType,\n }}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n ref={refCallback}\n onInput={(ev) => this.handleInputChange(type, ev)}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n value={value}\n part={`input-${type}`}\n />\n );\n };\n\n private renderTooltip = (\n value: number,\n thumbPosition: number,\n refCallback: (elem: HTMLBqTooltipElement) => void,\n ): HTMLBqTooltipElement => (\n <bq-tooltip\n class={{\n 'absolute [&::part(panel)]:absolute': true,\n hidden: !this.isTooltipAlwaysVisible,\n }}\n exportparts=\"base,trigger,panel\"\n alwaysVisible={true}\n distance={this.enableValueIndicator ? 6 : 16}\n style={{ left: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n ref={refCallback}\n >\n <div class=\"absolute size-1\" slot=\"trigger\" />\n {value.toFixed(this.decimalCount)}\n </bq-tooltip>\n );\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n aria-disabled={this.disabled ? 'true' : 'false'}\n class={{ 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n part=\"base\"\n >\n {/* LABEL (start) /}\n {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n {/ SLIDER /}\n <div class=\"relative w-full\" part=\"container\">\n {/ TRACK AREA /}\n <span\n class=\"absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]\"\n ref={(elem) => (this.trackElem = elem)}\n part=\"track-area\"\n />\n {/ PROGRESS AREA /}\n <span\n class=\"absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]\"\n ref={(elem) => (this.progressElem = elem)}\n part=\"progress-area\"\n />\n {/ TOOLTIP on top of the value or min value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n {/ INPUT (Min), used on single type /}\n {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n {/ TOOLTIP on top of the max value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.isRangeType &&\n this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n {/ INPUT (Max) /}\n {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n </div>\n {/ LABEL (end) */}\n {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-slider.js","sourceRoot":"","sources":["../../../../../../src/components/slider/bq-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/*\n @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n /\n@Component({\n tag: 'bq-slider',\n styleUrl: './scss/bq-slider.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSlider {\n // Own Properties\n // ====================\n\n private inputMinElem: HTMLInputElement;\n private inputMaxElem: HTMLInputElement;\n private minTooltipElem: HTMLBqTooltipElement;\n private maxTooltipElem: HTMLBqTooltipElement;\n private progressElem: HTMLSpanElement;\n private trackElem: HTMLSpanElement;\n private debounceBqChange: TDebounce<void>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSliderElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n /\n The `minValue` state is the only value when the slider type is `single`\n * and the minimum value when the slider type is `range`.\n /\n @State() minValue: number;\n /* The `maxValue` state is only used when the slider type is `range`. /\n @State() maxValue: number;\n /* It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) /\n @State() minThumbPosition: number;\n /* It hold the left position of the Thumb for the maximum value (if the slider type is `range`) /\n @State() maxThumbPosition: number;\n\n // Public Property API\n // ========================\n\n /* The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. /\n @Prop({ reflect: true }) debounceTime = 0;\n\n /* If `true` the slider is disabled. /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If `true` it will show the value label on a side of the slider track area /\n @Prop({ reflect: true }) enableValueIndicator? = false;\n\n /* A number representing the amount to remain between the minimum and maximum values (only for range type). /\n @Prop({ reflect: true, mutable: true }) gap = 0;\n\n /* A number representing the max value of the slider. /\n @Prop({ reflect: true }) max = 100;\n\n /* A number representing the min value of the slider. /\n @Prop({ reflect: true }) min = 0;\n\n /\n A number representing the step of the slider.\n * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n /\n @Prop({ reflect: true }) step = 1;\n\n /* It defines the type of slider to display /\n @Prop({ reflect: true }) type: TSliderType = 'single';\n\n /\n The value of the slider.\n * - If the slider type is `single`, the value is a number.\n * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n /\n @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n /* If `true`, a tooltip will be shown displaying the progress value /\n @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n /\n If `true`, a tooltip will always display the progress value.\n * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n /\n @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValuePropChange(newValue: TSliderValue) {\n this.setState(newValue);\n this.emitBqChange();\n }\n\n @Watch('step')\n handleStepPropChange() {\n this.minValue = Math.round(this.minValue / this.step) this.step;\n this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n }\n\n @Watch('gap')\n handleGapChange(newValue: number) {\n if (!this.isRangeType) return;\n // Use the this.value prop value when the component is initialized\n // Otherwise, use the current this.min and this.max state values\n const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n // If the gap is less than the min or greater than the max, set it to 0\n this.gap = newValue < value[0] \|\| newValue > value[1] ? 0 : newValue;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when change the value on range inputs /\n @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n /* Handler to be called when the slider loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n /* Handler to be called when the slider gets focused /\n @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.handleGapChange(this.gap);\n this.setState(this.value);\n this.handleStepPropChange();\n }\n\n componentDidLoad() {\n this.runUpdates();\n }\n\n componentDidUpdate() {\n this.runUpdates();\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 runUpdates = () => {\n this.updateProgressTrack();\n this.syncInputsValue();\n this.setThumbPosition();\n };\n\n private calculateMinValue = (value: TSliderValue) => {\n const isMaxValue = (this.minValue ?? value[0]) === this.max;\n const isGapExceeded = value[0] + this.gap > this.max;\n // Make sure that the min value gets adjusted according to the gap value\n return isMaxValue \|\| isGapExceeded ? this.max - this.gap : value[0];\n };\n\n private calculateMaxValue = (value: TSliderValue, minValue: number) => Math.max(value[1], minValue + this.gap);\n\n private setState = (newValue: TSliderValue) => {\n const isRangeType = this.isRangeType;\n const value = this.stringToObject(newValue);\n\n this.minValue = isRangeType ? this.calculateMinValue(value) : value;\n this.maxValue = isRangeType ? this.calculateMaxValue(value, this.minValue) : this.minValue;\n };\n\n private setThumbPosition = () => {\n if (!this.enableTooltip) return;\n\n // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n };\n\n private syncInputsValue = () => {\n this.inputMinElem?.setAttribute('value', this.minValue.toString());\n this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n };\n\n private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n private handleInputChange = (type: 'min' \| 'max', event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n const value = parseFloat(target.value);\n\n if (type === 'min') {\n this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n } else if (type === 'max') {\n this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n }\n\n // Update the input value to reflect the clamped value\n const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n target.value = reflectedValue;\n target.setAttribute('value', reflectedValue);\n\n // Sync the prop value.\n // This will trigger the `@Watch('value')` method and emit the `bqChange` event.\n this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n };\n\n private calculatePercent = (value: number) => {\n const totalRange = Number(this.max) - Number(this.min);\n return (value / totalRange) 100;\n };\n\n private updateProgressTrack = () => {\n if (!this.progressElem) return;\n\n // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n // For non-range type, left starts from 0 and width is the `min` value.\n const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n const width = this.isRangeType\n ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))\n : this.calculatePercent(this.minValue);\n\n this.progressElem.style.left = `${left}%`;\n this.progressElem.style.width = `${width}%`;\n };\n\n private calculateThumbPosition = (value: number): number => {\n if (!this.progressElem) return;\n\n // Get the width of the track area and the size of the input range thumb\n const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n // We need to also add 4px to the thumb size,\n // this is because the thumb is 2px border (`border-2`)\n const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n const totalWidth = trackAreaWidth - inputThumbSize;\n\n return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n };\n\n private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n const minThumbPosition = this.calculateThumbPosition(this.minValue);\n const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n return { minThumbPosition, maxThumbPosition };\n };\n\n private emitBqChange = () => {\n this.debounceBqChange?.cancel();\n\n const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n this.debounceBqChange();\n };\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'remove');\n };\n\n private handleMouseUp = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'add');\n };\n\n private handleTooltipVisibility = (event: MouseEvent, action: 'add' \| 'remove') => {\n if (!this.enableTooltip \|\| this.tooltipAlwaysVisible) return;\n\n const target = event.target as HTMLElement;\n const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n tooltipElem.classList[action]('hidden');\n };\n\n private get decimalCount(): number {\n // Return the length of the decimal part of the step value.\n return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n }\n\n private get isRangeType() {\n return this.type === 'range';\n }\n\n private get isTooltipAlwaysVisible(): boolean {\n return this.tooltipAlwaysVisible && this.enableTooltip;\n }\n\n private renderLabel = (value: number, position: 'start' \| 'end', css?: string) => {\n return (\n <span\n class={{\n [`${css} box-content block w-fit min-w-8 text-s font-medium leading-regular text-text-primary [font-variant:tabular-nums]`]:\n true,\n hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator \|\| !this.isRangeType,\n }}\n part={`label-${position}`}\n >\n {value.toFixed(this.decimalCount)}\n </span>\n );\n };\n\n private renderInput = (type: 'max' \| 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n return (\n <input\n type=\"range\"\n class={{\n 'absolute start-0 top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed':\n true,\n 'pointer-events-none': this.isRangeType,\n }}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n ref={refCallback}\n onInput={(ev) => this.handleInputChange(type, ev)}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n value={value}\n part={`input-${type}`}\n />\n );\n };\n\n private renderTooltip = (\n value: number,\n thumbPosition: number,\n refCallback: (elem: HTMLBqTooltipElement) => void,\n ): HTMLBqTooltipElement => (\n <bq-tooltip\n class={{\n 'absolute [&::part(panel)]:absolute': true,\n hidden: !this.isTooltipAlwaysVisible,\n }}\n exportparts=\"base,trigger,panel\"\n alwaysVisible={true}\n distance={this.enableValueIndicator ? 6 : 16}\n style={{ left: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n ref={refCallback}\n >\n <div class=\"absolute size-1\" slot=\"trigger\" />\n {value.toFixed(this.decimalCount)}\n </bq-tooltip>\n );\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n aria-disabled={this.disabled ? 'true' : 'false'}\n class={{ 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n part=\"base\"\n >\n {/* LABEL (start) /}\n {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n {/ SLIDER /}\n <div class=\"relative w-full\" part=\"container\">\n {/ TRACK AREA /}\n <span\n class=\"absolute start-0 top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]\"\n ref={(elem) => (this.trackElem = elem)}\n part=\"track-area\"\n />\n {/ PROGRESS AREA /}\n <span\n class=\"absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]\"\n ref={(elem) => (this.progressElem = elem)}\n part=\"progress-area\"\n />\n {/ TOOLTIP on top of the value or min value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n {/ INPUT (Min), used on single type /}\n {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n {/ TOOLTIP on top of the max value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.isRangeType &&\n this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n {/ INPUT (Max) /}\n {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n </div>\n {/ LABEL (end) */}\n {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/slider/bq-slider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-slider.types.js","sourceRoot":"","sources":["../../../../../../src/components/slider/bq-slider.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const SLIDER_TYPE = ['single', 'range'] as const;\nexport type TSliderType = (typeof SLIDER_TYPE)[number];\n\nexport type TSliderValue = string \| number \| [~~number, number~~];\n"]}
1	+ {"version":3,"file":"bq-slider.types.js","sourceRoot":"","sources":["../../../../../../src/components/slider/bq-slider.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const SLIDER_TYPE = ['single', 'range'] as const;\nexport type TSliderType = (typeof SLIDER_TYPE)[number];\n\nexport type TSliderValue = string \| number \| number[];\n"]}

package/dist/collection/components/slider/scss/bq-slider.css CHANGED Viewed

	@@ -1 +1 @@
1	- ::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19},:after,:before{box-sizing:border-box}{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pointer-events-auto{pointer-events:auto}.box-content{box-sizing:content-box}.block{display:block}.size-\[--bq-slider--thumb-size\]{height:var(--bq-slider--thumb-size);width:var(--bq-slider--thumb-size)}.w-full{width:100%}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.rounded-full{border-radius:var(--bq-radius--full)}.border-2{border-width:2px}.border-solid{border-style:solid}.border-stroke-brand{border-color:var(--bq-stroke--brand)}.transition-\[background-color\2c border-color\2c box-shadow\]{transition-duration:.15s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.bg-active-ui-brand{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.border-active-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%)}.border-hover-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}.thumb-focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb-hover{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.thumb-active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-slider--size:4px;--bq-slider--border-radius:var(--bq-radius--xs);--bq-slider--thumb-size:13px;--bq-slider--progress-color:var(--bq-ui--brand);--bq-slider--trackarea-color:var(--bq-ui--secondary);display:block;width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-webkit-slider-runnable-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-webkit-slider-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-webkit-slider-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-webkit-slider-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-moz-range-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-moz-range-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-moz-range-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-moz-range-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-moz-range-thumb{cursor:not-allowed}.-translate-y-1\/2{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tabular-nums{--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.ms-xs{margin-inline-start:var(--bq-spacing-xs)}.flex{display:flex}.hidden{display:none}.size-1{width:.25rem}.h-1,.size-1{height:.25rem}.w-1\/2{width:50%}.w-fit{width:fit-content}.min-w-8{min-width:2rem}.rounded-xs{border-radius:var(--bq-radius--xs)}.border{border-width:1px}.bg-\[--bq-slider--progress-color\]{background-color:var(--bq-slider--progress-color)}.bg-\[--bq-slider--trackarea-color\]{background-color:var(--bq-slider--trackarea-color)}.bg-transparent{background-color:transparent}.text-start{text-align:start}.text-end{text-align:end}.text-s{font-size:var(--bq-font-size--s)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-60{opacity:.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.\[font-variant\:tabular-nums\]{font-variant:tabular-nums}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.\[\&\:\:part$panel$\]\:absolute::part(panel){position:absolute}.visible{visibility:visible}.fixed{position:fixed}
1	+ ::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19},:after,:before{box-sizing:border-box}{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pointer-events-auto{pointer-events:auto}.box-content{box-sizing:content-box}.block{display:block}.size-\[--bq-slider--thumb-size\]{height:var(--bq-slider--thumb-size);width:var(--bq-slider--thumb-size)}.w-full{width:100%}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.rounded-full{border-radius:var(--bq-radius--full)}.border-2{border-width:2px}.border-solid{border-style:solid}.border-stroke-brand{border-color:var(--bq-stroke--brand)}.transition-\[background-color\2c border-color\2c box-shadow\]{transition-duration:.15s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.bg-active-ui-brand{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.border-active-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%)}.border-hover-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}.thumb-focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb-hover{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.thumb-active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-slider--size:4px;--bq-slider--border-radius:var(--bq-radius--xs);--bq-slider--thumb-size:13px;--bq-slider--progress-color:var(--bq-ui--brand);--bq-slider--trackarea-color:var(--bq-ui--secondary);display:block;width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-webkit-slider-runnable-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-webkit-slider-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-webkit-slider-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-webkit-slider-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-moz-range-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-moz-range-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-moz-range-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-moz-range-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-moz-range-thumb{cursor:not-allowed}.-translate-y-1\/2{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tabular-nums{--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.start-0{inset-inline-start:0}.top-1\/2{top:50%}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.ms-xs{margin-inline-start:var(--bq-spacing-xs)}.flex{display:flex}.hidden{display:none}.size-1{width:.25rem}.h-1,.size-1{height:.25rem}.w-1\/2{width:50%}.w-fit{width:fit-content}.min-w-8{min-width:2rem}.rounded-xs{border-radius:var(--bq-radius--xs)}.border{border-width:1px}.bg-\[--bq-slider--progress-color\]{background-color:var(--bq-slider--progress-color)}.bg-\[--bq-slider--trackarea-color\]{background-color:var(--bq-slider--trackarea-color)}.bg-transparent{background-color:transparent}.text-start{text-align:start}.text-end{text-align:end}.text-s{font-size:var(--bq-font-size--s)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-60{opacity:.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.\[font-variant\:tabular-nums\]{font-variant:tabular-nums}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.\[\&\:\:part$panel$\]\:absolute::part(panel){position:absolute}.visible{visibility:visible}.fixed{position:fixed}

package/dist/collection/tools/angular-value-accessor-config.js CHANGED Viewed

@@ -16,7 +16,7 @@ export const angularValueAccessorBindings = [
     },
     {
         // Number
-        elementSelectors: ['bq-input[type="number"]', 'bq-slider'],
+        elementSelectors: ['bq-input[type="number"]', 'bq-slider:not[type="range"]'],
         event: 'bqChange',
         targetAttr: 'value',
         type: 'number',
@@ -37,7 +37,7 @@ export const angularValueAccessorBindings = [
     },
     {
         // Text
-        elementSelectors: ['bq-input:not[type="number"]', 'bq-textarea'],
+        elementSelectors: ['bq-input:not[type="number"]', 'bq-textarea', 'bq-slider[type="range"'],
         event: 'bqChange',
         targetAttr: 'value',
         type: 'text',