npm - @beeq/core - Versions diffs - 1.8.4-beta.0 → 1.8.5-beta.2 - Mend

@beeq/core 1.8.4-beta.0 → 1.8.5-beta.2

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 (898) hide show

package/dist/beeq/p-6195e6e5.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"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-63b4f8f9.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["bqTooltipCss","BqTooltipStyle0","BqTooltip","trigger","panel","arrow","floatingUI","alwaysVisible","distance","hideArrow","placement","sameWidth","displayOn","visible","handleVisibleChange","this","hide","show","handleFloatingUIOptionsChange","init","strategy","componentDidLoad","FloatingUI","skidding","disconnectedCallback","destroy","handleDocumentMouseDown","event","path","composedPath","includes","el","showTooltip","hideTooltip","handleTriggerMouseOver","handleTriggerMouseLeave","handleTriggerOnClick","update","isHidden","render","h","key","class","part","onMouseOver","onMouseLeave","onClick","ref","name","hidden","role"],"sources":["../../packages/beeq/src/components/tooltip/scss/bq-tooltip.scss?tag=bq-tooltip&encapsulation=shadow","../../packages/beeq/src/components/tooltip/bq-tooltip.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Tooltip styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tooltip.variables';\n\n.bq-tooltip--panel {\n @include animation-fade-in;\n @apply pointer-events-none fixed z-[--bq-tooltip--z-index] box-border bg-[--bq-tooltip--background-color];\n @apply is-[--bq-tooltip--width] max-is-[--bq-tooltip--max-width] p-b-[--bq-tooltip--paddingY] p-i-[--bq-tooltip--paddingX];\n @apply text-[length:--bq-tooltip--font-size] leading-[--bq-tooltip--line-height] text-[color:--bq-tooltip--text-color];\n @apply rounded-[--bq-tooltip--border-radius] border-[length:--bq-tooltip--border-width] border-[color:--bq-tooltip--border-color];\n @apply shadow-[shadow:--bq-tooltip--box-shadow];\n}\n\n.bq-tooltip--arrow {\n &,\n &::before {\n @apply absolute -z-[1] bs-2 is-2;\n }\n\n &::before {\n @apply start-0 rotate-45 bg-[--bq-tooltip--background-color] content-empty inset-bs-0;\n }\n}\n","import { Component, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\n\n/**\n * The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.\n *\n * @example How to use it\n * ```html\n * <bq-tooltip visible>\n * Yuhu! I'm a tooltip 🙃\n * <bq-button slot=\"trigger\">Hover me!</bq-button>\n * </bq-tooltip>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/64c562-tooltip\n * @status stable\n *\n * @attr {boolean} always-visible - If true, the tooltip will always be visible\n * @attr {number} distance - Distance between trigger element and tooltip\n * @attr {boolean} hide-arrow - If true, the arrow on the tooltip content won't be shown\n * @attr {\"top\" | \"right\" | \"bottom\" | \"left\"} placement - Defines the position of the tooltip\n * @attr {boolean} same-width - Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element)\n * @attr {\"click\" | \"hover\"} display-on - Set the action when the tooltip should be displayed, on hover (default) or click\n * @attr {boolean} visible - Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger\n *\n * @method show - Shows the tooltip\n * @method hide - Hides the tooltip\n *\n * @slot trigger - The element which displays tooltip on hover\n * @slot - The tooltip content\n *\n * @part base - The component wrapper container inside the shadow DOM\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover\n * @part panel - The `<div>` container that holds the tooltip content\n *\n * @cssprop --bq-tooltip--background-color - Tooltip background color\n * @cssprop --bq-tooltip--box-shadow - Tooltip box shadow\n * @cssprop --bq-tooltip--font-size - Tooltip font size\n * @cssprop --bq-tooltip--line-height - Tooltip line height\n * @cssprop --bq-tooltip--text-color - Tooltip text color\n * @cssprop --bq-tooltip--paddingX - Tooltip horizontal padding\n * @cssprop --bq-tooltip--paddingY - Tooltip vertical padding\n * @cssprop --bq-tooltip--border-color - Tooltip border color\n * @cssprop --bq-tooltip--border-radius - Tooltip border radius\n * @cssprop --bq-tooltip--border-style - Tooltip border style\n * @cssprop --bq-tooltip--border-width - Tooltip border width\n * @cssprop --bq-tooltip--z-index: Tooltip z-index\n */\n@Component({\n tag: 'bq-tooltip',\n styleUrl: './scss/bq-tooltip.scss',\n shadow: true,\n})\nexport class BqTooltip {\n // Own Properties\n // ====================\n private trigger: HTMLElement;\n private panel: HTMLElement;\n private arrow: HTMLElement;\n private floatingUI: FloatingUI;\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqTooltipElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** If true, the tooltip will always be visible */\n @Prop() alwaysVisible?: boolean = false;\n\n /** Distance between trigger element and tooltip */\n @Prop({ reflect: true }) distance?: number = 10;\n\n /** If true, the arrow on the tooltip content won't be shown */\n @Prop({ reflect: true }) hideArrow?: boolean = false;\n\n /* Defines the position of the tooltip */\n @Prop({ reflect: true }) placement?: Placement = 'top';\n\n /** Whether the tooltip should have the same width as the trigger element\n * (applicable only for content shorter than the trigger element) */\n @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n /** Set the action when the tooltip should be displayed, on hover (default) or click */\n @Prop({ reflect: true }) displayOn: 'click' | 'hover' = 'hover';\n\n /**\n * Indicates whether or not the tooltip is visible when the component is first rendered,\n * and when interacting with the trigger\n */\n @Prop({ reflect: true, mutable: true }) visible? = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('visible')\n async handleVisibleChange() {\n if (!this.visible && !this.alwaysVisible) {\n return await this.hide();\n }\n\n await this.show();\n }\n\n @Watch('distance')\n @Watch('hideArrow')\n @Watch('placement')\n @Watch('sameWidth')\n handleFloatingUIOptionsChange() {\n this.floatingUI.init({\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n });\n }\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.floatingUI = new FloatingUI(this.trigger, this.panel, {\n ...(!this.hideArrow && { arrow: this.arrow }),\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n skidding: 0,\n });\n }\n\n disconnectedCallback() {\n this.floatingUI?.destroy();\n }\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'document' })\n async handleDocumentMouseDown(event: MouseEvent) {\n // Close when clicking outside of the close element\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n await this.hide();\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /** Shows the tooltip */\n @Method()\n async show() {\n this.visible = true;\n this.showTooltip();\n }\n\n /** Hides the tooltip */\n @Method()\n async hide() {\n if (this.alwaysVisible) return;\n\n this.visible = false;\n this.hideTooltip();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleTriggerMouseOver = () => {\n (async () => {\n if (this.displayOn !== 'hover') return;\n await this.show();\n })();\n };\n\n private handleTriggerMouseLeave = () => {\n (async () => {\n if (this.displayOn !== 'hover') return;\n await this.hide();\n })();\n };\n\n private handleTriggerOnClick = () => {\n (async () => {\n if (this.displayOn !== 'click') return;\n await (this.visible ? this.hide() : this.show());\n })();\n };\n\n private showTooltip = () => {\n if (!this.panel) return;\n this.floatingUI?.update();\n };\n\n private hideTooltip = () => {\n if (!this.panel) return;\n this.visible = false;\n };\n\n private get isHidden() {\n return !this.visible && !this.alwaysVisible;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-tooltip relative\" part=\"base\">\n {/* TRIGGER */}\n <div\n class=\"bq-tooltip--trigger\"\n onMouseOver={this.handleTriggerMouseOver}\n onMouseLeave={this.handleTriggerMouseLeave}\n onClick={this.handleTriggerOnClick}\n ref={(el) => (this.trigger = el)}\n part=\"trigger\"\n >\n <slot name=\"trigger\" />\n </div>\n {/* PANEL */}\n <div\n class=\"bq-tooltip--panel\"\n aria-hidden={this.isHidden}\n hidden={this.isHidden}\n role=\"tooltip\"\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n >\n {!this.hideArrow && <div class=\"bq-tooltip--arrow\" ref={(el) => (this.arrow = el)} />}\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":";;;;sFAAA,MAAMA,EAAe,oqtBACrB,MAAAC,EAAeD,E,MCsDFE,EAAS,M,yBAGZC,QACAC,MACAC,MACAC,W,wBAcAC,cAA0B,MAGTC,SAAoB,GAGpBC,UAAsB,MAGtBC,UAAwB,MAIxBC,UAAsB,MAGtBC,UAA+B,QAMhBC,QAAW,MAMnD,yBAAMC,GACJ,IAAKC,KAAKF,UAAYE,KAAKR,cAAe,CACxC,aAAaQ,KAAKC,M,OAGdD,KAAKE,M,CAOb,6BAAAC,GACEH,KAAKT,WAAWa,KAAK,CACnBT,UAAWK,KAAKL,UAChBF,SAAUO,KAAKP,SACfG,UAAWI,KAAKJ,UAChBS,SAAU,S,CAWd,gBAAAC,GACEN,KAAKT,WAAa,IAAIgB,EAAWP,KAAKZ,QAASY,KAAKX,MAAO,KACpDW,KAAKN,WAAa,CAAEJ,MAAOU,KAAKV,OACrCK,UAAWK,KAAKL,UAChBF,SAAUO,KAAKP,SACfG,UAAWI,KAAKJ,UAChBS,SAAU,QACVG,SAAU,G,CAId,oBAAAC,GACET,KAAKT,YAAYmB,S,CAMnB,6BAAMC,CAAwBC,GAE5B,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASf,KAAKgB,IAAK,OACrBhB,KAAKC,M,EAaf,UAAMC,GACJF,KAAKF,QAAU,KACfE,KAAKiB,a,CAKP,UAAMhB,GACJ,GAAID,KAAKR,cAAe,OAExBQ,KAAKF,QAAU,MACfE,KAAKkB,a,CAQCC,uBAAyB,KAC/B,WACE,GAAInB,KAAKH,YAAc,QAAS,aAC1BG,KAAKE,MACZ,EAHD,EAGI,EAGEkB,wBAA0B,KAChC,WACE,GAAIpB,KAAKH,YAAc,QAAS,aAC1BG,KAAKC,MACZ,EAHD,EAGI,EAGEoB,qBAAuB,KAC7B,WACE,GAAIrB,KAAKH,YAAc,QAAS,aACzBG,KAAKF,QAAUE,KAAKC,OAASD,KAAKE,OAC1C,EAHD,EAGI,EAGEe,YAAc,KACpB,IAAKjB,KAAKX,MAAO,OACjBW,KAAKT,YAAY+B,QAAQ,EAGnBJ,YAAc,KACpB,IAAKlB,KAAKX,MAAO,OACjBW,KAAKF,QAAU,KAAK,EAGtB,YAAYyB,GACV,OAAQvB,KAAKF,UAAYE,KAAKR,a,CAOhC,MAAAgC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBAAsBC,KAAK,QAEpCH,EAAA,OAAAC,IAAA,2CACEC,MAAM,sBACNE,YAAa7B,KAAKmB,uBAClBW,aAAc9B,KAAKoB,wBACnBW,QAAS/B,KAAKqB,qBACdW,IAAMhB,GAAQhB,KAAKZ,QAAU4B,EAC7BY,KAAK,WAELH,EAAA,QAAAC,IAAA,2CAAMO,KAAK,aAGbR,EAAA,OAAAC,IAAA,2CACEC,MAAM,oBAAmB,cACZ3B,KAAKuB,SAClBW,OAAQlC,KAAKuB,SACbY,KAAK,UACLH,IAAMhB,GAAQhB,KAAKX,MAAQ2B,EAC3BY,KAAK,UAEH5B,KAAKN,WAAa+B,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBK,IAAMhB,GAAQhB,KAAKV,MAAQ0B,IAC9ES,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/beeq/p-648da701.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["STEP_ITEM_STATUS","bqStepItemCss","BqStepItemStyle0","BqStepItem","size","status","type","checkPropValues","validatePropValue","STEPS_SIZE","this","el","handleIconPrefix","bqClick","connectedCallback","componentWillLoad","componentDidLoad","isDisabled","isCurrent","iconElem","querySelector","isHTMLElement","weight","render","h","key","class","part","name","onSlotchange"],"sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- */\n/* Step item styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-step-item.variables';\n\n:host {\n --bq-icon--color: theme(stroke.icon.primary);\n\n @apply bg-primary;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color);\n }\n\n &.current {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-current);\n }\n }\n\n &.completed {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n }\n }\n\n &.error {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-error);\n }\n }\n\n &.disabled {\n ::slotted(bq-icon) {\n opacity: 0.6;\n }\n }\n}\n\n.bq-step-item__prefix.numeric {\n @apply flex items-center justify-center rounded-full;\n @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n @apply text-m font-semibold leading-regular;\n\n &.small {\n @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n }\n\n // Status\n\n &.current {\n @apply bg-[var(--bq-step-item--prefix-color-current)] text-alt;\n }\n\n &.completed {\n @apply bg-ui-success-alt text-success;\n }\n\n &.error {\n @apply bg-ui-danger-alt text-danger;\n }\n\n &.disabled {\n @apply opacity-60;\n }\n}\n\n.bq-step-item__content--description::slotted(*) {\n @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * The Step Item Component is a UI element used to display a single step or stage in a process or task.\n * It should be used inside the Steps component.\n *\n * @example How to use it\n * ```html\n * <bq-step-item status=\"completed\">\n * <bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n * <span>Title</span>\n * <span slot=\"description\">Description</span>\n * </bq-step-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @attr {\"small\" | \"medium\"} size - It defines prefix size\n * @attr {\"completed\" | \"current\" | \"error\" | \"default\" | \"disabled\"} status - It defines step item appearance based on its status\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - It defines the step item type used\n *\n * @event bqClick - Callback handler emitted when the step item is clicked\n *\n * @slot - The step item content\n * @slot prefix - The step item prefix\n * @slot description - The step item description\n *\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n *\n * @cssprop --bq-step-item--prefix-color - Color of the prefix icon\n * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current\n * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed\n * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error\n * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number\n * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number\n */\n@Component({\n tag: 'bq-step-item',\n styleUrl: './scss/bq-step-item.scss',\n shadow: true,\n})\nexport class BqStepItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStepItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** It defines prefix size */\n @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n /** It defines step item appearance based on its status */\n @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n /** It defines the step item type used */\n @Prop({ reflect: true }) type?: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('status')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n this.handleIconPrefix();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler emitted when the step item is clicked */\n @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.checkPropValues();\n }\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconPrefix();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get isDisabled(): boolean {\n return this.status === 'disabled';\n }\n\n private get isCurrent(): boolean {\n return this.status === 'current';\n }\n\n private handleIconPrefix = () => {\n const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n iconElem.size = this.size === 'small' ? 24 : 32;\n iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class={{\n 'bq-step-item flex gap-s': true,\n [`bq-step-item--${this.status}`]: true,\n 'pointer-events-none opacity-60': this.isDisabled,\n }}\n part=\"base\"\n >\n <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n </div>\n <div class=\"bq-step-item__content\">\n {/* TITLE */}\n <div\n class={{\n 'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n 'pointer-events-none': this.isDisabled,\n 'text-brand': this.isCurrent,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/* DESCRIPTION */}\n <div\n class={{\n 'bq-step-item__content--description text-s leading-regular opacity-60': true,\n 'opacity-60': this.isDisabled,\n }}\n part=\"description\"\n >\n <slot name=\"description\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"mappings":";;;;qKAAO,MAAMA,EAAmB,CAAC,UAAW,UAAW,YAAa,QAAS,YCA7E,MAAMC,EAAgB,mguBACtB,MAAAC,EAAeD,E,MC+CFE,EAAU,M,kFAgBIC,KAAoB,SAGpBC,OAA2B,UAG3BC,KAOzB,eAAAC,GACEC,EAAkBC,EAAY,SAAUC,KAAKC,GAAI,QACjDH,EAAkBR,EAAkB,UAAWU,KAAKC,GAAI,UAExDD,KAAKE,kB,CAQEC,QAMT,iBAAAC,GACEJ,KAAKH,iB,CAGP,iBAAAQ,GACEL,KAAKH,iB,CAGP,gBAAAS,GACEN,KAAKE,kB,CAkBP,cAAYK,GACV,OAAOP,KAAKL,SAAW,U,CAGzB,aAAYa,GACV,OAAOR,KAAKL,SAAW,S,CAGjBO,iBAAmB,KACzB,MAAMO,EAAWT,KAAKC,GAAGS,cAAc,mBACvC,IAAKD,IAAaE,EAAcF,EAAU,WAAY,OAEtDA,EAASf,KAAOM,KAAKN,OAAS,QAAU,GAAK,GAC7Ce,EAASG,OAASZ,KAAKQ,UAAY,OAAS,SAAS,EAOvD,MAAAK,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,0BAA2B,KAC3B,CAAC,iBAAiBhB,KAAKL,UAAW,KAClC,iCAAkCK,KAAKO,YAEzCU,KAAK,QAELH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iCAAiChB,KAAKJ,QAAQI,KAAKN,QAAQM,KAAKL,UAC1EmB,EAAA,QAAAC,IAAA,2CAAMG,KAAK,SAASC,aAAcnB,KAAKE,oBAEzCY,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBAETF,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,0EAA2E,KAC3E,sBAAuBhB,KAAKO,WAC5B,aAAcP,KAAKQ,WAErBS,KAAK,SAELH,EAAA,QAAAC,IAAA,8CAGFD,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,uEAAwE,KACxE,aAAchB,KAAKO,YAErBU,KAAK,eAELH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,kB","ignoreList":[]}

package/dist/beeq/p-6764f11f.entry.js DELETED Viewed

@@ -1,6 +0,0 @@
-/*!
- * Built by Endavans
- * © https://beeq.design - Apache 2 License.
- */
-import{r as a,g as r,h as e}from"./p-4a5c07f9.js";import{b}from"./p-260d4ca0.js";const t='.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{--paddingY:var(--bq-spacing-xl);--subtitle-borderBlockEnd:1px solid var(--bq-stroke--primary);--subtitle-fontWeight:var(--bq-font-weight--medium);--subtitle-textColor:var(--bq-text--secondary);--subtitle-textSize:var(--bq-font-size--l);--title-fontWeight:var(--bq-font-weight--bold);--title-lineHeight:var(--bq-font-line-height--regular);--title-textColor:var(--bq-text--primary);--title-textSize:var(--bq-font-size--xxl);display:block}.static{position:static}.flex{display:flex}.\\!hidden{display:none!important}.hidden{display:none}.flex-grow{flex-grow:1}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-xs{gap:var(--bq-spacing-xs)}.text-\\[length\\:--subtitle-textSize\\]{font-size:var(--subtitle-textSize)}.text-\\[length\\:--title-textSize\\]{font-size:var(--title-textSize)}.font-\\[--subtitle-fontWeight\\]{font-weight:var(--subtitle-fontWeight)}.font-\\[--title-fontWeight\\]{font-weight:var(--title-fontWeight)}.leading-\\[--title-lineHeight\\]{line-height:var(--title-lineHeight)}.text-\\[color\\:--subtitle-textColor\\]{color:var(--subtitle-textColor)}.text-\\[color\\:--title-textColor\\]{color:var(--title-textColor)}.p-b-\\[--paddingY\\]{padding-block:var(--paddingY)}.p-b-xs2{padding-block:var(--bq-spacing-xs2)}.p-i-xs2{padding-inline:var(--bq-spacing-xs2)}.\\[border-block-end\\:--subtitle-borderBlockEnd\\]{border-block-end:var(--subtitle-borderBlockEnd)}.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 q=t;const n=class{constructor(r){a(this,r)}backNavigationElem;suffixElem;subTitleElem;get el(){return r(this)}haveBackNavigation=false;hasSuffix=false;hasSubTitle=false;componentDidLoad(){this.handleSlotChange()}handleSlotChange=()=>{this.haveBackNavigation=b(this.backNavigationElem,"back");this.hasSuffix=b(this.suffixElem,"suffix");this.hasSubTitle=b(this.subTitleElem,"sub-title")};render(){return e("div",{key:"234aa6eeb328738441f3545b61257ec3a14c51cf",class:"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]",part:"base"},e("div",{key:"867d26e55922753a1ff3d9b9f15167299621d49b",class:{flex:true,"!hidden":!this.haveBackNavigation},ref:a=>this.backNavigationElem=a,part:"back"},e("slot",{key:"61eb7494f390391b228a899227bf0680f448ba40",name:"back",onSlotchange:this.handleSlotChange})),e("div",{key:"b57edbfbdbea5f00109e24f44ba6a6a2a0b8f3d8",class:"flex flex-grow flex-col gap-xs",part:"content"},e("div",{key:"c28bc08aa42afce9dea80be4766b41f8d52462db",class:"flex items-center gap-xs",part:"title-suffix"},e("h1",{key:"a0e1bd317189dc33a6deb4fd7d76c2aec3c6fa51",class:"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]",part:"title"},e("slot",{key:"24ff8fc569dc979b33e8bc8e02574f78e66fb450"})),e("div",{key:"3c0538de7c6829880a5110568cbb16ccc1645dd4",class:{"flex flex-grow gap-xs p-b-xs2 p-i-xs2":true,"!hidden":!this.hasSuffix},ref:a=>this.suffixElem=a,part:"suffix"},e("slot",{key:"78dca26a8830e20704d7076344e7633792987aa3",name:"suffix",onSlotchange:this.handleSlotChange}))),e("div",{key:"85ebbeb207db40c0a276ab6b0640151189287fdb",class:{"title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]":true,hidden:!this.hasSubTitle},ref:a=>this.subTitleElem=a,part:"sub-title"},e("slot",{key:"7e4aa79164d537dba69db069cd760897a92bdf95",name:"sub-title",onSlotchange:this.handleSlotChange}))))}};n.style=q;export{n as bq_page_title};
-//# sourceMappingURL=p-6764f11f.entry.js.map

package/dist/beeq/p-6764f11f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["bqPageTitleCss","BqPageTitleStyle0","BqPageTitle","backNavigationElem","suffixElem","subTitleElem","haveBackNavigation","hasSuffix","hasSubTitle","componentDidLoad","this","handleSlotChange","hasSlotContent","render","h","key","class","part","flex","ref","divElem","name","onSlotchange","hidden"],"sources":["../../packages/beeq/src/components/page-title/scss/bq-page-title.scss?tag=bq-page-title&encapsulation=shadow","../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Page title styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-page-title.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/**\n * The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n *\n * @example How to use it\n * ```html\n * <bq-page-title>\n * <bq-button appearance=\"link\" slot=\"back\">\n * <bq-icon\n * color=\"text--primary\"\n * name=\"arrow-left\"\n * weight=\"bold\"\n * role=\"img\"\n * title=\"Navigate back to the previous page\"\n * ></bq-icon>\n * </bq-button>\n * Title\n * <div slot=\"sub-title\">Sub-title</div>\n * </bq-page-title>\n * ```\n *\n * @documentation https://storybook.beeq.design/?path=/docs/components-page-title--overview\n * @status stable\n *\n * @slot back - The back navigation button.\n * @slot - The main title content.\n * @slot sub-title - The sub-title content.\n * @slot suffix - The suffix content.\n *\n * @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n *\n * @cssprop --paddingY - Padding top and bottom of the page title wrapper\n * @cssprop --subtitle-borderBlockEnd - Page title border end color\n * @cssprop --subtitle-fontWeight - Page title font weight for subtitle\n * @cssprop --subtitle-textColor - Page title color for sub-title\n * @cssprop --subtitle-textSize - Page title text size for subtitle\n * @cssprop --title-fontWeight - Page title font weight for title\n * @cssprop --title-lineHeight - Page title text line height\n * @cssprop --title-textColor - Page title color for title\n * @cssprop --title-textSize - Page title text size for title\n */\n@Component({\n tag: 'bq-page-title',\n styleUrl: './scss/bq-page-title.scss',\n shadow: true,\n})\nexport class BqPageTitle {\n // Own Properties\n // ====================\n\n private backNavigationElem: HTMLElement;\n private suffixElem: HTMLElement;\n private subTitleElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqPageTitleElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private haveBackNavigation = false;\n @State() private hasSuffix = false;\n @State() private hasSubTitle = false;\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleSlotChange = () => {\n this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n {/* Back navigation button */}\n <div\n class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n ref={(divElem) => (this.backNavigationElem = divElem)}\n part=\"back\"\n >\n <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n {/* Title */}\n <h1\n class=\"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]\"\n part=\"title\"\n >\n <slot />\n </h1>\n {/* Suffix */}\n <div\n class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n ref={(divElem) => (this.suffixElem = divElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/* Sub-title */}\n <div\n class={{\n 'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':\n true,\n hidden: !this.hasSubTitle,\n }}\n ref={(divElem) => (this.subTitleElem = divElem)}\n part=\"sub-title\"\n >\n <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"mappings":";;;;iFAAA,MAAMA,EAAiB,0zoBACvB,MAAAC,EAAeD,E,MCsDFE,EAAW,M,yBAIdC,mBACAC,WACAC,a,wBAWSC,mBAAqB,MACrBC,UAAY,MACZC,YAAc,MAgB/B,gBAAAC,GACEC,KAAKC,kB,CAkBCA,iBAAmB,KACzBD,KAAKJ,mBAAqBM,EAAeF,KAAKP,mBAAoB,QAClEO,KAAKH,UAAYK,EAAeF,KAAKN,WAAY,UACjDM,KAAKF,YAAcI,EAAeF,KAAKL,aAAc,YAAY,EAOnE,MAAAQ,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4EAA4EC,KAAK,QAE1FH,EAAA,OAAAC,IAAA,2CACEC,MAAO,CAAEE,KAAM,KAAM,WAAYR,KAAKJ,oBACtCa,IAAMC,GAAaV,KAAKP,mBAAqBiB,EAC7CH,KAAK,QAELH,EAAA,QAAAC,IAAA,2CAAMM,KAAK,OAAOC,aAAcZ,KAAKC,oBAEvCG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iCAAiCC,KAAK,WAC/CH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2BAA2BC,KAAK,gBAEzCH,EAAA,MAAAC,IAAA,2CACEC,MAAM,kIACNC,KAAK,SAELH,EAAA,QAAAC,IAAA,8CAGFD,EAAA,OAAAC,IAAA,2CACEC,MAAO,CAAE,wCAAyC,KAAM,WAAYN,KAAKH,WACzEY,IAAMC,GAAaV,KAAKN,WAAagB,EACrCH,KAAK,UAELH,EAAA,QAAAC,IAAA,2CAAMM,KAAK,SAASC,aAAcZ,KAAKC,qBAI3CG,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,2IACE,KACFO,QAASb,KAAKF,aAEhBW,IAAMC,GAAaV,KAAKL,aAAee,EACvCH,KAAK,aAELH,EAAA,QAAAC,IAAA,2CAAMM,KAAK,YAAYC,aAAcZ,KAAKC,qB","ignoreList":[]}

package/dist/beeq/p-7478cf0a.entry.js DELETED Viewed

@@ -1,6 +0,0 @@
-/*!
- * Built by Endavans
- * © https://beeq.design - Apache 2 License.
- */
-import{r as a,c as r,g as e,h as n}from"./p-4a5c07f9.js";import{v as o}from"./p-687da041.js";import{b}from"./p-260d4ca0.js";const i=["small","medium"];const d=["filled","ghost"];class t{el;header;panel;animation;isClosing;isExpanding;animationOptions={duration:200,easing:"ease-in-out"};constructor(a){this.el=a;this.header=a.querySelector("summary");this.panel=a.querySelector(".bq-accordion__body");this.animation=null;this.isClosing=false;this.isExpanding=false}open(){if(!this.isClosing&&this.el.open)return;this.el.style.height=`${this.el.offsetHeight}px`;this.el.open=true;window.requestAnimationFrame((()=>this.expand()))}close(){if(!this.isExpanding&&!this.el.open)return;this.isClosing=true;const a=`${this.el.offsetHeight}px`;const r=`${this.header.offsetHeight}px`;if(this.animation){this.animation.cancel()}this.animation=this.el.animate({height:[a,r]},this.animationOptions);this.animation.onfinish=()=>this.onAnimationFinish(false);this.animation.oncancel=()=>this.isClosing=false}expand(){this.isExpanding=true;const a=`${this.el.offsetHeight}px`;const r=`${this.header.offsetHeight+this.panel.offsetHeight}px`;if(this.animation){this.animation.cancel()}this.animation=this.el.animate({height:[a,r]},this.animationOptions);this.animation.onfinish=()=>this.onAnimationFinish(true);this.animation.oncancel=()=>this.isExpanding=false}onAnimationFinish(a){this.el.open=a;this.animation=null;this.isClosing=false;this.isExpanding=false;this.el.removeAttribute("style");const r=new Event("accordionTransitionEnd",{bubbles:false,composed:true});this.el.dispatchEvent(r)}}const c='.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}.block{display:block}.flex{display:flex}.hidden{display:none}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.list-none{list-style-type:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\\[--bq-accordion--medium-gap\\]{gap:var(--bq-accordion--medium-gap)}.gap-\\[--bq-accordion--small-gap\\]{gap:var(--bq-accordion--small-gap)}.overflow-clip{overflow:clip}.rounded-ee-\\[--bq-accordion--medium-radius\\]{border-end-end-radius:var(--bq-accordion--medium-radius)}.rounded-ee-\\[--bq-accordion--small-radius\\]{border-end-end-radius:var(--bq-accordion--small-radius)}.rounded-ee-\\[0px\\]{border-end-end-radius:0}.rounded-es-\\[--bq-accordion--medium-radius\\]{border-end-start-radius:var(--bq-accordion--medium-radius)}.rounded-es-\\[--bq-accordion--small-radius\\]{border-end-start-radius:var(--bq-accordion--small-radius)}.rounded-es-\\[0px\\]{border-end-start-radius:0}.rounded-se-\\[--bq-accordion--medium-radius\\]{border-start-end-radius:var(--bq-accordion--medium-radius)}.rounded-se-\\[--bq-accordion--small-radius\\]{border-start-end-radius:var(--bq-accordion--small-radius)}.rounded-se-\\[0px\\]{border-start-end-radius:0}.rounded-ss-\\[--bq-accordion--medium-radius\\]{border-start-start-radius:var(--bq-accordion--medium-radius)}.rounded-ss-\\[--bq-accordion--small-radius\\]{border-start-start-radius:var(--bq-accordion--small-radius)}.rounded-ss-\\[0px\\]{border-start-start-radius:0}.border-\\[length\\:--bq-accordion--collapsed-border-width\\]{border-width:var(--bq-accordion--collapsed-border-width)}.border-\\[length\\:--bq-accordion--expanded-border-width\\]{border-width:var(--bq-accordion--expanded-border-width)}.border-\\[length\\:--bq-accordion--panel-filled-border-width\\]{border-width:var(--bq-accordion--panel-filled-border-width)}.border-\\[length\\:--bq-accordion--panel-ghost-border-width\\]{border-width:var(--bq-accordion--panel-ghost-border-width)}.border-\\[color\\:--bq-accordion--collapsed-border-color\\]{border-color:var(--bq-accordion--collapsed-border-color)}.border-\\[color\\:--bq-accordion--expanded-border-color\\]{border-color:var(--bq-accordion--expanded-border-color)}.border-\\[color\\:--bq-accordion--panel-filled-border-color\\]{border-color:var(--bq-accordion--panel-filled-border-color)}.border-\\[color\\:--bq-accordion--panel-ghost-border-color\\]{border-color:var(--bq-accordion--panel-ghost-border-color)}.bg-\\[--bq-accordion--filled-collapsed-background\\]{background-color:var(--bq-accordion--filled-collapsed-background)}.bg-\\[--bq-accordion--filled-expanded-background\\]{background-color:var(--bq-accordion--filled-expanded-background)}.bg-\\[--bq-accordion--ghost-collapsed-background\\]{background-color:var(--bq-accordion--ghost-collapsed-background)}.bg-\\[--bq-accordion--ghost-expanded-background\\]{background-color:var(--bq-accordion--ghost-expanded-background)}.pe-\\[--bq-accordion--medium-padding-end\\]{padding-inline-end:var(--bq-accordion--medium-padding-end)}.pe-\\[--bq-accordion--panel-medium-filled-padding-end\\]{padding-inline-end:var(--bq-accordion--panel-medium-filled-padding-end)}.pe-\\[--bq-accordion--panel-medium-ghost-padding-end\\]{padding-inline-end:var(--bq-accordion--panel-medium-ghost-padding-end)}.pe-\\[--bq-accordion--panel-small-filled-padding-end\\]{padding-inline-end:var(--bq-accordion--panel-small-filled-padding-end)}.pe-\\[--bq-accordion--panel-small-ghost-padding-end\\]{padding-inline-end:var(--bq-accordion--panel-small-ghost-padding-end)}.pe-\\[--bq-accordion--small-padding-end\\]{padding-inline-end:var(--bq-accordion--small-padding-end)}.ps-\\[--bq-accordion--medium-padding-start\\]{padding-inline-start:var(--bq-accordion--medium-padding-start)}.ps-\\[--bq-accordion--panel-medium-filled-padding-start\\]{padding-inline-start:var(--bq-accordion--panel-medium-filled-padding-start)}.ps-\\[--bq-accordion--panel-medium-ghost-padding-start\\]{padding-inline-start:var(--bq-accordion--panel-medium-ghost-padding-start)}.ps-\\[--bq-accordion--panel-small-filled-padding-start\\]{padding-inline-start:var(--bq-accordion--panel-small-filled-padding-start)}.ps-\\[--bq-accordion--panel-small-ghost-padding-start\\]{padding-inline-start:var(--bq-accordion--panel-small-ghost-padding-start)}.ps-\\[--bq-accordion--small-padding-start\\]{padding-inline-start:var(--bq-accordion--small-padding-start)}.text-\\[--bq-accordion--filled-collapsed-text-color\\]{color:var(--bq-accordion--filled-collapsed-text-color)}.text-\\[--bq-accordion--filled-expanded-text-color\\]{color:var(--bq-accordion--filled-expanded-text-color)}.text-\\[--bq-accordion--ghost-collapsed-text-color\\]{color:var(--bq-accordion--ghost-collapsed-text-color)}.text-\\[--bq-accordion--ghost-expanded-text-color\\]{color:var(--bq-accordion--ghost-expanded-text-color)}.opacity-60{opacity:.6}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.bs-0{block-size:0}.bs-auto{block-size:auto}.p-b-\\[--bq-accordion--medium-padding-y\\]{padding-block:var(--bq-accordion--medium-padding-y)}.p-b-\\[--bq-accordion--panel-medium-filled-padding-y\\]{padding-block:var(--bq-accordion--panel-medium-filled-padding-y)}.p-b-\\[--bq-accordion--panel-medium-ghost-padding-y\\]{padding-block:var(--bq-accordion--panel-medium-ghost-padding-y)}.p-b-\\[--bq-accordion--panel-small-filled-padding-y\\]{padding-block:var(--bq-accordion--panel-small-filled-padding-y)}.p-b-\\[--bq-accordion--panel-small-ghost-padding-y\\]{padding-block:var(--bq-accordion--panel-small-ghost-padding-y)}.p-b-\\[--bq-accordion--small-padding-y\\]{padding-block:var(--bq-accordion--small-padding-y)}.\\[transition-behavior\\:allow-discrete\\]{transition-behavior:allow-discrete}@-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-accordion--small-padding-y:var(--bq-spacing-xs);--bq-accordion--small-padding-start:var(--bq-spacing-s);--bq-accordion--small-padding-end:var(--bq-spacing-s);--bq-accordion--small-gap:var(--bq-spacing-xs);--bq-accordion--small-radius:var(--bq-radius--xs);--bq-accordion--medium-padding-y:var(--bq-spacing-s);--bq-accordion--medium-padding-start:var(--bq-spacing-m);--bq-accordion--medium-padding-end:var(--bq-spacing-m);--bq-accordion--medium-gap:var(--bq-spacing-m);--bq-accordion--medium-radius:var(--bq-radius--xs);--bq-accordion--collapsed-border-color:transparent;--bq-accordion--collapsed-border-style:none;--bq-accordion--collapsed-border-width:unset;--bq-accordion--expanded-border-color:transparent;--bq-accordion--expanded-border-style:none;--bq-accordion--expanded-border-width:unset;--bq-accordion--filled-collapsed-background:var(--bq-ui--secondary);--bq-accordion--filled-collapsed-text-color:var(--bq-text--primary);--bq-accordion--filled-expanded-background:var(--bq-ui--brand-alt);--bq-accordion--filled-expanded-text-color:var(--bq-text--primary);--bq-accordion--ghost-collapsed-background:transparent;--bq-accordion--ghost-collapsed-text-color:var(--bq-text--primary);--bq-accordion--ghost-expanded-background:transparent;--bq-accordion--ghost-expanded-text-color:var(--bq-text--brand);--bq-accordion--panel-filled-border-color:var(--bq-stroke--primary);--bq-accordion--panel-filled-border-style:solid;--bq-accordion--panel-filled-border-width:var(--bq-stroke-s);--bq-accordion--panel-small-filled-padding-y:var(--bq-spacing-s);--bq-accordion--panel-small-filled-padding-start:var(--bq-spacing-s);--bq-accordion--panel-small-filled-padding-end:var(--bq-spacing-s);--bq-accordion--panel-medium-filled-padding-y:var(--bq-spacing-m);--bq-accordion--panel-medium-filled-padding-start:var(--bq-spacing-m);--bq-accordion--panel-medium-filled-padding-end:var(--bq-spacing-m);--bq-accordion--panel-ghost-border-color:transparent;--bq-accordion--panel-ghost-border-style:none;--bq-accordion--panel-ghost-border-width:unset;--bq-accordion--panel-small-ghost-padding-y:var(--bq-spacing-s);--bq-accordion--panel-small-ghost-padding-start:var(--bq-spacing-l);--bq-accordion--panel-small-ghost-padding-end:var(--bq-spacing-l);--bq-accordion--panel-medium-ghost-padding-y:var(--bq-spacing-m);--bq-accordion--panel-medium-ghost-padding-start:var(--bq-spacing-xl);--bq-accordion--panel-medium-ghost-padding-end:var(--bq-spacing-xl);display:block}@supports (interpolate-size:allow-keywords){.bq-accordion:not(.no-animation){interpolate-size:allow-keywords}}.bq-accordion.disabled{cursor:not-allowed;opacity:.6}.bq-accordion.disabled .bq-accordion__header{pointer-events:none}.bq-accordion.small .bq-accordion__header{border-end-end-radius:var(--bq-accordion--small-radius);border-end-start-radius:var(--bq-accordion--small-radius);border-start-end-radius:var(--bq-accordion--small-radius);border-start-start-radius:var(--bq-accordion--small-radius);gap:var(--bq-accordion--small-gap);padding-block:var(--bq-accordion--small-padding-y);padding-inline-end:var(--bq-accordion--small-padding-end);padding-inline-start:var(--bq-accordion--small-padding-start)}.bq-accordion.medium .bq-accordion__header{border-end-end-radius:var(--bq-accordion--medium-radius);border-end-start-radius:var(--bq-accordion--medium-radius);border-start-end-radius:var(--bq-accordion--medium-radius);border-start-start-radius:var(--bq-accordion--medium-radius);gap:var(--bq-accordion--medium-gap);padding-block:var(--bq-accordion--medium-padding-y);padding-inline-end:var(--bq-accordion--medium-padding-end);padding-inline-start:var(--bq-accordion--medium-padding-start)}.bq-accordion[open] .bq-accordion__header{border-color:var(--bq-accordion--expanded-border-color);border-end-end-radius:0;border-end-start-radius:0;border-style:var(--bq-accordion--expanded-border-style);border-width:var(--bq-accordion--expanded-border-width)}.bq-accordion.small .bq-accordion__content{border-end-end-radius:var(--bq-accordion--small-radius);border-end-start-radius:var(--bq-accordion--small-radius);border-start-end-radius:0;border-start-start-radius:0}.bq-accordion.medium .bq-accordion__content{border-end-end-radius:var(--bq-accordion--medium-radius);border-end-start-radius:var(--bq-accordion--medium-radius);border-start-end-radius:0;border-start-start-radius:0}.bq-accordion.filled .bq-accordion__header{background-color:var(--bq-accordion--filled-collapsed-background)}.bq-accordion.filled .bq-accordion__header:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-accordion.filled .bq-accordion__header--text{color:var(--bq-accordion--filled-collapsed-text-color)}.bq-accordion.filled .bq-accordion__content{border-color:var(--bq-accordion--panel-filled-border-color);border-style:var(--bq-accordion--panel-filled-border-style);border-width:var(--bq-accordion--panel-filled-border-width)}.bq-accordion.filled[open] .bq-accordion__header{background-color:var(--bq-accordion--filled-expanded-background)}.bq-accordion.filled[open] .bq-accordion__header:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-accordion.filled[open] .bq-accordion__header--text{color:var(--bq-accordion--filled-expanded-text-color)}.bq-accordion.ghost .bq-accordion__header{background-color:var(--bq-accordion--ghost-collapsed-background)}.bq-accordion.ghost .bq-accordion__header:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-accordion.ghost .bq-accordion__header--text{color:var(--bq-accordion--ghost-collapsed-text-color)}.bq-accordion.ghost .bq-accordion__content{border-color:var(--bq-accordion--panel-ghost-border-color);border-style:var(--bq-accordion--panel-ghost-border-style);border-width:var(--bq-accordion--panel-ghost-border-width)}.bq-accordion.ghost[open] .bq-accordion__header{background-color:var(--bq-accordion--ghost-expanded-background)}.bq-accordion.ghost[open] .bq-accordion__header:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-accordion.ghost[open] .bq-accordion__header--text{color:var(--bq-accordion--ghost-expanded-text-color)}.bq-accordion.small.filled .bq-accordion__content{padding-block:var(--bq-accordion--panel-small-filled-padding-y);padding-inline-end:var(--bq-accordion--panel-small-filled-padding-end);padding-inline-start:var(--bq-accordion--panel-small-filled-padding-start)}.bq-accordion.medium.filled .bq-accordion__content{padding-block:var(--bq-accordion--panel-medium-filled-padding-y);padding-inline-end:var(--bq-accordion--panel-medium-filled-padding-end);padding-inline-start:var(--bq-accordion--panel-medium-filled-padding-start)}.bq-accordion.small.ghost .bq-accordion__content{padding-block:var(--bq-accordion--panel-small-ghost-padding-y);padding-inline-end:var(--bq-accordion--panel-small-ghost-padding-end);padding-inline-start:var(--bq-accordion--panel-small-ghost-padding-start)}.bq-accordion.medium.ghost .bq-accordion__content{padding-block:var(--bq-accordion--panel-medium-ghost-padding-y);padding-inline-end:var(--bq-accordion--panel-medium-ghost-padding-end);padding-inline-start:var(--bq-accordion--panel-medium-ghost-padding-start)}.bq-accordion::details-content{transition-behavior:allow-discrete;block-size:0;display:block;overflow:clip;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-accordion[open]::details-content{block-size:auto}.bq-accordion__header{--bq-ring-offset-width:-2px;align-items:center;border-color:var(--bq-accordion--collapsed-border-color);border-style:var(--bq-accordion--collapsed-border-style);border-width:var(--bq-accordion--collapsed-border-width);cursor:pointer;display:flex;list-style-type:none;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-accordion__header: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-accordion__header::-webkit-details-marker,.bq-accordion__header::marker{display:none}.bq-accordion__header--text{flex:1 1 0%}.bq-accordion__header--prefix,.bq-accordion__header--suffix{align-items:center;display:flex;justify-content:center}.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\\:bg-hover-ui-secondary:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}@supports (interpolate-size:allow-keywords){.supports-\\[interpolate-size\\:_allow-keywords\\]\\:\\[interpolate-size\\:_allow-keywords\\]{interpolate-size:allow-keywords}}.rotate-180{--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;--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.collapse{visibility:collapse}.static{position:static}.\\!hidden{display:none!important}.overflow-hidden{overflow:hidden}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.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 s=c;const q=class{constructor(e){a(this,e);this.bqBlur=r(this,"bqBlur",7);this.bqFocus=r(this,"bqFocus",7);this.bqOpen=r(this,"bqOpen",7);this.bqAfterOpen=r(this,"bqAfterOpen",7);this.bqClose=r(this,"bqClose",7);this.bqAfterClose=r(this,"bqAfterClose",7);this.bqClick=r(this,"bqClick",7)}accordion;prefixElem;suffixElem;detailsElem;get el(){return e(this)}hasPrefix=false;hasSuffix=false;appearance="filled";disabled=false;expanded=false;noAnimation=false;rotate=false;size="medium";checkPropValues(){o(i,"medium",this.el,"size");o(d,"filled",this.el,"appearance")}handleExpandedChange(){const a=this.expanded?this.bqOpen.emit(this.el):this.bqClose.emit(this.el);if(a.defaultPrevented){this.expanded=!this.expanded;return}if(this.expanded){this.accordion?.open()}else{this.accordion?.close()}if(!this.isCssInterpolateSizeSupported)return;setTimeout((()=>{this.el.dispatchEvent(new CustomEvent("accordionTransitionEnd",{bubbles:false,composed:true}))}),200)}handleDisabledChange(){if(!this.disabled)return;this.expanded=false}handleJsAnimation(){if(this.isCssInterpolateSizeSupported)return;console.warn(`[bq-accordion] animating to/from intrinsic sizing keywords (interpolate-size: allow-keywords) is not supported and animation will be set through JS.\n        For vertical layout, consider using the 'noAnimation' prop ('no-animation' attribute) to disable it`);this.accordion=!this.noAnimation?new t(this.detailsElem):null}bqBlur;bqFocus;bqOpen;bqAfterOpen;bqClose;bqAfterClose;bqClick;componentWillLoad(){this.checkPropValues()}componentDidLoad(){this.handleJsAnimation();this.handleExpandedChange();this.handleSlotChange()}onAccordionTransitionEnd(a){a.stopPropagation();if(a.target!==this.el)return;if(this.expanded){this.bqAfterOpen.emit(this.el);return}this.bqAfterClose.emit(this.el)}handleClick=a=>{a.preventDefault();if(this.disabled)return;this.bqClick.emit(this.el);this.expanded=!this.expanded};handleFocus=()=>{if(this.disabled)return;this.bqFocus.emit(this.el)};handleBlur=()=>{this.bqBlur.emit(this.el)};handleSlotChange=()=>{this.hasPrefix=b(this.prefixElem,"prefix");this.hasSuffix=b(this.suffixElem,"suffix")};get open(){return this.expanded&&!this.disabled}get isCssInterpolateSizeSupported(){return window.CSS?.supports("(interpolate-size: allow-keywords)")}render(){return n("details",{key:"37ce84995b58b8e0a23bab0628a06b462e7383b1",class:{[`bq-accordion overflow-hidden ${this.size} ${this.appearance}`]:true,"no-animation":this.noAnimation,disabled:this.disabled},ref:a=>this.detailsElem=a,open:this.open,part:"base"},n("summary",{key:"52572da9cd4a9de3729ceb6fbe1057db52ba3287",id:"bq-accordion__header",class:"bq-accordion__header",onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,"aria-expanded":this.expanded?"true":"false","aria-disabled":this.disabled?"true":"false","aria-controls":"bq-accordion__content",tabindex:this.disabled?-1:0,role:"button",part:"header"},n("div",{key:"f79cd751ebef090938bac3e81f00cd52531ccfdb",ref:a=>this.prefixElem=a,class:{"bq-accordion__header--prefix":true,"!hidden":!this.hasPrefix},part:"prefix"},n("slot",{key:"bee50818a711c42590d7d2b25425ec994aee9e54",name:"prefix",onSlotchange:this.handleSlotChange})),n("div",{key:"6124feec91eaf9b40aa82972c6c62c30575cfa86",class:"bq-accordion__header--text",part:"text"},n("slot",{key:"b067cb102a759a7d0cc9d3b6585d2c513987b576",name:"header"})),n("div",{key:"d65747b2e8a4c2c626d74d8f36806755d5744f2f",ref:a=>this.suffixElem=a,class:{"bq-accordion__header--suffix":true,"!hidden":!this.hasSuffix},part:"suffix"},n("slot",{key:"aeceaca072f569e09634bff4ea844160e6f3e50e",name:"suffix",onSlotchange:this.handleSlotChange})),n("div",{key:"7e2d2934115edd6e4d175059693a143072c8ef26",class:{"flex items-center justify-center transition-transform duration-300 ease-in-out":true,"!hidden":this.open&&!this.rotate,"rotate-180":this.rotate&&this.open},"aria-hidden":"true"},n("slot",{key:"2f9f7ac0fffb102f050b46ef853647d777bdfc43",name:"expand"},n("bq-icon",{key:"aa454003868fde5435578a0c3c2012219c3a1e68",name:"plus"}))),n("div",{key:"e074a38c0eb16dd7547d447b3ebab00b7351cbb6",class:{"flex items-center justify-center":true,"!hidden":!this.open&&!this.rotate||this.rotate},"aria-hidden":"true"},n("slot",{key:"351064e0896b4bdc7a5226d48403da39050d606b",name:"collapse"},n("bq-icon",{key:"ea4b7f164f7a9181f871c6c3501a0c1552aabfce",name:"minus"})))),n("div",{key:"de44b664d1f00a43113c2d169d66589fefdc535c",class:"bq-accordion__body overflow-hidden","aria-labelledby":"bq-accordion__header",role:"region",part:"panel"},n("slot",{key:"a2f47e70fd7be0da16f5b0655ed8c3a260fecec1",id:"bq-accordion__content",class:"bq-accordion__content block"})))}static get watchers(){return{size:["checkPropValues"],expanded:["handleExpandedChange"],disabled:["handleDisabledChange"],noAnimation:["handleJsAnimation"]}}};q.style=s;export{q as bq_accordion};
-//# sourceMappingURL=p-7478cf0a.entry.js.map

package/dist/beeq/p-7478cf0a.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/beeq/p-7bb8664c.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/beeq/p-7ff775a3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["TOAST_TYPE","TOAST_PLACEMENT","bqToastCss","BqToastStyle0","TOAST_PORTAL_SELECTOR","BqToast","autoDismissDebounce","toastPortal","isClient","document","querySelector","border","type","placement","hideIcon","open","time","checkPropValues","validatePropValue","this","el","classList","remove","add","handleTimeChange","cancel","Math","max","debounce","hide","handleOpenChange","bqHide","bqShow","connectedCallback","Object","assign","createElement","className","componentWillLoad","disconnectedCallback","onNotificationHide","removeChild","tagName","toLowerCase","error","DOMException","show","handleShow","handleHide","toast","parentElement","body","append","appendChild","requestAnimationFrame","ev","emit","defaultPrevented","iconName","typeMap","success","loading","alert","info","render","style","h","Host","key","class","hidden","role","part","name","size","slot","exportparts"],"sources":["../../packages/beeq/src/components/toast/bq-toast.types.ts","../../packages/beeq/src/components/toast/scss/bq-toast.scss?tag=bq-toast&encapsulation=shadow","../../packages/beeq/src/components/toast/bq-toast.tsx"],"sourcesContent":["export const TOAST_TYPE = ['info', 'success', 'alert', 'error', 'loading', 'custom'] as const;\nexport type TToastType = (typeof TOAST_TYPE)[number];\n\nexport const TOAST_PLACEMENT = [\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left',\n 'top-left',\n] as const;\nexport type TToastPlacement = (typeof TOAST_PLACEMENT)[number];\n\nexport const TOAST_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TToastBorderRadius = (typeof TOAST_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/* Toast styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-toast.variables';\n\n:host {\n @apply inline-block;\n}\n\n:host(.is-hidden) {\n @apply hidden;\n}\n\n.bq-toast {\n @include animation-slide-in;\n @apply flex items-center gap-[--bq-toast--gap] p-b-[--bq-toast--padding-y] p-i-[--bq-toast--padding-x];\n @apply rounded-[--bq-toast--border-radius] bg-[--bq-toast--background] shadow-[shadow:--bq-toast--box-shadow];\n @apply border-[length:--bq-toast--border-width] border-[color:--bq-toast--border-color];\n\n border-style: var(--bq-toast--border-style);\n}\n\n.bq-toast--icon {\n @apply flex;\n\n &.info {\n @apply text-[--bq-toast--icon-color-info];\n }\n\n &.success {\n @apply text-[--bq-toast--icon-color-success];\n }\n\n &.alert {\n @apply text-[--bq-toast--icon-color-alert];\n }\n\n &.error {\n @apply text-[--bq-toast--icon-color-error];\n }\n\n &.loading {\n @include animation-spin;\n @apply text-[--bq-toast--icon-color-loading];\n }\n\n &.custom {\n @apply text-[--bq-toast--icon-color-custom];\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TOAST_PLACEMENT, TOAST_TYPE, TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.types';\nimport { debounce, isClient, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst TOAST_PORTAL_SELECTOR = 'bq-toast-portal';\n\n/**\n * Toasts are time-based components used to display short messages.\n * Commonly used for errors, confirmations, or progress updates.\n *\n * @example How to use it\n * ```html\n * <bq-toast type=\"info\">\n * This is a message\n * </bq-toast>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/83da51-toast\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {\"s\" | \"none\" | \"xs2\" | \"xs\" | \"m\" | \"l\" | \"full\"} border - The corder radius of the toast component\n * @attr {\"success\" | \"error\" | \"loading\" | \"alert\" | \"info\"} type - Type of toast\n * @attr {\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"} placement - Placement of toast\n * @attr {boolean} hide-icon - If true will hide toast icon\n * @attr {boolean} open - If true, the toast will be shown\n * @attr {number} time - The length of time, in milliseconds, after which the toast will close itself\n *\n * @method show - Method to be called to show the toast component\n * @method hide - Method to be called to hide the toast component\n * @method toast - This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically\n *\n * @event bqHide - Callback handler to be called when the notification is hidden\n * @event bqShow - Callback handler to be called when the notification is shown\n *\n * @slot - The content to be displayed in the toast component.\n * @slot icon - The icon to be displayed in the toast component.\n *\n * @part wrapper - The component's internal wrapper inside the shadow DOM.\n * @part icon-info - The `<div>` container that holds the icon component.\n * @part base - The `<div>` container of the internal bq-icon component.\n * @part svg - The `<svg>` element of the internal bq-icon component.\n *\n * @cssprop --bq-toast--background - Toast background color\n * @cssprop --bq-toast--box-shadow - Toast box shadow\n * @cssprop --bq-toast--padding-y - Toast vertical padding\n * @cssprop --bq-toast--padding-x - Toast horizontal padding\n * @cssprop --bq-toast--gap - Toast distance between icon and text\n * @cssprop --bq-toast--border-radius - Toast border radius\n * @cssprop --bq-toast--border-color - Toast border color\n * @cssprop --bq-toast--border-style - Toast border style\n * @cssprop --bq-toast--border-width - Toast border width\n * @cssprop --bq-toast--icon-color-info - Toast icon color when type is 'info'\n * @cssprop --bq-toast--icon-color-success - Toast icon color when type is 'success'\n * @cssprop --bq-toast--icon-color-alert - Toast icon color when type is 'alert'\n * @cssprop --bq-toast--icon-color-error - Toast icon color when type is 'error'\n * @cssprop --bq-toast--icon-color-loading - Toast icon color when type is 'loading'\n * @cssprop --bq-toast--icon-color-custom - Toast icon color when type is 'custom'\n */\n@Component({\n tag: 'bq-toast',\n styleUrl: './scss/bq-toast.scss',\n shadow: true,\n})\nexport class BqToast {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqToastElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private toastPortal = isClient() ? document.querySelector(`.${TOAST_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /** The corder radius of the toast component */\n @Prop({ reflect: true }) border: TToastBorderRadius = 's';\n\n /** Type of toast */\n @Prop({ reflect: true, mutable: true }) type: TToastType = 'info';\n\n /** Placement of toast */\n @Prop({ reflect: true, mutable: true }) placement: TToastPlacement = 'bottom-center';\n\n /** If true will hide toast icon */\n @Prop({ reflect: true, mutable: true }) hideIcon = false;\n\n /** If true, the toast will be shown */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** The length of time, in milliseconds, after which the toast will close itself */\n @Prop({ reflect: true }) time: number = 3000;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n @Watch('placement')\n checkPropValues() {\n validatePropValue(TOAST_TYPE, 'default', this.el, 'type');\n validatePropValue(TOAST_PLACEMENT, 'bottom-center', this.el, 'placement');\n\n const { toastPortal } = this;\n toastPortal?.classList.remove(...TOAST_PLACEMENT);\n toastPortal?.classList.add(this.placement);\n }\n\n @Watch('time')\n handleTimeChange() {\n this.autoDismissDebounce?.cancel();\n\n this.time = Math.max(0, this.time);\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (this.open) {\n this.autoDismissDebounce?.();\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the notification is hidden */\n @Event() bqHide: EventEmitter<HTMLBqToastElement>;\n\n /** Callback handler to be called when the notification is shown */\n @Event() bqShow: EventEmitter<HTMLBqToastElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (!isClient()) return;\n\n const { toastPortal } = this;\n if (!toastPortal) {\n this.toastPortal = Object.assign(document.createElement('div'), { className: TOAST_PORTAL_SELECTOR });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeChange();\n this.handleOpenChange();\n }\n\n disconnectedCallback() {\n this.autoDismissDebounce?.cancel();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqHide')\n onNotificationHide() {\n try {\n const { toastPortal } = this;\n toastPortal?.removeChild(this.el);\n // Remove the toast portal from the DOM when there are no more toasts\n if (toastPortal?.querySelector(this.el.tagName.toLowerCase()) === null) {\n toastPortal?.remove();\n }\n } catch (error) {\n /**\n * Skip DOMException error since it could be possible that\n * in some situations the notification portal is missing\n */\n if (error instanceof DOMException) return;\n throw error;\n }\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 show the toast component */\n @Method()\n async show(): Promise<void> {\n this.handleShow();\n }\n\n /** Method to be called to hide the toast component */\n @Method()\n async hide(): Promise<void> {\n this.handleHide();\n }\n\n /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */\n @Method()\n async toast() {\n if (!isClient()) return;\n\n const { toastPortal } = this;\n if (toastPortal?.parentElement === null) {\n document.body.append(toastPortal);\n }\n\n toastPortal?.appendChild(this.el);\n\n requestAnimationFrame(() => {\n this.show();\n });\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleShow = () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n }\n };\n\n private handleHide = () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = false;\n }\n };\n\n private get iconName() {\n const typeMap = {\n success: 'check-circle-bold',\n error: 'x-circle-bold',\n loading: 'spinner-gap-bold',\n alert: 'warning-bold',\n info: 'info-bold',\n };\n\n return typeMap[this.type] || 'info-bold';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n style={style}\n class={{ 'is-hidden': !this.open }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"status\"\n >\n <output class=\"bq-toast\" part=\"wrapper\">\n <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part=\"icon\">\n <slot name=\"icon\">\n <bq-icon name={this.iconName} size=\"24\" slot=\"icon\" exportparts=\"base,svg\" />\n </slot>\n </div>\n <slot />\n </output>\n </Host>\n );\n }\n}\n"],"mappings":";;;;oMAAO,MAAMA,EAAa,CAAC,OAAQ,UAAW,QAAS,QAAS,UAAW,UAGpE,MAAMC,EAAkB,CAC7B,aACA,YACA,eACA,gBACA,cACA,YCTF,MAAMC,EAAa,ygtBACnB,MAAAC,EAAeD,ECIf,MAAME,EAAwB,kB,MA6DjBC,EAAO,M,uFAIVC,oB,wBAWSC,YAAcC,IAAaC,SAASC,cAAc,IAAIN,KAA2B,KAMzEO,OAA6B,IAGdC,KAAmB,OAGnBC,UAA6B,gBAG7BC,SAAW,MAGXC,KAGfC,KAAe,IAOxC,eAAAC,GACEC,EAAkBlB,EAAY,UAAWmB,KAAKC,GAAI,QAClDF,EAAkBjB,EAAiB,gBAAiBkB,KAAKC,GAAI,aAE7D,MAAMb,YAAEA,GAAgBY,KACxBZ,GAAac,UAAUC,UAAUrB,GACjCM,GAAac,UAAUE,IAAIJ,KAAKN,U,CAIlC,gBAAAW,GACEL,KAAKb,qBAAqBmB,SAE1BN,KAAKH,KAAOU,KAAKC,IAAI,EAAGR,KAAKH,MAE7BG,KAAKb,oBAAsBsB,GAAS,KAClCT,KAAKU,MAAM,GACVV,KAAKH,K,CAIV,gBAAAc,GACEX,KAAKb,qBAAqBmB,SAE1B,GAAIN,KAAKJ,KAAM,CACbI,KAAKb,uB,EASAyB,OAGAC,OAMT,iBAAAC,GACE,IAAKzB,IAAY,OAEjB,MAAMD,YAAEA,GAAgBY,KACxB,IAAKZ,EAAa,CAChBY,KAAKZ,YAAc2B,OAAOC,OAAO1B,SAAS2B,cAAc,OAAQ,CAAEC,UAAWjC,G,EAIjF,iBAAAkC,GACEnB,KAAKF,kBACLE,KAAKK,mBACLL,KAAKW,kB,CAGP,oBAAAS,GACEpB,KAAKb,qBAAqBmB,Q,CAO5B,kBAAAe,GACE,IACE,MAAMjC,YAAEA,GAAgBY,KACxBZ,GAAakC,YAAYtB,KAAKC,IAE9B,GAAIb,GAAaG,cAAcS,KAAKC,GAAGsB,QAAQC,iBAAmB,KAAM,CACtEpC,GAAae,Q,EAEf,MAAOsB,GAKP,GAAIA,aAAiBC,aAAc,OACnC,MAAMD,C,EAaV,UAAME,GACJ3B,KAAK4B,Y,CAKP,UAAMlB,GACJV,KAAK6B,Y,CAKP,WAAMC,GACJ,IAAKzC,IAAY,OAEjB,MAAMD,YAAEA,GAAgBY,KACxB,GAAIZ,GAAa2C,gBAAkB,KAAM,CACvCzC,SAAS0C,KAAKC,OAAO7C,E,CAGvBA,GAAa8C,YAAYlC,KAAKC,IAE9BkC,uBAAsB,KACpBnC,KAAK2B,MAAM,G,CASPC,WAAa,KACnB,MAAMQ,EAAKpC,KAAKa,OAAOwB,KAAKrC,KAAKC,IACjC,IAAKmC,EAAGE,iBAAkB,CACxBtC,KAAKJ,KAAO,I,GAIRiC,WAAa,KACnB,MAAMO,EAAKpC,KAAKY,OAAOyB,KAAKrC,KAAKC,IACjC,IAAKmC,EAAGE,iBAAkB,CACxBtC,KAAKJ,KAAO,K,GAIhB,YAAY2C,GACV,MAAMC,EAAU,CACdC,QAAS,oBACThB,MAAO,gBACPiB,QAAS,mBACTC,MAAO,eACPC,KAAM,aAGR,OAAOJ,EAAQxC,KAAKP,OAAS,W,CAO/B,MAAAoD,GACE,MAAMC,EAAQ,IACR9C,KAAKR,QAAU,CAAE,4BAA6B,oBAAoBQ,KAAKR,YAG7E,OACEuD,EAACC,EAAI,CAAAC,IAAA,2CACHH,MAAOA,EACPI,MAAO,CAAE,aAAclD,KAAKJ,MAAM,eACpBI,KAAKJ,KAAO,OAAS,QACnCuD,QAASnD,KAAKJ,KAAO,OAAS,QAC9BwD,KAAK,UAELL,EAAA,UAAAE,IAAA,2CAAQC,MAAM,WAAWG,KAAK,WAC5BN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAE,CAAC,kBAAkBlD,KAAKP,QAAS,KAAM,UAAWO,KAAKL,UAAY0D,KAAK,QACpFN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,QACTP,EAAA,WAAAE,IAAA,2CAASK,KAAMtD,KAAKuC,SAAUgB,KAAK,KAAKC,KAAK,OAAOC,YAAY,eAGpEV,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/beeq/p-801f7b25.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["bqSideMenuCss","BqSideMenuStyle0","BqSideMenu","menuItemCssSelector","bodyCss","bodyCssExpand","bodyCssCollapse","menuElem","documentBody","appearance","collapse","size","onCollapsePropChange","this","handleCollapse","bqCollapse","emit","bqSelect","componentDidLoad","isClient","document","querySelector","classList","add","disconnectedCallback","cleanDocumentBodyClass","onMenuItemClick","event","target","item","isHTMLElement","menuItems","forEach","menuItem","active","disabled","toggleCollapse","slot","assignedElements","flatten","filter","el","tagName","toLowerCase","length","collapseDocumentBody","expandDocumentBody","remove","render","h","key","class","part","name","ref","navElem","role"],"sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Side menu styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu.variables';\n\n:host {\n @apply flex overflow-hidden;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Aside container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu {\n @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n @apply transition-[background-color,width] duration-150;\n @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n @apply is-[--bq-side-menu--width-collapse];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Logo container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu--logo {\n @apply sticky top-0 z-[1] p-xs;\n @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/* APPEARANCE */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n */\n\n:host([size='small']) {\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--paddingY: theme(space.s);\n }\n}\n\n:host([appearance='brand']) {\n --bq-focus: theme(stroke.alt);\n --bq-side-menu--bg-color: theme(backgroundColor.ui.brand);\n --bq-side-menu--brand-color: theme(stroke.inverse);\n --bq-side-menu--border-color: theme(stroke.brand);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.alt);\n --bq-side-menu-item--text-hover: theme(textColor.alt);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.inverse);\n }\n}\n\n:host([appearance='inverse']) {\n --bq-side-menu--bg-color: theme(backgroundColor.ui.inverse);\n --bq-side-menu--brand-color: theme(stroke.inverse);\n --bq-side-menu--border-color: theme(backgroundColor.ui.inverse);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.inverse);\n --bq-side-menu-item--text-hover: theme(textColor.inverse);\n --bq-side-menu-item--text-active: theme(textColor.primary);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.inverse);\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isClient, isHTMLElement } from '../../shared/utils';\n\n/**\n *The default side menu serves as a versatile container for organizing and displaying navigation elements,\n * with default side menu items providing a clean and straightforward way to represent individual menu options.\n * Together, they form the foundation for building structured and intuitive side menu layouts.\n *\n * @example How to use it\n * ```html\n * <bq-side-menu>\n * <div slot=\"logo\">\n * <h1>Your Logo</h1>\n * </div>\n * <bq-side-menu-item active>\n * <bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\n * Home\n * </bq-side-menu-item>\n * <bq-side-menu-item>\n * <bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\n * Settings\n * </bq-side-menu-item>\n * <bq-side-menu-item disabled>\n * <bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\n * Help\n * </bq-side-menu-item>\n * </bq-side-menu>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n *\n * @attr {\"brand\" | \"default\" | \"inverse\"} appearance - It sets a predefined appearance of the side menu.\n * @attr {boolean} collapse - If `true`, the container will reduce its width.\n * @attr {\"medium\" | \"small\"} - size - It sets the size of the navigation menu items.\n *\n * @method toggleCollapse - Method to be called to toggle the collapse state of the side menu.\n *\n * @event bqCollapse - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.\n * @event bqSelect - Callback handler to be called when the active/selected menu item changes.\n *\n * @slot logo - The section for displaying the logo or brand in the side menu.\n * @slot The main section that holds all menu items.\n * @slot footer - The section for adding footer content to the side menu.\n *\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n *\n * @cssprop --bq-side-menu--bg-color - Side menu background color\n * @cssprop --bq-side-menu--brand-color - Side menu logo color\n * @cssprop --bq-side-menu--border-color - Side menu border color\n */\n@Component({\n tag: 'bq-side-menu',\n styleUrl: './scss/bq-side-menu.scss',\n shadow: true,\n})\nexport class BqSideMenu {\n // Own Properties\n // ====================\n\n private menuItemCssSelector = 'bq-side-menu-item';\n\n private bodyCss = 'bq-body--side-menu';\n private bodyCssExpand = 'bq-body--side-menu__expand';\n private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n private menuElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private documentBody: HTMLBodyElement;\n\n // Public Property API\n // ========================\n\n /** It sets a predefined appearance of the side menu */\n @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n /** If true, the container will reduce its width */\n @Prop({ reflect: true }) collapse: boolean = false;\n\n /** It sets the size of the navigation menu items */\n @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('collapse')\n onCollapsePropChange() {\n this.handleCollapse();\n this.bqCollapse.emit({ collapse: this.collapse });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n /** Callback handler to be called when the active/selected menu item changes */\n @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n if (!isClient()) return;\n\n this.documentBody = document.querySelector('body');\n this.documentBody.classList.add(this.bodyCss);\n this.handleCollapse();\n }\n\n disconnectedCallback() {\n this.cleanDocumentBodyClass();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n onMenuItemClick(event: Event) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n this.menuItems.forEach(\n (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n );\n this.bqSelect.emit(item);\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 /** Toggle the collapse state of the side menu */\n @Method()\n async toggleCollapse() {\n this.collapse = !this.collapse;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get menuItems() {\n if (!this.menuElem) return [];\n\n const slot = this.menuElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private handleCollapse = () => {\n if (!this.menuItems.length) return;\n\n this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n if (this.collapse) {\n this.collapseDocumentBody();\n } else {\n this.expandDocumentBody();\n }\n };\n\n private collapseDocumentBody = () => {\n if (!this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssExpand);\n this.documentBody.classList.add(this.bodyCssCollapse);\n };\n\n private expandDocumentBody = () => {\n if (this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssCollapse);\n this.documentBody.classList.add(this.bodyCssExpand);\n };\n\n private cleanDocumentBodyClass = () => {\n this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n {/* Company logo and name */}\n <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n <slot name=\"logo\" />\n </div>\n {/* Navigation content */}\n <nav\n class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n ref={(navElem) => (this.menuElem = navElem)}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n role=\"menu\"\n part=\"nav\"\n >\n <slot />\n </nav>\n {/* Footer */}\n <div\n class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n part=\"footer\"\n >\n <slot name=\"footer\"></slot>\n </div>\n </aside>\n );\n }\n}\n"],"mappings":";;;;0HAAA,MAAMA,EAAgB,+/tBACtB,MAAAC,EAAeD,E,MC4DFE,EAAU,M,mGAIbC,oBAAsB,oBAEtBC,QAAU,qBACVC,cAAgB,6BAChBC,gBAAkB,+BAElBC,SASSC,aAMQC,WAAkC,UAGlCC,SAAoB,MAGpBC,KAAsB,SAM/C,oBAAAC,GACEC,KAAKC,iBACLD,KAAKE,WAAWC,KAAK,CAAEN,SAAUG,KAAKH,U,CAQ/BK,WAGAE,SAMT,gBAAAC,GACE,IAAKC,IAAY,OAEjBN,KAAKL,aAAeY,SAASC,cAAc,QAC3CR,KAAKL,aAAac,UAAUC,IAAIV,KAAKT,SACrCS,KAAKC,gB,CAGP,oBAAAU,GACEX,KAAKY,wB,CAOP,eAAAC,CAAgBC,GACd,MAAQC,OAAQC,GAASF,EACzB,IAAKG,EAAcD,EAAM,qBAAsB,OAE/ChB,KAAKkB,UAAUC,SACZC,GAAyCA,EAASC,QAAUD,EAASE,UAAYF,IAAaJ,IAEjGhB,KAAKI,SAASD,KAAKa,E,CAYrB,oBAAMO,GACJvB,KAAKH,UAAYG,KAAKH,Q,CAQxB,aAAYqB,GACV,IAAKlB,KAAKN,SAAU,MAAO,GAE3B,MAAM8B,EAAOxB,KAAKN,SAASc,cAAc,QACzC,MAAO,IAAIgB,EAAKC,iBAAiB,CAAEC,QAAS,QAASC,QAClDC,GAAkCA,EAAGC,QAAQC,gBAAkB9B,KAAKV,qB,CAIjEW,eAAiB,KACvB,IAAKD,KAAKkB,UAAUa,OAAQ,OAE5B/B,KAAKkB,UAAUC,SAASC,GAAyCA,EAASvB,SAAWG,KAAKH,WAC1F,GAAIG,KAAKH,SAAU,CACjBG,KAAKgC,sB,KACA,CACLhC,KAAKiC,oB,GAIDD,qBAAuB,KAC7B,IAAKhC,KAAKH,SAAU,OAEpBG,KAAKL,aAAac,UAAUyB,OAAOlC,KAAKR,eACxCQ,KAAKL,aAAac,UAAUC,IAAIV,KAAKP,gBAAgB,EAG/CwC,mBAAqB,KAC3B,GAAIjC,KAAKH,SAAU,OAEnBG,KAAKL,aAAac,UAAUyB,OAAOlC,KAAKP,iBACxCO,KAAKL,aAAac,UAAUC,IAAIV,KAAKR,cAAc,EAG7CoB,uBAAyB,KAC/BZ,KAAKL,aAAac,UAAUyB,OAAOlC,KAAKT,QAASS,KAAKP,gBAAiBO,KAAKR,cAAc,EAO5F,MAAA2C,GACE,OACEC,EAAA,SAAAC,IAAA,2CAAOC,MAAO,CAAE,+BAAgC,KAAM,eAAgBtC,KAAKH,UAAY0C,KAAK,QAE1FH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,qBAAsB,KAAM,eAAgBtC,KAAKH,UAAY0C,KAAK,QAC9EH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,UAGbJ,EAAA,OAAAC,IAAA,2CACEC,MAAM,wDACNG,IAAMC,GAAa1C,KAAKN,SAAWgD,EAEnCC,KAAK,OACLJ,KAAK,OAELH,EAAA,QAAAC,IAAA,8CAGFD,EAAA,OAAAC,IAAA,2CACEC,MAAM,iHACNC,KAAK,UAELH,EAAA,QAAAC,IAAA,2CAAMG,KAAK,Y","ignoreList":[]}

package/dist/beeq/p-852225bc.js DELETED Viewed

@@ -1,6 +0,0 @@
-/*!
- * Built by Endavans
- * © https://beeq.design - Apache 2 License.
- */
-import"./p-4a5c07f9.js";import{i as t}from"./p-07b82e50.js";let n;const s="data-beeq";const r="svg";const c=t=>{n=t};const o=(t="")=>{if(!n){const t=e();const n=t?null:u();const o=t||n;if(o){const n=t?o.getAttribute(s):i(o);c(`${n}/${r}`)}else{c(`./${r}`)}}const o=t?`/${t.replace(/^\//,"")}`:"";return n.replace(/\/$/,"")+o};const e=()=>{if(!t())return null;return document.querySelector(`script[${s}]`)};const u=()=>{if(!t())return null;return document.querySelector(`script[src*="beeq"]`)};const i=n=>{if(!t())return"";const s=n.getAttribute("src");return s?s.substring(0,s.lastIndexOf("/")):""};export{o as g,c as s};
-//# sourceMappingURL=p-852225bc.js.map

package/dist/beeq/p-852225bc.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["beeqBasePath","DATA_BEEQ_ATTRIBUTE","DEFAULT_SVG_PATH","setBasePath","path","getBasePath","subpath","configScript","findConfigScript","fallbackScript","findFallbackScript","script","getAttribute","getScriptPath","formattedSubpath","replace","isClient","document","querySelector","src","substring","lastIndexOf"],"sources":["../../packages/beeq/src/shared/utils/assetsPath.ts"],"sourcesContent":["/**\n * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.\n * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts\n */\nimport { Env } from '@stencil/core';\n\nimport { isClient } from './isClient';\n\nlet beeqBasePath: string | undefined;\nconst DATA_BEEQ_ATTRIBUTE = 'data-beeq';\nconst DEFAULT_SVG_PATH = 'svg';\n\n/**\n * Sets the base path for the assets.\n * @param {string} path - The base path to set.\n */\nexport const setBasePath = (path: string): void => {\n beeqBasePath = path;\n};\n\n/**\n * Gets the base path for the assets.\n * @param {string} subpath - An optional subpath to append to the base path.\n * @returns {string} The base path of the assets.\n */\nexport const getBasePath = (subpath: string = ''): string => {\n if (!beeqBasePath) {\n const configScript = findConfigScript();\n const fallbackScript = configScript ? null : findFallbackScript();\n\n const script = configScript || fallbackScript;\n if (script) {\n const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);\n setBasePath(`${path}/${DEFAULT_SVG_PATH}`);\n } else {\n // Fallback: use an environment variable (if set) or the default path\n setBasePath(Env.BEEQ_ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);\n }\n }\n\n // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n const formattedSubpath = subpath ? `/${subpath.replace(/^\\//, '')}` : '';\n return beeqBasePath.replace(/\\/$/, '') + formattedSubpath;\n};\n\n/**\n * Finds the configuration script element.\n * @returns The configuration script element or null if not found.\n */\nconst findConfigScript = (): HTMLScriptElement | null => {\n if (!isClient()) return null;\n\n return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);\n};\n\n/**\n * Finds the fallback script element.\n * @returns The fallback script element or null if not found.\n */\nconst findFallbackScript = (): HTMLScriptElement | null => {\n if (!isClient()) return null;\n\n return document.querySelector(`script[src*=\"beeq\"]`);\n};\n\n/**\n * Gets the path of a script element.\n * @param {HTMLScriptElement} script - The script element.\n * @returns The path of the script element.\n */\nconst getScriptPath = (script: HTMLScriptElement): string => {\n if (!isClient()) return '';\n\n const src = script.getAttribute('src');\n return src ? src.substring(0, src.lastIndexOf('/')) : '';\n};\n"],"mappings":";;;;4DAQA,IAAIA,EACJ,MAAMC,EAAsB,YAC5B,MAAMC,EAAmB,M,MAMZC,EAAeC,IAC1BJ,EAAeI,CAAI,E,MAQRC,EAAc,CAACC,EAAkB,MAC5C,IAAKN,EAAc,CACjB,MAAMO,EAAeC,IACrB,MAAMC,EAAiBF,EAAe,KAAOG,IAE7C,MAAMC,EAASJ,GAAgBE,EAC/B,GAAIE,EAAQ,CACV,MAAMP,EAAOG,EAAeI,EAAOC,aAAaX,GAAuBY,EAAcF,GACrFR,EAAY,GAAGC,KAAQF,I,KAClB,CAELC,EAAyC,KAAKD,I,EAKlD,MAAMY,EAAmBR,EAAU,IAAIA,EAAQS,QAAQ,MAAO,MAAQ,GACtE,OAAOf,EAAae,QAAQ,MAAO,IAAMD,CAAgB,EAO3D,MAAMN,EAAmB,KACvB,IAAKQ,IAAY,OAAO,KAExB,OAAOC,SAASC,cAAc,UAAUjB,KAAuB,EAOjE,MAAMS,EAAqB,KACzB,IAAKM,IAAY,OAAO,KAExB,OAAOC,SAASC,cAAc,sBAAsB,EAQtD,MAAML,EAAiBF,IACrB,IAAKK,IAAY,MAAO,GAExB,MAAMG,EAAMR,EAAOC,aAAa,OAChC,OAAOO,EAAMA,EAAIC,UAAU,EAAGD,EAAIE,YAAY,MAAQ,EAAE,S","ignoreList":[]}