@beeq/core 1.10.0-beta.2 → 1.10.0-beta.3

package/dist/beeq/{p-f683e400.entry.js.map → p-e1e2b79f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bqSelectCss","BqSelect","helperTextElem","inputElem","labelElem","prefixElem","suffixElem","debounceQuery","debounceInput","fallbackInputId","internals","displayValue","hasHelperText","selectedOptions","hasLabel","hasPrefix","hasSuffix","hasValue","autofocus","clearButtonLabel","debounceTime","disableScrollLock","disabled","disableClear","distance","form","keepOpenOnSelect","name","maxTagsVisible","multiple","open","panelHeight","placeholder","placement","readonly","required","sameWidth","skidding","strategy","validationStatus","value","handleValueChange","isNil","this","setFormValue","undefined","syncItemsFromValue","stringToArray","join","String","bqBlur","bqClear","bqFocus","bqSelect","bqInput","connectedCallback","initMultipleValue","componentWillLoad","componentDidLoad","handleSlotChange","Array","isArray","options","filter","item","includes","formAssociatedCallback","role","ariaExpanded","formResetCallback","setValidity","clear","handleOpenChange","ev","composedPath","el","detail","stopOptionFocusBlurPropagation","isHTMLElement","target","stopPropagation","handleScrollEvent","resetOptionsVisibility","emit","reset","from","JSON","parse","handleBlur","handleFocus","handleSelect","handleMultipleSelection","focus","selectedOptionsSet","Set","has","delete","add","map","handleSearchFilter","cancel","isDefined","debounce","forEach","itemLabel","getOptionLabel","toLowerCase","hidden","handleInput","inputEvent","defaultPrevented","handleClearClick","handleTagRemove","hasSlotContent","length","syncSelectedOptionsState","option","updateDisplayLabel","lowerCaseValue","selected","checkedItem","find","innerText","trim","querySelectorAll","displayPlaceholder","displayTags","index","h","key","removable","size","variant","onBqClose","event","onClick","exportparts","part","hasClearIcon","render","labelId","class","id","htmlFor","ref","onSlotchange","slot","spanElem","autoComplete","autoCapitalize","readOnly","spellcheck","type","onBlur","onFocus","onInput","appearance","onBqClick","tabIndex","onBqSelect","divElem"],"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) 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    inputElem.value = displayValue;\n    this.displayValue = displayValue;\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["bqSelectCss","BqSelect","helperTextElem","inputElem","labelElem","prefixElem","suffixElem","debounceQuery","debounceInput","fallbackInputId","internals","displayValue","hasHelperText","selectedOptions","hasLabel","hasPrefix","hasSuffix","hasValue","autofocus","clearButtonLabel","debounceTime","disableScrollLock","disabled","disableClear","distance","form","keepOpenOnSelect","name","maxTagsVisible","multiple","open","panelHeight","placeholder","placement","readonly","required","sameWidth","skidding","strategy","validationStatus","value","handleValueChange","isNil","this","setFormValue","undefined","syncItemsFromValue","stringToArray","join","String","bqBlur","bqClear","bqFocus","bqSelect","bqInput","connectedCallback","initMultipleValue","componentWillLoad","componentDidLoad","handleSlotChange","Array","isArray","options","filter","item","includes","formAssociatedCallback","role","ariaExpanded","formResetCallback","setValidity","clear","handleOpenChange","ev","composedPath","el","detail","stopOptionFocusBlurPropagation","isHTMLElement","target","stopPropagation","handleScrollEvent","resetOptionsVisibility","emit","reset","from","JSON","parse","handleBlur","handleFocus","handleSelect","handleMultipleSelection","focus","selectedOptionsSet","Set","has","delete","add","map","handleSearchFilter","cancel","isDefined","debounce","forEach","itemLabel","getOptionLabel","toLowerCase","hidden","handleInput","inputEvent","defaultPrevented","handleClearClick","handleTagRemove","hasSlotContent","length","syncSelectedOptionsState","option","updateDisplayLabel","lowerCaseValue","selected","checkedItem","find","innerText","trim","querySelectorAll","displayPlaceholder","displayTags","index","h","key","removable","size","variant","onBqClose","event","onClick","exportparts","part","hasClearIcon","render","labelId","class","id","htmlFor","ref","onSlotchange","slot","spanElem","autoComplete","autoCapitalize","readOnly","spellcheck","type","onBlur","onFocus","onInput","appearance","onBqClick","tabIndex","onBqSelect","divElem"],"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) 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    inputElem.value = displayValue;\n    this.displayValue = displayValue;\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"],"mappings":"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","ignoreList":[]}

package/dist/beeq/p-e3eb683b.entry.js

