npm - @beeq/core - Versions diffs - 1.8.3 → 1.8.4 - Mend

@beeq/core 1.8.3 → 1.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (421) hide show

package/dist/beeq/p-5837a0ea.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/beeq/{p-dafa4162.entry.js → p-5e4edb8a.entry.js} RENAMED Viewed

@@ -2,5 +2,5 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import{r as a,c as r,g as b,h as e,a as q}from"./p-4a3784e1.js";import{i as n}from"./p-1c8b6eb4.js";import{i as t}from"./p-57621be1.js";import{g as i}from"./p-c3a0bd23.js";import{v as o}from"./p-687da041.js";import{b as d}from"./p-d7ce7165.js";import"./p-07b82e50.js";const s='.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{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);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;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}}: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.light,.light,:root,[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}.beeq.dark,.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}.endava,[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,[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}@-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-option-group--gapY-list:var(--bq-spacing-xs);display:block}.static{position:static}.flex{display:flex}.flex-col{flex-direction:column}.gap-y-\\[--bq-option-group--gapY-list\\]{row-gap:var(--bq-option-group--gapY-list)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}';const l=s;const c=class{constructor(b){a(this,b);this.bqSelect=r(this,"bqSelect",7)}get el(){return b(this)}ariaLabel="Options";bqSelect;componentDidLoad(){this.el.setAttribute("role","listbox")}onBqSelect(a){const{target:r}=a;if(!t(r,"bq-option")||!n(a,this.el))return;this.bqSelect.emit({item:r,value:r.value})}render(){return e("div",{key:"7b415fc92cba56838bfa2ace82c1d4a4eac64716",class:"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]",part:"base"},e("slot",{key:"545d75c8e46db5d7d5399b690c985a22ef4bad44"}))}};c.style=l;const v=["xsmall","small","medium"];const g=["error","gray","info","success","warning"];const u=["outline","filled"];const f=a=>{const r=v[0];const b=v[1];const e=v[2];const q={[r]:16,[b]:20,[e]:24};return q[a]||q[e]};const m=a=>{const r=g[0];const b=g[1];const e=g[2];const q=g[3];const n=g[4];const t=u[0];const i=u[1];const o={[r]:{[t]:"text--danger",[i]:"text--alt"},[b]:{[t]:"text--primary",[i]:"text--alt"},[e]:{[t]:"text--brand",[i]:"text--alt"},[q]:{[t]:"text--success",[i]:"text--alt"},[n]:{[t]:"text--warning",[i]:"text--alt"}};return o[a]};const y='.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{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);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;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}}: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.light,.light,:root,[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}.beeq.dark,.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}.endava,[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,[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}.pointer-events-none{pointer-events:none}.relative{position:relative}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.hidden{display:none}.select-none{user-select:none}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\\[--bq-tag--medium-gap\\]{gap:var(--bq-tag--medium-gap)}.gap-\\[--bq-tag--small-gap\\]{gap:var(--bq-tag--small-gap)}.rounded-\\[--bq-tag--border-radius\\]{border-radius:var(--bq-tag--border-radius)}.rounded-\\[--bq-tag--small-border-radius\\]{border-radius:var(--bq-tag--small-border-radius)}.border-0{border-width:0}.border-\\[length\\:--bq-tag--border-width\\]{border-width:var(--bq-tag--border-width)}.border-\\[color\\:--bq-tag--border-color\\]{border-color:var(--bq-tag--border-color)}.border-warning{border-color:var(--bq-stroke--warning)}.bg-\\[--bq-tag--background-color\\]{background-color:var(--bq-tag--background-color)}.bg-ui-brand{background-color:var(--bq-ui--brand)}.bg-ui-brand-alt{background-color:var(--bq-ui--brand-alt)}.bg-ui-danger{background-color:var(--bq-ui--danger)}.bg-ui-danger-alt{background-color:var(--bq-ui--danger-alt)}.bg-ui-primary{background-color:var(--bq-ui--primary)}.bg-ui-success{background-color:var(--bq-ui--success)}.bg-ui-success-alt{background-color:var(--bq-ui--success-alt)}.bg-ui-tertiary{background-color:var(--bq-ui--tertiary)}.bg-ui-warning{background-color:var(--bq-ui--warning)}.bg-ui-warning-alt{background-color:var(--bq-ui--warning-alt)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-alt{color:var(--bq-text--alt)}.text-brand{color:var(--bq-text--brand)}.text-danger{color:var(--bq-text--danger)}.text-primary{color:var(--bq-text--primary)}.text-success{color:var(--bq-text--success)}.text-warning{color:var(--bq-text--warning)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bs-fit{block-size:fit-content}.p-b-0{padding-block:0}.p-b-\\[--bq-tag--medium-padding-y\\]{padding-block:var(--bq-tag--medium-padding-y)}.p-b-\\[--bq-tag--small-padding-y\\]{padding-block:var(--bq-tag--small-padding-y)}.p-i-0{padding-inline:0}.p-i-\\[--bq-tag--medium-padding-x\\]{padding-inline:var(--bq-tag--medium-padding-x)}.p-i-\\[--bq-tag--small-padding-x\\]{padding-inline:var(--bq-tag--small-padding-x)}.\\[--bq-tag--border-color\\:--bq-stroke--brand\\]{--bq-tag--border-color:var(--bq-stroke--brand)}.\\[--bq-tag--border-color\\:--bq-stroke--danger\\]{--bq-tag--border-color:var(--bq-stroke--danger)}.\\[--bq-tag--border-color\\:--bq-stroke--tertiary\\]{--bq-tag--border-color:var(--bq-stroke--tertiary)}.\\[--bq-tag--border-color\\:--bq-tag--border-success\\]{--bq-tag--border-color:var(--bq-tag--border-success)}@-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-tag--background-color:var(--bq-ui--secondary);--bq-tag--border-color:transparent;--bq-tag--border-radius:var(--bq-radius--s);--bq-tag--border-style:solid;--bq-tag--border-width:var(--bq-stroke-s);--bq-tag--small-border-radius:var(--bq-radius--xs);--bq-tag--small-gap:var(--bq-spacing-xs2);--bq-tag--small-padding-x:calc(var(--bq-spacing-xs) - var(--bq-tag--border-width));--bq-tag--small-padding-y:calc(var(--bq-spacing-xs3) - var(--bq-tag--border-width));--bq-tag--medium-gap:var(--bq-spacing-xs);--bq-tag--medium-padding-x:calc(var(--bq-spacing-s) - var(--bq-tag--border-width));--bq-tag--medium-padding-y:calc(var(--bq-spacing-xs2) - var(--bq-tag--border-width));display:inline-block;position:relative}:host([removable][hidden]){display:none}.bq-tag{align-items:center;background-color:var(--bq-tag--background-color);border-color:var(--bq-tag--border-color);border-radius:var(--bq-tag--border-radius);border-style:var(--bq-tag--border-style);border-width:var(--bq-tag--border-width);box-sizing:border-box;color:var(--bq-text--primary);display:inline-flex;flex-direction:row;font-weight:var(--bq-font-weight--medium);gap:var(--bq-tag--medium-gap);justify-content:center;line-height:var(--bq-font-line-height--regular);padding-block:var(--bq-tag--medium-padding-y);padding-inline:var(--bq-tag--medium-padding-x);transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none}.bq-tag__small,.bq-tag__xsmall{gap:var(--bq-tag--small-gap);padding-block:var(--bq-tag--small-padding-y);padding-inline:var(--bq-tag--small-padding-x)}.bq-tag__small:not(.has-border),.bq-tag__xsmall:not(.has-border){border-radius:var(--bq-tag--small-border-radius)}.bq-tag__default.is-clickable{cursor:pointer}.bq-tag__default.is-clickable:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-tag__default.is-clickable:enabled:hover{background-color:color-mix(in srgb,var(--bq-tag--background-color),var(--bq-hover) 20%)}.bq-tag__default.is-clickable.active{--bq-tag--background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-tag__default.is-clickable:disabled{border-style:none;cursor:not-allowed;opacity:.6}.bq-tag__error.bq-tag__filled{background-color:var(--bq-ui--danger);color:var(--bq-text--alt)}.bq-tag__error.bq-tag__outline{--bq-tag--border-color:var(--bq-stroke--danger);background-color:var(--bq-ui--danger-alt);color:var(--bq-text--danger)}.bq-tag__gray.bq-tag__filled{background-color:var(--bq-ui--tertiary);color:var(--bq-text--alt)}.bq-tag__gray.bq-tag__outline{--bq-tag--border-color:var(--bq-stroke--tertiary);background-color:var(--bq-ui--primary);color:var(--bq-text--primary)}.bq-tag__info.bq-tag__filled{background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-tag__info.bq-tag__outline{--bq-tag--border-color:var(--bq-stroke--brand);background-color:var(--bq-ui--brand-alt);color:var(--bq-text--brand)}.bq-tag__success.bq-tag__filled{background-color:var(--bq-ui--success);color:var(--bq-text--alt)}.bq-tag__success.bq-tag__outline{--bq-tag--border-color:var(--bq-tag--border-success);background-color:var(--bq-ui--success-alt);color:var(--bq-text--success)}.bq-tag__warning.bq-tag__filled{background-color:var(--bq-ui--warning);color:var(--bq-text--alt)}.bq-tag__warning.bq-tag__outline{background-color:var(--bq-ui--warning-alt);border-color:var(--bq-stroke--warning);color:var(--bq-text--warning)}.bq-tag__close::part(button){block-size:fit-content;border-width:0;padding-block:0;padding-inline:0;pointer-events:none}.bq-tag__prefix ::slotted(bq-icon){--bq-icon--size:var(--bq-tag--icon-prefix-size)!important}.focus-visible\\:focus:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.hover\\:enabled\\:bg-\\[color-mix\\(in_srgb\\2c _var\\(--bq-tag--background-color\\)\\2c _var\\(--bq-hover\\)_20\\%\\)\\]:enabled:hover{background-color:color-mix(in srgb,var(--bq-tag--background-color),var(--bq-hover) 20%)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:border-none:disabled{border-style:none}.disabled\\:opacity-60:disabled{opacity:.6}.\\[\\&\\.active\\]\\:text-alt.active{color:var(--bq-text--alt)}.\\[\\&\\.active\\]\\:\\[--bq-tag--background-color\\:--bq-ui--brand\\].active{--bq-tag--background-color:var(--bq-ui--brand)}.static{position:static}.\\!hidden{display:none!important}.text-m{font-size:var(--bq-font-size--m)}.text-s{font-size:var(--bq-font-size--s)}.text-xs{font-size:var(--bq-font-size--xs)}.outline{outline-style:solid}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.block{display:block}.inline{display:inline}.flex{display:flex}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}';const k=y;const p=class{constructor(b){a(this,b);this.bqClose=r(this,"bqClose",7);this.bqOpen=r(this,"bqOpen",7);this.bqBlur=r(this,"bqBlur",7);this.bqClick=r(this,"bqClick",7);this.bqFocus=r(this,"bqFocus",7)}prefixElem;get el(){return b(this)}hasPrefix=false;border;clickable=false;color;disabled=false;hidden;removable=false;selected=false;size="medium";variant="filled";checkPropValues(){o(v,"medium",this.el,"size");o(u,"filled",this.el,"variant")}bqClose;bqOpen;bqBlur;bqClick;bqFocus;componentWillLoad(){this.checkPropValues()}async hide(){this.handleHide()}async show(){this.handleShow()}handleHide=()=>{if(!this.isRemovable)return;const a=this.bqClose.emit(this.el);if(!a.defaultPrevented){this.hidden=true}};handleShow=()=>{if(!this.isRemovable)return;const a=this.bqOpen.emit(this.el);if(!a.defaultPrevented){this.hidden=false}};handleClick=()=>{if(!this.isClickable||this.disabled)return;const a=this.bqClick.emit(this.el);if(!a.defaultPrevented){this.selected=!this.selected}};handleBlur=()=>{if(!this.isClickable)return;this.bqBlur.emit(this.el)};handleFocus=()=>{if(!this.isClickable)return;this.bqFocus.emit(this.el)};handleSlotChange=()=>{this.hasPrefix=d(this.prefixElem,"prefix")};get isClickable(){return this.clickable&&!this.color&&!this.hasCustomColor&&!this.removable}get isRemovable(){return this.removable&&!this.isClickable}get isHidden(){return this.isRemovable&&this.hidden}get hasCustomColor(){return this.color!==undefined?!g.includes(this.color):false}render(){const a={"--bq-tag--icon-prefix-size":`${f(this.size)}px`,...this.border&&{"--bq-tag--border-radius":`var(--bq-radius--${this.border})`},...this.color&&{"--bq-tag--background-color":i(this.color)??this.color},...this.hasCustomColor&&{"--bq-text--primary":`var(--bq-text--alt)`}};return e(q,{key:"556408ab7a972202194360b2dd53254be4c8b066",style:a,"aria-hidden":this.isHidden?"true":"false",hidden:this.isHidden?"true":"false"},e("button",{key:"846b8f8d6fcd1ad54d5479356aef70d6c89a61dd",class:{[`bq-tag bq-tag__${this.size}`]:true,[`bq-tag__${this.color||"default"} bq-tag__${this.variant}`]:!this.hasCustomColor,"is-clickable":this.isClickable,"is-removable":this.removable,active:this.isClickable&&this.selected,"has-border":!!this.border},disabled:this.disabled,onBlur:this.handleBlur,onClick:this.handleClick,onFocus:this.handleFocus,tabindex:this.isClickable?0:-1,part:"wrapper"},e("span",{key:"2982f72fdfa6a0a1ac624cbd50eeb58ebe9d7e22",class:{"bq-tag__prefix inline-flex":true,"!hidden":!this.hasPrefix},ref:a=>this.prefixElem=a,part:"prefix"},e("slot",{key:"1d602568af493e383ad03b9e1a3635812640674e",name:"prefix",onSlotchange:this.handleSlotChange})),e("div",{key:"b622a5c04842292c6de16a0ca219139d26984ef1",class:{"text-xs":this.size==="xsmall","text-s":this.size==="small","text-m":this.size==="medium"},part:"text"},e("slot",{key:"f66f47415c6e50c2ba2b7ad26f39501b51c012db"})),this.isRemovable&&!this.disabled&&e("bq-button",{key:"a3541f2479028b45ef20bbb3f207ff3331ebb322",class:"bq-tag__close",appearance:"text",size:"small",onClick:this.handleHide,part:"btn-close"},e("bq-icon",{key:"96d9d7d06926d22c86ee631a16f51301baaa21fd",size:f(this.size),name:"x-circle",color:this.color&&!this.hasCustomColor?m(this.color)[this.variant]:"text--primary"}))))}static get delegatesFocus(){return true}static get watchers(){return{size:["checkPropValues"],variant:["checkPropValues"]}}};p.style=k;export{c as bq_option_list,p as bq_tag};
-//# sourceMappingURL=p-dafa4162.entry.js.map
+import{r as a,c as r,g as b,h as e,a as q}from"./p-c05c50bf.js";import{i as n}from"./p-1c8b6eb4.js";import{i as t}from"./p-57621be1.js";import{g as i}from"./p-c3a0bd23.js";import{v as o}from"./p-687da041.js";import{b as d}from"./p-260d4ca0.js";import"./p-07b82e50.js";const s='.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{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);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;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}}: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.light,.light,:root,[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}.beeq.dark,.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}.endava,[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,[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}@-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-option-group--gapY-list:var(--bq-spacing-xs);display:block}.static{position:static}.flex{display:flex}.flex-col{flex-direction:column}.gap-y-\\[--bq-option-group--gapY-list\\]{row-gap:var(--bq-option-group--gapY-list)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}';const l=s;const c=class{constructor(b){a(this,b);this.bqSelect=r(this,"bqSelect",7)}get el(){return b(this)}ariaLabel="Options";bqSelect;componentDidLoad(){this.el.setAttribute("role","listbox")}onBqSelect(a){const{target:r}=a;if(!t(r,"bq-option")||!n(a,this.el))return;this.bqSelect.emit({item:r,value:r.value})}render(){return e("div",{key:"7b415fc92cba56838bfa2ace82c1d4a4eac64716",class:"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]",part:"base"},e("slot",{key:"545d75c8e46db5d7d5399b690c985a22ef4bad44"}))}};c.style=l;const v=["xsmall","small","medium"];const g=["error","gray","info","success","warning"];const u=["outline","filled"];const f=a=>{const r=v[0];const b=v[1];const e=v[2];const q={[r]:16,[b]:20,[e]:24};return q[a]||q[e]};const m=a=>{const r=g[0];const b=g[1];const e=g[2];const q=g[3];const n=g[4];const t=u[0];const i=u[1];const o={[r]:{[t]:"text--danger",[i]:"text--alt"},[b]:{[t]:"text--primary",[i]:"text--alt"},[e]:{[t]:"text--brand",[i]:"text--alt"},[q]:{[t]:"text--success",[i]:"text--alt"},[n]:{[t]:"text--warning",[i]:"text--alt"}};return o[a]};const y='.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{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);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;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}}: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.light,.light,:root,[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}.beeq.dark,.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}.endava,[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,[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}.pointer-events-none{pointer-events:none}.relative{position:relative}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.hidden{display:none}.select-none{user-select:none}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\\[--bq-tag--medium-gap\\]{gap:var(--bq-tag--medium-gap)}.gap-\\[--bq-tag--small-gap\\]{gap:var(--bq-tag--small-gap)}.rounded-\\[--bq-tag--border-radius\\]{border-radius:var(--bq-tag--border-radius)}.rounded-\\[--bq-tag--small-border-radius\\]{border-radius:var(--bq-tag--small-border-radius)}.border-0{border-width:0}.border-\\[length\\:--bq-tag--border-width\\]{border-width:var(--bq-tag--border-width)}.border-\\[color\\:--bq-tag--border-color\\]{border-color:var(--bq-tag--border-color)}.border-warning{border-color:var(--bq-stroke--warning)}.bg-\\[--bq-tag--background-color\\]{background-color:var(--bq-tag--background-color)}.bg-ui-brand{background-color:var(--bq-ui--brand)}.bg-ui-brand-alt{background-color:var(--bq-ui--brand-alt)}.bg-ui-danger{background-color:var(--bq-ui--danger)}.bg-ui-danger-alt{background-color:var(--bq-ui--danger-alt)}.bg-ui-primary{background-color:var(--bq-ui--primary)}.bg-ui-success{background-color:var(--bq-ui--success)}.bg-ui-success-alt{background-color:var(--bq-ui--success-alt)}.bg-ui-tertiary{background-color:var(--bq-ui--tertiary)}.bg-ui-warning{background-color:var(--bq-ui--warning)}.bg-ui-warning-alt{background-color:var(--bq-ui--warning-alt)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-alt{color:var(--bq-text--alt)}.text-brand{color:var(--bq-text--brand)}.text-danger{color:var(--bq-text--danger)}.text-primary{color:var(--bq-text--primary)}.text-success{color:var(--bq-text--success)}.text-warning{color:var(--bq-text--warning)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bs-fit{block-size:fit-content}.p-b-0{padding-block:0}.p-b-\\[--bq-tag--medium-padding-y\\]{padding-block:var(--bq-tag--medium-padding-y)}.p-b-\\[--bq-tag--small-padding-y\\]{padding-block:var(--bq-tag--small-padding-y)}.p-i-0{padding-inline:0}.p-i-\\[--bq-tag--medium-padding-x\\]{padding-inline:var(--bq-tag--medium-padding-x)}.p-i-\\[--bq-tag--small-padding-x\\]{padding-inline:var(--bq-tag--small-padding-x)}.\\[--bq-tag--border-color\\:--bq-stroke--brand\\]{--bq-tag--border-color:var(--bq-stroke--brand)}.\\[--bq-tag--border-color\\:--bq-stroke--danger\\]{--bq-tag--border-color:var(--bq-stroke--danger)}.\\[--bq-tag--border-color\\:--bq-stroke--tertiary\\]{--bq-tag--border-color:var(--bq-stroke--tertiary)}.\\[--bq-tag--border-color\\:--bq-tag--border-success\\]{--bq-tag--border-color:var(--bq-tag--border-success)}@-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-tag--background-color:var(--bq-ui--secondary);--bq-tag--border-color:transparent;--bq-tag--border-radius:var(--bq-radius--s);--bq-tag--border-style:solid;--bq-tag--border-width:var(--bq-stroke-s);--bq-tag--small-border-radius:var(--bq-radius--xs);--bq-tag--small-gap:var(--bq-spacing-xs2);--bq-tag--small-padding-x:calc(var(--bq-spacing-xs) - var(--bq-tag--border-width));--bq-tag--small-padding-y:calc(var(--bq-spacing-xs3) - var(--bq-tag--border-width));--bq-tag--medium-gap:var(--bq-spacing-xs);--bq-tag--medium-padding-x:calc(var(--bq-spacing-s) - var(--bq-tag--border-width));--bq-tag--medium-padding-y:calc(var(--bq-spacing-xs2) - var(--bq-tag--border-width));display:inline-block;position:relative}:host([removable][hidden]){display:none}.bq-tag{align-items:center;background-color:var(--bq-tag--background-color);border-color:var(--bq-tag--border-color);border-radius:var(--bq-tag--border-radius);border-style:var(--bq-tag--border-style);border-width:var(--bq-tag--border-width);box-sizing:border-box;color:var(--bq-text--primary);display:inline-flex;flex-direction:row;font-weight:var(--bq-font-weight--medium);gap:var(--bq-tag--medium-gap);justify-content:center;line-height:var(--bq-font-line-height--regular);padding-block:var(--bq-tag--medium-padding-y);padding-inline:var(--bq-tag--medium-padding-x);transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none}.bq-tag__small,.bq-tag__xsmall{gap:var(--bq-tag--small-gap);padding-block:var(--bq-tag--small-padding-y);padding-inline:var(--bq-tag--small-padding-x)}.bq-tag__small:not(.has-border),.bq-tag__xsmall:not(.has-border){border-radius:var(--bq-tag--small-border-radius)}.bq-tag__default.is-clickable{cursor:pointer}.bq-tag__default.is-clickable:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-tag__default.is-clickable:enabled:hover{background-color:color-mix(in srgb,var(--bq-tag--background-color),var(--bq-hover) 20%)}.bq-tag__default.is-clickable.active{--bq-tag--background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-tag__default.is-clickable:disabled{border-style:none;cursor:not-allowed;opacity:.6}.bq-tag__error.bq-tag__filled{background-color:var(--bq-ui--danger);color:var(--bq-text--alt)}.bq-tag__error.bq-tag__outline{--bq-tag--border-color:var(--bq-stroke--danger);background-color:var(--bq-ui--danger-alt);color:var(--bq-text--danger)}.bq-tag__gray.bq-tag__filled{background-color:var(--bq-ui--tertiary);color:var(--bq-text--alt)}.bq-tag__gray.bq-tag__outline{--bq-tag--border-color:var(--bq-stroke--tertiary);background-color:var(--bq-ui--primary);color:var(--bq-text--primary)}.bq-tag__info.bq-tag__filled{background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-tag__info.bq-tag__outline{--bq-tag--border-color:var(--bq-stroke--brand);background-color:var(--bq-ui--brand-alt);color:var(--bq-text--brand)}.bq-tag__success.bq-tag__filled{background-color:var(--bq-ui--success);color:var(--bq-text--alt)}.bq-tag__success.bq-tag__outline{--bq-tag--border-color:var(--bq-tag--border-success);background-color:var(--bq-ui--success-alt);color:var(--bq-text--success)}.bq-tag__warning.bq-tag__filled{background-color:var(--bq-ui--warning);color:var(--bq-text--alt)}.bq-tag__warning.bq-tag__outline{background-color:var(--bq-ui--warning-alt);border-color:var(--bq-stroke--warning);color:var(--bq-text--warning)}.bq-tag__close::part(button){block-size:fit-content;border-width:0;padding-block:0;padding-inline:0;pointer-events:none}.bq-tag__prefix ::slotted(bq-icon){--bq-icon--size:var(--bq-tag--icon-prefix-size)!important}.focus-visible\\:focus:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.hover\\:enabled\\:bg-\\[color-mix\\(in_srgb\\2c _var\\(--bq-tag--background-color\\)\\2c _var\\(--bq-hover\\)_20\\%\\)\\]:enabled:hover{background-color:color-mix(in srgb,var(--bq-tag--background-color),var(--bq-hover) 20%)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:border-none:disabled{border-style:none}.disabled\\:opacity-60:disabled{opacity:.6}.\\[\\&\\.active\\]\\:text-alt.active{color:var(--bq-text--alt)}.\\[\\&\\.active\\]\\:\\[--bq-tag--background-color\\:--bq-ui--brand\\].active{--bq-tag--background-color:var(--bq-ui--brand)}.static{position:static}.\\!hidden{display:none!important}.text-m{font-size:var(--bq-font-size--m)}.text-s{font-size:var(--bq-font-size--s)}.text-xs{font-size:var(--bq-font-size--xs)}.outline{outline-style:solid}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.block{display:block}.inline{display:inline}.flex{display:flex}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}';const k=y;const p=class{constructor(b){a(this,b);this.bqClose=r(this,"bqClose",7);this.bqOpen=r(this,"bqOpen",7);this.bqBlur=r(this,"bqBlur",7);this.bqClick=r(this,"bqClick",7);this.bqFocus=r(this,"bqFocus",7)}prefixElem;get el(){return b(this)}hasPrefix=false;border;clickable=false;color;disabled=false;hidden;removable=false;selected=false;size="medium";variant="filled";checkPropValues(){o(v,"medium",this.el,"size");o(u,"filled",this.el,"variant")}bqClose;bqOpen;bqBlur;bqClick;bqFocus;componentWillLoad(){this.checkPropValues()}componentDidLoad(){this.handleSlotChange()}async hide(){this.handleHide()}async show(){this.handleShow()}handleHide=()=>{if(!this.isRemovable)return;const a=this.bqClose.emit(this.el);if(!a.defaultPrevented){this.hidden=true}};handleShow=()=>{if(!this.isRemovable)return;const a=this.bqOpen.emit(this.el);if(!a.defaultPrevented){this.hidden=false}};handleClick=()=>{if(!this.isClickable||this.disabled)return;const a=this.bqClick.emit(this.el);if(!a.defaultPrevented){this.selected=!this.selected}};handleBlur=()=>{if(!this.isClickable)return;this.bqBlur.emit(this.el)};handleFocus=()=>{if(!this.isClickable)return;this.bqFocus.emit(this.el)};handleSlotChange=()=>{this.hasPrefix=d(this.prefixElem,"prefix")};get isClickable(){return this.clickable&&!this.color&&!this.hasCustomColor&&!this.removable}get isRemovable(){return this.removable&&!this.isClickable}get isHidden(){return this.isRemovable&&this.hidden}get hasCustomColor(){return this.color!==undefined?!g.includes(this.color):false}render(){const a={"--bq-tag--icon-prefix-size":`${f(this.size)}px`,...this.border&&{"--bq-tag--border-radius":`var(--bq-radius--${this.border})`},...this.color&&{"--bq-tag--background-color":i(this.color)??this.color},...this.hasCustomColor&&{"--bq-text--primary":`var(--bq-text--alt)`}};return e(q,{key:"f9e7905f81aa5b51e6b513df4628fa1a3661745f",style:a,"aria-hidden":this.isHidden?"true":"false",hidden:this.isHidden?"true":"false"},e("button",{key:"f8ea7098e72de24a9c468b32250c81e3243c270b",class:{[`bq-tag bq-tag__${this.size}`]:true,[`bq-tag__${this.color||"default"} bq-tag__${this.variant}`]:!this.hasCustomColor,"is-clickable":this.isClickable,"is-removable":this.removable,active:this.isClickable&&this.selected,"has-border":!!this.border},disabled:this.disabled,onBlur:this.handleBlur,onClick:this.handleClick,onFocus:this.handleFocus,tabindex:this.isClickable?0:-1,part:"wrapper"},e("span",{key:"b256884b691e2a2ca9cfc012c4e5ad3d04a48f60",class:{"bq-tag__prefix inline-flex":true,"!hidden":!this.hasPrefix},ref:a=>this.prefixElem=a,part:"prefix"},e("slot",{key:"ab3751149f91742bff679fb6a538ac2b8ba17ab9",name:"prefix",onSlotchange:this.handleSlotChange})),e("div",{key:"736bc3fe29c2d30f972b7eee608ceb9c71cf92c2",class:{"text-xs":this.size==="xsmall","text-s":this.size==="small","text-m":this.size==="medium"},part:"text"},e("slot",{key:"ef563b69426edbd3557857a55a1995ee14fd160e"})),this.isRemovable&&!this.disabled&&e("bq-button",{key:"26a86daed41bfb13722dfa9e41c6ee9929f8e4a1",class:"bq-tag__close",appearance:"text",size:"small",onClick:this.handleHide,part:"btn-close"},e("bq-icon",{key:"6e175f2455c6a26297befbebddc83a83e433e130",size:f(this.size),name:"x-circle",color:this.color&&!this.hasCustomColor?m(this.color)[this.variant]:"text--primary"}))))}static get delegatesFocus(){return true}static get watchers(){return{size:["checkPropValues"],variant:["checkPropValues"]}}};p.style=k;export{c as bq_option_list,p as bq_tag};
+//# sourceMappingURL=p-5e4edb8a.entry.js.map

package/dist/beeq/{p-dafa4162.entry.js.map → p-5e4edb8a.entry.js.map} RENAMED Viewed

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