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

package/dist/beeq/{p-8b6fc3ef.entry.js.map → p-3043c826.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bqSideMenuItemCss","BqSideMenuItemStyle0","BqSideMenuItem","labelElem","bqBlur","bqFocus","bqClick","componentDidLoad","this","handleSlotChange","textContent","getTextContent","querySelector","handleBlur","ev","disabled","preventDefault","stopPropagation","emit","el","handleFocus","handleClick","menuItem","h","Fragment","class","active","collapse","onBlur","onFocus","onClick","role","tabindex","slot","part","name","ref","onSlotchange","render","placement","exportparts"],"sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Side menu item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu-item.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-side-menu__item {\n  @apply flex items-center gap-x-s rounded-s px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n  // Default state\n  @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n  // Focus state\n  @apply [&:not(.disabled)]:focus-visible:focus;\n\n  // Hover state\n  @apply [&:not(.disabled)]:hover:cursor-pointer;\n\n  &:not(.disabled, .active):hover {\n    @apply hover:bg-[var(--bq-side-menu-item--bg-hover)] hover:text-m hover:text-[color:var(--bq-side-menu-item--text-hover)];\n  }\n}\n\n.bq-side-menu__item.active {\n  // Active state\n  @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n  @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n  @apply justify-center gap-0;\n\n  .bq-side-menu__item--label,\n  .bq-side-menu__item--suffix {\n    @apply sr-only scale-0;\n  }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n  @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/**\n * @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n */\n@Component({\n  tag: 'bq-side-menu-item',\n  styleUrl: './scss/bq-side-menu-item.scss',\n  shadow: true,\n})\nexport class BqSideMenuItem {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSideMenuItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() textContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the menu item will be shown as active/selected. */\n  @Prop() active: boolean = false;\n\n  /** If true, the item label and suffix will be hidden and the with will be reduce according to its parent */\n  @Prop() collapse: boolean = false;\n\n  /** If true, the menu item will be disabled (no interaction allowed) */\n  @Prop() disabled: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.labelElem) return;\n    this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n  };\n\n  handleBlur = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqBlur.emit(this.el);\n  };\n\n  handleFocus = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqFocus.emit(this.el);\n  };\n\n  handleClick = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  private menuItem = () => (\n    <Fragment>\n      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n      <a\n        class={{\n          'bq-side-menu__item': true,\n          active: this.active,\n          disabled: this.disabled,\n          'is-collapsed': this.collapse,\n        }}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        role=\"menuitem\"\n        tabindex={this.disabled ? -1 : 0}\n        slot=\"trigger\"\n        part=\"base\"\n      >\n        <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n          <slot name=\"prefix\" />\n        </div>\n        <div\n          class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n          ref={(labelElem) => (this.labelElem = labelElem)}\n        >\n          <slot onSlotchange={this.handleSlotChange} />\n        </div>\n        <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n          <slot name=\"suffix\" />\n        </div>\n      </a>\n    </Fragment>\n  );\n\n  render() {\n    return !this.collapse ? (\n      this.menuItem()\n    ) : (\n      <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n        {this.textContent}\n        {this.menuItem()}\n      </bq-tooltip>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;AAAA,MAAMA,IAAoB;;AAC1B,MAAAC,IAAeD;;MCgBFE,IAAc;;;;;;;kBAqBC;oBAGE;oBAGA;;;;EAvBpBC;;;;;;;;;;EAiCCC;;EAGAC;;EAGAC;;;;EAMT,gBAAAC;IACEC,KAAKC;;;;;;;;;;;;;;EAkBCA,iBAAmB;IACzB,KAAKD,KAAKL,WAAW;IACrBK,KAAKE,cAAcC,EAAeH,KAAKL,UAAUS,cAAc;AAAQ;EAGzEC,WAAcC;IACZ,IAAIN,KAAKO,UAAU;MACjBD,EAAGE;MACHF,EAAGG;MACH;;IAGFT,KAAKJ,OAAOc,KAAKV,KAAKW;AAAG;EAG3BC,YAAeN;IACb,IAAIN,KAAKO,UAAU;MACjBD,EAAGE;MACHF,EAAGG;MACH;;IAGFT,KAAKH,QAAQa,KAAKV,KAAKW;AAAG;EAG5BE,YAAeP;IACb,IAAIN,KAAKO,UAAU;MACjBD,EAAGE;MACHF,EAAGG;MACH;;IAGFT,KAAKF,QAAQY,KAAKV,KAAKW;AAAG;;;;EAOpBG,SAAW,MACjBC,EAACC,GAAQ,MAEPD,EAAA;IACEE,OAAO;MACL,sBAAsB;MACtBC,QAAQlB,KAAKkB;MACbX,UAAUP,KAAKO;MACf,gBAAgBP,KAAKmB;;IAEvBC,QAAQpB,KAAKK;IACbgB,SAASrB,KAAKY;IACdU,SAAStB,KAAKa;IAAW,iBACVb,KAAKO,WAAW,SAAS;IACxCgB,MAAK;IACLC,UAAUxB,KAAKO,YAAY,IAAI;IAC/BkB,MAAK;IACLC,MAAK;KAELX,EAAA;IAAKE,OAAM;IAA+CS,MAAK;KAC7DX,EAAA;IAAMY,MAAK;OAEbZ,EAAA;IACEE,OAAM;IACNW,KAAMjC,KAAeK,KAAKL,YAAYA;KAEtCoB,EAAA;IAAMc,cAAc7B,KAAKC;OAE3Bc,EAAA;IAAKE,OAAM;IAAuDS,MAAK;KACrEX,EAAA;IAAMY,MAAK;;EAMnB,MAAAG;IACE,QAAQ9B,KAAKmB,WACXnB,KAAKc,aAELC,EAAA;MAAYE,OAAM;MAAoCc,WAAU;MAAQC,aAAY;OACjFhC,KAAKE,aACLF,KAAKc","ignoreList":[]}
+{"version":3,"names":["bqSideMenuItemCss","BqSideMenuItemStyle0","BqSideMenuItem","labelElem","bqBlur","bqFocus","bqClick","componentDidLoad","this","handleSlotChange","textContent","getTextContent","querySelector","handleBlur","ev","disabled","preventDefault","stopPropagation","emit","el","handleFocus","handleClick","menuItem","h","Fragment","class","active","collapse","onBlur","onFocus","onClick","role","tabindex","slot","part","name","ref","onSlotchange","render","placement","exportparts"],"sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Side menu item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu-item.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-side-menu__item {\n  @apply flex items-center gap-x-s rounded-s px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n  // Default state\n  @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n  // Focus state\n  @apply [&:not(.disabled)]:focus-visible:focus;\n\n  // Hover state\n  @apply [&:not(.disabled)]:hover:cursor-pointer;\n\n  &:not(.disabled, .active):hover {\n    @apply hover:bg-[var(--bq-side-menu-item--bg-hover)] hover:text-m hover:text-[color:var(--bq-side-menu-item--text-hover)];\n  }\n}\n\n.bq-side-menu__item.active {\n  // Active state\n  @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n  @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n  @apply justify-center gap-0;\n\n  .bq-side-menu__item--label,\n  .bq-side-menu__item--suffix {\n    @apply sr-only scale-0;\n  }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n  @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/**\n * @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n */\n@Component({\n  tag: 'bq-side-menu-item',\n  styleUrl: './scss/bq-side-menu-item.scss',\n  shadow: true,\n})\nexport class BqSideMenuItem {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSideMenuItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() textContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the menu item will be shown as active/selected. */\n  @Prop() active: boolean = false;\n\n  /** If true, the item label and suffix will be hidden and the with will be reduce according to its parent */\n  @Prop() collapse: boolean = false;\n\n  /** If true, the menu item will be disabled (no interaction allowed) */\n  @Prop() disabled: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.labelElem) return;\n    this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n  };\n\n  handleBlur = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqBlur.emit(this.el);\n  };\n\n  handleFocus = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqFocus.emit(this.el);\n  };\n\n  handleClick = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  private menuItem = () => (\n    <Fragment>\n      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n      <a\n        class={{\n          'bq-side-menu__item': true,\n          active: this.active,\n          disabled: this.disabled,\n          'is-collapsed': this.collapse,\n        }}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        role=\"menuitem\"\n        tabindex={this.disabled ? -1 : 0}\n        slot=\"trigger\"\n        part=\"base\"\n      >\n        <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n          <slot name=\"prefix\" />\n        </div>\n        <div\n          class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n          ref={(labelElem) => (this.labelElem = labelElem)}\n        >\n          <slot onSlotchange={this.handleSlotChange} />\n        </div>\n        <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n          <slot name=\"suffix\" />\n        </div>\n      </a>\n    </Fragment>\n  );\n\n  render() {\n    return !this.collapse ? (\n      this.menuItem()\n    ) : (\n      <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n        {this.textContent}\n        {this.menuItem()}\n      </bq-tooltip>\n    );\n  }\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAoB;;AAC1B,MAAAC,IAAeD;;MCgBFE,IAAc;;;;;;;kBAqBC;oBAGE;oBAGA;;;;EAvBpBC;;;;;;;;;;EAiCCC;;EAGAC;;EAGAC;;;;EAMT,gBAAAC;IACEC,KAAKC;;;;;;;;;;;;;;EAkBCA,iBAAmB;IACzB,KAAKD,KAAKL,WAAW;IACrBK,KAAKE,cAAcC,EAAeH,KAAKL,UAAUS,cAAc;AAAQ;EAGzEC,WAAcC;IACZ,IAAIN,KAAKO,UAAU;MACjBD,EAAGE;MACHF,EAAGG;MACH;;IAGFT,KAAKJ,OAAOc,KAAKV,KAAKW;AAAG;EAG3BC,YAAeN;IACb,IAAIN,KAAKO,UAAU;MACjBD,EAAGE;MACHF,EAAGG;MACH;;IAGFT,KAAKH,QAAQa,KAAKV,KAAKW;AAAG;EAG5BE,YAAeP;IACb,IAAIN,KAAKO,UAAU;MACjBD,EAAGE;MACHF,EAAGG;MACH;;IAGFT,KAAKF,QAAQY,KAAKV,KAAKW;AAAG;;;;EAOpBG,SAAW,MACjBC,EAACC,GAAQ,MAEPD,EAAA;IACEE,OAAO;MACL,sBAAsB;MACtBC,QAAQlB,KAAKkB;MACbX,UAAUP,KAAKO;MACf,gBAAgBP,KAAKmB;;IAEvBC,QAAQpB,KAAKK;IACbgB,SAASrB,KAAKY;IACdU,SAAStB,KAAKa;IAAW,iBACVb,KAAKO,WAAW,SAAS;IACxCgB,MAAK;IACLC,UAAUxB,KAAKO,YAAY,IAAI;IAC/BkB,MAAK;IACLC,MAAK;KAELX,EAAA;IAAKE,OAAM;IAA+CS,MAAK;KAC7DX,EAAA;IAAMY,MAAK;OAEbZ,EAAA;IACEE,OAAM;IACNW,KAAMjC,KAAeK,KAAKL,YAAYA;KAEtCoB,EAAA;IAAMc,cAAc7B,KAAKC;OAE3Bc,EAAA;IAAKE,OAAM;IAAuDS,MAAK;KACrEX,EAAA;IAAMY,MAAK;;EAMnB,MAAAG;IACE,QAAQ9B,KAAKmB,WACXnB,KAAKc,aAELC,EAAA;MAAYE,OAAM;MAAoCc,WAAU;MAAQC,aAAY;OACjFhC,KAAKE,aACLF,KAAKc","ignoreList":[]}

package/dist/beeq/{p-fe57aa48.entry.js → p-38e70f78.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, c as r, g as e, h as b } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { i as t } from "./p-57621be1.js";
 
 import { v as n } from "./p-687da041.js";
@@ -132,4 +130,4 @@ const d = class {
 d.style = s;
 
 export { d as bq_step_item };
-//# sourceMappingURL=p-fe57aa48.entry.js.map
+//# sourceMappingURL=p-38e70f78.entry.js.map

package/dist/beeq/{p-fe57aa48.entry.js.map → p-38e70f78.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["STEP_ITEM_STATUS","bqStepItemCss","BqStepItemStyle0","BqStepItem","checkPropValues","validatePropValue","STEPS_SIZE","this","el","handleIconPrefix","bqClick","connectedCallback","componentWillLoad","componentDidLoad","isDisabled","status","isCurrent","iconElem","querySelector","isHTMLElement","size","weight","render","h","key","class","part","type","name","onSlotchange"],"sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Step item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-step-item.variables';\n\n:host {\n  --bq-icon--color: theme(colors.icon.primary);\n\n  @apply bg-bg-primary;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n  ::slotted(bq-icon) {\n    --bq-icon--color: var(--bq-step-item--prefix-color);\n  }\n\n  &.current {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-current);\n    }\n  }\n\n  &.completed {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n    }\n  }\n\n  &.error {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-error);\n    }\n  }\n\n  &.disabled {\n    ::slotted(bq-icon) {\n      opacity: 0.6;\n    }\n  }\n}\n\n.bq-step-item__prefix.numeric {\n  @apply flex items-center justify-center rounded-full;\n  @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n  @apply text-m font-semibold leading-regular;\n\n  &.small {\n    @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n  }\n\n  // Status\n\n  &.current {\n    @apply bg-[var(--bq-step-item--prefix-color-current)] text-[--bq-text--alt];\n  }\n\n  &.completed {\n    @apply bg-ui-success-alt text-text-success;\n  }\n\n  &.error {\n    @apply bg-ui-danger-alt text-text-danger;\n  }\n\n  &.disabled {\n    @apply opacity-60;\n  }\n}\n\n.bq-step-item__content--description::slotted(*) {\n  @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n */\n@Component({\n  tag: 'bq-step-item',\n  styleUrl: './scss/bq-step-item.scss',\n  shadow: true,\n})\nexport class BqStepItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStepItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines prefix size */\n  @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n  /** It defines step item appearance based on its status */\n  @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n  /** It defines the step item type used */\n  @Prop({ reflect: true }) type?: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('status')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n    this.handleIconPrefix();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the step item is clicked */\n  @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconPrefix();\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 isDisabled(): boolean {\n    return this.status === 'disabled';\n  }\n\n  private get isCurrent(): boolean {\n    return this.status === 'current';\n  }\n\n  private handleIconPrefix = () => {\n    const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n    if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n    iconElem.size = this.size === 'small' ? 24 : 32;\n    iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          'bq-step-item flex gap-s': true,\n          [`bq-step-item--${this.status}`]: true,\n          'pointer-events-none opacity-60': this.isDisabled,\n        }}\n        part=\"base\"\n      >\n        <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n          <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n        </div>\n        <div class=\"bq-step-item__content\">\n          {/* TITLE */}\n          <div\n            class={{\n              'bq-step-item__content--title pe-xs3 text-m leading-regular text-text-primary': true,\n              'pointer-events-none': this.isDisabled,\n              'text-text-brand': this.isCurrent,\n            }}\n            part=\"title\"\n          >\n            <slot />\n          </div>\n          {/* DESCRIPTION */}\n          <div\n            class={{\n              'bq-step-item__content--description text-s leading-regular opacity-60': true,\n              'opacity-60': this.isDisabled,\n            }}\n            part=\"description\"\n          >\n            <slot name=\"description\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAO,MAAMA,IAAmB,EAAC,WAAW,WAAW,aAAa,SAAS;;ACA7E,MAAMC,IAAgB;;AACtB,MAAAC,IAAeD;;MCeFE,IAAU;;;;gBAgBwB;kBAGO;;;;;;;;EAUpD,eAAAC;IACEC,EAAkBC,GAAY,UAAUC,KAAKC,IAAI;IACjDH,EAAkBL,GAAkB,WAAWO,KAAKC,IAAI;IAExDD,KAAKE;;;;;;EAQEC;;;;EAMT,iBAAAC;IACEJ,KAAKH;;EAGP,iBAAAQ;IACEL,KAAKH;;EAGP,gBAAAS;IACEN,KAAKE;;;;;;;;;;;;;;EAkBP,cAAYK;IACV,OAAOP,KAAKQ,WAAW;;EAGzB,aAAYC;IACV,OAAOT,KAAKQ,WAAW;;EAGjBN,iBAAmB;IACzB,MAAMQ,IAAWV,KAAKC,GAAGU,cAAc;IACvC,KAAKD,MAAaE,EAAcF,GAAU,YAAY;IAEtDA,EAASG,OAAOb,KAAKa,SAAS,UAAU,KAAK;IAC7CH,EAASI,SAASd,KAAKS,YAAY,SAAS;AAAS;;;;EAOvD,MAAAM;IACE,OACEC,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,2BAA2B;QAC3B,CAAC,iBAAiBlB,KAAKQ,WAAW;QAClC,kCAAkCR,KAAKO;;MAEzCY,MAAK;OAELH,EAAA;MAAAC,KAAA;MAAKC,OAAO,iCAAiClB,KAAKoB,QAAQpB,KAAKa,QAAQb,KAAKQ;OAC1EQ,EAAA;MAAAC,KAAA;MAAMI,MAAK;MAASC,cAActB,KAAKE;SAEzCc,EAAA;MAAAC,KAAA;MAAKC,OAAM;OAETF,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,gFAAgF;QAChF,uBAAuBlB,KAAKO;QAC5B,mBAAmBP,KAAKS;;MAE1BU,MAAK;OAELH,EAAA;MAAAC,KAAA;SAGFD,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,wEAAwE;QACxE,cAAclB,KAAKO;;MAErBY,MAAK;OAELH,EAAA;MAAAC,KAAA;MAAMI,MAAK","ignoreList":[]}
+{"version":3,"names":["STEP_ITEM_STATUS","bqStepItemCss","BqStepItemStyle0","BqStepItem","checkPropValues","validatePropValue","STEPS_SIZE","this","el","handleIconPrefix","bqClick","connectedCallback","componentWillLoad","componentDidLoad","isDisabled","status","isCurrent","iconElem","querySelector","isHTMLElement","size","weight","render","h","key","class","part","type","name","onSlotchange"],"sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Step item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-step-item.variables';\n\n:host {\n  --bq-icon--color: theme(colors.icon.primary);\n\n  @apply bg-bg-primary;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n  ::slotted(bq-icon) {\n    --bq-icon--color: var(--bq-step-item--prefix-color);\n  }\n\n  &.current {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-current);\n    }\n  }\n\n  &.completed {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n    }\n  }\n\n  &.error {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-error);\n    }\n  }\n\n  &.disabled {\n    ::slotted(bq-icon) {\n      opacity: 0.6;\n    }\n  }\n}\n\n.bq-step-item__prefix.numeric {\n  @apply flex items-center justify-center rounded-full;\n  @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n  @apply text-m font-semibold leading-regular;\n\n  &.small {\n    @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n  }\n\n  // Status\n\n  &.current {\n    @apply bg-[var(--bq-step-item--prefix-color-current)] text-[--bq-text--alt];\n  }\n\n  &.completed {\n    @apply bg-ui-success-alt text-text-success;\n  }\n\n  &.error {\n    @apply bg-ui-danger-alt text-text-danger;\n  }\n\n  &.disabled {\n    @apply opacity-60;\n  }\n}\n\n.bq-step-item__content--description::slotted(*) {\n  @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n */\n@Component({\n  tag: 'bq-step-item',\n  styleUrl: './scss/bq-step-item.scss',\n  shadow: true,\n})\nexport class BqStepItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStepItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines prefix size */\n  @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n  /** It defines step item appearance based on its status */\n  @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n  /** It defines the step item type used */\n  @Prop({ reflect: true }) type?: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('status')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n    this.handleIconPrefix();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the step item is clicked */\n  @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconPrefix();\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 isDisabled(): boolean {\n    return this.status === 'disabled';\n  }\n\n  private get isCurrent(): boolean {\n    return this.status === 'current';\n  }\n\n  private handleIconPrefix = () => {\n    const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n    if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n    iconElem.size = this.size === 'small' ? 24 : 32;\n    iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          'bq-step-item flex gap-s': true,\n          [`bq-step-item--${this.status}`]: true,\n          'pointer-events-none opacity-60': this.isDisabled,\n        }}\n        part=\"base\"\n      >\n        <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n          <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n        </div>\n        <div class=\"bq-step-item__content\">\n          {/* TITLE */}\n          <div\n            class={{\n              'bq-step-item__content--title pe-xs3 text-m leading-regular text-text-primary': true,\n              'pointer-events-none': this.isDisabled,\n              'text-text-brand': this.isCurrent,\n            }}\n            part=\"title\"\n          >\n            <slot />\n          </div>\n          {/* DESCRIPTION */}\n          <div\n            class={{\n              'bq-step-item__content--description text-s leading-regular opacity-60': true,\n              'opacity-60': this.isDisabled,\n            }}\n            part=\"description\"\n          >\n            <slot name=\"description\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAO,MAAMA,IAAmB,EAAC,WAAW,WAAW,aAAa,SAAS;;ACA7E,MAAMC,IAAgB;;AACtB,MAAAC,IAAeD;;MCeFE,IAAU;;;;gBAgBwB;kBAGO;;;;;;;;EAUpD,eAAAC;IACEC,EAAkBC,GAAY,UAAUC,KAAKC,IAAI;IACjDH,EAAkBL,GAAkB,WAAWO,KAAKC,IAAI;IAExDD,KAAKE;;;;;;EAQEC;;;;EAMT,iBAAAC;IACEJ,KAAKH;;EAGP,iBAAAQ;IACEL,KAAKH;;EAGP,gBAAAS;IACEN,KAAKE;;;;;;;;;;;;;;EAkBP,cAAYK;IACV,OAAOP,KAAKQ,WAAW;;EAGzB,aAAYC;IACV,OAAOT,KAAKQ,WAAW;;EAGjBN,iBAAmB;IACzB,MAAMQ,IAAWV,KAAKC,GAAGU,cAAc;IACvC,KAAKD,MAAaE,EAAcF,GAAU,YAAY;IAEtDA,EAASG,OAAOb,KAAKa,SAAS,UAAU,KAAK;IAC7CH,EAASI,SAASd,KAAKS,YAAY,SAAS;AAAS;;;;EAOvD,MAAAM;IACE,OACEC,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,2BAA2B;QAC3B,CAAC,iBAAiBlB,KAAKQ,WAAW;QAClC,kCAAkCR,KAAKO;;MAEzCY,MAAK;OAELH,EAAA;MAAAC,KAAA;MAAKC,OAAO,iCAAiClB,KAAKoB,QAAQpB,KAAKa,QAAQb,KAAKQ;OAC1EQ,EAAA;MAAAC,KAAA;MAAMI,MAAK;MAASC,cAActB,KAAKE;SAEzCc,EAAA;MAAAC,KAAA;MAAKC,OAAM;OAETF,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,gFAAgF;QAChF,uBAAuBlB,KAAKO;QAC5B,mBAAmBP,KAAKS;;MAE1BU,MAAK;OAELH,EAAA;MAAAC,KAAA;SAGFD,EAAA;MAAAC,KAAA;MACEC,OAAO;QACL,wEAAwE;QACxE,cAAclB,KAAKO;;MAErBY,MAAK;OAELH,EAAA;MAAAC,KAAA;MAAMI,MAAK","ignoreList":[]}

package/dist/beeq/{p-818cd6d7.entry.js → p-398bfb48.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, c as r, g as e, h as b } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { d as t } from "./p-1defeea3.js";
 
 import { i as n } from "./p-57621be1.js";
@@ -241,4 +239,4 @@ const s = class {
 s.style = o;
 
 export { s as bq_textarea };
-//# sourceMappingURL=p-818cd6d7.entry.js.map
+//# sourceMappingURL=p-398bfb48.entry.js.map

package/dist/beeq/{p-818cd6d7.entry.js.map → p-398bfb48.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bqTextareaCss","BqTextareaStyle0","BqTextarea","debounceBqInput","fallbackId","helperTextElem","labelElem","textarea","handleValueChange","this","maxlength","value","length","substring","bqBlur","bqChange","bqClear","bqFocus","bqInput","componentDidLoad","numberOfCharacters","handleBlur","disabled","emit","el","handleFocus","handleChange","ev","isHTMLElement","target","handleInput","cancel","debounce","debounceTime","autoResize","autoGrow","inputElem","style","height","scrollHeight","handleLabelSlotChange","hasLabel","hasSlotContent","handleHelperTextSlotChange","hasHelperText","render","h","key","class","part","htmlFor","name","ref","label","onSlotchange","id","disableResize","validationStatus","autocapitalize","autocomplete","autocorrect","autofocus","form","maxLength","undefined","placeholder","readOnly","readonly","required","rows","spellcheck","wrap","elem","onBlur","onChange","onFocus","onInput","span"],"sources":["../../packages/beeq/src/components/textarea/scss/bq-textarea.scss?tag=bq-textarea&encapsulation=shadow","../../packages/beeq/src/components/textarea/bq-textarea.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Textarea styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-textarea.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__label {\n  @apply text-[length:--bq-textarea--label-text-size] text-[color:--bq-textarea--label-text-color] m-be-[--bq-textarea--label-margin-bottom];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                        Native HTML Textarea control                        */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__input {\n  @apply flex-auto resize-y bg-[--bq-textarea--background-color] bs-[inherit];\n  // Border\n  @apply rounded-[--bq-textarea--border-radius] border-[length:--bq-textarea--border-width] border-[color:--bq-textarea--border-color];\n  // Padding\n  @apply pe-[--bq-textarea--padding-end] ps-[--bq-textarea--padding-start] p-b-[--bq-textarea--paddingY];\n  // Text\n  @apply text-[length:--bq-textarea--text-size] text-[color:--bq-textarea--text-color] placeholder:text-[color:--bq-textarea--text-placeholder-color];\n  // Transition\n  @apply transition-colors ease-in-out;\n  // Hover\n  @apply [&:not([disabled]):not(:focus-within)]:hover:border-hover-stroke-brand;\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:opacity-60;\n  // Focus\n  &:not([disabled]):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-textarea--border-color-focus);\n\n    @apply focus border-[color:--bq-ring-color-focus];\n  }\n}\n\n/* ------------------------------- Validations ------------------------------- */\n\n.bq-textarea__input.validation-error {\n  @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.danger);\n\n    @apply border-active-stroke-danger;\n  }\n}\n\n.bq-textarea__input.validation-success {\n  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.success);\n\n    @apply border-active-stroke-success;\n  }\n}\n\n.bq-textarea__input.validation-warning {\n  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.warning);\n\n    @apply border-active-stroke-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Helper text                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__helper {\n  @apply text-[length:--bq-textarea--helper-text-size] text-[color:--bq-textarea--helper-text-color] m-bs-[--bq-textarea--helper-margin-top];\n}\n\n/* ------------------------------- Validations ------------------------------ */\n\n.bq-textarea__helper.validation-error {\n  @apply text-text-danger;\n}\n\n.bq-textarea__helper.validation-success {\n  @apply text-text-success;\n}\n\n.bq-textarea__helper.validation-warning {\n  @apply text-text-warning;\n}\n\n/* ----------------------------- Helper counter ----------------------------- */\n\n/** Apply a disabled text color style to the textarea counter when the validation is none. */\n.bq-textarea__helper[class~='validation-none'] {\n  .bq-textarea__helper--counter {\n    @apply opacity-60;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TTextareaAutoCapitalize, TTextareaWrap } from './bq-textarea.types';\nimport { debounce, hasSlotContent, isHTMLElement, TDebounce } from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\n/**\n * @part base - The component's base wrapper.\n * @part input - The textarea element.\n * @part label - The textarea label.\n * @part helper-info - The helper info container.\n * @part helper-text - The helper text.\n * @part helper-counter - The helper counter.\n */\n@Component({\n  tag: 'bq-textarea',\n  styleUrl: './scss/bq-textarea.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTextarea {\n  // Own Properties\n  // ====================\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackId = 'textarea';\n\n  private helperTextElem?: HTMLElement;\n  private labelElem?: HTMLLabelElement;\n  private textarea: HTMLTextAreaElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTextareaElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasHelperText = false;\n  @State() private hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the textarea field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: TTextareaAutoCapitalize = 'off';\n\n  /**\n   * Specifies whether or not the textarea field should have autocomplete enabled.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /**\n   * Controls whether or not the textarea field should have autocorrect enabled.\n   * Possible values are 'on' and 'off'.\n   */\n  @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n  /** If true, the textarea will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /**\n   * If `true`, the textarea will automatically grow and shrink to fit its contents.\n   * If `false`, the textarea will have a fixed height specified by the `rows` property.\n   */\n  @Prop({ reflect: true }) autoGrow: boolean = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If `true`, the user cannot interact with the textarea. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If `true`, it will block the user's ability to resize the textarea. */\n  @Prop({ reflect: true }) disableResize?: boolean = false;\n\n  /** The ID of the form that the textarea field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * The maximum number of characters that can be entered into the textarea (`0`: no limit).\n   * When enabled, a character counter will be shown underneath the textarea.\n   */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The name of the textarea element. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The placeholder text to show when there is no value. */\n  @Prop({ reflect: true }) placeholder!: string;\n\n  /** If true, the textarea field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean = false;\n\n  /** Indicates whether or not the textarea field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** The number of visible text lines for the control. It must be a positive integer. */\n  @Prop({ reflect: true }) rows: number = 5;\n\n  /** If true, the textarea content may be checked for spelling errors. */\n  @Prop({ reflect: true }) spellcheck: boolean = false;\n  /**\n   * The validation status of the textarea.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the textarea. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The textarea has a validation error.\n   * - `'warning'`: The textarea has a validation warning.\n   * - `'success'`: The textarea has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The value of the textarea. It can be used to reset the textarea to a previous value. */\n  @Prop({ mutable: true }) value: string;\n\n  /** Specifies how the text in a text area is to be wrapped when submitted in a form */\n  @Prop({ reflect: true }) wrap: TTextareaWrap = 'soft';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) return;\n    if (!this.maxlength || this.value.length < this.maxlength) return;\n    // If the value is longer than the maxlength, we need to truncate it\n    this.value = this.value.substring(0, this.maxlength);\n    this.textarea.value = this.value;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the textarea loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value has changed and the textarea loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  /** Callback handler emitted when the textarea value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqTextareaElement>;\n\n  /** Callback handler emitted when the textarea has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value changes.\n   * This handler is called whenever the user types or pastes text into the textarea field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  componentDidLoad() {\n    this.handleValueChange();\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 numberOfCharacters() {\n    if (!this.maxlength || !this.textarea) return 0;\n\n    return this.value.length;\n  }\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n\n    this.autoResize();\n  };\n\n  private autoResize = () => {\n    if (!this.autoGrow) return;\n\n    const inputElem = this.textarea;\n    if (!inputElem) return;\n\n    inputElem.style.height = 'auto';\n    inputElem.style.height = `${inputElem.scrollHeight}px`;\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handleHelperTextSlotChange = () => {\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-textarea flex flex-auto flex-col\" part=\"base\">\n        <label\n          class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name ?? this.fallbackId}\n          aria-label={this.name ?? this.fallbackId}\n          ref={(label: HTMLLabelElement) => (this.labelElem = label)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        <textarea\n          id={this.name ?? this.fallbackId}\n          class={{\n            'bq-textarea__input': true,\n            'resize-none': this.disableResize,\n            [`validation-${this.validationStatus}`]: true,\n          }}\n          autocapitalize={this.autocapitalize}\n          autocomplete={this.autocomplete}\n          autocorrect={this.autocorrect}\n          autofocus={this.autofocus}\n          disabled={this.disabled}\n          form={this.form}\n          maxLength={this.maxlength > 0 ? this.maxlength : undefined}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          rows={this.rows}\n          spellcheck={this.spellcheck}\n          wrap={this.wrap}\n          ref={(elem: HTMLTextAreaElement) => (this.textarea = elem)}\n          onBlur={this.handleBlur}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onInput={this.handleInput}\n          part=\"input\"\n        >\n          {this.value}\n        </textarea>\n        <div\n          class={{\n            'bq-textarea__helper flex items-center justify-between': true,\n            [`validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText && !this.maxlength,\n          }}\n          part=\"helper-info\"\n        >\n          <span\n            class=\"bq-textarea__helper--text\"\n            ref={(span: HTMLElement) => (this.helperTextElem = span)}\n            part=\"helper-text\"\n          >\n            <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n          </span>\n          <span class={{ 'bq-textarea__helper--counter': true, '!hidden': !this.maxlength }} part=\"helper-counter\">\n            {this.numberOfCharacters}/{this.maxlength}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["bqTextareaCss","BqTextareaStyle0","BqTextarea","debounceBqInput","fallbackId","helperTextElem","labelElem","textarea","handleValueChange","this","maxlength","value","length","substring","bqBlur","bqChange","bqClear","bqFocus","bqInput","componentDidLoad","numberOfCharacters","handleBlur","disabled","emit","el","handleFocus","handleChange","ev","isHTMLElement","target","handleInput","cancel","debounce","debounceTime","autoResize","autoGrow","inputElem","style","height","scrollHeight","handleLabelSlotChange","hasLabel","hasSlotContent","handleHelperTextSlotChange","hasHelperText","render","h","key","class","part","htmlFor","name","ref","label","onSlotchange","id","disableResize","validationStatus","autocapitalize","autocomplete","autocorrect","autofocus","form","maxLength","undefined","placeholder","readOnly","readonly","required","rows","spellcheck","wrap","elem","onBlur","onChange","onFocus","onInput","span"],"sources":["../../packages/beeq/src/components/textarea/scss/bq-textarea.scss?tag=bq-textarea&encapsulation=shadow","../../packages/beeq/src/components/textarea/bq-textarea.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Textarea styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-textarea.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__label {\n  @apply text-[length:--bq-textarea--label-text-size] text-[color:--bq-textarea--label-text-color] m-be-[--bq-textarea--label-margin-bottom];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                        Native HTML Textarea control                        */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__input {\n  @apply flex-auto resize-y bg-[--bq-textarea--background-color] bs-[inherit];\n  // Border\n  @apply rounded-[--bq-textarea--border-radius] border-[length:--bq-textarea--border-width] border-[color:--bq-textarea--border-color];\n  // Padding\n  @apply pe-[--bq-textarea--padding-end] ps-[--bq-textarea--padding-start] p-b-[--bq-textarea--paddingY];\n  // Text\n  @apply text-[length:--bq-textarea--text-size] text-[color:--bq-textarea--text-color] placeholder:text-[color:--bq-textarea--text-placeholder-color];\n  // Transition\n  @apply transition-colors ease-in-out;\n  // Hover\n  @apply [&:not([disabled]):not(:focus-within)]:hover:border-hover-stroke-brand;\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:opacity-60;\n  // Focus\n  &:not([disabled]):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-textarea--border-color-focus);\n\n    @apply focus border-[color:--bq-ring-color-focus];\n  }\n}\n\n/* ------------------------------- Validations ------------------------------- */\n\n.bq-textarea__input.validation-error {\n  @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.danger);\n\n    @apply border-active-stroke-danger;\n  }\n}\n\n.bq-textarea__input.validation-success {\n  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.success);\n\n    @apply border-active-stroke-success;\n  }\n}\n\n.bq-textarea__input.validation-warning {\n  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.warning);\n\n    @apply border-active-stroke-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Helper text                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__helper {\n  @apply text-[length:--bq-textarea--helper-text-size] text-[color:--bq-textarea--helper-text-color] m-bs-[--bq-textarea--helper-margin-top];\n}\n\n/* ------------------------------- Validations ------------------------------ */\n\n.bq-textarea__helper.validation-error {\n  @apply text-text-danger;\n}\n\n.bq-textarea__helper.validation-success {\n  @apply text-text-success;\n}\n\n.bq-textarea__helper.validation-warning {\n  @apply text-text-warning;\n}\n\n/* ----------------------------- Helper counter ----------------------------- */\n\n/** Apply a disabled text color style to the textarea counter when the validation is none. */\n.bq-textarea__helper[class~='validation-none'] {\n  .bq-textarea__helper--counter {\n    @apply opacity-60;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TTextareaAutoCapitalize, TTextareaWrap } from './bq-textarea.types';\nimport { debounce, hasSlotContent, isHTMLElement, TDebounce } from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\n/**\n * @part base - The component's base wrapper.\n * @part input - The textarea element.\n * @part label - The textarea label.\n * @part helper-info - The helper info container.\n * @part helper-text - The helper text.\n * @part helper-counter - The helper counter.\n */\n@Component({\n  tag: 'bq-textarea',\n  styleUrl: './scss/bq-textarea.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTextarea {\n  // Own Properties\n  // ====================\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackId = 'textarea';\n\n  private helperTextElem?: HTMLElement;\n  private labelElem?: HTMLLabelElement;\n  private textarea: HTMLTextAreaElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTextareaElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasHelperText = false;\n  @State() private hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the textarea field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: TTextareaAutoCapitalize = 'off';\n\n  /**\n   * Specifies whether or not the textarea field should have autocomplete enabled.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /**\n   * Controls whether or not the textarea field should have autocorrect enabled.\n   * Possible values are 'on' and 'off'.\n   */\n  @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n  /** If true, the textarea will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /**\n   * If `true`, the textarea will automatically grow and shrink to fit its contents.\n   * If `false`, the textarea will have a fixed height specified by the `rows` property.\n   */\n  @Prop({ reflect: true }) autoGrow: boolean = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If `true`, the user cannot interact with the textarea. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If `true`, it will block the user's ability to resize the textarea. */\n  @Prop({ reflect: true }) disableResize?: boolean = false;\n\n  /** The ID of the form that the textarea field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * The maximum number of characters that can be entered into the textarea (`0`: no limit).\n   * When enabled, a character counter will be shown underneath the textarea.\n   */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The name of the textarea element. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The placeholder text to show when there is no value. */\n  @Prop({ reflect: true }) placeholder!: string;\n\n  /** If true, the textarea field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean = false;\n\n  /** Indicates whether or not the textarea field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** The number of visible text lines for the control. It must be a positive integer. */\n  @Prop({ reflect: true }) rows: number = 5;\n\n  /** If true, the textarea content may be checked for spelling errors. */\n  @Prop({ reflect: true }) spellcheck: boolean = false;\n  /**\n   * The validation status of the textarea.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the textarea. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The textarea has a validation error.\n   * - `'warning'`: The textarea has a validation warning.\n   * - `'success'`: The textarea has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The value of the textarea. It can be used to reset the textarea to a previous value. */\n  @Prop({ mutable: true }) value: string;\n\n  /** Specifies how the text in a text area is to be wrapped when submitted in a form */\n  @Prop({ reflect: true }) wrap: TTextareaWrap = 'soft';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) return;\n    if (!this.maxlength || this.value.length < this.maxlength) return;\n    // If the value is longer than the maxlength, we need to truncate it\n    this.value = this.value.substring(0, this.maxlength);\n    this.textarea.value = this.value;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the textarea loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value has changed and the textarea loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  /** Callback handler emitted when the textarea value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqTextareaElement>;\n\n  /** Callback handler emitted when the textarea has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value changes.\n   * This handler is called whenever the user types or pastes text into the textarea field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  componentDidLoad() {\n    this.handleValueChange();\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 numberOfCharacters() {\n    if (!this.maxlength || !this.textarea) return 0;\n\n    return this.value.length;\n  }\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n\n    this.autoResize();\n  };\n\n  private autoResize = () => {\n    if (!this.autoGrow) return;\n\n    const inputElem = this.textarea;\n    if (!inputElem) return;\n\n    inputElem.style.height = 'auto';\n    inputElem.style.height = `${inputElem.scrollHeight}px`;\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handleHelperTextSlotChange = () => {\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-textarea flex flex-auto flex-col\" part=\"base\">\n        <label\n          class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name ?? this.fallbackId}\n          aria-label={this.name ?? this.fallbackId}\n          ref={(label: HTMLLabelElement) => (this.labelElem = label)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        <textarea\n          id={this.name ?? this.fallbackId}\n          class={{\n            'bq-textarea__input': true,\n            'resize-none': this.disableResize,\n            [`validation-${this.validationStatus}`]: true,\n          }}\n          autocapitalize={this.autocapitalize}\n          autocomplete={this.autocomplete}\n          autocorrect={this.autocorrect}\n          autofocus={this.autofocus}\n          disabled={this.disabled}\n          form={this.form}\n          maxLength={this.maxlength > 0 ? this.maxlength : undefined}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          rows={this.rows}\n          spellcheck={this.spellcheck}\n          wrap={this.wrap}\n          ref={(elem: HTMLTextAreaElement) => (this.textarea = elem)}\n          onBlur={this.handleBlur}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onInput={this.handleInput}\n          part=\"input\"\n        >\n          {this.value}\n        </textarea>\n        <div\n          class={{\n            'bq-textarea__helper flex items-center justify-between': true,\n            [`validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText && !this.maxlength,\n          }}\n          part=\"helper-info\"\n        >\n          <span\n            class=\"bq-textarea__helper--text\"\n            ref={(span: HTMLElement) => (this.helperTextElem = span)}\n            part=\"helper-text\"\n          >\n            <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n          </span>\n          <span class={{ 'bq-textarea__helper--counter': true, '!hidden': !this.maxlength }} part=\"helper-counter\">\n            {this.numberOfCharacters}/{this.maxlength}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/{p-27974392.entry.js → p-41ac1d84.entry.js}

@@ -4,9 +4,7 @@
  */
 import { r as a, g as r, h as e } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
-import { a as b } from "./p-5a9a73a0.js";
+import { a as b } from "./p-edfd9767.js";
 
 import { i as n } from "./p-99829fc7.js";
 
@@ -194,4 +192,4 @@ const v = class {
 v.style = c;
 
 export { v as bq_spinner };
-//# sourceMappingURL=p-27974392.entry.js.map
+//# sourceMappingURL=p-41ac1d84.entry.js.map

package/dist/beeq/{p-27974392.entry.js.map → p-41ac1d84.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["SPINNER_TEXT_POSITION","SPINNER_SIZE","bqSpinnerCss","BqSpinnerStyle0","BqSpinner","iconSlotElem","slotElem","observer","MutationObserver","mutations","mutation","this","slotContentLength","target","textContent","length","handleTextPositionProp","validatePropValue","el","handleSizeProp","setIconSize","handleHasIconSlot","componentWillLoad","checkPropValues","componentDidLoad","disconnectedCallback","disconnect","handleSlotChange","hasSlot","hasSlotContent","slot","querySelector","isNil","getTextContent","recurse","nodes","assignedNodes","flatten","forEach","node","observe","characterData","childList","subtree","handleIconSlotChange","hasIconSlot","isTextDisplayed","textPosition","bqIcon","size","parseInt","getCSSVariableValue","toString","assignedElements","filter","isHTMLElement","render","h","key","class","animation","part","role","fill","viewBox","d","opacity","flex","ref","spanElem","name","onSlotchange"],"sources":["../../packages/beeq/src/components/spinner/bq-spinner.types.ts","../../packages/beeq/src/components/spinner/scss/bq-spinner.scss?tag=bq-spinner&encapsulation=shadow","../../packages/beeq/src/components/spinner/bq-spinner.tsx"],"sourcesContent":["export const SPINNER_TEXT_POSITION = ['none', 'left', 'right', 'above', 'bellow'] as const;\nexport const SPINNER_SIZE = ['small', 'medium', 'large'] as const;\nexport type TSpinnerTextPosition = (typeof SPINNER_TEXT_POSITION)[number];\nexport type TSpinnerSize = (typeof SPINNER_SIZE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                               Spinner styles                               */\n/* -------------------------------------------------------------------------- */\n@import './bq-spinner.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n.bq-spinner {\n  @apply flex;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Spinner loader size                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-spinner--loader.large {\n  @apply bs-[--bq-spinner--size-large] is-[--bq-spinner--size-large];\n}\n\n.bq-spinner--loader.medium {\n  @apply bs-[--bq-spinner--size-medium] is-[--bq-spinner--size-medium];\n}\n\n.bq-spinner--loader.small {\n  @apply bs-[--bq-spinner--size-small] is-[--bq-spinner--size-small];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Text position                               */\n/* -------------------------------------------------------------------------- */\n\n.text-left,\n.text-right {\n  @apply flex-row items-center;\n\n  &.has-text {\n    @apply gap-x-m;\n  }\n}\n\n.text-left {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-2;\n  }\n\n  .bq-spinner--text {\n    @apply order-1;\n  }\n}\n\n.text-right {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-1;\n  }\n\n  .bq-spinner--text {\n    @apply order-2;\n  }\n}\n\n.text-above,\n.text-bellow {\n  @apply flex-col items-center;\n\n  &.has-text {\n    @apply gap-y-m;\n  }\n}\n\n.text-above {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-2;\n  }\n\n  .bq-spinner--text {\n    @apply order-1;\n  }\n}\n\n.text-bellow {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-1;\n  }\n\n  .bq-spinner--text {\n    @apply order-2;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                      Animate slotted icon if provided                      */\n/* -------------------------------------------------------------------------- */\n\n.is-animated {\n  .bq-spinner--icon,\n  .bq-spinner--loader > svg {\n    @include animation-spin;\n  }\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { SPINNER_SIZE, SPINNER_TEXT_POSITION, TSpinnerSize, TSpinnerTextPosition } from './bq-spinner.types';\nimport {\n  getCSSVariableValue,\n  getTextContent,\n  hasSlotContent,\n  isHTMLElement,\n  isNil,\n  validatePropValue,\n} from '../../shared/utils';\n\n/**\n * Spinners are designed for users to display data loading.\n *\n * @part base - The div wrapper container used under the hood.\n * @part icon - The `<svg>` icon element used to spin/animate.\n * @part custom-icon - The `<span>` tag element that holds the custom icon element passed.\n * @part text - The `<span>` tag element that renders the label text inside the component.\n */\n@Component({\n  tag: 'bq-spinner',\n  styleUrl: './scss/bq-spinner.scss',\n  shadow: true,\n})\nexport class BqSpinner {\n  // Own Properties\n  // ====================\n\n  private iconSlotElem: HTMLElement;\n  private slotElem: HTMLElement;\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.slotContentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSpinnerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasIconSlot = false;\n  @State() private hasSlot = false;\n  @State() private slotContentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** If `false`, the animation on the icon element will be stopped */\n  @Prop({ reflect: true }) animation? = true;\n\n  /** It defines the position of the label text */\n  @Prop({ reflect: true }) textPosition: TSpinnerTextPosition = 'none';\n\n  /** It defines the size of the icon element displayed */\n  @Prop({ reflect: true }) size: TSpinnerSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('textPosition')\n  handleTextPositionProp() {\n    validatePropValue(SPINNER_TEXT_POSITION, 'none', this.el, 'textPosition');\n  }\n\n  @Watch('size')\n  handleSizeProp() {\n    validatePropValue(SPINNER_SIZE, 'medium', this.el, 'size');\n    this.setIconSize();\n  }\n\n  @Watch('hasIconSlot')\n  handleHasIconSlot() {\n    this.setIconSize();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.setIconSize();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.slotElem) return;\n\n    this.hasSlot = hasSlotContent(this.slotElem);\n    if (!this.hasSlot) return;\n\n    const slot = this.slotElem.querySelector('slot') ?? null;\n    if (isNil(slot)) return;\n\n    this.slotContentLength = getTextContent(slot, { recurse: true }).length;\n    const nodes = slot.assignedNodes({ flatten: true });\n    nodes.forEach((node) => {\n      this.observer.observe(node, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n    });\n  };\n\n  private handleIconSlotChange = (): void => {\n    this.hasIconSlot = hasSlotContent(this.iconSlotElem, 'icon');\n  };\n\n  private checkPropValues = (): void => {\n    validatePropValue(SPINNER_TEXT_POSITION, 'none', this.el, 'textPosition');\n    validatePropValue(SPINNER_SIZE, 'medium', this.el, 'size');\n  };\n\n  private get isTextDisplayed(): boolean {\n    return this.textPosition !== 'none';\n  }\n\n  private setIconSize(): void {\n    if (!this.hasIconSlot || !this.bqIcon) return;\n\n    this.bqIcon.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();\n  }\n\n  private get bqIcon(): HTMLBqIconElement | null {\n    if (!this.hasIconSlot) return null;\n\n    const slot = this.iconSlotElem.querySelector('slot');\n\n    return [...slot.assignedElements({ flatten: true })].filter((el: Element) =>\n      isHTMLElement(el, 'bq-icon'),\n    )[0] as HTMLBqIconElement;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          [`bq-spinner ${this.size} text-${this.textPosition}`]: true,\n          'is-animated': this.animation,\n          'has-text': !!this.slotContentLength,\n        }}\n        part=\"base\"\n      >\n        {!this.hasIconSlot && (\n          <div\n            class={`bq-spinner--loader ${this.size} relative text-[--bq-spinner--color]`}\n            aria-label=\"Loading...\"\n            role=\"status\"\n          >\n            <svg class=\"bs-full is-full\" fill=\"currentColor\" viewBox=\"0 0 48 48\">\n              <path\n                fill=\"currentColor\"\n                d=\"M10.27 7.637c-.937-1.117-.798-2.796.415-3.605a24 24 0 0 1 37.09 23.249c-.2 1.444-1.65 2.301-3.064 1.944-1.414-.356-2.25-1.793-2.096-3.242A18.72 18.72 0 0 0 14.102 8.11c-1.237.77-2.895.643-3.832-.474Z\"\n              />\n              <path\n                fill=\"currentColor\"\n                d=\"M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0s24 10.745 24 24ZM5.28 24c0 10.339 8.381 18.72 18.72 18.72 10.339 0 18.72-8.381 18.72-18.72 0-10.339-8.381-18.72-18.72-18.72C13.661 5.28 5.28 13.661 5.28 24Z\"\n                opacity=\".1\"\n              />\n            </svg>\n          </div>\n        )}\n        <span\n          class={{\n            'bq-spinner--icon': true,\n            flex: this.hasIconSlot,\n            '!hidden': !this.hasIconSlot,\n          }}\n          ref={(spanElem) => (this.iconSlotElem = spanElem)}\n          part=\"custom-icon\"\n        >\n          <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n        </span>\n        <span\n          class={{\n            'bq-spinner--text font-medium leading-regular text-text-primary': true,\n            '!hidden': !this.isTextDisplayed,\n          }}\n          part=\"text\"\n          ref={(spanElem) => (this.slotElem = spanElem)}\n        >\n          <slot onSlotchange={this.handleSlotChange} />\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SPINNER_TEXT_POSITION","SPINNER_SIZE","bqSpinnerCss","BqSpinnerStyle0","BqSpinner","iconSlotElem","slotElem","observer","MutationObserver","mutations","mutation","this","slotContentLength","target","textContent","length","handleTextPositionProp","validatePropValue","el","handleSizeProp","setIconSize","handleHasIconSlot","componentWillLoad","checkPropValues","componentDidLoad","disconnectedCallback","disconnect","handleSlotChange","hasSlot","hasSlotContent","slot","querySelector","isNil","getTextContent","recurse","nodes","assignedNodes","flatten","forEach","node","observe","characterData","childList","subtree","handleIconSlotChange","hasIconSlot","isTextDisplayed","textPosition","bqIcon","size","parseInt","getCSSVariableValue","toString","assignedElements","filter","isHTMLElement","render","h","key","class","animation","part","role","fill","viewBox","d","opacity","flex","ref","spanElem","name","onSlotchange"],"sources":["../../packages/beeq/src/components/spinner/bq-spinner.types.ts","../../packages/beeq/src/components/spinner/scss/bq-spinner.scss?tag=bq-spinner&encapsulation=shadow","../../packages/beeq/src/components/spinner/bq-spinner.tsx"],"sourcesContent":["export const SPINNER_TEXT_POSITION = ['none', 'left', 'right', 'above', 'bellow'] as const;\nexport const SPINNER_SIZE = ['small', 'medium', 'large'] as const;\nexport type TSpinnerTextPosition = (typeof SPINNER_TEXT_POSITION)[number];\nexport type TSpinnerSize = (typeof SPINNER_SIZE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                               Spinner styles                               */\n/* -------------------------------------------------------------------------- */\n@import './bq-spinner.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n.bq-spinner {\n  @apply flex;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Spinner loader size                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-spinner--loader.large {\n  @apply bs-[--bq-spinner--size-large] is-[--bq-spinner--size-large];\n}\n\n.bq-spinner--loader.medium {\n  @apply bs-[--bq-spinner--size-medium] is-[--bq-spinner--size-medium];\n}\n\n.bq-spinner--loader.small {\n  @apply bs-[--bq-spinner--size-small] is-[--bq-spinner--size-small];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Text position                               */\n/* -------------------------------------------------------------------------- */\n\n.text-left,\n.text-right {\n  @apply flex-row items-center;\n\n  &.has-text {\n    @apply gap-x-m;\n  }\n}\n\n.text-left {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-2;\n  }\n\n  .bq-spinner--text {\n    @apply order-1;\n  }\n}\n\n.text-right {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-1;\n  }\n\n  .bq-spinner--text {\n    @apply order-2;\n  }\n}\n\n.text-above,\n.text-bellow {\n  @apply flex-col items-center;\n\n  &.has-text {\n    @apply gap-y-m;\n  }\n}\n\n.text-above {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-2;\n  }\n\n  .bq-spinner--text {\n    @apply order-1;\n  }\n}\n\n.text-bellow {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-1;\n  }\n\n  .bq-spinner--text {\n    @apply order-2;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                      Animate slotted icon if provided                      */\n/* -------------------------------------------------------------------------- */\n\n.is-animated {\n  .bq-spinner--icon,\n  .bq-spinner--loader > svg {\n    @include animation-spin;\n  }\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { SPINNER_SIZE, SPINNER_TEXT_POSITION, TSpinnerSize, TSpinnerTextPosition } from './bq-spinner.types';\nimport {\n  getCSSVariableValue,\n  getTextContent,\n  hasSlotContent,\n  isHTMLElement,\n  isNil,\n  validatePropValue,\n} from '../../shared/utils';\n\n/**\n * Spinners are designed for users to display data loading.\n *\n * @part base - The div wrapper container used under the hood.\n * @part icon - The `<svg>` icon element used to spin/animate.\n * @part custom-icon - The `<span>` tag element that holds the custom icon element passed.\n * @part text - The `<span>` tag element that renders the label text inside the component.\n */\n@Component({\n  tag: 'bq-spinner',\n  styleUrl: './scss/bq-spinner.scss',\n  shadow: true,\n})\nexport class BqSpinner {\n  // Own Properties\n  // ====================\n\n  private iconSlotElem: HTMLElement;\n  private slotElem: HTMLElement;\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.slotContentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSpinnerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasIconSlot = false;\n  @State() private hasSlot = false;\n  @State() private slotContentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** If `false`, the animation on the icon element will be stopped */\n  @Prop({ reflect: true }) animation? = true;\n\n  /** It defines the position of the label text */\n  @Prop({ reflect: true }) textPosition: TSpinnerTextPosition = 'none';\n\n  /** It defines the size of the icon element displayed */\n  @Prop({ reflect: true }) size: TSpinnerSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('textPosition')\n  handleTextPositionProp() {\n    validatePropValue(SPINNER_TEXT_POSITION, 'none', this.el, 'textPosition');\n  }\n\n  @Watch('size')\n  handleSizeProp() {\n    validatePropValue(SPINNER_SIZE, 'medium', this.el, 'size');\n    this.setIconSize();\n  }\n\n  @Watch('hasIconSlot')\n  handleHasIconSlot() {\n    this.setIconSize();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.setIconSize();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.slotElem) return;\n\n    this.hasSlot = hasSlotContent(this.slotElem);\n    if (!this.hasSlot) return;\n\n    const slot = this.slotElem.querySelector('slot') ?? null;\n    if (isNil(slot)) return;\n\n    this.slotContentLength = getTextContent(slot, { recurse: true }).length;\n    const nodes = slot.assignedNodes({ flatten: true });\n    nodes.forEach((node) => {\n      this.observer.observe(node, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n    });\n  };\n\n  private handleIconSlotChange = (): void => {\n    this.hasIconSlot = hasSlotContent(this.iconSlotElem, 'icon');\n  };\n\n  private checkPropValues = (): void => {\n    validatePropValue(SPINNER_TEXT_POSITION, 'none', this.el, 'textPosition');\n    validatePropValue(SPINNER_SIZE, 'medium', this.el, 'size');\n  };\n\n  private get isTextDisplayed(): boolean {\n    return this.textPosition !== 'none';\n  }\n\n  private setIconSize(): void {\n    if (!this.hasIconSlot || !this.bqIcon) return;\n\n    this.bqIcon.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();\n  }\n\n  private get bqIcon(): HTMLBqIconElement | null {\n    if (!this.hasIconSlot) return null;\n\n    const slot = this.iconSlotElem.querySelector('slot');\n\n    return [...slot.assignedElements({ flatten: true })].filter((el: Element) =>\n      isHTMLElement(el, 'bq-icon'),\n    )[0] as HTMLBqIconElement;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          [`bq-spinner ${this.size} text-${this.textPosition}`]: true,\n          'is-animated': this.animation,\n          'has-text': !!this.slotContentLength,\n        }}\n        part=\"base\"\n      >\n        {!this.hasIconSlot && (\n          <div\n            class={`bq-spinner--loader ${this.size} relative text-[--bq-spinner--color]`}\n            aria-label=\"Loading...\"\n            role=\"status\"\n          >\n            <svg class=\"bs-full is-full\" fill=\"currentColor\" viewBox=\"0 0 48 48\">\n              <path\n                fill=\"currentColor\"\n                d=\"M10.27 7.637c-.937-1.117-.798-2.796.415-3.605a24 24 0 0 1 37.09 23.249c-.2 1.444-1.65 2.301-3.064 1.944-1.414-.356-2.25-1.793-2.096-3.242A18.72 18.72 0 0 0 14.102 8.11c-1.237.77-2.895.643-3.832-.474Z\"\n              />\n              <path\n                fill=\"currentColor\"\n                d=\"M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0s24 10.745 24 24ZM5.28 24c0 10.339 8.381 18.72 18.72 18.72 10.339 0 18.72-8.381 18.72-18.72 0-10.339-8.381-18.72-18.72-18.72C13.661 5.28 5.28 13.661 5.28 24Z\"\n                opacity=\".1\"\n              />\n            </svg>\n          </div>\n        )}\n        <span\n          class={{\n            'bq-spinner--icon': true,\n            flex: this.hasIconSlot,\n            '!hidden': !this.hasIconSlot,\n          }}\n          ref={(spanElem) => (this.iconSlotElem = spanElem)}\n          part=\"custom-icon\"\n        >\n          <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n        </span>\n        <span\n          class={{\n            'bq-spinner--text font-medium leading-regular text-text-primary': true,\n            '!hidden': !this.isTextDisplayed,\n          }}\n          part=\"text\"\n          ref={(spanElem) => (this.slotElem = spanElem)}\n        >\n          <slot onSlotchange={this.handleSlotChange} />\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/{p-908c57e9.entry.js → p-4eabcd51.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, g as r, h as b } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { v as e } from "./p-687da041.js";
 
 const q = [ "alert", "danger", "info", "neutral", "success" ];
@@ -81,4 +79,4 @@ const i = class {
 i.style = t;
 
 export { i as bq_status };
-//# sourceMappingURL=p-908c57e9.entry.js.map
+//# sourceMappingURL=p-4eabcd51.entry.js.map

package/dist/beeq/{p-908c57e9.entry.js.map → p-4eabcd51.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["STATUS_TYPE","bqStatusCss","BqStatusStyle0","BqStatus","checkPropValues","validatePropValue","this","el","componentWillLoad","render","h","key","class","part","role","type","size"],"sources":["../../packages/beeq/src/components/status/bq-status.types.ts","../../packages/beeq/src/components/status/scss/bq-status.scss?tag=bq-status&encapsulation=shadow","../../packages/beeq/src/components/status/bq-status.tsx"],"sourcesContent":["export const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'] as const;\nexport type TStatusType = (typeof STATUS_TYPE)[number];\n","@import './bq-status.variables';\n\n.bq-status__circle {\n  &::part(base) {\n    --bq-badge--size-medium: var(--bq-status-circle--size);\n  }\n\n  &.success::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.success);\n  }\n\n  &.danger::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.danger);\n  }\n\n  &.neutral::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.secondary);\n  }\n\n  &.alert::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.warning);\n  }\n\n  &.info::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.brand);\n  }\n}\n\n.bq-status__text ::slotted(*) {\n  @apply text-s font-medium leading-regular text-text-primary m-b-0 m-i-0 p-b-0 p-i-0;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STATUS_TYPE, TStatusType } from './bq-status.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper of the status component\n * @part circle - The colored circle that marks the status type\n * @part text - The `<div>` container that holds the text label of the status component\n */\n@Component({\n  tag: 'bq-status',\n  styleUrl: './scss/bq-status.scss',\n  shadow: true,\n})\nexport class BqStatus {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStatusElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines the type of status to display  */\n  @Prop({ reflect: true }) type: TStatusType = 'neutral';\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(STATUS_TYPE, 'neutral', this.el, 'type');\n  }\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n  render() {\n    return (\n      <div class=\"bq-status inline-flex items-center gap-xs\" part=\"base\" role=\"status\">\n        <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size=\"medium\" part=\"circle\" role=\"img\" />\n        <div\n          class=\"bq-status__text text-s font-medium leading-regular text-text-primary max-bs-[20px] p-b-0 p-i-0 m-b-0 m-i-0\"\n          part=\"text\"\n        >\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;AAAO,MAAMA,IAAc,EAAC,SAAS,UAAU,QAAQ,WAAW;;ACAlE,MAAMC,IAAc;;AACpB,MAAAC,IAAeD;;MCcFE,IAAQ;;;gBAgB0B;;;;;;;EAK7C,eAAAC;IACEC,EAAkBL,GAAa,WAAWM,KAAKC,IAAI;;;;;;;;EAUrD,iBAAAC;IACEF,KAAKF;;;;;;;;;;;;;;;;;EAoBP,MAAAK;IACE,OACEC,EAAA;MAAAC,KAAA;MAAKC,OAAM;MAA4CC,MAAK;MAAOC,MAAK;OACtEJ,EAAA;MAAAC,KAAA;MAAUC,OAAO,kCAAkCN,KAAKS;MAAQC,MAAK;MAASH,MAAK;MAASC,MAAK;QACjGJ,EAAA;MAAAC,KAAA;MACEC,OAAM;MACNC,MAAK;OAELH,EAAA;MAAAC,KAAA","ignoreList":[]}
+{"version":3,"names":["STATUS_TYPE","bqStatusCss","BqStatusStyle0","BqStatus","checkPropValues","validatePropValue","this","el","componentWillLoad","render","h","key","class","part","role","type","size"],"sources":["../../packages/beeq/src/components/status/bq-status.types.ts","../../packages/beeq/src/components/status/scss/bq-status.scss?tag=bq-status&encapsulation=shadow","../../packages/beeq/src/components/status/bq-status.tsx"],"sourcesContent":["export const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'] as const;\nexport type TStatusType = (typeof STATUS_TYPE)[number];\n","@import './bq-status.variables';\n\n.bq-status__circle {\n  &::part(base) {\n    --bq-badge--size-medium: var(--bq-status-circle--size);\n  }\n\n  &.success::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.success);\n  }\n\n  &.danger::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.danger);\n  }\n\n  &.neutral::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.secondary);\n  }\n\n  &.alert::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.warning);\n  }\n\n  &.info::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.brand);\n  }\n}\n\n.bq-status__text ::slotted(*) {\n  @apply text-s font-medium leading-regular text-text-primary m-b-0 m-i-0 p-b-0 p-i-0;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STATUS_TYPE, TStatusType } from './bq-status.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper of the status component\n * @part circle - The colored circle that marks the status type\n * @part text - The `<div>` container that holds the text label of the status component\n */\n@Component({\n  tag: 'bq-status',\n  styleUrl: './scss/bq-status.scss',\n  shadow: true,\n})\nexport class BqStatus {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStatusElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines the type of status to display  */\n  @Prop({ reflect: true }) type: TStatusType = 'neutral';\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(STATUS_TYPE, 'neutral', this.el, 'type');\n  }\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n  render() {\n    return (\n      <div class=\"bq-status inline-flex items-center gap-xs\" part=\"base\" role=\"status\">\n        <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size=\"medium\" part=\"circle\" role=\"img\" />\n        <div\n          class=\"bq-status__text text-s font-medium leading-regular text-text-primary max-bs-[20px] p-b-0 p-i-0 m-b-0 m-i-0\"\n          part=\"text\"\n        >\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;AAAO,MAAMA,IAAc,EAAC,SAAS,UAAU,QAAQ,WAAW;;ACAlE,MAAMC,IAAc;;AACpB,MAAAC,IAAeD;;MCcFE,IAAQ;;;gBAgB0B;;;;;;;EAK7C,eAAAC;IACEC,EAAkBL,GAAa,WAAWM,KAAKC,IAAI;;;;;;;;EAUrD,iBAAAC;IACEF,KAAKF;;;;;;;;;;;;;;;;;EAoBP,MAAAK;IACE,OACEC,EAAA;MAAAC,KAAA;MAAKC,OAAM;MAA4CC,MAAK;MAAOC,MAAK;OACtEJ,EAAA;MAAAC,KAAA;MAAUC,OAAO,kCAAkCN,KAAKS;MAAQC,MAAK;MAASH,MAAK;MAASC,MAAK;QACjGJ,EAAA;MAAAC,KAAA;MACEC,OAAM;MACNC,MAAK;OAELH,EAAA;MAAAC,KAAA","ignoreList":[]}

package/dist/beeq/{p-f5d59aba.entry.js → p-5ff6621d.entry.js}

@@ -4,9 +4,7 @@
  */
 import { r as a, g as r, h as b, a as e } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
-import { g as q } from "./p-5a9a73a0.js";
+import { g as q } from "./p-edfd9767.js";
 
 import { i as n } from "./p-99829fc7.js";
 
@@ -133,4 +131,4 @@ const l = class {
 l.style = s;
 
 export { l as bq_badge };
-//# sourceMappingURL=p-f5d59aba.entry.js.map
+//# sourceMappingURL=p-5ff6621d.entry.js.map

package/dist/beeq/{p-f5d59aba.entry.js.map → p-5ff6621d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["BADGE_SIZE","bqBadgeCss","BqBadgeStyle0","BqBadge","spanElement","observer","MutationObserver","mutations","mutation","this","contentLength","target","textContent","length","handleSizePropChange","validatePropValue","el","componentWillLoad","disconnectedCallback","disconnect","onSlotChange","slot","isNil","getTextContent","recurse","node","assignedNodes","flatten","takeRecords","observe","characterData","childList","subtree","querySelector","render","styles","backgroundColor","getColorCSSVariable","textColor","h","Host","key","style","class","size","digit","part","ref","element","onSlotchange"],"sources":["../../packages/beeq/src/components/badge/bq-badge.types.ts","../../packages/beeq/src/components/badge/scss/bq-badge.scss?tag=bq-badge&encapsulation=shadow","../../packages/beeq/src/components/badge/bq-badge.tsx"],"sourcesContent":["export const BADGE_SIZE = ['small', 'medium'] as const;\nexport type TBadgeSize = (typeof BADGE_SIZE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Badge styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-badge.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-badge {\n  @apply flex items-center justify-center bg-[color:--bq-badge--background-color] text-[color:--bq-badge--text-color];\n  @apply rounded-[--bq-badge--border-radius] border-[length:--bq-badge--border-width] border-[color:--bq-badge--border-color];\n\n  border-style: var(--bq-badge--border-style);\n  box-shadow: var(--bq-badge--box-shadow);\n}\n\n.size {\n  &--small {\n    @apply bs-[--bq-badge--size-small] is-[--bq-badge--size-small];\n  }\n\n  &--medium {\n    @apply bs-[--bq-badge--size-medium] is-[--bq-badge--size-medium];\n  }\n}\n\n.digit {\n  @apply min-bs-[--bq-badge--size-large] min-is-[--bq-badge--size-large];\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { BADGE_SIZE, TBadgeSize } from './bq-badge.types';\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper that holds the count.\n * @part number - The component's internal wrapper that holds the slot.\n */\n@Component({\n  tag: 'bq-badge',\n  styleUrl: './scss/bq-badge.scss',\n  shadow: true,\n})\nexport class BqBadge {\n  // Own Properties\n  // ====================\n\n  private spanElement?: HTMLSpanElement;\n\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.contentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el: HTMLBqBadgeElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private contentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** Badge background color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) backgroundColor? = 'ui--danger';\n\n  /** Badge number color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) textColor? = 'text--inverse';\n\n  /** The size of the badge. Relevant if badge has no content. */\n  @Prop({ reflect: true, mutable: true }) size?: TBadgeSize = 'small';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  handleSizePropChange() {\n    validatePropValue(BADGE_SIZE, 'small', this.el, 'size');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleSizePropChange();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\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 onSlotChange = () => {\n    const slot = this.slot;\n\n    if (isNil(slot)) return;\n\n    this.contentLength = getTextContent(slot, { recurse: true }).length;\n    const [node] = slot.assignedNodes({ flatten: true });\n\n    if (isNil(node)) {\n      this.observer.takeRecords();\n      return;\n    }\n\n    this.observer.observe(node, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  private get slot(): HTMLSlotElement | null {\n    return this.spanElement?.querySelector('slot') ?? null;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),\n      ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-badge': true,\n            [`size--${this.size}`]: this.contentLength === 0,\n            digit: this.contentLength > 0,\n            'p-i-xs2': this.contentLength > 1,\n          }}\n          part=\"base\"\n        >\n          <span ref={(element) => (this.spanElement = element)} class=\"text-xs font-bold leading-small\" part=\"number\">\n            <slot onSlotchange={this.onSlotChange}></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAO,MAAMA,IAAa,EAAC,SAAS;;ACApC,MAAMC,IAAa;;AACnB,MAAAC,IAAeD;;MCaFE,IAAO;;;yBAoBe;2BAM0B;qBAGN;gBAGO;;;;EA5BpDC;EAEAC,SAA6B,IAAIC,kBAAkBC;IACzD,OAAOC,KAAYD;IACnBE,KAAKC,gBAAgBF,EAASG,OAAOC,YAAYC;AAAM;;;;;;EA8BzD,oBAAAC;IACEC,EAAkBf,GAAY,SAASS,KAAKO,IAAI;;;;;;;;EAWlD,iBAAAC;IACER,KAAKK;;EAGP,oBAAAI;IACET,KAAKJ,UAAUc;;;;;;;;;;;;;;EAkBTC,aAAe;IACrB,MAAMC,IAAOZ,KAAKY;IAElB,IAAIC,EAAMD,IAAO;IAEjBZ,KAAKC,gBAAgBa,EAAeF,GAAM;MAAEG,SAAS;OAAQX;IAC7D,OAAOY,KAAQJ,EAAKK,cAAc;MAAEC,SAAS;;IAE7C,IAAIL,EAAMG,IAAO;MACfhB,KAAKJ,SAASuB;MACd;;IAGFnB,KAAKJ,SAASwB,QAAQJ,GAAM;MAC1BK,eAAe;MACfC,WAAW;MACXC,SAAS;;AACT;EAGJ,QAAYX;IACV,OAAOZ,KAAKL,aAAa6B,cAAc,WAAW;;;;;EAOpD,MAAAC;IACE,MAAMC,IAAS;SACT1B,KAAK2B,mBAAmB;QAAE,gCAAgCC,EAAoB5B,KAAK2B;;SACnF3B,KAAK6B,aAAa;QAAE,0BAA0BD,EAAoB5B,KAAK6B;;;IAG7E,OACEC,EAACC,GAAI;MAAAC,KAAA;MAACC,OAAOP;OACXI,EAAA;MAAAE,KAAA;MACEE,OAAO;QACL,YAAY;QACZ,CAAC,SAASlC,KAAKmC,SAASnC,KAAKC,kBAAkB;QAC/CmC,OAAOpC,KAAKC,gBAAgB;QAC5B,WAAWD,KAAKC,gBAAgB;;MAElCoC,MAAK;OAELP,EAAA;MAAAE,KAAA;MAAMM,KAAMC,KAAavC,KAAKL,cAAc4C;MAAUL,OAAM;MAAkCG,MAAK;OACjGP,EAAA;MAAAE,KAAA;MAAMQ,cAAcxC,KAAKW","ignoreList":[]}
+{"version":3,"names":["BADGE_SIZE","bqBadgeCss","BqBadgeStyle0","BqBadge","spanElement","observer","MutationObserver","mutations","mutation","this","contentLength","target","textContent","length","handleSizePropChange","validatePropValue","el","componentWillLoad","disconnectedCallback","disconnect","onSlotChange","slot","isNil","getTextContent","recurse","node","assignedNodes","flatten","takeRecords","observe","characterData","childList","subtree","querySelector","render","styles","backgroundColor","getColorCSSVariable","textColor","h","Host","key","style","class","size","digit","part","ref","element","onSlotchange"],"sources":["../../packages/beeq/src/components/badge/bq-badge.types.ts","../../packages/beeq/src/components/badge/scss/bq-badge.scss?tag=bq-badge&encapsulation=shadow","../../packages/beeq/src/components/badge/bq-badge.tsx"],"sourcesContent":["export const BADGE_SIZE = ['small', 'medium'] as const;\nexport type TBadgeSize = (typeof BADGE_SIZE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Badge styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-badge.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-badge {\n  @apply flex items-center justify-center bg-[color:--bq-badge--background-color] text-[color:--bq-badge--text-color];\n  @apply rounded-[--bq-badge--border-radius] border-[length:--bq-badge--border-width] border-[color:--bq-badge--border-color];\n\n  border-style: var(--bq-badge--border-style);\n  box-shadow: var(--bq-badge--box-shadow);\n}\n\n.size {\n  &--small {\n    @apply bs-[--bq-badge--size-small] is-[--bq-badge--size-small];\n  }\n\n  &--medium {\n    @apply bs-[--bq-badge--size-medium] is-[--bq-badge--size-medium];\n  }\n}\n\n.digit {\n  @apply min-bs-[--bq-badge--size-large] min-is-[--bq-badge--size-large];\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { BADGE_SIZE, TBadgeSize } from './bq-badge.types';\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper that holds the count.\n * @part number - The component's internal wrapper that holds the slot.\n */\n@Component({\n  tag: 'bq-badge',\n  styleUrl: './scss/bq-badge.scss',\n  shadow: true,\n})\nexport class BqBadge {\n  // Own Properties\n  // ====================\n\n  private spanElement?: HTMLSpanElement;\n\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.contentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el: HTMLBqBadgeElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private contentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** Badge background color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) backgroundColor? = 'ui--danger';\n\n  /** Badge number color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) textColor? = 'text--inverse';\n\n  /** The size of the badge. Relevant if badge has no content. */\n  @Prop({ reflect: true, mutable: true }) size?: TBadgeSize = 'small';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  handleSizePropChange() {\n    validatePropValue(BADGE_SIZE, 'small', this.el, 'size');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleSizePropChange();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\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 onSlotChange = () => {\n    const slot = this.slot;\n\n    if (isNil(slot)) return;\n\n    this.contentLength = getTextContent(slot, { recurse: true }).length;\n    const [node] = slot.assignedNodes({ flatten: true });\n\n    if (isNil(node)) {\n      this.observer.takeRecords();\n      return;\n    }\n\n    this.observer.observe(node, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  private get slot(): HTMLSlotElement | null {\n    return this.spanElement?.querySelector('slot') ?? null;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),\n      ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-badge': true,\n            [`size--${this.size}`]: this.contentLength === 0,\n            digit: this.contentLength > 0,\n            'p-i-xs2': this.contentLength > 1,\n          }}\n          part=\"base\"\n        >\n          <span ref={(element) => (this.spanElement = element)} class=\"text-xs font-bold leading-small\" part=\"number\">\n            <slot onSlotchange={this.onSlotChange}></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAO,MAAMA,IAAa,EAAC,SAAS;;ACApC,MAAMC,IAAa;;AACnB,MAAAC,IAAeD;;MCaFE,IAAO;;;yBAoBe;2BAM0B;qBAGN;gBAGO;;;;EA5BpDC;EAEAC,SAA6B,IAAIC,kBAAkBC;IACzD,OAAOC,KAAYD;IACnBE,KAAKC,gBAAgBF,EAASG,OAAOC,YAAYC;AAAM;;;;;;EA8BzD,oBAAAC;IACEC,EAAkBf,GAAY,SAASS,KAAKO,IAAI;;;;;;;;EAWlD,iBAAAC;IACER,KAAKK;;EAGP,oBAAAI;IACET,KAAKJ,UAAUc;;;;;;;;;;;;;;EAkBTC,aAAe;IACrB,MAAMC,IAAOZ,KAAKY;IAElB,IAAIC,EAAMD,IAAO;IAEjBZ,KAAKC,gBAAgBa,EAAeF,GAAM;MAAEG,SAAS;OAAQX;IAC7D,OAAOY,KAAQJ,EAAKK,cAAc;MAAEC,SAAS;;IAE7C,IAAIL,EAAMG,IAAO;MACfhB,KAAKJ,SAASuB;MACd;;IAGFnB,KAAKJ,SAASwB,QAAQJ,GAAM;MAC1BK,eAAe;MACfC,WAAW;MACXC,SAAS;;AACT;EAGJ,QAAYX;IACV,OAAOZ,KAAKL,aAAa6B,cAAc,WAAW;;;;;EAOpD,MAAAC;IACE,MAAMC,IAAS;SACT1B,KAAK2B,mBAAmB;QAAE,gCAAgCC,EAAoB5B,KAAK2B;;SACnF3B,KAAK6B,aAAa;QAAE,0BAA0BD,EAAoB5B,KAAK6B;;;IAG7E,OACEC,EAACC,GAAI;MAAAC,KAAA;MAACC,OAAOP;OACXI,EAAA;MAAAE,KAAA;MACEE,OAAO;QACL,YAAY;QACZ,CAAC,SAASlC,KAAKmC,SAASnC,KAAKC,kBAAkB;QAC/CmC,OAAOpC,KAAKC,gBAAgB;QAC5B,WAAWD,KAAKC,gBAAgB;;MAElCoC,MAAK;OAELP,EAAA;MAAAE,KAAA;MAAMM,KAAMC,KAAavC,KAAKL,cAAc4C;MAAUL,OAAM;MAAkCG,MAAK;OACjGP,EAAA;MAAAE,KAAA;MAAMQ,cAAcxC,KAAKW","ignoreList":[]}

package/dist/beeq/{p-3e3fd7b5.entry.js → p-60cbc966.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, g as r, h as b, a as e } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { v as q } from "./p-687da041.js";
 
 const n = [ "default", "minimal" ];
@@ -84,4 +82,4 @@ const d = class {
 d.style = i;
 
 export { d as bq_card };
-//# sourceMappingURL=p-3e3fd7b5.entry.js.map
+//# sourceMappingURL=p-60cbc966.entry.js.map

package/dist/beeq/{p-3e3fd7b5.entry.js.map → p-60cbc966.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["CARD_TYPE","bqCardCss","BqCardStyle0","BqCard","checkPropValue","validatePropValue","this","el","componentWillLoad","render","style","border","h","Host","key","class","type","part"],"sources":["../../packages/beeq/src/components/card/bq-card.types.ts","../../packages/beeq/src/components/card/scss/bq-card.scss?tag=bq-card&encapsulation=shadow","../../packages/beeq/src/components/card/bq-card.tsx"],"sourcesContent":["export const CARD_TYPE = ['default', 'minimal'] as const;\nexport type TCardType = (typeof CARD_TYPE)[number];\n\nexport const CARD_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TCardBorderRadius = (typeof CARD_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                        Card styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-card.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-card {\n  border-style: var(--bq-card--borderStyle);\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { CARD_TYPE, TCardBorderRadius, TCardType } from './bq-card.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n *  @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n */\n@Component({\n  tag: 'bq-card',\n  styleUrl: './scss/bq-card.scss',\n  shadow: true,\n})\nexport class BqCard {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCardElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** Type of card component */\n  @Prop({ reflect: true }) type: TCardType = 'default';\n\n  /** The corner radius of the card component */\n  @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  checkPropValue() {\n    validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValue();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n    };\n    return (\n      <Host style={style}>\n        <div\n          class={{\n            'bq-card rounded-[--bq-card--borderRadius] border-[length:--bq-card--borderWidth] border-[color:--bq-card--borderColor] bg-[--bq-card--background]':\n              true,\n            'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n            // Remove padding for minimal card type\n            'p-b-0 p-i-0': this.type === 'minimal',\n          }}\n          part=\"wrapper\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;AAAO,MAAMA,IAAY,EAAC,WAAW;;ACArC,MAAMC,IAAY;;AAClB,MAAAC,IAAeD;;MCYFE,IAAM;;;gBAiB0B;kBAGU;;;;;;;EAMrD,cAAAC;IACEC,EAAkBL,GAAW,WAAWM,KAAKC,IAAI;;;;;;;;EAWnD,iBAAAC;IACEF,KAAKF;;;;;;;;;;;;;;;;;EAsBP,MAAAK;IACE,MAAMC,IAAQ;SACRJ,KAAKK,UAAU;QAAE,2BAA2B,oBAAoBL,KAAKK;;;IAE3E,OACEC,EAACC,GAAI;MAAAC,KAAA;MAACJ,OAAOA;OACXE,EAAA;MAAAE,KAAA;MACEC,OAAO;QACL,qJACE;QACF,qDAAqDT,KAAKU,SAAS;;QAEnE,eAAeV,KAAKU,SAAS;;MAE/BC,MAAK;OAELL,EAAA;MAAAE,KAAA","ignoreList":[]}
+{"version":3,"names":["CARD_TYPE","bqCardCss","BqCardStyle0","BqCard","checkPropValue","validatePropValue","this","el","componentWillLoad","render","style","border","h","Host","key","class","type","part"],"sources":["../../packages/beeq/src/components/card/bq-card.types.ts","../../packages/beeq/src/components/card/scss/bq-card.scss?tag=bq-card&encapsulation=shadow","../../packages/beeq/src/components/card/bq-card.tsx"],"sourcesContent":["export const CARD_TYPE = ['default', 'minimal'] as const;\nexport type TCardType = (typeof CARD_TYPE)[number];\n\nexport const CARD_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TCardBorderRadius = (typeof CARD_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                        Card styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-card.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-card {\n  border-style: var(--bq-card--borderStyle);\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { CARD_TYPE, TCardBorderRadius, TCardType } from './bq-card.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n *  @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n */\n@Component({\n  tag: 'bq-card',\n  styleUrl: './scss/bq-card.scss',\n  shadow: true,\n})\nexport class BqCard {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCardElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** Type of card component */\n  @Prop({ reflect: true }) type: TCardType = 'default';\n\n  /** The corner radius of the card component */\n  @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  checkPropValue() {\n    validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValue();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n    };\n    return (\n      <Host style={style}>\n        <div\n          class={{\n            'bq-card rounded-[--bq-card--borderRadius] border-[length:--bq-card--borderWidth] border-[color:--bq-card--borderColor] bg-[--bq-card--background]':\n              true,\n            'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n            // Remove padding for minimal card type\n            'p-b-0 p-i-0': this.type === 'minimal',\n          }}\n          part=\"wrapper\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;;;AAAO,MAAMA,IAAY,EAAC,WAAW;;ACArC,MAAMC,IAAY;;AAClB,MAAAC,IAAeD;;MCYFE,IAAM;;;gBAiB0B;kBAGU;;;;;;;EAMrD,cAAAC;IACEC,EAAkBL,GAAW,WAAWM,KAAKC,IAAI;;;;;;;;EAWnD,iBAAAC;IACEF,KAAKF;;;;;;;;;;;;;;;;;EAsBP,MAAAK;IACE,MAAMC,IAAQ;SACRJ,KAAKK,UAAU;QAAE,2BAA2B,oBAAoBL,KAAKK;;;IAE3E,OACEC,EAACC,GAAI;MAAAC,KAAA;MAACJ,OAAOA;OACXE,EAAA;MAAAE,KAAA;MACEC,OAAO;QACL,qJACE;QACF,qDAAqDT,KAAKU,SAAS;;QAEnE,eAAeV,KAAKU,SAAS;;MAE/BC,MAAK;OAELL,EAAA;MAAAE,KAAA","ignoreList":[]}

package/dist/beeq/{p-98de0101.entry.js → p-68ff188d.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, g as r, h as e, a as b } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { v as q } from "./p-687da041.js";
 
 const t = [ "xsmall", "small", "medium", "large" ];
@@ -143,4 +141,4 @@ const o = class {
 o.style = s;
 
 export { o as bq_avatar };
-//# sourceMappingURL=p-98de0101.entry.js.map
+//# sourceMappingURL=p-68ff188d.entry.js.map

package/dist/beeq/{p-98de0101.entry.js.map → p-68ff188d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["AVATAR_SIZE","AVATAR_SHAPE","bqAvatarCss","BqAvatarStyle0","BqAvatar","trimmedInitials","handleImagePropChange","this","hasError","checkPropValues","validatePropValue","el","onInitialsChange","trimInitialsBasedOnSize","componentWillLoad","onImageError","initials","forEach","size","substring","getIndex","sizeIndexMap","xsmall","small","medium","large","render","h","Host","key","class","shape","label","role","part","image","alt","altText","undefined","src","onError","name"],"sources":["../../packages/beeq/src/components/avatar/bq-avatar.types.ts","../../packages/beeq/src/components/avatar/scss/bq-avatar.scss?tag=bq-avatar&encapsulation=shadow","../../packages/beeq/src/components/avatar/bq-avatar.tsx"],"sourcesContent":["export const AVATAR_SIZE = ['xsmall', 'small', 'medium', 'large'] as const;\nexport type TAvatarSize = (typeof AVATAR_SIZE)[number];\n\nexport const AVATAR_SHAPE = ['circle', 'square'] as const;\nexport type TAvatarShape = (typeof AVATAR_SHAPE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Avatar styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-avatar.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n.bq-avatar {\n  @apply relative overflow-hidden bg-[var(--bq-avatar-background)];\n  @apply border-[length:var(--bq-avatar--border-width)] border-[color:var(--bq-avatar--border-color)];\n\n  border-style: var(--bq-avatar--border-style);\n}\n\n.size {\n  &--xsmall {\n    @apply text-[length:var(--bq-avatar--font-size-xsmall)] bs-[--bq-avatar--size-xsmall] is-[--bq-avatar--size-xsmall];\n  }\n\n  &--small {\n    @apply text-[length:var(--bq-avatar--font-size-small)] bs-[--bq-avatar--size-small] is-[--bq-avatar--size-small];\n  }\n\n  &--medium {\n    @apply text-[length:var(--bq-avatar--font-size-medium)] bs-[--bq-avatar--size-medium] is-[--bq-avatar--size-medium];\n  }\n\n  &--large {\n    @apply text-[length:var(--bq-avatar--font-size-large)] bs-[--bq-avatar--size-large] is-[--bq-avatar--size-large];\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { AVATAR_SHAPE, AVATAR_SIZE, TAvatarShape, TAvatarSize } from './bq-avatar.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper.\n * @part img - The `<image>` tag element that load the image source.\n * @part text - The `<span>` tag element that renderd the `Initials` text string.\n */\n@Component({\n  tag: 'bq-avatar',\n  styleUrl: './scss/bq-avatar.scss',\n  shadow: true,\n})\nexport class BqAvatar {\n  // Own Properties\n  // ====================\n\n  trimmedInitials: string;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAvatarElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasError: boolean;\n\n  // Public Property API\n  // ========================\n\n  /** Alternate text for the avatar image if the image cannot be displayed */\n  @Prop({ reflect: true }) altText: string;\n\n  /** The image source to load on the avatar (this can be also a base64 encoded image) */\n  @Prop({ reflect: true }) image: string;\n\n  /** A text to use for describing the avatar on assistive devices */\n  @Prop({ reflect: true }) label: string;\n\n  /** The text to display on avatar */\n  @Prop({ reflect: true }) initials: string;\n\n  /** The shape of the avatar */\n  @Prop({ reflect: true }) shape: TAvatarShape = 'circle';\n\n  /** The size of the avatar */\n  @Prop({ reflect: true, mutable: true }) size: TAvatarSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('image')\n  handleImagePropChange() {\n    // Reset the error when a new image source is provided\n    this.hasError = false;\n  }\n\n  @Watch('shape')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(AVATAR_SHAPE, 'circle', this.el, 'shape');\n    validatePropValue(AVATAR_SIZE, 'medium', this.el, 'size');\n  }\n\n  @Watch('initials')\n  @Watch('size')\n  onInitialsChange() {\n    this.trimInitialsBasedOnSize();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.trimInitialsBasedOnSize();\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 onImageError = () => {\n    this.hasError = true;\n  };\n\n  private trimInitialsBasedOnSize = (): void => {\n    if (!this.initials) return;\n\n    AVATAR_SIZE.forEach((size: TAvatarSize) => {\n      if (this.size === size) {\n        this.trimmedInitials = this.initials.substring(0, this.getIndex(size));\n      }\n    });\n  };\n\n  private getIndex = (size: TAvatarSize): number => {\n    const sizeIndexMap = {\n      xsmall: 1,\n      small: 2,\n      medium: 3,\n      large: 4,\n    };\n    return sizeIndexMap[size] ?? sizeIndexMap.xsmall;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'bq-avatar': true,\n            [`size--${this.size}`]: true,\n            'rounded-[--bq-avatar--border-radius-circle]': this.shape === 'circle',\n            'rounded-[--bq-avatar--border-radius-squareXs]': this.shape === 'square' && this.size === 'xsmall',\n            'rounded-[--bq-avatar--border-radius-squareS]': this.shape === 'square' && this.size === 'small',\n            'rounded-[--bq-avatar--border-radius-squareM]':\n              this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),\n          }}\n          aria-label={this.label}\n          role=\"img\"\n          part=\"base\"\n        >\n          {this.initials && (\n            <span\n              class=\"absolute start-0 inline-flex items-center justify-center font-bold bs-full is-full inset-bs-0\"\n              part=\"text\"\n            >\n              {this.trimmedInitials}\n            </span>\n          )}\n          {this.image && !this.hasError && (\n            <img\n              class=\"absolute start-0 object-cover bs-full is-full inset-bs-0\"\n              alt={this.altText ?? undefined}\n              src={this.image}\n              onError={this.onImageError}\n              part=\"img\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            'absolute flex items-center justify-center': true,\n            'start-[--bq-avatar--badge-left-square] inset-bs-[--bq-avatar--badge-top-square]': this.shape === 'square',\n            'start-[--bq-avatar--badge-left-circle] inset-bs-[--bq-avatar--badge-top-circle]': this.shape === 'circle',\n          }}\n        >\n          <slot name=\"badge\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;AAAO,MAAMA,IAAc,EAAC,UAAU,SAAS,UAAU;;AAGlD,MAAMC,IAAe,EAAC,UAAU;;ACHvC,MAAMC,IAAc;;AACpB,MAAAC,IAAeD;;MCcFE,IAAQ;;;;;;;;iBAiC4B;gBAGa;;;;EAhC5DC;;;;;;EAsCA,qBAAAC;;IAEEC,KAAKC,WAAW;;EAKlB,eAAAC;IACEC,EAAkBT,GAAc,UAAUM,KAAKI,IAAI;IACnDD,EAAkBV,GAAa,UAAUO,KAAKI,IAAI;;EAKpD,gBAAAC;IACEL,KAAKM;;;;;;;;EAWP,iBAAAC;IACEP,KAAKM;IACLN,KAAKE;;;;;;;;;;;;;;EAkBCM,aAAe;IACrBR,KAAKC,WAAW;AAAI;EAGdK,wBAA0B;IAChC,KAAKN,KAAKS,UAAU;IAEpBhB,EAAYiB,SAASC;MACnB,IAAIX,KAAKW,SAASA,GAAM;QACtBX,KAAKF,kBAAkBE,KAAKS,SAASG,UAAU,GAAGZ,KAAKa,SAASF;;;AAElE;EAGIE,SAAYF;IAClB,MAAMG,IAAe;MACnBC,QAAQ;MACRC,OAAO;MACPC,QAAQ;MACRC,OAAO;;IAET,OAAOJ,EAAaH,MAASG,EAAaC;AAAM;;;;EAOlD,MAAAI;IACE,OACEC,EAACC,GAAI;MAAAC,KAAA;OACHF,EAAA;MAAAE,KAAA;MACEC,OAAO;QACL,aAAa;QACb,CAAC,SAASvB,KAAKW,SAAS;QACxB,+CAA+CX,KAAKwB,UAAU;QAC9D,iDAAiDxB,KAAKwB,UAAU,YAAYxB,KAAKW,SAAS;QAC1F,gDAAgDX,KAAKwB,UAAU,YAAYxB,KAAKW,SAAS;QACzF,gDACEX,KAAKwB,UAAU,aAAaxB,KAAKW,SAAS,YAAYX,KAAKW,SAAS;;MACvE,cACWX,KAAKyB;MACjBC,MAAK;MACLC,MAAK;OAEJ3B,KAAKS,YACJW,EAAA;MAAAE,KAAA;MACEC,OAAM;MACNI,MAAK;OAEJ3B,KAAKF,kBAGTE,KAAK4B,UAAU5B,KAAKC,YACnBmB,EAAA;MAAAE,KAAA;MACEC,OAAM;MACNM,KAAK7B,KAAK8B,WAAWC;MACrBC,KAAKhC,KAAK4B;MACVK,SAASjC,KAAKQ;MACdmB,MAAK;SAIXP,EAAA;MAAAE,KAAA;MACEC,OAAO;QACL,6CAA6C;QAC7C,mFAAmFvB,KAAKwB,UAAU;QAClG,mFAAmFxB,KAAKwB,UAAU;;OAGpGJ,EAAA;MAAAE,KAAA;MAAMY,MAAK","ignoreList":[]}
+{"version":3,"names":["AVATAR_SIZE","AVATAR_SHAPE","bqAvatarCss","BqAvatarStyle0","BqAvatar","trimmedInitials","handleImagePropChange","this","hasError","checkPropValues","validatePropValue","el","onInitialsChange","trimInitialsBasedOnSize","componentWillLoad","onImageError","initials","forEach","size","substring","getIndex","sizeIndexMap","xsmall","small","medium","large","render","h","Host","key","class","shape","label","role","part","image","alt","altText","undefined","src","onError","name"],"sources":["../../packages/beeq/src/components/avatar/bq-avatar.types.ts","../../packages/beeq/src/components/avatar/scss/bq-avatar.scss?tag=bq-avatar&encapsulation=shadow","../../packages/beeq/src/components/avatar/bq-avatar.tsx"],"sourcesContent":["export const AVATAR_SIZE = ['xsmall', 'small', 'medium', 'large'] as const;\nexport type TAvatarSize = (typeof AVATAR_SIZE)[number];\n\nexport const AVATAR_SHAPE = ['circle', 'square'] as const;\nexport type TAvatarShape = (typeof AVATAR_SHAPE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Avatar styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-avatar.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n.bq-avatar {\n  @apply relative overflow-hidden bg-[var(--bq-avatar-background)];\n  @apply border-[length:var(--bq-avatar--border-width)] border-[color:var(--bq-avatar--border-color)];\n\n  border-style: var(--bq-avatar--border-style);\n}\n\n.size {\n  &--xsmall {\n    @apply text-[length:var(--bq-avatar--font-size-xsmall)] bs-[--bq-avatar--size-xsmall] is-[--bq-avatar--size-xsmall];\n  }\n\n  &--small {\n    @apply text-[length:var(--bq-avatar--font-size-small)] bs-[--bq-avatar--size-small] is-[--bq-avatar--size-small];\n  }\n\n  &--medium {\n    @apply text-[length:var(--bq-avatar--font-size-medium)] bs-[--bq-avatar--size-medium] is-[--bq-avatar--size-medium];\n  }\n\n  &--large {\n    @apply text-[length:var(--bq-avatar--font-size-large)] bs-[--bq-avatar--size-large] is-[--bq-avatar--size-large];\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { AVATAR_SHAPE, AVATAR_SIZE, TAvatarShape, TAvatarSize } from './bq-avatar.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The component's internal wrapper.\n * @part img - The `<image>` tag element that load the image source.\n * @part text - The `<span>` tag element that renderd the `Initials` text string.\n */\n@Component({\n  tag: 'bq-avatar',\n  styleUrl: './scss/bq-avatar.scss',\n  shadow: true,\n})\nexport class BqAvatar {\n  // Own Properties\n  // ====================\n\n  trimmedInitials: string;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAvatarElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasError: boolean;\n\n  // Public Property API\n  // ========================\n\n  /** Alternate text for the avatar image if the image cannot be displayed */\n  @Prop({ reflect: true }) altText: string;\n\n  /** The image source to load on the avatar (this can be also a base64 encoded image) */\n  @Prop({ reflect: true }) image: string;\n\n  /** A text to use for describing the avatar on assistive devices */\n  @Prop({ reflect: true }) label: string;\n\n  /** The text to display on avatar */\n  @Prop({ reflect: true }) initials: string;\n\n  /** The shape of the avatar */\n  @Prop({ reflect: true }) shape: TAvatarShape = 'circle';\n\n  /** The size of the avatar */\n  @Prop({ reflect: true, mutable: true }) size: TAvatarSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('image')\n  handleImagePropChange() {\n    // Reset the error when a new image source is provided\n    this.hasError = false;\n  }\n\n  @Watch('shape')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(AVATAR_SHAPE, 'circle', this.el, 'shape');\n    validatePropValue(AVATAR_SIZE, 'medium', this.el, 'size');\n  }\n\n  @Watch('initials')\n  @Watch('size')\n  onInitialsChange() {\n    this.trimInitialsBasedOnSize();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.trimInitialsBasedOnSize();\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 onImageError = () => {\n    this.hasError = true;\n  };\n\n  private trimInitialsBasedOnSize = (): void => {\n    if (!this.initials) return;\n\n    AVATAR_SIZE.forEach((size: TAvatarSize) => {\n      if (this.size === size) {\n        this.trimmedInitials = this.initials.substring(0, this.getIndex(size));\n      }\n    });\n  };\n\n  private getIndex = (size: TAvatarSize): number => {\n    const sizeIndexMap = {\n      xsmall: 1,\n      small: 2,\n      medium: 3,\n      large: 4,\n    };\n    return sizeIndexMap[size] ?? sizeIndexMap.xsmall;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'bq-avatar': true,\n            [`size--${this.size}`]: true,\n            'rounded-[--bq-avatar--border-radius-circle]': this.shape === 'circle',\n            'rounded-[--bq-avatar--border-radius-squareXs]': this.shape === 'square' && this.size === 'xsmall',\n            'rounded-[--bq-avatar--border-radius-squareS]': this.shape === 'square' && this.size === 'small',\n            'rounded-[--bq-avatar--border-radius-squareM]':\n              this.shape === 'square' && (this.size === 'medium' || this.size === 'large'),\n          }}\n          aria-label={this.label}\n          role=\"img\"\n          part=\"base\"\n        >\n          {this.initials && (\n            <span\n              class=\"absolute start-0 inline-flex items-center justify-center font-bold bs-full is-full inset-bs-0\"\n              part=\"text\"\n            >\n              {this.trimmedInitials}\n            </span>\n          )}\n          {this.image && !this.hasError && (\n            <img\n              class=\"absolute start-0 object-cover bs-full is-full inset-bs-0\"\n              alt={this.altText ?? undefined}\n              src={this.image}\n              onError={this.onImageError}\n              part=\"img\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            'absolute flex items-center justify-center': true,\n            'start-[--bq-avatar--badge-left-square] inset-bs-[--bq-avatar--badge-top-square]': this.shape === 'square',\n            'start-[--bq-avatar--badge-left-circle] inset-bs-[--bq-avatar--badge-top-circle]': this.shape === 'circle',\n          }}\n        >\n          <slot name=\"badge\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;;;;AAAO,MAAMA,IAAc,EAAC,UAAU,SAAS,UAAU;;AAGlD,MAAMC,IAAe,EAAC,UAAU;;ACHvC,MAAMC,IAAc;;AACpB,MAAAC,IAAeD;;MCcFE,IAAQ;;;;;;;;iBAiC4B;gBAGa;;;;EAhC5DC;;;;;;EAsCA,qBAAAC;;IAEEC,KAAKC,WAAW;;EAKlB,eAAAC;IACEC,EAAkBT,GAAc,UAAUM,KAAKI,IAAI;IACnDD,EAAkBV,GAAa,UAAUO,KAAKI,IAAI;;EAKpD,gBAAAC;IACEL,KAAKM;;;;;;;;EAWP,iBAAAC;IACEP,KAAKM;IACLN,KAAKE;;;;;;;;;;;;;;EAkBCM,aAAe;IACrBR,KAAKC,WAAW;AAAI;EAGdK,wBAA0B;IAChC,KAAKN,KAAKS,UAAU;IAEpBhB,EAAYiB,SAASC;MACnB,IAAIX,KAAKW,SAASA,GAAM;QACtBX,KAAKF,kBAAkBE,KAAKS,SAASG,UAAU,GAAGZ,KAAKa,SAASF;;;AAElE;EAGIE,SAAYF;IAClB,MAAMG,IAAe;MACnBC,QAAQ;MACRC,OAAO;MACPC,QAAQ;MACRC,OAAO;;IAET,OAAOJ,EAAaH,MAASG,EAAaC;AAAM;;;;EAOlD,MAAAI;IACE,OACEC,EAACC,GAAI;MAAAC,KAAA;OACHF,EAAA;MAAAE,KAAA;MACEC,OAAO;QACL,aAAa;QACb,CAAC,SAASvB,KAAKW,SAAS;QACxB,+CAA+CX,KAAKwB,UAAU;QAC9D,iDAAiDxB,KAAKwB,UAAU,YAAYxB,KAAKW,SAAS;QAC1F,gDAAgDX,KAAKwB,UAAU,YAAYxB,KAAKW,SAAS;QACzF,gDACEX,KAAKwB,UAAU,aAAaxB,KAAKW,SAAS,YAAYX,KAAKW,SAAS;;MACvE,cACWX,KAAKyB;MACjBC,MAAK;MACLC,MAAK;OAEJ3B,KAAKS,YACJW,EAAA;MAAAE,KAAA;MACEC,OAAM;MACNI,MAAK;OAEJ3B,KAAKF,kBAGTE,KAAK4B,UAAU5B,KAAKC,YACnBmB,EAAA;MAAAE,KAAA;MACEC,OAAM;MACNM,KAAK7B,KAAK8B,WAAWC;MACrBC,KAAKhC,KAAK4B;MACVK,SAASjC,KAAKQ;MACdmB,MAAK;SAIXP,EAAA;MAAAE,KAAA;MACEC,OAAO;QACL,6CAA6C;QAC7C,mFAAmFvB,KAAKwB,UAAU;QAClG,mFAAmFxB,KAAKwB,UAAU;;OAGpGJ,EAAA;MAAAE,KAAA;MAAMY,MAAK","ignoreList":[]}

package/dist/beeq/{p-7aa47927.entry.js → p-69c766a3.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, c as r, g as b, h as e, a as t } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { d as n } from "./p-1defeea3.js";
 
 import { v as q } from "./p-687da041.js";
@@ -27,7 +25,7 @@ const l = class {
     a(this, b);
     this.bqHide = r(this, "bqHide", 7);
     this.bqShow = r(this, "bqShow", 7);
-    this.toastPortal = document.querySelector(`.${c}`);
+    this.toastPortal = typeof window !== "undefined" ? document.querySelector(`.${c}`) : null;
     this.border = "s";
     this.type = "info";
     this.placement = "bottom-center";
@@ -75,7 +73,7 @@ const l = class {
   // =====================================
   connectedCallback() {
     const {toastPortal: a} = this;
-    if (!a && typeof document !== "undefined") {
+    if (!a && typeof window !== "undefined") {
       this.toastPortal = Object.assign(document.createElement("div"), {
         className: c
       });
@@ -167,7 +165,7 @@ const l = class {
       }
     };
     return e(t, {
-      key: "06ff4fce530e9b3d43ef319215a5a3be5abf6565",
+      key: "0c720b655e1ccfb620eb3a317bf77e31f328308b",
       style: a,
       class: {
         "is-hidden": !this.open
@@ -176,27 +174,27 @@ const l = class {
       hidden: !this.open ? "true" : "false",
       role: "status"
     }, e("output", {
-      key: "4686d298c9e0b3ddba33ee2c753bbb6dfe7a1d7e",
+      key: "a7f39180143c475d6554799eccb52fb52b61b978",
       class: "bq-toast",
       part: "wrapper"
     }, e("div", {
-      key: "5e47a9e376fbba1ae806db0135d36862ffdcefaf",
+      key: "10a989822386e2abd536a58fd84fb8cc431b387e",
       class: {
         [`bq-toast--icon ${this.type}`]: true,
         "!hidden": this.hideIcon
       },
       part: "icon"
     }, e("slot", {
-      key: "47711e80d9fafd776880106208c01748a9313c75",
+      key: "6ac3e6c871ce1fd6b5a1f3202cc68c55bb8384fd",
       name: "icon"
     }, e("bq-icon", {
-      key: "2e295a304800b3bc1665a82aa38a2c68322f2574",
+      key: "2de92ed1b7051b57f8979cbbef6fe03e6eec6880",
       name: this.iconName,
       size: "24",
       slot: "icon",
       exportparts: "base,svg"
     }))), e("slot", {
-      key: "0a5a1f76f8bcd11edb75d17ef1f2ea40620a5b79"
+      key: "2794332bcd8fc1e2d314bcbb950d517f775d457e"
     })));
   }
   static get watchers() {
@@ -212,4 +210,4 @@ const l = class {
 l.style = d;
 
 export { l as bq_toast };
-//# sourceMappingURL=p-7aa47927.entry.js.map
+//# sourceMappingURL=p-69c766a3.entry.js.map