@@ -0,0 +1,6 @@
+/*!
+ * Built by Endavans
+ * © https://beeq.design - Apache 2 License.
+ */
+import{r as a,a as r,h as e,d as b}from"./p-BZCppx8n.js";import{g as q}from"./p-_RvVpeh2.js";import{i as t}from"./p-BcPwGxIn.js";import{v as n}from"./p-zh4P02Kn.js";import{b as i,a as s}from"./p-uqkxeAeG.js";import"./p-B4sM1t6Z.js";const o=["horizontal","vertical"];const d={HORIZONTAL:"horizontal",VERTICAL:"vertical"};const l=["start","middle","end"];const v=["square","round","butt"];const c='.end,.rotate-180,.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}.flex{display:flex}.flex-grow{flex-grow:1}.flex-grow-0{flex-grow:0}.basis-\\[--bq-divider--stroke-basis\\]{flex-basis:var(--bq-divider--stroke-basis)}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-\\[--bq-divider--title-marginX\\]{gap:var(--bq-divider--title-marginX)}.stroke-\\[color\\:--bq-divider--stroke-color\\]{stroke:var(--bq-divider--stroke-color)}.bs-\\[--bq-divider--stroke-thickness\\]{block-size:var(--bq-divider--stroke-thickness)}.bs-full{block-size:100%}.is-\\[--bq-divider--stroke-thickness\\]{inline-size:var(--bq-divider--stroke-thickness)}.is-full{inline-size:100%}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-divider--color:var(--bq-stroke--primary);--bq-divider--title-marginX:var(--bq-spacing-m);display:block;inline-size:100%}:host([orientation=vertical]){block-size:100%;display:flex}.bq-divider{align-items:center;display:flex;gap:var(--bq-divider--title-marginX)}.bq-divider--stroke{stroke:var(--bq-divider--stroke-color);block-size:var(--bq-divider--stroke-thickness);flex-grow:1;inline-size:100%}.bq-divider--stroke.end{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-divider--title__end .bq-divider--stroke.end,.bq-divider--title__start .bq-divider--stroke.start{flex-basis:var(--bq-divider--stroke-basis);flex-grow:0}.bq-divider--vertical{align-items:center;flex-direction:column;gap:var(--bq-divider--title-marginX);inline-size:100%}.bq-divider--vertical .bq-divider--stroke{block-size:100%;inline-size:var(--bq-divider--stroke-thickness)}.static{position:static}.\\!hidden{display:none!important}.gap-0{gap:0}';const g=class{constructor(r){a(this,r)}titleElem;get el(){return r(this)}hasTitle;dashed=false;orientation="horizontal";strokeColor="stroke--primary";titleAlignment="middle";strokeDashWidth=12;strokeDashGap=7;strokeThickness=1;strokeBasis=0;strokeLinecap="butt";checkPropValues(){n(o,"horizontal",this.el,"orientation");n(l,"middle",this.el,"titleAlignment");n(v,"butt",this.el,"strokeLinecap")}connectedCallback(){this.checkPropValues()}componentWillLoad(){this.checkPropValues()}componentDidLoad(){this.handleSlotChange()}handleSlotChange=()=>{this.hasTitle=i(this.titleElem)||!!s(this.titleElem.querySelector("slot"))};get strokeAttributes(){return{...this.strokeDrawPositions,...this.dashed&&{"stroke-dasharray":this.strokeDasharray},"stroke-linecap":this.strokeLinecap,"stroke-width":this.strokeThickness}}get strokeDrawPositions(){const a=this.strokeThickness/2;const r={[d.HORIZONTAL]:{x1:a,x2:"100%",y1:a,y2:a},[d.VERTICAL]:{x1:a,x2:a,y1:a,y2:"100%"}};const e=new Map(Object.entries(r));return e.get(this.orientation)}get strokeDasharray(){return`${this.strokeDashWidth}, ${this.strokeDashGap}`}render(){const a={...this.strokeColor&&{"--bq-divider--stroke-color":q(this.strokeColor)},...this.strokeThickness&&{"--bq-divider--stroke-thickness":`${this.strokeThickness}px`},...!t(this.strokeBasis)&&{"--bq-divider--stroke-basis":`${this.strokeBasis}px`}};return e(b,{key:"4103d484b5ccb459e9c6cbbb2bdfa2e2f6b4828c",style:a},e("div",{key:"e6a16846974474593ef290f77ad624d2ee88baa5",class:{"bq-divider":true,[`bq-divider--${this.orientation}`]:true,[`bq-divider--title__${this.titleAlignment}`]:true,"gap-0":!this.hasTitle},part:"base",ref:a=>this.titleElem=a,role:"separator","aria-orientation":this.orientation},e("svg",{key:"3a992a344d4c4d55f3b4d3a3af808b6e670803fe",class:{"bq-divider--stroke start":true,"!hidden":this.strokeBasis===0&&this.titleAlignment==="start"},part:"dash-start"},e("line",{key:"c9e9aa87681fdc83f85a56f6a7b9a34386edc0b8",...this.strokeAttributes,part:"dash-start-line"})),e("slot",{key:"62a6a210165fdc3354f15a7e6acc7c8914b7258a",onSlotchange:this.handleSlotChange}),e("svg",{key:"c9e2a0f3b0b4421f19dc124036297f549e3a9623",class:{"bq-divider--stroke end":true,"!hidden":!this.hasTitle||this.strokeBasis===0&&this.titleAlignment==="end"},part:"dash-end"},e("line",{key:"af46637eda909675b0363d37f699bbfd78ef3e1c",...this.strokeAttributes,part:"dash-end-line"}))))}static get watchers(){return{orientation:["checkPropValues"],titleAlignment:["checkPropValues"],strokeLinecap:["checkPropValues"]}}};g.style=c;export{g as bq_divider};
+//# sourceMappingURL=p-e3eb683b.entry.js.map

