@beeq/core 1.11.0-beta.0 → 1.11.0-beta.2

package/dist/beeq/p-a9643899.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqTooltipCss","BqTooltip","trigger","panel","arrow","floatingUI","alwaysVisible","distance","hideArrow","placement","sameWidth","displayOn","visible","handleVisibleChange","this","hide","show","handleFloatingUIOptionsChange","init","strategy","bqClick","bqFocusIn","bqFocusOut","bqHoverIn","bqHoverOut","componentDidLoad","FloatingUI","skidding","disconnectedCallback","destroy","handleDocumentKeyDown","event","key","handleDocumentMouseDown","isEventTargetChildOfElement","el","handleDocumentScroll","showTooltip","hideTooltip","handleTriggerMouseOver","async","hoverEvent","emit","defaultPrevented","handleTriggerMouseLeave","handleTriggerOnClick","clickEvent","handleTriggerFocusin","focusEvent","handleTriggerFocusout","update","isHidden","render","h","class","part","onMouseOver","onMouseLeave","onClick","onFocusinCapture","onFocusoutCapture","ref","name","hidden","role"],"sources":["../../packages/beeq/src/components/tooltip/scss/bq-tooltip.scss?tag=bq-tooltip&encapsulation=shadow","../../packages/beeq/src/components/tooltip/bq-tooltip.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                               Tooltip styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tooltip.variables';\n\n.bq-tooltip--panel {\n  @include animation-fade-in;\n  @apply pointer-events-none fixed z-[--bq-tooltip--z-index] box-border bg-[--bq-tooltip--background-color];\n  @apply is-[--bq-tooltip--width] max-is-[--bq-tooltip--max-width] p-b-[--bq-tooltip--paddingY] p-i-[--bq-tooltip--paddingX];\n  @apply text-[length:--bq-tooltip--font-size] leading-[--bq-tooltip--line-height] text-[color:--bq-tooltip--text-color];\n  @apply rounded-[--bq-tooltip--border-radius] border-[length:--bq-tooltip--border-width] border-[color:--bq-tooltip--border-color];\n  @apply shadow-[shadow:--bq-tooltip--box-shadow];\n}\n\n.bq-tooltip--arrow {\n  &,\n  &::before {\n    @apply absolute -z-[1] bs-2 is-2;\n  }\n\n  &::before {\n    @apply start-0 rotate-45 bg-[--bq-tooltip--background-color] content-empty inset-bs-0;\n  }\n}\n","import { Component, Element, Event, h, Listen, Method, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isEventTargetChildOfElement } from '../../shared/utils';\n\n/**\n * The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.\n *\n * @example How to use it\n * ```html\n * <bq-tooltip visible>\n *   Yuhu! I'm a tooltip 🙃\n *   <bq-button slot=\"trigger\">Hover me!</bq-button>\n * </bq-tooltip>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/64c562-tooltip\n * @status stable\n *\n * @attr {boolean} always-visible - If true, the tooltip will always be visible\n * @attr {number} distance - Distance between trigger element and tooltip\n * @attr {boolean} hide-arrow - If true, the arrow on the tooltip content won't be shown\n * @attr {\"top\" | \"right\" | \"bottom\" | \"left\"} placement - Defines the position of the tooltip\n * @attr {boolean} same-width - Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element)\n * @attr {\"click\" | \"hover\"} display-on - Set the action when the tooltip should be displayed, on hover (default) or click\n * @attr {boolean} visible - Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger\n *\n * @method show - Shows the tooltip\n * @method hide - Hides the tooltip\n *\n * @slot trigger - The element which displays tooltip on hover\n * @slot - The tooltip content\n *\n * @part base - The component wrapper container inside the shadow DOM\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover\n * @part panel - The `<div>` container that holds the tooltip content\n *\n * @cssprop --bq-tooltip--background-color - Tooltip background color\n * @cssprop --bq-tooltip--box-shadow - Tooltip box shadow\n * @cssprop --bq-tooltip--font-size - Tooltip font size\n * @cssprop --bq-tooltip--line-height - Tooltip line height\n * @cssprop --bq-tooltip--text-color - Tooltip text color\n * @cssprop --bq-tooltip--paddingX - Tooltip horizontal padding\n * @cssprop --bq-tooltip--paddingY - Tooltip vertical padding\n * @cssprop --bq-tooltip--border-color - Tooltip border color\n * @cssprop --bq-tooltip--border-radius - Tooltip border radius\n * @cssprop --bq-tooltip--border-style - Tooltip border style\n * @cssprop --bq-tooltip--border-width - Tooltip border width\n * @cssprop --bq-tooltip--z-index: Tooltip z-index\n */\n@Component({\n  tag: 'bq-tooltip',\n  styleUrl: './scss/bq-tooltip.scss',\n  shadow: true,\n})\nexport class BqTooltip {\n  // Own Properties\n  // ====================\n  private trigger: HTMLElement;\n  private panel: HTMLElement;\n  private arrow: HTMLElement;\n  private floatingUI: FloatingUI;\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqTooltipElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the tooltip will always be visible */\n  @Prop() alwaysVisible?: boolean = false;\n\n  /** Distance between trigger element and tooltip */\n  @Prop({ reflect: true }) distance?: number = 10;\n\n  /** If true, the arrow on the tooltip content won't be shown */\n  @Prop({ reflect: true }) hideArrow?: boolean = false;\n\n  /* Defines the position of the tooltip */\n  @Prop({ reflect: true }) placement?: Placement = 'top';\n\n  /** Whether the tooltip should have the same width as the trigger element\n   * (applicable only for content shorter than the trigger element) */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /** Set the action when the tooltip should be displayed, on hover (default) or click */\n  @Prop({ reflect: true }) displayOn: 'click' | 'hover' = 'hover';\n\n  /**\n   * Indicates whether or not the tooltip is visible when the component is first rendered,\n   * and when interacting with the trigger\n   */\n  @Prop({ reflect: true, mutable: true }) visible? = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('visible')\n  async handleVisibleChange() {\n    if (!this.visible && !this.alwaysVisible) {\n      return await this.hide();\n    }\n\n    await this.show();\n  }\n\n  @Watch('distance')\n  @Watch('hideArrow')\n  @Watch('placement')\n  @Watch('sameWidth')\n  handleFloatingUIOptionsChange() {\n    this.floatingUI.init({\n      placement: this.placement,\n      distance: this.distance,\n      sameWidth: this.sameWidth,\n      strategy: 'fixed',\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Emitted when the tooltip trigger is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqTooltipElement>;\n\n  /** Emitted when the tooltip trigger is focused in */\n  @Event() bqFocusIn: EventEmitter<HTMLBqTooltipElement>;\n\n  /** Emitted when the tooltip trigger is focused out */\n  @Event() bqFocusOut: EventEmitter<HTMLBqTooltipElement>;\n\n  /** Emitted when the tooltip trigger is hovered in */\n  @Event() bqHoverIn: EventEmitter<HTMLBqTooltipElement>;\n\n  /** Emitted when the tooltip trigger is hovered out */\n  @Event() bqHoverOut: EventEmitter<HTMLBqTooltipElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.floatingUI = new FloatingUI(this.trigger, this.panel, {\n      ...(!this.hideArrow && { arrow: this.arrow }),\n      placement: this.placement,\n      distance: this.distance,\n      sameWidth: this.sameWidth,\n      strategy: 'fixed',\n      skidding: 0,\n    });\n  }\n\n  disconnectedCallback() {\n    this.floatingUI?.destroy();\n  }\n  // Listeners\n  // ==============\n\n  @Listen('keydown', { target: 'document' })\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    // Early returns for performance optimization\n    if (this.alwaysVisible || !this.visible || this.displayOn !== 'click') return;\n    // Hide tooltip when the user presses the escape key, but only if the displayOn is click and the tooltip is visible\n    if (event.key !== 'Escape') return;\n\n    this.hide();\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  handleDocumentMouseDown(event: MouseEvent) {\n    // Early returns for performance optimization\n    if (this.alwaysVisible || !this.visible) return;\n    // Hide tooltip when the user clicks outside of the tooltip, but only if the displayOn is click and the tooltip is visible\n    if (isEventTargetChildOfElement(event, this.el)) return;\n\n    this.hide();\n  }\n\n  @Listen('scroll', { target: 'document', passive: true })\n  handleDocumentScroll() {\n    // Early returns for performance optimization\n    if (this.alwaysVisible || !this.visible) return;\n    // Hide tooltip when the user scrolls, but only if the the tooltip is visible\n    this.hide();\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  /** Shows the tooltip */\n  @Method()\n  async show() {\n    this.visible = true;\n    this.showTooltip();\n  }\n\n  /** Hides the tooltip */\n  @Method()\n  async hide() {\n    if (this.alwaysVisible) return;\n\n    this.visible = false;\n    this.hideTooltip();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleTriggerMouseOver = async () => {\n    if (this.displayOn !== 'hover') return;\n\n    const hoverEvent = this.bqHoverIn.emit(this.el);\n    if (hoverEvent.defaultPrevented) return;\n\n    await this.show();\n  };\n\n  private handleTriggerMouseLeave = async () => {\n    if (this.displayOn !== 'hover') return;\n\n    const hoverEvent = this.bqHoverOut.emit(this.el);\n    if (hoverEvent.defaultPrevented) return;\n\n    await this.hide();\n  };\n\n  private handleTriggerOnClick = async () => {\n    if (this.displayOn !== 'click') return;\n\n    const clickEvent = this.bqClick.emit(this.el);\n    if (clickEvent.defaultPrevented) return;\n\n    await (this.visible ? this.hide() : this.show());\n  };\n\n  private handleTriggerFocusin = async () => {\n    if (this.visible || this.displayOn === 'click') return;\n\n    const focusEvent = this.bqFocusIn.emit(this.el);\n    if (focusEvent.defaultPrevented) return;\n\n    await this.show();\n  };\n\n  private handleTriggerFocusout = async () => {\n    if (!this.visible || this.displayOn === 'click') return;\n\n    const focusEvent = this.bqFocusOut.emit(this.el);\n    if (focusEvent.defaultPrevented) return;\n\n    await this.hide();\n  };\n\n  private showTooltip = () => {\n    if (!this.panel) return;\n    this.floatingUI?.update();\n  };\n\n  private hideTooltip = () => {\n    if (!this.panel) return;\n    this.visible = false;\n  };\n\n  private get isHidden() {\n    return !this.visible && !this.alwaysVisible;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-tooltip relative\" part=\"base\">\n        {/* TRIGGER */}\n        <div\n          class=\"bq-tooltip--trigger\"\n          onMouseOver={this.handleTriggerMouseOver}\n          onMouseLeave={this.handleTriggerMouseLeave}\n          onClick={this.handleTriggerOnClick}\n          onFocusinCapture={this.handleTriggerFocusin}\n          onFocusoutCapture={this.handleTriggerFocusout}\n          ref={(el) => (this.trigger = el)}\n          part=\"trigger\"\n        >\n          <slot name=\"trigger\" />\n        </div>\n        {/* PANEL */}\n        <div\n          class=\"bq-tooltip--panel\"\n          aria-hidden={this.isHidden}\n          hidden={this.isHidden}\n          role=\"tooltip\"\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n        >\n          {!this.hideArrow && <div class=\"bq-tooltip--arrow\" ref={(el) => (this.arrow = el)} />}\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-b268b017.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BUTTON_SIZE","BUTTON_TYPE","BUTTON_APPEARANCE","BUTTON_VARIANT","bqButtonCss","BqButton","prefixElem","suffixElem","internals","hasPrefix","hasSuffix","appearance","block","border","disabled","download","href","justifyContent","loading","size","target","type","variant","checkPropValues","validatePropValue","this","el","bqBlur","bqFocus","bqClick","componentWillLoad","componentDidLoad","handleSlotChange","handleBlur","emit","handleFocus","handleClick","ev","preventEvent","bqClickEvent","defaultPrevented","handleFormAction","form","isNil","formAction","formActions","submit","submitAssociatedForm","reset","isClient","btn","document","createElement","hidden","append","click","remove","hasSlotContent","preventDefault","stopPropagation","render","isLink","isDefined","TagElem","style","h","Host","key","class","undefined","part","rel","tabIndex","onBlur","onFocus","onClick","ref","spanElem","name","onSlotchange","SVG_TAG","ICON_CSS_CLASS","cache","requests","Map","content","sanitizeSvgElement","svg","currentClass","getAttribute","setAttribute","trim","removeAttribute","validateElement","element","nodeType","Node","ELEMENT_NODE","nodeName","toLowerCase","hasUnsafeAttribute","Array","from","attributes","some","attr","value","startsWith","includes","children","every","child","processSvgContent","domParser","DOMParser","doc","parseFromString","querySelector","console","warn","XMLSerializer","serializeToString","error","fetchAndProcessSvg","async","url","shouldSanitize","response","fetch","ok","Error","status","statusText","text","getSvgContent","sanitize","has","cachedContent","get","request","then","set","delete","bqIconCss","BqIcon","_svgContent","label","color","src","weight","handlePropsChange","loadIcon","handleWeightChange","REGULAR","isWeightedIcon","weightSuffix","iconName","svgLoaded","connectedCallback","setupIconComponent","getIconSource","SVG_EXTENSION","iconFileName","getBasePath","styles","getColorCSSVariable","innerHTML","role"],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Button styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-button.variables';\n\n@layer components {\n  // Common button base style\n  .bq-button {\n    @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n    @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n    @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n    // `DISABLED` state\n    @apply disabled:cursor-not-allowed disabled:opacity-60;\n    // `FOCUS` state\n    @apply focus-visible:focus;\n  }\n}\n\n:host {\n  @apply relative inline-block cursor-pointer is-auto;\n}\n\n:host([block]),\n.block {\n  @apply is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Appearance                                 */\n/* -------------------------------------------------------------------------- */\n\n.bq-button--primary {\n  @apply bg-ui-brand text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-brand;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-brand active:enabled:hover:bg-active-ui-brand;\n}\n\n.bq-button--primary.ghost {\n  @apply border-m border-solid border-brand bg-transparent text-brand;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-primary active:enabled:hover:bg-active-ui-primary;\n}\n\n.bq-button--primary.danger {\n  @apply bg-ui-danger text-alt;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-danger;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-danger active:enabled:hover:bg-active-ui-danger;\n}\n\n.bq-button--secondary {\n  @apply bg-ui-secondary text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--secondary.ghost {\n  @apply border-m border-solid border-tertiary bg-transparent text-primary;\n  // Secondary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-secondary;\n  // Secondary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n.bq-button--link {\n  @apply bg-transparent text-brand no-underline;\n  // Primary `HOVER` state\n  @apply [&:not(.disabled)]:hover:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply [&:not(.disabled)]:active:bg-active-ui-secondary [&:not(.disabled)]:active:hover:bg-active-ui-secondary;\n  // HTML `<a>` elements does not have a `disabled` state so we need to handle it manually\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-button--text {\n  @apply bg-transparent text-primary;\n  // Primary `HOVER` state\n  @apply hover:enabled:bg-hover-ui-primary;\n  // Primary `ACTIVE` state\n  @apply active:enabled:bg-active-ui-secondary active:enabled:hover:bg-active-ui-secondary;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Size                                    */\n/* -------------------------------------------------------------------------- */\n\n.small {\n  @apply text-[length:--bq-button--small-font-size] bs-[--bq-button--small-height] p-b-[--bq-button--small-paddingY] p-i-[--bq-button--small-paddingX];\n}\n\n.medium {\n  @apply text-[length:--bq-button--medium-font-size] bs-[--bq-button--medium-height] p-b-[--bq-button--medium-paddingY] p-i-[--bq-button--medium-paddingX];\n}\n\n.large {\n  @apply text-[length:--bq-button--large-font-size] bs-[--bq-button--large-height] p-b-[--bq-button--large-paddingY] p-i-[--bq-button--large-paddingX];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__label ::slotted(bq-icon) {\n  @apply flex;\n}\n\n.content-left {\n  @apply justify-start;\n}\n\n.content-right {\n  @apply justify-end;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Prefix and Suffix slots                          */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__prefix,\n.bq-button__suffix {\n  @apply pointer-events-none flex shrink-0 grow-0 basis-auto items-center;\n}\n\n.bq-button.has-prefix .bq-button__label {\n  @apply ps-xs2;\n}\n\n.bq-button.has-suffix .bq-button__label {\n  @apply pe-xs2;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                   Loading                                  */\n/* -------------------------------------------------------------------------- */\n\n.bq-button.loading {\n  @apply relative cursor-wait;\n}\n\n.bq-button.loading .bq-button__prefix,\n.bq-button.loading .bq-button__label,\n.bq-button.loading .bq-button__suffix {\n  @apply invisible;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Spinner icon                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-button__loader {\n  @include animation-spin;\n  @apply absolute;\n}\n","import { AttachInternals, Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\nimport type {\n  TButtonAppearance,\n  TButtonBorderRadius,\n  TButtonSize,\n  TButtonType,\n  TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n *   <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n *   Go back\n * </bq-button>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {\"primary\" | \"secondary\" | \"link\" | \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" | \"center\" | \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the button\n * @attr {\"_blank\" | \"_parent\" | \"_self\" | \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" | \"submit\" | \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" | \"ghost\" | \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n *\n * @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n *\n * @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n *\n * @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-height - Button small height\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-height - Button medium height\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-height - Button large height\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n */\n@Component({\n  tag: 'bq-button',\n  styleUrl: './scss/bq-button.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqButton {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqButtonElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style to apply to the button */\n  @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n  /** If `true`, it will make the button fit to its parent width. */\n  @Prop({ reflect: true }) block: boolean = false;\n\n  /** The corner radius of the button */\n  @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n  /** If true, the button will be disabled (no interaction allowed) */\n  @Prop() disabled = false;\n\n  /**\n   * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n   */\n  @Prop() download?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n  @Prop({ reflect: true }) href: string;\n\n  /** It determinate how the content should be aligned */\n  @Prop({ reflect: true }) justifyContent: 'left' | 'center' | 'right' = 'center';\n\n  /** If `true` it will display the button in a loading state */\n  @Prop() loading = false;\n\n  /** The size of the button */\n  @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n   */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The default behavior of the button */\n  @Prop({ reflect: true }) type: TButtonType = 'button';\n\n  /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n  @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('type')\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n    validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n    validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n    validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\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<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button gets focus. */\n  @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button is clicked. */\n  @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\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.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 handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleClick = (ev: Event) => {\n    const { disabled, loading, bqClick, el } = this;\n\n    if (disabled || loading) {\n      this.preventEvent(ev);\n      return;\n    }\n\n    const bqClickEvent = bqClick.emit(el);\n    if (bqClickEvent.defaultPrevented) {\n      this.preventEvent(ev);\n      return;\n    }\n\n    this.handleFormAction();\n  };\n\n  private handleFormAction() {\n    const {\n      type,\n      internals: { form },\n    } = this;\n    if (isNil(form)) return;\n\n    const formAction = this.formActions(form)[type];\n    if (isNil(formAction)) return;\n\n    formAction();\n  }\n\n  private formActions = (form: HTMLFormElement) => ({\n    submit: () => this.submitAssociatedForm(form),\n    reset: () => form.reset(),\n  });\n\n  private submitAssociatedForm = (form: HTMLFormElement) => {\n    if (!isClient() || isNil(form)) return;\n\n    const btn = document.createElement('button');\n    btn.type = this.type;\n    btn.hidden = true;\n    form.append(btn);\n\n    btn.click();\n    btn.remove();\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private preventEvent(ev: Event) {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n    const style = {\n      ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host style={style}>\n        <TagElem\n          class={{\n            'bq-button': true,\n            [`bq-button--${this.appearance}`]: true,\n            [`content-${this.justifyContent}`]: true,\n            [`${this.variant}`]: true,\n            [`${this.size}`]: true,\n            block: this.block,\n            disabled: this.disabled,\n            'has-prefix': this.hasPrefix,\n            'has-suffix': this.hasSuffix,\n            loading: this.loading,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          disabled={this.disabled}\n          download={isLink ? this.download : undefined}\n          href={isLink ? this.href : undefined}\n          part=\"button\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n          type={this.type}\n          tabIndex={this.disabled ? -1 : 0}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\n        >\n          <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-button__label\" part=\"label\">\n            <slot />\n          </span>\n          <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n        </TagElem>\n      </Host>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isClient, isNil } from '../../../shared/utils';\n\nconst SVG_TAG = 'svg';\nconst ICON_CSS_CLASS = 'bq-icon__svg';\n\ninterface IconCache {\n  requests: Map<string, Promise<string>>;\n  content: Map<string, string>;\n}\n\nconst cache: IconCache = {\n  requests: new Map(),\n  content: new Map(),\n};\n\n/**\n * Sanitizes SVG element by setting required attributes and removing unwanted ones\n * @param svg - The SVG element to sanitize\n */\nconst sanitizeSvgElement = (svg: SVGElement): void => {\n  const currentClass = svg.getAttribute('class') || '';\n\n  svg.setAttribute('class', `${currentClass} ${ICON_CSS_CLASS}`.trim());\n  svg.setAttribute('part', SVG_TAG);\n  svg.removeAttribute('height');\n  svg.removeAttribute('width');\n};\n\n/**\n * Validates element security (no scripts or event handlers)\n * @param element - The element to validate\n * @returns True if the element is valid, false otherwise\n */\nconst validateElement = (element: Element): boolean => {\n  if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;\n  if (element.nodeName.toLowerCase() === 'script') return false;\n\n  // Check for malicious attributes using modern array methods\n  const hasUnsafeAttribute = Array.from(element.attributes).some((attr) => {\n    const value = attr.value?.toLowerCase() || '';\n    const name = attr.name.toLowerCase();\n\n    // Check for event handlers\n    if (name.startsWith('on')) return true;\n    // Check for javascript: URLs\n    if (value.includes('javascript:')) return true;\n\n    return false;\n  });\n\n  if (hasUnsafeAttribute) return false;\n\n  // Recursively validate children\n  return Array.from(element.children).every((child) => validateElement(child));\n};\n\n/**\n * Processes SVG content with security checks and sanitization\n * @param content - The SVG content to process\n * @returns The processed and sanitized SVG content\n */\nconst processSvgContent = (content: string): string => {\n  if (!isClient() || isNil(content)) return '';\n\n  try {\n    const domParser = new DOMParser();\n    const doc = domParser.parseFromString(content, 'image/svg+xml');\n    const svg = doc.querySelector(SVG_TAG);\n\n    if (!svg || !validateElement(svg)) {\n      console.warn('[BqIcon] SVG content failed security validation');\n      return '';\n    }\n\n    sanitizeSvgElement(svg);\n    return new XMLSerializer().serializeToString(svg);\n  } catch (error) {\n    console.error('[BqIcon] Error processing SVG content:', error);\n    return '';\n  }\n};\n\n/**\n * Fetches and processes SVG content from URL\n * @param url - The URL of the SVG to fetch\n * @param shouldSanitize - Whether to sanitize the SVG content\n * @returns Promise that resolves to the processed SVG content\n */\nconst fetchAndProcessSvg = async (url: string, shouldSanitize = true): Promise<string> => {\n  if (!isClient()) return '';\n\n  try {\n    const response = await fetch(url);\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n    }\n\n    const content = await response.text();\n\n    if (!content.trim()) {\n      console.warn(`[BqIcon] Empty SVG content received from ${url}`);\n      return '';\n    }\n\n    return shouldSanitize ? processSvgContent(content) : content;\n  } catch (error) {\n    console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n    return '';\n  }\n};\n\n/**\n * Retrieves SVG content with caching, security validation, and sanitization\n * @param url - The URL of the SVG to fetch\n * @param sanitize - Whether to sanitize the SVG content (default: true)\n * @returns Promise that resolves to the processed SVG content or undefined\n */\nexport const getSvgContent = async (url?: string, sanitize = true): Promise<string> => {\n  if (!isClient() || isNil(url)) return undefined;\n\n  // Return cached content if available\n  if (cache.content.has(url)) {\n    const cachedContent = cache.content.get(url);\n    return cachedContent;\n  }\n\n  // Check if the request is already in the cache\n  if (!cache.requests.has(url)) {\n    // Create new request with proper cleanup\n    const request = fetchAndProcessSvg(url, sanitize).then((content) => {\n      // Cache the result (including empty strings for failed requests)\n      cache.content.set(url, content);\n      // Clean up the pending request\n      cache.requests.delete(url);\n      return content;\n    });\n\n    cache.requests.set(url, request);\n  }\n\n  return cache.requests.get(url);\n};\n\n/**\n * Clears the icon cache - useful for testing or memory management\n */\nexport const clearIconCache = (): void => {\n  cache.requests.clear();\n  cache.content.clear();\n};\n\n/**\n * Gets cache statistics for debugging\n */\nexport const getCacheStats = () => ({\n  pendingRequests: cache.requests.size,\n  cachedContent: cache.content.size,\n  urls: Array.from(cache.content.keys()),\n});\n\n// Export cache for external access if needed\nexport { cache as iconCache };\n","/* -------------------------------------------------------------------------- */\n/*                                 Icon styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n  @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n  @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TIconWeight } from './bq-icon.types';\nimport { getSvgContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\n * It is a small graphical element that is used to enhance the user interface and improve user experience.\n *\n * @example How to use it\n * ```html\n * <bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/675fad-icon\n * @status stable\n *\n * @attr {string} color - Set the stroke color of the SVG. The value should be a valid value of the palette color.\n * @attr {string} label - Label for the icon, used for accessibility.\n * @attr {string} name - Icon name to load. Please check all available icons [here](https://phosphoricons.com/).\n * @attr {string | number} size - Set the size of the SVG.\n * @attr {string} src - Set the source of the SVG. If the source is set, the name property will be ignored.\n *\n * @event svgLoaded - Callback handler to be called when the SVG has loaded.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n *\n * @cssprop --bq-icon--color - The stroke color of the SVG.\n * @cssprop --bq-icon--size - The size of the SVG.\n */\n@Component({\n  assetsDirs: ['svg'],\n  tag: 'bq-icon',\n  styleUrl: './scss/bq-icon.scss',\n  shadow: true,\n})\nexport class BqIcon {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private _svgContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** Label for the icon, used for accessibility */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Set the size of the SVG */\n  @Prop({ reflect: true }) size?: string | number = 24;\n\n  /** Set the source of the SVG. If the source is set, the name property will be ignored */\n  @Prop({ reflect: true }) src?: string;\n\n  /** @deprecated It set the icon weight/style */\n  @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('color')\n  @Watch('name')\n  @Watch('size')\n  handlePropsChange() {\n    this.loadIcon(this.name);\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n   * We need to maintain retro-compatibility until the next major release\n   */\n  @Watch('weight')\n  handleWeightChange() {\n    if (this.name.includes(this.weight)) return;\n\n    console.warn(\n      `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n       For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n    );\n    // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n    // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n    const REGULAR = 'regular';\n    const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n    // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n    // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n    const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n    // Construct the icon name by appending the weight suffix (if any) and the file extension.\n    // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n    const iconName = `${this.name}${weightSuffix}`;\n    this.loadIcon(iconName);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the SVG has loaded */\n  @Event() svgLoaded: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.setupIconComponent();\n  }\n\n  componentWillLoad() {\n    this.setupIconComponent();\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 setupIconComponent = () => {\n    this.loadIcon(this.name);\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\n  };\n\n  private getIconSource = (name: string) => {\n    if (!this.name && !this.src) return undefined;\n    // Return the src if it is set\n    if (this.src) return this.src;\n\n    const SVG_EXTENSION = '.svg';\n    const iconFileName = `${name}${SVG_EXTENSION}`;\n\n    return getBasePath(iconFileName);\n  };\n\n  private loadIcon = async (name: string) => {\n    const url = this.getIconSource(name);\n    if (!url) return;\n\n    try {\n      const content = await getSvgContent(url, true);\n      if (!content) return;\n\n      this._svgContent = content;\n      this.svgLoaded.emit(this._svgContent);\n    } catch (error) {\n      console.error('[BEEQ] Failed to load the icon SVG content', error);\n    }\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const { color, label, name, size } = this;\n    const styles = {\n      ...(color && { '--bq-icon--color': getColorCSSVariable(color) }),\n      ...(size && { '--bq-icon--size': `${size}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          aria-label={label ?? `${name} icon`}\n          class=\"flex text-[--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n          innerHTML={this._svgContent}\n          part=\"base\"\n          role=\"img\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-b520bdb8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BADGE_SIZE","bqBadgeCss","BqBadge","spanElement","observer","MutationObserver","mutations","mutation","this","contentLength","target","textContent","length","backgroundColor","textColor","size","handleSizePropChange","validatePropValue","el","componentWillLoad","componentDidLoad","handleSlotChange","disconnectedCallback","disconnect","slot","isNil","getTextContent","recurse","node","assignedNodes","flatten","takeRecords","observe","characterData","childList","subtree","querySelector","render","styles","getColorCSSVariable","h","Host","key","style","class","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 } from './bq-badge.types';\nimport type { TBadgeSize } from './bq-badge.types';\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * The Badge component is a visual indicator that can be added to various elements within a user interface.\n * It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n *\n * @example How to use it\n * ```html\n * <bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/194fd1-badge\n * @status stable\n *\n * @attr {string} background-color - Badge background color. The value should be a valid value of the palette color.\n * @attr {string} text-color - Badge number color. The value should be a valid value of the palette color.\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the badge. Relevant if badge has no content.\n *\n * @slot - The default slot is used to add content to the badge. The content can be a number or a text.\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 * @cssprop --bq-badge--background-color - The badge background color\n * @cssprop --bq-badge--box-shadow - The badge box shadow\n * @cssprop --bq-badge--border-color - The badge border color\n * @cssprop --bq-badge--border-radius - The badge border radius\n * @cssprop --bq-badge--border-style - The badge border style\n * @cssprop --bq-badge--border-width - The badge border width\n * @cssprop --bq-badge--size-small - The badge small size\n * @cssprop --bq-badge--size-medium - The badge medium size\n * @cssprop --bq-badge--size-large - The badge large size\n * @cssprop --bq-badge--text-color - The badge text color\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?: string;\n\n  /** Badge number color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) textColor?: string;\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  componentDidLoad() {\n    this.handleSlotChange();\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    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.handleSlotChange}></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;iOAAO,MAAMA,EAAa,CAAC,QAAS,UCApC,MAAMC,EAAa,wkqB,MC2CNC,EAAO,M,yBAIVC,YAEAC,SAA6B,IAAIC,kBAAkBC,IACzD,MAAOC,GAAYD,EACnBE,KAAKC,cAAgBF,EAASG,OAAOC,YAAYC,MAAM,I,wBAYxCH,cAAgB,EAMOI,gBAGAC,UAGAC,KAAoB,QAM5D,oBAAAC,GACEC,EAAkBjB,EAAY,QAASQ,KAAKU,GAAI,O,CAWlD,iBAAAC,GACEX,KAAKQ,sB,CAGP,gBAAAI,GACEZ,KAAKa,kB,CAGP,oBAAAC,GACEd,KAAKJ,UAAUmB,Y,CAkBTF,iBAAmB,KACzB,MAAMG,EAAOhB,KAAKgB,KAElB,GAAIC,EAAMD,GAAO,OAEjBhB,KAAKC,cAAgBiB,EAAeF,EAAM,CAAEG,QAAS,OAAQf,OAC7D,MAAOgB,GAAQJ,EAAKK,cAAc,CAAEC,QAAS,OAE7C,GAAIL,EAAMG,GAAO,CACfpB,KAAKJ,SAAS2B,cACd,M,CAGFvB,KAAKJ,SAAS4B,QAAQJ,EAAM,CAC1BK,cAAe,KACfC,UAAW,KACXC,QAAS,MACT,EAGJ,QAAYX,GACV,OAAOhB,KAAKL,aAAaiC,cAAc,SAAW,I,CAOpD,MAAAC,GACE,MAAMC,EAAS,IACT9B,KAAKK,iBAAmB,CAAE,+BAAgC0B,EAAoB/B,KAAKK,qBACnFL,KAAKM,WAAa,CAAE,yBAA0ByB,EAAoB/B,KAAKM,aAG7E,OACE0B,EAACC,EAAK,CAAAC,IAAA,2CAAAC,MAAOL,GACXE,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,WAAY,KACZ,CAAC,SAASpC,KAAKO,QAASP,KAAKC,gBAAkB,EAC/CoC,MAAOrC,KAAKC,cAAgB,EAC5B,UAAWD,KAAKC,cAAgB,GAElCqC,KAAK,QAELN,EAAM,QAAAE,IAAA,2CAAAK,IAAMC,GAAaxC,KAAKL,YAAc6C,EAAUJ,MAAM,kCAAkCE,KAAK,UACjGN,EAAM,QAAAE,IAAA,2CAAAO,aAAczC,KAAKa,qB","ignoreList":[]}

package/dist/beeq/p-ba12d135.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqBreadcrumbItemCss","BqBreadcrumbItem","href","target","rel","bqBlur","bqFocus","bqClick","onBlur","this","emit","el","onFocus","onClick","render","isLink","isDefined","TagElem","h","key","class","part","undefined","name"],"sources":["../../packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss?tag=bq-breadcrumb-item&encapsulation=shadow","../../packages/beeq/src/components/breadcrumb-item/bq-breadcrumb-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Breadcrumb item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-breadcrumb-item.variables';\n\n:host([aria-current='page']) {\n  .breadcrumb-item {\n    @apply text-[color:--bq-breadcrumb-item--text-color-current];\n  }\n}\n\n.breadcrumb-item {\n  @apply border-[length:--bq-breadcrumb-item--border-width] border-[color:--bq-breadcrumb-item--border-color];\n  @apply rounded-[--bq-breadcrumb-item--border-radius] bg-[--bq-breadcrumb-item--background] shadow-[shadow:--bq-breadcrumb-item--box-shadow];\n  @apply pe-[--bq-breadcrumb-item--padding-end] ps-[--bq-breadcrumb-item--padding-start] p-b-[--bq-breadcrumb-item--paddingY];\n  @apply text-[length:--bq-breadcrumb-item--text-size] font-regular leading-[--bq-breadcrumb-item--line-height] text-[color:--bq-breadcrumb-item--text-color];\n  @apply focus-visible:focus hover:text-hover-brand active:outline-none;\n  @apply transition-colors duration-300 ease-in-out;\n  @apply cursor-pointer no-underline;\n\n  border-style: var(--bq-avatar--border-style);\n}\n\n.breadcrumb-separator {\n  @apply flex items-center text-[length:--bq-breadcrumb-item--text-size-separator];\n  @apply pe-[--bq-breadcrumb-item--padding-end-separator] ps-[--bq-breadcrumb-item--padding-start-separator];\n}\n","import { Component, Element, Event, h, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { isDefined } from '../../shared/utils';\n\n/**\n * The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n *\n * @example How to use it\n * ```html\n * <bq-breadcrumb-item label=\"Home page\">\n *   <bq-icon name=\"house-line\" size=\"16\"></bq-icon>\n *   Home\n * </bq-breadcrumb-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/61d6c0-breadcrumb\n * @status stable\n *\n * @attr {string} href - If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.\n * @attr {string} target - Where to display the link in the browser context. Relevant only if `href` is set.\n * @attr {string} rel - Where to display the link in the browser context. Relevant only if `href` is set.\n *\n * @event bqFocus - Handler to be called when item is focused\n * @event bqClick - Handler to be called when item is clicked\n * @event bqBlur - Handler to be called when item loses focus\n *\n * @slot - The default slot is used to add content to the breadcrumb item.\n *\n * @part base - The component wrapper container\n * @part content - The `span` tag that wraps the content item\n * @part item - The breadcrumb item wrapper (`button` or `a`)\n * @part separator - The `span` tag that wraps the separator element\n *\n * @cssprop --bq-breadcrumb-item--background - Background color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--box-shadow - Box shadow of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-color - Border color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-style - Border style of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-width - Border width of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-radius - Border radius of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--line-height - Line height of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color - Text color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color-current - Text color of the current breadcrumb item (active)\n * @cssprop --bq-breadcrumb-item--text-size - Text size of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-size-separator - Text size of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-start - Padding start of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-end - Padding end of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--paddingY - Padding top and bottom of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-start-separator - Padding start of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-end-separator - Padding end of the breadcrumb item separator\n */\n@Component({\n  tag: 'bq-breadcrumb-item',\n  styleUrl: './scss/bq-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BqBreadcrumbItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqBreadcrumbItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Where to display the link in the browser context. Relevant only if `href` is set. */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Where to display the link in the browser context. Relevant only if `href` is set. */\n  @Prop({ reflect: true }) rel: string = 'noreferrer noopener';\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 item loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  /** Handler to be called when item is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  /** Handler to be called when item is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private onBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private onFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private onClick = () => {\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n\n    return (\n      <div class=\"flex items-center\" part=\"base\">\n        <TagElem\n          class=\"breadcrumb-item\"\n          href={isLink ? this.href : undefined}\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          onClick={this.onClick}\n          part=\"item\"\n        >\n          <span class=\"flex items-center gap-xs2\" part=\"content\">\n            <slot></slot>\n          </span>\n        </TagElem>\n        {/* @internal use only */}\n        <span class=\"breadcrumb-separator\" part=\"separator\">\n          <slot name=\"separator\"></slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;gHAAA,MAAMA,EAAsB,q2wB,MCwDfC,EAAgB,M,4IAiBFC,KAGAC,OAGAC,IAAc,sBAU9BC,OAGAC,QAGAC,QAqBDC,OAAS,KACfC,KAAKJ,OAAOK,KAAKD,KAAKE,GAAG,EAGnBC,QAAU,KAChBH,KAAKH,QAAQI,KAAKD,KAAKE,GAAG,EAGpBE,QAAU,KAChBJ,KAAKF,QAAQG,KAAKD,KAAKE,GAAG,EAO5B,MAAAG,GACE,MAAMC,EAASC,EAAUP,KAAKP,MAC9B,MAAMe,EAAUF,EAAS,IAAM,SAE/B,OACEG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBC,KAAK,QAClCH,EAACD,EAAO,CAAAE,IAAA,2CACNC,MAAM,kBACNlB,KAAMa,EAASN,KAAKP,KAAOoB,UAC3BlB,IAAKW,GAAUN,KAAKN,OAAS,sBAAwBmB,UACrDnB,OAAQY,EAASN,KAAKN,OAASmB,UAC/Bd,OAAQC,KAAKD,OACbI,QAASH,KAAKG,QACdC,QAASJ,KAAKI,QACdQ,KAAK,QAELH,EAAA,QAAAC,IAAA,2CAAMC,MAAM,4BAA4BC,KAAK,WAC3CH,EAAA,QAAAC,IAAA,+CAIJD,EAAA,QAAAC,IAAA,2CAAMC,MAAM,uBAAuBC,KAAK,aACtCH,EAAA,QAAAC,IAAA,2CAAMI,KAAK,e","ignoreList":[]}

package/dist/beeq/p-c023718e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqCheckboxCss","BqCheckbox","inputElem","prevCheckedValue","internals","backgroundOnHover","formId","formValidationMessage","checked","disabled","indeterminate","name","required","value","handleIndeterminatePropChange","this","handleRequiredPropChange","updateFormValidity","bqChange","bqFocus","bqBlur","componentWillLoad","componentDidUpdate","emit","formAssociatedCallback","setFormValue","formResetCallback","removeAttribute","undefined","vClick","click","vFocus","focus","vBlur","blur","states","clear","add","setValidity","valueMissing","handleChange","handleOnFocus","el","handleOnBlur","render","h","key","class","part","type","isNil","form","ref","input","onBlur","onChange","onFocus","tabindex","xmlns","viewBox","fill","d","stroke"],"sources":["../../packages/beeq/src/components/checkbox/scss/bq-checkbox.scss?tag=bq-checkbox&encapsulation=shadow","../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Checkbox styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-checkbox.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-checkbox {\n  @apply box-border inline-flex cursor-pointer select-none rounded-s transition-colors duration-300 ease-in-out p-b-xs p-i-xs;\n\n  // Default hover state\n  &:not(.is-checked),\n  &:not(.is-indeterminate) {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply border-hover-brand;\n    }\n  }\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  // Checked/Indeterminate hover state\n  &.is-checked,\n  &.is-indeterminate {\n    &:not(.is-disabled):hover .bq-checkbox__checkbox {\n      @apply bg-hover-ui-brand border-hover-brand;\n    }\n  }\n}\n\n.bq-checkbox__input {\n  // Checkbox square icon has `FOCUS`\n  &:focus,\n  &:focus-visible {\n    ~ .bq-checkbox__checkbox {\n      @apply focus border-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE`\n  &:checked,\n  &:indeterminate {\n    ~ .bq-checkbox__checkbox {\n      @apply border-brand bg-ui-brand;\n    }\n  }\n\n  // Checkbox square icon is `CHECKED/INDETERMINATE` and `DISABLED`\n  &:checked:disabled,\n  &:indeterminate:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n\n  &:disabled {\n    ~ .bq-checkbox__checkbox {\n      @apply opacity-60;\n    }\n  }\n}\n\n// Checkbox square icon `DEFAULT` state (not checked/indeterminate, not hover, not disabled)\n.bq-checkbox__checkbox {\n  @apply rounded-[--bq-checkbox--border-radius] border-[length:--bq-checkbox--border-width] border-solid border-[color:--bq-icon--primary];\n}\n\n.bq-checkbox__checkbox,\n.bq-checkbox__label {\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { AttachInternals, Component, Element, Event, h, Method, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n *\n * @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n *   Checkbox label\n * </bq-checkbox>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n *\n * @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n *\n * @slot - The content of the checkbox component\n *\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.indeterminate = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        aria-label={this.name || 'checkbox'}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            type=\"checkbox\"\n            class=\"bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0\"\n            name={!isNil(this.name) ? this.name : undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            form={this.formId}\n            required={this.required}\n            value={this.value}\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            ref={(input: HTMLInputElement) => (this.inputElem = input)}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            tabindex=\"0\"\n          />\n          <span\n            class=\"bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"absolute text-neutral-white bs-full is-full\"\n                viewBox=\"0 0 256 256\"\n              >\n                <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                  d=\"M216 72 104 184l-56-56\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"absolute text-neutral-white bs-full is-full\"\n                viewBox=\"0 0 256 256\"\n                fill=\"currentColor\"\n              >\n                <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n                <path\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                  d=\"M40 128h176\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium leading-regular text-primary group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-d0a16e94.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DATE_PICKER_TYPE","CALLY_SCRIPT_ATTRIBUTE","CALLY_LIB_VERSION","CALLY_LIB_HASH","isLibraryLoaded","isCallyLibraryLoaded","document","querySelector","loadCallyLibrary","async","loadScript","type","src","attributes","crossOrigin","integrity","error","Error","message","Promise","resolve","reject","script","createElement","onload","onerror","Object","entries","forEach","key","value","setAttribute","head","appendChild","bqDatePickerCss","BqDatePicker","callyElem","inputElem","isInternalUpdate","labelElem","prefixElem","suffixElem","fallbackInputId","COMMON_EXPORT_PARTS","BUTTON_EXPORT_PARTS","internals","isCallyLoaded","focusedDate","displayDate","hasLabel","hasPrefix","hasRangeEnd","hasSuffix","hasValue","autofocus","clearButtonLabel","disableClear","disabled","distance","firstDayOfWeek","formatOptions","day","month","year","form","formValidationMessage","isDateDisallowed","locale","max","min","months","monthsPerView","name","open","panelHeight","placeholder","placement","required","skidding","showOutsideDays","strategy","tentative","validationStatus","handleValueChange","newValue","oldValue","formatDisplayValue","this","setFormValue","isNil","undefined","updateFormValidity","isDefined","setFocusedDate","checkPropValues","validatePropValue","el","bqBlur","bqChange","bqClear","bqFocus","componentWillLoad","isClient","console","componentDidLoad","handleSlotChange","componentDidRender","formAssociatedCallback","formResetCallback","clear","handleOpenChange","ev","isEventTargetChildOfElement","detail","handleClickOutside","button","emit","handleBlur","handleFocus","formatFocusedDate","nextFocused","Date","toLocaleDateString","handleChange","isHTMLElement","target","dateValue","isNaN","getTime","handleCalendarChange","shouldStayOpen","focus","handleCalendarRangeStart","handleCalendarRangeEnd","handleClearClick","stopPropagation","hasSlotContent","generateCalendarMonth","offset","className","h","class","exportparts","generateCalendarMonths","Array","from","length","_","i","dateRegex","match","exec","dateFormatter","Intl","DateTimeFormat","start","end","split","map","dateStr","formatRange","dates","date","format","join","states","toString","trim","add","setValidity","valueMissing","CalendarType","componentTypes","single","multi","range","render","CallyCalendar","labelId","part","id","htmlFor","ref","onSlotchange","slot","spanElem","autoComplete","autoCapitalize","readonly","spellcheck","onBlur","onFocus","onChange","appearance","size","onBqClick","pageBy","onRangestart","onRangeend","elem","color","label"],"sources":["../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts","../../packages/beeq/src/components/date-picker/helper/callyLibrary.ts","../../packages/beeq/src/components/date-picker/scss/bq-date-picker.scss?tag=bq-date-picker&encapsulation=shadow","../../packages/beeq/src/components/date-picker/bq-date-picker.tsx"],"sourcesContent":["export type DaysOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\nexport const DATE_PICKER_TYPE = ['single', 'multi', 'range'] as const;\nexport type TDatePickerType = (typeof DATE_PICKER_TYPE)[number];\n\nexport type TCalendarDate = {\n  focusedDate: string;\n  value: string;\n  min?: string;\n  max?: string;\n  months?: number;\n  tentative?: string;\n  pageBy?: 'single' | 'months';\n  firstDayOfWeek?: number;\n  showOutsideDays?: boolean;\n  isDateDisallowed?: (date: Date) => boolean;\n  locale?: string;\n  onChange?: (ev: Event) => void;\n  onRangestart?: (ev: CustomEvent) => void;\n  onRangeend?: (ev: CustomEvent) => void;\n};\n","/* -------------------------------------------------------------------------- */\n/*                         Cally Library loader helper                        */\n/* -------------------------------------------------------------------------- */\n\nconst CALLY_SCRIPT_ATTRIBUTE = 'data-cally-library';\n//❗ Make sure to update the version here when the library releases a new version\nconst CALLY_LIB_VERSION = '0.8.0';\n/**\n * ❗ Make sure to update the hash here if the `CALLY_LIB_VERSION` is updated\n * This hash is used to ensure the integrity of the library when loading it\n * from a CDN.\n * @see https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity\n */\nconst CALLY_LIB_HASH = 'sha384-giuY/f8D3+ehgOTmQMr4HvrreOITDmvXsZuDCJ1csQ+3dURHA24NqRd8lkSI6uGF';\n\nlet isLibraryLoaded = false;\n\n/**\n * Checks if the Cally library is already loaded in the document\n * @returns {boolean} True if the library is loaded\n */\nexport const isCallyLibraryLoaded = (): boolean => {\n  // This might be a bit redundant, but it's a sanity check to ensure the library is actually loaded\n  return isLibraryLoaded || document.querySelector(`script[${CALLY_SCRIPT_ATTRIBUTE}]`) !== null;\n};\n\n/**\n * Loads the Cally library for the date picker component\n * @throws {Error} If the library fails to load\n * @return {Promise<void>}\n */\nexport const loadCallyLibrary = async (): Promise<void> => {\n  if (isCallyLibraryLoaded()) return;\n\n  try {\n    await loadScript({\n      type: 'module',\n      src: `https://unpkg.com/cally@${CALLY_LIB_VERSION}/dist/cally.js`,\n      attributes: {\n        [CALLY_SCRIPT_ATTRIBUTE]: '',\n        crossOrigin: 'anonymous',\n        integrity: CALLY_LIB_HASH,\n      },\n    });\n\n    isLibraryLoaded = true;\n  } catch (error) {\n    isLibraryLoaded = false;\n    throw new Error(`Failed to load the cally library: ${error instanceof Error ? error.message : 'Unknown error'}`);\n  }\n};\n\ninterface ScriptConfig {\n  type: string;\n  src: string;\n  attributes?: Record<string, string>;\n}\n\n/**\n * Helper function to load a script with given configuration\n * @param {Object} config - Script configuration\n * @param {string} config.type - The type of the script\n * @param {string} config.src - The source URL of the script\n * @param {Object} [config.attributes] - Additional attributes to set on the script element\n * @returns {Promise<void>}\n */\nconst loadScript = ({ type, src, attributes = {} }: ScriptConfig): Promise<void> => {\n  return new Promise<void>((resolve, reject) => {\n    const script = document.createElement('script');\n    script.type = type;\n    script.src = src;\n\n    script.onload = () => resolve();\n    script.onerror = (error: Event) =>\n      reject(new Error(`Failed to load script: ${src}, ${error instanceof Error ? error.message : 'Unknown error'}`));\n\n    Object.entries(attributes).forEach(([key, value]) => {\n      script.setAttribute(key, value);\n    });\n\n    document.head.appendChild(script);\n  });\n};\n","/* -------------------------------------------------------------------------- */\n/*                        Date picker styles                                  */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-date-picker.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__label {\n  @apply flex flex-grow items-center gap-[--bq-date-picker--gap] m-be-[--bq-date-picker--label-margin-bottom];\n  @apply text-[length:--bq-date-picker--label-text-size] text-[color:--bq-date-picker--label-text-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Date picker input group control                    */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-date-picker--border-radius] border-[length:--bq-date-picker--border-width] border-[color:--bq-date-picker--border-color];\n  // Padding\n  @apply pe-[--bq-date-picker--padding-end] ps-[--bq-date-picker--padding-start] p-b-[--bq-date-picker--paddingY];\n  // Text\n  @apply select-none text-[length:--bq-date-picker--text-size] text-[color:--bq-date-picker--text-color] placeholder:text-[color:--bq-date-picker--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-date-picker--border-style);\n\n  // Focus\n  &:not(.disabled):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n\n    @apply focus border-[color:--bq-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-date-picker__control--clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-date-picker__control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-date-picker__control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-date-picker__control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-date-picker__control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--input {\n  @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply border-none min-bs-[--bq-date-picker--icon-size] min-is-0 p-b-0 p-i-0 m-b-0 m-i-0 focus:outline-none focus-visible:outline-none;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n\n  @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-date-picker__control--prefix,\n.bq-date-picker__control--suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-date-picker--text-color];\n}\n\n.bq-date-picker__control--prefix {\n  @apply me-[--bq-date-picker--gap];\n}\n\n.bq-date-picker__control--suffix {\n  @apply ms-[--bq-date-picker--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-date-picker--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Customize Cally date picker                         */\n/* -------------------------------------------------------------------------- */\n\ncalendar-date,\ncalendar-range,\ncalendar-multi {\n  &::part(header) {\n    @apply justify-center gap-s;\n  }\n\n  &::part(heading) {\n    @apply p-b-xs2 p-i-xs;\n  }\n\n  &::part(button) {\n    @apply rounded-s border-0 bg-transparent transition-colors duration-200 p-b-xs2 p-i-xs2;\n    @apply focus-visible:focus hover:bg-hover-ui-primary;\n  }\n\n  &::part(container) {\n    @apply bg-[--bq-date-picker--background-color] p-b-0 p-i-0;\n  }\n}\n\ncalendar-month {\n  /* stylelint-disable-next-line custom-property-pattern */\n  --color-accent: var(--bq-ui--brand);\n\n  &::part(button) {\n    @apply flex items-center justify-center rounded-s bg-transparent font-default text-primary transition-colors duration-200 ease-in-out p-b-0 p-i-0;\n    @apply size-[--bq-date-picker--day-size] focus-visible:focus enabled:hover:bg-hover-secondary disabled:cursor-not-allowed;\n  }\n\n  &::part(button day disallowed) {\n    @apply cursor-not-allowed bg-transparent #{!important};\n  }\n\n  &::part(button day selected) {\n    @apply rounded-s bg-[--bq-date-picker--range-background-color] text-alt enabled:hover:bg-hover-ui-brand;\n  }\n\n  &::part(button day selected range-inner) {\n    @apply rounded-none bg-[--bq-date-picker--range-inner-background-color] text-primary hover:text-alt;\n  }\n\n  &::part(button day outside) {\n    @apply cursor-pointer text-secondary opacity-100;\n  }\n\n  &::part(today) {\n    @apply rounded-s border-[length:--bq-date-picker--currentDate-border-width] border-[color:--bq-date-picker--currentDate-border-color];\n\n    border-style: var(--bq-date-picker--border-style);\n  }\n\n  &::part(today selected) {\n    @apply text-alt;\n  }\n\n  &::part(today selected range-inner) {\n    /* Ensure 'today selected range-inner' keeps the intended color */\n    @apply text-primary;\n  }\n\n  &::part(today range-inner) {\n    @apply rounded-none;\n  }\n\n  &::part(today range-start) {\n    @apply rounded-s rounded-es-none;\n  }\n\n  &::part(today range-end) {\n    @apply rounded-s rounded-ee-none;\n  }\n\n  &::part(range-start) {\n    @apply rounded-ee-none rounded-se-none;\n  }\n\n  &::part(range-end) {\n    @apply rounded-es-none rounded-ss-none;\n  }\n\n  &::part(range-start range-end) {\n    @apply rounded-s;\n  }\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { DATE_PICKER_TYPE } from './bq-date-picker.types';\nimport type { DaysOfWeek, TCalendarDate, TDatePickerType } from './bq-date-picker.types';\nimport { isCallyLibraryLoaded, loadCallyLibrary } from './helper/callyLibrary';\nimport type { Placement } from '../../services/interfaces';\nimport {\n  hasSlotContent,\n  isClient,\n  isDefined,\n  isEventTargetChildOfElement,\n  isHTMLElement,\n  isNil,\n  validatePropValue,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\n/**\n * The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n *\n * @example How to use it\n * ```html\n * <bq-date-picker\n *   first-day-of-week=\"1\"\n *   locale=\"en-GB\"\n *   months-per-view=\"single\"\n *   months=\"2\"\n *   name=\"bq-date-picker\"\n *   placeholder=\"Enter your date\"\n *   placement=\"bottom-end\"\n *   show-outside-days=\"false\"\n *   type=\"range\"\n *   validation-status=\"none\"\n *   value=\"2024-05-25\"\n * >\n *   <label class=\"flex flex-grow items-center\" slot=\"label\">\n *     Date picker label\n *   </label>\n * </bq-date-picker>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n *\n * @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.\n * @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.\n * @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n * @attr {string} form - The ID of the form that the Date picker input belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.\n * @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n * @attr {string} max - The latest date that can be selected.\n * @attr {string} min - The earliest date that can be selected.\n * @attr {number} months - Number of months to show when range is `true`.\n * @attr {string} name - The Date picker input name.\n * @attr {boolean} open - If `true`, the Date picker panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Date picker panel.\n * @attr {\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\"} placement - Position of the Date picker panel.\n * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.\n * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.\n * @attr {boolean} show-outside-days - Whether to show days outside the month.\n * @attr {string} strategy - Defines the strategy to position the Date picker panel.\n * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.\n * @attr {\"single\" | \"multi\" | \"range\"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.\n * @attr {\"error\" | \"none\" | \"success\" | \"warning\"} validation-status - The validation status of the Select input.\n * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n *\n * @method clear - Clears the selected value.\n *\n * @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n *\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part calendar__button - Any button used in the calendar-month component.\n * @part calendar__button - Any button within the calendar-range component.\n * @part calendar__container - The calendar-range container for the entire component.\n * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.\n * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.\n * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.\n * @part calendar__head - The calendar-month table's header row.\n * @part calendar__header - The calendar-range container for the heading and buttons.\n * @part calendar__heading - The calendar-month heading container that labels the month.\n * @part calendar__heading - The calendar-range heading containing the month and year.\n * @part calendar__next - The next page button on the calendar-range component.\n * @part calendar__outside - Any days which are outside the current month.\n * @part calendar__previous - The previous page button on the calendar-range component.\n * @part calendar__range-end - The day at the end of a date range.\n * @part calendar__range-inner - Any days between the start and end of a date range.\n * @part calendar__range-start - The day at the start of a date range.\n * @part calendar__selected - Any days which are selected.\n * @part calendar__table - The calendar-month <table> element.\n * @part calendar__td - The calendar-month table's body cells.\n * @part calendar__th - The calendar-month table's header cells.\n * @part calendar__today - The Today's day.\n * @part calendar__tr - Any row within the table on the calendar-month component.\n * @part calendar__week - The calendar-month table's body rows.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The date picker panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n *\n * @cssprop --bq-date-picker--background-color - Date picker background color.\n * @cssprop --bq-date-picker--border-color - Date picker border color.\n * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.\n * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.\n * @cssprop --bq-date-picker--border-radius - Date picker border radius.\n * @cssprop --bq-date-picker--border-style - Date picker border style.\n * @cssprop --bq-date-picker--border-width - Date picker border width.\n * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.\n * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.\n * @cssprop --bq-date-picker--day-size - Date picker button day size.\n * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.\n * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.\n * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.\n * @cssprop --bq-date-picker--label-text-color - Date picker label text color.\n * @cssprop --bq-date-picker--label-text-size - Date picker label text size.\n * @cssprop --bq-date-picker--padding-end - Date picker padding end.\n * @cssprop --bq-date-picker--padding-start - Date picker padding start.\n * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.\n * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.\n * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.\n * @cssprop --bq-date-picker--text-color - Date picker text color.\n * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.\n * @cssprop --bq-date-picker--text-size - Date picker text size.\n */\n@Component({\n  tag: 'bq-date-picker',\n  styleUrl: './scss/bq-date-picker.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqDatePicker {\n  // Own Properties\n  // ====================\n\n  private callyElem?: TCalendarDate;\n  private inputElem?: HTMLInputElement;\n  private isInternalUpdate = false;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n  private fallbackInputId = 'date-picker';\n  // Export parts of the calendar-month component\n  private readonly COMMON_EXPORT_PARTS =\n    'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';\n  private readonly BUTTON_EXPORT_PARTS =\n    'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals: ElementInternals;\n  @Element() el!: HTMLBqDatePickerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() isCallyLoaded = false;\n  @State() focusedDate: string;\n  @State() displayDate: string;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasRangeEnd = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /** If `true`, the Date picker input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /** If `true`, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /**\n   * Indicates whether the Date picker input is disabled or not.\n   * If `true`, the Date picker is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the Date picker panel and the input element. */\n  @Prop({ reflect: true }) distance?: number = 8;\n\n  /** The first day of the week, where Sunday is 0, Monday is 1, etc */\n  @Prop({ reflect: true }) firstDayOfWeek?: DaysOfWeek = 1;\n\n  /** The options to use when formatting the displayed value.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n   */\n  @Prop() formatOptions: Intl.DateTimeFormatOptions = {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n  };\n\n  /** The ID of the form that the Date picker input belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message (mandatory if `required` is set) */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** A function that takes a date and returns true if the date should not be selectable */\n  @Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;\n\n  /** The locale for formatting dates. If not set, will use the browser's locale.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n   */\n  @Prop({ reflect: true }) locale: Intl.LocalesArgument = 'en-GB';\n\n  /** The latest date that can be selected */\n  @Prop({ reflect: true }) max?: string;\n\n  /** The earliest date that can be selected */\n  @Prop({ reflect: true }) min?: string;\n\n  /** Number of months to show when range is `true` */\n  @Prop({ reflect: true }) months: number;\n\n  /**\n   * Specifies how the next/previous buttons should navigate the calendar.\n   * - single: The buttons will navigate by a single month at a time.\n   * - months: The buttons will navigate by the number of months displayed per view.\n   */\n  @Prop({ reflect: true }) monthsPerView: 'single' | 'months' = 'single';\n\n  /** The Date picker input name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, the Date picker panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the Date picker panel. */\n  @Prop({ reflect: true, mutable: true }) panelHeight?: string = 'auto';\n\n  /** The Date picker input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** Position of the Date picker panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-end';\n\n  /** Indicates whether or not the Date picker input is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** Represents the skidding between the Date picker panel and the input element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Whether to show days outside the month */\n  @Prop({ reflect: true }) showOutsideDays: boolean = false;\n\n  /** Defines the strategy to position the Date picker panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  /** The date that is tentatively selected e.g. the start of a range selection  */\n  @Prop({ reflect: true, mutable: true }) tentative?: string;\n\n  /** It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection */\n  @Prop({ reflect: true }) type: TDatePickerType = 'single';\n\n  /**\n   * The validation status of the Select input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n   * All dates are expected in ISO-8601 format (YYYY-MM-DD). */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string) {\n    if (newValue === oldValue) return;\n\n    const { formatDisplayValue, internals, isCallyLoaded } = this;\n    if (!isCallyLoaded) return;\n\n    internals.setFormValue(!isNil(newValue) ? `${newValue}` : undefined);\n    this.updateFormValidity();\n\n    this.hasValue = isDefined(newValue);\n    this.displayDate = formatDisplayValue(newValue);\n\n    this.setFocusedDate();\n  }\n\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqDatePickerElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqDatePickerElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqDatePickerElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqDatePickerElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  async componentWillLoad() {\n    if (!isClient() || this.isCallyLoaded) return;\n\n    try {\n      await loadCallyLibrary();\n      this.isCallyLoaded = isCallyLibraryLoaded();\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n    this.handleValueChange(this.value, undefined);\n  }\n\n  componentDidRender() {\n    if (this.isInternalUpdate) {\n      this.isInternalUpdate = false;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.clear();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqOpen', { capture: true })\n  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n    if (!isEventTargetChildOfElement(ev, this.el)) return;\n\n    const { open } = ev.detail;\n    if (this.open === open) return;\n\n    this.open = open;\n  }\n\n  @Listen('click', { target: 'body', capture: true })\n  handleClickOutside(ev: MouseEvent) {\n    const { open, type, hasRangeEnd } = this;\n    if (!open || type !== 'range' || ev.button !== 0) return;\n    if (isEventTargetChildOfElement(ev, this.el) || hasRangeEnd) return;\n\n    this.tentative = undefined;\n    this.hasRangeEnd = false;\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Clears the selected value.\n   *\n   * @return {Promise<void>}\n   * @memberof BqInput\n   */\n  @Method()\n  async clear(): Promise<void> {\n    if (this.disabled) return;\n\n    this.value = undefined;\n    this.internals.setFormValue(undefined);\n    this.bqClear.emit(this.el);\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private setFocusedDate = () => {\n    const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;\n    if (!(callyElem && isCallyLoaded)) return;\n\n    const nextFocused = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');\n    if (this.focusedDate === nextFocused) return;\n\n    this.focusedDate = nextFocused;\n    if (callyElem.focusedDate !== this.focusedDate) {\n      // We need to set the focused date in the calendar component via a ref\n      // because it doesn't work when passed as a prop (the Cally element does not re-render)\n      callyElem.focusedDate = this.focusedDate;\n    }\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled || !isHTMLElement(ev.target, 'input')) return;\n\n    const dateValue = new Date(ev.target.value + 'T00:00:00');\n    if (!isNaN(dateValue.getTime())) {\n      // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale\n      this.value = dateValue.toLocaleDateString('fr-CA');\n      this.displayDate = this.formatDisplayValue(this.value);\n      this.internals.setFormValue(`${this.value}`);\n      this.bqChange.emit({ value: this.value, el: this.el });\n    }\n  };\n\n  private handleCalendarChange = (ev: Event) => {\n    if (this.isInternalUpdate) return;\n\n    const shouldStayOpen = this.type === 'multi';\n    const value = (ev.target as unknown as { value: string }).value;\n\n    if (this.value === value) {\n      this.open = shouldStayOpen;\n      return;\n    }\n\n    this.isInternalUpdate = true;\n\n    this.value = value;\n    this.displayDate = this.formatDisplayValue(value);\n    this.inputElem.value = this.displayDate;\n    this.inputElem.focus();\n\n    this.internals.setFormValue(value);\n    this.bqChange.emit({ value: this.value, el: this.el });\n\n    this.open = shouldStayOpen;\n  };\n\n  private handleCalendarRangeStart = (ev: CustomEvent) => {\n    this.hasRangeEnd = false;\n    this.tentative = ev.detail;\n  };\n\n  private handleCalendarRangeEnd = () => {\n    this.hasRangeEnd = true;\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    if (this.disabled) return;\n\n    this.inputElem.value = '';\n    this.value = this.inputElem.value;\n    this.hasRangeEnd = false;\n\n    this.bqClear.emit(this.el);\n    this.bqChange.emit({ value: this.value, el: this.el });\n    this.internals.setFormValue(undefined);\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private generateCalendarMonth = (offset?: number, className = ''): Element | null => {\n    if (!this.isCallyLoaded) return null;\n\n    return (\n      <calendar-month\n        offset={offset}\n        class={className}\n        exportparts={`${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`}\n      />\n    );\n  };\n\n  /**\n   * Generates an array of Elements representing the calendar months.\n   *\n   * If the type of the date picker is 'range' or 'multi' and the number of months is specified,\n   * it generates an array of calendar months with the specified length. Each month will have an offset\n   * and a class name based on its position in the array. The offset is used to determine the month to display,\n   * and the class name is used for responsive design.\n   *\n   * If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,\n   * it generates an array with a single calendar month.\n   *\n   * @returns {Element[]} An array of elements representing the calendar months.\n   */\n  private generateCalendarMonths = (): Element[] => {\n    if (!this.isCallyLoaded) return [];\n\n    if (this.type === 'range' || (this.type === 'multi' && this.months)) {\n      return Array.from({ length: this.months }, (_, i) => {\n        const offset = i > 0 ? i : undefined;\n        const className = offset ? 'hidden sm:block' : '';\n        return this.generateCalendarMonth(offset, className);\n      });\n    }\n\n    return [this.generateCalendarMonth()];\n  };\n\n  /**\n   * Extracts and returns the first date part from a given string.\n   * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value\n   * should be the focused date in the calendar.\n   *\n   * @param value - The value to be processed, can be a string.\n   * @returns The extracted last date portion of the value.\n   */\n  private formatFocusedDate = (value: string): string | undefined => {\n    if (!value) return undefined;\n\n    const dateRegex = /\\b\\d{4}-\\d{2}-\\d{2}\\b/;\n    const match = dateRegex.exec(value);\n    return match ? match[0] : undefined;\n  };\n\n  private formatDisplayValue = (value: string): string | undefined => {\n    if (!value) return undefined;\n\n    const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);\n\n    if (this.type === 'range') {\n      const [start, end] = value.split('/').map((dateStr) => new Date(dateStr + 'T00:00:00'));\n      return dateFormatter.formatRange(start, end);\n    }\n\n    if (this.type === 'multi') {\n      const dates = value.split(' ').map((dateStr) => new Date(dateStr + 'T00:00:00'));\n      return dates.map((date) => dateFormatter.format(date)).join(', ');\n    }\n\n    return dateFormatter.format(new Date(value + 'T00:00:00'));\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, inputElem } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.toString().trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity(\n        { valueMissing: true },\n        formValidationMessage ?? 'Please, input or select a valid date',\n        inputElem,\n      );\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private get CalendarType() {\n    const componentTypes = {\n      single: 'calendar-date',\n      multi: 'calendar-multi',\n      range: 'calendar-range',\n    } as const;\n\n    // Return the corresponding component type, based on the type prop value\n    return componentTypes[this.type] || componentTypes.single;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const CallyCalendar = this.CalendarType;\n    const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;\n\n    return (\n      <div class=\"bq-date-picker\" part=\"base\">\n        {/* Label */}\n        <label\n          id={labelId}\n          class={{ 'bq-date-picker__label': true, '!hidden': !this.hasLabel }}\n          aria-label={this.name || this.fallbackInputId}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        {/* Select date picker dropdown */}\n        <bq-dropdown\n          class=\"bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto\"\n          disabled={this.disabled}\n          distance={this.distance}\n          open={this.open}\n          panelHeight={this.panelHeight}\n          placement={this.placement}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          exportparts=\"panel\"\n        >\n          {/* Input control group */}\n          <div\n            class={{\n              'bq-date-picker__control': true,\n              [`validation-${this.validationStatus}`]: true,\n              disabled: this.disabled,\n            }}\n            part=\"control\"\n            slot=\"trigger\"\n          >\n            {/* Prefix */}\n            <span\n              class={{ 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }}\n              ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n              part=\"prefix\"\n            >\n              <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n            </span>\n            {/* HTML Input */}\n            <input\n              id={this.name || this.fallbackInputId}\n              class=\"bq-date-picker__control--input\"\n              autoComplete=\"off\"\n              autoCapitalize=\"off\"\n              aria-disabled={this.disabled ? 'true' : 'false'}\n              aria-controls={`${this.name}`}\n              aria-haspopup=\"dialog\"\n              disabled={this.disabled}\n              form={this.form}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.type !== 'single'}\n              ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n              required={this.required}\n              spellcheck={false}\n              type=\"text\"\n              value={this.displayDate}\n              part=\"input\"\n              // Events\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n              onChange={this.handleChange}\n            />\n            {/* Clear Button */}\n            {this.hasValue && !this.disabled && !this.disableClear && (\n              // The clear button will be visible as long as the input has a value\n              // and the parent group is hovered or has focus-within\n              <bq-button\n                class=\"bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden\"\n                appearance=\"text\"\n                aria-label={this.clearButtonLabel}\n                size=\"small\"\n                onBqClick={this.handleClearClick}\n                part=\"clear-btn\"\n                exportparts=\"button\"\n              >\n                <slot name=\"clear-icon\">\n                  <bq-icon name=\"x-circle\" class=\"flex\" />\n                </slot>\n              </bq-button>\n            )}\n            {/* Suffix */}\n            <span\n              class=\"bq-date-picker__control--suffix\"\n              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n                <bq-icon name=\"calendar-blank\" class=\"flex\" />\n              </slot>\n            </span>\n          </div>\n          {this.isCallyLoaded && (\n            <CallyCalendar\n              isDateDisallowed={this.isDateDisallowed}\n              locale={this.locale as string}\n              value={this.value}\n              min={this.min}\n              max={this.max}\n              months={this.months}\n              tentative={this.tentative}\n              pageBy={this.monthsPerView}\n              firstDayOfWeek={this.firstDayOfWeek}\n              showOutsideDays={this.showOutsideDays}\n              onChange={this.handleCalendarChange}\n              onRangestart={this.handleCalendarRangeStart}\n              onRangeend={this.handleCalendarRangeEnd}\n              exportparts=\"container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading\"\n              ref={(elem: TCalendarDate) => (this.callyElem = elem)}\n            >\n              <bq-icon color=\"text--primary\" slot=\"previous\" name=\"caret-left\" label=\"Previous\" />\n              <bq-icon color=\"text--primary\" slot=\"next\" name=\"caret-right\" label=\"Next\" />\n\n              <div class=\"flex flex-wrap justify-center gap-[--bq-spacing-m]\">{this.generateCalendarMonths()}</div>\n            </CallyCalendar>\n          )}\n        </bq-dropdown>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;mUAEO,MAAMA,EAAmB,CAAC,SAAU,QAAS,SCEpD,MAAMC,EAAyB,qBAE/B,MAAMC,EAAoB,QAO1B,MAAMC,EAAiB,0EAEvB,IAAIC,EAAkB,MAMf,MAAMC,EAAuB,IAE3BD,GAAmBE,SAASC,cAAc,UAAUN,QAA+B,KAQrF,MAAMO,EAAmBC,UAC9B,GAAIJ,IAAwB,OAE5B,UACQK,EAAW,CACfC,KAAM,SACNC,IAAK,2BAA2BV,kBAChCW,WAAY,CACVZ,CAACA,GAAyB,GAC1Ba,YAAa,YACbC,UAAWZ,KAIfC,EAAkB,I,CAClB,MAAOY,GACPZ,EAAkB,MAClB,MAAM,IAAIa,MAAM,qCAAqCD,aAAiBC,MAAQD,EAAME,QAAU,kB,GAkBlG,MAAMR,EAAa,EAAGC,OAAMC,MAAKC,aAAa,MACrC,IAAIM,SAAc,CAACC,EAASC,KACjC,MAAMC,EAAShB,SAASiB,cAAc,UACtCD,EAAOX,KAAOA,EACdW,EAAOV,IAAMA,EAEbU,EAAOE,OAAS,IAAMJ,IACtBE,EAAOG,QAAWT,GAChBK,EAAO,IAAIJ,MAAM,0BAA0BL,MAAQI,aAAiBC,MAAQD,EAAME,QAAU,oBAE9FQ,OAAOC,QAAQd,GAAYe,SAAQ,EAAEC,EAAKC,MACxCR,EAAOS,aAAaF,EAAKC,EAAM,IAGjCxB,SAAS0B,KAAKC,YAAYX,EAAO,IChFrC,MAAMY,EAAkB,y6kC,MCoJXC,EAAY,M,sTAIfC,UACAC,UACAC,iBAAmB,MACnBC,UACAC,WACAC,WACAC,gBAAkB,cAETC,oBACf,yGACeC,oBACf,2KAKiBC,U,wBAOVC,cAAgB,MAChBC,YACAC,YACAC,SAAW,MACXC,UAAY,MACZC,YAAc,MACdC,UAAY,MACZC,SAAW,MAMKC,UAGAC,iBAAoB,cAGpBC,aAAgB,MAMhBC,SAAqB,MAGrBC,SAAoB,EAGpBC,eAA8B,EAK/CC,cAA4C,CAClDC,IAAK,UACLC,MAAO,QACPC,KAAM,WAIiBC,KAGAC,sBAGAC,iBAKAC,OAA+B,QAG/BC,IAGAC,IAGAC,OAOAC,cAAqC,SAGrCC,KAGeC,KAAiB,MAGjBC,YAAuB,OAGtCC,YAGAC,UAAwB,aAGxBC,SAGAC,SAAoB,EAGpBC,gBAA2B,MAG3BC,SAAkC,QAGnBC,UAGftE,KAAwB,SAYxBuE,iBAAqC,OAItBpD,MAMxC,iBAAAqD,CAAkBC,EAAkBC,GAClC,GAAID,IAAaC,EAAU,OAE3B,MAAMC,mBAAEA,EAAkBzC,UAAEA,EAASC,cAAEA,GAAkByC,KACzD,IAAKzC,EAAe,OAEpBD,EAAU2C,cAAcC,EAAML,GAAY,GAAGA,IAAaM,WAC1DH,KAAKI,qBAELJ,KAAKlC,SAAWuC,EAAUR,GAC1BG,KAAKvC,YAAcsC,EAAmBF,GAEtCG,KAAKM,gB,CAIP,eAAAC,GACEC,EAAkB/F,EAAkB,SAAUuF,KAAKS,GAAI,O,CAQhDC,OAMAC,SAGAC,QAGAC,QAMT,uBAAMC,GACJ,IAAKC,KAAcf,KAAKzC,cAAe,OAEvC,UACQtC,IACN+E,KAAKzC,cAAgBzC,G,CACrB,MAAOW,GACPuF,QAAQvF,MAAMA,E,EAIlB,gBAAAwF,GACEjB,KAAKkB,mBACLlB,KAAKJ,kBAAkBI,KAAKzD,MAAO4D,U,CAGrC,kBAAAgB,GACE,GAAInB,KAAKjD,iBAAkB,CACzBiD,KAAKjD,iBAAmB,K,EAI5B,sBAAAqE,GACEpB,KAAKI,oB,CAGP,iBAAAiB,GACE,GAAInB,EAAMF,KAAKzD,OAAQ,OAEvByD,KAAKsB,O,CAOP,gBAAAC,CAAiBC,GACf,IAAKC,EAA4BD,EAAIxB,KAAKS,IAAK,OAE/C,MAAMvB,KAAEA,GAASsC,EAAGE,OACpB,GAAI1B,KAAKd,OAASA,EAAM,OAExBc,KAAKd,KAAOA,C,CAId,kBAAAyC,CAAmBH,GACjB,MAAMtC,KAAEA,EAAI9D,KAAEA,EAAIwC,YAAEA,GAAgBoC,KACpC,IAAKd,GAAQ9D,IAAS,SAAWoG,EAAGI,SAAW,EAAG,OAClD,GAAIH,EAA4BD,EAAIxB,KAAKS,KAAO7C,EAAa,OAE7DoC,KAAKN,UAAYS,UACjBH,KAAKpC,YAAc,K,CAiBrB,WAAM0D,GACJ,GAAItB,KAAK9B,SAAU,OAEnB8B,KAAKzD,MAAQ4D,UACbH,KAAK1C,UAAU2C,aAAaE,WAC5BH,KAAKY,QAAQiB,KAAK7B,KAAKS,G,CAQjBqB,WAAa,KACnB,GAAI9B,KAAK9B,SAAU,OAEnB8B,KAAKU,OAAOmB,KAAK7B,KAAKS,GAAG,EAGnBsB,YAAc,KACpB,GAAI/B,KAAK9B,SAAU,OAEnB8B,KAAKa,QAAQgB,KAAK7B,KAAKS,GAAG,EAGpBH,eAAiB,KACvB,MAAMzD,UAAEA,EAASmF,kBAAEA,EAAiBzE,cAAEA,EAAahB,MAAEA,GAAUyD,KAC/D,KAAMnD,GAAaU,GAAgB,OAEnC,MAAM0E,EAAc1F,EAAQyF,EAAkBzF,IAAS,IAAI2F,MAAOC,mBAAmB,SACrF,GAAInC,KAAKxC,cAAgByE,EAAa,OAEtCjC,KAAKxC,YAAcyE,EACnB,GAAIpF,EAAUW,cAAgBwC,KAAKxC,YAAa,CAG9CX,EAAUW,YAAcwC,KAAKxC,W,GAIzB4E,aAAgBZ,IACtB,GAAIxB,KAAK9B,WAAamE,EAAcb,EAAGc,OAAQ,SAAU,OAEzD,MAAMC,EAAY,IAAIL,KAAKV,EAAGc,OAAO/F,MAAQ,aAC7C,IAAKiG,MAAMD,EAAUE,WAAY,CAE/BzC,KAAKzD,MAAQgG,EAAUJ,mBAAmB,SAC1CnC,KAAKvC,YAAcuC,KAAKD,mBAAmBC,KAAKzD,OAChDyD,KAAK1C,UAAU2C,aAAa,GAAGD,KAAKzD,SACpCyD,KAAKW,SAASkB,KAAK,CAAEtF,MAAOyD,KAAKzD,MAAOkE,GAAIT,KAAKS,I,GAI7CiC,qBAAwBlB,IAC9B,GAAIxB,KAAKjD,iBAAkB,OAE3B,MAAM4F,EAAiB3C,KAAK5E,OAAS,QACrC,MAAMmB,EAASiF,EAAGc,OAAwC/F,MAE1D,GAAIyD,KAAKzD,QAAUA,EAAO,CACxByD,KAAKd,KAAOyD,EACZ,M,CAGF3C,KAAKjD,iBAAmB,KAExBiD,KAAKzD,MAAQA,EACbyD,KAAKvC,YAAcuC,KAAKD,mBAAmBxD,GAC3CyD,KAAKlD,UAAUP,MAAQyD,KAAKvC,YAC5BuC,KAAKlD,UAAU8F,QAEf5C,KAAK1C,UAAU2C,aAAa1D,GAC5ByD,KAAKW,SAASkB,KAAK,CAAEtF,MAAOyD,KAAKzD,MAAOkE,GAAIT,KAAKS,KAEjDT,KAAKd,KAAOyD,CAAc,EAGpBE,yBAA4BrB,IAClCxB,KAAKpC,YAAc,MACnBoC,KAAKN,UAAY8B,EAAGE,MAAM,EAGpBoB,uBAAyB,KAC/B9C,KAAKpC,YAAc,IAAI,EAGjBmF,iBAAoBvB,IAC1B,GAAIxB,KAAK9B,SAAU,OAEnB8B,KAAKlD,UAAUP,MAAQ,GACvByD,KAAKzD,MAAQyD,KAAKlD,UAAUP,MAC5ByD,KAAKpC,YAAc,MAEnBoC,KAAKY,QAAQiB,KAAK7B,KAAKS,IACvBT,KAAKW,SAASkB,KAAK,CAAEtF,MAAOyD,KAAKzD,MAAOkE,GAAIT,KAAKS,KACjDT,KAAK1C,UAAU2C,aAAaE,WAC5BH,KAAKlD,UAAU8F,QAEfpB,EAAGwB,iBAAiB,EAGd9B,iBAAmB,KACzBlB,KAAKtC,SAAWuF,EAAejD,KAAKhD,WACpCgD,KAAKrC,UAAYsF,EAAejD,KAAK/C,YACrC+C,KAAKnC,UAAYoF,EAAejD,KAAK9C,WAAW,EAG1CgG,sBAAwB,CAACC,EAAiBC,EAAY,MAC5D,IAAKpD,KAAKzC,cAAe,OAAO,KAEhC,OACE8F,EAAA,kBACEF,OAAQA,EACRG,MAAOF,EACPG,YAAa,GAAGvD,KAAK5C,uBAAuB4C,KAAK3C,uBACjD,EAiBEmG,uBAAyB,KAC/B,IAAKxD,KAAKzC,cAAe,MAAO,GAEhC,GAAIyC,KAAK5E,OAAS,SAAY4E,KAAK5E,OAAS,SAAW4E,KAAKjB,OAAS,CACnE,OAAO0E,MAAMC,KAAK,CAAEC,OAAQ3D,KAAKjB,SAAU,CAAC6E,EAAGC,KAC7C,MAAMV,EAASU,EAAI,EAAIA,EAAI1D,UAC3B,MAAMiD,EAAYD,EAAS,kBAAoB,GAC/C,OAAOnD,KAAKkD,sBAAsBC,EAAQC,EAAU,G,CAIxD,MAAO,CAACpD,KAAKkD,wBAAwB,EAW/BlB,kBAAqBzF,IAC3B,IAAKA,EAAO,OAAO4D,UAEnB,MAAM2D,EAAY,wBAClB,MAAMC,EAAQD,EAAUE,KAAKzH,GAC7B,OAAOwH,EAAQA,EAAM,GAAK5D,SAAS,EAG7BJ,mBAAsBxD,IAC5B,IAAKA,EAAO,OAAO4D,UAEnB,MAAM8D,EAAgB,IAAIC,KAAKC,eAAenE,KAAKpB,OAAQoB,KAAK3B,eAEhE,GAAI2B,KAAK5E,OAAS,QAAS,CACzB,MAAOgJ,EAAOC,GAAO9H,EAAM+H,MAAM,KAAKC,KAAKC,GAAY,IAAItC,KAAKsC,EAAU,eAC1E,OAAOP,EAAcQ,YAAYL,EAAOC,E,CAG1C,GAAIrE,KAAK5E,OAAS,QAAS,CACzB,MAAMsJ,EAAQnI,EAAM+H,MAAM,KAAKC,KAAKC,GAAY,IAAItC,KAAKsC,EAAU,eACnE,OAAOE,EAAMH,KAAKI,GAASV,EAAcW,OAAOD,KAAOE,KAAK,K,CAG9D,OAAOZ,EAAcW,OAAO,IAAI1C,KAAK3F,EAAQ,aAAa,EAGpD6D,mBAAqB,KAC3B,MAAM1B,sBAAEA,EAAqBpB,UAAEA,EAASgC,SAAEA,EAAQ/C,MAAEA,EAAKO,UAAEA,GAAckD,KAGzE1C,GAAWwH,OAAOxD,QAElB,GAAIhC,KAAc/C,GAASA,EAAMwI,WAAWC,SAAW,IAAK,CAE1D1H,GAAWwH,OAAOG,IAAI,WACtB3H,GAAW4H,YACT,CAAEC,aAAc,MAChBzG,GAAyB,uCACzB5B,GAEF,M,CAIFQ,GAAWwH,OAAOG,IAAI,SACtB3H,GAAW4H,YAAY,GAAG,EAG5B,gBAAYE,GACV,MAAMC,EAAiB,CACrBC,OAAQ,gBACRC,MAAO,iBACPC,MAAO,kBAIT,OAAOH,EAAerF,KAAK5E,OAASiK,EAAeC,M,CAOrD,MAAAG,GACE,MAAMC,EAAgB1F,KAAKoF,aAC3B,MAAMO,EAAU,yBAAyB3F,KAAKf,MAAQe,KAAK7C,kBAE3D,OACEkG,EAAA,OAAA/G,IAAA,2CAAKgH,MAAM,iBAAiBsC,KAAK,QAE/BvC,EACE,SAAA/G,IAAA,2CAAAuJ,GAAIF,EACJrC,MAAO,CAAE,wBAAyB,KAAM,WAAYtD,KAAKtC,UAAU,aACvDsC,KAAKf,MAAQe,KAAK7C,gBAC9B2I,QAAS9F,KAAKf,MAAQe,KAAK7C,gBAC3B4I,IAAM/I,GAAgCgD,KAAKhD,UAAYA,EACvD4I,KAAK,SAELvC,EAAM,QAAA/G,IAAA,2CAAA2C,KAAK,QAAQ+G,aAAchG,KAAKkB,oBAGxCmC,EACE,eAAA/G,IAAA,2CAAAgH,MAAM,iFACNpF,SAAU8B,KAAK9B,SACfC,SAAU6B,KAAK7B,SACfe,KAAMc,KAAKd,KACXC,YAAaa,KAAKb,YAClBE,UAAWW,KAAKX,UAChBE,SAAUS,KAAKT,SACfE,SAAUO,KAAKP,SACf8D,YAAY,SAGZF,EAAA,OAAA/G,IAAA,2CACEgH,MAAO,CACL,0BAA2B,KAC3B,CAAC,cAActD,KAAKL,oBAAqB,KACzCzB,SAAU8B,KAAK9B,UAEjB0H,KAAK,UACLK,KAAK,WAGL5C,EAAA,QAAA/G,IAAA,2CACEgH,MAAO,CAAE,kCAAmC,KAAM,WAAYtD,KAAKrC,WACnEoI,IAAMG,GAA+BlG,KAAK/C,WAAaiJ,EACvDN,KAAK,UAELvC,EAAM,QAAA/G,IAAA,2CAAA2C,KAAK,SAAS+G,aAAchG,KAAKkB,oBAGzCmC,EACE,SAAA/G,IAAA,2CAAAuJ,GAAI7F,KAAKf,MAAQe,KAAK7C,gBACtBmG,MAAM,iCACN6C,aAAa,MACbC,eAAe,MAAK,gBACLpG,KAAK9B,SAAW,OAAS,QAAO,gBAChC,GAAG8B,KAAKf,OAAM,gBACf,SACdf,SAAU8B,KAAK9B,SACfO,KAAMuB,KAAKvB,KACXQ,KAAMe,KAAKf,KACXG,YAAaY,KAAKZ,YAClBiH,SAAUrG,KAAK5E,OAAS,SACxB2K,IAAMjJ,GAAiCkD,KAAKlD,UAAYA,EACxDwC,SAAUU,KAAKV,SACfgH,WAAY,MACZlL,KAAK,OACLmB,MAAOyD,KAAKvC,YACZmI,KAAK,QAELW,OAAQvG,KAAK8B,WACb0E,QAASxG,KAAK+B,YACd0E,SAAUzG,KAAKoC,eAGhBpC,KAAKlC,WAAakC,KAAK9B,WAAa8B,KAAK/B,cAGxCoF,EAAA,aAAA/G,IAAA,2CACEgH,MAAM,mEACNoD,WAAW,OAAM,aACL1G,KAAKhC,iBACjB2I,KAAK,QACLC,UAAW5G,KAAK+C,iBAChB6C,KAAK,YACLrC,YAAY,UAEZF,EAAM,QAAA/G,IAAA,2CAAA2C,KAAK,cACToE,EAAS,WAAA/G,IAAA,2CAAA2C,KAAK,WAAWqE,MAAM,WAKrCD,EACE,QAAA/G,IAAA,2CAAAgH,MAAM,kCACNyC,IAAMG,GAA+BlG,KAAK9C,WAAagJ,EACvDN,KAAK,UAELvC,EAAM,QAAA/G,IAAA,2CAAA2C,KAAK,SAAS+G,aAAchG,KAAKkB,kBACrCmC,EAAS,WAAA/G,IAAA,2CAAA2C,KAAK,iBAAiBqE,MAAM,YAI1CtD,KAAKzC,eACJ8F,EAACqC,EAAa,CAAApJ,IAAA,2CACZqC,iBAAkBqB,KAAKrB,iBACvBC,OAAQoB,KAAKpB,OACbrC,MAAOyD,KAAKzD,MACZuC,IAAKkB,KAAKlB,IACVD,IAAKmB,KAAKnB,IACVE,OAAQiB,KAAKjB,OACbW,UAAWM,KAAKN,UAChBmH,OAAQ7G,KAAKhB,cACbZ,eAAgB4B,KAAK5B,eACrBoB,gBAAiBQ,KAAKR,gBACtBiH,SAAUzG,KAAK0C,qBACfoE,aAAc9G,KAAK6C,yBACnBkE,WAAY/G,KAAK8C,uBACjBS,YAAY,sLACZwC,IAAMiB,GAAyBhH,KAAKnD,UAAYmK,GAEhD3D,EAAA,WAAA/G,IAAA,2CAAS2K,MAAM,gBAAgBhB,KAAK,WAAWhH,KAAK,aAAaiI,MAAM,aACvE7D,EAAA,WAAA/G,IAAA,2CAAS2K,MAAM,gBAAgBhB,KAAK,OAAOhH,KAAK,cAAciI,MAAM,SAEpE7D,EAAA,OAAA/G,IAAA,2CAAKgH,MAAM,sDAAsDtD,KAAKwD,4B","ignoreList":[]}

package/dist/beeq/p-d1dd36ca.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqOptionGroupCss","BqOptionGroup","render","h","key","class","part","name","role"],"sources":["../../packages/beeq/src/components/option-group/scss/bq-option-group.scss?tag=bq-option-group&encapsulation=shadow","../../packages/beeq/src/components/option-group/bq-option-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Option group styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-option-group.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-option-group {\n  @apply flex overflow-hidden overflow-ellipsis;\n  @apply bg-[--bq-option-group--background] text-[length:--bq-option-group--font-size] leading-[--bq-option-group--line-height];\n  @apply pe-[--bq-option-group--label-padding-end] ps-[--bq-option-group--label-padding-start] p-b-[--bq-option-group--label-paddingY] p-i-[--bq-option-group--label-paddingY];\n\n  &__child {\n    @apply flex items-center;\n  }\n}\n\n.bq-option-group__label {\n  @apply pe-[--bq-option-group--label-text-padding-end] ps-[--bq-option-group--label-text-padding-start];\n}\n\n.bq-option-group__container ::slotted(bq-option) {\n  @apply ps-[--bq-option-group--container-padding-start];\n}\n","import { Component, Element, h } from '@stencil/core';\n\n/**\n * The option group component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-group class=\"hydrated\">\n *   <span slot=\"header-label\">Sport</span>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/3b1b7b-option-group\n * @status stable\n *\n * @slot header-label - The label of the option group\n * @slot header-prefix - The prefix of the label\n * @slot header-suffix - The suffix of the label\n * @slot - The option items\n *\n * @part label - The `legend` tag element which acts as a container for the label\n * @part prefix - The prefix of the label\n * @part label - The text of the label\n * @part suffix - The suffix of the label\n * @part group - The `div` element which holds the option items\n *\n * @cssprop --bq-option-group--background - option group background color\n * @cssprop --bq-option-group--font-size - option group font size\n * @cssprop --bq-option-group--line-height - option group line height\n * @cssprop --bq-option-group--label-padding-start - option group header padding start\n * @cssprop --bq-option-group--label-padding-end - option group header padding start\n * @cssprop --bq-option-group--label-paddingY - option group header padding Y axis\n * @cssprop --bq-option-group--label-text-padding-start - option group text within label padding start\n * @cssprop --bq-option-group--label-text-padding-end - option group text within label padding start\n * @cssprop --bq-option-group--container-padding-start - option group container padding start\n */\n@Component({\n  tag: 'bq-option-group',\n  styleUrl: './scss/bq-option-group.scss',\n  shadow: true,\n})\nexport class BqOptionGroup {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bg-ui-primary\">\n        <legend class=\"bq-option-group m-be-[--bq-option-group--gapY-list]\" part=\"label\">\n          <span class=\"option-group__prefix flex items-center\" part=\"prefix\">\n            <slot name=\"header-prefix\" />\n          </span>\n          <span\n            class=\"bq-option-group__label inline-block overflow-hidden text-ellipsis whitespace-nowrap is-auto\"\n            part=\"label\"\n          >\n            <slot name=\"header-label\" />\n          </span>\n          <span class=\"bq-option-group__suffix\" part=\"suffix\">\n            <slot name=\"header-suffix\" />\n          </span>\n        </legend>\n        <div\n          class=\"bq-option-group__container flex flex-col gap-[--bq-option-group--gapY-list]\"\n          role=\"group\"\n          aria-label=\"Options\"\n          part=\"group\"\n        >\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;kDAAA,MAAMA,EAAmB,27rB,MC6CZC,EAAa,M,iDA8CxB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,UAAAC,IAAA,2CAAQC,MAAM,sDAAsDC,KAAK,SACvEH,EAAA,QAAAC,IAAA,2CAAMC,MAAM,yCAAyCC,KAAK,UACxDH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,mBAEbJ,EAAA,QAAAC,IAAA,2CACEC,MAAM,8FACNC,KAAK,SAELH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,kBAEbJ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,0BAA0BC,KAAK,UACzCH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,oBAGfJ,EAAA,OAAAC,IAAA,2CACEC,MAAM,8EACNG,KAAK,QAAO,aACD,UACXF,KAAK,SAELH,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/beeq/p-dc4d2d77.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqOptionCss","BqOption","prefixElem","suffixElem","hasPrefix","hasSuffix","hidden","disabled","value","selected","bqBlur","bqFocus","bqClick","bqEnter","componentDidLoad","this","handleSlotChange","onKeyDown","event","key","emit","el","onBlur","isDisabledOrHidden","preventDefault","stopPropagation","onFocus","onClick","hasSlotContent","render","h","Host","role","class","active","tabindex","part","ref","elem","name","onSlotchange"],"sources":["../../packages/beeq/src/components/option/scss/bq-option.scss?tag=bq-option&encapsulation=shadow","../../packages/beeq/src/components/option/bq-option.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Option styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-option.variables';\n\n:host {\n  @apply block;\n}\n\n:host([hidden]) {\n  @apply hidden;\n}\n\n.bq-option {\n  @apply flex cursor-pointer items-center text-[length:--bq-option--font-size] text-primary is-full;\n  @apply pe-[--bq-option--padding-end] ps-[--bq-option--padding-start] p-b-[--bq-option--paddingY] p-i-[--bq-option--paddingY];\n  @apply rounded-[--bq-option--border-radius] bg-[--bq-option--background] shadow-[shadow:--bq-option--box-shadow];\n  @apply border-[length:--bq-option--border-width] border-[color:--bq-option--border-color];\n  // Transition\n  @apply transition-colors duration-150 ease-in-out;\n  // Focus\n  @apply [&:not(.disabled)]:focus-visible:focus;\n  // Hover\n  @apply [&:not(.disabled)]:hover:bg-hover-ui-secondary;\n  // Active\n  @apply [&.active:not(.disabled)]:bg-ui-brand-alt [&.active:not(.disabled)]:text-brand;\n  // Disabled\n  @apply [&.disabled]:cursor-not-allowed [&.disabled]:opacity-60;\n\n  border-style: var(--bq-option--border-style);\n}\n\n.bq-option__label {\n  @apply inline-block flex-auto overflow-hidden text-ellipsis whitespace-nowrap;\n  @apply pe-[--bq-option-label--padding-end] ps-[--bq-option-label--padding-start];\n}\n","import { Component, Element, Event, h, Host, Listen, Prop, State } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/**\n * An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\n * It can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n *\n * @example How to use it\n * ```html\n * <bq-option value=\"user\">\n *   <span>User profile</span>\n *   <bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n * </bq-option>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/story/components-option--with-option-group\n * @status stable\n *\n * @attr {boolean} disabled - If true, the option is disabled.\n * @attr {boolean} hidden - If true, the option is hidden.\n * @attr {string} value - A string representing the value of the option. Can be used to identify the item.\n * @attr {boolean} selected - If true, the option is selected and active.\n *\n * @event bqBlur - Handler to be called when item loses focus.\n * @event bqFocus - Handler to be called when item is focused.\n * @event bqClick - Handler to be called when item is clicked.\n * @event bqEnter - Handler to be called on enter key press.\n *\n * @slot prefix - The prefix content to be displayed before the label.\n * @slot - The label content to be displayed.\n *\n * @part base - The component's internal wrapper.\n * @part label - The `span` element in which the label text is displayed.\n * @part prefix - The `span` element in which the prefix is displayed (generally `bq-icon`).\n * @part suffix - The `span` element in which the suffix is displayed (generally `bq-icon`).\n *\n * @cssprop --bq-option--background - background color\n * @cssprop --bq-option--font-size - font size\n * @cssprop --bq-option--border-color - border color\n * @cssprop --bq-option--border-style - border style\n * @cssprop --bq-option--border-width - border width\n * @cssprop --bq-option--border-radius - border radius\n * @cssprop --bq-option--box-shadow - box shadow\n * @cssprop --bq-option--gap-start - gap space between prefix and label\n * @cssprop --bq-option--gap-end - gap space between label and suffix\n * @cssprop --bq-option--paddingY - padding Y axis\n * @cssprop --bq-option--padding-start - option label padding start\n * @cssprop --bq-option--padding-end - option label padding end\n */\n@Component({\n  tag: 'bq-option',\n  styleUrl: './scss/bq-option.scss',\n  shadow: true,\n})\nexport class BqOption {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqOptionElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasPrefix: boolean = false;\n  @State() hasSuffix: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the option is hidden. */\n  @Prop({ reflect: true }) hidden: boolean = false;\n\n  /** If true, the option is disabled. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** A string representing the value of the option. Can be used to identify the item */\n  @Prop({ reflect: true }) value?: string;\n\n  /** If true, the option is selected and active. */\n  @Prop({ reflect: true }) selected: 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 item loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;\n\n  /** Handler to be called when item is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;\n\n  /** Handler to be called when item is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqOptionElement>;\n\n  /** Handler to be called on enter key press */\n  @Event() bqEnter: EventEmitter<HTMLBqOptionElement>;\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  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'Enter') return;\n    this.bqEnter.emit(this.el);\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private onBlur = (event: Event) => {\n    if (this.isDisabledOrHidden) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private onFocus = (event: Event) => {\n    if (this.isDisabledOrHidden) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private onClick = (event: Event) => {\n    if (this.isDisabledOrHidden) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private get isDisabledOrHidden() {\n    return this.disabled || this.hidden;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.isDisabledOrHidden ? 'true' : 'false'}\n        aria-hidden={this.hidden ? 'true' : 'false'}\n        aria-selected={this.selected ? 'true' : 'false'}\n        role=\"option\"\n      >\n        <div\n          class={{\n            'bq-option': true,\n            disabled: this.disabled,\n            active: !this.disabled && this.selected,\n          }}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          onClick={this.onClick}\n          tabindex={this.isDisabledOrHidden ? '-1' : '0'}\n          role=\"button\"\n          part=\"base\"\n        >\n          <span\n            class={{\n              'bq-option__prefix me-[--bq-option--gap-start] flex items-center': true,\n              '!hidden': !this.hasPrefix,\n            }}\n            ref={(elem) => (this.prefixElem = elem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-option__label\" part=\"label\">\n            <slot />\n          </span>\n          <span\n            class={{\n              'bq-option__suffix ml-auto ms-[--bq-option--gap-end] flex items-center': true,\n              '!hidden': !this.hasSuffix,\n            }}\n            ref={(elem) => (this.suffixElem = elem)}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;oGAAA,MAAMA,EAAc,m9uB,MCwDPC,EAAQ,M,mJAIXC,WACAC,W,wBAWCC,UAAqB,MACrBC,UAAqB,MAMLC,OAAkB,MAGlBC,SAAqB,MAGrBC,MAGAC,SAAoB,MAUpCC,OAGAC,QAGAC,QAGAC,QAMT,gBAAAC,GACEC,KAAKC,kB,CAOP,SAAAC,CAAUC,GACR,GAAIA,EAAMC,MAAQ,QAAS,OAC3BJ,KAAKF,QAAQO,KAAKL,KAAKM,G,CAejBC,OAAUJ,IAChB,GAAIH,KAAKQ,mBAAoB,CAC3BL,EAAMM,iBACNN,EAAMO,kBACN,M,CAGFV,KAAKL,OAAOU,KAAKL,KAAKM,GAAG,EAGnBK,QAAWR,IACjB,GAAIH,KAAKQ,mBAAoB,CAC3BL,EAAMM,iBACNN,EAAMO,kBACN,M,CAGFV,KAAKJ,QAAQS,KAAKL,KAAKM,GAAG,EAGpBM,QAAWT,IACjB,GAAIH,KAAKQ,mBAAoB,CAC3BL,EAAMM,iBACNN,EAAMO,kBACN,M,CAGFV,KAAKH,QAAQQ,KAAKL,KAAKM,GAAG,EAGpBL,iBAAmB,KACzBD,KAAKX,UAAYwB,EAAeb,KAAKb,WAAY,UACjDa,KAAKV,UAAYuB,EAAeb,KAAKZ,WAAY,SAAS,EAG5D,sBAAYoB,GACV,OAAOR,KAAKR,UAAYQ,KAAKT,M,CAO/B,MAAAuB,GACE,OACEC,EAACC,EAAI,CAAAZ,IAAA,2DACYJ,KAAKQ,mBAAqB,OAAS,QAAO,cAC5CR,KAAKT,OAAS,OAAS,QACrB,gBAAAS,KAAKN,SAAW,OAAS,QACxCuB,KAAK,UAELF,EAAA,OAAAX,IAAA,2CACEc,MAAO,CACL,YAAa,KACb1B,SAAUQ,KAAKR,SACf2B,QAASnB,KAAKR,UAAYQ,KAAKN,UAEjCa,OAAQP,KAAKO,OACbI,QAASX,KAAKW,QACdC,QAASZ,KAAKY,QACdQ,SAAUpB,KAAKQ,mBAAqB,KAAO,IAC3CS,KAAK,SACLI,KAAK,QAELN,EAAA,QAAAX,IAAA,2CACEc,MAAO,CACL,kEAAmE,KACnE,WAAYlB,KAAKX,WAEnBiC,IAAMC,GAAUvB,KAAKb,WAAaoC,EAClCF,KAAK,UAELN,EAAM,QAAAX,IAAA,2CAAAoB,KAAK,SAASC,aAAczB,KAAKC,oBAEzCc,EAAA,QAAAX,IAAA,2CAAMc,MAAM,mBAAmBG,KAAK,SAClCN,EAAA,QAAAX,IAAA,8CAEFW,EAAA,QAAAX,IAAA,2CACEc,MAAO,CACL,wEAAyE,KACzE,WAAYlB,KAAKV,WAEnBgC,IAAMC,GAAUvB,KAAKZ,WAAamC,EAClCF,KAAK,UAELN,EAAA,QAAAX,IAAA,2CAAMoB,KAAK,SAASC,aAAczB,KAAKC,qB","ignoreList":[]}

package/dist/beeq/p-dd896cd8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bqRadioCss","BqRadio","inputElement","backgroundOnHover","checked","disabled","forceDisabled","formId","name","required","value","bqClick","bqFocus","bqBlur","bqKeyDown","vClick","this","click","vFocus","focus","vBlur","blur","getNativeInput","handleClick","event","preventDefault","bqClickEvent","emit","target","el","defaultPrevented","stopImmediatePropagation","handleOnFocus","handleOnBlur","handleOnKeyDown","key","isDisabled","render","h","Host","class","part","ref","element","type","form","onBlur","onClick","onFocus","onKeyDown","id"],"sources":["../../packages/beeq/src/components/radio/scss/bq-radio.scss?tag=bq-radio&encapsulation=shadow","../../packages/beeq/src/components/radio/bq-radio.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Radio styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-radio.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-radio {\n  @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;\n  @apply rounded-s p-b-xs p-i-xs;\n\n  &.is-disabled {\n    @apply cursor-not-allowed opacity-60;\n\n    &.is-checked .bq-radio__circle {\n      @apply border-icon-brand;\n    }\n\n    &.is-checked .bq-radio__checked {\n      @apply bg-ui-brand;\n    }\n  }\n\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  &.is-checked:not(.is-disabled) {\n    .bq-radio__circle {\n      @apply border-icon-brand;\n    }\n\n    .bq-radio__checked {\n      @apply bg-ui-brand;\n    }\n  }\n\n  &:not(.is-disabled):hover .bq-radio__circle {\n    @apply border-hover-icon-brand;\n  }\n\n  &.is-checked:not(.is-disabled):hover {\n    .bq-radio__checked,\n    .bq-radio__circle {\n      @apply border-hover-icon-brand;\n    }\n  }\n}\n\n.bq-radio__input {\n  @apply sr-only;\n\n  &:focus-visible {\n    ~ .bq-radio__circle {\n      @apply focus;\n    }\n  }\n}\n\n.bq-radio__control {\n  @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];\n}\n\n.bq-radio__circle {\n  @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];\n}\n\n.bq-radio__checked {\n  @apply rounded-full bs-full is-full;\n}\n\n.bq-radio__label {\n  @apply font-medium leading-regular text-primary;\n}\n\n.bq-radio__circle,\n.bq-radio__checked,\n.bq-radio__label {\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * The radio button is a user interface element that allows users to select a single option.\n *\n * @example How to use it\n * ```html\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n *\n * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {boolean} checked - If `true` radio input is checked\n * @attr {boolean} disabled - If `true` radio input is disabled\n * @attr {string} form-id - The form ID that the radio input is associated with\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted\n * @attr {boolean} value - A string representing the value of the radio\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n * @method getNativeInput - Returns the native `<input>` HTML element used under the hood\n *\n * @event bqBlur - Handler to be called when the radio loses focus\n * @event bqClick - Handler to be called when the radio state changes\n * @event bqFocus - Handler to be called when the radio gets focused\n * @event bqKeyDown - The handler is to be called when the radio key is pressed\n *\n * @slot - The bq-radio item\n *\n * @part base - The component's internal wrapper of the radio component.\n * @part input - The native HTML `<input type=\"radio\">` used under the hood.\n * @part radio - The component's internal wrapper of the radio component.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-radio--size - Radio size\n * @cssprop --bq-radio--border-width - Radio border width\n */\n@Component({\n  tag: 'bq-radio',\n  styleUrl: './scss/bq-radio.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqRadio {\n  // Own Properties\n  // ====================\n  private inputElement: HTMLInputElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqRadioElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true radio displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover = false;\n\n  /** If true radio input is checked */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** If true radio input is disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** @internal Used by the radio-group parent component to force the disabled state of the radio input */\n  @Prop({ reflect: true }) forceDisabled = false;\n\n  /** The form ID that the radio input is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the radio. */\n  @Prop({ reflect: true }) value!: string;\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 radio state changes */\n  @Event() bqClick: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n  /** Handler to be called when the radio gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqRadioElement>;\n\n  /** Handler to be called when the radio loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n  /** Handler to be called when the radio key is pressed */\n  @Event() bqKeyDown: EventEmitter<{ key: string; target: HTMLBqRadioElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElement?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElement?.blur();\n  }\n\n  /**\n   * Returns the native `<input>` HTML element used under the hood.\n   */\n  @Method()\n  async getNativeInput() {\n    return this.inputElement;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = (event: MouseEvent) => {\n    // Prevent the native input click default behavior\n    event.preventDefault();\n    if (this.disabled) return;\n\n    // Emit the event without changing state\n    // Let the radio-group handle all state management and event propagation\n    const bqClickEvent = this.bqClick.emit({ value: this.value, target: this.el });\n    if (bqClickEvent.defaultPrevented) {\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleOnKeyDown = (event: KeyboardEvent) => {\n    this.bqKeyDown.emit({ key: event.key, target: this.el });\n  };\n\n  private get isDisabled() {\n    return this.disabled || this.forceDisabled;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        <label\n          class={{\n            'bq-radio group': true,\n            'is-disabled': this.isDisabled,\n            'is-checked': this.checked,\n            'has-background': this.backgroundOnHover,\n          }}\n          part=\"base\"\n        >\n          <div class=\"bq-radio__control\">\n            <input\n              class=\"bq-radio__input\"\n              ref={(element) => (this.inputElement = element)}\n              type=\"radio\"\n              form={this.formId}\n              name={this.name}\n              value={this.value}\n              required={this.required}\n              disabled={this.isDisabled}\n              checked={this.checked}\n              onBlur={this.handleOnBlur}\n              onClick={this.handleClick}\n              onFocus={this.handleOnFocus}\n              onKeyDown={this.handleOnKeyDown}\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-disabled={this.isDisabled ? 'true' : 'false'}\n              aria-labelledby=\"bq-radio__label\"\n              part=\"input\"\n            />\n            <div class=\"bq-radio__circle\" part=\"radio\">\n              <div class=\"bq-radio__checked\" />\n            </div>\n          </div>\n          <span\n            class=\"bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled\"\n            part=\"label\"\n          >\n            <slot id=\"bq-radio__label\"></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;2DAAA,MAAMA,EAAa,4lvB,MCiDNC,EAAO,M,uJAGVC,a,wBAeiBC,kBAAoB,MAGLC,QAAU,MAGzBC,SAAW,MAGXC,cAAgB,MAGhBC,OAGAC,KAGAC,SAGAC,MAUhBC,QAGAC,QAGAC,OAGAC,UAqBT,YAAMC,GACJC,KAAKd,cAAce,O,CAQrB,YAAMC,GACJF,KAAKd,cAAciB,O,CAQrB,WAAMC,GACJJ,KAAKd,cAAcmB,M,CAOrB,oBAAMC,GACJ,OAAON,KAAKd,Y,CAQNqB,YAAeC,IAErBA,EAAMC,iBACN,GAAIT,KAAKX,SAAU,OAInB,MAAMqB,EAAeV,KAAKL,QAAQgB,KAAK,CAAEjB,MAAOM,KAAKN,MAAOkB,OAAQZ,KAAKa,KACzE,GAAIH,EAAaI,iBAAkB,CACjCN,EAAMO,0B,GAIFC,cAAgB,KACtBhB,KAAKJ,QAAQe,KAAKX,KAAKa,GAAG,EAGpBI,aAAe,KACrBjB,KAAKH,OAAOc,KAAKX,KAAKa,GAAG,EAGnBK,gBAAmBV,IACzBR,KAAKF,UAAUa,KAAK,CAAEQ,IAAKX,EAAMW,IAAKP,OAAQZ,KAAKa,IAAK,EAG1D,cAAYO,GACV,OAAOpB,KAAKX,UAAYW,KAAKV,a,CAO/B,MAAA+B,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,4CACHG,EAAA,SAAAH,IAAA,2CACEK,MAAO,CACL,iBAAkB,KAClB,cAAexB,KAAKoB,WACpB,aAAcpB,KAAKZ,QACnB,iBAAkBY,KAAKb,mBAEzBsC,KAAK,QAELH,EAAK,OAAAH,IAAA,2CAAAK,MAAM,qBACTF,EACE,SAAAH,IAAA,2CAAAK,MAAM,kBACNE,IAAMC,GAAa3B,KAAKd,aAAeyC,EACvCC,KAAK,QACLC,KAAM7B,KAAKT,OACXC,KAAMQ,KAAKR,KACXE,MAAOM,KAAKN,MACZD,SAAUO,KAAKP,SACfJ,SAAUW,KAAKoB,WACfhC,QAASY,KAAKZ,QACd0C,OAAQ9B,KAAKiB,aACbc,QAAS/B,KAAKO,YACdyB,QAAShC,KAAKgB,cACdiB,UAAWjC,KAAKkB,gBAAe,eACjBlB,KAAKZ,QAAU,OAAS,QAAO,gBAC9BY,KAAKoB,WAAa,OAAS,QAC1B,oCAChBK,KAAK,UAEPH,EAAA,OAAAH,IAAA,2CAAKK,MAAM,mBAAmBC,KAAK,SACjCH,EAAA,OAAAH,IAAA,2CAAKK,MAAM,wBAGfF,EAAA,QAAAH,IAAA,2CACEK,MAAM,sGACNC,KAAK,SAELH,EAAM,QAAAH,IAAA,2CAAAe,GAAG,sB","ignoreList":[]}

package/dist/beeq/p-e7bd48a0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ACCORDION_SIZE","ACCORDION_APPEARANCE","Accordion","el","header","panel","animation","isClosing","isExpanding","animationOptions","duration","easing","constructor","this","querySelector","open","style","height","offsetHeight","window","requestAnimationFrame","expand","close","startHeight","endHeight","cancel","animate","onfinish","onAnimationFinish","oncancel","removeAttribute","endEvent","Event","bubbles","composed","dispatchEvent","bqAccordionCss","BqAccordion","accordion","prefixElem","suffixElem","detailsElem","hasPrefix","hasSuffix","appearance","disabled","expanded","noAnimation","rotate","size","checkPropValues","validatePropValue","handleExpandedChange","event","bqOpen","emit","bqClose","defaultPrevented","isCssInterpolateSizeSupported","setTimeout","CustomEvent","handleDisabledChange","handleJsAnimation","console","warn","bqBlur","bqFocus","bqAfterOpen","bqAfterClose","bqClick","componentWillLoad","componentDidLoad","handleSlotChange","onAccordionTransitionEnd","stopPropagation","target","handleClick","preventDefault","handleFocus","handleBlur","hasSlotContent","CSS","supports","render","h","key","class","ref","part","id","onClick","onFocus","onBlur","tabindex","role","element","name","onSlotchange"],"sources":["../../packages/beeq/src/components/accordion/bq-accordion.types.ts","../../packages/beeq/src/components/accordion/helper/index.ts","../../packages/beeq/src/components/accordion/scss/bq-accordion.scss?tag=bq-accordion&encapsulation=shadow","../../packages/beeq/src/components/accordion/bq-accordion.tsx"],"sourcesContent":["export const ACCORDION_SIZE = ['small', 'medium'] as const;\nexport type TAccordionSize = (typeof ACCORDION_SIZE)[number];\n\nexport const ACCORDION_APPEARANCE = ['filled', 'ghost'] as const;\nexport type TAccordionAppearance = (typeof ACCORDION_APPEARANCE)[number];\n","/* -------------------------------------------------------------------------------------- */\n/*   💡 Credits: https://css-tricks.com/how-to-animate-the-details-element-using-waapi    */\n/* -------------------------------------------------------------------------------------- */\n\nexport class Accordion {\n  private el: HTMLDetailsElement;\n  private header: HTMLElement;\n  private panel: HTMLElement;\n  private animation: Animation | null;\n  private isClosing: boolean;\n  private isExpanding: boolean;\n  private animationOptions = {\n    duration: 200,\n    easing: 'ease-in-out',\n  };\n\n  constructor(el: HTMLDetailsElement) {\n    // Store the <details> element\n    this.el = el;\n    // Store the <summary> header element\n    this.header = el.querySelector('summary');\n    // Store the <div class=\"content\"> element\n    this.panel = el.querySelector('.bq-accordion__body');\n    // Store the animation object (so we can cancel it, if needed)\n    this.animation = null;\n    // Store if the element is closing\n    this.isClosing = false;\n    // Store if the element is expanding\n    this.isExpanding = false;\n  }\n\n  public open() {\n    // Check if the element is being closed or is already closed\n    if (!this.isClosing && this.el.open) return;\n    // Apply a fixed height on the element\n    this.el.style.height = `${this.el.offsetHeight}px`;\n    // Force the [open] attribute on the details element\n    this.el.open = true;\n    // Wait for the next frame to call the expand function\n    window.requestAnimationFrame(() => this.expand());\n  }\n\n  public close() {\n    // Check if the element is being opened or is already open\n    if (!this.isExpanding && !this.el.open) return;\n    // Set the element as \"being closed\"\n    this.isClosing = true;\n\n    // Store the current height of the element\n    const startHeight = `${this.el.offsetHeight}px`;\n    // Calculate the height of the <summary> header\n    const endHeight = `${this.header.offsetHeight}px`;\n\n    // If there is already an animation running\n    if (this.animation) {\n      // Cancel the current animation\n      this.animation.cancel();\n    }\n\n    // Start a WAAPI animation\n    this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n    // When the animation is complete, call onAnimationFinish()\n    this.animation.onfinish = () => this.onAnimationFinish(false);\n    // If the animation is cancelled, isClosing variable is set to false\n    this.animation.oncancel = () => (this.isClosing = false);\n  }\n\n  // Expands the accordion\n  private expand() {\n    // Set the element as \"being expanding\"\n    this.isExpanding = true;\n    // Get the current fixed height of the element\n    const startHeight = `${this.el.offsetHeight}px`;\n    // Calculate the open height of the element (summary header height + panel body height)\n    const endHeight = `${this.header.offsetHeight + this.panel.offsetHeight}px`;\n\n    // If there is already an animation running\n    if (this.animation) {\n      // Cancel the current animation\n      this.animation.cancel();\n    }\n\n    // Start a WAAPI animation\n    this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n    // When the animation is complete, call onAnimationFinish()\n    this.animation.onfinish = () => this.onAnimationFinish(true);\n    // If the animation is cancelled, isExpanding variable is set to false\n    this.animation.oncancel = () => (this.isExpanding = false);\n  }\n\n  // Handles the end of the animation\n  private onAnimationFinish(open: boolean) {\n    // Set the open attribute based on the parameter\n    this.el.open = open;\n    // Clear the stored animation\n    this.animation = null;\n    // Reset isClosing & isExpanding\n    this.isClosing = false;\n    this.isExpanding = false;\n    // Remove the overflow hidden and the fixed height\n    this.el.removeAttribute('style');\n    // Dispatch a custom event based on the open parameter\n    const endEvent = new Event('accordionTransitionEnd', { bubbles: false, composed: true });\n    this.el.dispatchEvent(endEvent);\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                              Accordion styles                              */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-accordion.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-accordion:not(.no-animation) {\n  /* -------------------------------------------------------------------- */\n  /* Opt-in the component to animating to/from intrinsic sizing keywords  */\n  /* Details: https://chrome.dev/css-wrapped-2024/#animate-to-height-auto */\n  /* -------------------------------------------------------------------- */\n  @apply supports-[interpolate-size:_allow-keywords]:[interpolate-size:_allow-keywords];\n}\n\n.bq-accordion {\n  &.disabled {\n    @apply cursor-not-allowed opacity-60;\n\n    .bq-accordion__header {\n      @apply pointer-events-none;\n    }\n  }\n\n  &.small .bq-accordion__header {\n    @apply gap-[--bq-accordion--small-gap] pe-[--bq-accordion--small-padding-end] ps-[--bq-accordion--small-padding-start] p-b-[--bq-accordion--small-padding-y];\n    @apply rounded-ee-[--bq-accordion--small-radius] rounded-es-[--bq-accordion--small-radius] rounded-se-[--bq-accordion--small-radius] rounded-ss-[--bq-accordion--small-radius];\n  }\n\n  &.medium .bq-accordion__header {\n    @apply gap-[--bq-accordion--medium-gap] pe-[--bq-accordion--medium-padding-end] ps-[--bq-accordion--medium-padding-start] p-b-[--bq-accordion--medium-padding-y];\n    @apply rounded-ee-[--bq-accordion--medium-radius] rounded-es-[--bq-accordion--medium-radius] rounded-se-[--bq-accordion--medium-radius] rounded-ss-[--bq-accordion--medium-radius];\n  }\n\n  &[open] .bq-accordion__header {\n    @apply border-[length:--bq-accordion--expanded-border-width] border-[color:--bq-accordion--expanded-border-color];\n    @apply rounded-ee-[0px] rounded-es-[0px];\n\n    border-style: var(--bq-accordion--expanded-border-style);\n  }\n\n  &.small .bq-accordion__content {\n    @apply rounded-ee-[--bq-accordion--small-radius] rounded-es-[--bq-accordion--small-radius] rounded-se-[0px] rounded-ss-[0px];\n  }\n\n  &.medium .bq-accordion__content {\n    @apply rounded-ee-[--bq-accordion--medium-radius] rounded-es-[--bq-accordion--medium-radius] rounded-se-[0px] rounded-ss-[0px];\n  }\n\n  &.filled {\n    .bq-accordion__header {\n      @apply bg-[--bq-accordion--filled-collapsed-background] hover:bg-hover-ui-secondary;\n    }\n\n    .bq-accordion__header--text {\n      @apply text-[--bq-accordion--filled-collapsed-text-color];\n    }\n\n    .bq-accordion__content {\n      @apply border-[length:--bq-accordion--panel-filled-border-width] border-[color:--bq-accordion--panel-filled-border-color];\n\n      border-style: var(--bq-accordion--panel-filled-border-style);\n    }\n\n    &[open] .bq-accordion__header {\n      @apply bg-[--bq-accordion--filled-expanded-background] hover:bg-hover-ui-secondary;\n    }\n\n    &[open] .bq-accordion__header--text {\n      @apply text-[--bq-accordion--filled-expanded-text-color];\n    }\n  }\n\n  &.ghost {\n    .bq-accordion__header {\n      @apply bg-[--bq-accordion--ghost-collapsed-background] hover:bg-hover-ui-secondary;\n    }\n\n    .bq-accordion__header--text {\n      @apply text-[--bq-accordion--ghost-collapsed-text-color];\n    }\n\n    .bq-accordion__content {\n      @apply border-[length:--bq-accordion--panel-ghost-border-width] border-[color:--bq-accordion--panel-ghost-border-color];\n\n      border-style: var(--bq-accordion--panel-ghost-border-style);\n    }\n\n    &[open] .bq-accordion__header {\n      @apply bg-[--bq-accordion--ghost-expanded-background] hover:bg-hover-ui-secondary;\n    }\n\n    &[open] .bq-accordion__header--text {\n      @apply text-[--bq-accordion--ghost-expanded-text-color];\n    }\n  }\n\n  &.small.filled .bq-accordion__content {\n    @apply pe-[--bq-accordion--panel-small-filled-padding-end] ps-[--bq-accordion--panel-small-filled-padding-start] p-b-[--bq-accordion--panel-small-filled-padding-y];\n  }\n\n  &.medium.filled .bq-accordion__content {\n    @apply pe-[--bq-accordion--panel-medium-filled-padding-end] ps-[--bq-accordion--panel-medium-filled-padding-start] p-b-[--bq-accordion--panel-medium-filled-padding-y];\n  }\n\n  &.small.ghost .bq-accordion__content {\n    @apply pe-[--bq-accordion--panel-small-ghost-padding-end] ps-[--bq-accordion--panel-small-ghost-padding-start] p-b-[--bq-accordion--panel-small-ghost-padding-y];\n  }\n\n  &.medium.ghost .bq-accordion__content {\n    @apply pe-[--bq-accordion--panel-medium-ghost-padding-end] ps-[--bq-accordion--panel-medium-ghost-padding-start] p-b-[--bq-accordion--panel-medium-ghost-padding-y];\n  }\n}\n\n.bq-accordion::details-content {\n  @apply block overflow-clip transition-all duration-300 ease-in-out bs-0 [transition-behavior:allow-discrete];\n}\n\n.bq-accordion[open]::details-content {\n  @apply bs-auto;\n}\n\n.bq-accordion__header {\n  // Since there's an overflow on the <summary> element, the focus outline is not visible,\n  // so we force it to be inset to avoid the overflow hidden.\n  --bq-ring-offset-width: -2px;\n\n  @apply flex cursor-pointer select-none list-none items-center transition-colors duration-300 ease-in-out focus-visible:focus;\n  @apply border-[length:--bq-accordion--collapsed-border-width] border-[color:--bq-accordion--collapsed-border-color];\n\n  border-style: var(--bq-accordion--collapsed-border-style);\n\n  &::marker,\n  &::-webkit-details-marker {\n    @apply hidden;\n  }\n}\n\n.bq-accordion__header--text {\n  @apply flex-1;\n}\n\n.bq-accordion__header--prefix,\n.bq-accordion__header--suffix {\n  @apply flex items-center justify-center;\n}\n","import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { ACCORDION_APPEARANCE, ACCORDION_SIZE } from './bq-accordion.types';\nimport type { TAccordionAppearance, TAccordionSize } from './bq-accordion.types';\nimport { Accordion } from './helper';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n/**\n * The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n *\n * @example How to use it\n * ```html\n * <bq-accordion appearance=\"filled\" size=\"medium\">\n *   <bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n *   <h3 slot=\"header\">Header</h3>\n *   <div>Lorem ipsum dolor...</div>\n * </bq-accordion>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/713eae-accordion\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {\"filled\" | \"ghost\"} [appearance=\"filled\"] - The appearance style of the Accordion\n * @attr {boolean} [disabled=false] - If true, the Accordion is disabled\n * @attr {boolean} [expanded=false] - If true, the Accordion is expanded\n * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.\n * @attr {boolean} [rotate=false] - If true, the Accordion expand icon is rotate 180deg when expanded\n * @attr {\"small\" | \"medium\"} [size=\"medium\"] - The size of the the Accordion\n *\n * @event bqOpen - Handler to be called when the accordion is opened\n * @event bqAfterOpen - Handler to be called after the accordion is opened\n * @event bqClose - Handler to be called when the accordion is closed\n * @event bqAfterClose - Handler to be called after the accordion is closed\n * @event bqFocus - Handler to be called when the accordion gets focus\n * @event bqClick - Handler to be called when the accordion is clicked\n * @event bqBlur - Handler to be called when the accordion loses focus\n *\n * @slot - The accordion panel content\n * @slot collapse - The accordion collapse icon\n * @slot expand - The accordion expand icon\n * @slot header - The accordion header content\n * @slot prefix - The accordion prefix content (icon or avatar)\n * @slot suffix - The accordion suffix content (icon or avatar)\n *\n * @part base - The `<details>` that holds the accordion content\n * @part header - The `<summary>` that holds the accordion header content\n * @part panel - The `<div>` that holds the accordion panel content\n * @part prefix - The `<div>` that holds the accordion prefix content\n * @part suffix - The `<div>` that holds the accordion suffix content\n * @part text - The `<div>` that holds the accordion header text content\n *\n * @cssprop --bq-accordion--small-padding-y - Accordion small vertical padding\n * @cssprop --bq-accordion--small-padding-start - Accordion small start padding\n * @cssprop --bq-accordion--small-padding-end - Accordion small end padding\n * @cssprop --bq-accordion--small-padding-gap - Accordion small gap distance between suffix, title and prefix\n * @cssprop --bq-accordion--small-radius - Accordion small border radius\n *\n * @cssprop --bq-accordion--medium-padding-y - Accordion medium vertical padding\n * @cssprop --bq-accordion--medium-padding-start - Accordion medium start padding\n * @cssprop --bq-accordion--medium-padding-end - Accordion medium end padding\n * @cssprop --bq-accordion--medium-padding-gap - Accordion medium gap distance between suffix, title and prefix\n * @cssprop --bq-accordion--medium-radius - Accordion medium border radius\n *\n * @cssprop --bq-accordion--collapsed-border-color - Accordion collapsed border color\n * @cssprop --bq-accordion--collapsed-border-style - Accordion collapsed border style\n * @cssprop --bq-accordion--collapsed-border-width - Accordion collapsed border width\n *\n * @cssprop --bq-accordion--expanded-border-color - Accordion expanded border color\n * @cssprop --bq-accordion--expanded-border-style - Accordion expanded border style\n * @cssprop --bq-accordion--expanded-border-width - Accordion expanded border width\n *\n * @cssprop --bq-accordion--filled-collapsed-background - Accordion filled collapsed header background\n * @cssprop --bq-accordion--filled-collapsed-text-color - Accordion filled collapsed header text color\n * @cssprop --bq-accordion--filled-expanded-background - Accordion filled expanded header background\n * @cssprop --bq-accordion--filled-expanded-collapsed-hover - Accordion filled expanded header color on hover\n * @cssprop --bq-accordion--filled-expanded-text-color - Accordion filled expanded header text color\n *\n * @cssprop --bq-accordion--ghost-collapsed-background - Accordion ghost collapsed header background\n * @cssprop --bq-accordion--ghost-collapsed-text-color - Accordion ghost collapsed header text color\n * @cssprop --bq-accordion--ghost-expanded-background - Accordion ghost expanded header background\n * @cssprop --bq-accordion--ghost-expanded-collapsed-hover - Accordion ghost expanded header color on hover\n * @cssprop --bq-accordion--ghost-expanded-text-color - Accordion ghost expanded header text color\n *\n * @cssprop --bq-accordion--panel-filled-border-color - Accordion filled panel border color\n * @cssprop --bq-accordion--panel-filled-border-style - Accordion filled panel border style\n * @cssprop --bq-accordion--panel-filled-border-width - Accordion filled panel border width\n * @cssprop --bq-accordion--panel-small-filled-padding-y - Accordion small filled panel vertical padding\n * @cssprop --bq-accordion--panel-small-filled-padding-start - Accordion small filled panel start padding\n * @cssprop --bq-accordion--panel-small-filled-padding-end - Accordion small filled panel end padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-y - Accordion medium filled panel vertical padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-start - Accordion medium filled panel start padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-end - Accordion medium filled panel end padding\n *\n * @cssprop --bq-accordion--panel-ghost-border-color - Accordion ghost panel border color\n * @cssprop --bq-accordion--panel-ghost-border-style - Accordion ghost panel border style\n * @cssprop --bq-accordion--panel-ghost-border-width - Accordion ghost panel border width\n * @cssprop --bq-accordion--panel-small-ghost-padding-y - Accordion small ghost panel vertical padding\n * @cssprop --bq-accordion--panel-small-ghost-padding-start - Accordion small ghost panel start padding\n * @cssprop --bq-accordion--panel-small-ghost-padding-end - Accordion small ghost panel end padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-y - Accordion medium ghost panel vertical padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-start - Accordion medium ghost panel start padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-end - Accordion medium ghost panel end padding\n */\n@Component({\n  tag: 'bq-accordion',\n  styleUrl: './scss/bq-accordion.scss',\n  shadow: true,\n})\nexport class BqAccordion {\n  // Own Properties\n  // ====================\n\n  private accordion: Accordion;\n  private prefixElem: HTMLDivElement;\n  private suffixElem: HTMLDivElement;\n  private detailsElem: HTMLDetailsElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqAccordionElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style of the Accordion */\n  @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n  /** If true, the Accordion is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If true, the Accordion is expanded */\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n  /**\n   * Animation is set through JS when the browser does not support CSS calc-size()\n   * If true, the Accordion animation, will be disabled. No animation will be applied.\n   */\n  @Prop({ reflect: true }) noAnimation: boolean = false;\n\n  /** If true, the Accordion expand icon is rotate 180deg when expanded */\n  @Prop({ reflect: true }) rotate: boolean = false;\n\n  /** The size of the Accordion */\n  @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(ACCORDION_SIZE, 'medium', this.el, 'size');\n    validatePropValue(ACCORDION_APPEARANCE, 'filled', this.el, 'appearance');\n  }\n\n  @Watch('expanded')\n  handleExpandedChange() {\n    const event = this.expanded ? this.bqOpen.emit(this.el) : this.bqClose.emit(this.el);\n    if (event.defaultPrevented) {\n      this.expanded = !this.expanded;\n      return;\n    }\n\n    if (this.expanded) {\n      this.accordion?.open();\n    } else {\n      this.accordion?.close();\n    }\n    if (!this.isCssInterpolateSizeSupported) return;\n\n    // NOTE: This is a workaround to trigger the transitionEnd event\n    // when the open/close animation is handled via CSS instead of JS\n    setTimeout(() => {\n      this.el.dispatchEvent(new CustomEvent('accordionTransitionEnd', { bubbles: false, composed: true }));\n    }, 200);\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.disabled) return;\n\n    this.expanded = false;\n  }\n\n  @Watch('noAnimation')\n  handleJsAnimation() {\n    if (this.isCssInterpolateSizeSupported) return;\n\n    console.warn(\n      `[bq-accordion] animating to/from intrinsic sizing keywords (interpolate-size: allow-keywords) is not supported and animation will be set through JS.\n        For vertical layout, consider using the 'noAnimation' prop ('no-animation' attribute) to disable it`,\n    );\n    this.accordion = !this.noAnimation ? new Accordion(this.detailsElem) : null;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the accordion loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is opened */\n  @Event() bqOpen: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called after the accordion is opened */\n  @Event() bqAfterOpen: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is closed */\n  @Event() bqClose: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called after the accordion is closed */\n  @Event() bqAfterClose: EventEmitter<HTMLBqAccordionElement>;\n\n  /** Handler to be called when the accordion is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqAccordionElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleJsAnimation();\n    this.handleExpandedChange();\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('accordionTransitionEnd')\n  onAccordionTransitionEnd(event: CustomEvent) {\n    event.stopPropagation();\n    if (event.target !== this.el) return;\n\n    if (this.expanded) {\n      this.bqAfterOpen.emit(this.el);\n      return;\n    }\n\n    this.bqAfterClose.emit(this.el);\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = (event: MouseEvent) => {\n    event.preventDefault();\n\n    if (this.disabled) return;\n\n    this.bqClick.emit(this.el);\n    this.expanded = !this.expanded;\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private get open() {\n    return this.expanded && !this.disabled;\n  }\n\n  private get isCssInterpolateSizeSupported() {\n    return window.CSS?.supports('(interpolate-size: allow-keywords)');\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <details\n        class={{\n          [`bq-accordion overflow-hidden ${this.size} ${this.appearance}`]: true,\n          'no-animation': this.noAnimation,\n          disabled: this.disabled,\n        }}\n        ref={(detailsElem: HTMLDetailsElement) => (this.detailsElem = detailsElem)}\n        open={this.open}\n        part=\"base\"\n      >\n        <summary\n          id=\"bq-accordion__header\"\n          class=\"bq-accordion__header\"\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls=\"bq-accordion__content\"\n          tabindex={this.disabled ? -1 : 0}\n          role=\"button\"\n          part=\"header\"\n        >\n          <div\n            ref={(element) => (this.prefixElem = element)}\n            class={{ 'bq-accordion__header--prefix': true, '!hidden': !this.hasPrefix }}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </div>\n          <div class=\"bq-accordion__header--text\" part=\"text\">\n            <slot name=\"header\" />\n          </div>\n          <div\n            ref={(element) => (this.suffixElem = element)}\n            class={{ 'bq-accordion__header--suffix': true, '!hidden': !this.hasSuffix }}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </div>\n          <div\n            class={{\n              'flex items-center justify-center text-primary transition-transform duration-300 ease-in-out': true,\n              '!hidden': this.open && !this.rotate,\n              'rotate-180': this.rotate && this.open,\n            }}\n            aria-hidden=\"true\"\n          >\n            <slot name=\"expand\">\n              <bq-icon name=\"plus\" />\n            </slot>\n          </div>\n          <div\n            class={{\n              'flex items-center justify-center text-primary': true,\n              '!hidden': (!this.open && !this.rotate) || this.rotate,\n            }}\n            aria-hidden=\"true\"\n          >\n            <slot name=\"collapse\">\n              <bq-icon name=\"minus\" />\n            </slot>\n          </div>\n        </summary>\n        <div\n          class=\"bq-accordion__body overflow-hidden bg-ui-primary text-primary\"\n          aria-labelledby=\"bq-accordion__header\"\n          role=\"region\"\n          part=\"panel\"\n        >\n          <slot id=\"bq-accordion__content\" class=\"bq-accordion__content block\" />\n        </div>\n      </details>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}