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/esm/bq-side-menu.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-side-menu.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Side menu styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-side-menu.variables';\n\n:host {\n @apply flex overflow-hidden;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Aside container /\n/ -------------------------------------------------------------------------- /\n\n.bq-side-menu {\n @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n @apply transition-[background-color,width] duration-150;\n @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n @apply is-[--bq-side-menu--width-collapse];\n}\n\n/ -------------------------------------------------------------------------- /\n/ Logo container /\n/ -------------------------------------------------------------------------- /\n\n.bq-side-menu--logo {\n @apply sticky top-0 z-[1] p-xs;\n @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/ -------------------------------------------------------------------------- /\n/ APPEARANCE /\n/ -------------------------------------------------------------------------- /\n\n/\n The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n /\n\n:host([size='small']) {\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--paddingY: theme(space.s);\n }\n}\n\n:host([appearance='brand']) {\n --bq-focus: theme(colors.stroke.alt);\n --bq-side-menu--bg-color: theme(colors.ui.brand);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.brand);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.alt);\n --bq-side-menu-item--text-hover: theme(textColor.text.alt);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n\n:host([appearance='inverse']) {\n --bq-side-menu--bg-color: theme(colors.ui.inverse);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.inverse);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.inverse);\n --bq-side-menu-item--text-hover: theme(textColor.text.inverse);\n --bq-side-menu-item--text-active: theme(textColor.text.primary);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isHTMLElement } from '../../shared/utils';\n\n/\n @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n /\n@Component({\n tag: 'bq-side-menu',\n styleUrl: './scss/bq-side-menu.scss',\n shadow: true,\n})\nexport class BqSideMenu {\n // Own Properties\n // ====================\n\n private menuItemCssSelector = 'bq-side-menu-item';\n\n private bodyCss = 'bq-body--side-menu';\n private bodyCssExpand = 'bq-body--side-menu__expand';\n private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n private menuElem: HTMLElement;\n private documentBody: HTMLBodyElement = document.querySelector('body');\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It sets a predefined appearance of the side menu /\n @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n /* If true, the container will reduce its width /\n @Prop({ reflect: true }) collapse: boolean = false;\n\n /* It sets the size of the navigation menu items /\n @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('collapse')\n onCollapsePropChange() {\n this.handleCollapse();\n this.bqCollapse.emit({ collapse: this.collapse });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa /\n @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n /* Callback handler to be called when the active/selected menu item changes /\n @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.documentBody.classList.add(this.bodyCss);\n this.handleCollapse();\n }\n\n disconnectedCallback() {\n this.cleanDocumentBodyClass();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n onMenuItemClick(event: Event) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n this.menuItems.forEach(\n (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n );\n this.bqSelect.emit(item);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Toggle the collapse state of the side menu /\n @Method()\n async toggleCollapse() {\n this.collapse = !this.collapse;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get menuItems() {\n if (!this.menuElem) return [];\n\n const slot = this.menuElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private handleCollapse = () => {\n if (!this.menuItems.length) return;\n\n this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n if (this.collapse) {\n this.collapseDocumentBody();\n } else {\n this.expandDocumentBody();\n }\n };\n\n private collapseDocumentBody = () => {\n if (!this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssExpand);\n this.documentBody.classList.add(this.bodyCssCollapse);\n };\n\n private expandDocumentBody = () => {\n if (this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssCollapse);\n this.documentBody.classList.add(this.bodyCssExpand);\n };\n\n private cleanDocumentBodyClass = () => {\n this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n {/ Company logo and name /}\n <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n <slot name=\"logo\" />\n </div>\n {/ Navigation content /}\n <nav\n class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n ref={(navElem) => (this.menuElem = navElem)}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n role=\"menu\"\n part=\"nav\"\n >\n <slot />\n </nav>\n {/ Footer */}\n <div\n class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n part=\"footer\"\n >\n <slot name=\"footer\"></slot>\n </div>\n </aside>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-side-menu.entry.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,0/tBAA0/tB,CAAC;AACjhuB,yBAAe,aAAa;;MCef,UAAU;;;;;;0BAyBsC,SAAS;wBAGvB,KAAK;oBAGH,QAAQ;;;;IA3B/C,mBAAmB,GAAG,mBAAmB,CAAC;IAE1C,OAAO,GAAG,oBAAoB,CAAC;IAC/B,aAAa,GAAG,4BAA4B,CAAC;IAC7C,eAAe,GAAG,8BAA8B,CAAC;IAEjD,QAAQ,CAAc;;;IA2B9B,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;KACnD;;;;;IAOQ,UAAU,CAAsC;;IAGhD,QAAQ,CAA0C;;;;IAM3D,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,oBAAoB;QAClB,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;;IAMD,eAAe,CAAC,KAAY;QAC1B,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,mBAAmB,CAAC;YAAE,OAAO;QAEtD,IAAI,CAAC,SAAS,CAAC,OAAO,CACpB,CAAC,QAAmC,MAAM,QAAQ,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,QAAQ,IAAI,QAAQ,KAAK,IAAI,CAAC,CACrG,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;;;IAWD,MAAM,cAAc;QAClB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChC;;;;;IAOD,IAAY,SAAS;QACnB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,mBAAmB,CAC1D,CAAC;KAClC;IAEO,cAAc,GAAG;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;YAAE,OAAO;QAEnC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAmC,MAAM,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrG,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;KACF,CAAC;IAEM,oBAAoB,GAAG;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACvD,CAAC;IAEM,kBAAkB,GAAG;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACzD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACrD,CAAC;IAEM,sBAAsB,GAAG;QAC/B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5F,CAAC;;;;IAMF,MAAM;QACJ,QACE,8DAAO,KAAK,EAAE,EAAE,8BAA8B,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,MAAM,IAEhG,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,MAAM,IACpF,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EAEN,4DACE,KAAK,EAAC,uDAAuD,EAC7D,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;;YAE3C,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,IAEV,8DAAQ,CACJ,EAEN,4DACE,KAAK,EAAC,gHAAgH,EACtH,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACA,EACR;KACH;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Side menu styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-side-menu.variables';\n\n:host {\n @apply flex overflow-hidden;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Aside container /\n/ -------------------------------------------------------------------------- /\n\n.bq-side-menu {\n @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n @apply transition-[background-color,width] duration-150;\n @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n @apply is-[--bq-side-menu--width-collapse];\n}\n\n/ -------------------------------------------------------------------------- /\n/ Logo container /\n/ -------------------------------------------------------------------------- /\n\n.bq-side-menu--logo {\n @apply sticky top-0 z-[1] p-xs;\n @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/ -------------------------------------------------------------------------- /\n/ APPEARANCE /\n/ -------------------------------------------------------------------------- /\n\n/\n The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n /\n\n:host([size='small']) {\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--paddingY: theme(space.s);\n }\n}\n\n:host([appearance='brand']) {\n --bq-focus: theme(colors.stroke.alt);\n --bq-side-menu--bg-color: theme(colors.ui.brand);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.brand);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.alt);\n --bq-side-menu-item--text-hover: theme(textColor.text.alt);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n\n:host([appearance='inverse']) {\n --bq-side-menu--bg-color: theme(colors.ui.inverse);\n --bq-side-menu--brand-color: theme(colors.stroke.inverse);\n --bq-side-menu--border-color: theme(colors.ui.inverse);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.text.inverse);\n --bq-side-menu-item--text-hover: theme(textColor.text.inverse);\n --bq-side-menu-item--text-active: theme(textColor.text.primary);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.text.inverse);\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isHTMLElement } from '../../shared/utils';\n\n/\n @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n /\n@Component({\n tag: 'bq-side-menu',\n styleUrl: './scss/bq-side-menu.scss',\n shadow: true,\n})\nexport class BqSideMenu {\n // Own Properties\n // ====================\n\n private menuItemCssSelector = 'bq-side-menu-item';\n\n private bodyCss = 'bq-body--side-menu';\n private bodyCssExpand = 'bq-body--side-menu__expand';\n private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n private menuElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private documentBody: HTMLBodyElement;\n\n // Public Property API\n // ========================\n\n /* It sets a predefined appearance of the side menu /\n @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n /* If true, the container will reduce its width /\n @Prop({ reflect: true }) collapse: boolean = false;\n\n /* It sets the size of the navigation menu items /\n @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('collapse')\n onCollapsePropChange() {\n this.handleCollapse();\n this.bqCollapse.emit({ collapse: this.collapse });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa /\n @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n /* Callback handler to be called when the active/selected menu item changes /\n @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.documentBody = document.querySelector('body');\n this.documentBody.classList.add(this.bodyCss);\n this.handleCollapse();\n }\n\n disconnectedCallback() {\n this.cleanDocumentBodyClass();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n onMenuItemClick(event: Event) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n this.menuItems.forEach(\n (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n );\n this.bqSelect.emit(item);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Toggle the collapse state of the side menu /\n @Method()\n async toggleCollapse() {\n this.collapse = !this.collapse;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get menuItems() {\n if (!this.menuElem) return [];\n\n const slot = this.menuElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private handleCollapse = () => {\n if (!this.menuItems.length) return;\n\n this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n if (this.collapse) {\n this.collapseDocumentBody();\n } else {\n this.expandDocumentBody();\n }\n };\n\n private collapseDocumentBody = () => {\n if (!this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssExpand);\n this.documentBody.classList.add(this.bodyCssCollapse);\n };\n\n private expandDocumentBody = () => {\n if (this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssCollapse);\n this.documentBody.classList.add(this.bodyCssExpand);\n };\n\n private cleanDocumentBodyClass = () => {\n this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n {/ Company logo and name /}\n <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n <slot name=\"logo\" />\n </div>\n {/ Navigation content /}\n <nav\n class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n ref={(navElem) => (this.menuElem = navElem)}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n role=\"menu\"\n part=\"nav\"\n >\n <slot />\n </nav>\n {/ Footer */}\n <div\n class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n part=\"footer\"\n >\n <slot name=\"footer\"></slot>\n </div>\n </aside>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-slider.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { c as clamp } from './clamp-efa6c596.js';
 import { d as debounce } from './debounce-3e72f418.js';
 import { i as isNil } from './isNil-2290f64e.js';

package/dist/esm/bq-slider.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-slider.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/slider/scss/bq-slider.scss?tag=bq-slider&encapsulation=shadow","../../packages/beeq/src/components/slider/bq-slider.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Slider styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-slider.variables';\n\n@layer components {\n .thumb {\n @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-m border-solid border-stroke-brand bg-ui-primary;\n @apply transition-[background-color,border-color,box-shadow] duration-300;\n }\n\n .thumb-focus {\n @apply focus;\n }\n\n .thumb-hover {\n @apply border-hover-stroke-brand;\n }\n\n .thumb-active {\n @apply cursor-grabbing bg-active-ui-brand border-active-stroke-brand;\n }\n}\n\n:host {\n @apply block is-full;\n}\n\n/ ---------------------- Webkit (Chrome, Safari, Edge) --------------------- /\n\ninput[type='range']::-webkit-slider-thumb {\n @apply thumb;\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-webkit-slider-thumb {\n @apply thumb-focus;\n}\n\ninput[type='range']:hover::-webkit-slider-thumb {\n @apply thumb-hover;\n}\n\ninput[type='range']:active::-webkit-slider-thumb {\n @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-webkit-slider-thumb {\n @apply cursor-not-allowed;\n}\n\n/ ---------------------------- Mozilla (Firefox) --------------------------- /\n\ninput[type='range']::-moz-range-thumb {\n @apply thumb;\n}\n\ninput[type='range']::-moz-range-track {\n @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-moz-range-thumb {\n @apply thumb-focus;\n}\n\ninput[type='range']:hover::-moz-range-thumb {\n @apply thumb-hover;\n}\n\ninput[type='range']:active::-moz-range-thumb {\n @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-moz-range-thumb {\n @apply cursor-not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/\n @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n /\n@Component({\n tag: 'bq-slider',\n styleUrl: './scss/bq-slider.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSlider {\n // Own Properties\n // ====================\n\n private inputMinElem: HTMLInputElement;\n private inputMaxElem: HTMLInputElement;\n private minTooltipElem: HTMLBqTooltipElement;\n private maxTooltipElem: HTMLBqTooltipElement;\n private progressElem: HTMLSpanElement;\n private trackElem: HTMLSpanElement;\n private debounceBqChange: TDebounce<void>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSliderElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n /\n The `minValue` state is the only value when the slider type is `single`\n * and the minimum value when the slider type is `range`.\n /\n @State() minValue: number;\n /* The `maxValue` state is only used when the slider type is `range`. /\n @State() maxValue: number;\n /* It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) /\n @State() minThumbPosition: number;\n /* It hold the left position of the Thumb for the maximum value (if the slider type is `range`) /\n @State() maxThumbPosition: number;\n\n // Public Property API\n // ========================\n\n /* The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. /\n @Prop({ reflect: true }) debounceTime = 0;\n\n /* If `true` the slider is disabled. /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If `true` it will show the value label on a side of the slider track area /\n @Prop({ reflect: true }) enableValueIndicator? = false;\n\n /* A number representing the amount to remain between the minimum and maximum values (only for range type). /\n @Prop({ reflect: true, mutable: true }) gap = 0;\n\n /* A number representing the max value of the slider. /\n @Prop({ reflect: true }) max = 100;\n\n /* A number representing the min value of the slider. /\n @Prop({ reflect: true }) min = 0;\n\n /\n A number representing the step of the slider.\n * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n /\n @Prop({ reflect: true }) step = 1;\n\n /* It defines the type of slider to display /\n @Prop({ reflect: true }) type: TSliderType = 'single';\n\n /\n The value of the slider.\n * - If the slider type is `single`, the value is a number.\n * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n /\n @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n /* If `true`, a tooltip will be shown displaying the progress value /\n @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n /\n If `true`, a tooltip will always display the progress value.\n * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n /\n @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValuePropChange(newValue: TSliderValue) {\n this.setState(newValue);\n this.emitBqChange();\n }\n\n @Watch('step')\n handleStepPropChange() {\n this.minValue = Math.round(this.minValue / this.step) this.step;\n this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n }\n\n @Watch('gap')\n handleGapChange(newValue: number) {\n if (!this.isRangeType) return;\n // Use the this.value prop value when the component is initialized\n // Otherwise, use the current this.min and this.max state values\n const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n // If the gap is less than the min or greater than the max, set it to 0\n this.gap = newValue < value[0] \|\| newValue > value[1] ? 0 : newValue;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when change the value on range inputs /\n @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n /* Handler to be called when the slider loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n /* Handler to be called when the slider gets focused /\n @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.init();\n }\n\n componentWillLoad() {\n this.init();\n }\n\n componentDidLoad() {\n this.runUpdates();\n }\n\n componentDidUpdate() {\n this.runUpdates();\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 init = () => {\n this.handleGapChange(this.gap);\n this.setState(this.value);\n this.handleStepPropChange();\n };\n\n private runUpdates = () => {\n this.updateProgressTrack();\n this.syncInputsValue();\n this.setThumbPosition();\n };\n\n private setState = (newValue: TSliderValue) => {\n const isRangeType = this.isRangeType;\n const value = this.stringToObject(newValue);\n\n this.minValue = isRangeType ? clamp(value[0], this.min, this.max - this.gap) : value;\n this.maxValue = isRangeType ? clamp(value[1], this.minValue + this.gap, this.max) : this.minValue;\n };\n\n private setThumbPosition = () => {\n if (!this.enableTooltip) return;\n\n // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n };\n\n private syncInputsValue = () => {\n this.inputMinElem?.setAttribute('value', this.minValue.toString());\n this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n };\n\n private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n private handleInputChange = (type: 'min' \| 'max', event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n const value = parseFloat(target.value);\n\n if (type === 'min') {\n this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n } else if (type === 'max') {\n this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n }\n\n // Update the input value to reflect the clamped value\n const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n target.value = reflectedValue;\n target.setAttribute('value', reflectedValue);\n\n // Sync the prop value.\n // This will trigger the `@Watch('value')` method and emit the `bqChange` event.\n this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n };\n\n private calculatePercent = (value: number) => {\n const totalRange = Number(this.max) - Number(this.min);\n return (value / totalRange) 100;\n };\n\n private updateProgressTrack = () => {\n if (!this.progressElem) return;\n\n // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n // For non-range type, left starts from 0 and width is the `min` value.\n const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n const width = this.isRangeType\n ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))\n : this.calculatePercent(this.minValue);\n\n this.progressElem.style.insetInlineStart = `${left}%`;\n this.progressElem.style.inlineSize = `${width}%`;\n };\n\n private calculateThumbPosition = (value: number): number => {\n if (!this.progressElem) return;\n\n // Get the width of the track area and the size of the input range thumb\n const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n // We need to also add 4px to the thumb size,\n // this is because the thumb is 2px border (`border-m`)\n const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n const totalWidth = trackAreaWidth - inputThumbSize;\n\n return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n };\n\n private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n const minThumbPosition = this.calculateThumbPosition(this.minValue);\n const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n return { minThumbPosition, maxThumbPosition };\n };\n\n private emitBqChange = () => {\n this.debounceBqChange?.cancel();\n\n const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n this.debounceBqChange();\n };\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'remove');\n };\n\n private handleMouseUp = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'add');\n };\n\n private handleTooltipVisibility = (event: MouseEvent, action: 'add' \| 'remove') => {\n if (!this.enableTooltip \|\| this.tooltipAlwaysVisible) return;\n\n const target = event.target as HTMLElement;\n const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n tooltipElem.classList[action]('hidden');\n };\n\n private get decimalCount(): number {\n // Return the length of the decimal part of the step value.\n return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n }\n\n private get isRangeType() {\n return this.type === 'range';\n }\n\n private get isTooltipAlwaysVisible(): boolean {\n return this.tooltipAlwaysVisible && this.enableTooltip;\n }\n\n private renderLabel = (value: number, position: 'start' \| 'end', css?: string) => {\n return (\n <span\n class={{\n [`${css} box-content block text-s font-medium leading-regular text-text-primary is-fit min-is-8 [font-variant:tabular-nums]`]:\n true,\n hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator \|\| !this.isRangeType,\n }}\n part={`label-${position}`}\n >\n {value.toFixed(this.decimalCount)}\n </span>\n );\n };\n\n private renderInput = (type: 'max' \| 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n // Determine the zIndex value based on the type and the current min and max values.\n const zIndexValue = (type: 'min' \| 'max'): string => {\n const zIndex = {\n min: this.minValue === this.min && this.maxValue === this.minValue,\n max: this.maxValue === this.max && this.minValue === this.maxValue,\n };\n\n // If the value of both thumbs is the same as the min or max value, set the zIndex to -1\n return zIndex[type] ? '-1' : '0';\n };\n\n return (\n <input\n type=\"range\"\n class={{\n 'absolute start-0 -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none is-full inset-bs-[50%] disabled:cursor-not-allowed':\n true,\n 'pointer-events-none': this.isRangeType,\n }}\n style={this.isRangeType ? { zIndex: zIndexValue(type) } : undefined}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n ref={refCallback}\n onInput={(ev) => this.handleInputChange(type, ev)}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n value={value}\n part={`input-${type}`}\n />\n );\n };\n\n private renderTooltip = (\n value: number,\n thumbPosition: number,\n refCallback: (elem: HTMLBqTooltipElement) => void,\n ): HTMLBqTooltipElement => (\n <bq-tooltip\n class={{\n 'absolute [&::part(panel)]:absolute': true,\n hidden: !this.isTooltipAlwaysVisible,\n }}\n exportparts=\"base,trigger,panel\"\n alwaysVisible={true}\n distance={this.enableValueIndicator ? 6 : 16}\n style={{ insetInlineStart: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n ref={refCallback}\n >\n <div class=\"absolute bs-1 is-1\" slot=\"trigger\" />\n {value.toFixed(this.decimalCount)}\n </bq-tooltip>\n );\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n aria-disabled={this.disabled ? 'true' : 'false'}\n class={{ 'flex is-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n part=\"base\"\n >\n {/* LABEL (start) /}\n {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n {/ SLIDER /}\n <div class=\"relative is-full\" part=\"container\">\n {/ TRACK AREA /}\n <span\n class=\"absolute start-0 -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color] bs-1 is-full inset-bs-[50%]\"\n ref={(elem) => (this.trackElem = elem)}\n part=\"track-area\"\n />\n {/ PROGRESS AREA /}\n <span\n class=\"absolute -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color] bs-1 is-[50%] inset-bs-[50%]\"\n ref={(elem) => (this.progressElem = elem)}\n part=\"progress-area\"\n />\n {/ TOOLTIP on top of the value or min value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n {/ INPUT (Min), used on single type /}\n {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n {/ TOOLTIP on top of the max value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.isRangeType &&\n this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n {/ INPUT (Max) /}\n {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n </div>\n {/ LABEL (end) */}\n {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-slider.entry.js","mappings":";;;;;;;;;;AAAA,MAAM,WAAW,GAAG,+pzBAA+pzB,CAAC;AACprzB,uBAAe,WAAW;;MCqBb,QAAQ;;;;;;;;;;4BAqCqB,CAAC;wBAGJ,KAAK;oCAGO,KAAK;mBAGR,CAAC;mBAGhB,GAAG;mBAGH,CAAC;oBAMA,CAAC;oBAGY,QAAQ;;6BAUH,KAAK;oCAME,KAAK;;;;IAzEtD,YAAY,CAAmB;IAC/B,YAAY,CAAmB;IAC/B,cAAc,CAAuB;IACrC,cAAc,CAAuB;IACrC,YAAY,CAAkB;IAC9B,SAAS,CAAkB;IAC3B,gBAAgB,CAAkB;;;;IAyE1C,qBAAqB,CAAC,QAAsB;QAC1C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAGD,oBAAoB;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAClE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;KACnE;IAGD,eAAe,CAAC,QAAgB;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;;;QAG9B,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAE5G,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;KACtE;;;;;IAOQ,QAAQ,CAAkF;;IAG1F,MAAM,CAAoC;;IAG1C,OAAO,CAAoC;;;;IAMpD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;;;;;;;;;;;;;IAiBO,IAAI,GAAG;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B,CAAC;IAEM,UAAU,GAAG;QACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC;IAEM,QAAQ,GAAG,CAAC,QAAsB;QACxC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAE5C,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACrF,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;KACnG,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;;QAGhC,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE;KAC/G,CAAC;IAEM,eAAe,GAAG;QACxB,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpE,CAAC;IAEM,cAAc,GAAG,CAAC,KAAmB,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;IAExF,iBAAiB,GAAG,CAAC,IAAmB,EAAE,KAAiB;QACjE,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEvC,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SACtF;aAAM,IAAI,IAAI,KAAK,KAAK,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;SACtF;;QAGD,MAAM,cAAc,GAAG,CAAC,IAAI,KAAK,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC;QACnF,MAAM,CAAC,KAAK,GAAG,cAAc,CAAC;QAC9B,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;;;QAI7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;KAChF,CAAC;IAEM,gBAAgB,GAAG,CAAC,KAAa;QACvC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvD,OAAO,CAAC,KAAK,GAAG,UAAU,IAAI,GAAG,CAAC;KACnC,CAAC;IAEM,mBAAmB,GAAG;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;;;QAI/B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACzE,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;cAC1B,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;cACpE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEzC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,IAAI,GAAG,CAAC;QACtD,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,KAAK,GAAG,CAAC;KAClD,CAAC;IAEM,sBAAsB,GAAG,CAAC,KAAa;QAC7C,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;;QAG/B,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;;;QAGpE,MAAM,cAAc,GAAG,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;QAC/G,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,CAAC;QAEnD,OAAO,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,UAAU,GAAG,cAAc,GAAG,CAAC,CAAC;KACvF,CAAC;IAEM,aAAa,GAAG;QACtB,MAAM,gBAAgB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpE,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;QAEnG,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KAC/C,CAAC;IAEM,YAAY,GAAG;QACrB,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,CAAC;QAEhC,MAAM,KAAK,GAAkC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/G,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAEtG,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC;IAEM,UAAU,GAAG;QACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC3B,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;IAEM,eAAe,GAAG,CAAC,KAAiB;QAC1C,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KAC/C,CAAC;IAEM,aAAa,GAAG,CAAC,KAAiB;QACxC,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KAC5C,CAAC;IAEM,uBAAuB,GAAG,CAAC,KAAiB,EAAE,MAAwB;QAC5E,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB;YAAE,OAAO;QAE7D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,WAAW,GAAG,MAAM,KAAK,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7F,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;KACzC,CAAC;IAEF,IAAY,YAAY;;QAEtB,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC;KAC5E;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;KAC9B;IAED,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAC;KACxD;IAEO,WAAW,GAAG,CAAC,KAAa,EAAE,QAAyB,EAAE,GAAY;QAC3E,QACE,YACE,KAAK,EAAE;gBACL,CAAC,GAAG,GAAG,qHAAqH,GAC1H,IAAI;gBACN,MAAM,EAAE,QAAQ,KAAK,OAAO,GAAG,CAAC,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,WAAW;aAC5G,EACD,IAAI,EAAE,SAAS,QAAQ,EAAE,IAExB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAC5B,EACP;KACH,CAAC;IAEM,WAAW,GAAG,CAAC,IAAmB,EAAE,KAAa,EAAE,WAA8C;;QAEvG,MAAM,WAAW,GAAG,CAAC,IAAmB;YACtC,MAAM,MAAM,GAAG;gBACb,GAAG,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ;gBAClE,GAAG,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ;aACnE,CAAC;;YAGF,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC;SAClC,CAAC;QAEF,QACE,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;gBACL,iJAAiJ,EAC/I,IAAI;gBACN,qBAAqB,EAAE,IAAI,CAAC,WAAW;aACxC,EACD,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,EAAE,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,EAAE,CAAC,EACjD,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,IAAI,EAAE,GACrB,EACF;KACH,CAAC;IAEM,aAAa,GAAG,CACtB,KAAa,EACb,aAAqB,EACrB,WAAiD,MAEjD,kBACE,KAAK,EAAE;YACL,oCAAoC,EAAE,IAAI;YAC1C,MAAM,EAAE,CAAC,IAAI,CAAC,sBAAsB;SACrC,EACD,WAAW,EAAC,oBAAoB,EAChC,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,EAC5C,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAG,aAAa,IAAI,EAAE,WAAW,EAAE,cAAc,EAAE,EAC9E,GAAG,EAAE,WAAW,IAEhB,WAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,GAAG,EAChD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CACtB,CACd,CAAC;;;;IAMF,MAAM;QACJ,QACE,6EACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC/E,IAAI,EAAC,MAAM,IAGV,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAE3D,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,WAAW,IAE5C,6DACE,KAAK,EAAC,4GAA4G,EAClH,GAAG,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,IAAI,EAAC,YAAY,GACjB,EAEF,6DACE,KAAK,EAAC,oGAAoG,EAC1G,GAAG,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,IAAI,EAAC,eAAe,GACpB,EAED,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,EAEjG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,EAE9E,IAAI,CAAC,aAAa;YACjB,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC,EAEjG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,CAC/F,EAEL,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,CACvD,EACN;KACH;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/slider/scss/bq-slider.scss?tag=bq-slider&encapsulation=shadow","../../packages/beeq/src/components/slider/bq-slider.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Slider styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-slider.variables';\n\n@layer components {\n .thumb {\n @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-m border-solid border-stroke-brand bg-ui-primary;\n @apply transition-[background-color,border-color,box-shadow] duration-300;\n }\n\n .thumb-focus {\n @apply focus;\n }\n\n .thumb-hover {\n @apply border-hover-stroke-brand;\n }\n\n .thumb-active {\n @apply cursor-grabbing bg-active-ui-brand border-active-stroke-brand;\n }\n}\n\n:host {\n @apply block is-full;\n}\n\n/ ---------------------- Webkit (Chrome, Safari, Edge) --------------------- /\n\ninput[type='range']::-webkit-slider-thumb {\n @apply thumb;\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-webkit-slider-thumb {\n @apply thumb-focus;\n}\n\ninput[type='range']:hover::-webkit-slider-thumb {\n @apply thumb-hover;\n}\n\ninput[type='range']:active::-webkit-slider-thumb {\n @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-webkit-slider-thumb {\n @apply cursor-not-allowed;\n}\n\n/ ---------------------------- Mozilla (Firefox) --------------------------- /\n\ninput[type='range']::-moz-range-thumb {\n @apply thumb;\n}\n\ninput[type='range']::-moz-range-track {\n @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-moz-range-thumb {\n @apply thumb-focus;\n}\n\ninput[type='range']:hover::-moz-range-thumb {\n @apply thumb-hover;\n}\n\ninput[type='range']:active::-moz-range-thumb {\n @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-moz-range-thumb {\n @apply cursor-not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/\n @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n /\n@Component({\n tag: 'bq-slider',\n styleUrl: './scss/bq-slider.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSlider {\n // Own Properties\n // ====================\n\n private inputMinElem: HTMLInputElement;\n private inputMaxElem: HTMLInputElement;\n private minTooltipElem: HTMLBqTooltipElement;\n private maxTooltipElem: HTMLBqTooltipElement;\n private progressElem: HTMLSpanElement;\n private trackElem: HTMLSpanElement;\n private debounceBqChange: TDebounce<void>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSliderElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n /\n The `minValue` state is the only value when the slider type is `single`\n * and the minimum value when the slider type is `range`.\n /\n @State() minValue: number;\n /* The `maxValue` state is only used when the slider type is `range`. /\n @State() maxValue: number;\n /* It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) /\n @State() minThumbPosition: number;\n /* It hold the left position of the Thumb for the maximum value (if the slider type is `range`) /\n @State() maxThumbPosition: number;\n\n // Public Property API\n // ========================\n\n /* The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. /\n @Prop({ reflect: true }) debounceTime = 0;\n\n /* If `true` the slider is disabled. /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If `true` it will show the value label on a side of the slider track area /\n @Prop({ reflect: true }) enableValueIndicator? = false;\n\n /* A number representing the amount to remain between the minimum and maximum values (only for range type). /\n @Prop({ reflect: true, mutable: true }) gap = 0;\n\n /* A number representing the max value of the slider. /\n @Prop({ reflect: true }) max = 100;\n\n /* A number representing the min value of the slider. /\n @Prop({ reflect: true }) min = 0;\n\n /\n A number representing the step of the slider.\n * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n /\n @Prop({ reflect: true }) step = 1;\n\n /* It defines the type of slider to display /\n @Prop({ reflect: true }) type: TSliderType = 'single';\n\n /\n The value of the slider.\n * - If the slider type is `single`, the value is a number.\n * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n /\n @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n /* If `true`, a tooltip will be shown displaying the progress value /\n @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n /\n If `true`, a tooltip will always display the progress value.\n * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n /\n @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValuePropChange(newValue: TSliderValue) {\n this.setState(newValue);\n this.emitBqChange();\n }\n\n @Watch('step')\n handleStepPropChange() {\n this.minValue = Math.round(this.minValue / this.step) this.step;\n this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n }\n\n @Watch('gap')\n handleGapChange(newValue: number) {\n if (!this.isRangeType) return;\n // Use the this.value prop value when the component is initialized\n // Otherwise, use the current this.min and this.max state values\n const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n // If the gap is less than the min or greater than the max, set it to 0\n this.gap = newValue < value[0] \|\| newValue > value[1] ? 0 : newValue;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when change the value on range inputs /\n @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n /* Handler to be called when the slider loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n /* Handler to be called when the slider gets focused /\n @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.init();\n }\n\n componentWillLoad() {\n this.init();\n }\n\n componentDidLoad() {\n this.runUpdates();\n }\n\n componentDidUpdate() {\n this.runUpdates();\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 init = () => {\n this.handleGapChange(this.gap);\n this.setState(this.value);\n this.handleStepPropChange();\n };\n\n private runUpdates = () => {\n this.updateProgressTrack();\n this.syncInputsValue();\n this.setThumbPosition();\n };\n\n private setState = (newValue: TSliderValue) => {\n const isRangeType = this.isRangeType;\n const value = this.stringToObject(newValue);\n\n this.minValue = isRangeType ? clamp(value[0], this.min, this.max - this.gap) : value;\n this.maxValue = isRangeType ? clamp(value[1], this.minValue + this.gap, this.max) : this.minValue;\n };\n\n private setThumbPosition = () => {\n if (!this.enableTooltip) return;\n\n // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n };\n\n private syncInputsValue = () => {\n this.inputMinElem?.setAttribute('value', this.minValue.toString());\n this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n };\n\n private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n private handleInputChange = (type: 'min' \| 'max', event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n const value = parseFloat(target.value);\n\n if (type === 'min') {\n this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n } else if (type === 'max') {\n this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n }\n\n // Update the input value to reflect the clamped value\n const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n target.value = reflectedValue;\n target.setAttribute('value', reflectedValue);\n\n // Sync the prop value.\n // This will trigger the `@Watch('value')` method and emit the `bqChange` event.\n this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n };\n\n private calculatePercent = (value: number) => {\n const totalRange = Number(this.max) - Number(this.min);\n return (value / totalRange) 100;\n };\n\n private updateProgressTrack = () => {\n if (!this.progressElem) return;\n\n // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n // For non-range type, left starts from 0 and width is the `min` value.\n const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n const width = this.isRangeType\n ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue))\n : this.calculatePercent(this.minValue);\n\n this.progressElem.style.insetInlineStart = `${left}%`;\n this.progressElem.style.inlineSize = `${width}%`;\n };\n\n private calculateThumbPosition = (value: number): number => {\n if (!this.progressElem) return;\n\n // Get the width of the track area and the size of the input range thumb\n const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n // We need to also add 4px to the thumb size,\n // this is because the thumb is 2px border (`border-m`)\n const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n const totalWidth = trackAreaWidth - inputThumbSize;\n\n return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n };\n\n private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n const minThumbPosition = this.calculateThumbPosition(this.minValue);\n const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n return { minThumbPosition, maxThumbPosition };\n };\n\n private emitBqChange = () => {\n this.debounceBqChange?.cancel();\n\n const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n this.debounceBqChange();\n };\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'remove');\n };\n\n private handleMouseUp = (event: MouseEvent) => {\n this.handleTooltipVisibility(event, 'add');\n };\n\n private handleTooltipVisibility = (event: MouseEvent, action: 'add' \| 'remove') => {\n if (!this.enableTooltip \|\| this.tooltipAlwaysVisible) return;\n\n const target = event.target as HTMLElement;\n const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n tooltipElem.classList[action]('hidden');\n };\n\n private get decimalCount(): number {\n // Return the length of the decimal part of the step value.\n return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n }\n\n private get isRangeType() {\n return this.type === 'range';\n }\n\n private get isTooltipAlwaysVisible(): boolean {\n return this.tooltipAlwaysVisible && this.enableTooltip;\n }\n\n private renderLabel = (value: number, position: 'start' \| 'end', css?: string) => {\n return (\n <span\n class={{\n [`${css} box-content block text-s font-medium leading-regular text-text-primary is-fit min-is-8 [font-variant:tabular-nums]`]:\n true,\n hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator \|\| !this.isRangeType,\n }}\n part={`label-${position}`}\n >\n {value.toFixed(this.decimalCount)}\n </span>\n );\n };\n\n private renderInput = (type: 'max' \| 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n // Determine the zIndex value based on the type and the current min and max values.\n const zIndexValue = (type: 'min' \| 'max'): string => {\n const zIndex = {\n min: this.minValue === this.min && this.maxValue === this.minValue,\n max: this.maxValue === this.max && this.minValue === this.maxValue,\n };\n\n // If the value of both thumbs is the same as the min or max value, set the zIndex to -1\n return zIndex[type] ? '-1' : '0';\n };\n\n return (\n <input\n type=\"range\"\n class={{\n 'absolute start-0 -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none is-full inset-bs-[50%] disabled:cursor-not-allowed':\n true,\n 'pointer-events-none': this.isRangeType,\n }}\n style={this.isRangeType ? { zIndex: zIndexValue(type) } : undefined}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n ref={refCallback}\n onInput={(ev) => this.handleInputChange(type, ev)}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n value={value}\n part={`input-${type}`}\n />\n );\n };\n\n private renderTooltip = (\n value: number,\n thumbPosition: number,\n refCallback: (elem: HTMLBqTooltipElement) => void,\n ): HTMLBqTooltipElement => (\n <bq-tooltip\n class={{\n 'absolute [&::part(panel)]:absolute': true,\n hidden: !this.isTooltipAlwaysVisible,\n }}\n exportparts=\"base,trigger,panel\"\n alwaysVisible={true}\n distance={this.enableValueIndicator ? 6 : 16}\n style={{ insetInlineStart: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n ref={refCallback}\n >\n <div class=\"absolute bs-1 is-1\" slot=\"trigger\" />\n {value.toFixed(this.decimalCount)}\n </bq-tooltip>\n );\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n aria-disabled={this.disabled ? 'true' : 'false'}\n class={{ 'flex is-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n part=\"base\"\n >\n {/* LABEL (start) /}\n {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n {/ SLIDER /}\n <div class=\"relative is-full\" part=\"container\">\n {/ TRACK AREA /}\n <span\n class=\"absolute start-0 -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color] bs-1 is-full inset-bs-[50%]\"\n ref={(elem) => (this.trackElem = elem)}\n part=\"track-area\"\n />\n {/ PROGRESS AREA /}\n <span\n class=\"absolute -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color] bs-1 is-[50%] inset-bs-[50%]\"\n ref={(elem) => (this.progressElem = elem)}\n part=\"progress-area\"\n />\n {/ TOOLTIP on top of the value or min value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n {/ INPUT (Min), used on single type /}\n {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n {/ TOOLTIP on top of the max value (if the slider type is `range`) /}\n {this.enableTooltip &&\n this.isRangeType &&\n this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n {/ INPUT (Max) /}\n {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n </div>\n {/ LABEL (end) */}\n {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-spinner.entry.js CHANGED Viewed

@@ -3,8 +3,7 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, g as getElement, h } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
-import { a as getCSSVariableValue } from './cssVariables-23e3ca0d.js';
+import { a as getCSSVariableValue } from './cssVariables-000c23ad.js';
 import { i as isNil } from './isNil-2290f64e.js';
 import { i as isHTMLElement } from './isHTMLElement-0271eefe.js';
 import { v as validatePropValue } from './props-3bf7f546.js';

package/dist/esm/bq-spinner.entry.js.map CHANGED Viewed

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

package/dist/esm/bq-status.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, g as getElement, h } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'];

