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/checkbox/bq-checkbox.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class BqCheckbox {
         this.formId = undefined;
         this.checked = undefined;
         this.disabled = false;
-        this.indeterminate = undefined;
+        this.indeterminate = false;
         this.name = undefined;
         this.required = undefined;
         this.value = undefined;
@@ -102,13 +102,13 @@ export class BqCheckbox {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("label", { key: 'db05740c3df13d890ed60b9bb78d8beca4bede65', class: {
+        return (h("label", { key: '8ef3a181f272b54b530172f739093e2bd14359e2', class: {
                 'bq-checkbox group': true,
                 'is-checked': this.checked,
                 'is-indeterminate': this.indeterminate,
                 'is-disabled !cursor-not-allowed': this.disabled,
                 'has-background': this.backgroundOnHover,
-            }, part: "base" }, h("div", { key: '1eab4bef621573c2895bf7c0d422a886d9126a42', class: "bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-xs3", part: "control" }, h("input", { key: '3657ee84f07c0e1797217a215b4df288fcb7c0f2', type: "checkbox", class: "bq-checkbox__input pointer-events-none absolute m-0 p-0 opacity-0", name: !isNil(this.name) ? this.name : undefined, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, form: this.formId, required: this.required, value: this.value, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', ref: (input) => (this.inputElem = input), onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", tabindex: "0" }), h("span", { key: 'dd636e71229989ec0ef78cf4221ad14f51cdd05d', class: "bq-checkbox__checkbox relative box-border flex h-full w-[var(--bq-checkbox--size)] items-center justify-center", part: "checkbox" }, this.checked && (h("svg", { key: '2caa87406d6d5e9e6ffde515bae66a9c4c7e60fa', xmlns: "http://www.w3.org/2000/svg", class: "absolute h-full w-full text-neutral-white", viewBox: "0 0 256 256" }, h("path", { key: '9115640b31ea2c5d2e8028efd48202a1ad0ac75f', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'bc6c5b827c9d5c9056eedfa7401eccf5a96884b9', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M216 72 104 184l-56-56" }))), !this.checked && this.indeterminate && (h("svg", { key: '01c44130974b13693d892714f9c0344791c59b38', xmlns: "http://www.w3.org/2000/svg", class: "absolute h-full w-full text-neutral-white", viewBox: "0 0 256 256", fill: "currentColor" }, h("path", { key: 'e79ddaf92e2a2548af26e6dd718dc09586c6172c', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'f3543a9386a92984b0f84cd07352a52caebcd6a3', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M40 128h176" }))))), h("span", { key: '7b7990c41373b0513f1db75367929202606185db', class: "bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: '04b91384b158b70488e8d3d9f09847e9a9e3eb02' }))));
+            }, part: "base" }, h("div", { key: '29125e80c318222cb660aec6273c666eed5a15ba', class: "bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-xs3", part: "control" }, h("input", { key: 'f665aec8d5aa528d63bce77826d0bfa77d9c32db', type: "checkbox", class: "bq-checkbox__input pointer-events-none absolute m-0 p-0 opacity-0", name: !isNil(this.name) ? this.name : undefined, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, form: this.formId, required: this.required, value: this.value, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', ref: (input) => (this.inputElem = input), onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", tabindex: "0" }), h("span", { key: '7773a7b4c155e88e6d05ee0665a993d2ad8f6499', class: "bq-checkbox__checkbox relative box-border flex h-full w-[var(--bq-checkbox--size)] items-center justify-center", part: "checkbox" }, this.checked && (h("svg", { key: '950869630444fe6883559ea99b1e27fa2bb8e6af', xmlns: "http://www.w3.org/2000/svg", class: "absolute h-full w-full text-neutral-white", viewBox: "0 0 256 256" }, h("path", { key: '93de424fc2ce483fbb85d8869f95651463776723', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'ea0c932a0596b50a58b020891e4a1b471aa3e642', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M216 72 104 184l-56-56" }))), !this.checked && this.indeterminate && (h("svg", { key: '0ddac34f289e56e2e05b5d6ba301994be105848a', xmlns: "http://www.w3.org/2000/svg", class: "absolute h-full w-full text-neutral-white", viewBox: "0 0 256 256", fill: "currentColor" }, h("path", { key: '3a0b1514214f66edbb907a9e320af99f240f7134', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'ca859995a806f8520cf6ba6dfc6602ec26a9b1b8', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M40 128h176" }))))), h("span", { key: '424777693df82fac825372ba4d6caed42b2f313d', class: "bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: '822cd629f175d6aa90ecfac3497dd695c0d8c444' }))));
     }
     static get is() { return "bq-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -198,18 +198,19 @@ export class BqCheckbox {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "false",
+                    "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "A state that is neither checked nor unchecked"
                 },
                 "attribute": "indeterminate",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "false"
             },
             "name": {
                 "type": "string",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/*\n @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n /\n@Component({\n tag: 'bq-checkbox',\n styleUrl: './scss/bq-checkbox.scss',\n shadow: true,\n})\nexport class BqCheckbox {\n // Own Properties\n // ====================\n\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqCheckboxElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true checkbox displays background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* The form ID that the checkbox is associated with /\n @Prop({ reflect: true }) formId?: string;\n\n /* If true checkbox is checked /\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /* If true checkbox is disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* A state that is neither checked nor unchecked /\n @Prop({ reflect: true, mutable: true }) indeterminate: false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean;\n\n /* A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('indeterminate')\n handleIndeterminatePropChange() {\n if (!this.inputElem) return;\n\n this.inputElem.indeterminate = this.indeterminate;\n if (this.indeterminate) {\n this.checked = false;\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the chebkbox state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the checkbox gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n /* Handler to be called when the checkbox loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\n }\n\n componentDidUpdate() {\n /\n We need to trigger the `bqChange` immediately after the first update happens\n * so the checked attribute get applied, otherwise, a delay will happen\n * between the event emits and when the checked attribute value gets reflected in the element host.\n /\n if (this.checked !== this.prevCheckedValue) {\n if (!this.indeterminate) {\n this.bqChange.emit({ checked: this.checked });\n }\n this.prevCheckedValue = this.checked;\n }\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 /\n Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n /\n @Method()\n async vClick() {\n this.inputElem?.click();\n }\n\n /\n Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n /\n @Method()\n async vFocus() {\n this.inputElem?.focus();\n }\n\n /\n Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n /\n @Method()\n async vBlur() {\n this.inputElem?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\n this.indeterminate = false;\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n class={{\n 'bq-checkbox group': true,\n 'is-checked': this.checked,\n 'is-indeterminate': this.indeterminate,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n >\n <div\n class=\"bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-xs3\"\n part=\"control\"\n >\n <input\n type=\"checkbox\"\n class=\"bq-checkbox__input pointer-events-none absolute m-0 p-0 opacity-0\"\n name={!isNil(this.name) ? this.name : undefined}\n checked={this.checked}\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n form={this.formId}\n required={this.required}\n value={this.value}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n ref={(input: HTMLInputElement) => (this.inputElem = input)}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n part=\"input\"\n tabindex=\"0\"\n />\n <span\n class=\"bq-checkbox__checkbox relative box-border flex h-full w-[var(--bq-checkbox--size)] items-center justify-center\"\n part=\"checkbox\"\n >\n {/\n We could move these SVGs to separated functional components, but it seems there's a weird issue with\n Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n */}\n {this.checked && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"absolute h-full w-full text-neutral-white\"\n viewBox=\"0 0 256 256\"\n >\n <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n d=\"M216 72 104 184l-56-56\"\n />\n </svg>\n )}\n {!this.checked && this.indeterminate && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"absolute h-full w-full text-neutral-white\"\n viewBox=\"0 0 256 256\"\n fill=\"currentColor\"\n >\n <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n d=\"M40 128h176\"\n />\n </svg>\n )}\n </span>\n </div>\n <span\n class=\"bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60\"\n part=\"label\"\n >\n <slot />\n </span>\n </label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/*\n @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n /\n@Component({\n tag: 'bq-checkbox',\n styleUrl: './scss/bq-checkbox.scss',\n shadow: true,\n})\nexport class BqCheckbox {\n // Own Properties\n // ====================\n\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqCheckboxElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true checkbox displays background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* The form ID that the checkbox is associated with /\n @Prop({ reflect: true }) formId?: string;\n\n /* If true checkbox is checked /\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /* If true checkbox is disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* A state that is neither checked nor unchecked /\n @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean;\n\n /* A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('indeterminate')\n handleIndeterminatePropChange() {\n if (!this.inputElem) return;\n\n this.inputElem.indeterminate = this.indeterminate;\n if (this.indeterminate) {\n this.checked = false;\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the chebkbox state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the checkbox gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n /* Handler to be called when the checkbox loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\n }\n\n componentDidUpdate() {\n /\n We need to trigger the `bqChange` immediately after the first update happens\n * so the checked attribute get applied, otherwise, a delay will happen\n * between the event emits and when the checked attribute value gets reflected in the element host.\n /\n if (this.checked !== this.prevCheckedValue) {\n if (!this.indeterminate) {\n this.bqChange.emit({ checked: this.checked });\n }\n this.prevCheckedValue = this.checked;\n }\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 /\n Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n /\n @Method()\n async vClick() {\n this.inputElem?.click();\n }\n\n /\n Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n /\n @Method()\n async vFocus() {\n this.inputElem?.focus();\n }\n\n /\n Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n /\n @Method()\n async vBlur() {\n this.inputElem?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\n this.indeterminate = false;\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n class={{\n 'bq-checkbox group': true,\n 'is-checked': this.checked,\n 'is-indeterminate': this.indeterminate,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n >\n <div\n class=\"bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-xs3\"\n part=\"control\"\n >\n <input\n type=\"checkbox\"\n class=\"bq-checkbox__input pointer-events-none absolute m-0 p-0 opacity-0\"\n name={!isNil(this.name) ? this.name : undefined}\n checked={this.checked}\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n form={this.formId}\n required={this.required}\n value={this.value}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n ref={(input: HTMLInputElement) => (this.inputElem = input)}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n part=\"input\"\n tabindex=\"0\"\n />\n <span\n class=\"bq-checkbox__checkbox relative box-border flex h-full w-[var(--bq-checkbox--size)] items-center justify-center\"\n part=\"checkbox\"\n >\n {/\n We could move these SVGs to separated functional components, but it seems there's a weird issue with\n Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n */}\n {this.checked && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"absolute h-full w-full text-neutral-white\"\n viewBox=\"0 0 256 256\"\n >\n <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n d=\"M216 72 104 184l-56-56\"\n />\n </svg>\n )}\n {!this.checked && this.indeterminate && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"absolute h-full w-full text-neutral-white\"\n viewBox=\"0 0 256 256\"\n fill=\"currentColor\"\n >\n <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n d=\"M40 128h176\"\n />\n </svg>\n )}\n </span>\n </div>\n <span\n class=\"bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-hover-text-primary group-[.is-disabled]:opacity-60\"\n part=\"label\"\n >\n <slot />\n </span>\n </label>\n );\n }\n}\n"]}

package/dist/collection/components/drawer/scss/bq-drawer.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))}.bq-drawer,.shadow-m{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.inset-y-0{bottom:0;top:0}.z-10{z-index:10}.flex{display:flex}.w-\[--bq-drawer--width\]{width:var(--bq-drawer--width)}.max-w-full{max-width:100%}.flex-col{flex-direction:column}.gap-\[--bq-drawer--gap\]{gap:var(--bq-drawer--gap)}.bg-bg-primary{background-color:var(--bq-background--primary)}.px-\[--bq-drawer--paddingX\]{padding-left:var(--bq-drawer--paddingX);padding-right:var(--bq-drawer--paddingX)}.py-\[--bq-drawer--paddingY\]{padding-bottom:var(--bq-drawer--paddingY);padding-top:var(--bq-drawer--paddingY)}.shadow-m{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@-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-drawer--backgroundBackdrop:var(--bq-grey-900);--bq-drawer--gap:var(--bq-spacing-l);--bq-drawer--width:320px;--bq-drawer--paddingX:var(--bq-spacing-l);--bq-drawer--paddingY:var(--bq-spacing-m);--bq-drawer--zIndex:9999;visibility:hidden!important}:host(.bq-drawer--open){visibility:visible!important}.bq-drawer{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);background-color:var(--bq-background--primary);bottom:0;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;gap:var(--bq-drawer--gap);max-width:100%;padding:var(--bq-drawer--paddingY) var(--bq-drawer--paddingX);position:fixed;top:0;width:var(--bq-drawer--width);z-index:10}.-translate-x-full,.translate-x-full{--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-none{pointer-events:none}.static{position:static}.inset-0{inset:0}.left-0{left:0}.right-0{right:0}.mb-m{margin-bottom:var(--bq-spacing-m)}.block{display:block}.\!hidden{display:none!important}.hidden{display:none}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.-translate-x-full{--tw-translate-x:-100%}.translate-x-full{--tw-translate-x:100%}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.bg-\[--bq-drawer--backgroundBackdrop\]{background-color:var(--bq-drawer--backgroundBackdrop)}.font-bold{font-weight:var(--bq-font-weight--bold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-60{opacity:.6}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}.\[\&\:\:part$button$\]\:h-fit::part(button){height:fit-content}.\[\&\:\:part$button$\]\:rounded-s::part(button){border-radius:var(--bq-radius--s)}.\[\&\:\:part$button$\]\:border-0::part(button){border-width:0}.\[\&\:\:part$button$\]\:p-0::part(button){padding:0}.gap-0{gap:0}.h-\[var$--bq-icon--size$\]{height:var(--bq-icon--size)}.w-\[var$--bq-icon--size$\]{width:var(--bq-icon--size)}.text-\[color\:var$--bq-icon--color$\]{color:var(--bq-icon--color)}.border{border-width:1px}.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}}
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))}.bq-drawer,.shadow-m{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.inset-y-0{bottom:0;top:0}.z-10{z-index:10}.flex{display:flex}.w-\[--bq-drawer--width\]{width:var(--bq-drawer--width)}.max-w-full{max-width:100%}.flex-col{flex-direction:column}.gap-\[--bq-drawer--gap\]{gap:var(--bq-drawer--gap)}.bg-bg-primary{background-color:var(--bq-background--primary)}.px-\[--bq-drawer--paddingX\]{padding-left:var(--bq-drawer--paddingX);padding-right:var(--bq-drawer--paddingX)}.py-\[--bq-drawer--paddingY\]{padding-bottom:var(--bq-drawer--paddingY);padding-top:var(--bq-drawer--paddingY)}.shadow-m{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@-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-drawer--backgroundBackdrop:var(--bq-grey-900);--bq-drawer--gap:var(--bq-spacing-l);--bq-drawer--width:320px;--bq-drawer--paddingX:var(--bq-spacing-l);--bq-drawer--paddingY:var(--bq-spacing-m);--bq-drawer--zIndex:9999;visibility:hidden!important}:host(.bq-drawer--open){visibility:visible!important}.bq-drawer{--tw-shadow:var(--bq-box-shadow--m);--tw-shadow-colored:var(--bq-box-shadow--m);background-color:var(--bq-background--primary);bottom:0;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;flex-direction:column;gap:var(--bq-drawer--gap);max-width:100%;padding:var(--bq-drawer--paddingY) var(--bq-drawer--paddingX);position:fixed;top:0;width:var(--bq-drawer--width);z-index:10}.-translate-x-full,.translate-x-full{--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-none{pointer-events:none}.static{position:static}.inset-0{inset:0}.left-0{left:0}.right-0{right:0}.mb-m{margin-bottom:var(--bq-spacing-m)}.block{display:block}.\!hidden{display:none!important}.hidden{display:none}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.-translate-x-full{--tw-translate-x:-100%}.translate-x-full{--tw-translate-x:100%}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.bg-\[--bq-drawer--backgroundBackdrop\]{background-color:var(--bq-drawer--backgroundBackdrop)}.font-bold{font-weight:var(--bq-font-weight--bold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-60{opacity:.6}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;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)}.\[\&\:\:part$button$\]\:h-fit::part(button){height:fit-content}.\[\&\:\:part$button$\]\:rounded-s::part(button){border-radius:var(--bq-radius--s)}.\[\&\:\:part$button$\]\:border-0::part(button){border-width:0}.\[\&\:\:part$button$\]\:p-0::part(button){padding:0}.h-\[var$--bq-icon--size$\]{height:var(--bq-icon--size)}.w-\[var$--bq-icon--size$\]{width:var(--bq-icon--size)}.text-\[color\:var$--bq-icon--color$\]{color:var(--bq-icon--color)}.gap-0{gap:0}.border{border-width:1px}.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}}

package/dist/collection/components/icon/__tests__/bq-icon.e2e.js CHANGED Viewed

@@ -13,20 +13,23 @@ const waitForSvgLoad = async (elem) => {
 };
 describe('bq-icon', () => {
     it('should render', async () => {
-        const page = await newE2EPage();
-        await page.setContent('<bq-icon></bq-icon>');
+        const page = await newE2EPage({
+            html: '<bq-icon></bq-icon>',
+        });
         const element = await page.find('bq-icon');
         expect(element).toHaveClass('hydrated');
     });
     it('should have shadow root', async () => {
-        const page = await newE2EPage();
-        await page.setContent('<bq-icon></bq-icon>');
+        const page = await newE2EPage({
+            html: '<bq-icon></bq-icon>',
+        });
         const element = await page.find('bq-icon');
         expect(element.shadowRoot).not.toBeNull();
     });
     it('should display icon', async () => {
-        const page = await newE2EPage();
-        await page.setContent('<bq-icon name="pulse"></bq-icon>');
+        const page = await newE2EPage({
+            html: '<bq-icon name="pulse"></bq-icon>',
+        });
         await page.$eval('bq-icon', waitForSvgLoad);
         const element = await page.find('bq-icon >>> [part="svg"]');
         expect(element.innerHTML).toBeDefined();
@@ -35,8 +38,9 @@ describe('bq-icon', () => {
     `);
     });
     it('should handle `name` property change', async () => {
-        const page = await newE2EPage();
-        await page.setContent('<bq-icon name="pulse"></bq-icon>');
+        const page = await newE2EPage({
+            html: '<bq-icon name="pulse"></bq-icon>',
+        });
         await setProperties(page, 'bq-icon', { name: 'check' });
         await page.$eval('bq-icon', waitForSvgLoad);
         await page.waitForChanges();
@@ -47,14 +51,16 @@ describe('bq-icon', () => {
     `);
     });
     it('should respect design style', async () => {
-        const page = await newE2EPage();
-        await page.setContent('<bq-icon name="pulse"></bq-icon>');
+        const page = await newE2EPage({
+            html: '<bq-icon name="pulse"></bq-icon>',
+        });
         const style = await computedStyle(page, 'bq-icon >>> [part="base"]', ['height']);
         expect(style).toEqual({ height: '24px' });
     });
     it('should change size', async () => {
-        const page = await newE2EPage();
-        await page.setContent('<bq-icon size="30"></bq-icon>');
+        const page = await newE2EPage({
+            html: '<bq-icon size="30"></bq-icon>',
+        });
         const style = await computedStyle(page, 'bq-icon >>> [part="base"]', ['height']);
         expect(style).toEqual({ height: '30px' });
     });

package/dist/collection/components/icon/__tests__/bq-icon.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-icon.e2e.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/__tests__/bq-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE1E,MAAM,cAAc,GAAG,KAAK,EAAE,IAAuB,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC9D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/E,CAAC;IACD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC3B,CAAC,CAAC;AAEF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,~~EAAE,~~CAAC;~~QAChC~~,~~MAAM,~~IAAI,~~CAAC~~,~~UAAU,CAAC,~~qBAAqB,CAAC,CAAC;~~QAE7C~~,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE3C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,UAAU,~~EAAE,~~CAAC;~~QAChC~~,~~MAAM,~~IAAI,~~CAAC~~,~~UAAU,CAAC,~~qBAAqB,CAAC,CAAC;~~QAE7C~~,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE3C,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;QACnC,MAAM,IAAI,GAAG,MAAM,UAAU,~~EAAE,~~CAAC;~~QAChC~~,~~MAAM,~~IAAI,~~CAAC~~,~~UAAU,CAAC,~~kCAAkC,CAAC,CAAC;~~QAE1D~~,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAE5C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC5D,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC;;KAErC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,UAAU,~~EAAE,~~CAAC;~~QAChC~~,~~MAAM,~~IAAI,~~CAAC~~,~~UAAU,CAAC,~~kCAAkC,CAAC,CAAC;~~QAE1D~~,MAAM,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACxD,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;QAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC5D,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,WAAW,EAAE,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC;;KAErC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,UAAU,~~EAAE,~~CAAC;~~QAChC~~,~~MAAM,~~IAAI,~~CAAC~~,~~UAAU,CAAC,~~kCAAkC,CAAC,CAAC;~~QAE1D~~,MAAM,KAAK,GAAG,MAAM,aAAa,CAAC,IAAI,EAAE,2BAA2B,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEjF,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;QAClC,MAAM,IAAI,GAAG,MAAM,UAAU,~~EAAE,~~CAAC;~~QAChC~~,~~MAAM,~~IAAI,~~CAAC,UAAU,CAAC~~,+BAA+B,CAAC,CAAC;~~QAEvD~~,MAAM,KAAK,GAAG,MAAM,aAAa,CAAC,IAAI,EAAE,2BAA2B,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEjF,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\nimport { computedStyle, setProperties } from '../../../shared/test-utils';\n\nconst waitForSvgLoad = async (elem: HTMLBqIconElement) => {\n const partSVG = elem.shadowRoot.querySelector('[part=\"svg\"]');\n if (!partSVG) {\n return new Promise((resolve) => elem.addEventListener('svgLoaded', resolve));\n }\n return Promise.resolve();\n};\n\ndescribe('bq-icon', () => {\n it('should render', async () => {\n const page = await newE2EPage(~~);\~~n ~~await~~ ~~page.setContent(~~'<bq-icon></bq-icon>');\n\n const element = await page.find('bq-icon');\n\n expect(element).toHaveClass('hydrated');\n });\n\n it('should have shadow root', async () => {\n const page = await newE2EPage(~~);\~~n ~~await~~ ~~page.setContent(~~'<bq-icon></bq-icon>');\n\n const element = await page.find('bq-icon');\n\n expect(element.shadowRoot).not.toBeNull();\n });\n\n it('should display icon', async () => {\n const page = await newE2EPage(~~);\~~n ~~await~~ ~~page.setContent(~~'<bq-icon name=\"pulse\"></bq-icon>');\n\n await page.$eval('bq-icon', waitForSvgLoad);\n\n const element = await page.find('bq-icon >>> [part=\"svg\"]');\n expect(element.innerHTML).toBeDefined();\n expect(element.innerHTML).toEqualHtml(`\n <path d=\"M240,128a8,8,0,0,1-8,8H204.94l-37.78,75.58A8,8,0,0,1,160,216h-.4a8,8,0,0,1-7.08-5.14L95.35,60.76,63.28,131.31A8,8,0,0,1,56,136H24a8,8,0,0,1,0-16H50.85L88.72,36.69a8,8,0,0,1,14.76.46l57.51,151,31.85-63.71A8,8,0,0,1,200,120h32A8,8,0,0,1,240,128Z\"></path>\n `);\n });\n\n it('should handle `name` property change', async () => {\n const page = await newE2EPage(~~);\~~n ~~await~~ ~~page.setContent(~~'<bq-icon name=\"pulse\"></bq-icon>');\n\n await setProperties(page, 'bq-icon', { name: 'check' });\n await page.$eval('bq-icon', waitForSvgLoad);\n await page.waitForChanges();\n\n const element = await page.find('bq-icon >>> [part=\"svg\"]');\n expect(element.innerHTML).toBeDefined();\n expect(element.innerHTML).toEqualHtml(`\n <path d=\"M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z\"></path>\n `);\n });\n\n it('should respect design style', async () => {\n const page = await newE2EPage(~~);\~~n ~~await~~ ~~page.setContent(~~'<bq-icon name=\"pulse\"></bq-icon>');\n\n const style = await computedStyle(page, 'bq-icon >>> [part=\"base\"]', ['height']);\n\n expect(style).toEqual({ height: '24px' });\n });\n\n it('should change size', async () => {\n const page = await newE2EPage(~~);\~~n ~~await~~ ~~page.setContent(~~'<bq-icon size=\"30\"></bq-icon>');\n\n const style = await computedStyle(page, 'bq-icon >>> [part=\"base\"]', ['height']);\n\n expect(style).toEqual({ height: '30px' });\n });\n});\n"]}
1	+ {"version":3,"file":"bq-icon.e2e.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/__tests__/bq-icon.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\nimport { computedStyle, setProperties } from '../../../shared/test-utils';\n\nconst waitForSvgLoad = async (elem: HTMLBqIconElement) => {\n const partSVG = elem.shadowRoot.querySelector('[part=\"svg\"]');\n if (!partSVG) {\n return new Promise((resolve) => elem.addEventListener('svgLoaded', resolve));\n }\n return Promise.resolve();\n};\n\ndescribe('bq-icon', () => {\n it('should render', async () => {\n const page = await newE2EPage({\n html: '<bq-icon></bq-icon>',\n });\n\n const element = await page.find('bq-icon');\n\n expect(element).toHaveClass('hydrated');\n });\n\n it('should have shadow root', async () => {\n const page = await newE2EPage({\n html: '<bq-icon></bq-icon>',\n });\n\n const element = await page.find('bq-icon');\n\n expect(element.shadowRoot).not.toBeNull();\n });\n\n it('should display icon', async () => {\n const page = await newE2EPage({\n html: '<bq-icon name=\"pulse\"></bq-icon>',\n });\n\n await page.$eval('bq-icon', waitForSvgLoad);\n\n const element = await page.find('bq-icon >>> [part=\"svg\"]');\n expect(element.innerHTML).toBeDefined();\n expect(element.innerHTML).toEqualHtml(`\n <path d=\"M240,128a8,8,0,0,1-8,8H204.94l-37.78,75.58A8,8,0,0,1,160,216h-.4a8,8,0,0,1-7.08-5.14L95.35,60.76,63.28,131.31A8,8,0,0,1,56,136H24a8,8,0,0,1,0-16H50.85L88.72,36.69a8,8,0,0,1,14.76.46l57.51,151,31.85-63.71A8,8,0,0,1,200,120h32A8,8,0,0,1,240,128Z\"></path>\n `);\n });\n\n it('should handle `name` property change', async () => {\n const page = await newE2EPage({\n html: '<bq-icon name=\"pulse\"></bq-icon>',\n });\n\n await setProperties(page, 'bq-icon', { name: 'check' });\n await page.$eval('bq-icon', waitForSvgLoad);\n await page.waitForChanges();\n\n const element = await page.find('bq-icon >>> [part=\"svg\"]');\n expect(element.innerHTML).toBeDefined();\n expect(element.innerHTML).toEqualHtml(`\n <path d=\"M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z\"></path>\n `);\n });\n\n it('should respect design style', async () => {\n const page = await newE2EPage({\n html: '<bq-icon name=\"pulse\"></bq-icon>',\n });\n\n const style = await computedStyle(page, 'bq-icon >>> [part=\"base\"]', ['height']);\n\n expect(style).toEqual({ height: '24px' });\n });\n\n it('should change size', async () => {\n const page = await newE2EPage({\n html: '<bq-icon size=\"30\"></bq-icon>',\n });\n\n const style = await computedStyle(page, 'bq-icon >>> [part=\"base\"]', ['height']);\n\n expect(style).toEqual({ height: '30px' });\n });\n});\n"]}

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

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { Env, h, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getSvgContent, iconContent } from "./helper/request";
 import { getBasePath, getColorCSSVariable } from "../../shared/utils";
 /**
@@ -45,10 +45,9 @@ export class BqIcon {
             const REGULAR = 'regular';
             const SVG_EXTENSION = '.svg';
             const LOCAL_SVG_PATH = './svg/';
-            const ENV_SVG_PATH = Env.ICONS_SVG_PATH;
             // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.
             // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.
-            const isWeightedIcon = this.weight !== REGULAR && !ENV_SVG_PATH;
+            const isWeightedIcon = this.weight !== REGULAR;
             // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.
             // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.
             const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';
@@ -57,8 +56,7 @@ export class BqIcon {
             const iconName = `${this.name}${weightSuffix}${SVG_EXTENSION}`;
             // Construct the path to the icon file.
             // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.
-            // Eg: if iconName is 'my-icon-bold.svg' and ENV_SVG_PATH is 'https://mycdn.com/icons', iconPath will be 'https://mycdn.com/icons/my-icon-bold.svg'.
-            const iconPath = !ENV_SVG_PATH ? `${LOCAL_SVG_PATH}${iconName}` : `${ENV_SVG_PATH}/${iconName}`;
+            const iconPath = `${LOCAL_SVG_PATH}${iconName}`;
             // Return the icon name and path.
             return { iconName, iconPath };
         };
@@ -90,7 +88,7 @@ export class BqIcon {
             ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),
             ...(this.size && { '--bq-icon--size': `${this.size}px` }),
         };
-        return (h(Host, { key: '581f1bdb9b5777e36cef4f4939cb6a99791e65fc', style: styles }, h("div", { key: 'e099c40a9a1b494ef6f4b3c59c3151370f25b036', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : `${this.name} icon`, class: "flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]", innerHTML: this._svgContent, part: "base", role: "img" })));
+        return (h(Host, { key: '93064986f0beaecc9b96e85a0f4fb1b86ea35f35', style: styles }, h("div", { key: '2d9320d4cfcd0ca171bfd0bcef6459ee369503c4', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : `${this.name} icon`, class: "flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]", innerHTML: this._svgContent, part: "base", role: "img" })));
     }
     static get is() { return "bq-icon"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-icon.js","sourceRoot":"","sources":["../../../../../../src/components/icon/bq-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,~~GAAG,EAAE,~~KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAGjG~~,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEtE;;;;;GAKG;AAOH,MAAM,OAAO,MAAM;;QA4DjB,YAAY;QACZ,iBAAiB;QAEjB,qBAAqB;QACrB,iDAAiD;QACjD,wBAAwB;QACxB,gCAAgC;QAChC,gDAAgD;QAChD,kDAAkD;QAElD,gBAAgB;QAChB,2BAA2B;QAC3B,wDAAwD;QACxD,0DAA0D;QAElD,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG;gBAAE,OAAO;YACpC,8BAA8B;YAC9B,IAAI,IAAI,CAAC,GAAG;gBAAE,OAAO,IAAI,CAAC,GAAG,CAAC;YAE9B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC3C,OAAO,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,aAAQ,GAAG,GAAG,EAAE;YACtB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACjC,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;gBACjC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBACxC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,mBAAc,GAAG,GAA2C,EAAE;YACpE,MAAM,OAAO,GAAG,SAAS,CAAC;YAC1B,MAAM,aAAa,GAAG,MAAM,CAAC;YAC7B,MAAM,cAAc,GAAG,QAAQ,CAAC;~~YAChC~~,~~MAAM,YAAY,GAAG,GAAG,CAAC,cAAc,CAAC;YAExC,~~4HAA4H;YAC5H,wFAAwF;YACxF,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,KAAK,OAAO,~~IAAI,~~CAAC~~,YAAY,CAAC~~;~~YAEhE~~,0FAA0F;YAC1F,wFAAwF;YACxF,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAE7D,0FAA0F;YAC1F,iGAAiG;YACjG,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,aAAa,EAAE,CAAC;YAE/D,uCAAuC;YACvC,oFAAoF;YACpF,~~oJAAoJ;YACpJ,~~MAAM,QAAQ,GAAG,~~CAAC,YAAY,CAAC,CAAC,CAAC,~~GAAG,cAAc,GAAG,QAAQ,EAAE,CAAC~~,CAAC,CAAC,GAAG,YAAY,IAAI,QAAQ,EAAE,CAAC~~;~~YAEhG~~,iCAAiC;YACjC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;QAChC,CAAC,CAAC;;;;;~~oBA3FgD~~,EAAE;;sBAMJ,SAAS;;IAEzD,wBAAwB;IACxB,0BAA0B;IAM1B,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IASD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;~~IA6DD~~,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;;QACJ,MAAM,MAAM,GAAG;YACb,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1E,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;SAC1D,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,MAAM;YACjB,0EACc,MAAA,IAAI,CAAC,KAAK,mCAAI,GAAG,IAAI,CAAC,IAAI,OAAO,EAC7C,KAAK,EAAC,2FAA2F,EACjG,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,GACV,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ~~Env,~~ Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable } from '../../shared/utils';\n\n/*\n Icons are simplified images that graphically explain the meaning of an object on the screen.\n \n @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n /\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private _svgContent: string;\n\n // Public Property API\n // ========================\n\n /* Label for the icon, used for accessibility /\n @Prop({ reflect: true }) label?: string;\n\n /* Set the stroke color of the SVG. The value should be a valid value of the palette color /\n @Prop({ reflect: true }) color?: string;\n\n /* Icon name to load. Please check all available icons [here](https://phosphoricons.com/) /\n @Prop({ reflect: true }) name!: string;\n\n /* Set the size of the SVG /\n @Prop({ reflect: true }) size?: string \| number = 24;\n\n /* Set the source of the SVG. If the source is set, the name property will be ignored /\n @Prop({ reflect: true }) src?: string;\n\n /* It set the icon weight/style /\n @Prop({ reflect: true }) weight?: TIconWeight = 'regular';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n @Watch('weight')\n handlePropsChange() {\n this.loadIcon();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handlePropsChange();\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 getIconSource = () => {\n if (!this.name && !this.src) return;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const { iconPath } = this.getIconDetails();\n return getBasePath(iconPath);\n };\n\n private loadIcon = () => {\n const url = this.getIconSource();\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n private getIconDetails = (): { iconName: string; iconPath: string } => {\n const REGULAR = 'regular';\n const SVG_EXTENSION = '.svg';\n const LOCAL_SVG_PATH = './svg/';\n ~~const ENV_SVG_PATH = Env.ICONS_SVG_PATH;\n~~\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const isWeightedIcon = this.weight !== REGULAR ~~&& !ENV_SVG_PATH~~;\n\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}${SVG_EXTENSION}`;\n\n // Construct the path to the icon file.\n // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.\n ~~// Eg: if iconName is 'my-icon-bold.svg' and ENV_SVG_PATH is 'https://mycdn.com/icons', iconPath will be 'https://mycdn.com/icons/my-icon-bold.svg'.\n~~ const iconPath = ~~!ENV_SVG_PATH ?~~ `${LOCAL_SVG_PATH}${iconName}~~` : `${ENV_SVG_PATH}/${iconName}~~`;\n\n // Return the icon name and path.\n return { iconName, iconPath };\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={this.label ?? `${this.name} icon`}\n class=\"flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-icon.js","sourceRoot":"","sources":["../../../../../../src/components/icon/bq-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable } from '../../shared/utils';\n\n/*\n Icons are simplified images that graphically explain the meaning of an object on the screen.\n \n @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n /\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private _svgContent: string;\n\n // Public Property API\n // ========================\n\n /* Label for the icon, used for accessibility /\n @Prop({ reflect: true }) label?: string;\n\n /* Set the stroke color of the SVG. The value should be a valid value of the palette color /\n @Prop({ reflect: true }) color?: string;\n\n /* Icon name to load. Please check all available icons [here](https://phosphoricons.com/) /\n @Prop({ reflect: true }) name!: string;\n\n /* Set the size of the SVG /\n @Prop({ reflect: true }) size?: string \| number = 24;\n\n /* Set the source of the SVG. If the source is set, the name property will be ignored /\n @Prop({ reflect: true }) src?: string;\n\n /* It set the icon weight/style /\n @Prop({ reflect: true }) weight?: TIconWeight = 'regular';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n @Watch('weight')\n handlePropsChange() {\n this.loadIcon();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.handlePropsChange();\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 getIconSource = () => {\n if (!this.name && !this.src) return;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const { iconPath } = this.getIconDetails();\n return getBasePath(iconPath);\n };\n\n private loadIcon = () => {\n const url = this.getIconSource();\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n private getIconDetails = (): { iconName: string; iconPath: string } => {\n const REGULAR = 'regular';\n const SVG_EXTENSION = '.svg';\n const LOCAL_SVG_PATH = './svg/';\n\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const isWeightedIcon = this.weight !== REGULAR;\n\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}${SVG_EXTENSION}`;\n\n // Construct the path to the icon file.\n // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.\n const iconPath = `${LOCAL_SVG_PATH}${iconName}`;\n\n // Return the icon name and path.\n return { iconName, iconPath };\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={this.label ?? `${this.name} icon`}\n class=\"flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"]}

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

@@ -5,7 +5,6 @@
 /* -------------------------------------------------------------------------- */
 /*                             Icon request helper                            */
 /* -------------------------------------------------------------------------- */
-import { Env } from "@stencil/core";
 import { isString } from "../../../shared/utils";
 const requests = new Map();
 const fetchSvg = async (url, sanitize) => {
@@ -37,7 +36,7 @@ export const getSvgContent = async (url, sanitize) => {
 };
 export const validateContent = (svgContent) => {
     const svgTag = 'svg';
-    const iconCssClass = !Env.ICONS_SVG_PATH ? 'bq-icon__svg' : '';
+    const iconCssClass = 'bq-icon__svg';
     const div = document.createElement('div');
     div.innerHTML = svgContent;
     for (let i = div.childNodes.length - 1; i >= 0; i--) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/helper/request.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,gFAAgF;AAChF,gFAAgF;AAEhF,OAAO,EAAE,~~GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAE,~~QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA4B,CAAC;AAErD,MAAM,QAAQ,GAAG,KAAK,EAAE,GAAW,EAAE,QAAiB,EAAoB,EAAE;IAC1E,IAAI,GAAqB,CAAC;IAE1B,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpE,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC;YACX,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE;gBACpC,IAAI,UAAU,IAAI,QAAQ,KAAK,KAAK;oBAAE,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;gBAC/E,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;QACL,CAAC;QACD,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACzB,8BAA8B;QAC9B,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACvB,OAAO,GAAG,CAAC;IACb,CAAC;IAED,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACzB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,GAAG,EAAkB,CAAC;AAErD,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,GAAW,EAAE,QAAiB,EAAE,EAAE;IACpE,qDAAqD;IACrD,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC,IAAI,CAAC,GAAG;QAAE,OAAO,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAEzC,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAU,EAAE;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC;IACrB,MAAM,YAAY,GAAG,~~CAAC,GAAG,CAAC,~~cAAc,CAAC~~,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC~~;~~IAE/D~~,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC;IAE3B,KAAK,IAAI,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACpD,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE,CAAC;YACxD,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,gCAAgC;IAChC,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC;IACrC,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE,CAAC;QACvD,+EAA+E;QAC/E,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC5D,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,gBAAgB,IAAI,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;QAC3E,8CAA8C;QAC9C,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEpC,8FAA8F;QAC9F,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QACjC,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAEhC,8BAA8B;QAC9B,6CAA6C;QAC7C,uBAAuB;QACvB,IAAI,OAAO,CAAC,MAAqB,CAAC;YAAE,OAAO,GAAG,CAAC,SAAS,CAAC;IAC3D,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,GAAgB,EAAW,EAAE;IACnD,IAAI,GAAG,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QACvC,IAAI,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAE1D,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACnD,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;YAC9B,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC5D,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;QAED,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAkB,EAAE,CAAC;YAClE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;gBAAE,OAAO,KAAK,CAAC;QACxC,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Icon request helper /\n/ -------------------------------------------------------------------------- */\n\nimport { ~~Env } from '@stencil/core';\n\nimport {~~ isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n let req: Promise<unknown>;\n\n if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n const rsp = await fetch(url);\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n iconContent.set(url, svgContent \|\| '');\n });\n }\n iconContent.set(url, '');\n // cache for the same requests\n requests.set(url, req);\n return req;\n }\n\n iconContent.set(url, '');\n return Promise.resolve();\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n // see if we already have a request for this SVG file\n const req = await requests.get(url);\n if (!req) return fetchSvg(url, sanitize);\n\n return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n const svgTag = 'svg';\n const iconCssClass = ~~!Env.ICONS_SVG_PATH ?~~ 'bq-icon__svg' ~~: ''~~;\n\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n const othersCssClasses = svgElm.getAttribute('class') \|\| '';\n svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n // set the shadow DOM part for the SVG element\n svgElm.setAttribute('part', svgTag);\n\n // remove height and width attribute, if for some reason they are still present in the SVG tag\n svgElm.removeAttribute('height');\n svgElm.removeAttribute('width');\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n }\n\n return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n if (elm.nodeType === Node.ELEMENT_NODE) {\n if (elm.nodeName.toLowerCase() === 'script') return false;\n\n for (const attribute of Array.from(elm.attributes)) {\n const value = attribute.value;\n if (isString(value) && value.toLowerCase().startsWith('on')) {\n return false;\n }\n }\n\n for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n if (!isValid(childNode)) return false;\n }\n }\n return true;\n};\n"]}
1	+ {"version":3,"file":"request.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/helper/request.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Icon request helper /\n/ -------------------------------------------------------------------------- */\n\nimport { isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n let req: Promise<unknown>;\n\n if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n const rsp = await fetch(url);\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n iconContent.set(url, svgContent \|\| '');\n });\n }\n iconContent.set(url, '');\n // cache for the same requests\n requests.set(url, req);\n return req;\n }\n\n iconContent.set(url, '');\n return Promise.resolve();\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n // see if we already have a request for this SVG file\n const req = await requests.get(url);\n if (!req) return fetchSvg(url, sanitize);\n\n return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n const svgTag = 'svg';\n const iconCssClass = 'bq-icon__svg';\n\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n const othersCssClasses = svgElm.getAttribute('class') \|\| '';\n svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n // set the shadow DOM part for the SVG element\n svgElm.setAttribute('part', svgTag);\n\n // remove height and width attribute, if for some reason they are still present in the SVG tag\n svgElm.removeAttribute('height');\n svgElm.removeAttribute('width');\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n }\n\n return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n if (elm.nodeType === Node.ELEMENT_NODE) {\n if (elm.nodeName.toLowerCase() === 'script') return false;\n\n for (const attribute of Array.from(elm.attributes)) {\n const value = attribute.value;\n if (isString(value) && value.toLowerCase().startsWith('on')) {\n return false;\n }\n }\n\n for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n if (!isValid(childNode)) return false;\n }\n }\n return true;\n};\n"]}

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

@@ -3,6 +3,7 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { newE2EPage } from "@stencil/core/testing";
+import { setProperties } from "../../../shared/test-utils";
 describe('bq-select', () => {
     it('should render', async () => {
         const page = await newE2EPage({
@@ -126,5 +127,41 @@ describe('bq-select', () => {
         expect(await page.find(optionSelector)).toHaveAttribute('selected');
         expect(eventEmitter).toHaveReceivedEventTimes(1);
     });
+    it('should render with selected options', async () => {
+        const page = await newE2EPage({
+            html: `
+        <bq-select multiple>
+          <bq-option value="1">Option 1</bq-option>
+          <bq-option value="2">Option 2</bq-option>
+          <bq-option value="3">Option 3</bq-option>
+        </bq-select>
+      `,
+        });
+        await setProperties(page, 'bq-select', { value: JSON.stringify(['1', '2']) });
+        const selectedValueElements = await page.findAll(`bq-select bq-option[selected]`);
+        const displayTags = await page.findAll('bq-select >>> bq-tag');
+        expect(selectedValueElements).toHaveLength(2);
+        expect(displayTags).toHaveLength(2);
+        expect(displayTags[0]).toEqualText('Option 1');
+        expect(displayTags[1]).toEqualText('Option 2');
+    });
+    it('should rerender when value is change externally', async () => {
+        const page = await newE2EPage({
+            html: `
+        <bq-select multiple>
+          <bq-option value="1">Option 1</bq-option>
+          <bq-option value="2">Option 2</bq-option>
+          <bq-option value="3">Option 3</bq-option>
+        </bq-select>
+      `,
+        });
+        await setProperties(page, 'bq-select', { value: JSON.stringify(['1', '2']) });
+        expect(await page.findAll(`bq-select bq-option[selected]`)).toHaveLength(2);
+        await setProperties(page, 'bq-select', { value: JSON.stringify(['3']) });
+        const displayTags = await page.findAll('bq-select >>> bq-tag');
+        expect(await page.findAll(`bq-select bq-option[selected]`)).toHaveLength(1);
+        expect(displayTags).toHaveLength(1);
+        expect(displayTags[0]).toEqualText('Option 3');
+    });
 });
 //# sourceMappingURL=bq-select.e2e.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-select.e2e.js","sourceRoot":"","sources":["../../../../../../../src/components/select/__tests__/bq-select.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('bq-select', () => {\n it('should render', async () => {\n const page = await newE2EPage({\n html: `<bq-select></bq-select>`,\n });\n const element = await page.find('bq-select');\n\n expect(element).toHaveClass('hydrated');\n });\n\n it('should have shadow root', async () => {\n const page = await newE2EPage({\n html: `<bq-select></bq-select>`,\n });\n const element = await page.find('bq-select');\n\n expect(element.shadowRoot).not.toBeNull();\n });\n\n it('should render with default suffix icon', async () => {\n const page = await newE2EPage({\n html: `<bq-select></bq-select>`,\n });\n const suffixIconElem = await page.find('bq-select >>> bq-icon[name=\"caret-down\"]');\n\n expect(suffixIconElem).not.toBeNull();\n });\n\n it('should render with prefix icon', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <bq-icon name=\"user-circle\" slot=\"prefix\"></bq-icon>\n </bq-select>\n `,\n });\n const prefixContainerElem = await page.find('bq-select >>> .bq-select__control--prefix');\n expect(prefixContainerElem).not.toHaveClass('hidden');\n });\n\n it('should render with label content', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <label slot=\"label\">Select label</label>\n </bq-select>\n `,\n });\n const labelContainerElem = await page.find('bq-select >>> .bq-select__label');\n\n expect(labelContainerElem).not.toHaveClass('hidden');\n });\n\n it('should render with helper content', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <span slot=\"helper-text\">Helper text</span>\n </bq-select>\n `,\n });\n const helperContainerElem = await page.find('bq-select >>> .bq-select__helper-text');\n\n expect(helperContainerElem).not.toHaveClass('hidden');\n });\n\n it('should render with options', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const options = await page.findAll('bq-select > bq-option');\n\n expect(options.length).toEqual(3);\n });\n\n it('should render with panel options opened', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select open>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const selectPanelElem = await page.find('bq-select >>> .bq-select__dropdown >>> .bq-dropdown__panel');\n\n expect(selectPanelElem).toHaveAttribute('open');\n });\n\n it('should render with selected option', async () => {\n const selectedValue = 1;\n const page = await newE2EPage({\n html: `\n <bq-select value=\"${selectedValue}\">\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const selectValueElem = await page.find(`bq-select bq-option[value=\"${selectedValue}\"]`);\n\n expect(selectValueElem).toHaveAttribute('selected');\n });\n\n it('should select an option and emit Select event', async () => {\n const value = 2;\n const page = await newE2EPage({\n html: `\n <bq-select>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const optionSelector = `bq-select > bq-option[value=\"${value}\"]`;\n const eventEmitter = await page.spyOnEvent('bqSelect');\n\n const selectElem = await page.find('bq-select');\n await selectElem.click();\n\n // Make sure the dropdown is open\n expect(await page.find('bq-select >>> bq-dropdown')).toHaveAttribute('open');\n\n // Make sure the option is not selected\n const optionElem = await page.find(optionSelector);\n expect(optionElem).not.toHaveAttribute('selected');\n\n await optionElem.click();\n await page.waitForChanges();\n\n // Make sure the dropdown is close\n expect(await page.find('bq-select >>> bq-dropdown')).not.toHaveAttribute('open');\n // Check that the option is selected\n expect(await page.find(optionSelector)).toHaveAttribute('selected');\n expect(eventEmitter).toHaveReceivedEventTimes(1);\n });\n});\n"]}
1	+ {"version":3,"file":"bq-select.e2e.js","sourceRoot":"","sources":["../../../../../../../src/components/select/__tests__/bq-select.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\nimport { setProperties } from '../../../shared/test-utils';\n\ndescribe('bq-select', () => {\n it('should render', async () => {\n const page = await newE2EPage({\n html: `<bq-select></bq-select>`,\n });\n const element = await page.find('bq-select');\n\n expect(element).toHaveClass('hydrated');\n });\n\n it('should have shadow root', async () => {\n const page = await newE2EPage({\n html: `<bq-select></bq-select>`,\n });\n const element = await page.find('bq-select');\n\n expect(element.shadowRoot).not.toBeNull();\n });\n\n it('should render with default suffix icon', async () => {\n const page = await newE2EPage({\n html: `<bq-select></bq-select>`,\n });\n const suffixIconElem = await page.find('bq-select >>> bq-icon[name=\"caret-down\"]');\n\n expect(suffixIconElem).not.toBeNull();\n });\n\n it('should render with prefix icon', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <bq-icon name=\"user-circle\" slot=\"prefix\"></bq-icon>\n </bq-select>\n `,\n });\n const prefixContainerElem = await page.find('bq-select >>> .bq-select__control--prefix');\n expect(prefixContainerElem).not.toHaveClass('hidden');\n });\n\n it('should render with label content', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <label slot=\"label\">Select label</label>\n </bq-select>\n `,\n });\n const labelContainerElem = await page.find('bq-select >>> .bq-select__label');\n\n expect(labelContainerElem).not.toHaveClass('hidden');\n });\n\n it('should render with helper content', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <span slot=\"helper-text\">Helper text</span>\n </bq-select>\n `,\n });\n const helperContainerElem = await page.find('bq-select >>> .bq-select__helper-text');\n\n expect(helperContainerElem).not.toHaveClass('hidden');\n });\n\n it('should render with options', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const options = await page.findAll('bq-select > bq-option');\n\n expect(options.length).toEqual(3);\n });\n\n it('should render with panel options opened', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select open>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const selectPanelElem = await page.find('bq-select >>> .bq-select__dropdown >>> .bq-dropdown__panel');\n\n expect(selectPanelElem).toHaveAttribute('open');\n });\n\n it('should render with selected option', async () => {\n const selectedValue = 1;\n const page = await newE2EPage({\n html: `\n <bq-select value=\"${selectedValue}\">\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const selectValueElem = await page.find(`bq-select bq-option[value=\"${selectedValue}\"]`);\n\n expect(selectValueElem).toHaveAttribute('selected');\n });\n\n it('should select an option and emit Select event', async () => {\n const value = 2;\n const page = await newE2EPage({\n html: `\n <bq-select>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n const optionSelector = `bq-select > bq-option[value=\"${value}\"]`;\n const eventEmitter = await page.spyOnEvent('bqSelect');\n\n const selectElem = await page.find('bq-select');\n await selectElem.click();\n\n // Make sure the dropdown is open\n expect(await page.find('bq-select >>> bq-dropdown')).toHaveAttribute('open');\n\n // Make sure the option is not selected\n const optionElem = await page.find(optionSelector);\n expect(optionElem).not.toHaveAttribute('selected');\n\n await optionElem.click();\n await page.waitForChanges();\n\n // Make sure the dropdown is close\n expect(await page.find('bq-select >>> bq-dropdown')).not.toHaveAttribute('open');\n // Check that the option is selected\n expect(await page.find(optionSelector)).toHaveAttribute('selected');\n expect(eventEmitter).toHaveReceivedEventTimes(1);\n });\n\n it('should render with selected options', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select multiple>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n\n await setProperties(page, 'bq-select', { value: JSON.stringify(['1', '2']) });\n\n const selectedValueElements = await page.findAll(`bq-select bq-option[selected]`);\n const displayTags = await page.findAll('bq-select >>> bq-tag');\n\n expect(selectedValueElements).toHaveLength(2);\n expect(displayTags).toHaveLength(2);\n expect(displayTags[0]).toEqualText('Option 1');\n expect(displayTags[1]).toEqualText('Option 2');\n });\n\n it('should rerender when value is change externally', async () => {\n const page = await newE2EPage({\n html: `\n <bq-select multiple>\n <bq-option value=\"1\">Option 1</bq-option>\n <bq-option value=\"2\">Option 2</bq-option>\n <bq-option value=\"3\">Option 3</bq-option>\n </bq-select>\n `,\n });\n\n await setProperties(page, 'bq-select', { value: JSON.stringify(['1', '2']) });\n\n expect(await page.findAll(`bq-select bq-option[selected]`)).toHaveLength(2);\n\n await setProperties(page, 'bq-select', { value: JSON.stringify(['3']) });\n\n const displayTags = await page.findAll('bq-select >>> bq-tag');\n\n expect(await page.findAll(`bq-select bq-option[selected]`)).toHaveLength(1);\n expect(displayTags).toHaveLength(1);\n expect(displayTags[0]).toEqualText('Option 3');\n });\n});\n"]}