@beeq/core 1.11.0-beta.1 → 1.11.0

package/dist/beeq/bq-option-list.bq-tag.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-option-list.bq-tag.entry.esm.js","sources":["../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx","../../packages/beeq/src/components/tag/bq-tag.types.ts","../../packages/beeq/src/components/tag/helper/index.ts","../../packages/beeq/src/components/tag/scss/bq-tag.scss?tag=bq-tag&encapsulation=shadow","../../packages/beeq/src/components/tag/bq-tag.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Option list styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-option-list.variables';\n\n:host {\n  @apply block;\n}\n","import { Component, Element, Event, h, Listen, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/**\n * The option list component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-list>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-list>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/story/components-option--default\n * @status stable\n *\n * @attr {string} aria-label - Aria label for the list.\n *\n * @slot - The option items\n *\n * @part base - The component's internal wrapper.\n *\n * @cssprop --bq-option-group--gapY-list - Option group gap between items Y axis\n */\n@Component({\n  tag: 'bq-option-list',\n  styleUrl: './scss/bq-option-list.scss',\n  shadow: true,\n})\nexport class BqOptionList {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqOptionListElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  /** Aria label for the list. */\n  @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when `bq-option` is selected (on click/enter press). */\n  @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.el.setAttribute('role', 'listbox');\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  @Listen('bqEnter', { passive: true })\n  onBqSelect(event: CustomEvent<HTMLElement>) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-option') || !isEventTargetChildOfElement(event, this.el)) return;\n\n    this.bqSelect.emit({ item, value: item.value });\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n        <slot />\n      </div>\n    );\n  }\n}\n","export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;\nexport type TTagSize = (typeof TAG_SIZE)[number];\n\nexport const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;\nexport type TTagColor = (typeof TAG_COLOR)[number];\n\nexport const TAG_VARIANT = ['outline', 'filled'] as const;\nexport type TTagVariant = (typeof TAG_VARIANT)[number];\n\nexport const TAG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TTagBorderRadius = (typeof TAG_BORDER_RADIUS)[number];\n","import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagColor, TTagSize, TTagVariant } from '../bq-tag.types';\n\n/**\n * Function to determine the icon size based on the provided tag size.\n *\n * @param {TTagSize} size - The size of the tag.\n * @returns {number} The corresponding icon size. If the provided size does not match any predefined sizes, the function returns the size for 'medium'.\n */\nexport const iconSize = (size: TTagSize): number => {\n  const xsmall = TAG_SIZE[0];\n  const small = TAG_SIZE[1];\n  const medium = TAG_SIZE[2];\n\n  const SIZE = {\n    [xsmall]: 16,\n    [small]: 20,\n    [medium]: 24,\n  };\n\n  return SIZE[size] || SIZE[medium];\n};\n\n/**\n * Function to determine the tag text color scheme for a given tag type.\n *\n * @param {TTagType} color - The color of the tag.\n * @returns {Object} An object containing the color scheme for the given tag type. If the provided type does not match any predefined types, the function returns the color scheme for 'default'.\n */\nexport const textColor = (color: TTagColor): Partial<{ [K in TTagVariant]: string }> => {\n  const typeError = TAG_COLOR[0];\n  const typeGray = TAG_COLOR[1];\n  const typeInfo = TAG_COLOR[2];\n  const typeSuccess = TAG_COLOR[3];\n  const typeWarning = TAG_COLOR[4];\n\n  const variantOutline = TAG_VARIANT[0];\n  const variantFilled = TAG_VARIANT[1];\n\n  const COLORS = {\n    [typeError]: {\n      [variantOutline]: 'text--danger',\n      [variantFilled]: 'text--alt',\n    },\n    [typeGray]: {\n      [variantOutline]: 'text--primary',\n      [variantFilled]: 'text--alt',\n    },\n    [typeInfo]: {\n      [variantOutline]: 'text--brand',\n      [variantFilled]: 'text--alt',\n    },\n    [typeSuccess]: {\n      [variantOutline]: 'text--success',\n      [variantFilled]: 'text--alt',\n    },\n    [typeWarning]: {\n      [variantOutline]: 'text--warning',\n      [variantFilled]: 'text--alt',\n    },\n  };\n\n  return COLORS[color];\n};\n","/* -------------------------------------------------------------------------- */\n/*                        Tag styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tag.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n:host([removable][hidden]) {\n  @apply hidden;\n}\n\n.bq-tag {\n  @apply box-border inline-flex select-none flex-row items-center justify-center bg-[--bq-tag--background-color];\n  @apply gap-[--bq-tag--medium-gap] font-medium leading-regular text-primary p-b-[--bq-tag--medium-padding-y] p-i-[--bq-tag--medium-padding-x];\n  @apply rounded-[--bq-tag--border-radius] border-[length:--bq-tag--border-width] border-[color:--bq-tag--border-color];\n  @apply transition-colors duration-300 ease-in-out;\n\n  border-style: var(--bq-tag--border-style);\n}\n\n/* ---------------------------------- Size ---------------------------------- */\n\n.bq-tag__xsmall,\n.bq-tag__small {\n  @apply gap-[--bq-tag--small-gap] p-b-[--bq-tag--small-padding-y] p-i-[--bq-tag--small-padding-x];\n\n  /* Apply predefined border radius only if the border property have NO VALUE */\n  &:not(.has-border) {\n    @apply rounded-[--bq-tag--small-border-radius];\n  }\n}\n\n/* --------------------------------- Action --------------------------------- */\n\n.bq-tag__default.is-clickable {\n  @apply cursor-pointer;\n  // Focus\n  @apply focus-visible:focus;\n  // Hover\n  @apply hover:enabled:bg-[color-mix(in_srgb,_var(--bq-tag--background-color),_var(--bq-hover)_20%)];\n  // Active/Selected\n  @apply [&.active]:text-alt [&.active]:[--bq-tag--background-color:--bq-ui--brand];\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:border-none disabled:opacity-60;\n}\n\n/* ------------------------------ Color styles ------------------------------ */\n\n.bq-tag__error {\n  &.bq-tag__filled {\n    @apply bg-ui-danger text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-danger-alt text-danger [--bq-tag--border-color:--bq-stroke--danger];\n  }\n}\n\n.bq-tag__gray {\n  &.bq-tag__filled {\n    @apply bg-ui-tertiary text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-primary text-primary [--bq-tag--border-color:--bq-stroke--tertiary];\n  }\n}\n\n.bq-tag__info {\n  &.bq-tag__filled {\n    @apply bg-ui-brand text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-brand-alt text-brand [--bq-tag--border-color:--bq-stroke--brand];\n  }\n}\n\n.bq-tag__success {\n  &.bq-tag__filled {\n    @apply bg-ui-success text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-success-alt text-success [--bq-tag--border-color:--bq-tag--border-success];\n  }\n}\n\n.bq-tag__warning {\n  &.bq-tag__filled {\n    @apply bg-ui-warning text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply border-warning bg-ui-warning-alt text-warning;\n  }\n}\n\n/* ------------------------------ Close button ------------------------------ */\n\n.bq-tag__close::part(button) {\n  @apply pointer-events-none border-0 bs-fit p-b-0 p-i-0;\n}\n\n/* --------------- Apply the right size to the bq-icon prefix --------------- */\n\n.bq-tag__prefix ::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-tag--icon-prefix-size) !important;\n}\n","import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { TAG_COLOR, TAG_SIZE, TAG_VARIANT } from './bq-tag.types';\nimport type { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';\nimport { iconSize, textColor } from './helper';\nimport { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * The Tag Component is a UI element used to label and categorize content within an application.\n * Tags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n *\n * @example How to use it\n * ```html\n * <bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/42f8c9-tag\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {string} border - The corner radius of the Tag (will override size's predefined border)\n * @attr {boolean} clickable - If `true`, the Tag can be clickable\n * @attr {\"error\" | \"gray\" | \"info\" | \"success\" | \"warning\"} color - The color style of the Tag\n * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)\n * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)\n * @attr {boolean} removable - If `true`, the Tag component can be removed\n * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)\n * @attr {\"xsmall\" | \"small\" | \"medium\"} size - The size of the Tag component\n * @attr {\"outline\" | \"filled\"} variant - The variant of Tag to apply on top of the variant\n *\n * @method hide - Method to be called to remove the tag component\n * @method show - Method to be called to show the tag component\n *\n * @event bqClose - Callback handler to be called when the tag is close/hidden\n * @event bqOpen - Callback handler to be called when the tag is not open/shown\n * @event bqBlur - Handler to be called when tag loses focus\n * @event bqClick - Handler to be called when tag is clicked\n * @event bqFocus - Handler to be called when tag is focused\n *\n * @slot prefix - The prefix slot to add an icon or any other content before the text\n * @slot - The text content of the tag\n *\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.\n * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n * @part text - The `<div>` element containing the text of the tag component.\n * @part btn-close - The close button element to remove the tag component.\n *\n * @cssprop --bq-tag--background-color - Tag background color\n * @cssprop --bq-tag--border-color - Tag border color\n * @cssprop --bq-tag--border-radius - Tag border radius\n * @cssprop --bq-tag--border-style - Tag border style\n * @cssprop --bq-tag--border-width - Tag border width\n * @cssprop --bq-tag--small-border-radius - Tag small border radius\n * @cssprop --bq-tag--small-gap - Tag small gap between content\n * @cssprop --bq-tag--small-padding-x - Tag small padding horizontal\n * @cssprop --bq-tag--small-padding-y - Tag small padding vertical\n * @cssprop --bq-tag--medium-gap - Tag medium gap between content\n * @cssprop --bq-tag--medium-padding-x - Tag medium padding horizontal\n * @cssprop --bq-tag--medium-padding-y - Tag medium padding vertical\n */\n@Component({\n  tag: 'bq-tag',\n  styleUrl: './scss/bq-tag.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTag {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTagElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The corner radius of the Tag (will override size's predefined border) */\n  @Prop({ reflect: true }) border: TTagBorderRadius;\n\n  /** If true, the Tag can be clickable */\n  @Prop({ reflect: true }) clickable: boolean = false;\n\n  /** The color style of the Tag */\n  @Prop({ reflect: true }) color: TTagColor;\n\n  /** If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** If true, the Tag component will hidden (only if removable = `true`) */\n  @Prop({ reflect: true, mutable: true }) hidden: boolean;\n\n  /** If true, the Tag component can be removed */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** If true, the Tag is selected (only if clickable = `true`) */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /** The size of the Tag component */\n  @Prop({ reflect: true }) size: TTagSize = 'medium';\n\n  /** The variant of Tag to apply on top of the variant */\n  @Prop({ reflect: true }) variant: TTagVariant = 'filled';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(TAG_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAG_VARIANT, 'filled', this.el, 'variant');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the tag is close/hidden  */\n  @Event() bqClose: EventEmitter;\n\n  /** Callback handler to be called when the tag is not open/shown */\n  @Event() bqOpen: EventEmitter;\n\n  /** Handler to be called when tag loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTagElement>;\n\n  /** Handler to be called when tag is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqTagElement>;\n\n  /** Handler to be called when tag is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqTagElement>;\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  /** Method to be called to remove the tag component */\n  @Method()\n  async hide(): Promise<void> {\n    this.handleHide();\n  }\n\n  /** Method to be called to show the tag component */\n  @Method()\n  async show(): Promise<void> {\n    this.handleShow();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleHide = () => {\n    if (!this.isRemovable) return;\n\n    const ev = this.bqClose.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  private handleShow = () => {\n    if (!this.isRemovable) return;\n\n    const ev = this.bqOpen.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  private handleClick = () => {\n    // If the tag is not clickable or the tag is disabled, we don't want to handle the click\n    if (!this.isClickable || this.disabled) return;\n\n    // Emit a click event on the element\n    const ev = this.bqClick.emit(this.el);\n    // If the event was not prevented, toggle the clickable state\n    if (!ev.defaultPrevented) {\n      this.selected = !this.selected;\n    }\n  };\n\n  private handleBlur = () => {\n    if (!this.isClickable) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (!this.isClickable) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n  };\n\n  private get isClickable(): boolean {\n    return this.clickable && !this.color && !this.hasCustomColor && !this.removable;\n  }\n\n  private get isRemovable(): boolean {\n    return this.removable && !this.isClickable;\n  }\n\n  private get isHidden(): boolean {\n    return this.isRemovable && this.hidden;\n  }\n\n  private get hasCustomColor(): boolean {\n    return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,\n      ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),\n      ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),\n      ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--alt)` }),\n    };\n\n    return (\n      <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>\n        <button\n          class={{\n            [`bq-tag bq-tag__${this.size}`]: true,\n            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,\n            'is-clickable': this.isClickable,\n            'is-removable': this.removable,\n            // Active/Selected state when clickable\n            active: this.isClickable && this.selected,\n            // Fixed border radius\n            'has-border': !!this.border,\n          }}\n          disabled={this.disabled}\n          onBlur={this.handleBlur}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          tabindex={this.isClickable ? 0 : -1}\n          part=\"wrapper\"\n        >\n          <span\n            class={{ 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <div\n            class={{\n              'text-xs': this.size === 'xsmall',\n              'text-s': this.size === 'small',\n              'text-m': this.size === 'medium',\n            }}\n            part=\"text\"\n          >\n            <slot />\n          </div>\n          {this.isRemovable && !this.disabled && (\n            <bq-button class=\"bq-tag__close\" appearance=\"text\" size=\"small\" onClick={this.handleHide} part=\"btn-close\">\n              <bq-icon\n                size={iconSize(this.size)}\n                name=\"x-circle\"\n                color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}\n              />\n            </bq-button>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bq-option-list.bq-tag.entry.esm.js","sources":["../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx","../../packages/beeq/src/components/tag/bq-tag.types.ts","../../packages/beeq/src/components/tag/helper/index.ts","../../packages/beeq/src/components/tag/scss/bq-tag.scss?tag=bq-tag&encapsulation=shadow","../../packages/beeq/src/components/tag/bq-tag.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Option list styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-option-list.variables';\n\n:host {\n  @apply block;\n}\n","import { Component, Element, Event, h, Listen, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/**\n * The option list component is a container for multiple option elements.\n * It allows to manage the appearance and size of all options at once.\n *\n * @example How to use it\n * ```html\n * <bq-option-list>\n *   <bq-option value=\"football\">Football</bq-option>\n *   <bq-option value=\"basketball\">Basketball</bq-option>\n *   <bq-option value=\"tennis\">Tennis</bq-option>\n * </bq-option-list>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/story/components-option--default\n * @status stable\n *\n * @attr {string} aria-label - Aria label for the list.\n *\n * @slot - The option items\n *\n * @part base - The component's internal wrapper.\n *\n * @cssprop --bq-option-group--gapY-list - Option group gap between items Y axis\n */\n@Component({\n  tag: 'bq-option-list',\n  styleUrl: './scss/bq-option-list.scss',\n  shadow: true,\n})\nexport class BqOptionList {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqOptionListElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  /** Aria label for the list. */\n  @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when `bq-option` is selected (on click/enter press). */\n  @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.el.setAttribute('role', 'listbox');\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  @Listen('bqEnter', { passive: true })\n  onBqSelect(event: CustomEvent<HTMLElement>) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-option') || !isEventTargetChildOfElement(event, this.el)) return;\n\n    this.bqSelect.emit({ item, value: item.value });\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n        <slot />\n      </div>\n    );\n  }\n}\n","export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;\nexport type TTagSize = (typeof TAG_SIZE)[number];\n\nexport const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;\nexport type TTagColor = (typeof TAG_COLOR)[number];\n\nexport const TAG_VARIANT = ['outline', 'filled'] as const;\nexport type TTagVariant = (typeof TAG_VARIANT)[number];\n\nexport const TAG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TTagBorderRadius = (typeof TAG_BORDER_RADIUS)[number];\n","import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagColor, TTagSize, TTagVariant } from '../bq-tag.types';\n\n/**\n * Function to determine the icon size based on the provided tag size.\n *\n * @param {TTagSize} size - The size of the tag.\n * @returns {number} The corresponding icon size. If the provided size does not match any predefined sizes, the function returns the size for 'medium'.\n */\nexport const iconSize = (size: TTagSize): number => {\n  const xsmall = TAG_SIZE[0];\n  const small = TAG_SIZE[1];\n  const medium = TAG_SIZE[2];\n\n  const SIZE = {\n    [xsmall]: 16,\n    [small]: 20,\n    [medium]: 24,\n  };\n\n  return SIZE[size] || SIZE[medium];\n};\n\n/**\n * Function to determine the tag text color scheme for a given tag type.\n *\n * @param {TTagType} color - The color of the tag.\n * @returns {Object} An object containing the color scheme for the given tag type. If the provided type does not match any predefined types, the function returns the color scheme for 'default'.\n */\nexport const textColor = (color: TTagColor): Partial<{ [K in TTagVariant]: string }> => {\n  const typeError = TAG_COLOR[0];\n  const typeGray = TAG_COLOR[1];\n  const typeInfo = TAG_COLOR[2];\n  const typeSuccess = TAG_COLOR[3];\n  const typeWarning = TAG_COLOR[4];\n\n  const variantOutline = TAG_VARIANT[0];\n  const variantFilled = TAG_VARIANT[1];\n\n  const COLORS = {\n    [typeError]: {\n      [variantOutline]: 'text--danger',\n      [variantFilled]: 'text--alt',\n    },\n    [typeGray]: {\n      [variantOutline]: 'text--primary',\n      [variantFilled]: 'text--alt',\n    },\n    [typeInfo]: {\n      [variantOutline]: 'text--brand',\n      [variantFilled]: 'text--alt',\n    },\n    [typeSuccess]: {\n      [variantOutline]: 'text--success',\n      [variantFilled]: 'text--alt',\n    },\n    [typeWarning]: {\n      [variantOutline]: 'text--warning',\n      [variantFilled]: 'text--alt',\n    },\n  };\n\n  return COLORS[color];\n};\n","/* -------------------------------------------------------------------------- */\n/*                        Tag styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tag.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n:host([removable][hidden]) {\n  @apply hidden;\n}\n\n.bq-tag {\n  @apply box-border inline-flex select-none flex-row items-center justify-center bg-[--bq-tag--background-color];\n  @apply gap-[--bq-tag--medium-gap] font-medium leading-regular text-primary p-b-[--bq-tag--medium-padding-y] p-i-[--bq-tag--medium-padding-x];\n  @apply rounded-[--bq-tag--border-radius] border-[length:--bq-tag--border-width] border-[color:--bq-tag--border-color];\n  @apply transition-colors duration-300 ease-in-out;\n\n  border-style: var(--bq-tag--border-style);\n}\n\n/* ---------------------------------- Size ---------------------------------- */\n\n.bq-tag__xsmall,\n.bq-tag__small {\n  @apply gap-[--bq-tag--small-gap] p-b-[--bq-tag--small-padding-y] p-i-[--bq-tag--small-padding-x];\n\n  /* Apply predefined border radius only if the border property have NO VALUE */\n  &:not(.has-border) {\n    @apply rounded-[--bq-tag--small-border-radius];\n  }\n}\n\n/* --------------------------------- Action --------------------------------- */\n\n.bq-tag__default.is-clickable {\n  @apply cursor-pointer;\n  // Focus\n  @apply focus-visible:focus;\n  // Hover\n  @apply hover:enabled:bg-[color-mix(in_srgb,_var(--bq-tag--background-color),_var(--bq-hover)_20%)];\n  // Active/Selected\n  @apply [&.active]:text-alt [&.active]:[--bq-tag--background-color:--bq-ui--brand];\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:border-none disabled:opacity-60;\n}\n\n/* ------------------------------ Color styles ------------------------------ */\n\n.bq-tag__error {\n  &.bq-tag__filled {\n    @apply bg-ui-danger text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-danger-alt text-danger [--bq-tag--border-color:--bq-stroke--danger];\n  }\n}\n\n.bq-tag__gray {\n  &.bq-tag__filled {\n    @apply bg-ui-tertiary text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-primary text-primary [--bq-tag--border-color:--bq-stroke--tertiary];\n  }\n}\n\n.bq-tag__info {\n  &.bq-tag__filled {\n    @apply bg-ui-brand text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-brand-alt text-brand [--bq-tag--border-color:--bq-stroke--brand];\n  }\n}\n\n.bq-tag__success {\n  &.bq-tag__filled {\n    @apply bg-ui-success text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply bg-ui-success-alt text-success [--bq-tag--border-color:--bq-tag--border-success];\n  }\n}\n\n.bq-tag__warning {\n  &.bq-tag__filled {\n    @apply bg-ui-warning text-alt;\n  }\n\n  &.bq-tag__outline {\n    @apply border-warning bg-ui-warning-alt text-warning;\n  }\n}\n\n/* ------------------------------ Close button ------------------------------ */\n\n.bq-tag__close::part(button) {\n  @apply pointer-events-none border-0 bs-fit p-b-0 p-i-0;\n}\n\n/* --------------- Apply the right size to the bq-icon prefix --------------- */\n\n.bq-tag__prefix ::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-tag--icon-prefix-size) !important;\n}\n","import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { TAG_COLOR, TAG_SIZE, TAG_VARIANT } from './bq-tag.types';\nimport type { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';\nimport { iconSize, textColor } from './helper';\nimport { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * The Tag Component is a UI element used to label and categorize content within an application.\n * Tags are commonly used to label items with keywords or categories, making it easier to find and organize content.\n *\n * @example How to use it\n * ```html\n * <bq-tag color=\"success\" size=\"medium\" variant=\"filled\">Success</bq-tag>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/42f8c9-tag\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n *\n * @attr {string} border - The corner radius of the Tag (will override size's predefined border)\n * @attr {boolean} clickable - If `true`, the Tag can be clickable\n * @attr {\"error\" | \"gray\" | \"info\" | \"success\" | \"warning\"} color - The color style of the Tag\n * @attr {boolean} disabled - If `true`, the Tag will be disabled (only if clickable = `true`, no interaction allowed)\n * @attr {boolean} hidden - If `true`, the Tag component will hidden (only if removable = `true`)\n * @attr {boolean} removable - If `true`, the Tag component can be removed\n * @attr {boolean} selected - If `true`, the Tag is selected (only if clickable = `true`)\n * @attr {\"xsmall\" | \"small\" | \"medium\"} size - The size of the Tag component\n * @attr {\"outline\" | \"filled\"} variant - The variant of Tag to apply on top of the variant\n *\n * @method hide - Method to be called to remove the tag component\n * @method show - Method to be called to show the tag component\n *\n * @event bqClose - Callback handler to be called when the tag is close/hidden\n * @event bqOpen - Callback handler to be called when the tag is not open/shown\n * @event bqBlur - Handler to be called when tag loses focus\n * @event bqClick - Handler to be called when tag is clicked\n * @event bqFocus - Handler to be called when tag is focused\n *\n * @slot prefix - The prefix slot to add an icon or any other content before the text\n * @slot - The text content of the tag\n *\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.\n * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n * @part text - The `<div>` element containing the text of the tag component.\n * @part btn-close - The close button element to remove the tag component.\n *\n * @cssprop --bq-tag--background-color - Tag background color\n * @cssprop --bq-tag--border-color - Tag border color\n * @cssprop --bq-tag--border-radius - Tag border radius\n * @cssprop --bq-tag--border-style - Tag border style\n * @cssprop --bq-tag--border-width - Tag border width\n * @cssprop --bq-tag--small-border-radius - Tag small border radius\n * @cssprop --bq-tag--small-gap - Tag small gap between content\n * @cssprop --bq-tag--small-padding-x - Tag small padding horizontal\n * @cssprop --bq-tag--small-padding-y - Tag small padding vertical\n * @cssprop --bq-tag--medium-gap - Tag medium gap between content\n * @cssprop --bq-tag--medium-padding-x - Tag medium padding horizontal\n * @cssprop --bq-tag--medium-padding-y - Tag medium padding vertical\n */\n@Component({\n  tag: 'bq-tag',\n  styleUrl: './scss/bq-tag.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTag {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTagElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The corner radius of the Tag (will override size's predefined border) */\n  @Prop({ reflect: true }) border: TTagBorderRadius;\n\n  /** If true, the Tag can be clickable */\n  @Prop({ reflect: true }) clickable: boolean = false;\n\n  /** The color style of the Tag */\n  @Prop({ reflect: true }) color: TTagColor;\n\n  /** If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** If true, the Tag component will hidden (only if removable = `true`) */\n  @Prop({ reflect: true, mutable: true }) hidden: boolean;\n\n  /** If true, the Tag component can be removed */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** If true, the Tag is selected (only if clickable = `true`) */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /** The size of the Tag component */\n  @Prop({ reflect: true }) size: TTagSize = 'medium';\n\n  /** The variant of Tag to apply on top of the variant */\n  @Prop({ reflect: true }) variant: TTagVariant = 'filled';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(TAG_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAG_VARIANT, 'filled', this.el, 'variant');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the tag is close/hidden  */\n  @Event() bqClose: EventEmitter;\n\n  /** Callback handler to be called when the tag is not open/shown */\n  @Event() bqOpen: EventEmitter;\n\n  /** Handler to be called when tag loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTagElement>;\n\n  /** Handler to be called when tag is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqTagElement>;\n\n  /** Handler to be called when tag is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqTagElement>;\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  /** Method to be called to remove the tag component */\n  @Method()\n  async hide(): Promise<void> {\n    this.handleHide();\n  }\n\n  /** Method to be called to show the tag component */\n  @Method()\n  async show(): Promise<void> {\n    this.handleShow();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleHide = () => {\n    if (!this.isRemovable) return;\n\n    const ev = this.bqClose.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  private handleShow = () => {\n    if (!this.isRemovable) return;\n\n    const ev = this.bqOpen.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  private handleClick = () => {\n    // If the tag is not clickable or the tag is disabled, we don't want to handle the click\n    if (!this.isClickable || this.disabled) return;\n\n    // Emit a click event on the element\n    const ev = this.bqClick.emit(this.el);\n    // If the event was not prevented, toggle the clickable state\n    if (!ev.defaultPrevented) {\n      this.selected = !this.selected;\n    }\n  };\n\n  private handleBlur = () => {\n    if (!this.isClickable) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (!this.isClickable) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n  };\n\n  private get isClickable(): boolean {\n    return this.clickable && !this.color && !this.hasCustomColor && !this.removable;\n  }\n\n  private get isRemovable(): boolean {\n    return this.removable && !this.isClickable;\n  }\n\n  private get isHidden(): boolean {\n    return this.isRemovable && this.hidden;\n  }\n\n  private get hasCustomColor(): boolean {\n    return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,\n      ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),\n      ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),\n      ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--alt)` }),\n    };\n\n    return (\n      <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>\n        <button\n          class={{\n            [`bq-tag bq-tag__${this.size}`]: true,\n            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,\n            'is-clickable': this.isClickable,\n            'is-removable': this.removable,\n            // Active/Selected state when clickable\n            active: this.isClickable && this.selected,\n            // Fixed border radius\n            'has-border': !!this.border,\n          }}\n          disabled={this.disabled}\n          onBlur={this.handleBlur}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          tabindex={this.isClickable ? 0 : -1}\n          part=\"wrapper\"\n        >\n          <span\n            class={{ 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <div\n            class={{\n              'text-xs': this.size === 'xsmall',\n              'text-s': this.size === 'small',\n              'text-m': this.size === 'medium',\n            }}\n            part=\"text\"\n          >\n            <slot />\n          </div>\n          {this.isRemovable && !this.disabled && (\n            <bq-button class=\"bq-tag__close\" appearance=\"text\" size=\"small\" onClick={this.handleHide} part=\"btn-close\">\n              <bq-icon\n                size={iconSize(this.size)}\n                name=\"x-circle\"\n                color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}\n              />\n            </bq-button>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/beeq/bq-page-title.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-page-title.entry.esm.js","sources":["../../packages/beeq/src/components/page-title/scss/bq-page-title.scss?tag=bq-page-title&encapsulation=shadow","../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                        Page title styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-page-title.variables';\n\n:host {\n  @apply block;\n}\n","import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/**\n * The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n *\n * @example How to use it\n * ```html\n * <bq-page-title>\n *   <bq-button appearance=\"link\" slot=\"back\">\n *     <bq-icon\n *       color=\"text--primary\"\n *       name=\"arrow-left\"\n *       weight=\"bold\"\n *       role=\"img\"\n *       title=\"Navigate back to the previous page\"\n *     ></bq-icon>\n *   </bq-button>\n *   Title\n *   <div slot=\"sub-title\">Sub-title</div>\n * </bq-page-title>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/docs/components-page-title--overview\n * @status stable\n *\n * @slot back - The back navigation button.\n * @slot - The main title content.\n * @slot sub-title - The sub-title content.\n * @slot suffix - The suffix content.\n *\n * @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n *\n * @cssprop --paddingY - Padding top and bottom of the page title wrapper\n * @cssprop --subtitle-borderBlockEnd - Page title border end color\n * @cssprop --subtitle-fontWeight - Page title font weight for subtitle\n * @cssprop --subtitle-textColor - Page title color for sub-title\n * @cssprop --subtitle-textSize - Page title text size for subtitle\n * @cssprop --title-fontWeight - Page title font weight for title\n * @cssprop --title-lineHeight - Page title text line height\n * @cssprop --title-textColor - Page title color for title\n * @cssprop --title-textSize - Page title text size for title\n */\n@Component({\n  tag: 'bq-page-title',\n  styleUrl: './scss/bq-page-title.scss',\n  shadow: true,\n})\nexport class BqPageTitle {\n  // Own Properties\n  // ====================\n\n  private backNavigationElem: HTMLElement;\n  private suffixElem: HTMLElement;\n  private subTitleElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPageTitleElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private haveBackNavigation = false;\n  @State() private hasSuffix = false;\n  @State() private hasSubTitle = false;\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n    this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n        {/* Back navigation button */}\n        <div\n          class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n          ref={(divElem) => (this.backNavigationElem = divElem)}\n          part=\"back\"\n        >\n          <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n        </div>\n        <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n          <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n            {/* Title */}\n            <h1\n              class=\"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]\"\n              part=\"title\"\n            >\n              <slot />\n            </h1>\n            {/* Suffix */}\n            <div\n              class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n              ref={(divElem) => (this.suffixElem = divElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n            </div>\n          </div>\n          {/* Sub-title */}\n          <div\n            class={{\n              'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]': true,\n              hidden: !this.hasSubTitle,\n            }}\n            ref={(divElem) => (this.subTitleElem = divElem)}\n            part=\"sub-title\"\n          >\n            <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,+roBAA+roB;;MCuDzsoB,WAAW,GAAA,MAAA;;;;;;AAId,IAAA,kBAAkB;AAClB,IAAA,UAAU;AACV,IAAA,YAAY;;;;;IAWH,kBAAkB,GAAG,KAAK;IAC1B,SAAS,GAAG,KAAK;IACjB,WAAW,GAAG,KAAK;;;;;;;;;;;IAgBpC,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;;;;;IAkBjB,gBAAgB,GAAG,MAAK;QAC9B,IAAI,CAAC,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;QACzE,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;QAC1D,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;AACnE,KAAC;;;;IAMD,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAC,2EAA2E,EAAC,IAAI,EAAC,MAAM,EAAA,EAEhG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC1D,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,EACrD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,EAAA,EACxD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,cAAc,EAAA,EAEvD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iIAAiI,EACvI,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,EAEL,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACpF,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CACvD,CACF,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0IAA0I,EAAE,IAAI;AAChJ,gBAAA,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW;aAC1B,EACD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAC/C,IAAI,EAAC,WAAW,EAAA,EAEhB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CAC1D,CACF,CACF;;;;;;;"}
+{"version":3,"file":"bq-page-title.entry.esm.js","sources":["../../packages/beeq/src/components/page-title/scss/bq-page-title.scss?tag=bq-page-title&encapsulation=shadow","../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                        Page title styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-page-title.variables';\n\n:host {\n  @apply block;\n}\n","import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/**\n * The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n *\n * @example How to use it\n * ```html\n * <bq-page-title>\n *   <bq-button appearance=\"link\" slot=\"back\">\n *     <bq-icon\n *       color=\"text--primary\"\n *       name=\"arrow-left\"\n *       weight=\"bold\"\n *       role=\"img\"\n *       title=\"Navigate back to the previous page\"\n *     ></bq-icon>\n *   </bq-button>\n *   Title\n *   <div slot=\"sub-title\">Sub-title</div>\n * </bq-page-title>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/docs/components-page-title--overview\n * @status stable\n *\n * @slot back - The back navigation button.\n * @slot - The main title content.\n * @slot sub-title - The sub-title content.\n * @slot suffix - The suffix content.\n *\n * @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n *\n * @cssprop --paddingY - Padding top and bottom of the page title wrapper\n * @cssprop --subtitle-borderBlockEnd - Page title border end color\n * @cssprop --subtitle-fontWeight - Page title font weight for subtitle\n * @cssprop --subtitle-textColor - Page title color for sub-title\n * @cssprop --subtitle-textSize - Page title text size for subtitle\n * @cssprop --title-fontWeight - Page title font weight for title\n * @cssprop --title-lineHeight - Page title text line height\n * @cssprop --title-textColor - Page title color for title\n * @cssprop --title-textSize - Page title text size for title\n */\n@Component({\n  tag: 'bq-page-title',\n  styleUrl: './scss/bq-page-title.scss',\n  shadow: true,\n})\nexport class BqPageTitle {\n  // Own Properties\n  // ====================\n\n  private backNavigationElem: HTMLElement;\n  private suffixElem: HTMLElement;\n  private subTitleElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPageTitleElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private haveBackNavigation = false;\n  @State() private hasSuffix = false;\n  @State() private hasSubTitle = false;\n\n  // Public Property API\n  // ========================\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n    this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n        {/* Back navigation button */}\n        <div\n          class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n          ref={(divElem) => (this.backNavigationElem = divElem)}\n          part=\"back\"\n        >\n          <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n        </div>\n        <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n          <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n            {/* Title */}\n            <h1\n              class=\"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]\"\n              part=\"title\"\n            >\n              <slot />\n            </h1>\n            {/* Suffix */}\n            <div\n              class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n              ref={(divElem) => (this.suffixElem = divElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n            </div>\n          </div>\n          {/* Sub-title */}\n          <div\n            class={{\n              'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]': true,\n              hidden: !this.hasSubTitle,\n            }}\n            ref={(divElem) => (this.subTitleElem = divElem)}\n            part=\"sub-title\"\n          >\n            <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,o+oBAAo+oB;;MCuD9+oB,WAAW,GAAA,MAAA;;;;;;AAId,IAAA,kBAAkB;AAClB,IAAA,UAAU;AACV,IAAA,YAAY;;;;;IAWH,kBAAkB,GAAG,KAAK;IAC1B,SAAS,GAAG,KAAK;IACjB,WAAW,GAAG,KAAK;;;;;;;;;;;IAgBpC,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;;;;;IAkBjB,gBAAgB,GAAG,MAAK;QAC9B,IAAI,CAAC,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;QACzE,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;QAC1D,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;AACnE,KAAC;;;;IAMD,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAC,2EAA2E,EAAC,IAAI,EAAC,MAAM,EAAA,EAEhG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC1D,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,EACrD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,EAAA,EACxD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,cAAc,EAAA,EAEvD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iIAAiI,EACvI,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,EAEL,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACpF,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CACvD,CACF,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0IAA0I,EAAE,IAAI;AAChJ,gBAAA,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW;aAC1B,EACD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAC/C,IAAI,EAAC,WAAW,EAAA,EAEhB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CAC1D,CACF,CACF;;;;;;;"}

package/dist/beeq/bq-progress.entry.esm.js.map

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

package/dist/beeq/bq-select.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-select.entry.esm.js","sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Select styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-select.variables';\n\n:host {\n  @apply block w-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__label {\n  @apply flex items-center m-be-[--bq-select--label-margin-bottom];\n  @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n  @apply text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color] m-bs-[--bq-select--helper-margin-top];\n}\n\n.bq-select__helper-text.validation-error {\n  @apply text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n  @apply text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n  @apply text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Select input group control                         */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n  // The focus state will be controlled by the dropdown element\n  // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n  .bq-select__control {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n    @apply focus border-[color:--bq-select--border-color-focus];\n  }\n}\n\n.bq-select__control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n  // Padding\n  @apply pe-[--bq-select--padding-end] ps-[--bq-select--padding-start] p-b-[var(--bq-select--paddingY)];\n  // Text\n  @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-select--border-style);\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-select__control--clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-select__control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-select__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-select__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-select__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-select__control--input {\n  @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply m-0 border-none p-0 min-bs-[var(--bq-select--icon-size)] min-is-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__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 p-0 bs-auto;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n  @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n  @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n  @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n.bq-select__tags {\n  @apply me-xs2 flex flex-1 gap-xs2;\n\n  bq-tag,\n  ::slotted(bq-tag) {\n    @apply inline-flex;\n  }\n\n  bq-tag::part(text) {\n    @apply text-nowrap leading-small;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport {\n  debounce,\n  hasSlotContent,\n  isDefined,\n  isHTMLElement,\n  isNil,\n  stringToArray,\n  TDebounce,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string | string[];\n\n/**\n * The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.\n *\n * @example How to use it\n * ```html\n * <bq-select placeholder=\"Placeholder\">\n *   <label slot=\"label\">Select label</label>\n *   <span slot=\"helper-text\">\n *     <bq-icon name=\"star\"></bq-icon>\n *       Helper text\n *   </span>\n *\n *   <bq-option value=\"1\">Option 1</bq-option>\n *   <bq-option value=\"2\">Option 2</bq-option>\n *   <bq-option value=\"3\">Option 3</bq-option>\n * </bq-select>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/41989d-select/b/09d7b1\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n * @dependency bq-option-list\n * @dependency bq-tag\n *\n * @attr {boolean} autofocus - If `true`, the Select input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.\n * @attr {string} form - The ID of the form that Select input field belongs to.\n * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.\n * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.\n * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.\n * @attr {string} name - The Select input name.\n * @attr {boolean} open - If `true`, the Select panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Select panel.\n * @attr {string} placeholder - The Select input placeholder text value.\n * @attr {\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"} placement - Position of the Select panel.\n * @attr {boolean} readonly - If `true`, the Select input cannot be modified.\n * @attr {boolean} required - Indicates whether or not the Select input is required to be filled out before submitting the form.\n * @attr {boolean} same-width - Whether the panel should have the Select same width as the input element.\n * @attr {number} skidding - Represents the skidding between the Select panel and the input element.\n * @attr {\"absolute\" | \"fixed\"} strategy - Defines the strategy to position the Select panel.\n * @attr {\"error\" | \"success\" | \"warning\" | \"none\"} validation-status - The validation status of the Select input.\n * @attr {\"number\" | \"string\" | \"string[]\"} value - The select input value can be used to reset the field to a previous value.\n *\n * @method clear - Method to be called to clear the selected value.\n *\n * @event bqBlur - The callback handler is emitted when the Select input loses focus.\n * @event bqClear - The callback handler is emitted when the selected value has been cleared.\n * @event bqFocus - A callback handler is emitted when the Select input has received focus.\n * @event bqSelect - The callback handler is emitted when the selected value has changed.\n *\n * @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot tags - The tags slot container.\n * @slot clear-icon - The clear icon slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\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 clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n *\n * @cssprop --bq-select--background-color - Select background color\n * @cssprop --bq-select--border-color - Select border color\n * @cssprop --bq-select--border-color-focus - Select border color on focus\n * @cssprop --bq-select--border-color-disabled - Select border color when disabled\n * @cssprop --bq-select--border-radius - Select border radius\n * @cssprop --bq-select--border-width - Select border width\n * @cssprop --bq-select--border-style - Select border style\n * @cssprop --bq-select--gap - Gap between Select content and prefix/suffix\n * @cssprop --bq-select--helper-margin-top - Helper text margin top\n * @cssprop --bq-select--helper-text-color - Helper text color\n * @cssprop --bq-select--helper-text-size - Helper text size\n * @cssprop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-select--label-margin-bottom - Select label margin bottom\n * @cssprop --bq-select--label-text-color - Select label text color\n * @cssprop --bq-select--label-text-size - Select label text size\n * @cssprop --bq-select--padding-start - Select padding start\n * @cssprop --bq-select--padding-end - Select padding end\n * @cssprop --bq-select--paddingY - Select padding top and bottom\n * @cssprop --bq-select--text-color - Select text color\n * @cssprop --bq-select--text-size - Select text size\n * @cssprop --bq-select--text-placeholder-color - Select placeholder text color\n */\n@Component({\n  tag: 'bq-select',\n  styleUrl: './scss/bq-select.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSelect {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceQuery: TDebounce<void>;\n  private debounceInput: TDebounce<void>;\n\n  private fallbackInputId = 'select';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSelectElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() displayValue?: string;\n  @State() hasHelperText = false;\n  @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the Select 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  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If true, the Select panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /**\n   * Indicates whether the Select input is disabled or not.\n   * If `true`, the Select is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** Represents the distance (gutter or margin) between the Select panel and the input element. */\n  @Prop({ reflect: true }) distance?: number = 8;\n\n  /** The ID of the form that the Select input belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** If true, the Select panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** The Select input name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The maximum number of tags to display when multiple selection is enabled */\n  @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n  /** If true, the Select input will allow multiple selections. */\n  @Prop({ reflect: true }) multiple?: boolean = false;\n\n  /** If true, the Select panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the Select panel. */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** The Select input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** Position of the Select panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom';\n\n  /** If true, the list of options cannot be filtered (searching won't be available) */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the Select input is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** Whether the panel should have the Select same width as the input element */\n  @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n  /**  Represents the skidding between the Select panel and the input element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the Select panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\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, it can be used to reset the field to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    // Early return for undefined/null values\n    if (isNil(this.value)) {\n      this.value = this.multiple ? [] : '';\n      this.internals.setFormValue(undefined);\n      this.syncItemsFromValue();\n      return;\n    }\n\n    // Handle multiple selection mode\n    if (this.multiple) {\n      this.value = stringToArray(this.value);\n      this.internals.setFormValue(this.value.join(','));\n      this.syncItemsFromValue();\n\n      return;\n    }\n\n    // Handle single selection mode\n    this.value = String(this.value);\n    this.internals.setFormValue(this.value);\n    this.syncItemsFromValue();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the Select input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the selected value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the Select input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the selected value has changed */\n  @Event() bqSelect!: EventEmitter<{ value: string | number | string[]; item: HTMLBqOptionElement }>;\n\n  /** Callback handler emitted when the Select input changes its value while typing */\n  @Event() bqInput: EventEmitter<{ value: string | number | string[] }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.initMultipleValue();\n  }\n\n  componentWillLoad() {\n    this.initMultipleValue();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n\n    if (this.multiple && Array.isArray(this.value)) {\n      this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n    }\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.internals.role = 'combobox';\n    this.internals.ariaExpanded = this.open ? 'true' : 'false';\n  }\n\n  async formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.internals.setValidity({});\n    this.clear();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqOpen', { capture: true })\n  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n    if (!ev.composedPath().includes(this.el)) return;\n\n    this.open = ev.detail.open;\n  }\n\n  @Listen('bqFocus', { capture: true })\n  @Listen('bqBlur', { capture: true })\n  stopOptionFocusBlurPropagation(ev: CustomEvent) {\n    // Stop propagation of focus and blur events coming from the `bq-option` elements\n    if (isHTMLElement(ev.target, 'bq-select')) return;\n\n    ev.stopPropagation();\n  }\n\n  @Listen('scroll', { target: 'window', passive: true, capture: true })\n  handleScrollEvent() {\n    if (!this.open || this.disableScrollLock) return;\n\n    // Close the panel when the scroll event is triggered.\n    // This is useful for those cases where the floating panel is inside a scrollable container.\n    // For example, a select inside a dialog, drawer, etc.\n    // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n    this.open = 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 BqSelect\n   */\n  @Method()\n  async clear(): Promise<void> {\n    if (this.disabled) return;\n\n    const { multiple, inputElem, bqClear, el } = this;\n\n    // Clear value and selected options\n    this.value = '';\n    this.selectedOptions = [];\n\n    // Clear display value and input element if not multiple\n    if (!multiple) {\n      this.displayValue = '';\n      inputElem.value = '';\n    }\n\n    // Update form value and reset options visibility\n    this.resetOptionsVisibility();\n\n    // Emit clear event\n    bqClear.emit(el);\n  }\n\n  /**\n   * Resets the Select input to a previous value.\n   *\n   * @param {TSelectValue} value - The value to reset the Select input to.\n   * @return {Promise<void>}\n   * @memberof BqSelect\n   */\n  @Method()\n  async reset(value: TSelectValue): Promise<void> {\n    if (isNil(value)) return;\n\n    this.value = value;\n    this.syncItemsFromValue();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private initMultipleValue = () => {\n    if (!this.multiple || !isDefined(this.value)) return;\n\n    this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n    if (this.disabled) return;\n\n    if (this.multiple) {\n      ev.stopPropagation();\n    }\n\n    const { value, item } = ev.detail;\n\n    if (this.multiple) {\n      this.handleMultipleSelection(item);\n      // Clear the input value after selecting an item\n      this.inputElem.value = '';\n      // If multiple selection is enabled, emit the selected items array instead of relying on\n      // the option list to emit the value of the selected item\n      this.bqSelect.emit({ value: this.value, item });\n    } else {\n      this.value = value;\n    }\n\n    this.resetOptionsVisibility();\n    this.inputElem.focus();\n  };\n\n  private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n    // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n    const selectedOptionsSet = new Set(this.selectedOptions);\n\n    if (selectedOptionsSet.has(item)) {\n      selectedOptionsSet.delete(item);\n    } else {\n      selectedOptionsSet.add(item);\n    }\n\n    this.selectedOptions = Array.from(selectedOptionsSet);\n    this.value = this.selectedOptions.map((item) => item.value);\n  };\n\n  private handleSearchFilter = (value: string) => {\n    if (this.disabled) return;\n\n    this.debounceQuery?.cancel();\n\n    if (!isDefined(value)) {\n      this.clear();\n    } else {\n      this.debounceQuery = debounce(() => {\n        this.options.forEach((item: HTMLBqOptionElement) => {\n          const itemLabel = this.getOptionLabel(item).toLowerCase();\n          item.hidden = !itemLabel.includes(value);\n        });\n      }, this.debounceTime);\n\n      this.debounceQuery();\n    }\n\n    // The panel will close once a selection is made\n    // so we need to make sure it's open when the user is typing and the query is not empty\n    this.open = true;\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    const { value } = ev.target as HTMLInputElement;\n\n    this.debounceInput?.cancel();\n\n    this.debounceInput = debounce(() => {\n      const inputEvent = this.bqInput.emit({ value });\n      if (!inputEvent.defaultPrevented) {\n        // Continue with search filtering only if the event wasn't prevented\n        this.handleSearchFilter(value);\n      }\n    }, this.debounceTime);\n\n    this.debounceInput();\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    (async () => {\n      await this.clear();\n    })();\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleTagRemove = (item: HTMLBqOptionElement) => {\n    if (this.disabled) return;\n\n    this.handleMultipleSelection(item);\n    this.bqSelect.emit({ value: this.value, item });\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  private resetOptionsVisibility = () => {\n    this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n  };\n\n  private syncItemsFromValue = () => {\n    const { internals, options, value } = this;\n    if (!options.length) return;\n\n    // Sync selected state of the BqOption elements\n    this.syncSelectedOptionsState();\n\n    if (this.multiple) {\n      // Sync selected options for multiple selection mode\n      this.selectedOptions = options.filter((option) => this.value?.includes(option.value));\n    }\n\n    // Always update display value and form value\n    this.updateDisplayLabel();\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  /**\n   * Syncs the selected state of the BqOption elements which value is included in the `value` property.\n   * Notice that value can be a string or an array of strings.\n   *\n   * @private\n   * @memberof BqSelect\n   */\n  private syncSelectedOptionsState = () => {\n    const { options, multiple, value } = this;\n    const lowerCaseValue = String(value).toLowerCase();\n\n    options.forEach((option: HTMLBqOptionElement) => {\n      if (multiple && Array.isArray(value)) {\n        option.selected = value.includes(option.value);\n      } else {\n        option.selected = option.value.toLowerCase() === lowerCaseValue;\n      }\n    });\n  };\n\n  /**\n   * Updates the display value of the input element based on the selected option.\n   *\n   * @private\n   * @memberof BqSelect\n   */\n  private updateDisplayLabel = () => {\n    const { value, options, inputElem } = this;\n\n    const checkedItem = options.find((item) => item.value === value);\n    const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n\n    this.displayValue = displayValue;\n    if (inputElem) {\n      inputElem.value = displayValue;\n    }\n  };\n\n  private getOptionLabel = (item: HTMLBqOptionElement) => {\n    if (!item) return '';\n    return item.innerText.trim() ?? '';\n  };\n\n  private get options() {\n    return Array.from(this.el.querySelectorAll('bq-option'));\n  }\n\n  private get displayPlaceholder() {\n    // Hide the placeholder when multiple selection is enabled and there are selected items\n    return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n  }\n\n  private get displayTags() {\n    return this.selectedOptions.map((item, index) => {\n      if (index < this.maxTagsVisible || this.maxTagsVisible < 0) {\n        return (\n          <bq-tag\n            key={item.value}\n            removable\n            size=\"xsmall\"\n            variant=\"filled\"\n            onBqClose={(event) => {\n              // NOTE: prevents triggering bqClose on parent\n              event.stopPropagation();\n              this.handleTagRemove(item);\n            }}\n            // Prevent the tag from closing the panel when clicked\n            onClick={(ev: MouseEvent) => ev.stopPropagation()}\n            exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n            part=\"tag\"\n          >\n            {this.getOptionLabel(item)}\n          </bq-tag>\n        );\n      } else if (index === this.maxTagsVisible) {\n        return (\n          <bq-tag\n            key=\"more\"\n            size=\"xsmall\"\n            variant=\"filled\"\n            exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n            part=\"tag\"\n          >\n            +{this.selectedOptions.length - index}\n          </bq-tag>\n        );\n      }\n\n      return null;\n    });\n  }\n\n  private get hasClearIcon() {\n    if (this.disableClear || this.disabled) {\n      return false;\n    }\n\n    if (this.multiple) {\n      return this.selectedOptions.length > 0;\n    }\n\n    return isDefined(this.displayValue);\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;\n\n    return (\n      <div class=\"bq-select\" part=\"base\">\n        {/* Label */}\n        <label\n          id={labelId}\n          class={{ 'bq-select__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 dropdown */}\n        <bq-dropdown\n          class=\"bq-select__dropdown w-full\"\n          disableScrollLock={this.disableScrollLock}\n          disabled={this.disabled}\n          distance={this.distance}\n          keepOpenOnSelect={this.keepOpenOnSelect}\n          open={this.open}\n          panelHeight={this.panelHeight}\n          placement={this.placement}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          exportparts=\"panel\"\n        >\n          {/* Input control group */}\n          <div\n            class={{\n              'bq-select__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-select__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            <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n              {/* Display selected values using BqTags for multiple selection */}\n              {this.multiple && (\n                <span class=\"bq-select__tags\" part=\"tags\">\n                  <slot name=\"tags\">{this.displayTags}</slot>\n                </span>\n              )}\n              {/* HTML Input */}\n              <input\n                id={this.name || this.fallbackInputId}\n                class=\"bq-select__control--input flex-grow is-full\"\n                autoComplete=\"off\"\n                autoCapitalize=\"off\"\n                aria-disabled={this.disabled ? 'true' : 'false'}\n                aria-controls={`bq-options-${this.name}`}\n                aria-expanded={this.open ? 'true' : 'false'}\n                aria-haspopup=\"listbox\"\n                disabled={this.disabled}\n                form={this.form}\n                name={this.name}\n                placeholder={this.displayPlaceholder}\n                ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n                readOnly={this.readonly}\n                required={this.required}\n                role=\"combobox\"\n                spellcheck={false}\n                type=\"text\"\n                value={this.displayValue}\n                part=\"input\"\n                // Events\n                onBlur={this.handleBlur}\n                onFocus={this.handleFocus}\n                onInput={this.handleInput}\n              />\n            </div>\n            {/* Clear Button */}\n            {this.hasClearIcon && (\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-select__control--clear ms-[--bq-select--gap]\"\n                appearance=\"text\"\n                aria-label={this.clearButtonLabel}\n                size=\"small\"\n                onBqClick={this.handleClearClick}\n                part=\"clear-btn\"\n                exportparts=\"button\"\n                tabIndex={-1}\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-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n                <bq-icon name=\"caret-down\" class=\"flex\" />\n              </slot>\n            </span>\n          </div>\n          <bq-option-list\n            id={`bq-options-${this.name}`}\n            onBqSelect={this.handleSelect}\n            aria-expanded={this.open ? 'true' : 'false'}\n            exportparts=\"base:option-list\"\n            role=\"listbox\"\n          >\n            <slot />\n          </bq-option-list>\n        </bq-dropdown>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bq-select.entry.esm.js","sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Select styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-select.variables';\n\n:host {\n  @apply block w-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__label {\n  @apply flex items-center m-be-[--bq-select--label-margin-bottom];\n  @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n  @apply text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color] m-bs-[--bq-select--helper-margin-top];\n}\n\n.bq-select__helper-text.validation-error {\n  @apply text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n  @apply text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n  @apply text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Select input group control                         */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n  // The focus state will be controlled by the dropdown element\n  // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n  .bq-select__control {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n    @apply focus border-[color:--bq-select--border-color-focus];\n  }\n}\n\n.bq-select__control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n  // Padding\n  @apply pe-[--bq-select--padding-end] ps-[--bq-select--padding-start] p-b-[var(--bq-select--paddingY)];\n  // Text\n  @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-select--border-style);\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-select__control--clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-select__control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-select__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-select__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-select__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-select__control--input {\n  @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply m-0 border-none p-0 min-bs-[var(--bq-select--icon-size)] min-is-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__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 p-0 bs-auto;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n  @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n  @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n  @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n.bq-select__tags {\n  @apply me-xs2 flex flex-1 gap-xs2;\n\n  bq-tag,\n  ::slotted(bq-tag) {\n    @apply inline-flex;\n  }\n\n  bq-tag::part(text) {\n    @apply text-nowrap leading-small;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport {\n  debounce,\n  hasSlotContent,\n  isDefined,\n  isHTMLElement,\n  isNil,\n  stringToArray,\n  TDebounce,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string | string[];\n\n/**\n * The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.\n *\n * @example How to use it\n * ```html\n * <bq-select placeholder=\"Placeholder\">\n *   <label slot=\"label\">Select label</label>\n *   <span slot=\"helper-text\">\n *     <bq-icon name=\"star\"></bq-icon>\n *       Helper text\n *   </span>\n *\n *   <bq-option value=\"1\">Option 1</bq-option>\n *   <bq-option value=\"2\">Option 2</bq-option>\n *   <bq-option value=\"3\">Option 3</bq-option>\n * </bq-select>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/41989d-select/b/09d7b1\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n * @dependency bq-option-list\n * @dependency bq-tag\n *\n * @attr {boolean} autofocus - If `true`, the Select input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.\n * @attr {string} form - The ID of the form that Select input field belongs to.\n * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.\n * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.\n * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.\n * @attr {string} name - The Select input name.\n * @attr {boolean} open - If `true`, the Select panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Select panel.\n * @attr {string} placeholder - The Select input placeholder text value.\n * @attr {\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"} placement - Position of the Select panel.\n * @attr {boolean} readonly - If `true`, the Select input cannot be modified.\n * @attr {boolean} required - Indicates whether or not the Select input is required to be filled out before submitting the form.\n * @attr {boolean} same-width - Whether the panel should have the Select same width as the input element.\n * @attr {number} skidding - Represents the skidding between the Select panel and the input element.\n * @attr {\"absolute\" | \"fixed\"} strategy - Defines the strategy to position the Select panel.\n * @attr {\"error\" | \"success\" | \"warning\" | \"none\"} validation-status - The validation status of the Select input.\n * @attr {\"number\" | \"string\" | \"string[]\"} value - The select input value can be used to reset the field to a previous value.\n *\n * @method clear - Method to be called to clear the selected value.\n *\n * @event bqBlur - The callback handler is emitted when the Select input loses focus.\n * @event bqClear - The callback handler is emitted when the selected value has been cleared.\n * @event bqFocus - A callback handler is emitted when the Select input has received focus.\n * @event bqSelect - The callback handler is emitted when the selected value has changed.\n *\n * @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot tags - The tags slot container.\n * @slot clear-icon - The clear icon slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\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 clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n *\n * @cssprop --bq-select--background-color - Select background color\n * @cssprop --bq-select--border-color - Select border color\n * @cssprop --bq-select--border-color-focus - Select border color on focus\n * @cssprop --bq-select--border-color-disabled - Select border color when disabled\n * @cssprop --bq-select--border-radius - Select border radius\n * @cssprop --bq-select--border-width - Select border width\n * @cssprop --bq-select--border-style - Select border style\n * @cssprop --bq-select--gap - Gap between Select content and prefix/suffix\n * @cssprop --bq-select--helper-margin-top - Helper text margin top\n * @cssprop --bq-select--helper-text-color - Helper text color\n * @cssprop --bq-select--helper-text-size - Helper text size\n * @cssprop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-select--label-margin-bottom - Select label margin bottom\n * @cssprop --bq-select--label-text-color - Select label text color\n * @cssprop --bq-select--label-text-size - Select label text size\n * @cssprop --bq-select--padding-start - Select padding start\n * @cssprop --bq-select--padding-end - Select padding end\n * @cssprop --bq-select--paddingY - Select padding top and bottom\n * @cssprop --bq-select--text-color - Select text color\n * @cssprop --bq-select--text-size - Select text size\n * @cssprop --bq-select--text-placeholder-color - Select placeholder text color\n */\n@Component({\n  tag: 'bq-select',\n  styleUrl: './scss/bq-select.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSelect {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceQuery: TDebounce<void>;\n  private debounceInput: TDebounce<void>;\n\n  private fallbackInputId = 'select';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSelectElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() displayValue?: string;\n  @State() hasHelperText = false;\n  @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the Select 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  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If true, the Select panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /**\n   * Indicates whether the Select input is disabled or not.\n   * If `true`, the Select is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** Represents the distance (gutter or margin) between the Select panel and the input element. */\n  @Prop({ reflect: true }) distance?: number = 8;\n\n  /** The ID of the form that the Select input belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** If true, the Select panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** The Select input name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The maximum number of tags to display when multiple selection is enabled */\n  @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n  /** If true, the Select input will allow multiple selections. */\n  @Prop({ reflect: true }) multiple?: boolean = false;\n\n  /** If true, the Select panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the Select panel. */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** The Select input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** Position of the Select panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom';\n\n  /** If true, the list of options cannot be filtered (searching won't be available) */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the Select input is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** Whether the panel should have the Select same width as the input element */\n  @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n  /**  Represents the skidding between the Select panel and the input element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the Select panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\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, it can be used to reset the field to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    // Early return for undefined/null values\n    if (isNil(this.value)) {\n      this.value = this.multiple ? [] : '';\n      this.internals.setFormValue(undefined);\n      this.syncItemsFromValue();\n      return;\n    }\n\n    // Handle multiple selection mode\n    if (this.multiple) {\n      this.value = stringToArray(this.value);\n      this.internals.setFormValue(this.value.join(','));\n      this.syncItemsFromValue();\n\n      return;\n    }\n\n    // Handle single selection mode\n    this.value = String(this.value);\n    this.internals.setFormValue(this.value);\n    this.syncItemsFromValue();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the Select input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the selected value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the Select input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the selected value has changed */\n  @Event() bqSelect!: EventEmitter<{ value: string | number | string[]; item: HTMLBqOptionElement }>;\n\n  /** Callback handler emitted when the Select input changes its value while typing */\n  @Event() bqInput: EventEmitter<{ value: string | number | string[] }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.initMultipleValue();\n  }\n\n  componentWillLoad() {\n    this.initMultipleValue();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n\n    if (this.multiple && Array.isArray(this.value)) {\n      this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n    }\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.internals.role = 'combobox';\n    this.internals.ariaExpanded = this.open ? 'true' : 'false';\n  }\n\n  async formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.internals.setValidity({});\n    this.clear();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqOpen', { capture: true })\n  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n    if (!ev.composedPath().includes(this.el)) return;\n\n    this.open = ev.detail.open;\n  }\n\n  @Listen('bqFocus', { capture: true })\n  @Listen('bqBlur', { capture: true })\n  stopOptionFocusBlurPropagation(ev: CustomEvent) {\n    // Stop propagation of focus and blur events coming from the `bq-option` elements\n    if (isHTMLElement(ev.target, 'bq-select')) return;\n\n    ev.stopPropagation();\n  }\n\n  @Listen('scroll', { target: 'window', passive: true, capture: true })\n  handleScrollEvent() {\n    if (!this.open || this.disableScrollLock) return;\n\n    // Close the panel when the scroll event is triggered.\n    // This is useful for those cases where the floating panel is inside a scrollable container.\n    // For example, a select inside a dialog, drawer, etc.\n    // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n    this.open = 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 BqSelect\n   */\n  @Method()\n  async clear(): Promise<void> {\n    if (this.disabled) return;\n\n    const { multiple, inputElem, bqClear, el } = this;\n\n    // Clear value and selected options\n    this.value = '';\n    this.selectedOptions = [];\n\n    // Clear display value and input element if not multiple\n    if (!multiple) {\n      this.displayValue = '';\n      inputElem.value = '';\n    }\n\n    // Update form value and reset options visibility\n    this.resetOptionsVisibility();\n\n    // Emit clear event\n    bqClear.emit(el);\n  }\n\n  /**\n   * Resets the Select input to a previous value.\n   *\n   * @param {TSelectValue} value - The value to reset the Select input to.\n   * @return {Promise<void>}\n   * @memberof BqSelect\n   */\n  @Method()\n  async reset(value: TSelectValue): Promise<void> {\n    if (isNil(value)) return;\n\n    this.value = value;\n    this.syncItemsFromValue();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private initMultipleValue = () => {\n    if (!this.multiple || !isDefined(this.value)) return;\n\n    this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n    if (this.disabled) return;\n\n    if (this.multiple) {\n      ev.stopPropagation();\n    }\n\n    const { value, item } = ev.detail;\n\n    if (this.multiple) {\n      this.handleMultipleSelection(item);\n      // Clear the input value after selecting an item\n      this.inputElem.value = '';\n      // If multiple selection is enabled, emit the selected items array instead of relying on\n      // the option list to emit the value of the selected item\n      this.bqSelect.emit({ value: this.value, item });\n    } else {\n      this.value = value;\n    }\n\n    this.resetOptionsVisibility();\n    this.inputElem.focus();\n  };\n\n  private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n    // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n    const selectedOptionsSet = new Set(this.selectedOptions);\n\n    if (selectedOptionsSet.has(item)) {\n      selectedOptionsSet.delete(item);\n    } else {\n      selectedOptionsSet.add(item);\n    }\n\n    this.selectedOptions = Array.from(selectedOptionsSet);\n    this.value = this.selectedOptions.map((item) => item.value);\n  };\n\n  private handleSearchFilter = (value: string) => {\n    if (this.disabled) return;\n\n    this.debounceQuery?.cancel();\n\n    if (!isDefined(value)) {\n      this.clear();\n    } else {\n      this.debounceQuery = debounce(() => {\n        this.options.forEach((item: HTMLBqOptionElement) => {\n          const itemLabel = this.getOptionLabel(item).toLowerCase();\n          item.hidden = !itemLabel.includes(value);\n        });\n      }, this.debounceTime);\n\n      this.debounceQuery();\n    }\n\n    // The panel will close once a selection is made\n    // so we need to make sure it's open when the user is typing and the query is not empty\n    this.open = true;\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    const { value } = ev.target as HTMLInputElement;\n\n    this.debounceInput?.cancel();\n\n    this.debounceInput = debounce(() => {\n      const inputEvent = this.bqInput.emit({ value });\n      if (!inputEvent.defaultPrevented) {\n        // Continue with search filtering only if the event wasn't prevented\n        this.handleSearchFilter(value);\n      }\n    }, this.debounceTime);\n\n    this.debounceInput();\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    (async () => {\n      await this.clear();\n    })();\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleTagRemove = (item: HTMLBqOptionElement) => {\n    if (this.disabled) return;\n\n    this.handleMultipleSelection(item);\n    this.bqSelect.emit({ value: this.value, item });\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  private resetOptionsVisibility = () => {\n    this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n  };\n\n  private syncItemsFromValue = () => {\n    const { internals, options, value } = this;\n    if (!options.length) return;\n\n    // Sync selected state of the BqOption elements\n    this.syncSelectedOptionsState();\n\n    if (this.multiple) {\n      // Sync selected options for multiple selection mode\n      this.selectedOptions = options.filter((option) => this.value?.includes(option.value));\n    }\n\n    // Always update display value and form value\n    this.updateDisplayLabel();\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  /**\n   * Syncs the selected state of the BqOption elements which value is included in the `value` property.\n   * Notice that value can be a string or an array of strings.\n   *\n   * @private\n   * @memberof BqSelect\n   */\n  private syncSelectedOptionsState = () => {\n    const { options, multiple, value } = this;\n    const lowerCaseValue = String(value).toLowerCase();\n\n    options.forEach((option: HTMLBqOptionElement) => {\n      if (multiple && Array.isArray(value)) {\n        option.selected = value.includes(option.value);\n      } else {\n        option.selected = option.value.toLowerCase() === lowerCaseValue;\n      }\n    });\n  };\n\n  /**\n   * Updates the display value of the input element based on the selected option.\n   *\n   * @private\n   * @memberof BqSelect\n   */\n  private updateDisplayLabel = () => {\n    const { value, options, inputElem } = this;\n\n    const checkedItem = options.find((item) => item.value === value);\n    const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n\n    this.displayValue = displayValue;\n    if (inputElem) {\n      inputElem.value = displayValue;\n    }\n  };\n\n  private getOptionLabel = (item: HTMLBqOptionElement) => {\n    if (!item) return '';\n    return item.innerText.trim() ?? '';\n  };\n\n  private get options() {\n    return Array.from(this.el.querySelectorAll('bq-option'));\n  }\n\n  private get displayPlaceholder() {\n    // Hide the placeholder when multiple selection is enabled and there are selected items\n    return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n  }\n\n  private get displayTags() {\n    return this.selectedOptions.map((item, index) => {\n      if (index < this.maxTagsVisible || this.maxTagsVisible < 0) {\n        return (\n          <bq-tag\n            key={item.value}\n            removable\n            size=\"xsmall\"\n            variant=\"filled\"\n            onBqClose={(event) => {\n              // NOTE: prevents triggering bqClose on parent\n              event.stopPropagation();\n              this.handleTagRemove(item);\n            }}\n            // Prevent the tag from closing the panel when clicked\n            onClick={(ev: MouseEvent) => ev.stopPropagation()}\n            exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n            part=\"tag\"\n          >\n            {this.getOptionLabel(item)}\n          </bq-tag>\n        );\n      } else if (index === this.maxTagsVisible) {\n        return (\n          <bq-tag\n            key=\"more\"\n            size=\"xsmall\"\n            variant=\"filled\"\n            exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n            part=\"tag\"\n          >\n            +{this.selectedOptions.length - index}\n          </bq-tag>\n        );\n      }\n\n      return null;\n    });\n  }\n\n  private get hasClearIcon() {\n    if (this.disableClear || this.disabled) {\n      return false;\n    }\n\n    if (this.multiple) {\n      return this.selectedOptions.length > 0;\n    }\n\n    return isDefined(this.displayValue);\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;\n\n    return (\n      <div class=\"bq-select\" part=\"base\">\n        {/* Label */}\n        <label\n          id={labelId}\n          class={{ 'bq-select__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 dropdown */}\n        <bq-dropdown\n          class=\"bq-select__dropdown w-full\"\n          disableScrollLock={this.disableScrollLock}\n          disabled={this.disabled}\n          distance={this.distance}\n          keepOpenOnSelect={this.keepOpenOnSelect}\n          open={this.open}\n          panelHeight={this.panelHeight}\n          placement={this.placement}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          exportparts=\"panel\"\n        >\n          {/* Input control group */}\n          <div\n            class={{\n              'bq-select__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-select__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            <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n              {/* Display selected values using BqTags for multiple selection */}\n              {this.multiple && (\n                <span class=\"bq-select__tags\" part=\"tags\">\n                  <slot name=\"tags\">{this.displayTags}</slot>\n                </span>\n              )}\n              {/* HTML Input */}\n              <input\n                id={this.name || this.fallbackInputId}\n                class=\"bq-select__control--input flex-grow is-full\"\n                autoComplete=\"off\"\n                autoCapitalize=\"off\"\n                aria-disabled={this.disabled ? 'true' : 'false'}\n                aria-controls={`bq-options-${this.name}`}\n                aria-expanded={this.open ? 'true' : 'false'}\n                aria-haspopup=\"listbox\"\n                disabled={this.disabled}\n                form={this.form}\n                name={this.name}\n                placeholder={this.displayPlaceholder}\n                ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n                readOnly={this.readonly}\n                required={this.required}\n                role=\"combobox\"\n                spellcheck={false}\n                type=\"text\"\n                value={this.displayValue}\n                part=\"input\"\n                // Events\n                onBlur={this.handleBlur}\n                onFocus={this.handleFocus}\n                onInput={this.handleInput}\n              />\n            </div>\n            {/* Clear Button */}\n            {this.hasClearIcon && (\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-select__control--clear ms-[--bq-select--gap]\"\n                appearance=\"text\"\n                aria-label={this.clearButtonLabel}\n                size=\"small\"\n                onBqClick={this.handleClearClick}\n                part=\"clear-btn\"\n                exportparts=\"button\"\n                tabIndex={-1}\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-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n                <bq-icon name=\"caret-down\" class=\"flex\" />\n              </slot>\n            </span>\n          </div>\n          <bq-option-list\n            id={`bq-options-${this.name}`}\n            onBqSelect={this.handleSelect}\n            aria-expanded={this.open ? 'true' : 'false'}\n            exportparts=\"base:option-list\"\n            role=\"listbox\"\n          >\n            <slot />\n          </bq-option-list>\n        </bq-dropdown>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/beeq/bq-side-menu-item.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-side-menu-item.entry.esm.js","sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Side menu item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu-item.variables';\n\n:host {\n  @apply flex;\n}\n\n.bq-side-menu__item {\n  @apply flex flex-grow items-center gap-x-s rounded-s border-none px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n  // Default state\n  @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n  // Focus state\n  @apply [&:not(.disabled)]:focus-visible:focus;\n\n  // Hover state\n  @apply [&:not(.disabled)]:hover:cursor-pointer;\n  @apply [&:not(.disabled,.active)]:hover:text-m [&:not(.disabled,.active)]:hover:bg-hover-ui-alt [&:not(.disabled,.active)]:hover:text-hover-primary;\n}\n\n.bq-side-menu__item.active {\n  // Active state\n  @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n  @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n  @apply justify-center gap-0;\n\n  .bq-side-menu__item--label,\n  .bq-side-menu__item--suffix {\n    @apply sr-only scale-0;\n  }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n  @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, h, Prop, State } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/**\n * Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n *\n * @example How to use it\n * ```html\n * <bq-side-menu-item>\n *   <bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\n *   Menu item\n *   <bq-badge slot=\"suffix\">5</bq-badge>\n * </bq-side-menu-item>\n * ```\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {boolean} active - If `true`, the menu item will be shown as active/selected.\n * @attr {boolean} collapse - If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.\n * @attr {boolean} disabled - If `true`, the menu item will be disabled (no interaction allowed).\n *\n * @event bqBlur - Handler to be called when the button loses focus.\n * @event bqClick - Handler to be called when the button gets focused.\n * @event bqFocus - Handler to be called when the button is clicked.\n *\n * @slot prefix - The prefix part of menu item.\n * @slot - The content of the menu item.\n * @slot suffix - The suffix part of menu item.\n *\n * @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n *\n * @cssprop --bq-side-menu-item--bg-default - Side menu item default background color\n * @cssprop --bq-side-menu-item--bg-active - Side menu item active background color\n * @cssprop --bq-side-menu-item--text-default - Side menu item default text color\n * @cssprop --bq-side-menu-item--text-active - Side menu item active text color\n * @cssprop --bq-side-menu-item--paddingX - Side menu item vertical padding\n * @cssprop --bq-side-menu-item--paddingY - Side menu item horizontal padding\n */\n@Component({\n  tag: 'bq-side-menu-item',\n  styleUrl: './scss/bq-side-menu-item.scss',\n  shadow: true,\n})\nexport class BqSideMenuItem {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSideMenuItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() textContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the menu item will be shown as active/selected. */\n  @Prop() active: boolean = false;\n\n  /** If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent. */\n  @Prop() collapse: boolean = false;\n\n  /** If true, the menu item will be disabled (no interaction allowed) */\n  @Prop() disabled: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.labelElem) return;\n    this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n  };\n\n  handleBlur = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqBlur.emit(this.el);\n  };\n\n  handleFocus = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqFocus.emit(this.el);\n  };\n\n  handleClick = (ev: Event) => {\n    if (this.disabled || this.active) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  private menuItem = () => (\n    <button\n      class={{\n        'bq-side-menu__item': true,\n        active: this.active,\n        disabled: this.disabled,\n        'is-collapsed': this.collapse,\n      }}\n      onBlur={this.handleBlur}\n      onFocus={this.handleFocus}\n      onClick={this.handleClick}\n      aria-disabled={this.disabled ? 'true' : 'false'}\n      role=\"menuitem\"\n      tabindex={this.disabled ? -1 : 0}\n      slot=\"trigger\"\n      part=\"base\"\n    >\n      <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n        <slot name=\"prefix\" />\n      </div>\n      <div\n        class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n        ref={(labelElem) => (this.labelElem = labelElem)}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n      <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n        <slot name=\"suffix\" />\n      </div>\n    </button>\n  );\n\n  render() {\n    return !this.collapse ? (\n      this.menuItem()\n    ) : (\n      <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n        {this.textContent}\n        {this.menuItem()}\n      </bq-tooltip>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bq-side-menu-item.entry.esm.js","sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Side menu item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu-item.variables';\n\n:host {\n  @apply flex;\n}\n\n.bq-side-menu__item {\n  @apply flex flex-grow items-center gap-x-s rounded-s border-none px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n  // Default state\n  @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n  // Focus state\n  @apply [&:not(.disabled)]:focus-visible:focus;\n\n  // Hover state\n  @apply [&:not(.disabled)]:hover:cursor-pointer;\n  @apply [&:not(.disabled,.active)]:hover:text-m [&:not(.disabled,.active)]:hover:bg-hover-ui-alt [&:not(.disabled,.active)]:hover:text-hover-primary;\n}\n\n.bq-side-menu__item.active {\n  // Active state\n  @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n  @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n  @apply justify-center gap-0;\n\n  .bq-side-menu__item--label,\n  .bq-side-menu__item--suffix {\n    @apply sr-only scale-0;\n  }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n  @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, h, Prop, State } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/**\n * Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n *\n * @example How to use it\n * ```html\n * <bq-side-menu-item>\n *   <bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\n *   Menu item\n *   <bq-badge slot=\"suffix\">5</bq-badge>\n * </bq-side-menu-item>\n * ```\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {boolean} active - If `true`, the menu item will be shown as active/selected.\n * @attr {boolean} collapse - If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.\n * @attr {boolean} disabled - If `true`, the menu item will be disabled (no interaction allowed).\n *\n * @event bqBlur - Handler to be called when the button loses focus.\n * @event bqClick - Handler to be called when the button gets focused.\n * @event bqFocus - Handler to be called when the button is clicked.\n *\n * @slot prefix - The prefix part of menu item.\n * @slot - The content of the menu item.\n * @slot suffix - The suffix part of menu item.\n *\n * @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n *\n * @cssprop --bq-side-menu-item--bg-default - Side menu item default background color\n * @cssprop --bq-side-menu-item--bg-active - Side menu item active background color\n * @cssprop --bq-side-menu-item--text-default - Side menu item default text color\n * @cssprop --bq-side-menu-item--text-active - Side menu item active text color\n * @cssprop --bq-side-menu-item--paddingX - Side menu item vertical padding\n * @cssprop --bq-side-menu-item--paddingY - Side menu item horizontal padding\n */\n@Component({\n  tag: 'bq-side-menu-item',\n  styleUrl: './scss/bq-side-menu-item.scss',\n  shadow: true,\n})\nexport class BqSideMenuItem {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSideMenuItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() textContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the menu item will be shown as active/selected. */\n  @Prop() active: boolean = false;\n\n  /** If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent. */\n  @Prop() collapse: boolean = false;\n\n  /** If true, the menu item will be disabled (no interaction allowed) */\n  @Prop() disabled: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.labelElem) return;\n    this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n  };\n\n  handleBlur = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqBlur.emit(this.el);\n  };\n\n  handleFocus = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqFocus.emit(this.el);\n  };\n\n  handleClick = (ev: Event) => {\n    if (this.disabled || this.active) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  private menuItem = () => (\n    <button\n      class={{\n        'bq-side-menu__item': true,\n        active: this.active,\n        disabled: this.disabled,\n        'is-collapsed': this.collapse,\n      }}\n      onBlur={this.handleBlur}\n      onFocus={this.handleFocus}\n      onClick={this.handleClick}\n      aria-disabled={this.disabled ? 'true' : 'false'}\n      role=\"menuitem\"\n      tabindex={this.disabled ? -1 : 0}\n      slot=\"trigger\"\n      part=\"base\"\n    >\n      <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n        <slot name=\"prefix\" />\n      </div>\n      <div\n        class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n        ref={(labelElem) => (this.labelElem = labelElem)}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n      <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n        <slot name=\"suffix\" />\n      </div>\n    </button>\n  );\n\n  render() {\n    return !this.collapse ? (\n      this.menuItem()\n    ) : (\n      <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n        {this.textContent}\n        {this.menuItem()}\n      </bq-tooltip>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}