npm - @beeq/core - Versions diffs - 1.12.3 → 1.12.4-beta.2 - Mend

@beeq/core 1.12.3 → 1.12.4-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 (465) hide show

package/dist/beeq/{p-9cbc5e5a.entry.js.map → p-654c7701.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["BUTTON_SIZE","BUTTON_TYPE","BUTTON_APPEARANCE","BUTTON_VARIANT","bqButtonCss","BqButton","prefixElem","suffixElem","internals","hasPrefix","hasSuffix","appearance","block","border","disabled","download","href","justifyContent","label","loading","onlyIcon","size","target","type","variant","checkPropValues","validatePropValue","this","el","handleOnlyIconPropChange","isNil","console","warn","bqBlur","bqFocus","bqClick","componentWillLoad","componentDidLoad","handleSlotChange","handleBlur","emit","handleFocus","handleClick","ev","preventEvent","bqClickEvent","defaultPrevented","handleFormAction","form","formAction","formActions","submit","submitAssociatedForm","reset","isClient","btn","document","createElement","hidden","append","click","remove","hasSlotContent","preventDefault","stopPropagation","render","isLink","isDefined","TagElem","style","h","Host","key","undefined","class","onBlur","onClick","onFocus","part","rel","tabIndex","ref","spanElem","name","onSlotchange","SVG_TAG","ICON_CSS_CLASS","cache","requests","Map","content","sanitizeSvgElement","svg","currentClass","getAttribute","setAttribute","trim","removeAttribute","validateElement","element","nodeType","Node","ELEMENT_NODE","nodeName","toLowerCase","hasUnsafeAttribute","Array","from","attributes","some","attr","value","startsWith","includes","children","every","child","processSvgContent","domParser","DOMParser","doc","parseFromString","querySelector","XMLSerializer","serializeToString","error","fetchAndProcessSvg","async","url","shouldSanitize","response","fetch","ok","Error","status","statusText","text","getSvgContent","sanitize","has","cachedContent","get","request","then","set","delete","bqIconCss","BqIcon","svgContent","color","src","weight","handlePropsChange","loadIcon","handleWeightChange","REGULAR","isWeightedIcon","weightSuffix","iconName","svgLoaded","connectedCallback","setupIconComponent","getIconSource","SVG_EXTENSION","iconFileName","getBasePath","styles","getColorCSSVariable","innerHTML","role"],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Button styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-button.variables';\n\n@layer components {\n // Common button base style\n .bq-button {\n @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n // `DISABLED` state\n @apply disabled:cursor-not-allowed disabled:opacity-60;\n // `FOCUS` state\n @apply focus-visible:focus;\n // Internal workaround to allow overriding icon color via CSS variables from slotted bq-buttons\n // @see: packages/beeq/src/components/side-menu/scss/bq-side-menu.scss\n @apply [&_::slotted(bq-icon)]:[--bq-icon--color:_var(--bq-button--icon-color,_currentColor)];\n // On hover, update the icon color if custom property is defined\n &:hover:not(:disabled) ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-button-hover--icon-color, var(--bq-button--icon-color, currentColor));\n }\n }\n}\n\n:host {\n @apply is-auto relative inline-block cursor-pointer rounded-[--bq-button--border-radius];\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.only-icon {\n @apply aspect-square;\n}\n\n.small {\n @apply text-[length:--bq-button--small-font-size] p-b-[--bq-button--small-paddingY] p-i-[--bq-button--small-paddingX];\n\n &.only-icon {\n @apply p-[--bq-button--small-paddingY];\n }\n}\n\n.medium {\n @apply text-[length:--bq-button--medium-font-size] p-b-[--bq-button--medium-paddingY] p-i-[--bq-button--medium-paddingX];\n\n &.only-icon {\n @apply p-[--bq-button--medium-paddingY];\n }\n}\n\n.large {\n @apply text-[length:--bq-button--large-font-size] p-b-[--bq-button--large-paddingY] p-i-[--bq-button--large-paddingX];\n\n &.only-icon {\n @apply p-[--bq-button--large-paddingY];\n }\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 type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\nimport type {\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\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 {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)\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-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-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-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?: boolean = 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 /* Text used for accessibility purposes, specially screen readers, to describe the button action /\n @Prop({ reflect: true }) label?: string;\n\n /* If `true` it will display the button in a loading state /\n @Prop() loading?: boolean = false;\n\n /* If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions). Make sure to set the `label` prop for accessibility purposes. /\n @Prop() onlyIcon?: boolean = 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 @Watch('onlyIcon')\n handleOnlyIconPropChange() {\n if (!this.onlyIcon \|\| !isNil(this.label)) return;\n\n console.warn(\n '⚠️ [BqButton]: When using `only-icon` attribute (`onlyIcon` prop), it is required to set the `label` prop for accessibility reasons.',\n );\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus. /\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button gets focus. /\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button is clicked. /\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleOnlyIconPropChange();\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 aria-disabled={this.disabled ? 'true' : 'false'}\n aria-label={this.label ?? undefined}\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 'only-icon': this.onlyIcon,\n }}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n tabIndex={this.disabled ? -1 : 0}\n target={isLink ? this.target : undefined}\n type={this.type}\n >\n <span\n class=\"bq-button__prefix\"\n part=\"prefix\"\n ref={(spanElem) => {\n this.prefixElem = spanElem;\n }}\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span\n class=\"bq-button__suffix\"\n part=\"suffix\"\n ref={(spanElem) => {\n this.suffixElem = spanElem;\n }}\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n </TagElem>\n </Host>\n );\n }\n}\n","/ -------------------------------------------------------------------------- /\n/ Icon request helper /\n/ -------------------------------------------------------------------------- /\n\nimport { isClient, isNil } from '../../../shared/utils';\n\nconst SVG_TAG = 'svg';\nconst ICON_CSS_CLASS = 'bq-icon__svg';\n\ninterface IconCache {\n requests: Map<string, Promise<string>>;\n content: Map<string, string>;\n}\n\nconst cache: IconCache = {\n requests: new Map(),\n content: new Map(),\n};\n\n/\n Sanitizes SVG element by setting required attributes and removing unwanted ones\n * @param svg - The SVG element to sanitize\n /\nconst sanitizeSvgElement = (svg: SVGElement): void => {\n const currentClass = svg.getAttribute('class') \|\| '';\n\n svg.setAttribute('class', `${currentClass} ${ICON_CSS_CLASS}`.trim());\n svg.setAttribute('part', SVG_TAG);\n svg.removeAttribute('height');\n svg.removeAttribute('width');\n};\n\n/\n Validates element security (no scripts or event handlers)\n * @param element - The element to validate\n * @returns True if the element is valid, false otherwise\n /\nconst validateElement = (element: Element): boolean => {\n if (!element \|\| element.nodeType !== Node.ELEMENT_NODE) return false;\n if (element.nodeName.toLowerCase() === 'script') return false;\n\n // Check for malicious attributes using modern array methods\n const hasUnsafeAttribute = Array.from(element.attributes).some((attr) => {\n const value = attr.value?.toLowerCase() \|\| '';\n const name = attr.name.toLowerCase();\n\n // Check for event handlers\n if (name.startsWith('on')) return true;\n // Check for javascript: URLs\n if (value.includes('javascript:')) return true;\n\n return false;\n });\n\n if (hasUnsafeAttribute) return false;\n\n // Recursively validate children\n return Array.from(element.children).every((child) => validateElement(child));\n};\n\n/\n Processes SVG content with security checks and sanitization\n * @param content - The SVG content to process\n * @returns The processed and sanitized SVG content\n /\nconst processSvgContent = (content: string): string => {\n if (!isClient() \|\| isNil(content)) return '';\n\n try {\n const domParser = new DOMParser();\n const doc = domParser.parseFromString(content, 'image/svg+xml');\n const svg = doc.querySelector(SVG_TAG);\n\n if (!svg \|\| !validateElement(svg)) {\n console.warn('[BqIcon] SVG content failed security validation');\n return '';\n }\n\n sanitizeSvgElement(svg);\n return new XMLSerializer().serializeToString(svg);\n } catch (error) {\n console.error('[BqIcon] Error processing SVG content:', error);\n return '';\n }\n};\n\n/\n Fetches and processes SVG content from URL\n * @param url - The URL of the SVG to fetch\n * @param shouldSanitize - Whether to sanitize the SVG content\n * @returns Promise that resolves to the processed SVG content\n /\nconst fetchAndProcessSvg = async (url: string, shouldSanitize = true): Promise<string> => {\n if (!isClient()) return '';\n\n try {\n const response = await fetch(url);\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const content = await response.text();\n\n if (!content.trim()) {\n console.warn(`[BqIcon] Empty SVG content received from ${url}`);\n return '';\n }\n\n return shouldSanitize ? processSvgContent(content) : content;\n } catch (error) {\n console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n return '';\n }\n};\n\n/\n Retrieves SVG content with caching, security validation, and sanitization\n * @param url - The URL of the SVG to fetch\n * @param sanitize - Whether to sanitize the SVG content (default: true)\n * @returns Promise that resolves to the processed SVG content or undefined\n /\nexport const getSvgContent = async (url?: string, sanitize = true): Promise<string> => {\n if (!isClient() \|\| isNil(url)) return undefined;\n\n // Return cached content if available\n if (cache.content.has(url)) {\n const cachedContent = cache.content.get(url);\n return cachedContent;\n }\n\n // Check if the request is already in the cache\n if (!cache.requests.has(url)) {\n // Create new request with proper cleanup\n const request = fetchAndProcessSvg(url, sanitize).then((content) => {\n // Cache the result (including empty strings for failed requests)\n cache.content.set(url, content);\n // Clean up the pending request\n cache.requests.delete(url);\n return content;\n });\n\n cache.requests.set(url, request);\n }\n\n return cache.requests.get(url);\n};\n\n/\n Clears the icon cache - useful for testing or memory management\n /\nexport const clearIconCache = (): void => {\n cache.requests.clear();\n cache.content.clear();\n};\n\n/\n Gets cache statistics for debugging\n /\nexport const getCacheStats = () => ({\n pendingRequests: cache.requests.size,\n cachedContent: cache.content.size,\n urls: Array.from(cache.content.keys()),\n});\n\n// Export cache for external access if needed\nexport { cache as iconCache };\n","/ -------------------------------------------------------------------------- /\n/ Icon styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-icon.variables';\n\n:host {\n @apply inline-block;\n}\n\n/\n This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n /\n.bq-icon__svg {\n @apply scale-x-[--bq-icon--direction];\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Event, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\nimport type { TIconWeight } from './bq-icon.types';\nimport { getSvgContent } from './helper/request';\n\n/\n The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\n * It is a small graphical element that is used to enhance the user interface and improve user experience.\n \n @example How to use it\n * ```html\n * <bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/675fad-icon\n * @status stable\n \n @attr {string} color - Set the stroke color of the SVG. The value should be a valid value of the palette color.\n * @attr {string} label - Label for the icon, used for accessibility.\n * @attr {string} name - Icon name to load. Please check all available icons [here](https://phosphoricons.com/).\n * @attr {string \| number} size - Set the size of the SVG.\n * @attr {string} src - Set the source of the SVG. If the source is set, the name property will be ignored.\n \n @event svgLoaded - Callback handler to be called when the SVG has loaded.\n \n @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n \n @cssprop --bq-icon--color - The stroke color of the SVG.\n * @cssprop --bq-icon--size - The size of the SVG.\n /\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private svgContent: string;\n\n // Public Property API\n // ========================\n\n /* Label for the icon, used for accessibility /\n @Prop({ reflect: true }) label?: string;\n\n /* Set the stroke color of the SVG. The value should be a valid value of the palette color /\n @Prop({ reflect: true }) color?: string;\n\n /* Icon name to load. Please check all available icons [here](https://phosphoricons.com/) /\n @Prop({ reflect: true }) name?: string;\n\n /* Set the size of the SVG /\n @Prop({ reflect: true }) size?: string \| number = 24;\n\n /* Set the source of the SVG. If the source is set, the name property will be ignored /\n @Prop({ reflect: true }) src?: string;\n\n /* @deprecated It set the icon weight/style /\n @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n handlePropsChange() {\n this.loadIcon(this.name);\n }\n\n /\n !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n * We need to maintain retro-compatibility until the next major release\n /\n @Watch('weight')\n handleWeightChange() {\n if (this.name.includes(this.weight)) return;\n\n console.warn(\n `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n );\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const REGULAR = 'regular';\n const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}`;\n this.loadIcon(iconName);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.setupIconComponent();\n }\n\n componentWillLoad() {\n this.setupIconComponent();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private setupIconComponent = () => {\n this.loadIcon(this.name);\n // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n if (!isNil(this.weight)) this.handleWeightChange();\n };\n\n private getIconSource = (name: string) => {\n if (!this.name && !this.src) return undefined;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const SVG_EXTENSION = '.svg';\n const iconFileName = `${name}${SVG_EXTENSION}`;\n\n return getBasePath(iconFileName);\n };\n\n private loadIcon = async (name: string) => {\n const url = this.getIconSource(name);\n if (!url) return;\n\n try {\n const content = await getSvgContent(url, true);\n if (!content) return;\n\n this.svgContent = content;\n this.svgLoaded.emit(this.svgContent);\n } catch (error) {\n console.error('[BEEQ] Failed to load the icon SVG content', error);\n }\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const { color, label, name, size } = this;\n const styles = {\n ...(color && { '--bq-icon--color': getColorCSSVariable(color) }),\n ...(size && { '--bq-icon--size': `${size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={label ?? `${name} icon`}\n class=\"bs-[--bq-icon--size] is-[--bq-icon--size] flex text-[--bq-icon--color]\"\n innerHTML={this.svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["BUTTON_SIZE","BUTTON_TYPE","BUTTON_APPEARANCE","BUTTON_VARIANT","bqButtonCss","BqButton","prefixElem","suffixElem","internals","hasPrefix","hasSuffix","appearance","block","border","disabled","download","href","justifyContent","label","loading","onlyIcon","size","target","type","variant","checkPropValues","validatePropValue","this","el","handleOnlyIconPropChange","isNil","console","warn","bqBlur","bqFocus","bqClick","componentWillLoad","componentDidLoad","handleSlotChange","handleBlur","emit","handleFocus","handleClick","ev","preventEvent","bqClickEvent","defaultPrevented","handleFormAction","form","formAction","formActions","submit","submitAssociatedForm","reset","isClient","btn","document","createElement","hidden","append","click","remove","hasSlotContent","preventDefault","stopPropagation","render","isLink","isDefined","TagElem","style","h","Host","key","undefined","class","onBlur","onClick","onFocus","part","rel","tabIndex","ref","spanElem","name","onSlotchange","SVG_TAG","ICON_CSS_CLASS","cache","requests","Map","content","sanitizeSvgElement","svg","currentClass","getAttribute","setAttribute","trim","removeAttribute","validateElement","element","nodeType","Node","ELEMENT_NODE","nodeName","toLowerCase","hasUnsafeAttribute","Array","from","attributes","some","attr","value","startsWith","includes","children","every","child","processSvgContent","domParser","DOMParser","doc","parseFromString","querySelector","XMLSerializer","serializeToString","error","fetchAndProcessSvg","async","url","shouldSanitize","response","fetch","ok","Error","status","statusText","text","getSvgContent","sanitize","has","cachedContent","get","request","then","set","delete","bqIconCss","BqIcon","svgContent","color","src","weight","handlePropsChange","loadIcon","handleWeightChange","REGULAR","isWeightedIcon","weightSuffix","iconName","svgLoaded","connectedCallback","setupIconComponent","getIconSource","SVG_EXTENSION","iconFileName","getBasePath","styles","getColorCSSVariable","innerHTML","role"],"sources":["../../packages/beeq/src/components/button/bq-button.types.ts","../../packages/beeq/src/components/button/scss/bq-button.scss?tag=bq-button&encapsulation=shadow","../../packages/beeq/src/components/button/bq-button.tsx","../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["export const BUTTON_SIZE = ['small', 'medium', 'large'] as const;\nexport type TButtonSize = (typeof BUTTON_SIZE)[number];\n\nexport const BUTTON_TYPE = ['button', 'submit', 'reset'] as const;\nexport type TButtonType = (typeof BUTTON_TYPE)[number];\n\nexport const BUTTON_APPEARANCE = ['primary', 'secondary', 'link', 'text'] as const;\nexport type TButtonAppearance = (typeof BUTTON_APPEARANCE)[number];\n\nexport const BUTTON_VARIANT = ['standard', 'ghost', 'danger'] as const;\nexport type TButtonVariant = (typeof BUTTON_VARIANT)[number];\n\nexport const BUTTON_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TButtonBorderRadius = (typeof BUTTON_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Button styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-button.variables';\n\n@layer components {\n // Common button base style\n .bq-button {\n @apply box-border flex cursor-[inherit] items-center justify-center font-medium leading-regular;\n @apply rounded-[--bq-button--border-radius] border-[length:--bq-button--border-width] border-[color:--bq-button--border-color];\n @apply transition-[background-color,border-color,color] duration-300 ease-in-out;\n // `DISABLED` state\n @apply disabled:cursor-not-allowed disabled:opacity-60;\n // `FOCUS` state\n @apply focus-visible:focus;\n // Internal workaround to allow overriding icon color via CSS variables from slotted bq-buttons\n // @see: packages/beeq/src/components/side-menu/scss/bq-side-menu.scss\n @apply [&_::slotted(bq-icon)]:[--bq-icon--color:_var(--bq-button--icon-color,_currentColor)];\n // On hover, update the icon color if custom property is defined\n &:hover:not(:disabled) ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-button-hover--icon-color, var(--bq-button--icon-color, currentColor));\n }\n }\n}\n\n:host {\n @apply is-auto relative inline-block cursor-pointer rounded-[--bq-button--border-radius];\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.only-icon {\n @apply aspect-square;\n}\n\n.small {\n @apply text-[length:--bq-button--small-font-size] p-b-[--bq-button--small-paddingY] p-i-[--bq-button--small-paddingX];\n\n &.only-icon {\n @apply p-[--bq-button--small-paddingY];\n }\n}\n\n.medium {\n @apply text-[length:--bq-button--medium-font-size] p-b-[--bq-button--medium-paddingY] p-i-[--bq-button--medium-paddingX];\n\n &.only-icon {\n @apply p-[--bq-button--medium-paddingY];\n }\n}\n\n.large {\n @apply text-[length:--bq-button--large-font-size] p-b-[--bq-button--large-paddingY] p-i-[--bq-button--large-paddingX];\n\n &.only-icon {\n @apply p-[--bq-button--large-paddingY];\n }\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 type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\nimport type {\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\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 {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)\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-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-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-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?: boolean = 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 /* Text used for accessibility purposes, specially screen readers, to describe the button action /\n @Prop({ reflect: true }) label?: string;\n\n /* If `true` it will display the button in a loading state /\n @Prop() loading?: boolean = false;\n\n /* If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions). Make sure to set the `label` prop for accessibility purposes. /\n @Prop() onlyIcon?: boolean = 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 @Watch('onlyIcon')\n handleOnlyIconPropChange() {\n if (!this.onlyIcon \|\| !isNil(this.label)) return;\n\n console.warn(\n '⚠️ [BqButton]: When using `only-icon` attribute (`onlyIcon` prop), it is required to set the `label` prop for accessibility reasons.',\n );\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus. /\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button gets focus. /\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button is clicked. /\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleOnlyIconPropChange();\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 aria-disabled={this.disabled ? 'true' : 'false'}\n aria-label={this.label ?? undefined}\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 'only-icon': this.onlyIcon,\n }}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n tabIndex={this.disabled ? -1 : 0}\n target={isLink ? this.target : undefined}\n type={this.type}\n >\n <span\n class=\"bq-button__prefix\"\n part=\"prefix\"\n ref={(spanElem) => {\n this.prefixElem = spanElem;\n }}\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span\n class=\"bq-button__suffix\"\n part=\"suffix\"\n ref={(spanElem) => {\n this.suffixElem = spanElem;\n }}\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n </TagElem>\n </Host>\n );\n }\n}\n","/ -------------------------------------------------------------------------- /\n/ Icon request helper /\n/ -------------------------------------------------------------------------- /\n\nimport { isClient, isNil } from '../../../shared/utils';\n\nconst SVG_TAG = 'svg';\nconst ICON_CSS_CLASS = 'bq-icon__svg';\n\ninterface IconCache {\n requests: Map<string, Promise<string>>;\n content: Map<string, string>;\n}\n\nconst cache: IconCache = {\n requests: new Map(),\n content: new Map(),\n};\n\n/\n Sanitizes SVG element by setting required attributes and removing unwanted ones\n * @param svg - The SVG element to sanitize\n /\nconst sanitizeSvgElement = (svg: SVGElement): void => {\n const currentClass = svg.getAttribute('class') \|\| '';\n\n svg.setAttribute('class', `${currentClass} ${ICON_CSS_CLASS}`.trim());\n svg.setAttribute('part', SVG_TAG);\n svg.removeAttribute('height');\n svg.removeAttribute('width');\n};\n\n/\n Validates element security (no scripts or event handlers)\n * @param element - The element to validate\n * @returns True if the element is valid, false otherwise\n /\nconst validateElement = (element: Element): boolean => {\n if (!element \|\| element.nodeType !== Node.ELEMENT_NODE) return false;\n if (element.nodeName.toLowerCase() === 'script') return false;\n\n // Check for malicious attributes using modern array methods\n const hasUnsafeAttribute = Array.from(element.attributes).some((attr) => {\n const value = attr.value?.toLowerCase() \|\| '';\n const name = attr.name.toLowerCase();\n\n // Check for event handlers\n if (name.startsWith('on')) return true;\n // Check for javascript: URLs\n if (value.includes('javascript:')) return true;\n\n return false;\n });\n\n if (hasUnsafeAttribute) return false;\n\n // Recursively validate children\n return Array.from(element.children).every((child) => validateElement(child));\n};\n\n/\n Processes SVG content with security checks and sanitization\n * @param content - The SVG content to process\n * @returns The processed and sanitized SVG content\n /\nconst processSvgContent = (content: string): string => {\n if (!isClient() \|\| isNil(content)) return '';\n\n try {\n const domParser = new DOMParser();\n const doc = domParser.parseFromString(content, 'image/svg+xml');\n const svg = doc.querySelector(SVG_TAG);\n\n if (!svg \|\| !validateElement(svg)) {\n console.warn('[BqIcon] SVG content failed security validation');\n return '';\n }\n\n sanitizeSvgElement(svg);\n return new XMLSerializer().serializeToString(svg);\n } catch (error) {\n console.error('[BqIcon] Error processing SVG content:', error);\n return '';\n }\n};\n\n/\n Fetches and processes SVG content from URL\n * @param url - The URL of the SVG to fetch\n * @param shouldSanitize - Whether to sanitize the SVG content\n * @returns Promise that resolves to the processed SVG content\n /\nconst fetchAndProcessSvg = async (url: string, shouldSanitize = true): Promise<string> => {\n if (!isClient()) return '';\n\n try {\n const response = await fetch(url);\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const content = await response.text();\n\n if (!content.trim()) {\n console.warn(`[BqIcon] Empty SVG content received from ${url}`);\n return '';\n }\n\n return shouldSanitize ? processSvgContent(content) : content;\n } catch (error) {\n console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n return '';\n }\n};\n\n/\n Retrieves SVG content with caching, security validation, and sanitization\n * @param url - The URL of the SVG to fetch\n * @param sanitize - Whether to sanitize the SVG content (default: true)\n * @returns Promise that resolves to the processed SVG content or undefined\n /\nexport const getSvgContent = async (url?: string, sanitize = true): Promise<string> => {\n if (!isClient() \|\| isNil(url)) return undefined;\n\n // Return cached content if available\n if (cache.content.has(url)) {\n const cachedContent = cache.content.get(url);\n return cachedContent;\n }\n\n // Check if the request is already in the cache\n if (!cache.requests.has(url)) {\n // Create new request with proper cleanup\n const request = fetchAndProcessSvg(url, sanitize).then((content) => {\n // Cache the result (including empty strings for failed requests)\n cache.content.set(url, content);\n // Clean up the pending request\n cache.requests.delete(url);\n return content;\n });\n\n cache.requests.set(url, request);\n }\n\n return cache.requests.get(url);\n};\n\n/\n Clears the icon cache - useful for testing or memory management\n /\nexport const clearIconCache = (): void => {\n cache.requests.clear();\n cache.content.clear();\n};\n\n/\n Gets cache statistics for debugging\n /\nexport const getCacheStats = () => ({\n pendingRequests: cache.requests.size,\n cachedContent: cache.content.size,\n urls: Array.from(cache.content.keys()),\n});\n\n// Export cache for external access if needed\nexport { cache as iconCache };\n","/ -------------------------------------------------------------------------- /\n/ Icon styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-icon.variables';\n\n:host {\n @apply inline-block;\n}\n\n/\n This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n /\n.bq-icon__svg {\n @apply scale-x-[--bq-icon--direction];\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Event, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\nimport type { TIconWeight } from './bq-icon.types';\nimport { getSvgContent } from './helper/request';\n\n/\n The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\n * It is a small graphical element that is used to enhance the user interface and improve user experience.\n \n @example How to use it\n * ```html\n * <bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/675fad-icon\n * @status stable\n \n @attr {string} color - Set the stroke color of the SVG. The value should be a valid value of the palette color.\n * @attr {string} label - Label for the icon, used for accessibility.\n * @attr {string} name - Icon name to load. Please check all available icons [here](https://phosphoricons.com/).\n * @attr {string \| number} size - Set the size of the SVG.\n * @attr {string} src - Set the source of the SVG. If the source is set, the name property will be ignored.\n \n @event svgLoaded - Callback handler to be called when the SVG has loaded.\n \n @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n \n @cssprop --bq-icon--color - The stroke color of the SVG.\n * @cssprop --bq-icon--size - The size of the SVG.\n /\n@Component({\n assetsDirs: ['svg'],\n tag: 'bq-icon',\n styleUrl: './scss/bq-icon.scss',\n shadow: true,\n})\nexport class BqIcon {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private svgContent: string;\n\n // Public Property API\n // ========================\n\n /* Label for the icon, used for accessibility /\n @Prop({ reflect: true }) label?: string;\n\n /* Set the stroke color of the SVG. The value should be a valid value of the palette color /\n @Prop({ reflect: true }) color?: string;\n\n /* Icon name to load. Please check all available icons [here](https://phosphoricons.com/) /\n @Prop({ reflect: true }) name?: string;\n\n /* Set the size of the SVG /\n @Prop({ reflect: true }) size?: string \| number = 24;\n\n /* Set the source of the SVG. If the source is set, the name property will be ignored /\n @Prop({ reflect: true }) src?: string;\n\n /* @deprecated It set the icon weight/style /\n @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n handlePropsChange() {\n this.loadIcon(this.name);\n }\n\n /\n !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n * We need to maintain retro-compatibility until the next major release\n /\n @Watch('weight')\n handleWeightChange() {\n if (this.name.includes(this.weight)) return;\n\n console.warn(\n `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n );\n // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n const REGULAR = 'regular';\n const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n // Construct the icon name by appending the weight suffix (if any) and the file extension.\n // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n const iconName = `${this.name}${weightSuffix}`;\n this.loadIcon(iconName);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the SVG has loaded */\n @Event() svgLoaded: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.setupIconComponent();\n }\n\n componentWillLoad() {\n this.setupIconComponent();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private setupIconComponent = () => {\n this.loadIcon(this.name);\n // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n if (!isNil(this.weight)) this.handleWeightChange();\n };\n\n private getIconSource = (name: string) => {\n if (!this.name && !this.src) return undefined;\n // Return the src if it is set\n if (this.src) return this.src;\n\n const SVG_EXTENSION = '.svg';\n const iconFileName = `${name}${SVG_EXTENSION}`;\n\n return getBasePath(iconFileName);\n };\n\n private loadIcon = async (name: string) => {\n const url = this.getIconSource(name);\n if (!url) return;\n\n try {\n const content = await getSvgContent(url, true);\n if (!content) return;\n\n this.svgContent = content;\n this.svgLoaded.emit(this.svgContent);\n } catch (error) {\n console.error('[BEEQ] Failed to load the icon SVG content', error);\n }\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const { color, label, name, size } = this;\n const styles = {\n ...(color && { '--bq-icon--color': getColorCSSVariable(color) }),\n ...(size && { '--bq-icon--size': `${size}px` }),\n };\n\n return (\n <Host style={styles}>\n <div\n aria-label={label ?? `${name} icon`}\n class=\"bs-[--bq-icon--size] is-[--bq-icon--size] flex text-[--bq-icon--color]\"\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-31719229.entry.js → p-71001d9a.entry.js} RENAMED Viewed

@@ -2,5 +2,5 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import{r as a,c as r,a as e,h as t,d as n}from"./p-B6Fb5jZ3.js";import{i as b}from"./p-B4sM1t6Z.js";import{d as i}from"./p-CVw85-WU.js";import{v as o}from"./p-zh4P02Kn.js";import{b as q}from"./p-uqkxeAeG.js";import{l as s,e as c}from"./p-DdvbF5yL.js";import"./p-BcPwGxIn.js";const l=["error","info","neutral","success","warning"];const d=()=>`.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-notification,.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--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-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.relative{position:relative}.block{display:block}.flex{display:flex}.hidden{display:none}.items-start{align-items:flex-start}.gap-xs{gap:var(--bq-spacing-xs)}.rounded-\\[--bq-notification--border-radius\\]{border-radius:var(--bq-notification--border-radius)}.bg-\\[--bq-notification--background\\]{background-color:var(--bq-notification--background)}.text-\\[color\\:--bq-notification--icon-color-error\\]{color:var(--bq-notification--icon-color-error)}.text-\\[color\\:--bq-notification--icon-color-info\\]{color:var(--bq-notification--icon-color-info)}.text-\\[color\\:--bq-notification--icon-color-neutral\\]{color:var(--bq-notification--icon-color-neutral)}.text-\\[color\\:--bq-notification--icon-color-success\\]{color:var(--bq-notification--icon-color-success)}.text-\\[color\\:--bq-notification--icon-color-warning\\]{color:var(--bq-notification--icon-color-warning)}.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.min-is-\\[--bq-notification--min-width\\]{min-inline-size:var(--bq-notification--min-width)}.p-b-\\[--bq-notification--padding\\]{padding-block:var(--bq-notification--padding)}.p-i-\\[--bq-notification--padding\\]{padding-inline:var(--bq-notification--padding)}.m-bs-m{margin-block-start:var(--bq-spacing-m)}@-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-notification--background:var(--bq-ui--primary);--bq-notification--box-shadow:var(--bq-box-shadow--l);--bq-notification--border-color:transparent;--bq-notification--border-radius:var(--bq-radius--s);--bq-notification--border-style:none;--bq-notification--border-width:unset;--bq-notification--content-footer-gap:var(--bq-spacing-m);--bq-notification--title-body-gap:var(--bq-spacing-s);--bq-notification--icon-color-error:var(--bq-icon--danger);--bq-notification--icon-color-info:var(--bq-icon--brand);--bq-notification--icon-color-neutral:var(--bq-icon--primary);--bq-notification--icon-color-success:var(--bq-icon--success);--bq-notification--icon-color-warning:var(--bq-icon--warning);--bq-notification--padding:var(--bq-spacing-m);--bq-notification--min-width:320px;display:block}:host(.is-hidden){display:none}.bq-notification{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);background-color:var(--bq-notification--background);border-radius:var(--bq-notification--border-radius);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;min-inline-size:var(--bq-notification--min-width);padding-block:var(--bq-notification--padding);padding-inline:var(--bq-notification--padding);position:relative;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.notification--icon.color-error{color:var(--bq-notification--icon-color-error)}.notification--icon.color-info{color:var(--bq-notification--icon-color-info)}.notification--icon.color-neutral{color:var(--bq-notification--icon-color-neutral)}.notification--icon.color-success{color:var(--bq-notification--icon-color-success)}.notification--icon.color-warning{color:var(--bq-notification--icon-color-warning)}[part=footer] ::slotted(*){align-items:flex-start;display:flex;gap:var(--bq-spacing-xs)}[part=body] ::slotted(*),[part=footer] ::slotted(*){display:block;margin-block-start:var(--bq-spacing-m)}.-translate-y-xs,.sm\\:translate-x-0,.sm\\:translate-x-s,.sm\\:translate-y-0,.transform,.translate-y-0,.translate-y-xs{--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}.static{position:static}.absolute{position:absolute}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.\\!hidden{display:none!important}.-translate-y-xs{--tw-translate-y:calc(var(--bq-spacing-xs)*-1)}.-translate-y-xs,.translate-y-0{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))}.translate-y-0{--tw-translate-y:0px}.translate-y-xs{--tw-translate-y:var(--bq-spacing-xs)}.transform,.translate-y-xs{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-\\[--bq-notification--content-footer-gap\\]{gap:var(--bq-notification--content-footer-gap)}.gap-\\[--bq-notification--title-body-gap\\]{gap:var(--bq-notification--title-body-gap)}.text-left{text-align:left}.align-top{vertical-align:top}.text-s{font-size:var(--bq-font-size--s)}.font-semibold{font-weight:var(--bq-font-weight--semibold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.inset-ie-m{inset-inline-end:var(--bq-spacing-m)}.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}}@media (min-width:640px){.sm\\:translate-x-0{--tw-translate-x:0px}.sm\\:translate-x-0,.sm\\:translate-x-s{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))}.sm\\:translate-x-s{--tw-translate-x:var(--bq-spacing-s)}.sm\\:translate-y-0{--tw-translate-y:0px;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))}}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-0::part(button){padding:0}.inline{display:inline}.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-\\[--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 v="bq-notification-portal";const f=class{constructor(e){a(this,e);this.bqHide=r(this,"bqHide");this.bqShow=r(this,"bqShow");this.bqAfterOpen=r(this,"bqAfterOpen");this.bqAfterClose=r(this,"bqAfterClose")}autoDismissDebounce;bodyElem;footerElem;notificationElem;get el(){return e(this)}hasContent=false;hasFooter=false;notificationPortal=b()?document.querySelector(`.${v}`):null;autoDismiss;border="s";disableClose;hideIcon;open;time=3e3;type="info";handleTimeout(){this.autoDismissDebounce?.cancel();if(!this.autoDismiss)return;this.autoDismissDebounce=i((()=>{this.hide()}),this.time);if(this.open)this.autoDismissDebounce()}handleOpenChange(){this.autoDismissDebounce?.cancel();if(!(this.autoDismiss&&this.open))return;this.autoDismissDebounce()}checkPropValues(){o(l,"info",this.el,"type")}bqHide;bqShow;bqAfterOpen;bqAfterClose;connectedCallback(){if(!b())return;const{notificationPortal:a}=this;if(!a){this.notificationPortal=Object.assign(document.createElement("div"),{className:v})}}componentWillLoad(){this.checkPropValues();this.handleTimeout()}componentDidLoad(){this.handleSlotChange()}afterNotificationClose(){try{const{notificationPortal:a}=this;a.removeChild(this.el);if(a.querySelector(this.el.tagName.toLowerCase())===null){a.remove()}}catch(a){if(a instanceof DOMException)return;throw a}}async hide(){await this.handleHide()}async show(){await this.handleShow()}async toast(){if(!b())return;const{notificationPortal:a}=this;if(a?.parentElement===null){document.body.append(a)}a?.appendChild(this.el);requestAnimationFrame((()=>{this.show()}))}handleHide=async()=>{const a=this.bqHide.emit(this.el);if(!a.defaultPrevented){await s(this.notificationElem);this.open=false;this.handleTransitionEnd()}};handleShow=async()=>{const a=this.bqShow.emit(this.el);if(!a.defaultPrevented){this.open=true;await c(this.notificationElem);this.handleTransitionEnd()}};handleTransitionEnd=()=>{if(this.open){this.bqAfterOpen.emit();return}this.bqAfterClose.emit()};handleSlotChange=()=>{this.hasContent=q(this.bodyElem);this.hasFooter=q(this.footerElem,"footer")};get iconName(){const a={error:"x-circle",success:"check-circle",warning:"warning-circle"};return a[this.type]||"info"}render(){const a={...this.border&&{"--bq-notification--border-radius":`var(--bq-radius--${this.border})`}};return t(n,{key:"50f8cdb42efa01007b01bcaee82c261a124cb917","aria-hidden":!this.open?"true":"false",class:{"is-hidden":!this.open},hidden:!this.open?"true":"false",role:"alert",style:a},t("div",{key:"6147f1a1a832b02f0be4d799548f620bb975f67f",class:"bq-notification","data-transition-enter":"transform transition ease-out duration-300","data-transition-enter-end":"translate-y-0 opacity-100 sm:translate-x-0","data-transition-enter-start":"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s","data-transition-leave":"transform transition ease-in duration-100","data-transition-leave-end":"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s","data-transition-leave-start":"translate-y-0 opacity-100 sm:translate-x-0",part:"wrapper",ref:a=>{this.notificationElem=a}},!this.disableClose&&t("bq-button",{key:"0b25461348347a3c248af52619a1309cd1098e17",appearance:"text",border:"s",class:"absolute inset-ie-m [&::part(button)]:p-0",label:"Close",onBqClick:()=>this.hide(),onlyIcon:true,part:"btn-close",size:"small"},t("slot",{key:"4c8bd5002ab827bfc6ca8f8393f1a89b19dd5bce",name:"btn-close"},t("bq-icon",{key:"fcd71fa37255da11edb409205e12492d2d8996f8","aria-hidden":"true",name:"x"}))),t("div",{key:"6f97f089f03f4aec8fd479e66985203de204b3cd",class:{"!hidden":this.hideIcon,[`color-${this.type}`]:true,"notification--icon me-xs flex text-left align-top":true},part:"icon-outline"},t("slot",{key:"9e2dbcbd84f5043959f8fdc99cca3bc084ad9a0d",name:"icon"},t("bq-icon",{key:"8f99e0b6f03306a25e349c4f141cacfa316853e6",exportparts:"base,svg",name:this.iconName,part:"icon"}))),t("div",{key:"8d4dc714404ce7ceb0353d1d689f64ae6a6d33d1",class:"flex flex-col items-start gap-[--bq-notification--content-footer-gap]",part:"main"},t("div",{key:"2b78d175900647e8839ee9bbd4b99ff394196224",class:"flex flex-col gap-[--bq-notification--title-body-gap]",part:"content"},t("div",{key:"b5e79d81ae31dac9ff11e29ac32cc4078e922137",class:"title-font font-semibold leading-regular",part:"title"},t("slot",{key:"2edebb9afe4181a1637899d3c4cb85fa0344c4ae"})),t("div",{key:"1cfe45e470f4a67e98a99e73871415f8457d46a7",class:{"text-s leading-regular":true,"!hidden":!this.hasContent},part:"body",ref:a=>{this.bodyElem=a}},t("slot",{key:"adc5b82445daa31e8c6cbce28f8faee5fd62782a",name:"body",onSlotchange:this.handleSlotChange}))),t("div",{key:"d5ee9db0959c004c05df9aafde7625a6623b66e7",class:{"flex items-start gap-xs":true,"!hidden":!this.hasFooter},part:"footer",ref:a=>{this.footerElem=a}},t("slot",{key:"5d2b2510e3523f59e101511a75b8e40180a74005",name:"footer",onSlotchange:this.handleSlotChange})))))}static get watchers(){return{autoDismiss:[{handleTimeout:0}],time:[{handleTimeout:0}],open:[{handleOpenChange:0}],type:[{checkPropValues:0}]}}};f.style=d();export{f as bq_notification};
-//# sourceMappingURL=p-31719229.entry.js.map
+import{r as a,c as r,a as e,h as t,d as n}from"./p-CO2T68hs.js";import{i as b}from"./p-B4sM1t6Z.js";import{d as i}from"./p-CVw85-WU.js";import{v as o}from"./p-zh4P02Kn.js";import{b as q}from"./p-uqkxeAeG.js";import{l as s,e as c}from"./p-DdvbF5yL.js";import"./p-BcPwGxIn.js";const l=["error","info","neutral","success","warning"];const d=()=>`.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-notification,.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{text-size-adjust:none;font-family:var(--bq-font-family);font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);line-height:var(--bq-font-line-height--regular);min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:where(:root){--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:"Outfit",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}:where(.endava),:where([bq-theme=endava]){--bq-font-family:"Poppins",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-100);--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-950);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.relative{position:relative}.block{display:block}.flex{display:flex}.hidden{display:none}.items-start{align-items:flex-start}.gap-xs{gap:var(--bq-spacing-xs)}.rounded-\\[--bq-notification--border-radius\\]{border-radius:var(--bq-notification--border-radius)}.bg-\\[--bq-notification--background\\]{background-color:var(--bq-notification--background)}.text-\\[color\\:--bq-notification--icon-color-error\\]{color:var(--bq-notification--icon-color-error)}.text-\\[color\\:--bq-notification--icon-color-info\\]{color:var(--bq-notification--icon-color-info)}.text-\\[color\\:--bq-notification--icon-color-neutral\\]{color:var(--bq-notification--icon-color-neutral)}.text-\\[color\\:--bq-notification--icon-color-success\\]{color:var(--bq-notification--icon-color-success)}.text-\\[color\\:--bq-notification--icon-color-warning\\]{color:var(--bq-notification--icon-color-warning)}.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.min-is-\\[--bq-notification--min-width\\]{min-inline-size:var(--bq-notification--min-width)}.p-b-\\[--bq-notification--padding\\]{padding-block:var(--bq-notification--padding)}.p-i-\\[--bq-notification--padding\\]{padding-inline:var(--bq-notification--padding)}.m-bs-m{margin-block-start:var(--bq-spacing-m)}@-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-notification--background:var(--bq-ui--primary);--bq-notification--box-shadow:var(--bq-box-shadow--l);--bq-notification--border-color:transparent;--bq-notification--border-radius:var(--bq-radius--s);--bq-notification--border-style:none;--bq-notification--border-width:unset;--bq-notification--content-footer-gap:var(--bq-spacing-m);--bq-notification--title-body-gap:var(--bq-spacing-s);--bq-notification--icon-color-error:var(--bq-icon--danger);--bq-notification--icon-color-info:var(--bq-icon--brand);--bq-notification--icon-color-neutral:var(--bq-icon--primary);--bq-notification--icon-color-success:var(--bq-icon--success);--bq-notification--icon-color-warning:var(--bq-icon--warning);--bq-notification--padding:var(--bq-spacing-m);--bq-notification--min-width:320px;display:block}:host(.is-hidden){display:none}.bq-notification{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);background-color:var(--bq-notification--background);border-radius:var(--bq-notification--border-radius);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;min-inline-size:var(--bq-notification--min-width);padding-block:var(--bq-notification--padding);padding-inline:var(--bq-notification--padding);position:relative;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.notification--icon.color-error{color:var(--bq-notification--icon-color-error)}.notification--icon.color-info{color:var(--bq-notification--icon-color-info)}.notification--icon.color-neutral{color:var(--bq-notification--icon-color-neutral)}.notification--icon.color-success{color:var(--bq-notification--icon-color-success)}.notification--icon.color-warning{color:var(--bq-notification--icon-color-warning)}[part=footer] ::slotted(*){align-items:flex-start;display:flex;gap:var(--bq-spacing-xs)}[part=body] ::slotted(*),[part=footer] ::slotted(*){display:block;margin-block-start:var(--bq-spacing-m)}.-translate-y-xs,.sm\\:translate-x-0,.sm\\:translate-x-s,.sm\\:translate-y-0,.transform,.translate-y-0,.translate-y-xs{--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}.static{position:static}.absolute{position:absolute}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.\\!hidden{display:none!important}.-translate-y-xs{--tw-translate-y:calc(var(--bq-spacing-xs)*-1)}.-translate-y-xs,.translate-y-0{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))}.translate-y-0{--tw-translate-y:0px}.translate-y-xs{--tw-translate-y:var(--bq-spacing-xs)}.transform,.translate-y-xs{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-\\[--bq-notification--content-footer-gap\\]{gap:var(--bq-notification--content-footer-gap)}.gap-\\[--bq-notification--title-body-gap\\]{gap:var(--bq-notification--title-body-gap)}.text-left{text-align:left}.align-top{vertical-align:top}.text-s{font-size:var(--bq-font-size--s)}.font-semibold{font-weight:var(--bq-font-weight--semibold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.inset-ie-m{inset-inline-end:var(--bq-spacing-m)}.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}}@media (min-width:640px){.sm\\:translate-x-0{--tw-translate-x:0px}.sm\\:translate-x-0,.sm\\:translate-x-s{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))}.sm\\:translate-x-s{--tw-translate-x:var(--bq-spacing-s)}.sm\\:translate-y-0{--tw-translate-y:0px;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))}}.\\[\\&\\:\\:part\\(button\\)\\]\\:p-0::part(button){padding:0}.inline{display:inline}.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-\\[--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 v="bq-notification-portal";const f=class{constructor(e){a(this,e);this.bqHide=r(this,"bqHide");this.bqShow=r(this,"bqShow");this.bqAfterOpen=r(this,"bqAfterOpen");this.bqAfterClose=r(this,"bqAfterClose")}autoDismissDebounce;bodyElem;footerElem;notificationElem;get el(){return e(this)}hasContent=false;hasFooter=false;notificationPortal=b()?document.querySelector(`.${v}`):null;autoDismiss;border="s";disableClose;hideIcon;open;time=3e3;type="info";handleTimeout(){this.autoDismissDebounce?.cancel();if(!this.autoDismiss)return;this.autoDismissDebounce=i((()=>{this.hide()}),this.time);if(this.open)this.autoDismissDebounce()}handleOpenChange(){this.autoDismissDebounce?.cancel();if(!(this.autoDismiss&&this.open))return;this.autoDismissDebounce()}checkPropValues(){o(l,"info",this.el,"type")}bqHide;bqShow;bqAfterOpen;bqAfterClose;connectedCallback(){if(!b())return;const{notificationPortal:a}=this;if(!a){this.notificationPortal=Object.assign(document.createElement("div"),{className:v})}}componentWillLoad(){this.checkPropValues();this.handleTimeout()}componentDidLoad(){this.handleSlotChange()}afterNotificationClose(){try{const{notificationPortal:a}=this;a.removeChild(this.el);if(a.querySelector(this.el.tagName.toLowerCase())===null){a.remove()}}catch(a){if(a instanceof DOMException)return;throw a}}async hide(){await this.handleHide()}async show(){await this.handleShow()}async toast(){if(!b())return;const{notificationPortal:a}=this;if(a?.parentElement===null){document.body.append(a)}a?.appendChild(this.el);requestAnimationFrame((()=>{this.show()}))}handleHide=async()=>{const a=this.bqHide.emit(this.el);if(!a.defaultPrevented){await s(this.notificationElem);this.open=false;this.handleTransitionEnd()}};handleShow=async()=>{const a=this.bqShow.emit(this.el);if(!a.defaultPrevented){this.open=true;await c(this.notificationElem);this.handleTransitionEnd()}};handleTransitionEnd=()=>{if(this.open){this.bqAfterOpen.emit();return}this.bqAfterClose.emit()};handleSlotChange=()=>{this.hasContent=q(this.bodyElem);this.hasFooter=q(this.footerElem,"footer")};get iconName(){const a={error:"x-circle",success:"check-circle",warning:"warning-circle"};return a[this.type]||"info"}render(){const a={...this.border&&{"--bq-notification--border-radius":`var(--bq-radius--${this.border})`}};return t(n,{key:"50f8cdb42efa01007b01bcaee82c261a124cb917","aria-hidden":!this.open?"true":"false",class:{"is-hidden":!this.open},hidden:!this.open?"true":"false",role:"alert",style:a},t("div",{key:"6147f1a1a832b02f0be4d799548f620bb975f67f",class:"bq-notification","data-transition-enter":"transform transition ease-out duration-300","data-transition-enter-end":"translate-y-0 opacity-100 sm:translate-x-0","data-transition-enter-start":"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s","data-transition-leave":"transform transition ease-in duration-100","data-transition-leave-end":"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s","data-transition-leave-start":"translate-y-0 opacity-100 sm:translate-x-0",part:"wrapper",ref:a=>{this.notificationElem=a}},!this.disableClose&&t("bq-button",{key:"0b25461348347a3c248af52619a1309cd1098e17",appearance:"text",border:"s",class:"absolute inset-ie-m [&::part(button)]:p-0",label:"Close",onBqClick:()=>this.hide(),onlyIcon:true,part:"btn-close",size:"small"},t("slot",{key:"4c8bd5002ab827bfc6ca8f8393f1a89b19dd5bce",name:"btn-close"},t("bq-icon",{key:"fcd71fa37255da11edb409205e12492d2d8996f8","aria-hidden":"true",name:"x"}))),t("div",{key:"6f97f089f03f4aec8fd479e66985203de204b3cd",class:{"!hidden":this.hideIcon,[`color-${this.type}`]:true,"notification--icon me-xs flex text-left align-top":true},part:"icon-outline"},t("slot",{key:"9e2dbcbd84f5043959f8fdc99cca3bc084ad9a0d",name:"icon"},t("bq-icon",{key:"8f99e0b6f03306a25e349c4f141cacfa316853e6",exportparts:"base,svg",name:this.iconName,part:"icon"}))),t("div",{key:"8d4dc714404ce7ceb0353d1d689f64ae6a6d33d1",class:"flex flex-col items-start gap-[--bq-notification--content-footer-gap]",part:"main"},t("div",{key:"2b78d175900647e8839ee9bbd4b99ff394196224",class:"flex flex-col gap-[--bq-notification--title-body-gap]",part:"content"},t("div",{key:"b5e79d81ae31dac9ff11e29ac32cc4078e922137",class:"title-font font-semibold leading-regular",part:"title"},t("slot",{key:"2edebb9afe4181a1637899d3c4cb85fa0344c4ae"})),t("div",{key:"1cfe45e470f4a67e98a99e73871415f8457d46a7",class:{"text-s leading-regular":true,"!hidden":!this.hasContent},part:"body",ref:a=>{this.bodyElem=a}},t("slot",{key:"adc5b82445daa31e8c6cbce28f8faee5fd62782a",name:"body",onSlotchange:this.handleSlotChange}))),t("div",{key:"d5ee9db0959c004c05df9aafde7625a6623b66e7",class:{"flex items-start gap-xs":true,"!hidden":!this.hasFooter},part:"footer",ref:a=>{this.footerElem=a}},t("slot",{key:"5d2b2510e3523f59e101511a75b8e40180a74005",name:"footer",onSlotchange:this.handleSlotChange})))))}static get watchers(){return{autoDismiss:[{handleTimeout:0}],time:[{handleTimeout:0}],open:[{handleOpenChange:0}],type:[{checkPropValues:0}]}}};f.style=d();export{f as bq_notification};
+//# sourceMappingURL=p-71001d9a.entry.js.map

package/dist/beeq/{p-31719229.entry.js.map → p-71001d9a.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["NOTIFICATION_TYPE","bqNotificationCss","NOTIFICATION_PORTAL_SELECTOR","BqNotification","autoDismissDebounce","bodyElem","footerElem","notificationElem","hasContent","hasFooter","notificationPortal","isClient","document","querySelector","autoDismiss","border","disableClose","hideIcon","open","time","type","handleTimeout","this","cancel","debounce","hide","handleOpenChange","checkPropValues","validatePropValue","el","bqHide","bqShow","bqAfterOpen","bqAfterClose","connectedCallback","Object","assign","createElement","className","componentWillLoad","componentDidLoad","handleSlotChange","afterNotificationClose","removeChild","tagName","toLowerCase","remove","error","DOMException","handleHide","show","handleShow","toast","parentElement","body","append","appendChild","requestAnimationFrame","async","ev","emit","defaultPrevented","leave","handleTransitionEnd","enter","hasSlotContent","iconName","typeMap","success","warning","render","style","h","Host","key","class","hidden","role","part","ref","div","appearance","label","onBqClick","onlyIcon","size","name","exportparts","onSlotchange"],"sources":["../../packages/beeq/src/components/notification/bq-notification.types.ts","../../packages/beeq/src/components/notification/scss/bq-notification.scss?tag=bq-notification&encapsulation=shadow","../../packages/beeq/src/components/notification/bq-notification.tsx"],"sourcesContent":["export const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'] as const;\nexport type TNotificationType = (typeof NOTIFICATION_TYPE)[number];\n\nexport const NOTIFICATION_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TNotificationBorderRadius = (typeof NOTIFICATION_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Notification styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-notification.variables';\n\n:host {\n @apply block;\n}\n\n:host(.is-hidden) {\n @apply hidden;\n}\n\n.bq-notification {\n @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];\n @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];\n}\n\n/\n Set the notification icon color based on the type value selected\n /\n.notification--icon.color {\n &-error {\n @apply text-[color:--bq-notification--icon-color-error];\n }\n\n &-info {\n @apply text-[color:--bq-notification--icon-color-info];\n }\n\n &-neutral {\n @apply text-[color:--bq-notification--icon-color-neutral];\n }\n\n &-success {\n @apply text-[color:--bq-notification--icon-color-success];\n }\n\n &-warning {\n @apply text-[color:--bq-notification--icon-color-warning];\n }\n}\n\n/\n Here we guarantee that if the footer actions are wrapped in a div container from the consumer side,\n * the styles get applied to the that wrapping container directly\n /\n[part='footer'] ::slotted() {\n @apply flex items-start gap-xs;\n}\n\n[part='body'],\n[part='footer'] {\n ::slotted() {\n @apply block m-bs-m;\n }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n enter,\n hasSlotContent,\n isClient,\n leave,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { NOTIFICATION_TYPE } from './bq-notification.types';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/\n The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n \n @example How to use it\n * ```html\n * <bq-notification border=\"s\" time=\"3000\" type=\"info\">\n * Title\n * <span slot=\"body\">\n * This is some description text text\n * <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n * </span>\n * <div class=\"flex gap-xs\" slot=\"footer\">\n * <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n * <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n * </div>\n * </bq-notification>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/945cb6-notification\n * @status stable\n \n @dependency bq-button\n * @dependency bq-icon\n \n @attr {boolean} auto-dismiss - If true, the notification will automatically hide after the specified amount of time\n * @attr {string} border - The corder radius of the notification component\n * @attr {boolean} disable-close - If true, the close button at the top right of the notification won't be shown\n * @attr {boolean} hide-icon - If true, the notification icon won't be shown\n * @attr {boolean} open - If true, the notification will be shown\n * @attr {number} time - The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`\n * @attr {string} type - Type of Notification\n \n @event bqAfterClose - Callback handler to be called after the notification has been closed\n * @event bqAfterOpen - Callback handler to be called after the notification has been opened\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 notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n \n @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-notification--background - The notification background color\n * @cssprop --bq-notification--box-shadow - The notification box shadow\n * @cssprop --bq-notification--border-color - The notification border color\n * @cssprop --bq-notification--border-radius - The notification border radius\n * @cssprop --bq-notification--border-style - The notification border style\n * @cssprop --bq-notification--border-width - The notification border width\n * @cssprop --bq-notification--content-footer-gap - The notification content and footer gap\n * @cssprop --bq-notification--title-body-gap - The notification title and body gap\n * @cssprop --bq-notification--icon-color-error - The notification icon color for error type\n * @cssprop --bq-notification--icon-color-info - The notification icon color for info type\n * @cssprop --bq-notification--icon-color-neutral - The notification icon color for neutral type\n * @cssprop --bq-notification--icon-color-success - The notification icon color for success type\n * @cssprop --bq-notification--icon-color-warning - The notification icon color for warning type\n * @cssprop --bq-notification--padding - The notification padding\n * @cssprop --bq-notification--min-width - The notification min width\n /\n@Component({\n tag: 'bq-notification',\n styleUrl: './scss/bq-notification.scss',\n shadow: true,\n})\nexport class BqNotification {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private notificationElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqNotificationElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n @State() private notificationPortal = isClient() ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /* If true, the notification will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corder radius of the notification component /\n @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n /* If true, the close button at the top right of the notification won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the notification icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the notification will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Notification /\n @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!(this.autoDismiss && this.open)) return;\n this.autoDismissDebounce();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\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;\n\n /* Callback handler to be called when the notification is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the notification has been opened /\n @Event() bqAfterOpen!: EventEmitter;\n\n /* Callback handler to be called after the notification has been closed /\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (!notificationPortal) {\n this.notificationPortal = Object.assign(document.createElement('div'), {\n className: NOTIFICATION_PORTAL_SELECTOR,\n });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqAfterClose')\n afterNotificationClose() {\n try {\n const { notificationPortal } = this;\n notificationPortal.removeChild(this.el);\n // Remove the notification portal from the DOM when there are no more notifications\n if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n notificationPortal.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 hide the notification component /\n @Method()\n async hide(): Promise<void> {\n await this.handleHide();\n }\n\n /* Method to be called to show the notification component /\n @Method()\n async show(): Promise<void> {\n await this.handleShow();\n }\n\n /* This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically /\n @Method()\n async toast() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (notificationPortal?.parentElement === null) {\n document.body.append(notificationPortal);\n }\n\n notificationPortal?.appendChild(this.el);\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 handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.notificationElem);\n this.open = false;\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n await enter(this.notificationElem);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n };\n\n private handleSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const typeMap = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return typeMap[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n aria-hidden={!this.open ? 'true' : 'false'}\n class={{ 'is-hidden': !this.open }}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n style={style}\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n part=\"wrapper\"\n ref={(div) => {\n this.notificationElem = div;\n }}\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n appearance=\"text\"\n border=\"s\"\n class=\"absolute inset-ie-m [&::part(button)]:p-0\"\n label=\"Close\"\n onBqClick={() => this.hide()}\n onlyIcon\n part=\"btn-close\"\n size=\"small\"\n >\n <slot name=\"btn-close\">\n <bq-icon aria-hidden=\"true\" name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n '!hidden': this.hideIcon,\n [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n 'notification--icon me-xs flex text-left align-top': true,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n <bq-icon exportparts=\"base,svg\" name={this.iconName} part=\"icon\" />\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n part=\"body\"\n ref={(div) => {\n this.bodyElem = div;\n }}\n >\n <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n part=\"footer\"\n ref={(div) => {\n this.footerElem = div;\n }}\n >\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["NOTIFICATION_TYPE","bqNotificationCss","NOTIFICATION_PORTAL_SELECTOR","BqNotification","autoDismissDebounce","bodyElem","footerElem","notificationElem","hasContent","hasFooter","notificationPortal","isClient","document","querySelector","autoDismiss","border","disableClose","hideIcon","open","time","type","handleTimeout","this","cancel","debounce","hide","handleOpenChange","checkPropValues","validatePropValue","el","bqHide","bqShow","bqAfterOpen","bqAfterClose","connectedCallback","Object","assign","createElement","className","componentWillLoad","componentDidLoad","handleSlotChange","afterNotificationClose","removeChild","tagName","toLowerCase","remove","error","DOMException","handleHide","show","handleShow","toast","parentElement","body","append","appendChild","requestAnimationFrame","async","ev","emit","defaultPrevented","leave","handleTransitionEnd","enter","hasSlotContent","iconName","typeMap","success","warning","render","style","h","Host","key","class","hidden","role","part","ref","div","appearance","label","onBqClick","onlyIcon","size","name","exportparts","onSlotchange"],"sources":["../../packages/beeq/src/components/notification/bq-notification.types.ts","../../packages/beeq/src/components/notification/scss/bq-notification.scss?tag=bq-notification&encapsulation=shadow","../../packages/beeq/src/components/notification/bq-notification.tsx"],"sourcesContent":["export const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'] as const;\nexport type TNotificationType = (typeof NOTIFICATION_TYPE)[number];\n\nexport const NOTIFICATION_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TNotificationBorderRadius = (typeof NOTIFICATION_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Notification styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-notification.variables';\n\n:host {\n @apply block;\n}\n\n:host(.is-hidden) {\n @apply hidden;\n}\n\n.bq-notification {\n @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];\n @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];\n}\n\n/\n Set the notification icon color based on the type value selected\n /\n.notification--icon.color {\n &-error {\n @apply text-[color:--bq-notification--icon-color-error];\n }\n\n &-info {\n @apply text-[color:--bq-notification--icon-color-info];\n }\n\n &-neutral {\n @apply text-[color:--bq-notification--icon-color-neutral];\n }\n\n &-success {\n @apply text-[color:--bq-notification--icon-color-success];\n }\n\n &-warning {\n @apply text-[color:--bq-notification--icon-color-warning];\n }\n}\n\n/\n Here we guarantee that if the footer actions are wrapped in a div container from the consumer side,\n * the styles get applied to the that wrapping container directly\n /\n[part='footer'] ::slotted() {\n @apply flex items-start gap-xs;\n}\n\n[part='body'],\n[part='footer'] {\n ::slotted() {\n @apply block m-bs-m;\n }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n enter,\n hasSlotContent,\n isClient,\n leave,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { NOTIFICATION_TYPE } from './bq-notification.types';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/\n The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n \n @example How to use it\n * ```html\n * <bq-notification border=\"s\" time=\"3000\" type=\"info\">\n * Title\n * <span slot=\"body\">\n * This is some description text text\n * <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n * </span>\n * <div class=\"flex gap-xs\" slot=\"footer\">\n * <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n * <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n * </div>\n * </bq-notification>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/945cb6-notification\n * @status stable\n \n @dependency bq-button\n * @dependency bq-icon\n \n @attr {boolean} auto-dismiss - If true, the notification will automatically hide after the specified amount of time\n * @attr {string} border - The corder radius of the notification component\n * @attr {boolean} disable-close - If true, the close button at the top right of the notification won't be shown\n * @attr {boolean} hide-icon - If true, the notification icon won't be shown\n * @attr {boolean} open - If true, the notification will be shown\n * @attr {number} time - The length of time, in milliseconds, after which the notification will close itself. Only valid if `auto-dismiss=\"true\"`\n * @attr {string} type - Type of Notification\n \n @event bqAfterClose - Callback handler to be called after the notification has been closed\n * @event bqAfterOpen - Callback handler to be called after the notification has been opened\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 notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n \n @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-notification--background - The notification background color\n * @cssprop --bq-notification--box-shadow - The notification box shadow\n * @cssprop --bq-notification--border-color - The notification border color\n * @cssprop --bq-notification--border-radius - The notification border radius\n * @cssprop --bq-notification--border-style - The notification border style\n * @cssprop --bq-notification--border-width - The notification border width\n * @cssprop --bq-notification--content-footer-gap - The notification content and footer gap\n * @cssprop --bq-notification--title-body-gap - The notification title and body gap\n * @cssprop --bq-notification--icon-color-error - The notification icon color for error type\n * @cssprop --bq-notification--icon-color-info - The notification icon color for info type\n * @cssprop --bq-notification--icon-color-neutral - The notification icon color for neutral type\n * @cssprop --bq-notification--icon-color-success - The notification icon color for success type\n * @cssprop --bq-notification--icon-color-warning - The notification icon color for warning type\n * @cssprop --bq-notification--padding - The notification padding\n * @cssprop --bq-notification--min-width - The notification min width\n /\n@Component({\n tag: 'bq-notification',\n styleUrl: './scss/bq-notification.scss',\n shadow: true,\n})\nexport class BqNotification {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private notificationElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqNotificationElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n @State() private notificationPortal = isClient() ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /* If true, the notification will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corder radius of the notification component /\n @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n /* If true, the close button at the top right of the notification won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the notification icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the notification will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Notification /\n @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!(this.autoDismiss && this.open)) return;\n this.autoDismissDebounce();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\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;\n\n /* Callback handler to be called when the notification is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the notification has been opened /\n @Event() bqAfterOpen!: EventEmitter;\n\n /* Callback handler to be called after the notification has been closed /\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (!notificationPortal) {\n this.notificationPortal = Object.assign(document.createElement('div'), {\n className: NOTIFICATION_PORTAL_SELECTOR,\n });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqAfterClose')\n afterNotificationClose() {\n try {\n const { notificationPortal } = this;\n notificationPortal.removeChild(this.el);\n // Remove the notification portal from the DOM when there are no more notifications\n if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n notificationPortal.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 hide the notification component /\n @Method()\n async hide(): Promise<void> {\n await this.handleHide();\n }\n\n /* Method to be called to show the notification component /\n @Method()\n async show(): Promise<void> {\n await this.handleShow();\n }\n\n /* This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically /\n @Method()\n async toast() {\n if (!isClient()) return;\n\n const { notificationPortal } = this;\n if (notificationPortal?.parentElement === null) {\n document.body.append(notificationPortal);\n }\n\n notificationPortal?.appendChild(this.el);\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 handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.notificationElem);\n this.open = false;\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n await enter(this.notificationElem);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n };\n\n private handleSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const typeMap = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return typeMap[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n aria-hidden={!this.open ? 'true' : 'false'}\n class={{ 'is-hidden': !this.open }}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n style={style}\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n part=\"wrapper\"\n ref={(div) => {\n this.notificationElem = div;\n }}\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n appearance=\"text\"\n border=\"s\"\n class=\"absolute inset-ie-m [&::part(button)]:p-0\"\n label=\"Close\"\n onBqClick={() => this.hide()}\n onlyIcon\n part=\"btn-close\"\n size=\"small\"\n >\n <slot name=\"btn-close\">\n <bq-icon aria-hidden=\"true\" name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n '!hidden': this.hideIcon,\n [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n 'notification--icon me-xs flex text-left align-top': true,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n <bq-icon exportparts=\"base,svg\" name={this.iconName} part=\"icon\" />\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n part=\"body\"\n ref={(div) => {\n this.bodyElem = div;\n }}\n >\n <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n part=\"footer\"\n ref={(div) => {\n this.footerElem = div;\n }}\n >\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}