@beeq/core 1.8.0-beta.4 → 1.8.0-beta.6

package/dist/collection/components/side-menu/bq-side-menu.js

@@ -12,6 +12,7 @@ import { isHTMLElement } from "../../shared/utils";
  */
 export class BqSideMenu {
     constructor() {
+        this.documentBody = undefined;
         this.appearance = 'default';
         this.collapse = false;
         this.size = 'medium';
@@ -23,7 +24,6 @@ export class BqSideMenu {
     bodyCssExpand = 'bq-body--side-menu__expand';
     bodyCssCollapse = 'bq-body--side-menu__collapse';
     menuElem;
-    documentBody = document.querySelector('body');
     // Prop lifecycle events
     // =======================
     onCollapsePropChange() {
@@ -41,6 +41,7 @@ export class BqSideMenu {
     // Ordered by their natural call order
     // =====================================
     componentDidLoad() {
+        this.documentBody = document.querySelector('body');
         this.documentBody.classList.add(this.bodyCss);
         this.handleCollapse();
     }
@@ -106,9 +107,9 @@ export class BqSideMenu {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("aside", { key: '280cdfcaea679fb526e34212d9cb358c1c5a00f9', class: { 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }, part: "base" }, h("div", { key: 'ca883b9f73cd63632edb811dc1ecfa87cfc776a0', class: { 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }, part: "logo" }, h("slot", { key: '2b2ff4b970c9426b6a90512b38f2eb9384e1a42e', name: "logo" })), h("nav", { key: '603e7154f477b89a7992097eeb924e3cbb8293ca', class: "bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2", ref: (navElem) => (this.menuElem = navElem),
+        return (h("aside", { key: '6b9b70d549a2fd19b32ef2f0ab367e61b818b112', class: { 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }, part: "base" }, h("div", { key: '48cc468552ac2e9b1fe05c8e12164894ac21c70b', class: { 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }, part: "logo" }, h("slot", { key: '76915db8b5e43de19b98eb1455596da1552c1abd', name: "logo" })), h("nav", { key: '12f920b6403642d0cc7b12e93f655c7b76ed8db8', class: "bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2", ref: (navElem) => (this.menuElem = navElem),
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-            role: "menu", part: "nav" }, h("slot", { key: '5009d796deb74e3a1507689f44a0233a520bcf97' })), h("div", { key: '5358b43f8446ca6d07a035dc69a32f7207cb61a0', class: "bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]", part: "footer" }, h("slot", { key: '519406053786908f1cb02b9787c011c9ae46ee94', name: "footer" }))));
+            role: "menu", part: "nav" }, h("slot", { key: '1c3c3a54716f2682cede96fc951c488ae99e259f' })), h("div", { key: 'ec11a043441529487b46c9d79c2fe921914b17a1', class: "bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]", part: "footer" }, h("slot", { key: '767399bb44187023a853e52e926207b3622f685f', name: "footer" }))));
     }
     static get is() { return "bq-side-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -192,6 +193,11 @@ export class BqSideMenu {
             }
         };
     }
+    static get states() {
+        return {
+            "documentBody": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bqCollapse",

package/dist/collection/components/side-menu/bq-side-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-side-menu.js","sourceRoot":"","sources":["../../../../../../src/components/side-menu/bq-side-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isHTMLElement } from '../../shared/utils';\n\n/**\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n */\n@Component({\n  tag: 'bq-side-menu',\n  styleUrl: './scss/bq-side-menu.scss',\n  shadow: true,\n})\nexport class BqSideMenu {\n  // Own Properties\n  // ====================\n\n  private menuItemCssSelector = 'bq-side-menu-item';\n\n  private bodyCss = 'bq-body--side-menu';\n  private bodyCssExpand = 'bq-body--side-menu__expand';\n  private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n  private menuElem: HTMLElement;\n  private documentBody: HTMLBodyElement = document.querySelector('body');\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It sets a predefined appearance of the side menu */\n  @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n  /** If true, the container will reduce its width */\n  @Prop({ reflect: true }) collapse: boolean = false;\n\n  /** It sets the size of the navigation menu items */\n  @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('collapse')\n  onCollapsePropChange() {\n    this.handleCollapse();\n    this.bqCollapse.emit({ collapse: this.collapse });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n  @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n  /** Callback handler to be called when the active/selected menu item changes */\n  @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.documentBody.classList.add(this.bodyCss);\n    this.handleCollapse();\n  }\n\n  disconnectedCallback() {\n    this.cleanDocumentBodyClass();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  onMenuItemClick(event: Event) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n    this.menuItems.forEach(\n      (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n    );\n    this.bqSelect.emit(item);\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  /** Toggle the collapse state of the side menu */\n  @Method()\n  async toggleCollapse() {\n    this.collapse = !this.collapse;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get menuItems() {\n    if (!this.menuElem) return [];\n\n    const slot = this.menuElem.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n    ) as [HTMLBqSideMenuItemElement];\n  }\n\n  private handleCollapse = () => {\n    if (!this.menuItems.length) return;\n\n    this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n    if (this.collapse) {\n      this.collapseDocumentBody();\n    } else {\n      this.expandDocumentBody();\n    }\n  };\n\n  private collapseDocumentBody = () => {\n    if (!this.collapse) return;\n\n    this.documentBody.classList.remove(this.bodyCssExpand);\n    this.documentBody.classList.add(this.bodyCssCollapse);\n  };\n\n  private expandDocumentBody = () => {\n    if (this.collapse) return;\n\n    this.documentBody.classList.remove(this.bodyCssCollapse);\n    this.documentBody.classList.add(this.bodyCssExpand);\n  };\n\n  private cleanDocumentBodyClass = () => {\n    this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n        {/* Company logo and name */}\n        <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n          <slot name=\"logo\" />\n        </div>\n        {/* Navigation content */}\n        <nav\n          class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n          ref={(navElem) => (this.menuElem = navElem)}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n          role=\"menu\"\n          part=\"nav\"\n        >\n          <slot />\n        </nav>\n        {/* Footer */}\n        <div\n          class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n          part=\"footer\"\n        >\n          <slot name=\"footer\"></slot>\n        </div>\n      </aside>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-side-menu.js","sourceRoot":"","sources":["../../../../../../src/components/side-menu/bq-side-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isHTMLElement } from '../../shared/utils';\n\n/**\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n */\n@Component({\n  tag: 'bq-side-menu',\n  styleUrl: './scss/bq-side-menu.scss',\n  shadow: true,\n})\nexport class BqSideMenu {\n  // Own Properties\n  // ====================\n\n  private menuItemCssSelector = 'bq-side-menu-item';\n\n  private bodyCss = 'bq-body--side-menu';\n  private bodyCssExpand = 'bq-body--side-menu__expand';\n  private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n  private menuElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private documentBody: HTMLBodyElement;\n\n  // Public Property API\n  // ========================\n\n  /** It sets a predefined appearance of the side menu */\n  @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n  /** If true, the container will reduce its width */\n  @Prop({ reflect: true }) collapse: boolean = false;\n\n  /** It sets the size of the navigation menu items */\n  @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('collapse')\n  onCollapsePropChange() {\n    this.handleCollapse();\n    this.bqCollapse.emit({ collapse: this.collapse });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n  @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n  /** Callback handler to be called when the active/selected menu item changes */\n  @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.documentBody = document.querySelector('body');\n    this.documentBody.classList.add(this.bodyCss);\n    this.handleCollapse();\n  }\n\n  disconnectedCallback() {\n    this.cleanDocumentBodyClass();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  onMenuItemClick(event: Event) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n    this.menuItems.forEach(\n      (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n    );\n    this.bqSelect.emit(item);\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  /** Toggle the collapse state of the side menu */\n  @Method()\n  async toggleCollapse() {\n    this.collapse = !this.collapse;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get menuItems() {\n    if (!this.menuElem) return [];\n\n    const slot = this.menuElem.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n    ) as [HTMLBqSideMenuItemElement];\n  }\n\n  private handleCollapse = () => {\n    if (!this.menuItems.length) return;\n\n    this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n    if (this.collapse) {\n      this.collapseDocumentBody();\n    } else {\n      this.expandDocumentBody();\n    }\n  };\n\n  private collapseDocumentBody = () => {\n    if (!this.collapse) return;\n\n    this.documentBody.classList.remove(this.bodyCssExpand);\n    this.documentBody.classList.add(this.bodyCssCollapse);\n  };\n\n  private expandDocumentBody = () => {\n    if (this.collapse) return;\n\n    this.documentBody.classList.remove(this.bodyCssCollapse);\n    this.documentBody.classList.add(this.bodyCssExpand);\n  };\n\n  private cleanDocumentBodyClass = () => {\n    this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n        {/* Company logo and name */}\n        <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n          <slot name=\"logo\" />\n        </div>\n        {/* Navigation content */}\n        <nav\n          class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n          ref={(navElem) => (this.menuElem = navElem)}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n          role=\"menu\"\n          part=\"nav\"\n        >\n          <slot />\n        </nav>\n        {/* Footer */}\n        <div\n          class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n          part=\"footer\"\n        >\n          <slot name=\"footer\"></slot>\n        </div>\n      </aside>\n    );\n  }\n}\n"]}

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

@@ -17,7 +17,7 @@ const TOAST_PORTAL_SELECTOR = 'bq-toast-portal';
  */
 export class BqToast {
     constructor() {
-        this.toastPortal = document.querySelector(`.${TOAST_PORTAL_SELECTOR}`);
+        this.toastPortal = typeof window !== 'undefined' ? document.querySelector(`.${TOAST_PORTAL_SELECTOR}`) : null;
         this.border = 's';
         this.type = 'info';
         this.placement = 'bottom-center';
@@ -65,7 +65,7 @@ export class BqToast {
     // =====================================
     connectedCallback() {
         const { toastPortal } = this;
-        if (!toastPortal && typeof document !== 'undefined') {
+        if (!toastPortal && typeof window !== 'undefined') {
             this.toastPortal = Object.assign(document.createElement('div'), { className: TOAST_PORTAL_SELECTOR });
         }
     }
@@ -156,7 +156,7 @@ export class BqToast {
         const style = {
             ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (h(Host, { key: '06ff4fce530e9b3d43ef319215a5a3be5abf6565', style: style, class: { 'is-hidden': !this.open }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "status" }, h("output", { key: '4686d298c9e0b3ddba33ee2c753bbb6dfe7a1d7e', class: "bq-toast", part: "wrapper" }, h("div", { key: '5e47a9e376fbba1ae806db0135d36862ffdcefaf', class: { [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }, part: "icon" }, h("slot", { key: '47711e80d9fafd776880106208c01748a9313c75', name: "icon" }, h("bq-icon", { key: '2e295a304800b3bc1665a82aa38a2c68322f2574', name: this.iconName, size: "24", slot: "icon", exportparts: "base,svg" }))), h("slot", { key: '0a5a1f76f8bcd11edb75d17ef1f2ea40620a5b79' }))));
+        return (h(Host, { key: '0c720b655e1ccfb620eb3a317bf77e31f328308b', style: style, class: { 'is-hidden': !this.open }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "status" }, h("output", { key: 'a7f39180143c475d6554799eccb52fb52b61b978', class: "bq-toast", part: "wrapper" }, h("div", { key: '10a989822386e2abd536a58fd84fb8cc431b387e', class: { [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }, part: "icon" }, h("slot", { key: '6ac3e6c871ce1fd6b5a1f3202cc68c55bb8384fd', name: "icon" }, h("bq-icon", { key: '2de92ed1b7051b57f8979cbbef6fe03e6eec6880', name: this.iconName, size: "24", slot: "icon", exportparts: "base,svg" }))), h("slot", { key: '2794332bcd8fc1e2d314bcbb950d517f775d457e' }))));
     }
     static get is() { return "bq-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"bq-toast.js","sourceRoot":"","sources":["../../../../../../src/components/toast/bq-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TOAST_PLACEMENT, TOAST_TYPE, TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.types';\nimport { debounce, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst TOAST_PORTAL_SELECTOR = 'bq-toast-portal';\n\n/**\n * @part wrapper - The component's internal wrapper inside the shadow DOM.\n * @part icon-info - The `<div>` container that holds the icon component.\n * @part base - The `<div>` container of the internal bq-icon component.\n * @part svg - The `<svg>` element of the internal bq-icon component.\n *\n * @slot - The content to be displayed in the toast component.\n * @slot icon - The icon to be displayed in the toast component.\n */\n@Component({\n  tag: 'bq-toast',\n  styleUrl: './scss/bq-toast.scss',\n  shadow: true,\n})\nexport class BqToast {\n  // Own Properties\n  // ====================\n\n  private autoDismissDebounce: TDebounce<void>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqToastElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private toastPortal = document.querySelector(`.${TOAST_PORTAL_SELECTOR}`);\n\n  // Public Property API\n  // ========================\n\n  /** The corder radius of the toast component */\n  @Prop({ reflect: true }) border: TToastBorderRadius = 's';\n\n  /** Type of toast */\n  @Prop({ reflect: true, mutable: true }) type: TToastType = 'info';\n\n  /** Placement of toast */\n  @Prop({ reflect: true, mutable: true }) placement: TToastPlacement = 'bottom-center';\n\n  /** If true will hide toast icon */\n  @Prop({ reflect: true, mutable: true }) hideIcon = false;\n\n  /** If true, the toast will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** The length of time, in milliseconds, after which the toast will close itself */\n  @Prop({ reflect: true }) time: number = 3000;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TOAST_TYPE, 'default', this.el, 'type');\n    validatePropValue(TOAST_PLACEMENT, 'bottom-center', this.el, 'placement');\n\n    const { toastPortal } = this;\n    toastPortal?.classList.remove(...TOAST_PLACEMENT);\n    toastPortal?.classList.add(this.placement);\n  }\n\n  @Watch('time')\n  handleTimeChange() {\n    this.autoDismissDebounce?.cancel();\n\n    this.time = Math.max(0, this.time);\n\n    this.autoDismissDebounce = debounce(() => {\n      this.hide();\n    }, this.time);\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.autoDismissDebounce?.cancel();\n\n    if (this.open) {\n      this.autoDismissDebounce?.();\n    }\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the notification is hidden */\n  @Event() bqHide: EventEmitter<HTMLBqToastElement>;\n\n  /** Callback handler to be called when the notification is shown */\n  @Event() bqShow: EventEmitter<HTMLBqToastElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    const { toastPortal } = this;\n    if (!toastPortal && typeof document !== 'undefined') {\n      this.toastPortal = Object.assign(document.createElement('div'), { className: TOAST_PORTAL_SELECTOR });\n    }\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleTimeChange();\n    this.handleOpenChange();\n  }\n\n  disconnectedCallback() {\n    this.autoDismissDebounce?.cancel();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqHide')\n  onNotificationHide() {\n    try {\n      const { toastPortal } = this;\n      toastPortal?.removeChild(this.el);\n      // Remove the toast portal from the DOM when there are no more toasts\n      if (toastPortal?.querySelector(this.el.tagName.toLowerCase()) === null) {\n        toastPortal?.remove();\n      }\n    } catch (error) {\n      /**\n       * Skip DOMException error since it could be possible that\n       * in some situations the notification portal is missing\n       */\n      if (error instanceof DOMException) return;\n      throw error;\n    }\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  /** Method to be called to show the toast component */\n  @Method()\n  async show(): Promise<void> {\n    this.handleShow();\n  }\n\n  /** Method to be called to hide the toast component */\n  @Method()\n  async hide(): Promise<void> {\n    this.handleHide();\n  }\n\n  /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */\n  @Method()\n  async toast() {\n    const { toastPortal } = this;\n    if (toastPortal?.parentElement === null) {\n      document.body.append(toastPortal);\n    }\n\n    toastPortal?.appendChild(this.el);\n\n    requestAnimationFrame(() => {\n      this.show();\n    });\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleShow = () => {\n    const ev = this.bqShow.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = true;\n    }\n  };\n\n  private handleHide = () => {\n    const ev = this.bqHide.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = false;\n    }\n  };\n\n  private get iconName() {\n    const typeMap = {\n      success: 'check-circle-bold',\n      error: 'x-circle-bold',\n      loading: 'spinner-gap-bold',\n      alert: 'warning-bold',\n      info: 'info-bold',\n    };\n\n    return typeMap[this.type] || 'info-bold';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host\n        style={style}\n        class={{ 'is-hidden': !this.open }}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open ? 'true' : 'false'}\n        role=\"status\"\n      >\n        <output class=\"bq-toast\" part=\"wrapper\">\n          <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part=\"icon\">\n            <slot name=\"icon\">\n              <bq-icon name={this.iconName} size=\"24\" slot=\"icon\" exportparts=\"base,svg\" />\n            </slot>\n          </div>\n          <slot />\n        </output>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-toast.js","sourceRoot":"","sources":["../../../../../../src/components/toast/bq-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TOAST_PLACEMENT, TOAST_TYPE, TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.types';\nimport { debounce, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst TOAST_PORTAL_SELECTOR = 'bq-toast-portal';\n\n/**\n * @part wrapper - The component's internal wrapper inside the shadow DOM.\n * @part icon-info - The `<div>` container that holds the icon component.\n * @part base - The `<div>` container of the internal bq-icon component.\n * @part svg - The `<svg>` element of the internal bq-icon component.\n *\n * @slot - The content to be displayed in the toast component.\n * @slot icon - The icon to be displayed in the toast component.\n */\n@Component({\n  tag: 'bq-toast',\n  styleUrl: './scss/bq-toast.scss',\n  shadow: true,\n})\nexport class BqToast {\n  // Own Properties\n  // ====================\n\n  private autoDismissDebounce: TDebounce<void>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqToastElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private toastPortal =\n    typeof window !== 'undefined' ? document.querySelector(`.${TOAST_PORTAL_SELECTOR}`) : null;\n\n  // Public Property API\n  // ========================\n\n  /** The corder radius of the toast component */\n  @Prop({ reflect: true }) border: TToastBorderRadius = 's';\n\n  /** Type of toast */\n  @Prop({ reflect: true, mutable: true }) type: TToastType = 'info';\n\n  /** Placement of toast */\n  @Prop({ reflect: true, mutable: true }) placement: TToastPlacement = 'bottom-center';\n\n  /** If true will hide toast icon */\n  @Prop({ reflect: true, mutable: true }) hideIcon = false;\n\n  /** If true, the toast will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** The length of time, in milliseconds, after which the toast will close itself */\n  @Prop({ reflect: true }) time: number = 3000;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TOAST_TYPE, 'default', this.el, 'type');\n    validatePropValue(TOAST_PLACEMENT, 'bottom-center', this.el, 'placement');\n\n    const { toastPortal } = this;\n    toastPortal?.classList.remove(...TOAST_PLACEMENT);\n    toastPortal?.classList.add(this.placement);\n  }\n\n  @Watch('time')\n  handleTimeChange() {\n    this.autoDismissDebounce?.cancel();\n\n    this.time = Math.max(0, this.time);\n\n    this.autoDismissDebounce = debounce(() => {\n      this.hide();\n    }, this.time);\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.autoDismissDebounce?.cancel();\n\n    if (this.open) {\n      this.autoDismissDebounce?.();\n    }\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the notification is hidden */\n  @Event() bqHide: EventEmitter<HTMLBqToastElement>;\n\n  /** Callback handler to be called when the notification is shown */\n  @Event() bqShow: EventEmitter<HTMLBqToastElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    const { toastPortal } = this;\n    if (!toastPortal && typeof window !== 'undefined') {\n      this.toastPortal = Object.assign(document.createElement('div'), { className: TOAST_PORTAL_SELECTOR });\n    }\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleTimeChange();\n    this.handleOpenChange();\n  }\n\n  disconnectedCallback() {\n    this.autoDismissDebounce?.cancel();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqHide')\n  onNotificationHide() {\n    try {\n      const { toastPortal } = this;\n      toastPortal?.removeChild(this.el);\n      // Remove the toast portal from the DOM when there are no more toasts\n      if (toastPortal?.querySelector(this.el.tagName.toLowerCase()) === null) {\n        toastPortal?.remove();\n      }\n    } catch (error) {\n      /**\n       * Skip DOMException error since it could be possible that\n       * in some situations the notification portal is missing\n       */\n      if (error instanceof DOMException) return;\n      throw error;\n    }\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  /** Method to be called to show the toast component */\n  @Method()\n  async show(): Promise<void> {\n    this.handleShow();\n  }\n\n  /** Method to be called to hide the toast component */\n  @Method()\n  async hide(): Promise<void> {\n    this.handleHide();\n  }\n\n  /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */\n  @Method()\n  async toast() {\n    const { toastPortal } = this;\n    if (toastPortal?.parentElement === null) {\n      document.body.append(toastPortal);\n    }\n\n    toastPortal?.appendChild(this.el);\n\n    requestAnimationFrame(() => {\n      this.show();\n    });\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleShow = () => {\n    const ev = this.bqShow.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = true;\n    }\n  };\n\n  private handleHide = () => {\n    const ev = this.bqHide.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = false;\n    }\n  };\n\n  private get iconName() {\n    const typeMap = {\n      success: 'check-circle-bold',\n      error: 'x-circle-bold',\n      loading: 'spinner-gap-bold',\n      alert: 'warning-bold',\n      info: 'info-bold',\n    };\n\n    return typeMap[this.type] || 'info-bold';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host\n        style={style}\n        class={{ 'is-hidden': !this.open }}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open ? 'true' : 'false'}\n        role=\"status\"\n      >\n        <output class=\"bq-toast\" part=\"wrapper\">\n          <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part=\"icon\">\n            <slot name=\"icon\">\n              <bq-icon name={this.iconName} size=\"24\" slot=\"icon\" exportparts=\"base,svg\" />\n            </slot>\n          </div>\n          <slot />\n        </output>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/shared/utils/assetsPath.js

@@ -6,54 +6,66 @@
  * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.
  * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts
  */
-let bqSVGBasePath = '';
+let basePath;
 const DATA_BEEQ_ATTRIBUTE = 'data-beeq';
 const DEFAULT_SVG_PATH = 'svg';
-const scripts = document && typeof document !== 'undefined'
-    ? [...document.getElementsByTagName('script')]
-    : [];
 /**
- * Sets the `bqSVGBasePath` in the global window object,
- * which is used to determine the SVG path in the BQIcon component.
- * This method is the only way to update the base path.
- *
- * @param path - The new base path to set.
+ * Sets the base path for the assets.
+ * @param {string} path - The base path to set.
  */
 export const setBasePath = (path) => {
-    bqSVGBasePath = path;
+    basePath = path;
 };
 /**
- * Retrieves the `bqSVGBasePath`, optionally appending a subpath.
- *
- * @param subpath - The subpath to append to the base path.
- * @returns The full base path including the subpath.
+ * Gets the base path for the assets.
+ * @param {string} subpath - An optional subpath to append to the base path.
+ * @returns {string} The base path of the assets.
  */
 export const getBasePath = (subpath = '') => {
-    if (!bqSVGBasePath) {
-        initializeBasePath();
+    if (!basePath) {
+        const configScript = findConfigScript();
+        const fallbackScript = configScript ? null : findFallbackScript();
+        const script = configScript || fallbackScript;
+        if (script) {
+            const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);
+            setBasePath(`${path}/${DEFAULT_SVG_PATH}`);
+        }
+        else {
+            // Fallback: use an environment variable (if set) or the default path
+            setBasePath(process.env.ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);
+        }
     }
+    // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.
     const formattedSubpath = subpath ? `/${subpath.replace(/^\//, '')}` : '';
-    return bqSVGBasePath.replace(/\/$/, '') + formattedSubpath;
+    return basePath.replace(/\/$/, '') + formattedSubpath;
 };
 /**
- * Initializes the `bqSVGBasePath` for the BEEQ assets by finding the appropriate script and setting the base path accordingly.
- * 1. If a script with the attribute `data-beeq` exists, the base path will be set to the value of the `src` attribute.
- * 2. If a script with the name `beeq.js` or `beeq.esm.js` exists, the base path will be set to the value of the `src` attribute.
- * 3. If no scripts are found, the base path will be set to the default value `./svg`.
+ * Finds the configuration script element.
+ * @returns The configuration script element or null if not found.
  */
-const initializeBasePath = () => {
-    const configScript = findConfigScript();
-    const fallbackScript = configScript ? null : findFallbackScript();
-    const script = configScript || fallbackScript;
-    if (script) {
-        const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);
-        setBasePath(`${path}/${DEFAULT_SVG_PATH}`);
-    }
-    else {
-        setBasePath(`./${DEFAULT_SVG_PATH}`);
-    }
+const findConfigScript = () => {
+    if (typeof window === 'undefined')
+        return null;
+    return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);
+};
+/**
+ * Finds the fallback script element.
+ * @returns The fallback script element or null if not found.
+ */
+const findFallbackScript = () => {
+    if (typeof window === 'undefined')
+        return null;
+    return document.querySelector(`script[src*="beeq"]`);
+};
+/**
+ * Gets the path of a script element.
+ * @param {HTMLScriptElement} script - The script element.
+ * @returns The path of the script element.
+ */
+const getScriptPath = (script) => {
+    if (typeof window === 'undefined')
+        return '';
+    const src = script.getAttribute('src');
+    return src ? src.substring(0, src.lastIndexOf('/')) : '';
 };
-const findConfigScript = () => scripts?.find((script) => script.hasAttribute(DATA_BEEQ_ATTRIBUTE));
-const findFallbackScript = () => scripts?.find((script) => /beeq(\.esm)?\.js($|\?)/.test(script.src));
-const getScriptPath = (script) => script?.getAttribute('src').split('/').slice(0, -1).join('/');
 //# sourceMappingURL=assetsPath.js.map

package/dist/collection/shared/utils/assetsPath.js.map

@@ -1 +1 @@
-{"version":3,"file":"assetsPath.js","sourceRoot":"","sources":["../../../../../../src/shared/utils/assetsPath.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,IAAI,aAAa,GAAG,EAAE,CAAC;AAEvB,MAAM,mBAAmB,GAAG,WAAW,CAAC;AACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAC/B,MAAM,OAAO,GACX,QAAQ,IAAI,OAAO,QAAQ,KAAK,WAAW;IACzC,CAAC,CAAE,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAyB;IACvE,CAAC,CAAC,EAAE,CAAC;AAET;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAQ,EAAE;IAChD,aAAa,GAAG,IAAI,CAAC;AACvB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAO,GAAG,EAAE,EAAU,EAAE;IAClD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,kBAAkB,EAAE,CAAC;IACvB,CAAC;IAED,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,OAAO,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC;AAC7D,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG,GAAS,EAAE;IACpC,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAElE,MAAM,MAAM,GAAG,YAAY,IAAI,cAAc,CAAC;IAC9C,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7F,WAAW,CAAC,GAAG,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC;IAC7C,CAAC;SAAM,CAAC;QACN,WAAW,CAAC,KAAK,gBAAgB,EAAE,CAAC,CAAC;IACvC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAsB,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC;AAEtH,MAAM,kBAAkB,GAAG,GAAsB,EAAE,CACjD,OAAO,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAEvE,MAAM,aAAa,GAAG,CAAC,MAAyB,EAAU,EAAE,CAC1D,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC","sourcesContent":["/**\n * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.\n * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts\n */\n\nlet bqSVGBasePath = '';\n\nconst DATA_BEEQ_ATTRIBUTE = 'data-beeq';\nconst DEFAULT_SVG_PATH = 'svg';\nconst scripts: HTMLScriptElement[] =\n  document && typeof document !== 'undefined'\n    ? ([...document.getElementsByTagName('script')] as HTMLScriptElement[])\n    : [];\n\n/**\n * Sets the `bqSVGBasePath` in the global window object,\n * which is used to determine the SVG path in the BQIcon component.\n * This method is the only way to update the base path.\n *\n * @param path - The new base path to set.\n */\nexport const setBasePath = (path: string): void => {\n  bqSVGBasePath = path;\n};\n\n/**\n * Retrieves the `bqSVGBasePath`, optionally appending a subpath.\n *\n * @param subpath - The subpath to append to the base path.\n * @returns The full base path including the subpath.\n */\nexport const getBasePath = (subpath = ''): string => {\n  if (!bqSVGBasePath) {\n    initializeBasePath();\n  }\n\n  const formattedSubpath = subpath ? `/${subpath.replace(/^\\//, '')}` : '';\n  return bqSVGBasePath.replace(/\\/$/, '') + formattedSubpath;\n};\n\n/**\n * Initializes the `bqSVGBasePath` for the BEEQ assets by finding the appropriate script and setting the base path accordingly.\n * 1. If a script with the attribute `data-beeq` exists, the base path will be set to the value of the `src` attribute.\n * 2. If a script with the name `beeq.js` or `beeq.esm.js` exists, the base path will be set to the value of the `src` attribute.\n * 3. If no scripts are found, the base path will be set to the default value `./svg`.\n */\nconst initializeBasePath = (): void => {\n  const configScript = findConfigScript();\n  const fallbackScript = configScript ? null : findFallbackScript();\n\n  const script = configScript || fallbackScript;\n  if (script) {\n    const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);\n    setBasePath(`${path}/${DEFAULT_SVG_PATH}`);\n  } else {\n    setBasePath(`./${DEFAULT_SVG_PATH}`);\n  }\n};\n\nconst findConfigScript = (): HTMLScriptElement => scripts?.find((script) => script.hasAttribute(DATA_BEEQ_ATTRIBUTE));\n\nconst findFallbackScript = (): HTMLScriptElement =>\n  scripts?.find((script) => /beeq(\\.esm)?\\.js($|\\?)/.test(script.src));\n\nconst getScriptPath = (script: HTMLScriptElement): string =>\n  script?.getAttribute('src').split('/').slice(0, -1).join('/');\n"]}
+{"version":3,"file":"assetsPath.js","sourceRoot":"","sources":["../../../../../../src/shared/utils/assetsPath.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,IAAI,QAA4B,CAAC;AACjC,MAAM,mBAAmB,GAAG,WAAW,CAAC;AACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAQ,EAAE;IAChD,QAAQ,GAAG,IAAI,CAAC;AAClB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAU,EAAE;IAC1D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;QACxC,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;QAElE,MAAM,MAAM,GAAG,YAAY,IAAI,cAAc,CAAC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC7F,WAAW,CAAC,GAAG,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,qEAAqE;YACrE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,IAAI,KAAK,gBAAgB,EAAE,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED,yGAAyG;IACzG,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC;AACxD,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,gBAAgB,GAAG,GAA6B,EAAE;IACtD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAE/C,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,mBAAmB,GAAG,CAAC,CAAC;AAClE,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,kBAAkB,GAAG,GAA6B,EAAE;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAE/C,OAAO,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,aAAa,GAAG,CAAC,MAAyB,EAAU,EAAE;IAC1D,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,EAAE,CAAC;IAE7C,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAC3D,CAAC,CAAC","sourcesContent":["/**\n * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.\n * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts\n */\n\nlet basePath: string | undefined;\nconst DATA_BEEQ_ATTRIBUTE = 'data-beeq';\nconst DEFAULT_SVG_PATH = 'svg';\n\n/**\n * Sets the base path for the assets.\n * @param {string} path - The base path to set.\n */\nexport const setBasePath = (path: string): void => {\n  basePath = path;\n};\n\n/**\n * Gets the base path for the assets.\n * @param {string} subpath - An optional subpath to append to the base path.\n * @returns {string} The base path of the assets.\n */\nexport const getBasePath = (subpath: string = ''): string => {\n  if (!basePath) {\n    const configScript = findConfigScript();\n    const fallbackScript = configScript ? null : findFallbackScript();\n\n    const script = configScript || fallbackScript;\n    if (script) {\n      const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);\n      setBasePath(`${path}/${DEFAULT_SVG_PATH}`);\n    } else {\n      // Fallback: use an environment variable (if set) or the default path\n      setBasePath(process.env.ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);\n    }\n  }\n\n  // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n  const formattedSubpath = subpath ? `/${subpath.replace(/^\\//, '')}` : '';\n  return basePath.replace(/\\/$/, '') + formattedSubpath;\n};\n\n/**\n * Finds the configuration script element.\n * @returns The configuration script element or null if not found.\n */\nconst findConfigScript = (): HTMLScriptElement | null => {\n  if (typeof window === 'undefined') return null;\n\n  return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);\n};\n\n/**\n * Finds the fallback script element.\n * @returns The fallback script element or null if not found.\n */\nconst findFallbackScript = (): HTMLScriptElement | null => {\n  if (typeof window === 'undefined') return null;\n\n  return document.querySelector(`script[src*=\"beeq\"]`);\n};\n\n/**\n * Gets the path of a script element.\n * @param {HTMLScriptElement} script - The script element.\n * @returns The path of the script element.\n */\nconst getScriptPath = (script: HTMLScriptElement): string => {\n  if (typeof window === 'undefined') return '';\n\n  const src = script.getAttribute('src');\n  return src ? src.substring(0, src.lastIndexOf('/')) : '';\n};\n"]}

package/dist/collection/shared/utils/cssVariables.js

@@ -10,7 +10,7 @@ const CSSVALUEPREFIX = '--bq-';
  * @return {string} The corresponding CSS custom property variable
  */
 export function getColorCSSVariable(colorName) {
-    if (typeof document === 'undefined')
+    if (typeof window === 'undefined')
         return undefined;
     const token = `${CSSVALUEPREFIX}${colorName}`;
     const value = getComputedStyle(document.documentElement).getPropertyValue(token);

package/dist/collection/shared/utils/cssVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssVariables.js","sourceRoot":"","sources":["../../../../../../src/shared/utils/cssVariables.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,OAAO,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,SAAiB;IACnD,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,SAAS,CAAC;IAEtD,MAAM,KAAK,GAAG,GAAG,cAAc,GAAG,SAAS,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACjF,IAAI,CAAC,KAAK;QAAE,OAAO,SAAS,CAAC;IAE7B,OAAO,OAAO,KAAK,GAAG,CAAC;AACzB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,QAAgB,EAAE,SAAkB;IACtE,MAAM,MAAM,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AACjE,CAAC","sourcesContent":["const CSSVALUEPREFIX = '--bq-';\n\n/**\n * Get CSS custom property variable of a given color string value\n *\n * @param {string} colorName - Valid string value.\n * @return {string} The corresponding CSS custom property variable\n */\nexport function getColorCSSVariable(colorName: string): string | undefined {\n  if (typeof document === 'undefined') return undefined;\n\n  const token = `${CSSVALUEPREFIX}${colorName}`;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(token);\n  if (!value) return undefined;\n\n  return `var(${token})`;\n}\n\n/**\n * Get compiled CSS custom property value\n *\n * @param {string} variable - The variable name for which to get its value\n * @return {string} The corresponding value for the given CSS custom property\n */\nexport function getCSSVariableValue(variable: string, component: Element): string {\n  const styles = getComputedStyle(component);\n  return String(styles.getPropertyValue(`--${variable}`)).trim();\n}\n"]}
+{"version":3,"file":"cssVariables.js","sourceRoot":"","sources":["../../../../../../src/shared/utils/cssVariables.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,OAAO,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,SAAiB;IACnD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,SAAS,CAAC;IAEpD,MAAM,KAAK,GAAG,GAAG,cAAc,GAAG,SAAS,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACjF,IAAI,CAAC,KAAK;QAAE,OAAO,SAAS,CAAC;IAE7B,OAAO,OAAO,KAAK,GAAG,CAAC;AACzB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,QAAgB,EAAE,SAAkB;IACtE,MAAM,MAAM,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AACjE,CAAC","sourcesContent":["const CSSVALUEPREFIX = '--bq-';\n\n/**\n * Get CSS custom property variable of a given color string value\n *\n * @param {string} colorName - Valid string value.\n * @return {string} The corresponding CSS custom property variable\n */\nexport function getColorCSSVariable(colorName: string): string | undefined {\n  if (typeof window === 'undefined') return undefined;\n\n  const token = `${CSSVALUEPREFIX}${colorName}`;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(token);\n  if (!value) return undefined;\n\n  return `var(${token})`;\n}\n\n/**\n * Get compiled CSS custom property value\n *\n * @param {string} variable - The variable name for which to get its value\n * @return {string} The corresponding value for the given CSS custom property\n */\nexport function getCSSVariableValue(variable: string, component: Element): string {\n  const styles = getComputedStyle(component);\n  return String(styles.getPropertyValue(`--${variable}`)).trim();\n}\n"]}

package/dist/components/bq-accordion-group.js

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { i as isNil } from './isNil.js';
 import { i as isHTMLElement } from './isHTMLElement.js';
 

package/dist/components/bq-accordion-group.js.map

@@ -1 +1 @@
-{"file":"bq-accordion-group.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,s3lBAAs3lB,CAAC;AACn5lB,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;0BAiBgD,QAAQ;;2BASnC,KAAK;wBAGR,KAAK;oBAGa,QAAQ;;;;;IASvE,eAAe;QACb,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,kBAAkB;;YAElD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAC1B,kBAAkB,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;aAC9C;YACD,kBAAkB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YAChD,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAClD,kBAAkB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SACrC,CAAC,CAAC;KACJ;;;;IAOD,SAAS,CAAC,KAA0C;QAClD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;;QAEjC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE,OAAO;;QAEhF,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,kBAAkB;YAClD,IAAI,kBAAkB,KAAK,KAAK,CAAC,MAAM;gBAAE,OAAO;YAEhD,kBAAkB,CAAC,QAAQ,GAAG,KAAK,CAAC;SACrC,CAAC,CAAC;KACJ;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;;;;;;;;;;;;;IAiBD,IAAY,mBAAmB;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;KAC7D;;;;IAKD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,+CAA+C,EAAC,IAAI,EAAC,MAAM,IACpE,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqAccordionGroup"],"sources":["../../packages/beeq/src/components/accordion-group/scss/bq-accordion-group.scss?tag=bq-accordion-group&encapsulation=shadow","../../packages/beeq/src/components/accordion-group/bq-accordion-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Accordion group styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-accordion-group.variables';\n\n:host {\n  @apply block;\n}\n","import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { isHTMLElement, isNil } from '../../shared/utils';\nimport { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';\n\n/**\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'bq-accordion-group',\n  styleUrl: './scss/bq-accordion-group.scss',\n  shadow: true,\n})\nexport class BqAccordionGroup {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAccordionGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style of accordion to be applied to all accordions */\n  @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n  /** If true all accordions are expanded */\n  @Prop({ reflect: true }) expandAll: boolean;\n\n  /**\n   * Animation is set through JS when the browser does not support CSS calc-size()\n   * If true, the accordion animation, will be disabled. No animation will be applied.\n   */\n  @Prop({ reflect: true }) noAnimation: boolean = false;\n\n  /** If true multiple accordions can be expanded at the same time */\n  @Prop({ reflect: true }) multiple: boolean = false;\n\n  /** The size of accordion to be applied to all accordions */\n  @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('expandAll')\n  @Watch('noAnimation')\n  @Watch('size')\n  checkPropValues() {\n    this.bqAccordionElements.forEach((bqAccordionElement) => {\n      // NOTE: if expandAll is nil we will keep accordion default state\n      if (!isNil(this.expandAll)) {\n        bqAccordionElement.expanded = this.expandAll;\n      }\n      bqAccordionElement.appearance = this.appearance;\n      bqAccordionElement.noAnimation = this.noAnimation;\n      bqAccordionElement.size = this.size;\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  @Listen('bqClick', { passive: true })\n  onBqClick(event: CustomEvent<HTMLBqAccordionElement>) {\n    const { detail: bqElem } = event;\n    // Make sure the event is coming from a bq-accordion element and its a child of the bq-accordion-group\n    if (!isHTMLElement(bqElem, 'bq-accordion') || !this.el.contains(bqElem)) return;\n    // We keep default behavior if multiple accordion can be expanded\n    if (this.multiple) return;\n\n    this.bqAccordionElements.forEach((bqAccordionElement) => {\n      if (bqAccordionElement === event.detail) return;\n\n      bqAccordionElement.expanded = false;\n    });\n  }\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\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 get bqAccordionElements(): HTMLBqAccordionElement[] {\n    return Array.from(this.el.querySelectorAll('bq-accordion'));\n  }\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"flex flex-col gap-[--bq-accordion-group--gap]\" part=\"base\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-accordion-group.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,s3lBAAs3lB,CAAC;AACn5lB,+BAAe,mBAAmB;;MCYrBA,kBAAgB;;;;;0BAiBgD,QAAQ;;2BASnC,KAAK;wBAGR,KAAK;oBAGa,QAAQ;;;;;IASvE,eAAe;QACb,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,kBAAkB;;YAElD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAC1B,kBAAkB,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;aAC9C;YACD,kBAAkB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YAChD,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAClD,kBAAkB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SACrC,CAAC,CAAC;KACJ;;;;IAOD,SAAS,CAAC,KAA0C;QAClD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;;QAEjC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;YAAE,OAAO;;QAEhF,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,kBAAkB;YAClD,IAAI,kBAAkB,KAAK,KAAK,CAAC,MAAM;gBAAE,OAAO;YAEhD,kBAAkB,CAAC,QAAQ,GAAG,KAAK,CAAC;SACrC,CAAC,CAAC;KACJ;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;;;;;;;;;;;;;IAiBD,IAAY,mBAAmB;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;KAC7D;;;;IAKD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,+CAA+C,EAAC,IAAI,EAAC,MAAM,IACpE,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqAccordionGroup"],"sources":["../../packages/beeq/src/components/accordion-group/scss/bq-accordion-group.scss?tag=bq-accordion-group&encapsulation=shadow","../../packages/beeq/src/components/accordion-group/bq-accordion-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Accordion group styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-accordion-group.variables';\n\n:host {\n  @apply block;\n}\n","import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { isHTMLElement, isNil } from '../../shared/utils';\nimport { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';\n\n/**\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'bq-accordion-group',\n  styleUrl: './scss/bq-accordion-group.scss',\n  shadow: true,\n})\nexport class BqAccordionGroup {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAccordionGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style of accordion to be applied to all accordions */\n  @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n  /** If true all accordions are expanded */\n  @Prop({ reflect: true }) expandAll: boolean;\n\n  /**\n   * Animation is set through JS when the browser does not support CSS calc-size()\n   * If true, the accordion animation, will be disabled. No animation will be applied.\n   */\n  @Prop({ reflect: true }) noAnimation: boolean = false;\n\n  /** If true multiple accordions can be expanded at the same time */\n  @Prop({ reflect: true }) multiple: boolean = false;\n\n  /** The size of accordion to be applied to all accordions */\n  @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('expandAll')\n  @Watch('noAnimation')\n  @Watch('size')\n  checkPropValues() {\n    this.bqAccordionElements.forEach((bqAccordionElement) => {\n      // NOTE: if expandAll is nil we will keep accordion default state\n      if (!isNil(this.expandAll)) {\n        bqAccordionElement.expanded = this.expandAll;\n      }\n      bqAccordionElement.appearance = this.appearance;\n      bqAccordionElement.noAnimation = this.noAnimation;\n      bqAccordionElement.size = this.size;\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  @Listen('bqClick', { passive: true })\n  onBqClick(event: CustomEvent<HTMLBqAccordionElement>) {\n    const { detail: bqElem } = event;\n    // Make sure the event is coming from a bq-accordion element and its a child of the bq-accordion-group\n    if (!isHTMLElement(bqElem, 'bq-accordion') || !this.el.contains(bqElem)) return;\n    // We keep default behavior if multiple accordion can be expanded\n    if (this.multiple) return;\n\n    this.bqAccordionElements.forEach((bqAccordionElement) => {\n      if (bqAccordionElement === event.detail) return;\n\n      bqAccordionElement.expanded = false;\n    });\n  }\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\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 get bqAccordionElements(): HTMLBqAccordionElement[] {\n    return Array.from(this.el.querySelectorAll('bq-accordion'));\n  }\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"flex flex-col gap-[--bq-accordion-group--gap]\" part=\"base\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bq-accordion.js

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { v as validatePropValue } from './props.js';
 import { b as hasSlotContent } from './slot.js';
 import { d as defineCustomElement$2 } from './bq-icon2.js';

package/dist/components/bq-accordion.js.map

@@ -1 +1 @@
-{"file":"bq-accordion.js","mappings":"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","names":["BqAccordion"],"sources":["../../packages/beeq/src/components/accordion/bq-accordion.types.ts","../../packages/beeq/src/components/accordion/helper/index.ts","../../packages/beeq/src/components/accordion/scss/bq-accordion.scss?tag=bq-accordion&encapsulation=shadow","../../packages/beeq/src/components/accordion/bq-accordion.tsx"],"sourcesContent":["export const ACCORDION_SIZE = ['small', 'medium'] as const;\nexport type TAccordionSize = (typeof ACCORDION_SIZE)[number];\n\nexport const ACCORDION_APPEARANCE = ['filled', 'ghost'] as const;\nexport type TAccordionAppearance = (typeof ACCORDION_APPEARANCE)[number];\n","/* -------------------------------------------------------------------------------------- */\n/*   💡 Credits: https://css-tricks.com/how-to-animate-the-details-element-using-waapi    */\n/* -------------------------------------------------------------------------------------- */\n\nexport class Accordion {\n  private el: HTMLDetailsElement;\n  private header: HTMLElement;\n  private panel: HTMLElement;\n  private animation: Animation | null;\n  private isClosing: boolean;\n  private isExpanding: boolean;\n  private animationOptions = {\n    duration: 200,\n    easing: 'ease-in-out',\n  };\n\n  constructor(el: HTMLDetailsElement) {\n    // Store the <details> element\n    this.el = el;\n    // Store the <summary> header element\n    this.header = el.querySelector('summary');\n    // Store the <div class=\"content\"> element\n    this.panel = el.querySelector('.bq-accordion__body');\n    // Store the animation object (so we can cancel it, if needed)\n    this.animation = null;\n    // Store if the element is closing\n    this.isClosing = false;\n    // Store if the element is expanding\n    this.isExpanding = false;\n  }\n\n  public open() {\n    // Check if the element is being closed or is already closed\n    if (!this.isClosing && this.el.open) return;\n    // Apply a fixed height on the element\n    this.el.style.height = `${this.el.offsetHeight}px`;\n    // Force the [open] attribute on the details element\n    this.el.open = true;\n    // Wait for the next frame to call the expand function\n    window.requestAnimationFrame(() => this.expand());\n  }\n\n  public close() {\n    // Check if the element is being opened or is already open\n    if (!this.isExpanding && !this.el.open) return;\n    // Set the element as \"being closed\"\n    this.isClosing = true;\n\n    // Store the current height of the element\n    const startHeight = `${this.el.offsetHeight}px`;\n    // Calculate the height of the <summary> header\n    const endHeight = `${this.header.offsetHeight}px`;\n\n    // If there is already an animation running\n    if (this.animation) {\n      // Cancel the current animation\n      this.animation.cancel();\n    }\n\n    // Start a WAAPI animation\n    this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n    // When the animation is complete, call onAnimationFinish()\n    this.animation.onfinish = () => this.onAnimationFinish(false);\n    // If the animation is cancelled, isClosing variable is set to false\n    this.animation.oncancel = () => (this.isClosing = false);\n  }\n\n  // Expands the accordion\n  private expand() {\n    // Set the element as \"being expanding\"\n    this.isExpanding = true;\n    // Get the current fixed height of the element\n    const startHeight = `${this.el.offsetHeight}px`;\n    // Calculate the open height of the element (summary header height + panel body height)\n    const endHeight = `${this.header.offsetHeight + this.panel.offsetHeight}px`;\n\n    // If there is already an animation running\n    if (this.animation) {\n      // Cancel the current animation\n      this.animation.cancel();\n    }\n\n    // Start a WAAPI animation\n    this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n    // When the animation is complete, call onAnimationFinish()\n    this.animation.onfinish = () => this.onAnimationFinish(true);\n    // If the animation is cancelled, isExpanding variable is set to false\n    this.animation.oncancel = () => (this.isExpanding = false);\n  }\n\n  // Handles the end of the animation\n  private onAnimationFinish(open: boolean) {\n    // Set the open attribute based on the parameter\n    this.el.open = open;\n    // Clear the stored animation\n    this.animation = null;\n    // Reset isClosing & isExpanding\n    this.isClosing = false;\n    this.isExpanding = false;\n    // Remove the overflow hidden and the fixed height\n    this.el.removeAttribute('style');\n    // Dispatch a custom event based on the open parameter\n    const endEvent = new Event('accordionTransitionEnd', { bubbles: false, composed: true });\n    this.el.dispatchEvent(endEvent);\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                              Accordion styles                              */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-accordion.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-accordion {\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n\n    .bq-accordion__header {\n      @apply pointer-events-none;\n    }\n  }\n\n  &.small .bq-accordion__header {\n    @apply gap-[--bq-accordion--small-gap] pe-[--bq-accordion--small-padding-end] ps-[--bq-accordion--small-padding-start] p-b-[--bq-accordion--small-padding-y];\n    @apply rounded-ee-[--bq-accordion--small-radius] rounded-es-[--bq-accordion--small-radius] rounded-se-[--bq-accordion--small-radius] rounded-ss-[--bq-accordion--small-radius];\n  }\n\n  &.medium .bq-accordion__header {\n    @apply gap-[--bq-accordion--medium-gap] pe-[--bq-accordion--medium-padding-end] ps-[--bq-accordion--medium-padding-start] p-b-[--bq-accordion--medium-padding-y];\n    @apply rounded-ee-[--bq-accordion--medium-radius] rounded-es-[--bq-accordion--medium-radius] rounded-se-[--bq-accordion--medium-radius] rounded-ss-[--bq-accordion--medium-radius];\n  }\n\n  &[open] .bq-accordion__header {\n    @apply border-[length:--bq-accordion--expanded-border-width] border-[color:--bq-accordion--expanded-border-color];\n    @apply rounded-ee-[0px] rounded-es-[0px];\n\n    border-style: var(--bq-accordion--expanded-border-style);\n  }\n\n  &.small .bq-accordion__body {\n    @apply rounded-ee-[--bq-accordion--small-radius] rounded-es-[--bq-accordion--small-radius] rounded-se-[0px] rounded-ss-[0px];\n  }\n\n  &.medium .bq-accordion__body {\n    @apply rounded-ee-[--bq-accordion--medium-radius] rounded-es-[--bq-accordion--medium-radius] rounded-se-[0px] rounded-ss-[0px];\n  }\n\n  &.filled {\n    .bq-accordion__header {\n      @apply bg-[--bq-accordion--filled-collapsed-background] hover:bg-hover-ui-secondary;\n    }\n\n    .bq-accordion__header--text {\n      @apply text-[--bq-accordion--filled-collapsed-text-color];\n    }\n\n    .bq-accordion__body {\n      @apply border-[length:--bq-accordion--panel-filled-border-width] border-[color:--bq-accordion--panel-filled-border-color];\n\n      border-style: var(--bq-accordion--panel-filled-border-style);\n    }\n\n    &[open] .bq-accordion__header {\n      @apply bg-[--bq-accordion--filled-expanded-background] hover:bg-hover-ui-secondary;\n    }\n\n    &[open] .bq-accordion__header--text {\n      @apply text-[--bq-accordion--filled-expanded-text-color];\n    }\n  }\n\n  &.ghost {\n    .bq-accordion__header {\n      @apply bg-[--bq-accordion--ghost-collapsed-background] hover:bg-hover-ui-secondary;\n    }\n\n    .bq-accordion__header--text {\n      @apply text-[--bq-accordion--ghost-collapsed-text-color];\n    }\n\n    .bq-accordion__body {\n      @apply border-[length:--bq-accordion--panel-ghost-border-width] border-[color:--bq-accordion--panel-ghost-border-color];\n\n      border-style: var(--bq-accordion--panel-ghost-border-style);\n    }\n\n    &[open] .bq-accordion__header {\n      @apply bg-[--bq-accordion--ghost-expanded-background] hover:bg-hover-ui-secondary;\n    }\n\n    &[open] .bq-accordion__header--text {\n      @apply text-[--bq-accordion--ghost-expanded-text-color];\n    }\n  }\n\n  &.small.filled .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-small-filled-padding-end] ps-[--bq-accordion--panel-small-filled-padding-start] p-b-[--bq-accordion--panel-small-filled-padding-y];\n  }\n\n  &.medium.filled .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-medium-filled-padding-end] ps-[--bq-accordion--panel-medium-filled-padding-start] p-b-[--bq-accordion--panel-medium-filled-padding-y];\n  }\n\n  &.small.ghost .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-small-ghost-padding-end] ps-[--bq-accordion--panel-small-ghost-padding-start] p-b-[--bq-accordion--panel-small-ghost-padding-y];\n  }\n\n  &.medium.ghost .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-medium-ghost-padding-end] ps-[--bq-accordion--panel-medium-ghost-padding-start] p-b-[--bq-accordion--panel-medium-ghost-padding-y];\n  }\n}\n\n/* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n.bq-accordion::details-content {\n  @apply block overflow-hidden transition-[block-size,content-visibility] duration-300 ease-in-out bs-0 [transition-behavior:allow-discrete];\n}\n\n/* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n.bq-accordion[open]::details-content {\n  /* block-size: auto is just a fallback for browsers that don't support the calc-size() function */\n  @apply bs-auto;\n}\n\n/* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n.bq-accordion[open]:not(.no-animation)::details-content {\n  @apply supports-[block-size:calc-size(auto)]:bs-[calc-size(auto)];\n}\n\n.bq-accordion__header {\n  // Since there's an overflow on the <summary> element, the focus outline is not visible,\n  // so we force it to be inset to avoid the overflow hidden.\n  --bq-ring-offset-width: -2px;\n\n  @apply flex cursor-pointer select-none list-none items-center transition-colors duration-300 ease-in-out focus-visible:focus;\n  @apply border-[length:--bq-accordion--collapsed-border-width] border-[color:--bq-accordion--collapsed-border-color];\n\n  border-style: var(--bq-accordion--collapsed-border-style);\n\n  &::marker,\n  &::-webkit-details-marker {\n    @apply hidden;\n  }\n}\n\n.bq-accordion__header--text {\n  @apply flex-1;\n}\n\n.bq-accordion__header--prefix,\n.bq-accordion__header--suffix {\n  @apply flex items-center justify-center;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { ACCORDION_APPEARANCE, ACCORDION_SIZE, TAccordionAppearance, TAccordionSize } from './bq-accordion.types';\nimport { Accordion } from './helper';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The `<details>` that holds the accordion content\n * @part header - The `<summary>` that holds the accordion header content\n * @part prefix - The `<div>` that holds the accordion text prefix icon / avatar\n * @part text - The `<div>` that holds the accordion header text\n * @part suffix - The `<div>` that holds the accordion text suffix icon\n * @part panel - The `<div>` that holds the accordion panel content\n */\n@Component({\n  tag: 'bq-accordion',\n  styleUrl: './scss/bq-accordion.scss',\n  shadow: true,\n})\nexport class BqAccordion {\n  // Own Properties\n  // ====================\n\n  private accordion: Accordion;\n  private prefixElem: HTMLDivElement;\n  private suffixElem: HTMLDivElement;\n  private detailsElem: HTMLDetailsElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAccordionElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style of accordion */\n  @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n  /** If true accordion is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If true accordion is expanded */\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n  /**\n   * Animation is set through JS when the browser does not support CSS calc-size()\n   * If true, the accordion animation, will be disabled. No animation will be applied.\n   */\n  @Prop({ reflect: true }) noAnimation: boolean = false;\n\n  /** If true accordion expand icon is rotate 180deg when expanded */\n  @Prop({ reflect: true }) rotate: boolean = false;\n\n  /** The size of accordion */\n  @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(ACCORDION_SIZE, 'medium', this.el, 'size');\n    validatePropValue(ACCORDION_APPEARANCE, 'filled', this.el, 'appearance');\n  }\n\n  @Watch('expanded')\n  handleExpandedChange() {\n    const event = this.expanded ? this.bqOpen.emit(this.el) : this.bqClose.emit(this.el);\n    if (event.defaultPrevented) {\n      this.expanded = !this.expanded;\n      return;\n    }\n\n    if (this.expanded) {\n      this.accordion?.open();\n    } else {\n      this.accordion?.close();\n    }\n    if (!this.isCssCalcSizeSupported) return;\n\n    // NOTE: This is a workaround to trigger the transitionEnd event\n    // when the open/close animation is handled via CSS instead of JS\n    setTimeout(() => {\n      this.el.dispatchEvent(new CustomEvent('accordionTransitionEnd', { bubbles: false, composed: true }));\n    }, 200);\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.disabled) return;\n\n    this.expanded = false;\n  }\n\n  @Watch('noAnimation')\n  handleJsAnimation() {\n    if (this.isCssCalcSizeSupported) return;\n\n    console.warn(\n      `[bq-accordion] calc-size() is not supported and animation will be set through JS\n        For vertical layout, consider using the 'noAnimation' prop ('no-animation' attribute) to disable it`,\n    );\n    this.accordion = !this.noAnimation ? new Accordion(this.detailsElem) : null;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the accordion loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is opened */\n  @Event() bqOpen: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called after the accordion is opened */\n  @Event() bqAfterOpen: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is closed */\n  @Event() bqClose: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called after the accordion is closed */\n  @Event() bqAfterClose: EventEmitter<HTMLBqAccordionElement>;\n\n  /** @internal Handler to be called when the accordion is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqAccordionElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleJsAnimation();\n    this.handleExpandedChange();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('accordionTransitionEnd')\n  onAccordionTransitionEnd(event: CustomEvent) {\n    event.stopPropagation();\n    if (event.target !== this.el) return;\n\n    if (this.expanded) {\n      this.bqAfterOpen.emit(this.el);\n      return;\n    }\n\n    this.bqAfterClose.emit(this.el);\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 handleClick = (event: MouseEvent) => {\n    event.preventDefault();\n\n    if (this.disabled) return;\n\n    this.bqClick.emit(this.el);\n    this.expanded = !this.expanded;\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private get open() {\n    return this.expanded && !this.disabled;\n  }\n\n  private get isCssCalcSizeSupported() {\n    return window.CSS?.supports('(block-size: calc-size(auto))');\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <details\n        class={{\n          [`bq-accordion overflow-hidden ${this.size} ${this.appearance}`]: true,\n          'no-animation': this.noAnimation,\n          disabled: this.disabled,\n        }}\n        ref={(detailsElem: HTMLDetailsElement) => (this.detailsElem = detailsElem)}\n        open={this.open}\n        part=\"base\"\n      >\n        <summary\n          class=\"bq-accordion__header\"\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-expanded={this.expanded}\n          aria-disabled={this.disabled}\n          aria-controls=\"bq-accordion__body\"\n          tabindex={this.disabled ? -1 : 0}\n          part=\"header\"\n        >\n          <div\n            ref={(element) => (this.prefixElem = element)}\n            class={{ 'bq-accordion__header--prefix': true, '!hidden': !this.hasPrefix }}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n          </div>\n          <div class=\"bq-accordion__header--text\" part=\"text\">\n            <slot name=\"header\" />\n          </div>\n          <div\n            ref={(element) => (this.suffixElem = element)}\n            class={{ 'bq-accordion__header--suffix': true, '!hidden': !this.hasSuffix }}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n          </div>\n          <div\n            class={{\n              'flex items-center justify-center transition-transform duration-300 ease-in-out': true,\n              '!hidden': this.open && !this.rotate,\n              'rotate-180': this.rotate && this.open,\n            }}\n          >\n            <slot name=\"expand\">\n              <bq-icon name=\"plus\" />\n            </slot>\n          </div>\n          <div\n            class={{ 'flex items-center justify-center': true, '!hidden': (!this.open && !this.rotate) || this.rotate }}\n          >\n            <slot name=\"collapse\">\n              <bq-icon name=\"minus\" />\n            </slot>\n          </div>\n        </summary>\n        <div id=\"bq-accordion__body\" class=\"bq-accordion__body overflow-hidden\" part=\"panel\">\n          <slot />\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-accordion.js","mappings":";;;;;;;;;AAAO,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAGpD,MAAM,oBAAoB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;;ACHhE;AACA;AACA;MAEa,SAAS;IACZ,EAAE,CAAqB;IACvB,MAAM,CAAc;IACpB,KAAK,CAAc;IACnB,SAAS,CAAmB;IAC5B,SAAS,CAAU;IACnB,WAAW,CAAU;IACrB,gBAAgB,GAAG;QACzB,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,aAAa;KACtB,CAAC;IAEF,YAAY,EAAsB;;QAEhC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;;QAEb,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;;QAE1C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;;QAErD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;QAEtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;;QAEvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC1B;IAEM,IAAI;;QAET,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI;YAAE,OAAO;;QAE5C,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,CAAC;;QAEnD,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;;QAEpB,MAAM,CAAC,qBAAqB,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KACnD;IAEM,KAAK;;QAEV,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI;YAAE,OAAO;;QAE/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;QAGtB,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,CAAC;;QAEhD,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,CAAC;;QAGlD,IAAI,IAAI,CAAC,SAAS,EAAE;;YAElB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;SACzB;;QAGD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;;QAE9F,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;;QAE9D,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;KAC1D;;IAGO,MAAM;;QAEZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;;QAExB,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,CAAC;;QAEhD,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC;;QAG5E,IAAI,IAAI,CAAC,SAAS,EAAE;;YAElB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;SACzB;;QAGD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;;QAE9F,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;;QAE7D,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC;KAC5D;;IAGO,iBAAiB,CAAC,IAAa;;QAErC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;;QAEpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;QAEtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;;QAEzB,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;;QAEjC,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;KACjC;;;ACxGH,MAAM,cAAc,GAAG,umkCAAumkC,CAAC;AAC/nkC,0BAAe,cAAc;;MCkBhBA,aAAW;;;;;;;;;;;;yBAkBO,KAAK;yBACL,KAAK;0BAMyC,QAAQ;wBAGtC,KAAK;wBAGU,KAAK;2BAMjB,KAAK;sBAGV,KAAK;oBAGe,QAAQ;;;;IAvC/D,SAAS,CAAY;IACrB,UAAU,CAAiB;IAC3B,UAAU,CAAiB;IAC3B,WAAW,CAAqB;;;;IA0CxC,eAAe;QACb,iBAAiB,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAC7D,iBAAiB,CAAC,oBAAoB,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;KAC1E;IAGD,oBAAoB;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrF,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,OAAO;SACR;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;SACzB;QACD,IAAI,CAAC,IAAI,CAAC,sBAAsB;YAAE,OAAO;;;QAIzC,UAAU,CAAC;YACT,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SACtG,EAAE,GAAG,CAAC,CAAC;KACT;IAGD,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAGD,iBAAiB;QACf,IAAI,IAAI,CAAC,sBAAsB;YAAE,OAAO;QAExC,OAAO,CAAC,IAAI,CACV;4GACsG,CACvG,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;KAC7E;;;;;IAOQ,MAAM,CAAuC;;IAG7C,OAAO,CAAuC;;IAG9C,MAAM,CAAuC;;IAG7C,WAAW,CAAuC;;IAGlD,OAAO,CAAuC;;IAG9C,YAAY,CAAuC;;IAGnD,OAAO,CAAuC;;;;IAMvD,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;IAMD,wBAAwB,CAAC,KAAkB;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE;YAAE,OAAO;QAErC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC/B,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACjC;;;;;;;;;;;IAcO,WAAW,GAAG,CAAC,KAAiB;QACtC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChC,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;IAEM,UAAU,GAAG;QACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC3B,CAAC;IAEM,sBAAsB,GAAG;QAC/B,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;KAC5D,CAAC;IAEM,sBAAsB,GAAG;QAC/B,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;KAC5D,CAAC;IAEF,IAAY,IAAI;QACd,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KACxC;IAED,IAAY,sBAAsB;QAChC,OAAO,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC,+BAA+B,CAAC,CAAC;KAC9D;;;;IAMD,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;gBACtE,cAAc,EAAE,IAAI,CAAC,WAAW;gBAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,GAAG,EAAE,CAAC,WAA+B,MAAM,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC,EAC1E,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,MAAM,IAEX,gEACE,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,mBACR,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,mBACd,oBAAoB,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,IAAI,EAAC,QAAQ,IAEb,4DACE,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,KAAK,EAAE,EAAE,8BAA8B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAC3E,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC7D,EACN,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,IACjD,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,EACN,4DACE,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,KAAK,EAAE,EAAE,8BAA8B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAC3E,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC7D,EACN,4DACE,KAAK,EAAE;gBACL,gFAAgF,EAAE,IAAI;gBACtF,SAAS,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM;gBACpC,YAAY,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI;aACvC,IAED,6DAAM,IAAI,EAAC,QAAQ,IACjB,gEAAS,IAAI,EAAC,MAAM,GAAG,CAClB,CACH,EACN,4DACE,KAAK,EAAE,EAAE,kCAAkC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,IAE3G,6DAAM,IAAI,EAAC,UAAU,IACnB,gEAAS,IAAI,EAAC,OAAO,GAAG,CACnB,CACH,CACE,EACV,4DAAK,EAAE,EAAC,oBAAoB,EAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,OAAO,IAClF,8DAAQ,CACJ,CACE,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqAccordion"],"sources":["../../packages/beeq/src/components/accordion/bq-accordion.types.ts","../../packages/beeq/src/components/accordion/helper/index.ts","../../packages/beeq/src/components/accordion/scss/bq-accordion.scss?tag=bq-accordion&encapsulation=shadow","../../packages/beeq/src/components/accordion/bq-accordion.tsx"],"sourcesContent":["export const ACCORDION_SIZE = ['small', 'medium'] as const;\nexport type TAccordionSize = (typeof ACCORDION_SIZE)[number];\n\nexport const ACCORDION_APPEARANCE = ['filled', 'ghost'] as const;\nexport type TAccordionAppearance = (typeof ACCORDION_APPEARANCE)[number];\n","/* -------------------------------------------------------------------------------------- */\n/*   💡 Credits: https://css-tricks.com/how-to-animate-the-details-element-using-waapi    */\n/* -------------------------------------------------------------------------------------- */\n\nexport class Accordion {\n  private el: HTMLDetailsElement;\n  private header: HTMLElement;\n  private panel: HTMLElement;\n  private animation: Animation | null;\n  private isClosing: boolean;\n  private isExpanding: boolean;\n  private animationOptions = {\n    duration: 200,\n    easing: 'ease-in-out',\n  };\n\n  constructor(el: HTMLDetailsElement) {\n    // Store the <details> element\n    this.el = el;\n    // Store the <summary> header element\n    this.header = el.querySelector('summary');\n    // Store the <div class=\"content\"> element\n    this.panel = el.querySelector('.bq-accordion__body');\n    // Store the animation object (so we can cancel it, if needed)\n    this.animation = null;\n    // Store if the element is closing\n    this.isClosing = false;\n    // Store if the element is expanding\n    this.isExpanding = false;\n  }\n\n  public open() {\n    // Check if the element is being closed or is already closed\n    if (!this.isClosing && this.el.open) return;\n    // Apply a fixed height on the element\n    this.el.style.height = `${this.el.offsetHeight}px`;\n    // Force the [open] attribute on the details element\n    this.el.open = true;\n    // Wait for the next frame to call the expand function\n    window.requestAnimationFrame(() => this.expand());\n  }\n\n  public close() {\n    // Check if the element is being opened or is already open\n    if (!this.isExpanding && !this.el.open) return;\n    // Set the element as \"being closed\"\n    this.isClosing = true;\n\n    // Store the current height of the element\n    const startHeight = `${this.el.offsetHeight}px`;\n    // Calculate the height of the <summary> header\n    const endHeight = `${this.header.offsetHeight}px`;\n\n    // If there is already an animation running\n    if (this.animation) {\n      // Cancel the current animation\n      this.animation.cancel();\n    }\n\n    // Start a WAAPI animation\n    this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n    // When the animation is complete, call onAnimationFinish()\n    this.animation.onfinish = () => this.onAnimationFinish(false);\n    // If the animation is cancelled, isClosing variable is set to false\n    this.animation.oncancel = () => (this.isClosing = false);\n  }\n\n  // Expands the accordion\n  private expand() {\n    // Set the element as \"being expanding\"\n    this.isExpanding = true;\n    // Get the current fixed height of the element\n    const startHeight = `${this.el.offsetHeight}px`;\n    // Calculate the open height of the element (summary header height + panel body height)\n    const endHeight = `${this.header.offsetHeight + this.panel.offsetHeight}px`;\n\n    // If there is already an animation running\n    if (this.animation) {\n      // Cancel the current animation\n      this.animation.cancel();\n    }\n\n    // Start a WAAPI animation\n    this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n    // When the animation is complete, call onAnimationFinish()\n    this.animation.onfinish = () => this.onAnimationFinish(true);\n    // If the animation is cancelled, isExpanding variable is set to false\n    this.animation.oncancel = () => (this.isExpanding = false);\n  }\n\n  // Handles the end of the animation\n  private onAnimationFinish(open: boolean) {\n    // Set the open attribute based on the parameter\n    this.el.open = open;\n    // Clear the stored animation\n    this.animation = null;\n    // Reset isClosing & isExpanding\n    this.isClosing = false;\n    this.isExpanding = false;\n    // Remove the overflow hidden and the fixed height\n    this.el.removeAttribute('style');\n    // Dispatch a custom event based on the open parameter\n    const endEvent = new Event('accordionTransitionEnd', { bubbles: false, composed: true });\n    this.el.dispatchEvent(endEvent);\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                              Accordion styles                              */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-accordion.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-accordion {\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n\n    .bq-accordion__header {\n      @apply pointer-events-none;\n    }\n  }\n\n  &.small .bq-accordion__header {\n    @apply gap-[--bq-accordion--small-gap] pe-[--bq-accordion--small-padding-end] ps-[--bq-accordion--small-padding-start] p-b-[--bq-accordion--small-padding-y];\n    @apply rounded-ee-[--bq-accordion--small-radius] rounded-es-[--bq-accordion--small-radius] rounded-se-[--bq-accordion--small-radius] rounded-ss-[--bq-accordion--small-radius];\n  }\n\n  &.medium .bq-accordion__header {\n    @apply gap-[--bq-accordion--medium-gap] pe-[--bq-accordion--medium-padding-end] ps-[--bq-accordion--medium-padding-start] p-b-[--bq-accordion--medium-padding-y];\n    @apply rounded-ee-[--bq-accordion--medium-radius] rounded-es-[--bq-accordion--medium-radius] rounded-se-[--bq-accordion--medium-radius] rounded-ss-[--bq-accordion--medium-radius];\n  }\n\n  &[open] .bq-accordion__header {\n    @apply border-[length:--bq-accordion--expanded-border-width] border-[color:--bq-accordion--expanded-border-color];\n    @apply rounded-ee-[0px] rounded-es-[0px];\n\n    border-style: var(--bq-accordion--expanded-border-style);\n  }\n\n  &.small .bq-accordion__body {\n    @apply rounded-ee-[--bq-accordion--small-radius] rounded-es-[--bq-accordion--small-radius] rounded-se-[0px] rounded-ss-[0px];\n  }\n\n  &.medium .bq-accordion__body {\n    @apply rounded-ee-[--bq-accordion--medium-radius] rounded-es-[--bq-accordion--medium-radius] rounded-se-[0px] rounded-ss-[0px];\n  }\n\n  &.filled {\n    .bq-accordion__header {\n      @apply bg-[--bq-accordion--filled-collapsed-background] hover:bg-hover-ui-secondary;\n    }\n\n    .bq-accordion__header--text {\n      @apply text-[--bq-accordion--filled-collapsed-text-color];\n    }\n\n    .bq-accordion__body {\n      @apply border-[length:--bq-accordion--panel-filled-border-width] border-[color:--bq-accordion--panel-filled-border-color];\n\n      border-style: var(--bq-accordion--panel-filled-border-style);\n    }\n\n    &[open] .bq-accordion__header {\n      @apply bg-[--bq-accordion--filled-expanded-background] hover:bg-hover-ui-secondary;\n    }\n\n    &[open] .bq-accordion__header--text {\n      @apply text-[--bq-accordion--filled-expanded-text-color];\n    }\n  }\n\n  &.ghost {\n    .bq-accordion__header {\n      @apply bg-[--bq-accordion--ghost-collapsed-background] hover:bg-hover-ui-secondary;\n    }\n\n    .bq-accordion__header--text {\n      @apply text-[--bq-accordion--ghost-collapsed-text-color];\n    }\n\n    .bq-accordion__body {\n      @apply border-[length:--bq-accordion--panel-ghost-border-width] border-[color:--bq-accordion--panel-ghost-border-color];\n\n      border-style: var(--bq-accordion--panel-ghost-border-style);\n    }\n\n    &[open] .bq-accordion__header {\n      @apply bg-[--bq-accordion--ghost-expanded-background] hover:bg-hover-ui-secondary;\n    }\n\n    &[open] .bq-accordion__header--text {\n      @apply text-[--bq-accordion--ghost-expanded-text-color];\n    }\n  }\n\n  &.small.filled .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-small-filled-padding-end] ps-[--bq-accordion--panel-small-filled-padding-start] p-b-[--bq-accordion--panel-small-filled-padding-y];\n  }\n\n  &.medium.filled .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-medium-filled-padding-end] ps-[--bq-accordion--panel-medium-filled-padding-start] p-b-[--bq-accordion--panel-medium-filled-padding-y];\n  }\n\n  &.small.ghost .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-small-ghost-padding-end] ps-[--bq-accordion--panel-small-ghost-padding-start] p-b-[--bq-accordion--panel-small-ghost-padding-y];\n  }\n\n  &.medium.ghost .bq-accordion__body {\n    @apply pe-[--bq-accordion--panel-medium-ghost-padding-end] ps-[--bq-accordion--panel-medium-ghost-padding-start] p-b-[--bq-accordion--panel-medium-ghost-padding-y];\n  }\n}\n\n/* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n.bq-accordion::details-content {\n  @apply block overflow-hidden transition-[block-size,content-visibility] duration-300 ease-in-out bs-0 [transition-behavior:allow-discrete];\n}\n\n/* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n.bq-accordion[open]::details-content {\n  /* block-size: auto is just a fallback for browsers that don't support the calc-size() function */\n  @apply bs-auto;\n}\n\n/* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n.bq-accordion[open]:not(.no-animation)::details-content {\n  @apply supports-[block-size:calc-size(auto)]:bs-[calc-size(auto)];\n}\n\n.bq-accordion__header {\n  // Since there's an overflow on the <summary> element, the focus outline is not visible,\n  // so we force it to be inset to avoid the overflow hidden.\n  --bq-ring-offset-width: -2px;\n\n  @apply flex cursor-pointer select-none list-none items-center transition-colors duration-300 ease-in-out focus-visible:focus;\n  @apply border-[length:--bq-accordion--collapsed-border-width] border-[color:--bq-accordion--collapsed-border-color];\n\n  border-style: var(--bq-accordion--collapsed-border-style);\n\n  &::marker,\n  &::-webkit-details-marker {\n    @apply hidden;\n  }\n}\n\n.bq-accordion__header--text {\n  @apply flex-1;\n}\n\n.bq-accordion__header--prefix,\n.bq-accordion__header--suffix {\n  @apply flex items-center justify-center;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { ACCORDION_APPEARANCE, ACCORDION_SIZE, TAccordionAppearance, TAccordionSize } from './bq-accordion.types';\nimport { Accordion } from './helper';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The `<details>` that holds the accordion content\n * @part header - The `<summary>` that holds the accordion header content\n * @part prefix - The `<div>` that holds the accordion text prefix icon / avatar\n * @part text - The `<div>` that holds the accordion header text\n * @part suffix - The `<div>` that holds the accordion text suffix icon\n * @part panel - The `<div>` that holds the accordion panel content\n */\n@Component({\n  tag: 'bq-accordion',\n  styleUrl: './scss/bq-accordion.scss',\n  shadow: true,\n})\nexport class BqAccordion {\n  // Own Properties\n  // ====================\n\n  private accordion: Accordion;\n  private prefixElem: HTMLDivElement;\n  private suffixElem: HTMLDivElement;\n  private detailsElem: HTMLDetailsElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAccordionElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style of accordion */\n  @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n  /** If true accordion is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If true accordion is expanded */\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n  /**\n   * Animation is set through JS when the browser does not support CSS calc-size()\n   * If true, the accordion animation, will be disabled. No animation will be applied.\n   */\n  @Prop({ reflect: true }) noAnimation: boolean = false;\n\n  /** If true accordion expand icon is rotate 180deg when expanded */\n  @Prop({ reflect: true }) rotate: boolean = false;\n\n  /** The size of accordion */\n  @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(ACCORDION_SIZE, 'medium', this.el, 'size');\n    validatePropValue(ACCORDION_APPEARANCE, 'filled', this.el, 'appearance');\n  }\n\n  @Watch('expanded')\n  handleExpandedChange() {\n    const event = this.expanded ? this.bqOpen.emit(this.el) : this.bqClose.emit(this.el);\n    if (event.defaultPrevented) {\n      this.expanded = !this.expanded;\n      return;\n    }\n\n    if (this.expanded) {\n      this.accordion?.open();\n    } else {\n      this.accordion?.close();\n    }\n    if (!this.isCssCalcSizeSupported) return;\n\n    // NOTE: This is a workaround to trigger the transitionEnd event\n    // when the open/close animation is handled via CSS instead of JS\n    setTimeout(() => {\n      this.el.dispatchEvent(new CustomEvent('accordionTransitionEnd', { bubbles: false, composed: true }));\n    }, 200);\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.disabled) return;\n\n    this.expanded = false;\n  }\n\n  @Watch('noAnimation')\n  handleJsAnimation() {\n    if (this.isCssCalcSizeSupported) return;\n\n    console.warn(\n      `[bq-accordion] calc-size() is not supported and animation will be set through JS\n        For vertical layout, consider using the 'noAnimation' prop ('no-animation' attribute) to disable it`,\n    );\n    this.accordion = !this.noAnimation ? new Accordion(this.detailsElem) : null;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the accordion loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is opened */\n  @Event() bqOpen: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called after the accordion is opened */\n  @Event() bqAfterOpen: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is closed */\n  @Event() bqClose: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called after the accordion is closed */\n  @Event() bqAfterClose: EventEmitter<HTMLBqAccordionElement>;\n\n  /** @internal Handler to be called when the accordion is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqAccordionElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleJsAnimation();\n    this.handleExpandedChange();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('accordionTransitionEnd')\n  onAccordionTransitionEnd(event: CustomEvent) {\n    event.stopPropagation();\n    if (event.target !== this.el) return;\n\n    if (this.expanded) {\n      this.bqAfterOpen.emit(this.el);\n      return;\n    }\n\n    this.bqAfterClose.emit(this.el);\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 handleClick = (event: MouseEvent) => {\n    event.preventDefault();\n\n    if (this.disabled) return;\n\n    this.bqClick.emit(this.el);\n    this.expanded = !this.expanded;\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private get open() {\n    return this.expanded && !this.disabled;\n  }\n\n  private get isCssCalcSizeSupported() {\n    return window.CSS?.supports('(block-size: calc-size(auto))');\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <details\n        class={{\n          [`bq-accordion overflow-hidden ${this.size} ${this.appearance}`]: true,\n          'no-animation': this.noAnimation,\n          disabled: this.disabled,\n        }}\n        ref={(detailsElem: HTMLDetailsElement) => (this.detailsElem = detailsElem)}\n        open={this.open}\n        part=\"base\"\n      >\n        <summary\n          class=\"bq-accordion__header\"\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-expanded={this.expanded}\n          aria-disabled={this.disabled}\n          aria-controls=\"bq-accordion__body\"\n          tabindex={this.disabled ? -1 : 0}\n          part=\"header\"\n        >\n          <div\n            ref={(element) => (this.prefixElem = element)}\n            class={{ 'bq-accordion__header--prefix': true, '!hidden': !this.hasPrefix }}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n          </div>\n          <div class=\"bq-accordion__header--text\" part=\"text\">\n            <slot name=\"header\" />\n          </div>\n          <div\n            ref={(element) => (this.suffixElem = element)}\n            class={{ 'bq-accordion__header--suffix': true, '!hidden': !this.hasSuffix }}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n          </div>\n          <div\n            class={{\n              'flex items-center justify-center transition-transform duration-300 ease-in-out': true,\n              '!hidden': this.open && !this.rotate,\n              'rotate-180': this.rotate && this.open,\n            }}\n          >\n            <slot name=\"expand\">\n              <bq-icon name=\"plus\" />\n            </slot>\n          </div>\n          <div\n            class={{ 'flex items-center justify-center': true, '!hidden': (!this.open && !this.rotate) || this.rotate }}\n          >\n            <slot name=\"collapse\">\n              <bq-icon name=\"minus\" />\n            </slot>\n          </div>\n        </summary>\n        <div id=\"bq-accordion__body\" class=\"bq-accordion__body overflow-hidden\" part=\"panel\">\n          <slot />\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}