npm - @beeq/core - Versions diffs - 1.8.0-beta.4 → 1.8.0-beta.5 - Mend

@beeq/core 1.8.0-beta.4 → 1.8.0-beta.5

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

package/dist/components/bq-notification.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { d as debounce } from './debounce.js';
 import { v as validatePropValue } from './props.js';
 import { b as hasSlotContent } from './slot.js';
@@ -28,7 +27,7 @@ const BqNotification$1 = /*@__PURE__*/ proxyCustomElement(class BqNotification e
         this.bqAfterClose = createEvent(this, "bqAfterClose", 7);
         this.hasContent = false;
         this.hasFooter = false;
-        this.notificationPortal = document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`);
+        this.notificationPortal = typeof window !== 'undefined' ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;
         this.autoDismiss = undefined;
         this.border = 's';
         this.disableClose = undefined;
@@ -82,7 +81,7 @@ const BqNotification$1 = /*@__PURE__*/ proxyCustomElement(class BqNotification e
     // =====================================
     connectedCallback() {
         const { notificationPortal } = this;
-        if (!notificationPortal && typeof document !== 'undefined') {
+        if (!notificationPortal && typeof window !== 'undefined') {
             this.notificationPortal = Object.assign(document.createElement('div'), {
                 className: NOTIFICATION_PORTAL_SELECTOR,
             });
@@ -186,11 +185,11 @@ const BqNotification$1 = /*@__PURE__*/ proxyCustomElement(class BqNotification e
         const style = {
             ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (h(Host, { key: '635a7cacceb2d9611a4b07a950686add7e1d6dfa', style: style, class: { 'is-hidden': !this.open }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "alert" }, h("div", { key: 'e58a5c744e18a45e2dfecbbe66a24e1c354ed402', class: "bq-notification", "data-transition-enter": "transform transition ease-out duration-300", "data-transition-enter-start": "translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", "data-transition-enter-end": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave": "transform transition ease-in duration-100", "data-transition-leave-start": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave-end": "-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", ref: (div) => (this.notificationElem = div), part: "wrapper" }, !this.disableClose && (h("bq-button", { key: '9c6420dcc9429bb2fb2799fe9f4ebddee4e01901', class: "notification--close absolute inset-ie-5 [&::part(label)]:inline-flex", appearance: "text", size: "small", onClick: () => this.hide(), part: "btn-close" }, h("slot", { key: '861b72cfeceb7e0bc6fce67ce6a23838e7979031', name: "btn-close" }, h("bq-icon", { key: 'fde9f6eb4189dca4045ba9263c72ee867ae7d6d0', name: "x" })))), h("div", { key: 'd866ddeb7d7c74ba33b41e5377ab8902340a6c58', class: {
+        return (h(Host, { key: '411d19d1f08119b6c7fe7853e49195a5b9e12cd9', style: style, class: { 'is-hidden': !this.open }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "alert" }, h("div", { key: '45f9cd844fde4725a766bd9af611b1ba37f92acd', class: "bq-notification", "data-transition-enter": "transform transition ease-out duration-300", "data-transition-enter-start": "translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", "data-transition-enter-end": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave": "transform transition ease-in duration-100", "data-transition-leave-start": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave-end": "-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", ref: (div) => (this.notificationElem = div), part: "wrapper" }, !this.disableClose && (h("bq-button", { key: '9f4115b99545244551ee758430e4bb5d7f72a81b', class: "notification--close absolute inset-ie-5 [&::part(label)]:inline-flex", appearance: "text", size: "small", onClick: () => this.hide(), part: "btn-close" }, h("slot", { key: '5472deffc786ecbd62374f7fd28968bceac2aa5b', name: "btn-close" }, h("bq-icon", { key: '33e3ca7621c377aae89fe1c09692568d3caeca11', name: "x" })))), h("div", { key: '8139860988d2ff313310a13757eefee3e76c23d9', class: {
                 '!hidden': this.hideIcon,
                 [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)
                 'notification--icon me-xs flex text-left align-top': true,
-            }, part: "icon-outline" }, h("slot", { key: 'da8c411b03acbe06c44af477a4123b32c645c870', name: "icon" }, h("bq-icon", { key: '09d42073f6496fe8d179526301bac1ff167b81e2', name: this.iconName, part: "icon", exportparts: "base,svg" }))), h("div", { key: '3593124d9e0c874841a8456b3c0ce26e78fefe67', class: "flex flex-col items-start gap-[--bq-notification--content-footer-gap]", part: "main" }, h("div", { key: 'bf70e73d5a73645d670b7e8c65d99323ea325cd3', class: "flex flex-col gap-[--bq-notification--title-body-gap]", part: "content" }, h("div", { key: 'f7866f62899d5e467af450f4e4b054004948dddb', class: "title-font font-semibold leading-regular", part: "title" }, h("slot", { key: 'b40316a74af238c6dd3e865a72a40f44b34bceb4' })), h("div", { key: 'd21bdc707eb85ba9f2a388e40f4c74369a0d6fa6', class: { 'text-s leading-regular': true, '!hidden': !this.hasContent }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '756744bb4587ec9b2b2f8d810e2d030ab98153fb', name: "body", onSlotchange: this.handleContentSlotChange }))), h("div", { key: '24a5390de7f160ef98a184a5e7db50080be91e10', class: { 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '0f4a35ca8a0db64372d8f9eb4c73bddcfba32d54', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
+            }, part: "icon-outline" }, h("slot", { key: '46a501d0ef1f7fa1440cac3eac05d51e19c25336', name: "icon" }, h("bq-icon", { key: '6306ef09bff157ef4eca5ee45259d4a17c9da89e', name: this.iconName, part: "icon", exportparts: "base,svg" }))), h("div", { key: '39b62fdb9df69307eb913707a9cc585415064709', class: "flex flex-col items-start gap-[--bq-notification--content-footer-gap]", part: "main" }, h("div", { key: 'c3a061358db3859536429a5c7cce781575bc0740', class: "flex flex-col gap-[--bq-notification--title-body-gap]", part: "content" }, h("div", { key: 'd7bc9f7ccd2e3c66b2ff48f6d8fd1a0687a34570', class: "title-font font-semibold leading-regular", part: "title" }, h("slot", { key: '04f8365658aafe57aa8bc67231560addbddd6eab' })), h("div", { key: '13c7e30888fae485aa127dd2d0cbcddf9a1ef3f4', class: { 'text-s leading-regular': true, '!hidden': !this.hasContent }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '39d07bf713348590855059a0b44efe0d66ee9222', name: "body", onSlotchange: this.handleContentSlotChange }))), h("div", { key: 'dadf3b1c035aa1b2061ab22d0badf8a90a843923', class: { 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '4e3075f3f32633d8af9a41468bd1c3972f709404', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
     }
     static get watchers() { return {
         "autoDismiss": ["handleTimeout"],

package/dist/components/bq-notification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-notification.js","mappings":"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","names":["BqNotification"],"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 Tweak the close bq-button styles so it remain small without extra padding\n /\n.notification--close::part(button) {\n @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\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 { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { NOTIFICATION_TYPE, TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\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 @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\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 = document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`);\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 const { notificationPortal } = this;\n if (!notificationPortal && typeof document !== 'undefined') {\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 // 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 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 handleContentSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n };\n\n private handleFooterSlotChange = () => {\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 style={style}\n class={{ 'is-hidden': !this.open }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n ref={(div) => (this.notificationElem = div)}\n part=\"wrapper\"\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n class=\"notification--close absolute inset-ie-5 [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n onClick={() => this.hide()}\n part=\"btn-close\"\n >\n <slot name=\"btn-close\">\n <bq-icon 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 name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />\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 ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n ref={(div) => (this.footerElem = div)}\n part=\"footer\"\n >\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-notification.js","mappings":"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","names":["BqNotification"],"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 Tweak the close bq-button styles so it remain small without extra padding\n /\n.notification--close::part(button) {\n @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\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 { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { NOTIFICATION_TYPE, TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\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 @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\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 =\n typeof window !== 'undefined' ? 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 const { notificationPortal } = this;\n if (!notificationPortal && typeof window !== 'undefined') {\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 // 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 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 handleContentSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n };\n\n private handleFooterSlotChange = () => {\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 style={style}\n class={{ 'is-hidden': !this.open }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n ref={(div) => (this.notificationElem = div)}\n part=\"wrapper\"\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n class=\"notification--close absolute inset-ie-5 [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n onClick={() => this.hide()}\n part=\"btn-close\"\n >\n <slot name=\"btn-close\">\n <bq-icon 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 name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />\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 ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n ref={(div) => (this.footerElem = div)}\n part=\"footer\"\n >\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/bq-option-list2.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { i as isEventTargetChildOfElement } from './event.js';
 import { i as isHTMLElement } from './isHTMLElement.js';

package/dist/components/bq-option-list2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-option-list2.js","mappings":"~~;;;;;;;;;~~AAAA,MAAM,eAAe,GAAG,q4lBAAq4lB,CAAC;AAC95lB,2BAAe,eAAe;;MCWjB,YAAY;;;;;;yBAoBsB,SAAS;;;;;;;IAO7C,QAAQ,CAA6D;;;;IAM9E,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;KACzC;;;IAOD,UAAU,CAAC,KAA+B;QACxC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAE9F,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KACjD;;;;;;;;;;;;;;IAkBD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oEAAoE,EAAC,IAAI,EAAC,MAAM,IACzF,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option list styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option-list.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n /\n@Component({\n tag: 'bq-option-list',\n styleUrl: './scss/bq-option-list.scss',\n shadow: true,\n})\nexport class BqOptionList {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionListElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n /* Aria label for the list. /\n @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when `bq-option` is selected (on click/enter press). */\n @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.el.setAttribute('role', 'listbox');\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n @Listen('bqEnter', { passive: true })\n onBqSelect(event: CustomEvent<HTMLElement>) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-option') \|\| !isEventTargetChildOfElement(event, this.el)) return;\n\n this.bqSelect.emit({ item, value: item.value });\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-option-list2.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,q4lBAAq4lB,CAAC;AAC95lB,2BAAe,eAAe;;MCWjB,YAAY;;;;;;yBAoBsB,SAAS;;;;;;;IAO7C,QAAQ,CAA6D;;;;IAM9E,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;KACzC;;;IAOD,UAAU,CAAC,KAA+B;QACxC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAE9F,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KACjD;;;;;;;;;;;;;;IAkBD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oEAAoE,EAAC,IAAI,EAAC,MAAM,IACzF,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option list styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option-list.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n /\n@Component({\n tag: 'bq-option-list',\n styleUrl: './scss/bq-option-list.scss',\n shadow: true,\n})\nexport class BqOptionList {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionListElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n /* Aria label for the list. /\n @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when `bq-option` is selected (on click/enter press). */\n @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.el.setAttribute('role', 'listbox');\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n @Listen('bqEnter', { passive: true })\n onBqSelect(event: CustomEvent<HTMLElement>) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-option') \|\| !isEventTargetChildOfElement(event, this.el)) return;\n\n this.bqSelect.emit({ item, value: item.value });\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/bq-option.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { b as hasSlotContent } from './slot.js';
 const bqOptionCss = ".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-option,.shadow-\\[shadow\\:--bq-option--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{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.flex-auto{flex:1 1 auto}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.rounded-\\[--bq-option--border-radius\\]{border-radius:var(--bq-option--border-radius)}.border-\\[length\\:--bq-option--border-width\\]{border-width:var(--bq-option--border-width)}.border-\\[color\\:--bq-option--border-color\\]{border-color:var(--bq-option--border-color)}.bg-\\[--bq-option--background\\]{background-color:var(--bq-option--background)}.pe-\\[--bq-option--padding-end\\]{padding-inline-end:var(--bq-option--padding-end)}.pe-\\[--bq-option-label--padding-end\\]{padding-inline-end:var(--bq-option-label--padding-end)}.ps-\\[--bq-option--padding-start\\]{padding-inline-start:var(--bq-option--padding-start)}.ps-\\[--bq-option-label--padding-start\\]{padding-inline-start:var(--bq-option-label--padding-start)}.text-\\[length\\:--bq-option--font-size\\]{font-size:var(--bq-option--font-size)}.shadow-\\[shadow\\:--bq-option--box-shadow\\]{--tw-shadow:var(--bq-option--box-shadow);--tw-shadow-colored:var(--bq-option--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.p-b-\\[--bq-option--paddingY\\]{padding-block:var(--bq-option--paddingY)}.p-i-\\[--bq-option--paddingY\\]{padding-inline:var(--bq-option--paddingY)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-option--background:var(--bq-ui--primary);--bq-option--font-size:var(--bq-font-size--m);--bq-option--border-color:transparent;--bq-option--border-style:none;--bq-option--border-width:0;--bq-option--border-radius:var(--bq-radius--s);--bq-option--box-shadow:none;--bq-option--gap-start:var(--bq-spacing-s);--bq-option--gap-end:var(--bq-spacing-s);--bq-option--paddingY:var(--bq-spacing-xs);--bq-option--padding-start:var(--bq-spacing-s);--bq-option--padding-end:var(--bq-spacing-s);display:block}:host([hidden]){display:none}.bq-option{--tw-shadow:var(--bq-option--box-shadow);--tw-shadow-colored:var(--bq-option--box-shadow);align-items:center;background-color:var(--bq-option--background);border-color:var(--bq-option--border-color);border-radius:var(--bq-option--border-radius);border-style:var(--bq-option--border-style);border-width:var(--bq-option--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);cursor:pointer;display:flex;font-size:var(--bq-option--font-size);inline-size:100%;padding-block:var(--bq-option--paddingY);padding-inline-end:var(--bq-option--padding-end);padding-inline-start:var(--bq-option--padding-start);padding-inline:var(--bq-option--paddingY);transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-option:focus-visible:not(.disabled){outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-option:hover:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-option.active:not(.disabled){background-color:var(--bq-ui--brand-alt);color:var(--bq-text--brand)}.bq-option.disabled{cursor:not-allowed;opacity:.6}.bq-option__label{display:inline-block;flex:1 1 auto;overflow:hidden;padding-inline-end:var(--bq-option-label--padding-end);padding-inline-start:var(--bq-option-label--padding-start);text-overflow:ellipsis;white-space:nowrap}.\\[\\&\\:not\\(\\.disabled\\)\\]\\:focus-visible\\:focus:focus-visible:not(.disabled){outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.\\[\\&\\.active\\:not\\(\\.disabled\\)\\]\\:bg-ui-brand-alt.active:not(.disabled){background-color:var(--bq-ui--brand-alt)}.\\[\\&\\.disabled\\]\\:cursor-not-allowed.disabled{cursor:not-allowed}.static{position:static}.me-\\[--bq-option--gap-start\\]{margin-inline-end:var(--bq-option--gap-start)}.ml-auto{margin-left:auto}.ms-\\[--bq-option--gap-end\\]{margin-inline-start:var(--bq-option--gap-end)}.\\!hidden{display:none!important}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}";

