@beeq/core 1.11.0 → 1.11.1

package/dist/collection/components/option-group/bq-option-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-option-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/option-group/bq-option-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAMH,MAAM,OAAO,aAAa;IACxB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAe;IAE5B,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,wBAAwB;IACxB,0BAA0B;IAE1B,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,+DAAQ,KAAK,EAAC,qDAAqD,EAAC,IAAI,EAAC,OAAO;gBAC9E,6DAAM,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,QAAQ;oBAChE,6DAAM,IAAI,EAAC,eAAe,GAAG,CACxB;gBACP,6DACE,KAAK,EAAC,6FAA6F,EACnG,IAAI,EAAC,OAAO;oBAEZ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACvB;gBACP,6DAAM,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ;oBACjD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACxB,CACA;YACT,4DACE,KAAK,EAAC,6EAA6E,EACnF,IAAI,EAAC,OAAO,gBACD,SAAS,EACpB,IAAI,EAAC,OAAO;gBAEZ,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h } from '@stencil/core';\n\n/**\n * The option group component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-group class=\"hydrated\">\n *   <span slot=\"header-label\">Sport</span>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/3b1b7b-option-group\n * @status stable\n *\n * @slot header-label - The label of the option group\n * @slot header-prefix - The prefix of the label\n * @slot header-suffix - The suffix of the label\n * @slot - The option items\n *\n * @part label - The `legend` tag element which acts as a container for the label\n * @part prefix - The prefix of the label\n * @part label - The text of the label\n * @part suffix - The suffix of the label\n * @part group - The `div` element which holds the option items\n *\n * @cssprop --bq-option-group--background - option group background color\n * @cssprop --bq-option-group--font-size - option group font size\n * @cssprop --bq-option-group--line-height - option group line height\n * @cssprop --bq-option-group--label-padding-start - option group header padding start\n * @cssprop --bq-option-group--label-padding-end - option group header padding start\n * @cssprop --bq-option-group--label-paddingY - option group header padding Y axis\n * @cssprop --bq-option-group--label-text-padding-start - option group text within label padding start\n * @cssprop --bq-option-group--label-text-padding-end - option group text within label padding start\n * @cssprop --bq-option-group--container-padding-start - option group container padding start\n */\n@Component({\n  tag: 'bq-option-group',\n  styleUrl: './scss/bq-option-group.scss',\n  shadow: true,\n})\nexport class BqOptionGroup {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\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  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bg-ui-primary\">\n        <legend class=\"bq-option-group m-be-[--bq-option-group--gapY-list]\" part=\"label\">\n          <span class=\"option-group__prefix flex items-center\" part=\"prefix\">\n            <slot name=\"header-prefix\" />\n          </span>\n          <span\n            class=\"bq-option-group__label inline-block overflow-hidden text-ellipsis whitespace-nowrap is-auto\"\n            part=\"label\"\n          >\n            <slot name=\"header-label\" />\n          </span>\n          <span class=\"bq-option-group__suffix\" part=\"suffix\">\n            <slot name=\"header-suffix\" />\n          </span>\n        </legend>\n        <div\n          class=\"bq-option-group__container flex flex-col gap-[--bq-option-group--gapY-list]\"\n          role=\"group\"\n          aria-label=\"Options\"\n          part=\"group\"\n        >\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-option-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/option-group/bq-option-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAMH,MAAM,OAAO,aAAa;IACxB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAe;IAE5B,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,wBAAwB;IACxB,0BAA0B;IAE1B,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,+DAAQ,KAAK,EAAC,qDAAqD,EAAC,IAAI,EAAC,OAAO;gBAC9E,6DAAM,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,QAAQ;oBAChE,6DAAM,IAAI,EAAC,eAAe,GAAG,CACxB;gBACP,6DACE,KAAK,EAAC,6FAA6F,EACnG,IAAI,EAAC,OAAO;oBAEZ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACvB;gBACP,6DAAM,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ;oBACjD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACxB,CACA;YACT,0EACa,SAAS,EACpB,KAAK,EAAC,6EAA6E,EACnF,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO;gBAEZ,8DAAQ,CACJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h } from '@stencil/core';\n\n/**\n * The option group component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-group class=\"hydrated\">\n *   <span slot=\"header-label\">Sport</span>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/3b1b7b-option-group\n * @status stable\n *\n * @slot header-label - The label of the option group\n * @slot header-prefix - The prefix of the label\n * @slot header-suffix - The suffix of the label\n * @slot - The option items\n *\n * @part label - The `legend` tag element which acts as a container for the label\n * @part prefix - The prefix of the label\n * @part label - The text of the label\n * @part suffix - The suffix of the label\n * @part group - The `div` element which holds the option items\n *\n * @cssprop --bq-option-group--background - option group background color\n * @cssprop --bq-option-group--font-size - option group font size\n * @cssprop --bq-option-group--line-height - option group line height\n * @cssprop --bq-option-group--label-padding-start - option group header padding start\n * @cssprop --bq-option-group--label-padding-end - option group header padding start\n * @cssprop --bq-option-group--label-paddingY - option group header padding Y axis\n * @cssprop --bq-option-group--label-text-padding-start - option group text within label padding start\n * @cssprop --bq-option-group--label-text-padding-end - option group text within label padding start\n * @cssprop --bq-option-group--container-padding-start - option group container padding start\n */\n@Component({\n  tag: 'bq-option-group',\n  styleUrl: './scss/bq-option-group.scss',\n  shadow: true,\n})\nexport class BqOptionGroup {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\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  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bg-ui-primary\">\n        <legend class=\"bq-option-group m-be-[--bq-option-group--gapY-list]\" part=\"label\">\n          <span class=\"option-group__prefix flex items-center\" part=\"prefix\">\n            <slot name=\"header-prefix\" />\n          </span>\n          <span\n            class=\"bq-option-group__label is-auto inline-block overflow-hidden text-ellipsis whitespace-nowrap\"\n            part=\"label\"\n          >\n            <slot name=\"header-label\" />\n          </span>\n          <span class=\"bq-option-group__suffix\" part=\"suffix\">\n            <slot name=\"header-suffix\" />\n          </span>\n        </legend>\n        <div\n          aria-label=\"Options\"\n          class=\"bq-option-group__container flex flex-col gap-[--bq-option-group--gapY-list]\"\n          part=\"group\"\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/option-list/bq-option-list.js

@@ -94,7 +94,6 @@ export class BqOptionList {
         return {
             "ariaLabel": {
                 "type": "string",
-                "attribute": "aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,6 +109,7 @@ export class BqOptionList {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "aria-label",
                 "defaultValue": "'Options'"
             }
         };

package/dist/collection/components/option-list/bq-option-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-option-list.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/option-list/bq-option-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,2BAA2B,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,YAAY;IACvB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAA2B;IAExC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,wBAAwB;IACxB,0BAA0B;IAE1B,+BAA+B;IACN,SAAS,GAAW,SAAS,CAAC;IAEvD,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,gFAAgF;IACvE,QAAQ,CAA6D;IAE9E,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED,YAAY;IACZ,iBAAiB;IAIjB,UAAU,CAAC,KAA+B;QACxC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAE9F,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oEAAoE,EAAC,IAAI,EAAC,MAAM;YACzF,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, h, Listen, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/**\n * The option list component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-list>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-list>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/story/components-option--default\n * @status stable\n *\n * @attr {string} aria-label - Aria label for the list.\n *\n * @slot - The option items\n *\n * @part base - The component's internal wrapper.\n *\n * @cssprop --bq-option-group--gapY-list - Option group gap between items Y axis\n */\n@Component({\n  tag: 'bq-option-list',\n  styleUrl: './scss/bq-option-list.scss',\n  shadow: true,\n})\nexport class BqOptionList {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqOptionListElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  /** Aria label for the list. */\n  @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when `bq-option` is selected (on click/enter press). */\n  @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.el.setAttribute('role', 'listbox');\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  @Listen('bqEnter', { passive: true })\n  onBqSelect(event: CustomEvent<HTMLElement>) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-option') || !isEventTargetChildOfElement(event, this.el)) return;\n\n    this.bqSelect.emit({ item, value: item.value });\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  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-option-list.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/option-list/bq-option-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,2BAA2B,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,YAAY;IACvB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAA2B;IAExC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,wBAAwB;IACxB,0BAA0B;IAE1B,+BAA+B;IACN,SAAS,GAAW,SAAS,CAAC;IAEvD,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,gFAAgF;IACvE,QAAQ,CAA6D;IAE9E,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED,YAAY;IACZ,iBAAiB;IAIjB,UAAU,CAAC,KAA+B;QACxC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAE9F,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oEAAoE,EAAC,IAAI,EAAC,MAAM;YACzF,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/**\n * The option list component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-list>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-list>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/story/components-option--default\n * @status stable\n *\n * @attr {string} aria-label - Aria label for the list.\n *\n * @slot - The option items\n *\n * @part base - The component's internal wrapper.\n *\n * @cssprop --bq-option-group--gapY-list - Option group gap between items Y axis\n */\n@Component({\n  tag: 'bq-option-list',\n  styleUrl: './scss/bq-option-list.scss',\n  shadow: true,\n})\nexport class BqOptionList {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqOptionListElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  /** Aria label for the list. */\n  @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when `bq-option` is selected (on click/enter press). */\n  @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.el.setAttribute('role', 'listbox');\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  @Listen('bqEnter', { passive: true })\n  onBqSelect(event: CustomEvent<HTMLElement>) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-option') || !isEventTargetChildOfElement(event, this.el)) return;\n\n    this.bqSelect.emit({ item, value: item.value });\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  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/page-title/bq-page-title.js

@@ -99,10 +99,16 @@ export class BqPageTitle {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '234aa6eeb328738441f3545b61257ec3a14c51cf', class: "flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]", part: "base" }, h("div", { key: '867d26e55922753a1ff3d9b9f15167299621d49b', class: { flex: true, '!hidden': !this.haveBackNavigation }, ref: (divElem) => (this.backNavigationElem = divElem), part: "back" }, h("slot", { key: '61eb7494f390391b228a899227bf0680f448ba40', name: "back", onSlotchange: this.handleSlotChange })), h("div", { key: 'b57edbfbdbea5f00109e24f44ba6a6a2a0b8f3d8', class: "flex flex-grow flex-col gap-xs", part: "content" }, h("div", { key: 'c28bc08aa42afce9dea80be4766b41f8d52462db', class: "flex items-center gap-xs", part: "title-suffix" }, h("h1", { key: 'a0e1bd317189dc33a6deb4fd7d76c2aec3c6fa51', class: "title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]", part: "title" }, h("slot", { key: '24ff8fc569dc979b33e8bc8e02574f78e66fb450' })), h("div", { key: '3c0538de7c6829880a5110568cbb16ccc1645dd4', class: { 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }, ref: (divElem) => (this.suffixElem = divElem), part: "suffix" }, h("slot", { key: '78dca26a8830e20704d7076344e7633792987aa3', name: "suffix", onSlotchange: this.handleSlotChange }))), h("div", { key: '0413cd4f7dfc55d40a639c7787ed4048a286b1ff', class: {
-                'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]': true,
+        return (h("div", { key: '234aa6eeb328738441f3545b61257ec3a14c51cf', class: "flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]", part: "base" }, h("div", { key: '8a5c45612e292ab3d842cbe06957f65fc90d3133', class: { flex: true, '!hidden': !this.haveBackNavigation }, part: "back", ref: (divElem) => {
+                this.backNavigationElem = divElem;
+            } }, h("slot", { key: '3626bff96632f10b00d4a00a45e7aee1ae302f47', name: "back", onSlotchange: this.handleSlotChange })), h("div", { key: '39d235ad4405ae2ab258296b0dbc4cdeff85e7ae', class: "flex flex-grow flex-col gap-xs", part: "content" }, h("div", { key: '2eeb23d83af799904500cc18e07b36aa365e971a', class: "flex items-center gap-xs", part: "title-suffix" }, h("h1", { key: 'c4611b1349e6123c1330ba4fc5ced08c9796fa7d', class: "title-font font-[--title-fontWeight] text-[color:--title-textColor] text-[length:--title-textSize] leading-[--title-lineHeight]", part: "title" }, h("slot", { key: '4d39a4e52887981b85592ba94f63f8f2d55a386e' })), h("div", { key: '96716879e594a36cca068d563a1b0893cc83d6d6', class: { 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }, part: "suffix", ref: (divElem) => {
+                this.suffixElem = divElem;
+            } }, h("slot", { key: '9ff02a8dbfdf65a5df391e165bb85598e00ece39', name: "suffix", onSlotchange: this.handleSlotChange }))), h("div", { key: '6bd37444d66feac3886682c4baad0df69f51211f', class: {
+                'title-font font-[--subtitle-fontWeight] text-[color:--subtitle-textColor] text-[length:--subtitle-textSize] leading-[--title-lineHeight]': true,
                 hidden: !this.hasSubTitle,
-            }, ref: (divElem) => (this.subTitleElem = divElem), part: "sub-title" }, h("slot", { key: 'd2e9f2f595e54957c302fcb149698ef47440b68d', name: "sub-title", onSlotchange: this.handleSlotChange })))));
+            }, part: "sub-title", ref: (divElem) => {
+                this.subTitleElem = divElem;
+            } }, h("slot", { key: 'bef2eca7d7363b5a04ad151a02234c46d5ca8aae', name: "sub-title", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-page-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/page-title/bq-page-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-page-title.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/**\n * The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n *\n * @example How to use it\n * ```html\n * <bq-page-title>\n *   <bq-button appearance=\"link\" slot=\"back\">\n *     <bq-icon\n *       color=\"text--primary\"\n *       name=\"arrow-left\"\n *       weight=\"bold\"\n *       role=\"img\"\n *       title=\"Navigate back to the previous page\"\n *     ></bq-icon>\n *   </bq-button>\n *   Title\n *   <div slot=\"sub-title\">Sub-title</div>\n * </bq-page-title>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/docs/components-page-title--overview\n * @status stable\n *\n * @slot back - The back navigation button.\n * @slot - The main title content.\n * @slot sub-title - The sub-title content.\n * @slot suffix - The suffix content.\n *\n * @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n *\n * @cssprop --paddingY - Padding top and bottom of the page title wrapper\n * @cssprop --subtitle-borderBlockEnd - Page title border end color\n * @cssprop --subtitle-fontWeight - Page title font weight for subtitle\n * @cssprop --subtitle-textColor - Page title color for sub-title\n * @cssprop --subtitle-textSize - Page title text size for subtitle\n * @cssprop --title-fontWeight - Page title font weight for title\n * @cssprop --title-lineHeight - Page title text line height\n * @cssprop --title-textColor - Page title color for title\n * @cssprop --title-textSize - Page title text size for title\n */\n@Component({\n  tag: 'bq-page-title',\n  styleUrl: './scss/bq-page-title.scss',\n  shadow: true,\n})\nexport class BqPageTitle {\n  // Own Properties\n  // ====================\n\n  private backNavigationElem: HTMLElement;\n  private suffixElem: HTMLElement;\n  private subTitleElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPageTitleElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private haveBackNavigation = false;\n  @State() private hasSuffix = false;\n  @State() private hasSubTitle = false;\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\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 handleSlotChange = () => {\n    this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n    this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n        {/* Back navigation button */}\n        <div\n          class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n          ref={(divElem) => (this.backNavigationElem = divElem)}\n          part=\"back\"\n        >\n          <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n        </div>\n        <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n          <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n            {/* Title */}\n            <h1\n              class=\"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]\"\n              part=\"title\"\n            >\n              <slot />\n            </h1>\n            {/* Suffix */}\n            <div\n              class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n              ref={(divElem) => (this.suffixElem = divElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n            </div>\n          </div>\n          {/* Sub-title */}\n          <div\n            class={{\n              'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]': true,\n              hidden: !this.hasSubTitle,\n            }}\n            ref={(divElem) => (this.subTitleElem = divElem)}\n            part=\"sub-title\"\n          >\n            <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-page-title.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/**\n * The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n *\n * @example How to use it\n * ```html\n * <bq-page-title>\n *   <bq-button appearance=\"link\" slot=\"back\">\n *     <bq-icon\n *       color=\"text--primary\"\n *       name=\"arrow-left\"\n *       weight=\"bold\"\n *       role=\"img\"\n *       title=\"Navigate back to the previous page\"\n *     ></bq-icon>\n *   </bq-button>\n *   Title\n *   <div slot=\"sub-title\">Sub-title</div>\n * </bq-page-title>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/docs/components-page-title--overview\n * @status stable\n *\n * @slot back - The back navigation button.\n * @slot - The main title content.\n * @slot sub-title - The sub-title content.\n * @slot suffix - The suffix content.\n *\n * @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n *\n * @cssprop --paddingY - Padding top and bottom of the page title wrapper\n * @cssprop --subtitle-borderBlockEnd - Page title border end color\n * @cssprop --subtitle-fontWeight - Page title font weight for subtitle\n * @cssprop --subtitle-textColor - Page title color for sub-title\n * @cssprop --subtitle-textSize - Page title text size for subtitle\n * @cssprop --title-fontWeight - Page title font weight for title\n * @cssprop --title-lineHeight - Page title text line height\n * @cssprop --title-textColor - Page title color for title\n * @cssprop --title-textSize - Page title text size for title\n */\n@Component({\n  tag: 'bq-page-title',\n  styleUrl: './scss/bq-page-title.scss',\n  shadow: true,\n})\nexport class BqPageTitle {\n  // Own Properties\n  // ====================\n\n  private backNavigationElem: HTMLElement;\n  private suffixElem: HTMLElement;\n  private subTitleElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPageTitleElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private haveBackNavigation = false;\n  @State() private hasSuffix = false;\n  @State() private hasSubTitle = false;\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\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 handleSlotChange = () => {\n    this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n    this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n        {/* Back navigation button */}\n        <div\n          class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n          part=\"back\"\n          ref={(divElem) => {\n            this.backNavigationElem = divElem;\n          }}\n        >\n          <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n        </div>\n        <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n          <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n            {/* Title */}\n            <h1\n              class=\"title-font font-[--title-fontWeight] text-[color:--title-textColor] text-[length:--title-textSize] leading-[--title-lineHeight]\"\n              part=\"title\"\n            >\n              <slot />\n            </h1>\n            {/* Suffix */}\n            <div\n              class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n              part=\"suffix\"\n              ref={(divElem) => {\n                this.suffixElem = divElem;\n              }}\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n            </div>\n          </div>\n          {/* Sub-title */}\n          <div\n            class={{\n              'title-font font-[--subtitle-fontWeight] text-[color:--subtitle-textColor] text-[length:--subtitle-textSize] leading-[--title-lineHeight]': true,\n              hidden: !this.hasSubTitle,\n            }}\n            part=\"sub-title\"\n            ref={(divElem) => {\n              this.subTitleElem = divElem;\n            }}\n          >\n            <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -151,7 +151,9 @@ export class BqPanel {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '23544597590fa3902b7601c8f47d012f2bf7b75d', class: "bq-panel", ref: (el) => (this.panel = el), "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open, part: "panel" }, h("slot", { key: '6bdf3a5bd8307b1a2c9ead52a23de47abf8ce28d' })));
+        return (h("div", { key: '7682fbe1b1f2532ab3e067719c1f13de4963d929', "aria-hidden": !this.open ? 'true' : 'false', class: "bq-panel", hidden: !this.open, part: "panel", ref: (el) => {
+                this.panel = el;
+            } }, h("slot", { key: '052cc8005930e58afa9d4c8e83e550a20cdc4f1b' })));
     }
     static get is() { return "bq-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -169,7 +171,6 @@ export class BqPanel {
         return {
             "disableScrollLock": {
                 "type": "boolean",
-                "attribute": "disable-scroll-lock",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -185,11 +186,11 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disable-scroll-lock",
                 "defaultValue": "false"
             },
             "distance": {
                 "type": "number",
-                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -205,11 +206,11 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "distance",
                 "defaultValue": "4"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -231,11 +232,11 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'bottom-start'"
             },
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -251,11 +252,11 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "sameWidth": {
                 "type": "boolean",
-                "attribute": "same-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -271,11 +272,11 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "same-width",
                 "defaultValue": "false"
             },
             "skidding": {
                 "type": "number",
-                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -291,11 +292,11 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "skidding",
                 "defaultValue": "0"
             },
             "strategy": {
                 "type": "string",
-                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "'fixed' | 'absolute'",
@@ -311,6 +312,7 @@ export class BqPanel {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "strategy",
                 "defaultValue": "'fixed'"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"bq-panel.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/panel/bq-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReferenceElement } from '@floating-ui/dom';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isClient, lockBodyScroll, unlockBodyScroll } from '../../shared/utils';\n\n/**\n * The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n *\n * @example How to use it\n * ```html\n * <bq-panel open>\n *   <div>Panel content</div>\n * </bq-panel>\n * ```\n *\n * @status stable\n *\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @slot - The content of the panel.\n *\n * @part panel - The `<div>` element used to display and style the panel\n *\n * @prop --bq-panel--background - Panel background color\n * @prop --bq-panel--border-color - Panel border color\n * @prop --bq-panel--border-radius - Panel border radius\n * @prop --bq-panel--border-style - Panel border style\n * @prop --bq-panel--border-width - Panel border width\n * @prop --bq-panel--box-shadow - Panel box shadow\n * @prop --bq-panel--padding - Panel padding\n * @prop --bq-panel--height - Panel height\n * @prop --bq-panel--width - Panel width\n * @prop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-panel',\n  styleUrl: './scss/bq-panel.scss',\n  shadow: true,\n})\nexport class BqPanel {\n  // Own Properties\n  // ====================\n\n  private panel: HTMLElement;\n  private floatingUI: FloatingUI;\n  private trigger: ReferenceElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPanelElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.open) {\n      this.hidePanel();\n      return;\n    }\n\n    this.showPanel();\n  }\n\n  @Watch('distance')\n  @Watch('placement')\n  @Watch('sameWidth')\n  @Watch('skidding')\n  @Watch('strategy')\n  onPropChange() {\n    if (!isClient()) return;\n\n    this.floatingUI?.init({ ...this.options });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    if (!isClient()) return;\n\n    // We need to find the trigger element from the parent to position the panel relative to it.\n    const parentTrigger = this.el.parentElement.querySelector('div[part=\"trigger\"]');\n\n    if (!parentTrigger) return;\n\n    this.trigger = {\n      getBoundingClientRect: () => parentTrigger.getBoundingClientRect(),\n      contextElement: parentTrigger,\n    };\n\n    this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });\n    this.handleOpenChange();\n  }\n\n  disconnectedCallback() {\n    if (!isClient()) return;\n\n    this.floatingUI?.destroy();\n\n    // Ensure scroll lock is removed if the component is disconnected while the panel is open.\n    if (this.open && !this.disableScrollLock) {\n      unlockBodyScroll();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private showPanel() {\n    if (!isClient()) return;\n\n    this.floatingUI?.update();\n\n    // Lock the body scroll if the disableScrollLock prop is not true.\n    if (!this.disableScrollLock) {\n      lockBodyScroll();\n    }\n  }\n\n  private async hidePanel() {\n    this.open = false;\n\n    // Unlock the body scroll if the disableScrollLock prop is not true.\n    if (isClient() && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\n  }\n\n  private get options() {\n    return {\n      distance: this.distance,\n      placement: this.placement,\n      sameWidth: this.sameWidth,\n      skidding: this.skidding,\n      strategy: this.strategy,\n    };\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class=\"bq-panel\"\n        ref={(el) => (this.panel = el)}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open}\n        part=\"panel\"\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-panel.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/panel/bq-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReferenceElement } from '@floating-ui/dom';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isClient, lockBodyScroll, unlockBodyScroll } from '../../shared/utils';\n\n/**\n * The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n *\n * @example How to use it\n * ```html\n * <bq-panel open>\n *   <div>Panel content</div>\n * </bq-panel>\n * ```\n *\n * @status stable\n *\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @slot - The content of the panel.\n *\n * @part panel - The `<div>` element used to display and style the panel\n *\n * @prop --bq-panel--background - Panel background color\n * @prop --bq-panel--border-color - Panel border color\n * @prop --bq-panel--border-radius - Panel border radius\n * @prop --bq-panel--border-style - Panel border style\n * @prop --bq-panel--border-width - Panel border width\n * @prop --bq-panel--box-shadow - Panel box shadow\n * @prop --bq-panel--padding - Panel padding\n * @prop --bq-panel--height - Panel height\n * @prop --bq-panel--width - Panel width\n * @prop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-panel',\n  styleUrl: './scss/bq-panel.scss',\n  shadow: true,\n})\nexport class BqPanel {\n  // Own Properties\n  // ====================\n\n  private panel: HTMLElement;\n  private floatingUI: FloatingUI;\n  private trigger: ReferenceElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPanelElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.open) {\n      this.hidePanel();\n      return;\n    }\n\n    this.showPanel();\n  }\n\n  @Watch('distance')\n  @Watch('placement')\n  @Watch('sameWidth')\n  @Watch('skidding')\n  @Watch('strategy')\n  onPropChange() {\n    if (!isClient()) return;\n\n    this.floatingUI?.init({ ...this.options });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    if (!isClient()) return;\n\n    // We need to find the trigger element from the parent to position the panel relative to it.\n    const parentTrigger = this.el.parentElement.querySelector('div[part=\"trigger\"]');\n\n    if (!parentTrigger) return;\n\n    this.trigger = {\n      getBoundingClientRect: () => parentTrigger.getBoundingClientRect(),\n      contextElement: parentTrigger,\n    };\n\n    this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });\n    this.handleOpenChange();\n  }\n\n  disconnectedCallback() {\n    if (!isClient()) return;\n\n    this.floatingUI?.destroy();\n\n    // Ensure scroll lock is removed if the component is disconnected while the panel is open.\n    if (this.open && !this.disableScrollLock) {\n      unlockBodyScroll();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private showPanel() {\n    if (!isClient()) return;\n\n    this.floatingUI?.update();\n\n    // Lock the body scroll if the disableScrollLock prop is not true.\n    if (!this.disableScrollLock) {\n      lockBodyScroll();\n    }\n  }\n\n  private async hidePanel() {\n    this.open = false;\n\n    // Unlock the body scroll if the disableScrollLock prop is not true.\n    if (isClient() && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\n  }\n\n  private get options() {\n    return {\n      distance: this.distance,\n      placement: this.placement,\n      sameWidth: this.sameWidth,\n      skidding: this.skidding,\n      strategy: this.strategy,\n    };\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-hidden={!this.open ? 'true' : 'false'}\n        class=\"bq-panel\"\n        hidden={!this.open}\n        part=\"panel\"\n        ref={(el) => {\n          this.panel = el;\n        }}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

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

@@ -2,9 +2,9 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, Host } from "@stencil/core";
-import { PROGRESS_BORDER_SHAPE, PROGRESS_THICKNESS, PROGRESS_TYPE } from "./bq-progress.types";
+import { Host, h } from "@stencil/core";
 import { validatePropValue } from "../../shared/utils";
+import { PROGRESS_BORDER_SHAPE, PROGRESS_THICKNESS, PROGRESS_TYPE } from "./bq-progress.types";
 /**
  * The progress bar is a user interface component that visually represents the completion status of a task or process.
  *
@@ -112,18 +112,18 @@ export class BqProgress {
             ...(this.thickness === 'large' && { '--bq-progress-bar--height': 'var(--bq-spacing-xs)' }),
             ...(this.type === 'error' && { '--bq-progress-bar--indicatorColor': 'var(--bq-ui--danger)' }),
         };
-        return (h(Host, { key: 'db2ef23caba8731b42a7c74fd7d19aa366a1ba30', style: style }, h("div", { key: 'b657b368fa271571de30a925c2c7e8ab77380524', class: "flex items-center", part: "wrapper" }, h("div", { key: '97cafbe2deceb4c979b2765dfdeb8be6296722cd', class: "relative flex items-center is-full", part: "progress" }, h("progress", { key: '5d9e1a576b18383ca67135e1fffe4cc71c57fcc4', class: {
+        return (h(Host, { key: 'db2ef23caba8731b42a7c74fd7d19aa366a1ba30', style: style }, h("div", { key: 'b657b368fa271571de30a925c2c7e8ab77380524', class: "flex items-center", part: "wrapper" }, h("div", { key: '97cafbe2deceb4c979b2765dfdeb8be6296722cd', class: "is-full relative flex items-center", part: "progress" }, h("progress", { key: '5d9e1a576b18383ca67135e1fffe4cc71c57fcc4', class: {
                 [`progress-bar progress-bar__${this.type} ${this.thickness}`]: true,
                 'progress-bar__border-shape rounded-full': this.borderShape === 'rounded',
-            }, value: this.indeterminate ? undefined : this.value, max: "100", part: "progress-bar" }), this.enableTooltip && !this.indeterminate && (h("bq-tooltip", { key: 'c903b6e6f689610b6285e484702ea8fca1c20bff', class: "absolute [&::part(panel)]:absolute", exportparts: "base,trigger,panel", alwaysVisible: true, distance: 16, style: { insetInlineStart: `${this.value}%`, fontVariant: 'tabular-nums' } }, h("div", { key: '558222b0e2ab822fb4d59fe7665157fa8dd22dcf', class: "absolute bs-1 is-1", slot: "trigger" }), this.value)), this.indeterminate && (h("div", { key: 'e1a35b5e085b7853e8599bc9b7ff00417a15ee11', class: {
-                'progress-bar__indeterminate absolute bg-[--bq-progress-bar--indicatorColor] bs-[--bq-progress-bar--height] is-[--bq-progress-bar--indeterminateWidth]': true,
+            }, max: "100", part: "progress-bar", value: this.indeterminate ? undefined : this.value }), this.enableTooltip && !this.indeterminate && (h("bq-tooltip", { key: 'c903b6e6f689610b6285e484702ea8fca1c20bff', alwaysVisible: true, class: "absolute [&::part(panel)]:absolute", distance: 16, exportparts: "base,trigger,panel", style: { insetInlineStart: `${this.value}%`, fontVariant: 'tabular-nums' } }, h("div", { key: '558222b0e2ab822fb4d59fe7665157fa8dd22dcf', class: "bs-1 is-1 absolute", slot: "trigger" }), this.value)), this.indeterminate && (h("div", { key: 'e1a35b5e085b7853e8599bc9b7ff00417a15ee11', class: {
+                'progress-bar__indeterminate bs-[--bq-progress-bar--height] is-[--bq-progress-bar--indeterminateWidth] absolute bg-[--bq-progress-bar--indicatorColor]': true,
                 'rounded-full': this.borderShape === 'rounded',
             }, part: "indeterminate" }))), h("div", { key: 'c3bf63045c31d9eb98f2b5c4033630b835ed076d', "aria-hidden": !this.label || this.indeterminate ? 'true' : 'false', class: {
                 'ms-xs font-medium leading-regular': true,
                 'text-primary': this.type !== 'error',
                 'text-danger': this.type === 'error',
-                'invisible ms-0 is-0': !this.label || this.indeterminate,
-            }, style: { fontVariant: 'tabular-nums' }, part: "label" }, h("span", { key: '9e2413dcea94c034f7106203085c35ad27bcbdd7' }, this.value, "%")))));
+                'is-0 invisible ms-0': !this.label || this.indeterminate,
+            }, part: "label", style: { fontVariant: 'tabular-nums' } }, h("span", { key: '9e2413dcea94c034f7106203085c35ad27bcbdd7' }, this.value, "%")))));
     }
     static get is() { return "bq-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -141,7 +141,6 @@ export class BqProgress {
         return {
             "borderShape": {
                 "type": "string",
-                "attribute": "border-shape",
                 "mutable": false,
                 "complexType": {
                     "original": "TProgressBorderShape",
@@ -163,11 +162,11 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "border-shape",
                 "defaultValue": "'rounded'"
             },
             "enableTooltip": {
                 "type": "boolean",
-                "attribute": "enable-tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -183,11 +182,11 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "enable-tooltip",
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -203,11 +202,11 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "indeterminate",
                 "defaultValue": "false"
             },
             "label": {
                 "type": "boolean",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -223,11 +222,11 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "label",
                 "defaultValue": "false"
             },
             "thickness": {
                 "type": "string",
-                "attribute": "thickness",
                 "mutable": false,
                 "complexType": {
                     "original": "TProgressThickness",
@@ -249,11 +248,11 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "thickness",
                 "defaultValue": "'medium'"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TProgressType",
@@ -275,11 +274,11 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "'default'"
             },
             "value": {
                 "type": "number",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -295,6 +294,7 @@ export class BqProgress {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "value",
                 "defaultValue": "0"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"bq-progress.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/progress/bq-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { PROGRESS_BORDER_SHAPE, PROGRESS_THICKNESS, PROGRESS_TYPE } from './bq-progress.types';\nimport type { TProgressBorderShape, TProgressThickness, TProgressType } from './bq-progress.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * The progress bar is a user interface component that visually represents the completion status of a task or process.\n *\n * @example How to use it\n * ```html\n * <bq-progress value=\"50\"></bq-progress>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/691cb3-progress\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {\"rounded\" | \"rounded-full\"} border-shape - It will set the border style of the progress bar\n * @attr {boolean} enable-tooltip - If `true`, a tooltip will be shown displaying the progress value\n * @attr {boolean} indeterminate - If `true` the indeterminate state of progress bar is enabled\n * @attr {boolean} label - If `true`, a label text showing the value (in percentage) will be shown\n * @attr {\"small\" | \"medium\" | \"large\"} thickness - Progress bar thickness\n * @attr {\"default\" | \"error\"} type - Progress type\n * @attr {number} value - A number representing the current value of the progress bar\n *\n * @part wrapper - The component wrapper container inside the shadow DOM\n * @part progress - The `<div>` container that holds the native progress element\n * @part progress-bar - The native html for progress element\n * @part label - The `<div>` container that holds the label value (in percentage)\n * @part indeterminate - The `<div>` container that holds the indeterminate progress bar\n * @part base - The base container for the tooltip component inside the shadow DOM when hovering over the progress bar\n * @part trigger - The container holding the element that triggers the tooltip display when hovering over the progress bar\n * @part panel - The container holding the content of the tooltip when hovering over the progress bar\n *\n * @cssprop --bq-progress-bar--height - The progress bars height\n * @cssprop --bq-progress-bar--indeterminateWidth - The progress bar width when its indeterminate\n * @cssprop --bq-progress-bar--indicatorColor - The progress bar color (inside the track area)\n * @cssprop --bq-progress-bar--trackColor - The progress bar track area (the grey one)\n */\n@Component({\n  tag: 'bq-progress',\n  styleUrl: './scss/bq-progress.scss',\n  shadow: true,\n})\nexport class BqProgress {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqProgressElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It will set the border style of the progress bar */\n  @Prop({ reflect: true }) borderShape: TProgressBorderShape = 'rounded';\n\n  /** If `true`, a tooltip will be shown displaying the progress value */\n  @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n  /** If `true` the indeterminate state of progress bar is enabled */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /** If `true, a label text showing the value (in percentage) will be shown */\n  @Prop({ reflect: true }) label: boolean = false;\n\n  /** Progress bar thickness */\n  @Prop({ reflect: true }) thickness: TProgressThickness = 'medium';\n\n  /** Progress type */\n  @Prop({ reflect: true }) type: TProgressType = 'default';\n\n  /** A number representing the current value of the progress bar */\n  @Prop({ reflect: true, mutable: true }) value = 0;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('borderShape')\n  @Watch('thickness')\n  @Watch('type')\n  handleTypePropChange() {\n    validatePropValue(PROGRESS_BORDER_SHAPE, 'rounded', this.el, 'borderShape');\n    validatePropValue(PROGRESS_THICKNESS, 'medium', this.el, 'thickness');\n    validatePropValue(PROGRESS_TYPE, 'default', this.el, 'type');\n  }\n\n  @Watch('value')\n  handleValuePropChange(newValue: number) {\n    this.validateValue(newValue);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleTypePropChange();\n    this.handleValuePropChange(this.value);\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 validateValue(newValue: number) {\n    const clampedValue = Math.max(0, Math.min(100, newValue));\n    if (newValue !== clampedValue) {\n      this.value = clampedValue;\n    }\n    return this.value;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.thickness === 'large' && { '--bq-progress-bar--height': 'var(--bq-spacing-xs)' }),\n      ...(this.type === 'error' && { '--bq-progress-bar--indicatorColor': 'var(--bq-ui--danger)' }),\n    };\n\n    return (\n      <Host style={style}>\n        <div class=\"flex items-center\" part=\"wrapper\">\n          <div class=\"relative flex items-center is-full\" part=\"progress\">\n            <progress\n              class={{\n                [`progress-bar progress-bar__${this.type} ${this.thickness}`]: true,\n                'progress-bar__border-shape rounded-full': this.borderShape === 'rounded',\n              }}\n              value={this.indeterminate ? undefined : this.value}\n              max=\"100\"\n              part=\"progress-bar\"\n            />\n            {this.enableTooltip && !this.indeterminate && (\n              <bq-tooltip\n                class=\"absolute [&::part(panel)]:absolute\"\n                exportparts=\"base,trigger,panel\"\n                alwaysVisible={true}\n                distance={16}\n                style={{ insetInlineStart: `${this.value}%`, fontVariant: 'tabular-nums' }}\n              >\n                <div class=\"absolute bs-1 is-1\" slot=\"trigger\"></div>\n                {this.value}\n              </bq-tooltip>\n            )}\n            {this.indeterminate && (\n              <div\n                class={{\n                  'progress-bar__indeterminate absolute bg-[--bq-progress-bar--indicatorColor] bs-[--bq-progress-bar--height] is-[--bq-progress-bar--indeterminateWidth]': true,\n                  'rounded-full': this.borderShape === 'rounded',\n                }}\n                part=\"indeterminate\"\n              />\n            )}\n          </div>\n          <div\n            aria-hidden={!this.label || this.indeterminate ? 'true' : 'false'}\n            class={{\n              'ms-xs font-medium leading-regular': true,\n              'text-primary': this.type !== 'error',\n              'text-danger': this.type === 'error',\n              'invisible ms-0 is-0': !this.label || this.indeterminate,\n            }}\n            style={{ fontVariant: 'tabular-nums' }}\n            part=\"label\"\n          >\n            <span>{this.value}%</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-progress.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/progress/bq-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\nimport { validatePropValue } from '../../shared/utils';\nimport type { TProgressBorderShape, TProgressThickness, TProgressType } from './bq-progress.types';\nimport { PROGRESS_BORDER_SHAPE, PROGRESS_THICKNESS, PROGRESS_TYPE } from './bq-progress.types';\n\n/**\n * The progress bar is a user interface component that visually represents the completion status of a task or process.\n *\n * @example How to use it\n * ```html\n * <bq-progress value=\"50\"></bq-progress>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/691cb3-progress\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {\"rounded\" | \"rounded-full\"} border-shape - It will set the border style of the progress bar\n * @attr {boolean} enable-tooltip - If `true`, a tooltip will be shown displaying the progress value\n * @attr {boolean} indeterminate - If `true` the indeterminate state of progress bar is enabled\n * @attr {boolean} label - If `true`, a label text showing the value (in percentage) will be shown\n * @attr {\"small\" | \"medium\" | \"large\"} thickness - Progress bar thickness\n * @attr {\"default\" | \"error\"} type - Progress type\n * @attr {number} value - A number representing the current value of the progress bar\n *\n * @part wrapper - The component wrapper container inside the shadow DOM\n * @part progress - The `<div>` container that holds the native progress element\n * @part progress-bar - The native html for progress element\n * @part label - The `<div>` container that holds the label value (in percentage)\n * @part indeterminate - The `<div>` container that holds the indeterminate progress bar\n * @part base - The base container for the tooltip component inside the shadow DOM when hovering over the progress bar\n * @part trigger - The container holding the element that triggers the tooltip display when hovering over the progress bar\n * @part panel - The container holding the content of the tooltip when hovering over the progress bar\n *\n * @cssprop --bq-progress-bar--height - The progress bars height\n * @cssprop --bq-progress-bar--indeterminateWidth - The progress bar width when its indeterminate\n * @cssprop --bq-progress-bar--indicatorColor - The progress bar color (inside the track area)\n * @cssprop --bq-progress-bar--trackColor - The progress bar track area (the grey one)\n */\n@Component({\n  tag: 'bq-progress',\n  styleUrl: './scss/bq-progress.scss',\n  shadow: true,\n})\nexport class BqProgress {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqProgressElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It will set the border style of the progress bar */\n  @Prop({ reflect: true }) borderShape: TProgressBorderShape = 'rounded';\n\n  /** If `true`, a tooltip will be shown displaying the progress value */\n  @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n  /** If `true` the indeterminate state of progress bar is enabled */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /** If `true, a label text showing the value (in percentage) will be shown */\n  @Prop({ reflect: true }) label: boolean = false;\n\n  /** Progress bar thickness */\n  @Prop({ reflect: true }) thickness: TProgressThickness = 'medium';\n\n  /** Progress type */\n  @Prop({ reflect: true }) type: TProgressType = 'default';\n\n  /** A number representing the current value of the progress bar */\n  @Prop({ reflect: true, mutable: true }) value = 0;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('borderShape')\n  @Watch('thickness')\n  @Watch('type')\n  handleTypePropChange() {\n    validatePropValue(PROGRESS_BORDER_SHAPE, 'rounded', this.el, 'borderShape');\n    validatePropValue(PROGRESS_THICKNESS, 'medium', this.el, 'thickness');\n    validatePropValue(PROGRESS_TYPE, 'default', this.el, 'type');\n  }\n\n  @Watch('value')\n  handleValuePropChange(newValue: number) {\n    this.validateValue(newValue);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleTypePropChange();\n    this.handleValuePropChange(this.value);\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 validateValue(newValue: number) {\n    const clampedValue = Math.max(0, Math.min(100, newValue));\n    if (newValue !== clampedValue) {\n      this.value = clampedValue;\n    }\n    return this.value;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.thickness === 'large' && { '--bq-progress-bar--height': 'var(--bq-spacing-xs)' }),\n      ...(this.type === 'error' && { '--bq-progress-bar--indicatorColor': 'var(--bq-ui--danger)' }),\n    };\n\n    return (\n      <Host style={style}>\n        <div class=\"flex items-center\" part=\"wrapper\">\n          <div class=\"is-full relative flex items-center\" part=\"progress\">\n            <progress\n              class={{\n                [`progress-bar progress-bar__${this.type} ${this.thickness}`]: true,\n                'progress-bar__border-shape rounded-full': this.borderShape === 'rounded',\n              }}\n              max=\"100\"\n              part=\"progress-bar\"\n              value={this.indeterminate ? undefined : this.value}\n            />\n            {this.enableTooltip && !this.indeterminate && (\n              <bq-tooltip\n                alwaysVisible={true}\n                class=\"absolute [&::part(panel)]:absolute\"\n                distance={16}\n                exportparts=\"base,trigger,panel\"\n                style={{ insetInlineStart: `${this.value}%`, fontVariant: 'tabular-nums' }}\n              >\n                <div class=\"bs-1 is-1 absolute\" slot=\"trigger\"></div>\n                {this.value}\n              </bq-tooltip>\n            )}\n            {this.indeterminate && (\n              <div\n                class={{\n                  'progress-bar__indeterminate bs-[--bq-progress-bar--height] is-[--bq-progress-bar--indeterminateWidth] absolute bg-[--bq-progress-bar--indicatorColor]': true,\n                  'rounded-full': this.borderShape === 'rounded',\n                }}\n                part=\"indeterminate\"\n              />\n            )}\n          </div>\n          <div\n            aria-hidden={!this.label || this.indeterminate ? 'true' : 'false'}\n            class={{\n              'ms-xs font-medium leading-regular': true,\n              'text-primary': this.type !== 'error',\n              'text-danger': this.type === 'error',\n              'is-0 invisible ms-0': !this.label || this.indeterminate,\n            }}\n            part=\"label\"\n            style={{ fontVariant: 'tabular-nums' }}\n          >\n            <span>{this.value}%</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}