package/dist/esm/bq-status.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-status.entry.js","mappings":"~~;;;;;;;;~~AAAO,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAU;;ACArF,MAAM,WAAW,GAAG,u6oBAAu6oB,CAAC;AAC57oB,uBAAe,WAAW;;MCcb,QAAQ;;;oBAgB0B,SAAS;;;;;IAKtD,eAAe;QACb,iBAAiB,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;KAC5D;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;;;;;;;;;;;;;;;;IAmBD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,IAC9E,iEAAU,KAAK,EAAE,kCAAkC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,GAAG,EACzG,4DACE,KAAK,EAAC,4GAA4G,EAClH,IAAI,EAAC,MAAM,IAEX,8DAAQ,CACJ,CACF,EACN;KACH;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/status/bq-status.types.ts","../../packages/beeq/src/components/status/scss/bq-status.scss?tag=bq-status&encapsulation=shadow","../../packages/beeq/src/components/status/bq-status.tsx"],"sourcesContent":["export const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'] as const;\nexport type TStatusType = (typeof STATUS_TYPE)[number];\n","@import './bq-status.variables';\n\n.bq-status__circle {\n &::part(base) {\n --bq-badge--size-medium: var(--bq-status-circle--size);\n }\n\n &.success::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.success);\n }\n\n &.danger::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.danger);\n }\n\n &.neutral::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.secondary);\n }\n\n &.alert::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.warning);\n }\n\n &.info::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.brand);\n }\n}\n\n.bq-status__text ::slotted() {\n @apply text-s font-medium leading-regular text-text-primary m-b-0 m-i-0 p-b-0 p-i-0;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STATUS_TYPE, TStatusType } from './bq-status.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper of the status component\n * @part circle - The colored circle that marks the status type\n * @part text - The `<div>` container that holds the text label of the status component\n /\n@Component({\n tag: 'bq-status',\n styleUrl: './scss/bq-status.scss',\n shadow: true,\n})\nexport class BqStatus {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStatusElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It defines the type of status to display */\n @Prop({ reflect: true }) type: TStatusType = 'neutral';\n\n // Prop lifecycle events\n // =======================\n @Watch('type')\n checkPropValues() {\n validatePropValue(STATUS_TYPE, 'neutral', this.el, 'type');\n }\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n // 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 // render() function\n // Always the last one in the class.\n // ===================================\n render() {\n return (\n <div class=\"bq-status inline-flex items-center gap-xs\" part=\"base\" role=\"status\">\n <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size=\"medium\" part=\"circle\" role=\"img\" />\n <div\n class=\"bq-status__text text-s font-medium leading-regular text-text-primary max-bs-[20px] p-b-0 p-i-0 m-b-0 m-i-0\"\n part=\"text\"\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-status.entry.js","mappings":";;;;;;;AAAO,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAU;;ACArF,MAAM,WAAW,GAAG,u6oBAAu6oB,CAAC;AAC57oB,uBAAe,WAAW;;MCcb,QAAQ;;;oBAgB0B,SAAS;;;;;IAKtD,eAAe;QACb,iBAAiB,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;KAC5D;;;;;;;IASD,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;;;;;;;;;;;;;;;;IAmBD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,IAC9E,iEAAU,KAAK,EAAE,kCAAkC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,GAAG,EACzG,4DACE,KAAK,EAAC,4GAA4G,EAClH,IAAI,EAAC,MAAM,IAEX,8DAAQ,CACJ,CACF,EACN;KACH;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/status/bq-status.types.ts","../../packages/beeq/src/components/status/scss/bq-status.scss?tag=bq-status&encapsulation=shadow","../../packages/beeq/src/components/status/bq-status.tsx"],"sourcesContent":["export const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'] as const;\nexport type TStatusType = (typeof STATUS_TYPE)[number];\n","@import './bq-status.variables';\n\n.bq-status__circle {\n &::part(base) {\n --bq-badge--size-medium: var(--bq-status-circle--size);\n }\n\n &.success::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.success);\n }\n\n &.danger::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.danger);\n }\n\n &.neutral::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.secondary);\n }\n\n &.alert::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.warning);\n }\n\n &.info::part(base) {\n --bq-badge--background-color: theme(backgroundColor.ui.brand);\n }\n}\n\n.bq-status__text ::slotted() {\n @apply text-s font-medium leading-regular text-text-primary m-b-0 m-i-0 p-b-0 p-i-0;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STATUS_TYPE, TStatusType } from './bq-status.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper of the status component\n * @part circle - The colored circle that marks the status type\n * @part text - The `<div>` container that holds the text label of the status component\n /\n@Component({\n tag: 'bq-status',\n styleUrl: './scss/bq-status.scss',\n shadow: true,\n})\nexport class BqStatus {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStatusElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It defines the type of status to display */\n @Prop({ reflect: true }) type: TStatusType = 'neutral';\n\n // Prop lifecycle events\n // =======================\n @Watch('type')\n checkPropValues() {\n validatePropValue(STATUS_TYPE, 'neutral', this.el, 'type');\n }\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n // 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 // render() function\n // Always the last one in the class.\n // ===================================\n render() {\n return (\n <div class=\"bq-status inline-flex items-center gap-xs\" part=\"base\" role=\"status\">\n <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size=\"medium\" part=\"circle\" role=\"img\" />\n <div\n class=\"bq-status__text text-s font-medium leading-regular text-text-primary max-bs-[20px] p-b-0 p-i-0 m-b-0 m-i-0\"\n part=\"text\"\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-step-item.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { i as isHTMLElement } from './isHTMLElement-0271eefe.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 import { S as STEPS_SIZE } from './bq-steps.types-3a84b1e3.js';

package/dist/esm/bq-step-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-step-item.entry.js","mappings":"~~;;;;;;;;;;~~AAAO,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,CAAU;;ACAjG,MAAM,aAAa,GAAG,8iuBAA8iuB,CAAC;AACrkuB,yBAAe,aAAa;;MCef,UAAU;;;;oBAgBwB,QAAQ;sBAGD,SAAS;;;;;;IAU7D,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,gBAAgB,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAElE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;IAOQ,OAAO,CAAiE;;;;IAMjF,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;;;;;;;;IAiBD,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC;KACnC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;KAClC;IAEO,gBAAgB,GAAG;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,SAAS,CAAC;YAAE,OAAO;QAE7D,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAChD,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;KACvD,CAAC;;;;IAMF,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI;gBAC/B,CAAC,iBAAiB,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI;gBACtC,gCAAgC,EAAE,IAAI,CAAC,UAAU;aAClD,EACD,IAAI,EAAC,MAAM,IAEX,4DAAK,KAAK,EAAE,iCAAiC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,IAClF,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAEhC,4DACE,KAAK,EAAE;gBACL,8EAA8E,EAAE,IAAI;gBACpF,qBAAqB,EAAE,IAAI,CAAC,UAAU;gBACtC,iBAAiB,EAAE,IAAI,CAAC,SAAS;aAClC,EACD,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACJ,EAEN,4DACE,KAAK,EAAE;gBACL,sEAAsE,EAAE,IAAI;gBAC5E,YAAY,EAAE,IAAI,CAAC,UAAU;aAC9B,EACD,IAAI,EAAC,aAAa,IAElB,6DAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACF,CACF,EACN;KACH;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Step item styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-step-item.variables';\n\n:host {\n --bq-icon--color: theme(colors.icon.primary);\n\n @apply bg-bg-primary;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color);\n }\n\n &.current {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-current);\n }\n }\n\n &.completed {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n }\n }\n\n &.error {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-error);\n }\n }\n\n &.disabled {\n ::slotted(bq-icon) {\n opacity: 0.6;\n }\n }\n}\n\n.bq-step-item__prefix.numeric {\n @apply flex items-center justify-center rounded-full;\n @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n @apply text-m font-semibold leading-regular;\n\n &.small {\n @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n }\n\n // Status\n\n &.current {\n @apply bg-[var(--bq-step-item--prefix-color-current)] text-[--bq-text--alt];\n }\n\n &.completed {\n @apply bg-ui-success-alt text-text-success;\n }\n\n &.error {\n @apply bg-ui-danger-alt text-text-danger;\n }\n\n &.disabled {\n @apply opacity-60;\n }\n}\n\n.bq-step-item__content--description::slotted() {\n @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/*\n @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n /\n@Component({\n tag: 'bq-step-item',\n styleUrl: './scss/bq-step-item.scss',\n shadow: true,\n})\nexport class BqStepItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStepItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It defines prefix size /\n @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n /* It defines step item appearance based on its status /\n @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n /* It defines the step item type used /\n @Prop({ reflect: true }) type?: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('status')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n this.handleIconPrefix();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the step item is clicked /\n @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.checkPropValues();\n }\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconPrefix();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get isDisabled(): boolean {\n return this.status === 'disabled';\n }\n\n private get isCurrent(): boolean {\n return this.status === 'current';\n }\n\n private handleIconPrefix = () => {\n const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n if (!iconElem \|\| !isHTMLElement(iconElem, 'bq-icon')) return;\n\n iconElem.size = this.size === 'small' ? 24 : 32;\n iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class={{\n 'bq-step-item flex gap-s': true,\n [`bq-step-item--${this.status}`]: true,\n 'pointer-events-none opacity-60': this.isDisabled,\n }}\n part=\"base\"\n >\n <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n </div>\n <div class=\"bq-step-item__content\">\n {/ TITLE /}\n <div\n class={{\n 'bq-step-item__content--title pe-xs3 text-m leading-regular text-text-primary': true,\n 'pointer-events-none': this.isDisabled,\n 'text-text-brand': this.isCurrent,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/ DESCRIPTION */}\n <div\n class={{\n 'bq-step-item__content--description text-s leading-regular opacity-60': true,\n 'opacity-60': this.isDisabled,\n }}\n part=\"description\"\n >\n <slot name=\"description\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-step-item.entry.js","mappings":";;;;;;;;;AAAO,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,CAAU;;ACAjG,MAAM,aAAa,GAAG,8iuBAA8iuB,CAAC;AACrkuB,yBAAe,aAAa;;MCef,UAAU;;;;oBAgBwB,QAAQ;sBAGD,SAAS;;;;;;IAU7D,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,gBAAgB,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAElE,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;IAOQ,OAAO,CAAiE;;;;IAMjF,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;;;;;;;;IAiBD,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC;KACnC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;KAClC;IAEO,gBAAgB,GAAG;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,SAAS,CAAC;YAAE,OAAO;QAE7D,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAChD,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;KACvD,CAAC;;;;IAMF,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI;gBAC/B,CAAC,iBAAiB,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI;gBACtC,gCAAgC,EAAE,IAAI,CAAC,UAAU;aAClD,EACD,IAAI,EAAC,MAAM,IAEX,4DAAK,KAAK,EAAE,iCAAiC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,IAClF,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAEhC,4DACE,KAAK,EAAE;gBACL,8EAA8E,EAAE,IAAI;gBACpF,qBAAqB,EAAE,IAAI,CAAC,UAAU;gBACtC,iBAAiB,EAAE,IAAI,CAAC,SAAS;aAClC,EACD,IAAI,EAAC,OAAO,IAEZ,8DAAQ,CACJ,EAEN,4DACE,KAAK,EAAE;gBACL,sEAAsE,EAAE,IAAI;gBAC5E,YAAY,EAAE,IAAI,CAAC,UAAU;aAC9B,EACD,IAAI,EAAC,aAAa,IAElB,6DAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACF,CACF,EACN;KACH;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Step item styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-step-item.variables';\n\n:host {\n --bq-icon--color: theme(colors.icon.primary);\n\n @apply bg-bg-primary;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color);\n }\n\n &.current {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-current);\n }\n }\n\n &.completed {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n }\n }\n\n &.error {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-error);\n }\n }\n\n &.disabled {\n ::slotted(bq-icon) {\n opacity: 0.6;\n }\n }\n}\n\n.bq-step-item__prefix.numeric {\n @apply flex items-center justify-center rounded-full;\n @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n @apply text-m font-semibold leading-regular;\n\n &.small {\n @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n }\n\n // Status\n\n &.current {\n @apply bg-[var(--bq-step-item--prefix-color-current)] text-[--bq-text--alt];\n }\n\n &.completed {\n @apply bg-ui-success-alt text-text-success;\n }\n\n &.error {\n @apply bg-ui-danger-alt text-text-danger;\n }\n\n &.disabled {\n @apply opacity-60;\n }\n}\n\n.bq-step-item__content--description::slotted() {\n @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/*\n @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n /\n@Component({\n tag: 'bq-step-item',\n styleUrl: './scss/bq-step-item.scss',\n shadow: true,\n})\nexport class BqStepItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStepItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It defines prefix size /\n @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n /* It defines step item appearance based on its status /\n @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n /* It defines the step item type used /\n @Prop({ reflect: true }) type?: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('status')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n this.handleIconPrefix();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the step item is clicked /\n @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.checkPropValues();\n }\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconPrefix();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get isDisabled(): boolean {\n return this.status === 'disabled';\n }\n\n private get isCurrent(): boolean {\n return this.status === 'current';\n }\n\n private handleIconPrefix = () => {\n const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n if (!iconElem \|\| !isHTMLElement(iconElem, 'bq-icon')) return;\n\n iconElem.size = this.size === 'small' ? 24 : 32;\n iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class={{\n 'bq-step-item flex gap-s': true,\n [`bq-step-item--${this.status}`]: true,\n 'pointer-events-none opacity-60': this.isDisabled,\n }}\n part=\"base\"\n >\n <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n </div>\n <div class=\"bq-step-item__content\">\n {/ TITLE /}\n <div\n class={{\n 'bq-step-item__content--title pe-xs3 text-m leading-regular text-text-primary': true,\n 'pointer-events-none': this.isDisabled,\n 'text-text-brand': this.isCurrent,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/ DESCRIPTION */}\n <div\n class={{\n 'bq-step-item__content--description text-s leading-regular opacity-60': true,\n 'opacity-60': this.isDisabled,\n }}\n part=\"description\"\n >\n <slot name=\"description\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-steps.entry.js CHANGED Viewed

@@ -4,7 +4,6 @@
  */
 import { r as registerInstance, g as getElement, h } from './index-033f1efb.js';
 import { S as STEPS_SIZE, a as STEPS_TYPE } from './bq-steps.types-3a84b1e3.js';
-import './assetsPath-e2f1ceb9.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 const bqStepsCss = ".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}.pe-\\[--bq-steps--gap\\]{padding-inline-end:var(--bq-steps--gap)}.ps-\\[--bq-steps--gap\\]{padding-inline-start:var(--bq-steps--gap)}@-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-steps--divider-color:var(--bq-ui--secondary);--bq-steps--gap:var(--bq-spacing-m);display:block}::slotted(bq-step-item:not(:first-child)){padding-inline-start:var(--bq-steps--gap)}::slotted(bq-step-item:not(:last-child)){padding-inline-end:var(--bq-steps--gap)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.static{position:static}.absolute{position:absolute}.relative{position:relative}.-z-10{z-index:-10}.flex{display:flex}.w-full{width:100%}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.p-bs-m{padding-block-start:var(--bq-spacing-m)}.p-bs-s{padding-block-start:var(--bq-spacing-s)}.p-i-s{padding-inline:var(--bq-spacing-s)}.inset-ie-0{inset-inline-end:0}.inset-is-0{inset-inline-start:0}.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}}.\\!hidden{display:none!important}.gap-0{gap:0}";

package/dist/esm/bq-steps.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-steps.entry.js","mappings":"~~;;;;;;;;;~~AAAA,MAAM,UAAU,GAAG,w+nBAAw+nB,CAAC;AAC5/nB,sBAAe,UAAU;;MCeZ,OAAO;;;4BAmB8B,iBAAiB;oBAGrB,QAAQ;;;;;IAlB5C,QAAQ,CAAc;;;;IA4B9B,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;;IASD,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;;;;;;;;IAiBD,IAAY,OAAO;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAChD,CAAC;KAClC;IAEO,gBAAgB,GAAG;QACzB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC;YACrD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SAC7B,CAAC,CAAC;KACJ,CAAC;;;;;;;IAUF,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;QAEtE,QACE,4DACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW,IAEhB,8DAAQ,EACR,mEACE,KAAK,EAAE,8CAA8C,iBAAiB,EAAE,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,GACvF,CACE,EACN;KACH;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/steps/scss/bq-steps.scss?tag=bq-steps&encapsulation=shadow","../../packages/beeq/src/components/steps/bq-steps.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Steps styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-steps.variables';\n\n:host {\n @apply block;\n}\n\n::slotted(bq-step-item:not(:first-child)) {\n @apply ps-[--bq-steps--gap];\n}\n\n::slotted(bq-step-item:not(:last-child)) {\n @apply pe-[--bq-steps--gap];\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE, TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/\n @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n /\n@Component({\n tag: 'bq-steps',\n styleUrl: './scss/bq-steps.scss',\n shadow: true,\n})\nexport class BqSteps {\n // Own Properties\n // ====================\n\n private stepElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqStepsElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The color of the line that connects the steps. It should be a valid declarative color token. /\n @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n /* The size of the steps /\n @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n /* The type of prefix element to use on the step items */\n @Prop({ reflect: true }) type: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n @Watch('size')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n this.setStepItemProps();\n }\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.setStepItemProps();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqSteps(): HTMLBqStepItemElement[] {\n if (!this.stepElem) return [];\n\n const slot = this.stepElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private setStepItemProps = () => {\n this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n bqStepElem.size = this.size;\n bqStepElem.type = this.type;\n });\n };\n\n // private handleChange = (event) => {\n // this.bqChange.emit(event);\n // }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';\n\n return (\n <div\n class=\"relative flex w-full items-start justify-between\"\n ref={(div) => (this.stepElem = div)}\n part=\"container\"\n >\n <slot />\n <bq-divider\n class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n strokeColor={this.dividerColor}\n strokeThickness={2}\n exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n />\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-steps.entry.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,w+nBAAw+nB,CAAC;AAC5/nB,sBAAe,UAAU;;MCeZ,OAAO;;;4BAmB8B,iBAAiB;oBAGrB,QAAQ;;;;;IAlB5C,QAAQ,CAAc;;;;IA4B9B,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;;IASD,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;;;;;;;;;;;;IAiBD,IAAY,OAAO;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAChD,CAAC;KAClC;IAEO,gBAAgB,GAAG;QACzB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC;YACrD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SAC7B,CAAC,CAAC;KACJ,CAAC;;;;;;;IAUF,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;QAEtE,QACE,4DACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW,IAEhB,8DAAQ,EACR,mEACE,KAAK,EAAE,8CAA8C,iBAAiB,EAAE,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,GACvF,CACE,EACN;KACH;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/steps/scss/bq-steps.scss?tag=bq-steps&encapsulation=shadow","../../packages/beeq/src/components/steps/bq-steps.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Steps styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-steps.variables';\n\n:host {\n @apply block;\n}\n\n::slotted(bq-step-item:not(:first-child)) {\n @apply ps-[--bq-steps--gap];\n}\n\n::slotted(bq-step-item:not(:last-child)) {\n @apply pe-[--bq-steps--gap];\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE, TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/\n @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n /\n@Component({\n tag: 'bq-steps',\n styleUrl: './scss/bq-steps.scss',\n shadow: true,\n})\nexport class BqSteps {\n // Own Properties\n // ====================\n\n private stepElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqStepsElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The color of the line that connects the steps. It should be a valid declarative color token. /\n @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n /* The size of the steps /\n @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n /* The type of prefix element to use on the step items */\n @Prop({ reflect: true }) type: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n @Watch('size')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n this.setStepItemProps();\n }\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.setStepItemProps();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqSteps(): HTMLBqStepItemElement[] {\n if (!this.stepElem) return [];\n\n const slot = this.stepElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private setStepItemProps = () => {\n this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n bqStepElem.size = this.size;\n bqStepElem.type = this.type;\n });\n };\n\n // private handleChange = (event) => {\n // this.bqChange.emit(event);\n // }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';\n\n return (\n <div\n class=\"relative flex w-full items-start justify-between\"\n ref={(div) => (this.stepElem = div)}\n part=\"container\"\n >\n <slot />\n <bq-divider\n class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n strokeColor={this.dividerColor}\n strokeThickness={2}\n exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n />\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-switch.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { i as isNil } from './isNil-2290f64e.js';
 import { a as getTextContent } from './slot-58bfedb5.js';

package/dist/esm/bq-switch.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-switch.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/switch/scss/bq-switch.scss?tag=bq-switch&encapsulation=shadow","../../packages/beeq/src/components/switch/bq-switch.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Switch styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-switch.variables';\n\n:host {\n @apply inline-block;\n}\n\n:host(.full-width) {\n @apply is-full;\n}\n\n.bq-switch {\n @apply flex cursor-pointer select-none items-center rounded-s transition-colors duration-300 p-b-2 p-i-2;\n\n justify-content: var(--bq-switch--justify-content);\n\n // Display background on hover (if enabled)\n &.has-background:not(.is-disabled):hover {\n @apply bg-hover-ui-primary;\n }\n\n &.is-disabled {\n @apply cursor-not-allowed opacity-60;\n }\n}\n\n.bq-switch--input:not(:disabled):focus-visible {\n ~ .bq-switch--control {\n @apply focus;\n }\n}\n\n.bq-switch--control__dot {\n @apply absolute start-xs2 rounded-full bg-icon-inverse bs-[--bq-switch--dot-size] is-[--bq-switch--dot-size];\n @apply group-[&.is-checked]:start-[calc(100%_-_var(--bq-switch--dot-size)_-_var(--bq-spacing-xs2))] group-[&.is-checked]:bg-[--bq-icon--alt];\n @apply transition-all duration-300;\n}\n\n.bq-switch--control__icon {\n --bq-icon--size: var(--bq-switch--dot-size) !important;\n\n &::part(base) {\n @apply flex;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\nimport { getTextContent, isNil } from '../../shared/utils';\n\n/\n Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n \n @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n /\n@Component({\n tag: 'bq-switch',\n styleUrl: './scss/bq-switch.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSwitch {\n // Own Properties\n // ====================\n\n private labelElem: HTMLSpanElement;\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSwitchElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasLabel = false;\n\n // Public Property API\n // ========================\n\n /* If true, a background will be displayed on hover /\n @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n /* It indicates whether if the switch is `ON` by default (when the page loads) /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n /* If true, the switch control will be disabled and no interaction will be allowed /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* If true, the component will take the full width space available on the parent container /\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /* It indicates how to to display the on/off marks inside the control, with icons or none (default) /\n @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n /\n It defines how to distribute the space between and around the control and the label text\n * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n /\n @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n /* Name of the form control. Submitted with the form as part of a name/value pair /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean = false;\n\n /* If true, the order of the control and the label text will be changed /\n @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n /* The input control's value, submitted as a name/value pair with form data. /\n @Prop({ reflect: true }) value?: string;\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 the switch state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the switch gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n /* Handler to be called when the switch loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n componentDidUpdate() {\n /\n We need to trigger the `bqChange` immediately after the first update happens\n * so the checked attribute get applied, otherwise, a delay will happen\n * between the event emits and when the checked attribute value gets reflected in the element host.\n /\n if (this.checked !== this.prevCheckedValue) {\n this.bqChange.emit({ checked: this.checked });\n this.prevCheckedValue = this.checked;\n }\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\n Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n /\n @Method()\n async vClick() {\n this.inputElem?.click();\n }\n\n /\n Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n /\n @Method()\n async vFocus() {\n this.inputElem?.focus();\n }\n\n /\n Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n /\n @Method()\n async vBlur() {\n this.inputElem?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleSlotChange = () => {\n const slot = this.labelElem?.querySelector('slot') ?? null;\n if (isNil(slot)) return;\n\n this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const hostStyle = {\n ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n };\n\n const labelCssClasses = {\n 'has-background': this.backgroundOnHover,\n 'is-checked': this.checked,\n 'is-disabled': this.disabled,\n 'flex-row-reverse': this.reverseOrder,\n };\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n {/ Hidden native HTML input /}\n <input\n class=\"bq-switch--input peer sr-only peer-checked:invisible\"\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n name={!isNil(this.name) ? this.name : undefined}\n aria-label={this.name}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n ref={(input) => (this.inputElem = input)}\n role=\"switch\"\n value={this.value}\n />\n {/ Control /}\n <div\n class=\"bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand\"\n part=\"control\"\n >\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon on\"\n name=\"check\"\n color=\"icon--alt\"\n role=\"img\"\n title=\"On\"\n part=\"icon-on\"\n />\n )}\n {/ Dot /}\n <div class=\"bq-switch--control__dot\" part=\"dot\" />\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon off\"\n name=\"x\"\n color=\"icon--inverse\"\n role=\"img\"\n title=\"Off\"\n part=\"icon-off\"\n />\n )}\n </div>\n {/ Label */}\n <span\n class={{\n 'bq-switch--label text-m font-medium leading-regular text-text-primary transition-colors duration-300':\n true,\n 'ms-s': this.hasLabel && !this.reverseOrder,\n 'me-s': this.hasLabel && this.reverseOrder,\n }}\n ref={(span) => (this.labelElem = span)}\n part=\"label\"\n >\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-switch.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/switch/scss/bq-switch.scss?tag=bq-switch&encapsulation=shadow","../../packages/beeq/src/components/switch/bq-switch.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Switch styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-switch.variables';\n\n:host {\n @apply inline-block;\n}\n\n:host(.full-width) {\n @apply is-full;\n}\n\n.bq-switch {\n @apply flex cursor-pointer select-none items-center rounded-s transition-colors duration-300 p-b-2 p-i-2;\n\n justify-content: var(--bq-switch--justify-content);\n\n // Display background on hover (if enabled)\n &.has-background:not(.is-disabled):hover {\n @apply bg-hover-ui-primary;\n }\n\n &.is-disabled {\n @apply cursor-not-allowed opacity-60;\n }\n}\n\n.bq-switch--input:not(:disabled):focus-visible {\n ~ .bq-switch--control {\n @apply focus;\n }\n}\n\n.bq-switch--control__dot {\n @apply absolute start-xs2 rounded-full bg-icon-inverse bs-[--bq-switch--dot-size] is-[--bq-switch--dot-size];\n @apply group-[&.is-checked]:start-[calc(100%_-_var(--bq-switch--dot-size)_-_var(--bq-spacing-xs2))] group-[&.is-checked]:bg-[--bq-icon--alt];\n @apply transition-all duration-300;\n}\n\n.bq-switch--control__icon {\n --bq-icon--size: var(--bq-switch--dot-size) !important;\n\n &::part(base) {\n @apply flex;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\nimport { getTextContent, isNil } from '../../shared/utils';\n\n/\n Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n \n @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n /\n@Component({\n tag: 'bq-switch',\n styleUrl: './scss/bq-switch.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSwitch {\n // Own Properties\n // ====================\n\n private labelElem: HTMLSpanElement;\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSwitchElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasLabel = false;\n\n // Public Property API\n // ========================\n\n /* If true, a background will be displayed on hover /\n @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n /* It indicates whether if the switch is `ON` by default (when the page loads) /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n /* If true, the switch control will be disabled and no interaction will be allowed /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* If true, the component will take the full width space available on the parent container /\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /* It indicates how to to display the on/off marks inside the control, with icons or none (default) /\n @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n /\n It defines how to distribute the space between and around the control and the label text\n * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n /\n @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n /* Name of the form control. Submitted with the form as part of a name/value pair /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean = false;\n\n /* If true, the order of the control and the label text will be changed /\n @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n /* The input control's value, submitted as a name/value pair with form data. /\n @Prop({ reflect: true }) value?: string;\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 the switch state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the switch gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n /* Handler to be called when the switch loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n componentDidUpdate() {\n /\n We need to trigger the `bqChange` immediately after the first update happens\n * so the checked attribute get applied, otherwise, a delay will happen\n * between the event emits and when the checked attribute value gets reflected in the element host.\n /\n if (this.checked !== this.prevCheckedValue) {\n this.bqChange.emit({ checked: this.checked });\n this.prevCheckedValue = this.checked;\n }\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\n Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n /\n @Method()\n async vClick() {\n this.inputElem?.click();\n }\n\n /\n Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n /\n @Method()\n async vFocus() {\n this.inputElem?.focus();\n }\n\n /\n Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n /\n @Method()\n async vBlur() {\n this.inputElem?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleSlotChange = () => {\n const slot = this.labelElem?.querySelector('slot') ?? null;\n if (isNil(slot)) return;\n\n this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const hostStyle = {\n ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n };\n\n const labelCssClasses = {\n 'has-background': this.backgroundOnHover,\n 'is-checked': this.checked,\n 'is-disabled': this.disabled,\n 'flex-row-reverse': this.reverseOrder,\n };\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n {/ Hidden native HTML input /}\n <input\n class=\"bq-switch--input peer sr-only peer-checked:invisible\"\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n name={!isNil(this.name) ? this.name : undefined}\n aria-label={this.name}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n ref={(input) => (this.inputElem = input)}\n role=\"switch\"\n value={this.value}\n />\n {/ Control /}\n <div\n class=\"bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand\"\n part=\"control\"\n >\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon on\"\n name=\"check\"\n color=\"icon--alt\"\n role=\"img\"\n title=\"On\"\n part=\"icon-on\"\n />\n )}\n {/ Dot /}\n <div class=\"bq-switch--control__dot\" part=\"dot\" />\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon off\"\n name=\"x\"\n color=\"icon--inverse\"\n role=\"img\"\n title=\"Off\"\n part=\"icon-off\"\n />\n )}\n </div>\n {/ Label */}\n <span\n class={{\n 'bq-switch--label text-m font-medium leading-regular text-text-primary transition-colors duration-300':\n true,\n 'ms-s': this.hasLabel && !this.reverseOrder,\n 'me-s': this.hasLabel && this.reverseOrder,\n }}\n ref={(span) => (this.labelElem = span)}\n part=\"label\"\n >\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-tab-group.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { d as debounce } from './debounce-3e72f418.js';
 import { g as getNextElement } from './getNextElement-8bcc2025.js';
 import { i as isHTMLElement } from './isHTMLElement-0271eefe.js';