package/dist/components/bq-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-option.js","mappings":"~~;;;;;;;;~~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","names":["BqOption"],"sources":["../../packages/beeq/src/components/option/scss/bq-option.scss?tag=bq-option&encapsulation=shadow","../../packages/beeq/src/components/option/bq-option.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option.variables';\n\n:host {\n @apply block;\n}\n\n:host([hidden]) {\n @apply hidden;\n}\n\n.bq-option {\n @apply flex cursor-pointer items-center text-[length:--bq-option--font-size] is-full;\n @apply pe-[--bq-option--padding-end] ps-[--bq-option--padding-start] p-b-[--bq-option--paddingY] p-i-[--bq-option--paddingY];\n @apply rounded-[--bq-option--border-radius] bg-[--bq-option--background] shadow-[shadow:--bq-option--box-shadow];\n @apply border-[length:--bq-option--border-width] border-[color:--bq-option--border-color];\n // Transition\n @apply transition-colors duration-150 ease-in-out;\n // Focus\n @apply [&:not(.disabled)]:focus-visible:focus;\n // Hover\n @apply [&:not(.disabled)]:hover:bg-hover-ui-secondary;\n // Active\n @apply [&.active:not(.disabled)]:bg-ui-brand-alt [&.active:not(.disabled)]:text-text-brand;\n // Disabled\n @apply [&.disabled]:cursor-not-allowed [&.disabled]:opacity-60;\n\n border-style: var(--bq-option--border-style);\n}\n\n.bq-option__label {\n @apply inline-block flex-auto overflow-hidden text-ellipsis whitespace-nowrap;\n @apply pe-[--bq-option-label--padding-end] ps-[--bq-option-label--padding-start];\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n * @part label - The `span` element in which the label text is displayed.\n * @part prefix - The `span` element in which the prefix is displayed (generally `bq-icon`).\n * @part suffix - The `span` element in which the suffix is displayed (generally `bq-icon`).\n /\n@Component({\n tag: 'bq-option',\n styleUrl: './scss/bq-option.scss',\n shadow: true,\n})\nexport class BqOption {\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!: HTMLBqOptionElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasPrefix: boolean = false;\n @State() hasSuffix: boolean = false;\n\n // Public Property API\n // ========================\n\n /* If true, the option is hidden. /\n @Prop({ reflect: true }) hidden: boolean = false;\n\n /* If true, the option is disabled. /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* A string representing the value of the option. Can be used to identify the item /\n @Prop({ reflect: true }) value?: string;\n\n /* If true, the option is selected and active. /\n @Prop({ reflect: true }) selected: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when item loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is focused /\n @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is clicked /\n @Event() bqClick: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called on enter key press */\n @Event() bqEnter: EventEmitter<HTMLBqOptionElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return;\n this.bqEnter.emit(this.el);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private onBlur = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqBlur.emit(this.el);\n };\n\n private onFocus = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqFocus.emit(this.el);\n };\n\n private onClick = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqClick.emit(this.el);\n };\n\n private onSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private handleSuffixSlotChange = () => {\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private get isDisabledOrHidden() {\n return this.disabled \|\| this.hidden;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host\n aria-disabled={this.isDisabledOrHidden ? 'true' : 'false'}\n aria-hidden={this.hidden ? 'true' : 'false'}\n aria-selected={this.selected ? 'true' : 'false'}\n role=\"option\"\n >\n <div\n class={{\n 'bq-option': true,\n disabled: this.disabled,\n active: !this.disabled && this.selected,\n }}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.onClick}\n tabindex={this.isDisabledOrHidden ? '-1' : '0'}\n role=\"button\"\n part=\"base\"\n >\n <span\n class={{\n 'bq-option__prefix me-[--bq-option--gap-start] flex items-center': true,\n '!hidden': !this.hasPrefix,\n }}\n ref={(elem) => (this.prefixElem = elem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.onSlotChange} />\n </span>\n <span class=\"bq-option__label\" part=\"label\">\n <slot />\n </span>\n <span\n class={{\n 'bq-option__suffix ml-auto ms-[--bq-option--gap-end] flex items-center': true,\n '!hidden': !this.hasSuffix,\n }}\n ref={(elem) => (this.suffixElem = elem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-option.js","mappings":"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","names":["BqOption"],"sources":["../../packages/beeq/src/components/option/scss/bq-option.scss?tag=bq-option&encapsulation=shadow","../../packages/beeq/src/components/option/bq-option.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option.variables';\n\n:host {\n @apply block;\n}\n\n:host([hidden]) {\n @apply hidden;\n}\n\n.bq-option {\n @apply flex cursor-pointer items-center text-[length:--bq-option--font-size] is-full;\n @apply pe-[--bq-option--padding-end] ps-[--bq-option--padding-start] p-b-[--bq-option--paddingY] p-i-[--bq-option--paddingY];\n @apply rounded-[--bq-option--border-radius] bg-[--bq-option--background] shadow-[shadow:--bq-option--box-shadow];\n @apply border-[length:--bq-option--border-width] border-[color:--bq-option--border-color];\n // Transition\n @apply transition-colors duration-150 ease-in-out;\n // Focus\n @apply [&:not(.disabled)]:focus-visible:focus;\n // Hover\n @apply [&:not(.disabled)]:hover:bg-hover-ui-secondary;\n // Active\n @apply [&.active:not(.disabled)]:bg-ui-brand-alt [&.active:not(.disabled)]:text-text-brand;\n // Disabled\n @apply [&.disabled]:cursor-not-allowed [&.disabled]:opacity-60;\n\n border-style: var(--bq-option--border-style);\n}\n\n.bq-option__label {\n @apply inline-block flex-auto overflow-hidden text-ellipsis whitespace-nowrap;\n @apply pe-[--bq-option-label--padding-end] ps-[--bq-option-label--padding-start];\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n * @part label - The `span` element in which the label text is displayed.\n * @part prefix - The `span` element in which the prefix is displayed (generally `bq-icon`).\n * @part suffix - The `span` element in which the suffix is displayed (generally `bq-icon`).\n /\n@Component({\n tag: 'bq-option',\n styleUrl: './scss/bq-option.scss',\n shadow: true,\n})\nexport class BqOption {\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!: HTMLBqOptionElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasPrefix: boolean = false;\n @State() hasSuffix: boolean = false;\n\n // Public Property API\n // ========================\n\n /* If true, the option is hidden. /\n @Prop({ reflect: true }) hidden: boolean = false;\n\n /* If true, the option is disabled. /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* A string representing the value of the option. Can be used to identify the item /\n @Prop({ reflect: true }) value?: string;\n\n /* If true, the option is selected and active. /\n @Prop({ reflect: true }) selected: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when item loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is focused /\n @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is clicked /\n @Event() bqClick: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called on enter key press */\n @Event() bqEnter: EventEmitter<HTMLBqOptionElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return;\n this.bqEnter.emit(this.el);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private onBlur = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqBlur.emit(this.el);\n };\n\n private onFocus = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqFocus.emit(this.el);\n };\n\n private onClick = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqClick.emit(this.el);\n };\n\n private onSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private handleSuffixSlotChange = () => {\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private get isDisabledOrHidden() {\n return this.disabled \|\| this.hidden;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host\n aria-disabled={this.isDisabledOrHidden ? 'true' : 'false'}\n aria-hidden={this.hidden ? 'true' : 'false'}\n aria-selected={this.selected ? 'true' : 'false'}\n role=\"option\"\n >\n <div\n class={{\n 'bq-option': true,\n disabled: this.disabled,\n active: !this.disabled && this.selected,\n }}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.onClick}\n tabindex={this.isDisabledOrHidden ? '-1' : '0'}\n role=\"button\"\n part=\"base\"\n >\n <span\n class={{\n 'bq-option__prefix me-[--bq-option--gap-start] flex items-center': true,\n '!hidden': !this.hasPrefix,\n }}\n ref={(elem) => (this.prefixElem = elem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.onSlotChange} />\n </span>\n <span class=\"bq-option__label\" part=\"label\">\n <slot />\n </span>\n <span\n class={{\n 'bq-option__suffix ml-auto ms-[--bq-option--gap-end] flex items-center': true,\n '!hidden': !this.hasSuffix,\n }}\n ref={(elem) => (this.suffixElem = elem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/bq-page-title.js CHANGED Viewed

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

package/dist/components/bq-page-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-page-title.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,cAAc,GAAG,6zoBAA6zoB,CAAC;AACr1oB,0BAAe,cAAc;;MCiBhBA,aAAW;;;;;kCAiBgB,KAAK;yBACd,KAAK;2BACH,KAAK;;;;IAf5B,kBAAkB,CAAc;IAChC,UAAU,CAAc;IACxB,YAAY,CAAc;;;;;;;;;;;;;;;;;;;;;;;;IA4C1B,gBAAgB,GAAG;QACzB,IAAI,CAAC,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QAC1E,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3D,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;KACnE,CAAC;;;;IAMF,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,2EAA2E,EAAC,IAAI,EAAC,MAAM,IAEhG,4DACE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC1D,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,EACrD,IAAI,EAAC,MAAM,IAEX,6DAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrD,EACN,4DAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,IACxD,4DAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,cAAc,IAEvD,2DACE,KAAK,EAAC,iIAAiI,EACvI,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACL,EAEL,4DACE,KAAK,EAAE,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACpF,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD,CACF,EAEN,4DACE,KAAK,EAAE;gBACL,0IAA0I,EACxI,IAAI;gBACN,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW;aAC1B,EACD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAC/C,IAAI,EAAC,WAAW,IAEhB,6DAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC1D,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqPageTitle"],"sources":["../../packages/beeq/src/components/page-title/scss/bq-page-title.scss?tag=bq-page-title&encapsulation=shadow","../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Page title styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-page-title.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/\n @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n /\n@Component({\n tag: 'bq-page-title',\n styleUrl: './scss/bq-page-title.scss',\n shadow: true,\n})\nexport class BqPageTitle {\n // Own Properties\n // ====================\n\n private backNavigationElem: HTMLElement;\n private suffixElem: HTMLElement;\n private subTitleElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqPageTitleElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private haveBackNavigation = false;\n @State() private hasSuffix = false;\n @State() private hasSubTitle = false;\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleSlotChange = () => {\n this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n {/ Back navigation button /}\n <div\n class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n ref={(divElem) => (this.backNavigationElem = divElem)}\n part=\"back\"\n >\n <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n {/ Title /}\n <h1\n class=\"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]\"\n part=\"title\"\n >\n <slot />\n </h1>\n {/ Suffix /}\n <div\n class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n ref={(divElem) => (this.suffixElem = divElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ Sub-title */}\n <div\n class={{\n 'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':\n true,\n hidden: !this.hasSubTitle,\n }}\n ref={(divElem) => (this.subTitleElem = divElem)}\n part=\"sub-title\"\n >\n <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-page-title.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,6zoBAA6zoB,CAAC;AACr1oB,0BAAe,cAAc;;MCiBhBA,aAAW;;;;;kCAiBgB,KAAK;yBACd,KAAK;2BACH,KAAK;;;;IAf5B,kBAAkB,CAAc;IAChC,UAAU,CAAc;IACxB,YAAY,CAAc;;;;;;;;;;;;;;;;;;;;;;;;IA4C1B,gBAAgB,GAAG;QACzB,IAAI,CAAC,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QAC1E,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3D,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;KACnE,CAAC;;;;IAMF,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,2EAA2E,EAAC,IAAI,EAAC,MAAM,IAEhG,4DACE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAC1D,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,EACrD,IAAI,EAAC,MAAM,IAEX,6DAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACrD,EACN,4DAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,IACxD,4DAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,cAAc,IAEvD,2DACE,KAAK,EAAC,iIAAiI,EACvI,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACL,EAEL,4DACE,KAAK,EAAE,EAAE,uCAAuC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACpF,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD,CACF,EAEN,4DACE,KAAK,EAAE;gBACL,0IAA0I,EACxI,IAAI;gBACN,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW;aAC1B,EACD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAC/C,IAAI,EAAC,WAAW,IAEhB,6DAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC1D,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqPageTitle"],"sources":["../../packages/beeq/src/components/page-title/scss/bq-page-title.scss?tag=bq-page-title&encapsulation=shadow","../../packages/beeq/src/components/page-title/bq-page-title.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Page title styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-page-title.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, h, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/\n @part base - The inner container `<div>`of element that contains the base page title component.\n * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.\n * @part title-suffix - Defines the container that holds the title and any suffix content.\n * @part back - The container `<div>` page title element that acts as back slot container.\n * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n * @part suffix - The `<div>` page title element that acts as suffix slot container.\n * @part sub-title - The `<div>` page title element that acts as sub-title slot container.\n /\n@Component({\n tag: 'bq-page-title',\n styleUrl: './scss/bq-page-title.scss',\n shadow: true,\n})\nexport class BqPageTitle {\n // Own Properties\n // ====================\n\n private backNavigationElem: HTMLElement;\n private suffixElem: HTMLElement;\n private subTitleElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqPageTitleElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private haveBackNavigation = false;\n @State() private hasSuffix = false;\n @State() private hasSubTitle = false;\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleSlotChange = () => {\n this.haveBackNavigation = hasSlotContent(this.backNavigationElem, 'back');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n this.hasSubTitle = hasSlotContent(this.subTitleElem, 'sub-title');\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]\" part=\"base\">\n {/ Back navigation button /}\n <div\n class={{ flex: true, '!hidden': !this.haveBackNavigation }}\n ref={(divElem) => (this.backNavigationElem = divElem)}\n part=\"back\"\n >\n <slot name=\"back\" onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"flex flex-grow flex-col gap-xs\" part=\"content\">\n <div class=\"flex items-center gap-xs\" part=\"title-suffix\">\n {/ Title /}\n <h1\n class=\"title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]\"\n part=\"title\"\n >\n <slot />\n </h1>\n {/ Suffix /}\n <div\n class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}\n ref={(divElem) => (this.suffixElem = divElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ Sub-title */}\n <div\n class={{\n 'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':\n true,\n hidden: !this.hasSubTitle,\n }}\n ref={(divElem) => (this.subTitleElem = divElem)}\n part=\"sub-title\"\n >\n <slot name=\"sub-title\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/bq-progress.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { v as validatePropValue } from './props.js';
 import { d as defineCustomElement$2 } from './bq-tooltip2.js';

package/dist/components/bq-progress.js.map CHANGED Viewed

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

package/dist/components/bq-radio-group.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import './assetsPath.js';
 import { d as debounce } from './debounce.js';
 import { i as isHTMLElement } from './isHTMLElement.js';
 import { i as isNil } from './isNil.js';

package/dist/components/bq-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-radio-group.js","mappings":";;;;;;;;;;;AAAO,MAAM,uBAAuB,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU;;ACA1E,MAAM,eAAe,GAAG,y1lBAAy1lB,CAAC;AACl3lB,2BAAe,eAAe;;MCajBA,cAAY;;;;;;iCAqBuB,KAAK;;;wBASd,KAAK;wBAGL,KAAK;2BAGoC,UAAU;4BAGjC,CAAC;;;;IAnChD,cAAc,GAA8B,IAAI,CAAC;IAEjD,iBAAiB,CAA2D;;;;IA0CpF,qBAAqB;QACnB,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAElC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO;YACnC,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnD,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YACjC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACzB,OAAO,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SAC7E,CAAC,CAAC;KACJ;IAGD,eAAe;QACb,iBAAiB,CAAC,uBAAuB,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;KAChF;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;YACzB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SACpD;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC;SACjC;QAED,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,CAAC,KAAmD;YACpF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC3B,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACvB;;;;;IAOQ,QAAQ,CAA8D;;;;IAM/E,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,gBAAgB;QACd,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;;;IAMD,WAAW,CAAC,KAAiB;QAC3B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YAC5G,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;SACpC;KACF;IAGD,SAAS,CAAC,KAAsC;QAC9C,IAAI,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;YAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;SACpC;QAED,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO;QAE9C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,MAAM,cAAc,CAAC,OAAO,GAAG,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC;QACvG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KACpC;IAGD,WAAW,CAAC,KAAiC;QAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;QAEzB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC;YAAE,OAAO;QAE/C,QAAQ,KAAK,CAAC,MAAM,CAAC,GAAG;YACtB,KAAK,WAAW,CAAC;YACjB,KAAK,YAAY,EAAE;gBACjB,IAAI,CAAC,uBAAuB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAC3C,MAAM;aACP;YAED,KAAK,SAAS,CAAC;YACf,KAAK,WAAW,EAAE;gBAChB,IAAI,CAAC,uBAAuB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;gBAC5C,MAAM;aACP;SAGF;KACF;IAGD,SAAS,CAAC,KAAsC;QAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc;YAAE,OAAO;QAEjD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAGD,QAAQ,CAAC,KAAsC;QAC7C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,EAAE;YACvE,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;;;;;;;;;;;IAcD,IAAY,eAAe;QACzB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;KACzD;IAEO,uBAAuB,CAAC,aAAiC,EAAE,IAAa;QAC9E,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,QAAQ;YAC3D,IAAI,cAAc,KAAK,aAAa,EAAE;gBACpC,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;gBAE/D,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;gBAE9B,MAAM,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;aAC9B;SACF,CAAC,CAAC;KACJ;IAEO,mBAAmB,CAAC,QAA8B,EAAE,KAAa,EAAE,OAAO,GAAG,IAAI;QACvF,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,YAAY,GAAG,KAAK,CAAC;QAEzB,GAAG;YACD,YAAY,GAAG,CAAC,QAAQ,CAAC,MAAM,IAAI,YAAY,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,MAAM,CAAC;YACzF,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;SAClC,QAAQ,OAAO,CAAC,QAAQ,EAAE;QAE3B,OAAO,OAAO,CAAC;KAChB;IAEO,eAAe,CAAC,MAA0B;QAChD,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QACzB,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;QAC7B,IAAI,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;KAC3C;;;;IAMD,MAAM;QACJ,QACE,iEAAU,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,IACvG,+DAAQ,IAAI,EAAC,OAAO,IAClB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACd,EACT,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,OAAO,IAC7D,8DAAQ,CACJ,CACG,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqRadioGroup"],"sources":["../../packages/beeq/src/components/radio-group/bq-radio-group.types.ts","../../packages/beeq/src/components/radio-group/scss/bq-radio-group.scss?tag=bq-radio-group&encapsulation=shadow","../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"sourcesContent":["export const RADIO_GROUP_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TRadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATION)[number];\n","/* -------------------------------------------------------------------------- /\n/ Radio group styles /\n/ -------------------------------------------------------------------------- /\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio-group {\n @apply m-b-0 m-i-0;\n\n &:not(.has-fieldset) {\n @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;\n }\n\n &--horizontal {\n @apply flex;\n }\n\n &--vertical {\n @apply flex flex-col;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION, TRadioGroupOrientation } from './bq-radio-group.types';\nimport { debounce, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\n/\n @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n /\n@Component({\n tag: 'bq-radio-group',\n styleUrl: './scss/bq-radio-group.scss',\n shadow: true,\n})\nexport class BqRadioGroup {\n // Own Properties\n // ====================\n\n private focusedBqRadio: HTMLBqRadioElement \| null = null;\n\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqRadioGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true, all radio inputs in the group will display a background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true, mutable: true }) value?: string;\n\n /* If true radio inputs are disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If true displays fieldset /\n @Prop({ reflect: true }) fieldset? = false;\n\n /* The display orientation of the radio inputs /\n @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n /* A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change /\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('backgroundOnHover')\n @Watch('disabled')\n @Watch('name')\n @Watch('value')\n handleGroupProperties() {\n if (!this.bqRadioElements) return;\n\n this.bqRadioElements.forEach((bqRadio) => {\n bqRadio.backgroundOnHover = this.backgroundOnHover;\n bqRadio.disabled = this.disabled;\n bqRadio.name = this.name;\n bqRadio.checked = !isNil(this.value) ? bqRadio.value === this.value : false;\n });\n }\n\n @Watch('orientation')\n checkPropValues() {\n validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n }\n\n @Watch('debounceTime')\n checkDebounceChange() {\n if (this.debounceTime < 0) {\n this.debounceTime = Math.max(0, this.debounceTime);\n }\n\n if (this.debouncedBqChange) {\n this.debouncedBqChange.cancel();\n }\n\n this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n this.bqChange.emit(event);\n }, this.debounceTime);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes */\n @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.checkDebounceChange();\n }\n\n componentDidLoad() {\n this.handleGroupProperties();\n }\n\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'body', passive: true })\n onMouseDown(event: MouseEvent) {\n if (!isNil(this.focusedBqRadio) && isHTMLElement(event.target, 'bq-radio') && this.el.contains(event.target)) {\n this.focusedBqRadio = event.target;\n }\n }\n\n @Listen('bqClick')\n onBqClick(event: CustomEvent<HTMLBqRadioElement>) {\n if (isNil(this.focusedBqRadio)) {\n this.focusedBqRadio = event.detail;\n }\n\n if (event.detail.value === this.value) return;\n\n const target = event.detail;\n this.bqRadioElements.forEach((bqRadioElement) => (bqRadioElement.checked = bqRadioElement === target));\n this.checkRadioInput(event.detail);\n }\n\n @Listen('bqKeyDown')\n onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n const { target } = event;\n\n if (!isHTMLElement(target, 'bq-radio')) return;\n\n switch (event.detail.key) {\n case 'ArrowDown':\n case 'ArrowRight': {\n this.focusRadioInputSibbling(target, true);\n break;\n }\n\n case 'ArrowUp':\n case 'ArrowLeft': {\n this.focusRadioInputSibbling(target, false);\n break;\n }\n\n default:\n }\n }\n\n @Listen('bqFocus', { capture: true })\n onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n if (event.detail !== this.focusedBqRadio) return;\n\n event.stopPropagation();\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isNil(this.focusedBqRadio) && event.detail !== this.focusedBqRadio) {\n event.stopPropagation();\n } else {\n this.focusedBqRadio = null;\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 // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqRadioElements(): HTMLBqRadioElement[] {\n return Array.from(this.el.querySelectorAll('bq-radio'));\n }\n\n private focusRadioInputSibbling(currentTarget: HTMLBqRadioElement, next: boolean): void {\n this.bqRadioElements.forEach((bqRadioElement, index, elements) => {\n if (bqRadioElement === currentTarget) {\n const target = this.getNextRadioElement(elements, index, next);\n\n currentTarget.checked = false;\n\n target.vFocus();\n this.checkRadioInput(target);\n }\n });\n }\n\n private getNextRadioElement(elements: HTMLBqRadioElement[], index: number, forward = true): HTMLBqRadioElement {\n let element = null;\n let elementIndex = index;\n\n do {\n elementIndex = (elements.length + (elementIndex + (forward ? 1 : -1))) % elements.length;\n element = elements[elementIndex];\n } while (element.disabled);\n\n return element;\n }\n\n private checkRadioInput(target: HTMLBqRadioElement): void {\n const { value } = target;\n target.checked = true;\n this.value = value;\n this.focusedBqRadio = target;\n this.debouncedBqChange({ value, target });\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <fieldset class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }} role=\"radiogroup\" part=\"base\">\n <legend part=\"label\">\n <slot name=\"label\" />\n </legend>\n <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n <slot />\n </div>\n </fieldset>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-radio-group.js","mappings":"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","names":["BqRadioGroup"],"sources":["../../packages/beeq/src/components/radio-group/bq-radio-group.types.ts","../../packages/beeq/src/components/radio-group/scss/bq-radio-group.scss?tag=bq-radio-group&encapsulation=shadow","../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"sourcesContent":["export const RADIO_GROUP_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TRadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATION)[number];\n","/* -------------------------------------------------------------------------- /\n/ Radio group styles /\n/ -------------------------------------------------------------------------- /\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio-group {\n @apply m-b-0 m-i-0;\n\n &:not(.has-fieldset) {\n @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;\n }\n\n &--horizontal {\n @apply flex;\n }\n\n &--vertical {\n @apply flex flex-col;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION, TRadioGroupOrientation } from './bq-radio-group.types';\nimport { debounce, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\n/\n @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n /\n@Component({\n tag: 'bq-radio-group',\n styleUrl: './scss/bq-radio-group.scss',\n shadow: true,\n})\nexport class BqRadioGroup {\n // Own Properties\n // ====================\n\n private focusedBqRadio: HTMLBqRadioElement \| null = null;\n\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqRadioGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true, all radio inputs in the group will display a background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true, mutable: true }) value?: string;\n\n /* If true radio inputs are disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If true displays fieldset /\n @Prop({ reflect: true }) fieldset? = false;\n\n /* The display orientation of the radio inputs /\n @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n /* A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change /\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('backgroundOnHover')\n @Watch('disabled')\n @Watch('name')\n @Watch('value')\n handleGroupProperties() {\n if (!this.bqRadioElements) return;\n\n this.bqRadioElements.forEach((bqRadio) => {\n bqRadio.backgroundOnHover = this.backgroundOnHover;\n bqRadio.disabled = this.disabled;\n bqRadio.name = this.name;\n bqRadio.checked = !isNil(this.value) ? bqRadio.value === this.value : false;\n });\n }\n\n @Watch('orientation')\n checkPropValues() {\n validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n }\n\n @Watch('debounceTime')\n checkDebounceChange() {\n if (this.debounceTime < 0) {\n this.debounceTime = Math.max(0, this.debounceTime);\n }\n\n if (this.debouncedBqChange) {\n this.debouncedBqChange.cancel();\n }\n\n this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n this.bqChange.emit(event);\n }, this.debounceTime);\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes */\n @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.checkDebounceChange();\n }\n\n componentDidLoad() {\n this.handleGroupProperties();\n }\n\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'body', passive: true })\n onMouseDown(event: MouseEvent) {\n if (!isNil(this.focusedBqRadio) && isHTMLElement(event.target, 'bq-radio') && this.el.contains(event.target)) {\n this.focusedBqRadio = event.target;\n }\n }\n\n @Listen('bqClick')\n onBqClick(event: CustomEvent<HTMLBqRadioElement>) {\n if (isNil(this.focusedBqRadio)) {\n this.focusedBqRadio = event.detail;\n }\n\n if (event.detail.value === this.value) return;\n\n const target = event.detail;\n this.bqRadioElements.forEach((bqRadioElement) => (bqRadioElement.checked = bqRadioElement === target));\n this.checkRadioInput(event.detail);\n }\n\n @Listen('bqKeyDown')\n onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n const { target } = event;\n\n if (!isHTMLElement(target, 'bq-radio')) return;\n\n switch (event.detail.key) {\n case 'ArrowDown':\n case 'ArrowRight': {\n this.focusRadioInputSibbling(target, true);\n break;\n }\n\n case 'ArrowUp':\n case 'ArrowLeft': {\n this.focusRadioInputSibbling(target, false);\n break;\n }\n\n default:\n }\n }\n\n @Listen('bqFocus', { capture: true })\n onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n if (event.detail !== this.focusedBqRadio) return;\n\n event.stopPropagation();\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isNil(this.focusedBqRadio) && event.detail !== this.focusedBqRadio) {\n event.stopPropagation();\n } else {\n this.focusedBqRadio = null;\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 // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqRadioElements(): HTMLBqRadioElement[] {\n return Array.from(this.el.querySelectorAll('bq-radio'));\n }\n\n private focusRadioInputSibbling(currentTarget: HTMLBqRadioElement, next: boolean): void {\n this.bqRadioElements.forEach((bqRadioElement, index, elements) => {\n if (bqRadioElement === currentTarget) {\n const target = this.getNextRadioElement(elements, index, next);\n\n currentTarget.checked = false;\n\n target.vFocus();\n this.checkRadioInput(target);\n }\n });\n }\n\n private getNextRadioElement(elements: HTMLBqRadioElement[], index: number, forward = true): HTMLBqRadioElement {\n let element = null;\n let elementIndex = index;\n\n do {\n elementIndex = (elements.length + (elementIndex + (forward ? 1 : -1))) % elements.length;\n element = elements[elementIndex];\n } while (element.disabled);\n\n return element;\n }\n\n private checkRadioInput(target: HTMLBqRadioElement): void {\n const { value } = target;\n target.checked = true;\n this.value = value;\n this.focusedBqRadio = target;\n this.debouncedBqChange({ value, target });\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <fieldset class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }} role=\"radiogroup\" part=\"base\">\n <legend part=\"label\">\n <slot name=\"label\" />\n </legend>\n <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n <slot />\n </div>\n </fieldset>\n );\n }\n}\n"],"version":3}