package/dist/beeq/{p-90947d6b.entry.js.map → p-e3eb683b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["DIVIDER_ORIENTATION","DIVIDER_ORIENTATION_ENUM","HORIZONTAL","VERTICAL","DIVIDER_TITLE_ALIGNMENT","DIVIDER_STROKE_LINECAP","bqDividerCss","BqDivider","titleElem","hasTitle","dashed","orientation","strokeColor","titleAlignment","strokeDashWidth","strokeDashGap","strokeThickness","strokeBasis","strokeLinecap","checkPropValues","validatePropValue","this","el","connectedCallback","componentWillLoad","componentDidLoad","handleSlotChange","hasSlotContent","getTextContent","querySelector","strokeAttributes","strokeDrawPositions","strokeDasharray","drawOffset","x1","x2","y1","y2","orientationMap","Map","Object","entries","get","render","styles","getColorCSSVariable","isNil","h","Host","key","style","class","part","ref","div","role","onSlotchange"],"sources":["../../packages/beeq/src/components/divider/bq-divider.types.ts","../../packages/beeq/src/components/divider/scss/bq-divider.scss?tag=bq-divider&encapsulation=shadow","../../packages/beeq/src/components/divider/bq-divider.tsx"],"sourcesContent":["export const DIVIDER_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TDividerOrientation = (typeof DIVIDER_ORIENTATION)[number];\n\nexport const DIVIDER_ORIENTATION_ENUM = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n} as const;\n\nexport const DIVIDER_TITLE_ALIGNMENT = ['start', 'middle', 'end'] as const;\nexport type TDividerTitleAlignment = (typeof DIVIDER_TITLE_ALIGNMENT)[number];\n\nexport const DIVIDER_STROKE_LINECAP = ['square', 'round', 'butt'] as const;\nexport type TDividerStrokeLinecap = (typeof DIVIDER_STROKE_LINECAP)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Button styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-divider.variables';\n\n:host {\n  @apply block is-full;\n}\n\n:host([orientation='vertical']) {\n  @apply flex bs-full;\n}\n\n.bq-divider {\n  @apply flex items-center gap-[--bq-divider--title-marginX];\n}\n\n.bq-divider--stroke {\n  @apply flex-grow stroke-[color:--bq-divider--stroke-color] bs-[--bq-divider--stroke-thickness] is-full;\n\n  &.end {\n    @apply rotate-180;\n  }\n}\n\n.bq-divider--title__start .bq-divider--stroke.start,\n.bq-divider--title__end .bq-divider--stroke.end {\n  @apply flex-grow-0 basis-[--bq-divider--stroke-basis];\n}\n\n.bq-divider--vertical {\n  @apply flex-col items-center gap-[--bq-divider--title-marginX] is-full;\n\n  .bq-divider--stroke {\n    @apply bs-full is-[--bq-divider--stroke-thickness];\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  DIVIDER_ORIENTATION,\n  DIVIDER_ORIENTATION_ENUM,\n  DIVIDER_STROKE_LINECAP,\n  DIVIDER_TITLE_ALIGNMENT,\n} from './bq-divider.types';\nimport type { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from './bq-divider.types';\nimport { getColorCSSVariable, getTextContent, hasSlotContent, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * The Divider component is used to visually separate content in a layout.\n *\n * @example How to use it\n * ```html\n * <bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n *   <span slot=\"title\">Divider Title</span>\n * </bq-divider>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/53dfe6-divider\n * @status stable\n *\n * @attr {boolean} dashed - If true, the divider has a dashed pattern.\n * @attr {\"horizontal\" | \"vertical\"} orientation - The default orientation of the divider.\n * @attr {string} stroke-color - Set the stroke color of the divider. The value should be a valid value of the palette color.\n * @attr {\"start\" | \"middle\" | \"end\"} title-alignment - Set the alignment of the title on the main axis of the divider (horizontal / vertical).\n * @attr {number} stroke-dash-width - Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-dash-gap - Set the gap of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-thickness - Set the thickness of the divider's stroke. Value expressed in px.\n * @attr {number} stroke-basis - Set the min width of the divider's stroke when text is not centered. Value expressed in px.\n * @attr {\"square\" | \"round\" | \"butt\"} stroke-linecap - Set the line of the divider's stroke. This is applicable when the stroke is dashed.\n *\n * @slot - The title content of the divider.\n *\n * @part base - The component's internal wrapper.\n * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke.\n * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke.\n * @part dash-start-line - The component's internal line component of the divider's stroke.\n * @part dash-end-line - The component's internal line component of the divider's stroke.\n *\n * @cssprop --bq-divider--color - Divider color\n * @cssprop --bq-divider--title-marginX - Divider space between title and delimiters\n */\n@Component({\n  tag: 'bq-divider',\n  styleUrl: './scss/bq-divider.scss',\n  shadow: true,\n})\nexport class BqDivider {\n  // Own Properties\n  // ====================\n\n  private titleElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDividerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasTitle: boolean;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the divider has a dashed pattern */\n  @Prop() dashed = false;\n\n  /** The default orientation of the divider */\n  @Prop({ reflect: true }) orientation: TDividerOrientation = 'horizontal';\n\n  /** Set the stroke color of the divider. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) strokeColor?: string = 'stroke--primary';\n\n  /** Set the alignment of the title on the main axis of the divider (horizontal / vertical) */\n  @Prop({ reflect: true }) titleAlignment?: TDividerTitleAlignment = 'middle';\n\n  /** Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashWidth?: number = 12;\n\n  /** Set the gap of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashGap?: number = 7;\n\n  /** Set the thickness of the divider's stroke. Value expressed in px*/\n  @Prop({ reflect: true }) strokeThickness?: number = 1;\n\n  /** Set the min width of the divider's stroke when text is not centered. Value expressed in px */\n  @Prop({ reflect: true }) strokeBasis?: number = 0;\n\n  /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeLinecap?: TDividerStrokeLinecap = 'butt';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('orientation')\n  @Watch('titleAlignment')\n  @Watch('strokeLinecap')\n  checkPropValues() {\n    validatePropValue(DIVIDER_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(DIVIDER_TITLE_ALIGNMENT, 'middle', this.el, 'titleAlignment');\n    validatePropValue(DIVIDER_STROKE_LINECAP, 'butt', this.el, 'strokeLinecap');\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  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot'));\n  };\n\n  private get strokeAttributes() {\n    return {\n      ...this.strokeDrawPositions,\n      ...(this.dashed && { 'stroke-dasharray': this.strokeDasharray }),\n      'stroke-linecap': this.strokeLinecap,\n      'stroke-width': this.strokeThickness,\n    };\n  }\n\n  private get strokeDrawPositions() {\n    const drawOffset = this.strokeThickness / 2;\n    const strokeDrawPositions = {\n      [DIVIDER_ORIENTATION_ENUM.HORIZONTAL]: { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset },\n      [DIVIDER_ORIENTATION_ENUM.VERTICAL]: { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' },\n    };\n    const orientationMap = new Map(Object.entries(strokeDrawPositions));\n\n    return orientationMap.get(this.orientation);\n  }\n\n  private get strokeDasharray() {\n    return `${this.strokeDashWidth}, ${this.strokeDashGap}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.strokeColor && { '--bq-divider--stroke-color': getColorCSSVariable(this.strokeColor) }),\n      ...(this.strokeThickness && { '--bq-divider--stroke-thickness': `${this.strokeThickness}px` }),\n      ...(!isNil(this.strokeBasis) && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-divider': true,\n            [`bq-divider--${this.orientation}`]: true,\n            [`bq-divider--title__${this.titleAlignment}`]: true,\n            'gap-0': !this.hasTitle,\n          }}\n          part=\"base\"\n          ref={(div) => (this.titleElem = div)}\n          role=\"separator\"\n          aria-orientation={this.orientation}\n        >\n          <svg\n            class={{\n              'bq-divider--stroke start': true,\n              '!hidden': this.strokeBasis === 0 && this.titleAlignment === 'start',\n            }}\n            part=\"dash-start\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-start-line\" />\n          </svg>\n          <slot onSlotchange={this.handleSlotChange} />\n          <svg\n            class={{\n              'bq-divider--stroke end': true,\n              '!hidden': !this.hasTitle || (this.strokeBasis === 0 && this.titleAlignment === 'end'),\n            }}\n            part=\"dash-end\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-end-line\" />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;wOAAO,MAAMA,EAAsB,CAAC,aAAc,YAG3C,MAAMC,EAA2B,CACtCC,WAAY,aACZC,SAAU,YAGL,MAAMC,EAA0B,CAAC,QAAS,SAAU,OAGpD,MAAMC,EAAyB,CAAC,SAAU,QAAS,QCX1D,MAAMC,EAAe,26oB,MCkDRC,EAAS,M,yBAIZC,U,wBAWSC,SAMTC,OAAS,MAGQC,YAAmC,aAGnCC,YAAuB,kBAGvBC,eAA0C,SAG1CC,gBAA2B,GAG3BC,cAAyB,EAGzBC,gBAA2B,EAG3BC,YAAuB,EAGvBC,cAAwC,OAQjE,eAAAC,GACEC,EAAkBpB,EAAqB,aAAcqB,KAAKC,GAAI,eAC9DF,EAAkBhB,EAAyB,SAAUiB,KAAKC,GAAI,kBAC9DF,EAAkBf,EAAwB,OAAQgB,KAAKC,GAAI,gB,CAW7D,iBAAAC,GACEF,KAAKF,iB,CAGP,iBAAAK,GACEH,KAAKF,iB,CAGP,gBAAAM,GACEJ,KAAKK,kB,CAkBCA,iBAAmB,KACzBL,KAAKZ,SAAWkB,EAAeN,KAAKb,cAAgBoB,EAAeP,KAAKb,UAAUqB,cAAc,QAAQ,EAG1G,oBAAYC,GACV,MAAO,IACFT,KAAKU,uBACJV,KAAKX,QAAU,CAAE,mBAAoBW,KAAKW,iBAC9C,iBAAkBX,KAAKH,cACvB,eAAgBG,KAAKL,gB,CAIzB,uBAAYe,GACV,MAAME,EAAaZ,KAAKL,gBAAkB,EAC1C,MAAMe,EAAsB,CAC1B,CAAC9B,EAAyBC,YAAa,CAAEgC,GAAID,EAAYE,GAAI,OAAQC,GAAIH,EAAYI,GAAIJ,GACzF,CAAChC,EAAyBE,UAAW,CAAE+B,GAAID,EAAYE,GAAIF,EAAYG,GAAIH,EAAYI,GAAI,SAE7F,MAAMC,EAAiB,IAAIC,IAAIC,OAAOC,QAAQV,IAE9C,OAAOO,EAAeI,IAAIrB,KAAKV,Y,CAGjC,mBAAYqB,GACV,MAAO,GAAGX,KAAKP,oBAAoBO,KAAKN,e,CAO1C,MAAA4B,GACE,MAAMC,EAAS,IACTvB,KAAKT,aAAe,CAAE,6BAA8BiC,EAAoBxB,KAAKT,iBAC7ES,KAAKL,iBAAmB,CAAE,iCAAkC,GAAGK,KAAKL,yBACnE8B,EAAMzB,KAAKJ,cAAgB,CAAE,6BAA8B,GAAGI,KAAKJ,kBAG1E,OACE8B,EAACC,EAAK,CAAAC,IAAA,2CAAAC,MAAON,GACXG,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,aAAc,KACd,CAAC,eAAe9B,KAAKV,eAAgB,KACrC,CAAC,sBAAsBU,KAAKR,kBAAmB,KAC/C,SAAUQ,KAAKZ,UAEjB2C,KAAK,OACLC,IAAMC,GAASjC,KAAKb,UAAY8C,EAChCC,KAAK,YAAW,mBACElC,KAAKV,aAEvBoC,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,2BAA4B,KAC5B,UAAW9B,KAAKJ,cAAgB,GAAKI,KAAKR,iBAAmB,SAE/DuC,KAAK,cAELL,EAAU,QAAAE,IAAA,8CAAA5B,KAAKS,iBAAkBsB,KAAK,qBAExCL,EAAA,QAAAE,IAAA,2CAAMO,aAAcnC,KAAKK,mBACzBqB,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,yBAA0B,KAC1B,WAAY9B,KAAKZ,UAAaY,KAAKJ,cAAgB,GAAKI,KAAKR,iBAAmB,OAElFuC,KAAK,YAELL,EAAA,QAAAE,IAAA,8CAAU5B,KAAKS,iBAAkBsB,KAAK,oB","ignoreList":[]}
+{"version":3,"names":["DIVIDER_ORIENTATION","DIVIDER_ORIENTATION_ENUM","HORIZONTAL","VERTICAL","DIVIDER_TITLE_ALIGNMENT","DIVIDER_STROKE_LINECAP","bqDividerCss","BqDivider","titleElem","hasTitle","dashed","orientation","strokeColor","titleAlignment","strokeDashWidth","strokeDashGap","strokeThickness","strokeBasis","strokeLinecap","checkPropValues","validatePropValue","this","el","connectedCallback","componentWillLoad","componentDidLoad","handleSlotChange","hasSlotContent","getTextContent","querySelector","strokeAttributes","strokeDrawPositions","strokeDasharray","drawOffset","x1","x2","y1","y2","orientationMap","Map","Object","entries","get","render","styles","getColorCSSVariable","isNil","h","Host","key","style","class","part","ref","div","role","onSlotchange"],"sources":["../../packages/beeq/src/components/divider/bq-divider.types.ts","../../packages/beeq/src/components/divider/scss/bq-divider.scss?tag=bq-divider&encapsulation=shadow","../../packages/beeq/src/components/divider/bq-divider.tsx"],"sourcesContent":["export const DIVIDER_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TDividerOrientation = (typeof DIVIDER_ORIENTATION)[number];\n\nexport const DIVIDER_ORIENTATION_ENUM = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n} as const;\n\nexport const DIVIDER_TITLE_ALIGNMENT = ['start', 'middle', 'end'] as const;\nexport type TDividerTitleAlignment = (typeof DIVIDER_TITLE_ALIGNMENT)[number];\n\nexport const DIVIDER_STROKE_LINECAP = ['square', 'round', 'butt'] as const;\nexport type TDividerStrokeLinecap = (typeof DIVIDER_STROKE_LINECAP)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Button styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-divider.variables';\n\n:host {\n  @apply block is-full;\n}\n\n:host([orientation='vertical']) {\n  @apply flex bs-full;\n}\n\n.bq-divider {\n  @apply flex items-center gap-[--bq-divider--title-marginX];\n}\n\n.bq-divider--stroke {\n  @apply flex-grow stroke-[color:--bq-divider--stroke-color] bs-[--bq-divider--stroke-thickness] is-full;\n\n  &.end {\n    @apply rotate-180;\n  }\n}\n\n.bq-divider--title__start .bq-divider--stroke.start,\n.bq-divider--title__end .bq-divider--stroke.end {\n  @apply flex-grow-0 basis-[--bq-divider--stroke-basis];\n}\n\n.bq-divider--vertical {\n  @apply flex-col items-center gap-[--bq-divider--title-marginX] is-full;\n\n  .bq-divider--stroke {\n    @apply bs-full is-[--bq-divider--stroke-thickness];\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  DIVIDER_ORIENTATION,\n  DIVIDER_ORIENTATION_ENUM,\n  DIVIDER_STROKE_LINECAP,\n  DIVIDER_TITLE_ALIGNMENT,\n} from './bq-divider.types';\nimport type { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from './bq-divider.types';\nimport { getColorCSSVariable, getTextContent, hasSlotContent, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * The Divider component is used to visually separate content in a layout.\n *\n * @example How to use it\n * ```html\n * <bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n *   <span slot=\"title\">Divider Title</span>\n * </bq-divider>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/53dfe6-divider\n * @status stable\n *\n * @attr {boolean} dashed - If true, the divider has a dashed pattern.\n * @attr {\"horizontal\" | \"vertical\"} orientation - The default orientation of the divider.\n * @attr {string} stroke-color - Set the stroke color of the divider. The value should be a valid value of the palette color.\n * @attr {\"start\" | \"middle\" | \"end\"} title-alignment - Set the alignment of the title on the main axis of the divider (horizontal / vertical).\n * @attr {number} stroke-dash-width - Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-dash-gap - Set the gap of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-thickness - Set the thickness of the divider's stroke. Value expressed in px.\n * @attr {number} stroke-basis - Set the min width of the divider's stroke when text is not centered. Value expressed in px.\n * @attr {\"square\" | \"round\" | \"butt\"} stroke-linecap - Set the line of the divider's stroke. This is applicable when the stroke is dashed.\n *\n * @slot - The title content of the divider.\n *\n * @part base - The component's internal wrapper.\n * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke.\n * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke.\n * @part dash-start-line - The component's internal line component of the divider's stroke.\n * @part dash-end-line - The component's internal line component of the divider's stroke.\n *\n * @cssprop --bq-divider--color - Divider color\n * @cssprop --bq-divider--title-marginX - Divider space between title and delimiters\n */\n@Component({\n  tag: 'bq-divider',\n  styleUrl: './scss/bq-divider.scss',\n  shadow: true,\n})\nexport class BqDivider {\n  // Own Properties\n  // ====================\n\n  private titleElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDividerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasTitle: boolean;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the divider has a dashed pattern */\n  @Prop() dashed = false;\n\n  /** The default orientation of the divider */\n  @Prop({ reflect: true }) orientation: TDividerOrientation = 'horizontal';\n\n  /** Set the stroke color of the divider. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) strokeColor?: string = 'stroke--primary';\n\n  /** Set the alignment of the title on the main axis of the divider (horizontal / vertical) */\n  @Prop({ reflect: true }) titleAlignment?: TDividerTitleAlignment = 'middle';\n\n  /** Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashWidth?: number = 12;\n\n  /** Set the gap of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashGap?: number = 7;\n\n  /** Set the thickness of the divider's stroke. Value expressed in px*/\n  @Prop({ reflect: true }) strokeThickness?: number = 1;\n\n  /** Set the min width of the divider's stroke when text is not centered. Value expressed in px */\n  @Prop({ reflect: true }) strokeBasis?: number = 0;\n\n  /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeLinecap?: TDividerStrokeLinecap = 'butt';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('orientation')\n  @Watch('titleAlignment')\n  @Watch('strokeLinecap')\n  checkPropValues() {\n    validatePropValue(DIVIDER_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(DIVIDER_TITLE_ALIGNMENT, 'middle', this.el, 'titleAlignment');\n    validatePropValue(DIVIDER_STROKE_LINECAP, 'butt', this.el, 'strokeLinecap');\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  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot'));\n  };\n\n  private get strokeAttributes() {\n    return {\n      ...this.strokeDrawPositions,\n      ...(this.dashed && { 'stroke-dasharray': this.strokeDasharray }),\n      'stroke-linecap': this.strokeLinecap,\n      'stroke-width': this.strokeThickness,\n    };\n  }\n\n  private get strokeDrawPositions() {\n    const drawOffset = this.strokeThickness / 2;\n    const strokeDrawPositions = {\n      [DIVIDER_ORIENTATION_ENUM.HORIZONTAL]: { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset },\n      [DIVIDER_ORIENTATION_ENUM.VERTICAL]: { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' },\n    };\n    const orientationMap = new Map(Object.entries(strokeDrawPositions));\n\n    return orientationMap.get(this.orientation);\n  }\n\n  private get strokeDasharray() {\n    return `${this.strokeDashWidth}, ${this.strokeDashGap}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.strokeColor && { '--bq-divider--stroke-color': getColorCSSVariable(this.strokeColor) }),\n      ...(this.strokeThickness && { '--bq-divider--stroke-thickness': `${this.strokeThickness}px` }),\n      ...(!isNil(this.strokeBasis) && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-divider': true,\n            [`bq-divider--${this.orientation}`]: true,\n            [`bq-divider--title__${this.titleAlignment}`]: true,\n            'gap-0': !this.hasTitle,\n          }}\n          part=\"base\"\n          ref={(div) => (this.titleElem = div)}\n          role=\"separator\"\n          aria-orientation={this.orientation}\n        >\n          <svg\n            class={{\n              'bq-divider--stroke start': true,\n              '!hidden': this.strokeBasis === 0 && this.titleAlignment === 'start',\n            }}\n            part=\"dash-start\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-start-line\" />\n          </svg>\n          <slot onSlotchange={this.handleSlotChange} />\n          <svg\n            class={{\n              'bq-divider--stroke end': true,\n              '!hidden': !this.hasTitle || (this.strokeBasis === 0 && this.titleAlignment === 'end'),\n            }}\n            part=\"dash-end\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-end-line\" />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;wOAAO,MAAMA,EAAsB,CAAC,aAAc,YAG3C,MAAMC,EAA2B,CACtCC,WAAY,aACZC,SAAU,YAGL,MAAMC,EAA0B,CAAC,QAAS,SAAU,OAGpD,MAAMC,EAAyB,CAAC,SAAU,QAAS,QCX1D,MAAMC,EAAe,0ipB,MCkDRC,EAAS,M,yBAIZC,U,wBAWSC,SAMTC,OAAS,MAGQC,YAAmC,aAGnCC,YAAuB,kBAGvBC,eAA0C,SAG1CC,gBAA2B,GAG3BC,cAAyB,EAGzBC,gBAA2B,EAG3BC,YAAuB,EAGvBC,cAAwC,OAQjE,eAAAC,GACEC,EAAkBpB,EAAqB,aAAcqB,KAAKC,GAAI,eAC9DF,EAAkBhB,EAAyB,SAAUiB,KAAKC,GAAI,kBAC9DF,EAAkBf,EAAwB,OAAQgB,KAAKC,GAAI,gB,CAW7D,iBAAAC,GACEF,KAAKF,iB,CAGP,iBAAAK,GACEH,KAAKF,iB,CAGP,gBAAAM,GACEJ,KAAKK,kB,CAkBCA,iBAAmB,KACzBL,KAAKZ,SAAWkB,EAAeN,KAAKb,cAAgBoB,EAAeP,KAAKb,UAAUqB,cAAc,QAAQ,EAG1G,oBAAYC,GACV,MAAO,IACFT,KAAKU,uBACJV,KAAKX,QAAU,CAAE,mBAAoBW,KAAKW,iBAC9C,iBAAkBX,KAAKH,cACvB,eAAgBG,KAAKL,gB,CAIzB,uBAAYe,GACV,MAAME,EAAaZ,KAAKL,gBAAkB,EAC1C,MAAMe,EAAsB,CAC1B,CAAC9B,EAAyBC,YAAa,CAAEgC,GAAID,EAAYE,GAAI,OAAQC,GAAIH,EAAYI,GAAIJ,GACzF,CAAChC,EAAyBE,UAAW,CAAE+B,GAAID,EAAYE,GAAIF,EAAYG,GAAIH,EAAYI,GAAI,SAE7F,MAAMC,EAAiB,IAAIC,IAAIC,OAAOC,QAAQV,IAE9C,OAAOO,EAAeI,IAAIrB,KAAKV,Y,CAGjC,mBAAYqB,GACV,MAAO,GAAGX,KAAKP,oBAAoBO,KAAKN,e,CAO1C,MAAA4B,GACE,MAAMC,EAAS,IACTvB,KAAKT,aAAe,CAAE,6BAA8BiC,EAAoBxB,KAAKT,iBAC7ES,KAAKL,iBAAmB,CAAE,iCAAkC,GAAGK,KAAKL,yBACnE8B,EAAMzB,KAAKJ,cAAgB,CAAE,6BAA8B,GAAGI,KAAKJ,kBAG1E,OACE8B,EAACC,EAAK,CAAAC,IAAA,2CAAAC,MAAON,GACXG,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,aAAc,KACd,CAAC,eAAe9B,KAAKV,eAAgB,KACrC,CAAC,sBAAsBU,KAAKR,kBAAmB,KAC/C,SAAUQ,KAAKZ,UAEjB2C,KAAK,OACLC,IAAMC,GAASjC,KAAKb,UAAY8C,EAChCC,KAAK,YAAW,mBACElC,KAAKV,aAEvBoC,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,2BAA4B,KAC5B,UAAW9B,KAAKJ,cAAgB,GAAKI,KAAKR,iBAAmB,SAE/DuC,KAAK,cAELL,EAAU,QAAAE,IAAA,8CAAA5B,KAAKS,iBAAkBsB,KAAK,qBAExCL,EAAA,QAAAE,IAAA,2CAAMO,aAAcnC,KAAKK,mBACzBqB,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,yBAA0B,KAC1B,WAAY9B,KAAKZ,UAAaY,KAAKJ,cAAgB,GAAKI,KAAKR,iBAAmB,OAElFuC,KAAK,YAELL,EAAA,QAAAE,IAAA,8CAAU5B,KAAKS,iBAAkBsB,KAAK,oB","ignoreList":[]}

package/dist/beeq/p-f79665be.entry.js

@@ -0,0 +1,6 @@
+/*!
+ * Built by Endavans
+ * © https://beeq.design - Apache 2 License.
+ */
+import{r as a,a as e,h as r}from"./p-BZCppx8n.js";import{a as b}from"./p-_RvVpeh2.js";import{i as n}from"./p-BcPwGxIn.js";import{i as t}from"./p-BxgDLPzX.js";import{v as q}from"./p-zh4P02Kn.js";import{b as i,a as s}from"./p-uqkxeAeG.js";import"./p-B4sM1t6Z.js";const o=["none","left","right","above","bellow"];const l=["small","medium","large"];const d='.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.relative{position:relative}.order-1{order:1}.order-2{order:2}.inline-block{display:inline-block}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-x-m{column-gap:var(--bq-spacing-m)}.gap-y-m{row-gap:var(--bq-spacing-m)}.text-left{text-align:left}.text-right{text-align:right}.bs-\\[--bq-spinner--size-large\\]{block-size:var(--bq-spinner--size-large)}.bs-\\[--bq-spinner--size-medium\\]{block-size:var(--bq-spinner--size-medium)}.bs-\\[--bq-spinner--size-small\\]{block-size:var(--bq-spinner--size-small)}.is-\\[--bq-spinner--size-large\\]{inline-size:var(--bq-spinner--size-large)}.is-\\[--bq-spinner--size-medium\\]{inline-size:var(--bq-spinner--size-medium)}.is-\\[--bq-spinner--size-small\\]{inline-size:var(--bq-spinner--size-small)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-spinner--color:var(--bq-ui--brand);--bq-spinner--size-large:56px;--bq-spinner--size-medium:48px;--bq-spinner--size-small:32px;--bq-spinner--large-text-fontSize:var(--bq-font-size--m);--bq-spinner--medium-text-fontSize:var(--bq-font-size--s);--bq-spinner--small-text-fontSize:var(--bq-font-size--xs);--bq-spinner--text-lineHeight:var(--bq-font-line-height--large);display:inline-block;position:relative}.bq-spinner{display:flex}.bq-spinner--loader.large{block-size:var(--bq-spinner--size-large);inline-size:var(--bq-spinner--size-large)}.bq-spinner--loader.medium{block-size:var(--bq-spinner--size-medium);inline-size:var(--bq-spinner--size-medium)}.bq-spinner--loader.small{block-size:var(--bq-spinner--size-small);inline-size:var(--bq-spinner--size-small)}.text-left,.text-right{align-items:center;flex-direction:row}.text-left.has-text,.text-right.has-text{column-gap:var(--bq-spacing-m)}.text-left .bq-spinner--icon,.text-left .bq-spinner--loader{order:2}.text-left .bq-spinner--text,.text-right .bq-spinner--icon,.text-right .bq-spinner--loader{order:1}.text-right .bq-spinner--text{order:2}.text-above,.text-bellow{align-items:center;flex-direction:column}.text-above.has-text,.text-bellow.has-text{row-gap:var(--bq-spacing-m)}.text-above .bq-spinner--icon,.text-above .bq-spinner--loader{order:2}.text-above .bq-spinner--text,.text-bellow .bq-spinner--icon,.text-bellow .bq-spinner--loader{order:1}.text-bellow .bq-spinner--text{order:2}.is-animated .bq-spinner--icon,.is-animated .bq-spinner--loader>svg{-webkit-animation:spin 1s linear 0s infinite;animation:spin 1s linear 0s infinite}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.static{position:static}.\\!hidden{display:none!important}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-\\[--bq-spinner--color\\]{color:var(--bq-spinner--color)}.text-primary{color:var(--bq-text--primary)}.bs-full{block-size:100%}.is-full{inline-size:100%}';const c=class{constructor(e){a(this,e)}iconSlotElem;slotElem;observer=new MutationObserver((a=>{const[e]=a;this.slotContentLength=e.target.textContent.length}));get el(){return e(this)}hasIconSlot=false;hasSlot=false;slotContentLength=0;animation=true;textPosition="none";size="medium";handleTextPositionProp(){q(o,"none",this.el,"textPosition")}handleSizeProp(){q(l,"medium",this.el,"size");this.setIconSize()}handleHasIconSlot(){this.setIconSize()}componentWillLoad(){this.checkPropValues()}componentDidLoad(){this.handleSlotChange();this.handleIconSlotChange();this.setIconSize()}disconnectedCallback(){this.observer?.disconnect()}handleSlotChange=()=>{if(!this.slotElem)return;this.hasSlot=i(this.slotElem);if(!this.hasSlot)return;const a=this.slotElem.querySelector("slot")??null;if(n(a))return;this.slotContentLength=s(a,{recurse:true}).length;const e=a.assignedNodes({flatten:true});e.forEach((a=>{this.observer.observe(a,{characterData:true,childList:true,subtree:true})}))};handleIconSlotChange=()=>{this.hasIconSlot=i(this.iconSlotElem,"icon")};checkPropValues=()=>{q(o,"none",this.el,"textPosition");q(l,"medium",this.el,"size")};get isTextDisplayed(){return this.textPosition!=="none"}setIconSize(){if(!this.hasIconSlot||!this.bqIcon)return;this.bqIcon.size=parseInt(b(`bq-spinner--size-${this.size}`,this.el)).toString()}get bqIcon(){if(!this.hasIconSlot)return null;const a=this.iconSlotElem.querySelector("slot");return[...a.assignedElements({flatten:true})].filter((a=>t(a,"bq-icon")))[0]}render(){return r("div",{key:"43d182edfba6e1560cace1622f5b5959a198d439",class:{[`bq-spinner ${this.size} text-${this.textPosition}`]:true,"is-animated":this.animation,"has-text":!!this.slotContentLength},part:"base"},!this.hasIconSlot&&r("div",{key:"b8f77defd4c3f196e99155e9f61e1e8b5dab9c2a",class:`bq-spinner--loader ${this.size} relative text-[--bq-spinner--color]`,"aria-label":"Loading...",role:"status"},r("svg",{key:"e57f81573df74f97357694f9a7b8709de3439b8c",class:"bs-full is-full",fill:"currentColor",viewBox:"0 0 48 48"},r("path",{key:"2d08237a6b9d87be8f3a509daf511568c40f9b38",fill:"currentColor",d:"M10.27 7.637c-.937-1.117-.798-2.796.415-3.605a24 24 0 0 1 37.09 23.249c-.2 1.444-1.65 2.301-3.064 1.944-1.414-.356-2.25-1.793-2.096-3.242A18.72 18.72 0 0 0 14.102 8.11c-1.237.77-2.895.643-3.832-.474Z"}),r("path",{key:"c78763d6911efab61760760a790e4e47e66184bf",fill:"currentColor",d:"M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0s24 10.745 24 24ZM5.28 24c0 10.339 8.381 18.72 18.72 18.72 10.339 0 18.72-8.381 18.72-18.72 0-10.339-8.381-18.72-18.72-18.72C13.661 5.28 5.28 13.661 5.28 24Z",opacity:".1"}))),r("span",{key:"6ad85b11af7d89c8bd17957356625046225bc5af",class:{"bq-spinner--icon":true,flex:this.hasIconSlot,"!hidden":!this.hasIconSlot},ref:a=>this.iconSlotElem=a,part:"custom-icon"},r("slot",{key:"4d7e38139cd3c8cfc562295e2c7504630e29e9ab",name:"icon",onSlotchange:this.handleIconSlotChange})),r("span",{key:"e8705b0ddb516dafbe07786ec32fa9ec75b6b598",class:{"bq-spinner--text font-medium leading-regular text-primary":true,"!hidden":!this.isTextDisplayed},part:"text",ref:a=>this.slotElem=a},r("slot",{key:"e8670489f04d5d4fbcddc9d0339817bb6b28bd0c",onSlotchange:this.handleSlotChange})))}static get watchers(){return{textPosition:["handleTextPositionProp"],size:["handleSizeProp"],hasIconSlot:["handleHasIconSlot"]}}};c.style=d;export{c as bq_spinner};
+//# sourceMappingURL=p-f79665be.entry.js.map

package/dist/beeq/{p-912955f0.entry.js.map → p-f79665be.entry.js.map}

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