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

@beeq/core 1.8.4 → 1.9.0

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

package/dist/beeq/bq-side-menu.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-side-menu.entry.esm.js","sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Side menu styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu.variables';\n\n:host {\n @apply flex overflow-hidden;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Aside container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu {\n @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n @apply transition-[background-color,width] duration-150;\n @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n @apply is-[--bq-side-menu--width-collapse];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Logo container */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu--logo {\n @apply sticky top-0 z-[1] p-xs;\n @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/* APPEARANCE */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n */\n\n:host([size='small']) {\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--paddingY: theme(space.s);\n }\n}\n\n:host([appearance='brand']) {\n --bq-focus: theme(stroke.alt);\n --bq-side-menu--bg-color: theme(backgroundColor.ui.brand);\n --bq-side-menu--brand-color: theme(stroke.inverse);\n --bq-side-menu--border-color: theme(stroke.brand);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.alt);\n --bq-side-menu-item--text-hover: theme(textColor.alt);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.inverse);\n }\n}\n\n:host([appearance='inverse']) {\n --bq-side-menu--bg-color: theme(backgroundColor.ui.inverse);\n --bq-side-menu--brand-color: theme(stroke.inverse);\n --bq-side-menu--border-color: theme(backgroundColor.ui.inverse);\n\n ::slotted(bq-side-menu-item) {\n --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n --bq-side-menu-item--text-default: theme(textColor.inverse);\n --bq-side-menu-item--text-hover: theme(textColor.inverse);\n --bq-side-menu-item--text-active: theme(textColor.primary);\n }\n\n .bq-side-menu--footer ::slotted([slot='footer']) {\n --bq-ui--secondary: theme(colors.transparent);\n --bq-text--primary: theme(textColor.inverse);\n }\n}\n","import { Component, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isClient, isHTMLElement } from '../../shared/utils';\n\n/**\n *The default side menu serves as a versatile container for organizing and displaying navigation elements,\n * with default side menu items providing a clean and straightforward way to represent individual menu options.\n * Together, they form the foundation for building structured and intuitive side menu layouts.\n *\n * @example How to use it\n * ```html\n * <bq-side-menu>\n * <div slot=\"logo\">\n * <h1>Your Logo</h1>\n * </div>\n * <bq-side-menu-item active>\n * <bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\n * Home\n * </bq-side-menu-item>\n * <bq-side-menu-item>\n * <bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\n * Settings\n * </bq-side-menu-item>\n * <bq-side-menu-item disabled>\n * <bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\n * Help\n * </bq-side-menu-item>\n * </bq-side-menu>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n *\n * @attr {\"brand\" | \"default\" | \"inverse\"} appearance - It sets a predefined appearance of the side menu.\n * @attr {boolean} collapse - If `true`, the container will reduce its width.\n * @attr {\"medium\" | \"small\"} - size - It sets the size of the navigation menu items.\n *\n * @method toggleCollapse - Method to be called to toggle the collapse state of the side menu.\n *\n * @event bqCollapse - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.\n * @event bqSelect - Callback handler to be called when the active/selected menu item changes.\n *\n * @slot logo - The section for displaying the logo or brand in the side menu.\n * @slot The main section that holds all menu items.\n * @slot footer - The section for adding footer content to the side menu.\n *\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n *\n * @cssprop --bq-side-menu--bg-color - Side menu background color\n * @cssprop --bq-side-menu--brand-color - Side menu logo color\n * @cssprop --bq-side-menu--border-color - Side menu border color\n */\n@Component({\n tag: 'bq-side-menu',\n styleUrl: './scss/bq-side-menu.scss',\n shadow: true,\n})\nexport class BqSideMenu {\n // Own Properties\n // ====================\n\n private menuItemCssSelector = 'bq-side-menu-item';\n\n private bodyCss = 'bq-body--side-menu';\n private bodyCssExpand = 'bq-body--side-menu__expand';\n private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n private menuElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private documentBody: HTMLBodyElement;\n\n // Public Property API\n // ========================\n\n /** It sets a predefined appearance of the side menu */\n @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n /** If true, the container will reduce its width */\n @Prop({ reflect: true }) collapse: boolean = false;\n\n /** It sets the size of the navigation menu items */\n @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('collapse')\n onCollapsePropChange() {\n this.handleCollapse();\n this.bqCollapse.emit({ collapse: this.collapse });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n /** Callback handler to be called when the active/selected menu item changes */\n @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n if (!isClient()) return;\n\n this.documentBody = document.querySelector('body');\n this.documentBody.classList.add(this.bodyCss);\n this.handleCollapse();\n }\n\n disconnectedCallback() {\n this.cleanDocumentBodyClass();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n onMenuItemClick(event: Event) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n this.menuItems.forEach(\n (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n );\n this.bqSelect.emit(item);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /** Toggle the collapse state of the side menu */\n @Method()\n async toggleCollapse() {\n this.collapse = !this.collapse;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get menuItems() {\n if (!this.menuElem) return [];\n\n const slot = this.menuElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private handleCollapse = () => {\n if (!this.menuItems.length) return;\n\n this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n if (this.collapse) {\n this.collapseDocumentBody();\n } else {\n this.expandDocumentBody();\n }\n };\n\n private collapseDocumentBody = () => {\n if (!this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssExpand);\n this.documentBody.classList.add(this.bodyCssCollapse);\n };\n\n private expandDocumentBody = () => {\n if (this.collapse) return;\n\n this.documentBody.classList.remove(this.bodyCssCollapse);\n this.documentBody.classList.add(this.bodyCssExpand);\n };\n\n private cleanDocumentBodyClass = () => {\n this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n {/* Company logo and name */}\n <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n <slot name=\"logo\" />\n </div>\n {/* Navigation content */}\n <nav\n class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n ref={(navElem) => (this.menuElem = navElem)}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n role=\"menu\"\n part=\"nav\"\n >\n <slot />\n </nav>\n {/* Footer */}\n <div\n class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n part=\"footer\"\n >\n <slot name=\"footer\"></slot>\n </div>\n </aside>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-slider.entry.esm.js","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-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-brand;\n }\n\n .thumb-active {\n @apply cursor-grabbing bg-active-ui-brand border-active-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 { AttachInternals, Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/**\n * Sliders provide a visual representation of adjustable content, enabling users to change values by dragging a handle along a horizontal track.\n *\n * @example How to use it\n * ```html\n * <bq-slider max=\"100\" value=\"30\"></bq-slider>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/509cbc-slider/b/09d7b1\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait to trigger the bqChange event after each value change.\n * @attr {boolean} disabled - If `true` the slider is disabled.\n * @attr {boolean} enable-tooltip - If `true`, a tooltip will be shown displaying the progress value.\n * @attr {boolean} enable-value-indicator - If `true` it will show the value label on the side of the slider track area.\n * @attr {number} gap - A number representing the amount to remain between the minimum and maximum values (only for range type).\n * @attr {number} max - A number representing the max value of the slider.\n * @attr {number} min - A number representing the min value of the slider.\n * @attr {number} step - A number represents the step of the slider. ⚠️ 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 * @attr {boolean} tooltip-always-visible - If `true`, a tooltip will always display the progress value. It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n * @attr {\"range\" | \"single\"} type - It defines the type of slider to display.\n * @attr {\"[number, number]\" | \"number\" | \"string\"} value - The value of the slider. 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 * @event bqBlur - Handler to be called when the slider loses focus.\n * @event bqChange - Handler to be called when changing the value on range inputs.\n * @event bqFocus - Handler to be called when the slider gets focused.\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 * @cssprop --bq-slider--size - The height of the slider track/progress area\n * @cssprop --bq-slider--border-radius - Slider border radius\n * @cssprop --bq-slider--thumb-size - Slider hover thumb size\n * @cssprop --bq-slider--progress-color - Slider progress background color\n * @cssprop --bq-slider--trackarea-color - Slider track background color\n */\n@Component({\n tag: 'bq-slider',\n styleUrl: './scss/bq-slider.scss',\n formAssociated: true,\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 @AttachInternals() internals!: ElementInternals;\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 /** Name of the form control. Submitted with the form as part of a name/value pair */\n @Prop({ reflect: true }) name: string;\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 componentWillLoad() {\n this.init();\n }\n\n componentDidLoad() {\n this.runUpdates();\n }\n\n componentDidUpdate() {\n this.runUpdates();\n }\n\n formAssociatedCallback() {\n this.internals?.setFormValue(`${this.value}`);\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private 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 const { internals, isRangeType, maxValue, minValue } = this;\n this.value = isRangeType ? [minValue, maxValue] : minValue;\n internals?.setFormValue(isRangeType ? JSON.stringify(this.value) : this.value.toString());\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 0;\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-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 name={this.name}\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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-spinner.entry.esm.js","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 } from './bq-spinner.types';\nimport type { 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 * @example How to use it\n * ```html\n * <bq-spinner size=\"medium\" text-position=\"bellow\">\n * <span>Loading...</span>\n * </bq-spinner>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/275f10-spinner/b/09d7b1\n * @status stable\n *\n * @attr {boolean} animation - If `false`, the animation on the icon element will be stopped.\n * @attr {\"small\" | \"medium\" | \"large\"} size - It defines the size of the icon element displayed.\n * @attr {\"above\" | \"below\" | \"left\" | \"right\" | \"none\"} text-position - It defines the position of the label text.\n *\n * @slot icon - The icon slot container.\n * @slot - The content of the spinner component.\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 * @cssprop --bq-spinner--color - Spinner color\n * @cssprop --bq-spinner--size-large - Spinner large size\n * @cssprop --bq-spinner--size-medium - Spinner medium size\n * @cssprop --bq-spinner--size-small - Spinner small size\n * @cssprop --bq-spinner--large-text-fontSize - Spinner large text font size\n * @cssprop --bq-spinner--medium-text-fontSize - Spinner medium text font size\n * @cssprop --bq-spinner--small-text-fontSize - Spinner small text font size\n * @cssprop --bq-spinner--text-lineHeight - Spinner text line height\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.handleSlotChange();\n this.handleIconSlotChange();\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-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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-status.entry.esm.js","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-primary p-b-0 p-i-0 m-b-0 m-i-0;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STATUS_TYPE } from './bq-status.types';\nimport type { TStatusType } from './bq-status.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n *\n * @example How to use it\n * ```html\n * <bq-status type=\"alert\">Alert status</bq-status>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/46c8d5-status/b/09d7b1\n * @status stable\n *\n * @dependency bq-badge\n *\n * @attr {\"alert\" | \"danger\" | \"info\" | \"neutral\" | \"success\"} type - It defines the type of status to display.\n *\n * @slot The content of the status component.\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 * @cssprop --bq-status-circ - Status circle size.\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-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"],"names":[],"mappings":";;;;;;;AAAO,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAU;;ACArF,MAAM,WAAW,GAAG,o7nBAAo7nB;;MCkC37nB,QAAQ,GAAA,MAAA;;;;;;;;;;;IAgBM,IAAI,GAAgB,SAAS;;;IAKtD,eAAe,GAAA;QACb,iBAAiB,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;;;;;;;;IAU5D,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;;;;;;;;;;;;;;;;IAoBxB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9E,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAE,CAAkC,+BAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAG,CAAA,EACzG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uGAAuG,EAC7G,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;"}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-step-item.entry.esm.js","sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- */\n/* Step item styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-step-item.variables';\n\n:host {\n --bq-icon--color: theme(stroke.icon.primary);\n\n @apply bg-primary;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color);\n }\n\n &.current {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-current);\n }\n }\n\n &.completed {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n }\n }\n\n &.error {\n ::slotted(bq-icon) {\n --bq-icon--color: var(--bq-step-item--prefix-color-error);\n }\n }\n\n &.disabled {\n ::slotted(bq-icon) {\n opacity: 0.6;\n }\n }\n}\n\n.bq-step-item__prefix.numeric {\n @apply flex items-center justify-center rounded-full;\n @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n @apply text-m font-semibold leading-regular;\n\n &.small {\n @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n }\n\n // Status\n\n &.current {\n @apply bg-[var(--bq-step-item--prefix-color-current)] text-alt;\n }\n\n &.completed {\n @apply bg-ui-success-alt text-success;\n }\n\n &.error {\n @apply bg-ui-danger-alt text-danger;\n }\n\n &.disabled {\n @apply opacity-60;\n }\n}\n\n.bq-step-item__content--description::slotted(*) {\n @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, h, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS } from './bq-step-item.types';\nimport type { TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE } from '../steps/bq-steps.types';\nimport type { TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * The Step Item Component is a UI element used to display a single step or stage in a process or task.\n * It should be used inside the Steps component.\n *\n * @example How to use it\n * ```html\n * <bq-step-item status=\"completed\">\n * <bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n * <span>Title</span>\n * <span slot=\"description\">Description</span>\n * </bq-step-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @attr {\"small\" | \"medium\"} size - It defines prefix size\n * @attr {\"completed\" | \"current\" | \"error\" | \"default\" | \"disabled\"} status - It defines step item appearance based on its status\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - It defines the step item type used\n *\n * @event bqClick - Callback handler emitted when the step item is clicked\n *\n * @slot - The step item content\n * @slot prefix - The step item prefix\n * @slot description - The step item description\n *\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n *\n * @cssprop --bq-step-item--prefix-color - Color of the prefix icon\n * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current\n * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed\n * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error\n * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number\n * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number\n */\n@Component({\n tag: 'bq-step-item',\n styleUrl: './scss/bq-step-item.scss',\n shadow: true,\n})\nexport class BqStepItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStepItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** It defines prefix size */\n @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n /** It defines step item appearance based on its status */\n @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n /** It defines the step item type used */\n @Prop({ reflect: true }) type?: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('status')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n this.handleIconPrefix();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler emitted when the step item is clicked */\n @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.checkPropValues();\n }\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconPrefix();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get isDisabled(): boolean {\n return this.status === 'disabled';\n }\n\n private get isCurrent(): boolean {\n return this.status === 'current';\n }\n\n private handleIconPrefix = () => {\n const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n iconElem.size = this.size === 'small' ? 24 : 32;\n iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class={{\n 'bq-step-item flex gap-s': true,\n [`bq-step-item--${this.status}`]: true,\n 'pointer-events-none opacity-60': this.isDisabled,\n }}\n part=\"base\"\n >\n <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n </div>\n <div class=\"bq-step-item__content\">\n {/* TITLE */}\n <div\n class={{\n 'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n 'pointer-events-none': this.isDisabled,\n 'text-brand': this.isCurrent,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/* DESCRIPTION */}\n <div\n class={{\n 'bq-step-item__content--description text-s leading-regular opacity-60': true,\n 'opacity-60': this.isDisabled,\n }}\n part=\"description\"\n >\n <slot name=\"description\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-steps.entry.esm.js","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 } from './bq-steps.types';\nimport type { TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * The Steps Component is a UI element used to display a series of steps or stages in a process or task.\n * It is used to guide users through a process or task and to indicate their progress.\n *\n * @example How to use it\n * ```html\n * <bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n * <bq-step-item status=\"completed\"> ... </bq-step-item>\n * <bq-step-item status=\"error\"> ... </bq-step-item>\n * <bq-step-item status=\"current\"> ... </bq-step-item>\n * <bq-step-item status=\"default\"> ... </bq-step-item>\n * </bq-steps>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @dependency bq-divider\n *\n * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.\n * @attr {\"medium\" | \"small\"} size - The size of the steps\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - The type of prefix element to use on the step items\n *\n * @slot - The step items\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 * @cssprop --bq-steps--divider-color - Divider color\n * @cssprop --bq-steps--gap - Gap between steps\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"],"names":[],"mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,y7nBAAy7nB;;MC4C/7nB,OAAO,GAAA,MAAA;;;;;;AAIV,IAAA,QAAQ;;;;;;;;IAeS,YAAY,GAAW,iBAAiB;;IAGxC,IAAI,GAAe,QAAQ;;AAG3B,IAAA,IAAI;;;IAO7B,eAAe,GAAA;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;QACxD,iBAAiB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;QAEzD,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;IAUzB,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;;;;;AAkBzB,IAAA,IAAY,OAAO,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,EAAE;QAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAChD,QAAA,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;;IAG1B,gBAAgB,GAAG,MAAK;QAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC,KAAI;AACzD,YAAA,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AAC3B,YAAA,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AAC7B,SAAC,CAAC;AACJ,KAAC;;;;;;;IAUD,MAAM,GAAA;AACJ,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAErE,QAAA,QACE,4DACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW,EAAA,EAEhB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAA8C,2CAAA,EAAA,iBAAiB,CAAE,CAAA,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,EAAA,CACvF,CACE;;;;;;;;;;;"}

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

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-switch.entry.esm.js","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,\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-ui-primary 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 { AttachInternals, Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { 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 * @example How to use it\n * ```html\n * <bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\n * Toggle me!\n * </bq-switch>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover\n * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)\n * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container\n * @attr {\"default\" | \"icon\"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)\n * @attr {\"start\" | \"end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\"} justify-content - It defines how to distribute the space between and around the control and the label text\n * @attr {string} name - Name of the form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted\n * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed\n * @attr {string} value - The input control's value, submitted as a name/value pair with form data\n *\n * @event bqChange - Handler to be called when the switch state changes\n * @event bqFocus - Handler to be called when the switch gets focus\n * @event bqBlur - Handler to be called when the switch loses focus\n *\n * @slot - The switch label text\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 * @cssprop --bq-switch--height - Switch height\n * @cssprop --bq-switch--justify-content - Switch justify content\n * @cssprop --bq-switch--width - Switch width\n * @cssprop --bq-switch--dot-size - Switch dot size\n */\n@Component({\n tag: 'bq-switch',\n styleUrl: './scss/bq-switch.scss',\n formAssociated: true,\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 @AttachInternals() internals!: ElementInternals;\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 /** The native form validation message */\n @Prop({ mutable: true }) formValidationMessage?: string;\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 @Watch('required')\n handleRequiredChange() {\n this.updateFormValidity();\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 formAssociatedCallback() {\n this.setFormValue(this.checked);\n this.updateFormValidity();\n }\n\n formResetCallback() {\n // Reset the form value and validity state\n this.checked = false;\n this.inputElem.removeAttribute('checked');\n this.internals?.setFormValue(undefined);\n this.updateFormValidity();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /**\n * Simulate a click event on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n */\n @Method()\n async vClick() {\n this.inputElem?.click();\n }\n\n /**\n * Sets focus on the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n */\n @Method()\n async vFocus() {\n this.inputElem?.focus();\n }\n\n /**\n * Remove focus from the native `<input>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n */\n @Method()\n async vBlur() {\n this.inputElem?.blur();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\n this.setFormValue(this.checked);\n this.updateFormValidity();\n };\n\n private handleOnFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleOnBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n 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 private setFormValue = (checked: boolean) => {\n const value = checked ? 'on' : undefined;\n // Set form value based on the checked state\n // Here we also pass the state of the component (2nd argument) as the state of the form control\n // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n this.internals?.setFormValue(value, `${this.checked}`);\n };\n\n private updateFormValidity = () => {\n const { formValidationMessage, internals, required, checked, inputElem } = this;\n // Clear the validity state\n internals?.states.clear();\n\n if (!(required && !checked)) {\n // If the switch component is not required or is checked, set the validity state to valid\n internals?.states.add('valid');\n internals?.setValidity({});\n return;\n }\n\n // Set validity state based on the required property and checked state\n internals?.states.add('invalid');\n internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n };\n\n // 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 !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] 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 {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 {/* Dot */}\n <div class=\"bq-switch--control__dot\" part=\"dot\" />\n </div>\n {/* Label */}\n <span\n class={{\n 'bq-switch--label text-m font-medium leading-regular text-primary transition-colors duration-300': 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"],"names":[],"mappings":"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"}

package/dist/beeq/bq-tab-group.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-tab-group.entry.esm.js","sources":["../../packages/beeq/src/components/tab-group/scss/bq-tab-group.scss?tag=bq-tab-group&encapsulation=shadow","../../packages/beeq/src/components/tab-group/bq-tab-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Tab styles */\n/* -------------------------------------------------------------------------- */\n\n:host {\n @apply block;\n}\n\n.bq-tab-group {\n @apply relative;\n\n &::after {\n @apply absolute flex border-0 border-solid border-primary content-empty;\n }\n\n &--horizontal-start,\n &--horizontal-end {\n &::after {\n @apply is-full inset-be-0 [border-block-end-width:--bq-stroke-s];\n }\n }\n\n &--horizontal-start {\n @apply justify-start;\n }\n\n &--horizontal-end {\n @apply justify-end;\n }\n\n &--vertical-start::after {\n @apply end-0 bs-full is-0 [border-block-end-width:0px] [border-inline-end-width:--bq-stroke-s];\n }\n\n &--vertical-end::after {\n @apply start-0 bs-full is-0 [border-block-end-width:0px] [border-inline-start-width:--bq-stroke-s];\n }\n}\n\n.bq-tab-group.no-divider {\n &::after {\n @apply content-none;\n }\n}\n\n.bq-tab-group--container {\n @include hide-scrollbar;\n @apply gap-xs2 p-xs2; // This will avoid cutting the outline focus style\n}\n","import { Component, Element, Event, h, Host, Listen, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { debounce, getNextElement, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from '../tab/bq-tab.types';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from '../tab/bq-tab.types';\n\n/**\n * The tab group is a user interface element that allows users wrap a set of tab items.\n *\n * @example How to use it\n * ```html\n * <bq-tab-group value=\"5\">\n * <bq-tab tab-id=\"1\">Tab</bq-tab>\n * <bq-tab tab-id=\"2\" active>Tab</bq-tab>\n * <bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n * <bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n * </bq-tab-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {number} debounce-time - A number representing the delay value applied to bqChange event handler\n * @attr {boolean} disable-divider - If true, the underline divider below the tabs won't be shown\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} value - A string representing the id of the selected tab.\n *\n * @event bqChange - Handler to be called when the tab value changes\n *\n * @slot - The bq-tab items\n *\n * @part base - The HTML div wrapper inside the shadow DOM.\n * @part tabs - The HTML div used to hold the tab buttons.\n */\n@Component({\n tag: 'bq-tab-group',\n styleUrl: './scss/bq-tab-group.scss',\n shadow: true,\n})\nexport class BqTabGroup {\n // Own Properties\n // ====================\n\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqTabElement }>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTabGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** A number representing the delay value applied to bqChange event handler */\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n /** If true, the underline divider below the tabs won't be shown */\n @Prop({ reflect: true }) disableDivider = false;\n\n /** The direction that tab should be render */\n @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n /** The placement that tab should be render */\n @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n /** The size of the tab */\n @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n /** A string representing the id of the selected tab. */\n @Prop({ reflect: true, mutable: true }) value: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('debounceTime')\n checkDebounceChange() {\n if (this.debounceTime < 0) {\n this.debounceTime = Math.max(0, this.debounceTime);\n }\n\n if (this.debouncedBqChange) {\n this.debouncedBqChange.cancel();\n }\n\n this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n this.bqChange.emit(event);\n }, this.debounceTime);\n }\n\n @Watch('size')\n @Watch('value')\n @Watch('orientation')\n @Watch('placement')\n checkPropValues() {\n validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n\n this.bqTabElements.forEach((bqTabElement) => {\n bqTabElement.size = this.size;\n bqTabElement.orientation = this.orientation;\n bqTabElement.placement = this.placement;\n bqTabElement.active = !isNil(this.value) ? bqTabElement.tabId === this.value : false;\n });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when the tab value changes */\n @Event() bqChange: EventEmitter<{ target: HTMLBqTabElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkDebounceChange();\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n @Listen('keyup', { target: 'body', passive: true, capture: true })\n onKeyUp(event: KeyboardEvent) {\n const { target } = event;\n if (!isHTMLElement(target, 'bq-tab')) return;\n\n this.makeTabsFocusable();\n }\n\n @Listen('bqClick', { passive: true })\n onBqClick(event: CustomEvent<HTMLBqTabElement>) {\n const { detail: target } = event;\n this.bqTabElements.forEach((bqTabElement) => (bqTabElement.active = bqTabElement === target));\n this.debouncedBqChange({ value: target.tabId, target });\n this.selectTab(target);\n }\n\n @Listen('bqKeyDown', { passive: true })\n async onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n const { target } = event;\n\n // NOTE: ensures the target is an HTML element with the tag name 'bq-tab'\n if (!isHTMLElement(target, 'bq-tab')) return;\n\n const keyActions: { [key: string]: 'forward' | 'backward' } = {\n ArrowDown: 'forward',\n ArrowRight: 'forward',\n ArrowUp: 'backward',\n ArrowLeft: 'backward',\n };\n\n // NOTE: gets the direction based on key pressed\n const direction = keyActions[event.detail.key];\n\n if (!direction) return;\n\n await this.focusTabSibling(target, direction);\n }\n\n @Listen('bqBlur', { capture: true, passive: true })\n onBqBlur() {\n this.restoreTabsFocus();\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 focusTabSibling = async (\n currentTarget: HTMLBqTabElement,\n direction: 'forward' | 'backward',\n ): Promise<void> => {\n let target: HTMLBqTabElement | null = null;\n\n this.bqTabElements.forEach((bqTabElement, index, elements) => {\n bqTabElement.active = false;\n\n if (bqTabElement === currentTarget) {\n target = getNextElement(elements, index, direction);\n }\n });\n\n if (target) {\n await target.vFocus();\n this.selectTab(target);\n }\n };\n\n private makeTabsFocusable = (): void => {\n this.bqTabElements.forEach((bqTabElement) => {\n if (bqTabElement.disabled) return;\n\n /**\n * This is a \"fire and forget\" operation. The callback itself doesn't do anything special\n * with the asynchronous code (doesn't await it or do anything with the result)\n * Details: https://stackoverflow.com/a/63488201\n */\n (async () => {\n await bqTabElement.enableFocus(true);\n })();\n });\n };\n\n private restoreTabsFocus = (): void => {\n this.bqTabElements.forEach((bqTabElement) => {\n if (bqTabElement.disabled || bqTabElement.active) return;\n\n /** @See line #173 */\n (async () => {\n await bqTabElement.enableFocus(false);\n })();\n });\n };\n\n private get bqTabElements(): HTMLBqTabElement[] {\n return Array.from(this.el.querySelectorAll('bq-tab'));\n }\n\n private selectTab = (target: HTMLBqTabElement): void => {\n const { tabId } = target;\n target.active = true;\n this.value = tabId;\n this.debouncedBqChange({ value: tabId, target });\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host class={{ 'inline-block': this.orientation === 'vertical' }}>\n <div\n class={{\n [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} flex is-full`]: true,\n 'no-divider': this.disableDivider,\n }}\n part=\"base\"\n >\n <div\n class={{\n 'bq-tab-group--container flex overflow-x-auto': true,\n 'flex-col': this.orientation !== 'horizontal',\n }}\n role=\"tablist\"\n part=\"tabs\"\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/beeq/bq-tab.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-tab.entry.esm.js","sources":["../../packages/beeq/src/components/tab/scss/bq-tab.scss?tag=bq-tab&encapsulation=shadow","../../packages/beeq/src/components/tab/bq-tab.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Tab styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tab.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-tab {\n @apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed disabled:opacity-60;\n @apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:bg-hover-ui-primary [&:not([disabled])]:hover:text-hover-brand;\n @apply border-0 bg-transparent focus-visible:focus;\n @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n\n &::after {\n @apply absolute z-[1] block bg-brand opacity-0 content-empty -inset-be-1;\n @apply transition-opacity duration-300 ease-linear;\n }\n\n &--horizontal-start,\n &--horizontal-end {\n &::after {\n /**\n * This hack will make the underline larger so it fits till the tab bar edges for the first and last tab button,\n * because the parent container applies some padding to not cut the focus outline style.\n */\n @apply -start-xs3 bs-[2px] is-[calc(100%_+_var(--bq-spacing-xs2))];\n }\n }\n\n &--vertical-start {\n @apply justify-end is-full;\n\n &::after {\n @apply -end-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n }\n }\n\n &--vertical-end {\n @apply justify-start is-full;\n\n &::after {\n @apply -start-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n }\n }\n\n &[aria-selected='true']::after {\n @apply opacity-100;\n }\n\n &--small {\n @apply p-b-[--bq-tab--padding-vertical-small] p-i-[--bq-tab--padding-horizontal-small];\n\n ::slotted(bq-icon) {\n --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};\n }\n }\n\n &--medium {\n @apply p-b-[--bq-tab--padding-vertical-medium] p-i-[--bq-tab--padding-horizontal-medium];\n\n ::slotted(bq-icon) {\n --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};\n }\n }\n\n &--large {\n @apply text-l p-b-[--bq-tab--padding-vertical-large] p-i-[--bq-tab--padding-horizontal-large];\n\n ::slotted(bq-icon) {\n --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};\n }\n }\n}\n","import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from './bq-tab.types';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * The tab is a user interface element that allows users to navigate between different sections of a page.\n * It should be used inside `<bq-tab-group>` component.\n *\n * @example How to use it\n * ```html\n * <bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {boolean} active - If `true` tab is active\n * @attr {string} controls - The tab panel id that the tab controls\n * @attr {boolean} disabled - If `true` tab is disabled\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} tab-id - The id of the tab\n *\n * @event bqClick - Handler to be called when the tab state changes\n * @event bqFocus - Handler to be called when the tab gets focus\n * @event bqBlur - Handler to be called when the tab loses focus\n * @event bqKeyDown - Handler to be called when the tab key is pressed\n *\n * @method vClick - Simulate a click event on the native `<button>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<button>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<button>` HTML element used under the hood\n *\n * @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n *\n * @cssprop --bq-tab--font-size - Font size\n * @cssprop --bq-tab--font-weight - Font weight\n * @cssprop --bq-tab--icon-size-large - Icon size for large tab\n * @cssprop --bq-tab--icon-size-medium - Icon size for medium tab\n * @cssprop --bq-tab--icon-size-small - Icon size for small tab\n * @cssprop --bq-tab--label-icon-gap - Gap between label and icon\n * @cssprop --bq-tab--line-height - Line height\n * @cssprop --bq-tab--padding-horizontal-large - Horizontal padding for large tab\n * @cssprop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab\n * @cssprop --bq-tab--padding-horizontal-small - Horizontal padding for small tab\n * @cssprop --bq-tab--padding-vertical-large - Vertical padding for large tab\n * @cssprop --bq-tab--padding-vertical-medium - Vertical padding for medium tab\n * @cssprop --bq-tab--padding-vertical-small - Vertical padding for small tab\n */\n@Component({\n tag: 'bq-tab',\n styleUrl: './scss/bq-tab.scss',\n shadow: true,\n})\nexport class BqTab {\n // Own Properties\n // ====================\n\n private buttonElement: HTMLButtonElement;\n private iconElement: HTMLSpanElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTabElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() tabIndex: number | null = null;\n @State() hasIcon: boolean = false;\n\n // Public Property API\n // ========================\n\n /** If true tab is active */\n @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n /** The tab panel id that the tab controls */\n @Prop({ reflect: true }) controls!: string;\n\n /** If true tab is disabled */\n @Prop({ reflect: true }) disabled = false;\n\n /** The direction that tab should be render */\n @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n /** The placement that tab should be render */\n @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n /** The size of the tab */\n @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n /** The id of the tab */\n @Prop({ reflect: true }) tabId!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('orientation')\n @Watch('placement')\n checkPropValues() {\n validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Handler to be called when the tab state changes */\n @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n /** Handler to be called when the tab gets focus */\n @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n /** Handler to be called when the tab loses focus */\n @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n /** Handler to be called when the tab key is pressed */\n @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\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.handleIconSlotChange();\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 * Simulate a click event on the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n */\n @Method()\n async vClick() {\n this.buttonElement?.click();\n }\n\n /**\n * Sets focus on the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n */\n @Method()\n async vFocus() {\n this.buttonElement?.focus();\n }\n\n /**\n * Remove focus from the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n */\n @Method()\n async vBlur() {\n this.buttonElement?.blur();\n }\n\n /**\n * @internal Sets tabindex on the native `<button>` HTML element used under the hood.\n * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n */\n @Method()\n async enableFocus(value: boolean) {\n this.tabIndex = value ? 0 : null;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = () => {\n this.active = true;\n this.bqClick.emit(this.el);\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 handleOnKeyDown = (event: KeyboardEvent) => {\n this.bqKeyDown.emit(event);\n };\n\n private handleIconSlotChange = () => {\n this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n };\n\n private get tabindex(): string {\n // NOTE: this.active is undefined when is not part of bq-tab-group\n return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <button\n ref={(el) => (this.buttonElement = el)}\n class={{\n [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n 'text-brand': this.active,\n 'text-primary': !this.active,\n }}\n id={this.tabId}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n disabled={this.disabled}\n role=\"tab\"\n aria-controls={this.controls}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.tabindex}\n part=\"base\"\n >\n <div class=\"flex items-center justify-center\" part=\"content\">\n <div class=\"flex\" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part=\"icon\">\n <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n </div>\n <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n <slot />\n </div>\n </div>\n </button>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,g9xBAAg9xB;;MC6Dp9xB,KAAK,GAAA,MAAA;;;;;;;;;;AAIR,IAAA,aAAa;AACb,IAAA,WAAW;;;;;IAWV,QAAQ,GAAkB,IAAI;IAC9B,OAAO,GAAY,KAAK;;;;AAMO,IAAA,MAAM;;AAGrB,IAAA,QAAQ;;IAGR,QAAQ,GAAG,KAAK;;IAGhB,WAAW,GAAqB,YAAY;;IAG5C,SAAS,GAAmB,OAAO;;IAGnC,IAAI,GAAa,QAAQ;;AAGzB,IAAA,KAAK;;;IAQ9B,eAAe,GAAA;QACb,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;QACtD,iBAAiB,CAAC,eAAe,EAAE,YAAY,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC;QACxE,iBAAiB,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC;;;;;;AAQxD,IAAA,OAAO;;AAGP,IAAA,OAAO;;AAGP,IAAA,MAAM;;AAGN,IAAA,SAAS;;;;IAMlB,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGxB,gBAAgB,GAAA;QACd,IAAI,CAAC,oBAAoB,EAAE;;;;;;;;;;AAY7B;;;AAGG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE;;AAG7B;;;AAGG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE;;AAG7B;;;AAGG;AAEH,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE;;AAG5B;;;AAGG;IAEH,MAAM,WAAW,CAAC,KAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI;;;;;;IAQ1B,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;QAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAC5B,KAAC;IAEO,aAAa,GAAG,MAAK;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAC5B,KAAC;IAEO,YAAY,GAAG,MAAK;QAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3B,KAAC;AAEO,IAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;AACjD,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,KAAC;IAEO,oBAAoB,GAAG,MAAK;QAClC,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;AACzD,KAAC;AAED,IAAA,IAAY,QAAQ,GAAA;;AAElB,QAAA,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE;;;;;IAOvD,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACtC,KAAK,EAAE;AACL,gBAAA,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;gBACnF,YAAY,EAAE,IAAI,CAAC,MAAM;AACzB,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,MAAM;aAC7B,EACD,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,QAAQ,EACb,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EAAA,EAEX,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,SAAS,EAAA,EAC1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,CAAC,IAAqB,MAAM,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,IAAI,EAAC,MAAM,EAAA,EACtF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,EAAA,CAAI,CACzD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,+BAA+B,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EAC9F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACC;;;;;;;;;;;;"}

package/dist/beeq/bq-textarea.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-textarea.entry.esm.js","sources":["../../packages/beeq/src/components/textarea/scss/bq-textarea.scss?tag=bq-textarea&encapsulation=shadow","../../packages/beeq/src/components/textarea/bq-textarea.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Textarea styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-textarea.variables';\n\n:host {\n @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Label */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__label {\n @apply text-[length:--bq-textarea--label-text-size] text-[color:--bq-textarea--label-text-color] m-be-[--bq-textarea--label-margin-bottom];\n}\n\n/* -------------------------------------------------------------------------- */\n/* Native HTML Textarea control */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__input {\n @apply flex-auto resize-y bg-[--bq-textarea--background-color] bs-[inherit];\n // Border\n @apply rounded-[--bq-textarea--border-radius] border-[length:--bq-textarea--border-width] border-[color:--bq-textarea--border-color];\n // Padding\n @apply pe-[--bq-textarea--padding-end] ps-[--bq-textarea--padding-start] p-b-[--bq-textarea--paddingY];\n // Text\n @apply text-[length:--bq-textarea--text-size] text-[color:--bq-textarea--text-color] placeholder:text-[color:--bq-textarea--text-placeholder-color];\n // Transition\n @apply transition-colors ease-in-out;\n // Hover\n @apply [&:not([disabled]):not(:focus-within)]:hover:border-hover-brand;\n // Disabled\n @apply disabled:cursor-not-allowed disabled:opacity-60;\n // Focus\n &:not([disabled]):focus-within {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-textarea--border-color-focus);\n\n @apply focus border-[color:--bq-ring-color-focus];\n }\n}\n\n/* ------------------------------- Validations ------------------------------- */\n\n.bq-textarea__input.validation-error {\n @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(stroke.danger);\n\n @apply border-active-danger;\n }\n}\n\n.bq-textarea__input.validation-success {\n @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(stroke.success);\n\n @apply border-active-success;\n }\n}\n\n.bq-textarea__input.validation-warning {\n @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n &:not(.disabled):focus-within {\n --bq-ring-color-focus: theme(stroke.warning);\n\n @apply border-active-warning;\n }\n}\n\n/* -------------------------------------------------------------------------- */\n/* Helper text */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__helper {\n @apply text-[length:--bq-textarea--helper-text-size] text-[color:--bq-textarea--helper-text-color] m-bs-[--bq-textarea--helper-margin-top];\n}\n\n/* ------------------------------- Validations ------------------------------ */\n\n.bq-textarea__helper.validation-error {\n @apply text-danger;\n}\n\n.bq-textarea__helper.validation-success {\n @apply text-success;\n}\n\n.bq-textarea__helper.validation-warning {\n @apply text-warning;\n}\n\n/* ----------------------------- Helper counter ----------------------------- */\n\n/** Apply a disabled text color style to the textarea counter when the validation is none. */\n.bq-textarea__helper[class~='validation-none'] {\n .bq-textarea__helper--counter {\n @apply opacity-60;\n }\n}\n","import { AttachInternals, Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TTextareaAutoCapitalize, TTextareaWrap } from './bq-textarea.types';\nimport { debounce, hasSlotContent, isHTMLElement, isNil, TDebounce } from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\n/**\n * The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews.\n *\n * @example How to use it\n * ```html\n * <bq-textarea maxlength=\"0\" name=\"textarea\" placeholder=\"Placeholder...\" rows=\"5\">\n * <label slot=\"label\">Label</label>\n * <span class=\"flex items-center gap-xs\" slot=\"helper-text\">\n * <bq-icon name=\"star\"></bq-icon>\n * Helper text\n * </span>\n * </bq-textarea>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/16792c-textarea\n * @status stable\n *\n * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.\n * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.\n * @attr {string} autocorrect - Controls whether or not the textarea field should have autocorrect enabled.\n * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.\n * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n * @attr {boolean} disabled - If `true`, the user cannot interact with the textarea.\n * @attr {boolean} disable-resize - If `true`, it will block the user's ability to resize the textarea.\n * @attr {string} form - The ID of the form that the textarea field belongs to.\n * @attr {string} form-validation-message - The native form validation message.\n * @attr {number} maxlength - The maximum number of characters that can be entered into the textarea (`0`: no limit).\n * @attr {string} name - The name of the textarea element.\n * @attr {string} placeholder - The placeholder text to show when there is no value.\n * @attr {boolean} readonly - If `true`, the textarea field cannot be modified.\n * @attr {boolean} required - Indicates whether or not the textarea field is required to be filled out before submitting the form.\n * @attr {number} rows - The number of visible text lines for the control. It must be a positive integer.\n * @attr {boolean} spellcheck - If `true`, the textarea content may be checked for spelling errors.\n * @attr {\"error\" | \"none\" | \"success\" | \"warning\"} validation-status - The validation status of the textarea.\n * @attr {string} value - The value of the textarea. It can be used to reset the textarea to a previous value.\n * @attr {\"soft\" | \"hard\"} wrap - Specifies how the text in a text area is to be wrapped when submitted in a form.\n *\n * @event bqBlur - Handler to be called when the textarea loses focus.\n * @event bqChange - Handler to be called when the textarea value has changed and the textarea loses focus.\n * @event bqClear - Handler to be called when the textarea value has been cleared.\n * @event bqFocus - Handler to be called when the textarea has received focus.\n * @event bqInput - Handler to be called when the textarea value changes.\n *\n * @slot label - The textarea label.\n * @slot helper-text - The helper text.\n *\n * @part base - The component's base wrapper.\n * @part input - The textarea element.\n * @part label - The textarea label.\n * @part helper-info - The helper info container.\n * @part helper-text - The helper text.\n * @part helper-counter - The helper counter.\n *\n * @cssprop --bq-textarea--background-color - Textarea background color\n * @cssprop --bq-textarea--border-color - Textarea border color\n * @cssprop --bq-textarea--border-color-focus - Textarea border color on focus\n * @cssprop --bq-textarea--border-radius - Textarea border radius\n * @cssprop --bq-textarea--border-width - Textarea border width\n * @cssprop --bq-textarea--border-style - Textarea border style\n * @cssprop --bq-textarea--helper-margin-top - Textarea helper text margin top\n * @cssprop --bq-textarea--helper-text-color - Textarea helper text color\n * @cssprop --bq-textarea--helper-text-size - Textarea helper text size\n * @cssprop --bq-textarea--label-margin-bottom - Textarea label margin bottom\n * @cssprop --bq-textarea--label-text-color - Textarea label text color\n * @cssprop --bq-textarea--label-text-size - Textarea label text size\n * @cssprop --bq-textarea--paddingY - Textarea padding top and bottom\n * @cssprop --bq-textarea--padding-start - Textarea padding start\n * @cssprop --bq-textarea--padding-end - Textarea padding end\n * @cssprop --bq-textarea--text-color - Textarea text color\n * @cssprop --bq-textarea--text-size - Textarea text size\n * @cssprop --bq-textarea--text-placeholder-color - Textarea placeholder text color\n */\n@Component({\n tag: 'bq-textarea',\n styleUrl: './scss/bq-textarea.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqTextarea {\n // Own Properties\n // ====================\n\n private debounceBqInput: TDebounce<void>;\n private fallbackId = 'textarea';\n\n private helperTextElem?: HTMLElement;\n private labelElem?: HTMLLabelElement;\n private textarea: HTMLTextAreaElement;\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqTextareaElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasHelperText = false;\n @State() private hasLabel = false;\n\n // Public Property API\n // ========================\n\n /**\n * Controls whether or not the textarea field should be capitalized and how.\n * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n */\n @Prop({ reflect: true }) autocapitalize: TTextareaAutoCapitalize = 'off';\n\n /**\n * Specifies whether or not the textarea field should have autocomplete enabled.\n * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n */\n @Prop({ reflect: true }) autocomplete: string = 'off';\n\n /**\n * Controls whether or not the textarea field should have autocorrect enabled.\n * Possible values are 'on' and 'off'.\n */\n @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n /** If true, the textarea will be focused on component render */\n @Prop({ reflect: true }) autofocus: boolean;\n\n /**\n * If `true`, the textarea will automatically grow and shrink to fit its contents.\n * If `false`, the textarea will have a fixed height specified by the `rows` property.\n */\n @Prop({ reflect: true }) autoGrow: boolean = false;\n\n /**\n * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n * A value of 0 means no debouncing will occur.\n */\n @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n /** If `true`, the user cannot interact with the textarea. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** If `true`, it will block the user's ability to resize the textarea. */\n @Prop({ reflect: true }) disableResize?: boolean = false;\n\n /** The ID of the form that the textarea field belongs to. */\n @Prop({ reflect: true }) form?: string;\n\n /** The native form validation message */\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /**\n * The maximum number of characters that can be entered into the textarea (`0`: no limit).\n * When enabled, a character counter will be shown underneath the textarea.\n */\n @Prop({ reflect: true }) maxlength: number;\n\n /** The name of the textarea element. */\n @Prop({ reflect: true }) name!: string;\n\n /** The placeholder text to show when there is no value. */\n @Prop({ reflect: true }) placeholder!: string;\n\n /** If true, the textarea field cannot be modified. */\n @Prop({ reflect: true }) readonly?: boolean = false;\n\n /** Indicates whether or not the textarea field is required to be filled out before submitting the form. */\n @Prop({ reflect: true }) required?: boolean = false;\n\n /** The number of visible text lines for the control. It must be a positive integer. */\n @Prop({ reflect: true }) rows: number = 5;\n\n /** If true, the textarea content may be checked for spelling errors. */\n @Prop({ reflect: true }) spellcheck: boolean = false;\n /**\n * The validation status of the textarea.\n *\n * @remarks\n * This property is used to indicate the validation status of the textarea. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The textarea has a validation error.\n * - `'warning'`: The textarea has a validation warning.\n * - `'success'`: The textarea has passed validation.\n */\n @Prop({ reflect: true, mutable: true }) validationStatus: TInputValidation = 'none';\n\n /** The value of the textarea. It can be used to reset the textarea to a previous value. */\n @Prop({ mutable: true }) value: string;\n\n /** Specifies how the text in a text area is to be wrapped when submitted in a form */\n @Prop({ reflect: true }) wrap: TTextareaWrap = 'soft';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n if (!this.textarea) return;\n if (!this.maxlength || this.value?.length < this.maxlength) return;\n // If the value is longer than the maxlength, we need to truncate it\n this.value = this.value?.substring(0, this.maxlength);\n this.textarea.value = this.value ?? '';\n }\n\n @Watch('required')\n handleRequiredPropChange() {\n this.updateFormValidity();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler emitted when the textarea loses focus */\n @Event() bqBlur!: EventEmitter<HTMLBqTextareaElement>;\n\n /**\n * Callback handler emitted when the textarea value has changed and the textarea loses focus.\n * This handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n */\n @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n /** Callback handler emitted when the textarea value has been cleared */\n @Event() bqClear!: EventEmitter<HTMLBqTextareaElement>;\n\n /** Callback handler emitted when the textarea has received focus */\n @Event() bqFocus!: EventEmitter<HTMLBqTextareaElement>;\n\n /**\n * Callback handler emitted when the textarea value changes.\n * This handler is called whenever the user types or pastes text into the textarea field.\n */\n @Event() bqInput!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.handleSlotChange();\n this.handleValueChange();\n }\n\n formAssociatedCallback() {\n this.setFormValue(this.value);\n this.updateFormValidity();\n }\n\n formResetCallback() {\n this.clearSelection();\n // Reset the form validity state\n this.setFormValue();\n this.updateFormValidity();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get numberOfCharacters() {\n if (!this.maxlength || !this.textarea) return 0;\n\n return this.value?.length;\n }\n\n private handleBlur = () => {\n if (this.disabled) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleChange = (ev: Event) => {\n if (this.disabled) return;\n\n if (!isHTMLElement(ev.target, 'textarea')) return;\n this.value = ev.target.value;\n this.setFormValue(this.value);\n this.updateFormValidity();\n\n this.bqChange.emit({ value: this.value, el: this.el });\n };\n\n private handleInput = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceBqInput?.cancel();\n\n if (!isHTMLElement(ev.target, 'textarea')) return;\n this.value = ev.target.value;\n\n this.debounceBqInput = debounce(() => {\n this.bqInput.emit({ value: this.value, el: this.el });\n }, this.debounceTime);\n this.debounceBqInput();\n\n this.autoResize();\n };\n\n private autoResize = () => {\n if (!this.autoGrow) return;\n\n const inputElem = this.textarea;\n if (!inputElem) return;\n\n inputElem.style.height = 'auto';\n inputElem.style.height = `${inputElem.scrollHeight}px`;\n };\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n this.hasHelperText = hasSlotContent(this.helperTextElem);\n };\n\n private setFormValue = (value?: string) => {\n this.internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n };\n\n private updateFormValidity = () => {\n const { formValidationMessage, internals, required, value, textarea } = this;\n\n // Clear the validity state\n internals?.states.clear();\n\n if (required && (!value || value.trim() === '')) {\n // Set validity state to invalid\n internals?.states.add('invalid');\n internals?.setValidity({ valueMissing: true }, formValidationMessage, textarea);\n return;\n }\n\n // Set validity state to valid if textarea has value or is not required\n internals?.states.add('valid');\n internals?.setValidity({});\n };\n\n private clearSelection = () => {\n this.value = '';\n this.textarea.value = this.value;\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-textarea flex flex-auto flex-col\" part=\"base\">\n <label\n class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}\n htmlFor={this.name ?? this.fallbackId}\n aria-label={this.name ?? this.fallbackId}\n ref={(label: HTMLLabelElement) => (this.labelElem = label)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n </label>\n <textarea\n id={this.name ?? this.fallbackId}\n class={{\n 'bq-textarea__input': true,\n 'resize-none': this.disableResize,\n [`validation-${this.validationStatus}`]: true,\n }}\n autocapitalize={this.autocapitalize}\n autocomplete={this.autocomplete}\n autocorrect={this.autocorrect}\n autofocus={this.autofocus}\n disabled={this.disabled}\n form={this.form}\n maxLength={this.maxlength > 0 ? this.maxlength : undefined}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n spellcheck={this.spellcheck}\n wrap={this.wrap}\n ref={(elem: HTMLTextAreaElement) => (this.textarea = elem)}\n onBlur={this.handleBlur}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onInput={this.handleInput}\n part=\"input\"\n >\n {this.value}\n </textarea>\n <div\n class={{\n 'bq-textarea__helper flex items-center justify-between': true,\n [`validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText && !this.maxlength,\n }}\n part=\"helper-info\"\n >\n <span\n class=\"bq-textarea__helper--text\"\n ref={(span: HTMLElement) => (this.helperTextElem = span)}\n part=\"helper-text\"\n >\n <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n </span>\n <span\n class={{ 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }}\n part=\"helper-counter\"\n >\n {this.numberOfCharacters ?? 0}/{this.maxlength}\n </span>\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/beeq/bq-toast.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-toast.entry.esm.js","sources":["../../packages/beeq/src/components/toast/bq-toast.types.ts","../../packages/beeq/src/components/toast/scss/bq-toast.scss?tag=bq-toast&encapsulation=shadow","../../packages/beeq/src/components/toast/bq-toast.tsx"],"sourcesContent":["export const TOAST_TYPE = ['info', 'success', 'alert', 'error', 'loading', 'custom'] as const;\nexport type TToastType = (typeof TOAST_TYPE)[number];\n\nexport const TOAST_PLACEMENT = [\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left',\n 'top-left',\n] as const;\nexport type TToastPlacement = (typeof TOAST_PLACEMENT)[number];\n\nexport const TOAST_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TToastBorderRadius = (typeof TOAST_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/* Toast styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-toast.variables';\n\n:host {\n @apply inline-block;\n}\n\n:host(.is-hidden) {\n @apply hidden;\n}\n\n.bq-toast {\n @include animation-slide-in;\n @apply flex items-center gap-[--bq-toast--gap] p-b-[--bq-toast--padding-y] p-i-[--bq-toast--padding-x];\n @apply rounded-[--bq-toast--border-radius] bg-[--bq-toast--background] shadow-[shadow:--bq-toast--box-shadow];\n @apply border-[length:--bq-toast--border-width] border-[color:--bq-toast--border-color];\n\n border-style: var(--bq-toast--border-style);\n}\n\n.bq-toast--icon {\n @apply flex;\n\n &.info {\n @apply text-[--bq-toast--icon-color-info];\n }\n\n &.success {\n @apply text-[--bq-toast--icon-color-success];\n }\n\n &.alert {\n @apply text-[--bq-toast--icon-color-alert];\n }\n\n &.error {\n @apply text-[--bq-toast--icon-color-error];\n }\n\n &.loading {\n @include animation-spin;\n @apply text-[--bq-toast--icon-color-loading];\n }\n\n &.custom {\n @apply text-[--bq-toast--icon-color-custom];\n }\n}\n","import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { TOAST_PLACEMENT, TOAST_TYPE } from './bq-toast.types';\nimport type { TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.types';\nimport { debounce, isClient, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst TOAST_PORTAL_SELECTOR = 'bq-toast-portal';\n\n/**\n * Toasts are time-based components used to display short messages.\n * Commonly used for errors, confirmations, or progress updates.\n *\n * @example How to use it\n * ```html\n * <bq-toast type=\"info\">\n * This is a message\n * </bq-toast>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/83da51-toast\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {\"s\" | \"none\" | \"xs2\" | \"xs\" | \"m\" | \"l\" | \"full\"} border - The corder radius of the toast component\n * @attr {\"success\" | \"error\" | \"loading\" | \"alert\" | \"info\"} type - Type of toast\n * @attr {\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"} placement - Placement of toast\n * @attr {boolean} hide-icon - If true will hide toast icon\n * @attr {boolean} open - If true, the toast will be shown\n * @attr {number} time - The length of time, in milliseconds, after which the toast will close itself\n *\n * @method show - Method to be called to show the toast component\n * @method hide - Method to be called to hide the toast component\n * @method toast - This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically\n *\n * @event bqHide - Callback handler to be called when the notification is hidden\n * @event bqShow - Callback handler to be called when the notification is shown\n *\n * @slot - The content to be displayed in the toast component.\n * @slot icon - The icon to be displayed in the toast component.\n *\n * @part wrapper - The component's internal wrapper inside the shadow DOM.\n * @part icon-info - The `<div>` container that holds the icon component.\n * @part base - The `<div>` container of the internal bq-icon component.\n * @part svg - The `<svg>` element of the internal bq-icon component.\n *\n * @cssprop --bq-toast--background - Toast background color\n * @cssprop --bq-toast--box-shadow - Toast box shadow\n * @cssprop --bq-toast--padding-y - Toast vertical padding\n * @cssprop --bq-toast--padding-x - Toast horizontal padding\n * @cssprop --bq-toast--gap - Toast distance between icon and text\n * @cssprop --bq-toast--border-radius - Toast border radius\n * @cssprop --bq-toast--border-color - Toast border color\n * @cssprop --bq-toast--border-style - Toast border style\n * @cssprop --bq-toast--border-width - Toast border width\n * @cssprop --bq-toast--icon-color-info - Toast icon color when type is 'info'\n * @cssprop --bq-toast--icon-color-success - Toast icon color when type is 'success'\n * @cssprop --bq-toast--icon-color-alert - Toast icon color when type is 'alert'\n * @cssprop --bq-toast--icon-color-error - Toast icon color when type is 'error'\n * @cssprop --bq-toast--icon-color-loading - Toast icon color when type is 'loading'\n * @cssprop --bq-toast--icon-color-custom - Toast icon color when type is 'custom'\n */\n@Component({\n tag: 'bq-toast',\n styleUrl: './scss/bq-toast.scss',\n shadow: true,\n})\nexport class BqToast {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqToastElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private toastPortal = isClient() ? document.querySelector(`.${TOAST_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /** The corder radius of the toast component */\n @Prop({ reflect: true }) border: TToastBorderRadius = 's';\n\n /** Type of toast */\n @Prop({ reflect: true, mutable: true }) type: TToastType = 'info';\n\n /** Placement of toast */\n @Prop({ reflect: true, mutable: true }) placement: TToastPlacement = 'bottom-center';\n\n /** If true will hide toast icon */\n @Prop({ reflect: true, mutable: true }) hideIcon = false;\n\n /** If true, the toast will be shown */\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /** The length of time, in milliseconds, after which the toast will close itself */\n @Prop({ reflect: true }) time: number = 3000;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n @Watch('placement')\n checkPropValues() {\n validatePropValue(TOAST_TYPE, 'default', this.el, 'type');\n validatePropValue(TOAST_PLACEMENT, 'bottom-center', this.el, 'placement');\n\n const { toastPortal } = this;\n toastPortal?.classList.remove(...TOAST_PLACEMENT);\n toastPortal?.classList.add(this.placement);\n }\n\n @Watch('time')\n handleTimeChange() {\n this.autoDismissDebounce?.cancel();\n\n this.time = Math.max(0, this.time);\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (this.open) {\n this.autoDismissDebounce?.();\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /** Callback handler to be called when the notification is hidden */\n @Event() bqHide: EventEmitter<HTMLBqToastElement>;\n\n /** Callback handler to be called when the notification is shown */\n @Event() bqShow: EventEmitter<HTMLBqToastElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (!isClient()) return;\n\n const { toastPortal } = this;\n if (!toastPortal) {\n this.toastPortal = Object.assign(document.createElement('div'), { className: TOAST_PORTAL_SELECTOR });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeChange();\n this.handleOpenChange();\n }\n\n disconnectedCallback() {\n this.autoDismissDebounce?.cancel();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqHide')\n onNotificationHide() {\n try {\n const { toastPortal } = this;\n toastPortal?.removeChild(this.el);\n // Remove the toast portal from the DOM when there are no more toasts\n if (toastPortal?.querySelector(this.el.tagName.toLowerCase()) === null) {\n toastPortal?.remove();\n }\n } catch (error) {\n /**\n * Skip DOMException error since it could be possible that\n * in some situations the notification portal is missing\n */\n if (error instanceof DOMException) return;\n throw error;\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /** Method to be called to show the toast component */\n @Method()\n async show(): Promise<void> {\n this.handleShow();\n }\n\n /** Method to be called to hide the toast component */\n @Method()\n async hide(): Promise<void> {\n this.handleHide();\n }\n\n /** This method can be used to display toasts in a fixed-position element that allows for stacking multiple toasts vertically */\n @Method()\n async toast() {\n if (!isClient()) return;\n\n const { toastPortal } = this;\n if (toastPortal?.parentElement === null) {\n document.body.append(toastPortal);\n }\n\n toastPortal?.appendChild(this.el);\n\n requestAnimationFrame(() => {\n this.show();\n });\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleShow = () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n }\n };\n\n private handleHide = () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = false;\n }\n };\n\n private get iconName() {\n const typeMap = {\n success: 'check-circle-bold',\n error: 'x-circle-bold',\n loading: 'spinner-gap-bold',\n alert: 'warning-bold',\n info: 'info-bold',\n };\n\n return typeMap[this.type] || 'info-bold';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n style={style}\n class={{ 'is-hidden': !this.open }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"status\"\n >\n <output class=\"bq-toast\" part=\"wrapper\">\n <div class={{ [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }} part=\"icon\">\n <slot name=\"icon\">\n <bq-icon name={this.iconName} size=\"24\" slot=\"icon\" exportparts=\"base,svg\" />\n </slot>\n </div>\n <slot />\n </output>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/beeq/bq-tooltip.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bq-tooltip.entry.esm.js","sources":["../../packages/beeq/src/components/tooltip/scss/bq-tooltip.scss?tag=bq-tooltip&encapsulation=shadow","../../packages/beeq/src/components/tooltip/bq-tooltip.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/* Tooltip styles */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tooltip.variables';\n\n.bq-tooltip--panel {\n @include animation-fade-in;\n @apply pointer-events-none fixed z-[--bq-tooltip--z-index] box-border bg-[--bq-tooltip--background-color];\n @apply is-[--bq-tooltip--width] max-is-[--bq-tooltip--max-width] p-b-[--bq-tooltip--paddingY] p-i-[--bq-tooltip--paddingX];\n @apply text-[length:--bq-tooltip--font-size] leading-[--bq-tooltip--line-height] text-[color:--bq-tooltip--text-color];\n @apply rounded-[--bq-tooltip--border-radius] border-[length:--bq-tooltip--border-width] border-[color:--bq-tooltip--border-color];\n @apply shadow-[shadow:--bq-tooltip--box-shadow];\n}\n\n.bq-tooltip--arrow {\n &,\n &::before {\n @apply absolute -z-[1] bs-2 is-2;\n }\n\n &::before {\n @apply start-0 rotate-45 bg-[--bq-tooltip--background-color] content-empty inset-bs-0;\n }\n}\n","import { Component, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\n\n/**\n * The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.\n *\n * @example How to use it\n * ```html\n * <bq-tooltip visible>\n * Yuhu! I'm a tooltip 🙃\n * <bq-button slot=\"trigger\">Hover me!</bq-button>\n * </bq-tooltip>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/64c562-tooltip\n * @status stable\n *\n * @attr {boolean} always-visible - If true, the tooltip will always be visible\n * @attr {number} distance - Distance between trigger element and tooltip\n * @attr {boolean} hide-arrow - If true, the arrow on the tooltip content won't be shown\n * @attr {\"top\" | \"right\" | \"bottom\" | \"left\"} placement - Defines the position of the tooltip\n * @attr {boolean} same-width - Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element)\n * @attr {\"click\" | \"hover\"} display-on - Set the action when the tooltip should be displayed, on hover (default) or click\n * @attr {boolean} visible - Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger\n *\n * @method show - Shows the tooltip\n * @method hide - Hides the tooltip\n *\n * @slot trigger - The element which displays tooltip on hover\n * @slot - The tooltip content\n *\n * @part base - The component wrapper container inside the shadow DOM\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover\n * @part panel - The `<div>` container that holds the tooltip content\n *\n * @cssprop --bq-tooltip--background-color - Tooltip background color\n * @cssprop --bq-tooltip--box-shadow - Tooltip box shadow\n * @cssprop --bq-tooltip--font-size - Tooltip font size\n * @cssprop --bq-tooltip--line-height - Tooltip line height\n * @cssprop --bq-tooltip--text-color - Tooltip text color\n * @cssprop --bq-tooltip--paddingX - Tooltip horizontal padding\n * @cssprop --bq-tooltip--paddingY - Tooltip vertical padding\n * @cssprop --bq-tooltip--border-color - Tooltip border color\n * @cssprop --bq-tooltip--border-radius - Tooltip border radius\n * @cssprop --bq-tooltip--border-style - Tooltip border style\n * @cssprop --bq-tooltip--border-width - Tooltip border width\n * @cssprop --bq-tooltip--z-index: Tooltip z-index\n */\n@Component({\n tag: 'bq-tooltip',\n styleUrl: './scss/bq-tooltip.scss',\n shadow: true,\n})\nexport class BqTooltip {\n // Own Properties\n // ====================\n private trigger: HTMLElement;\n private panel: HTMLElement;\n private arrow: HTMLElement;\n private floatingUI: FloatingUI;\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqTooltipElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /** If true, the tooltip will always be visible */\n @Prop() alwaysVisible?: boolean = false;\n\n /** Distance between trigger element and tooltip */\n @Prop({ reflect: true }) distance?: number = 10;\n\n /** If true, the arrow on the tooltip content won't be shown */\n @Prop({ reflect: true }) hideArrow?: boolean = false;\n\n /* Defines the position of the tooltip */\n @Prop({ reflect: true }) placement?: Placement = 'top';\n\n /** Whether the tooltip should have the same width as the trigger element\n * (applicable only for content shorter than the trigger element) */\n @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n /** Set the action when the tooltip should be displayed, on hover (default) or click */\n @Prop({ reflect: true }) displayOn: 'click' | 'hover' = 'hover';\n\n /**\n * Indicates whether or not the tooltip is visible when the component is first rendered,\n * and when interacting with the trigger\n */\n @Prop({ reflect: true, mutable: true }) visible? = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('visible')\n async handleVisibleChange() {\n if (!this.visible && !this.alwaysVisible) {\n return await this.hide();\n }\n\n await this.show();\n }\n\n @Watch('distance')\n @Watch('hideArrow')\n @Watch('placement')\n @Watch('sameWidth')\n handleFloatingUIOptionsChange() {\n this.floatingUI.init({\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n });\n }\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.floatingUI = new FloatingUI(this.trigger, this.panel, {\n ...(!this.hideArrow && { arrow: this.arrow }),\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n skidding: 0,\n });\n }\n\n disconnectedCallback() {\n this.floatingUI?.destroy();\n }\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'document' })\n async handleDocumentMouseDown(event: MouseEvent) {\n // Close when clicking outside of the close element\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n await this.hide();\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /** Shows the tooltip */\n @Method()\n async show() {\n this.visible = true;\n this.showTooltip();\n }\n\n /** Hides the tooltip */\n @Method()\n async hide() {\n if (this.alwaysVisible) return;\n\n this.visible = false;\n this.hideTooltip();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleTriggerMouseOver = () => {\n (async () => {\n if (this.displayOn !== 'hover') return;\n await this.show();\n })();\n };\n\n private handleTriggerMouseLeave = () => {\n (async () => {\n if (this.displayOn !== 'hover') return;\n await this.hide();\n })();\n };\n\n private handleTriggerOnClick = () => {\n (async () => {\n if (this.displayOn !== 'click') return;\n await (this.visible ? this.hide() : this.show());\n })();\n };\n\n private showTooltip = () => {\n if (!this.panel) return;\n this.floatingUI?.update();\n };\n\n private hideTooltip = () => {\n if (!this.panel) return;\n this.visible = false;\n };\n\n private get isHidden() {\n return !this.visible && !this.alwaysVisible;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-tooltip relative\" part=\"base\">\n {/* TRIGGER */}\n <div\n class=\"bq-tooltip--trigger\"\n onMouseOver={this.handleTriggerMouseOver}\n onMouseLeave={this.handleTriggerMouseLeave}\n onClick={this.handleTriggerOnClick}\n ref={(el) => (this.trigger = el)}\n part=\"trigger\"\n >\n <slot name=\"trigger\" />\n </div>\n {/* PANEL */}\n <div\n class=\"bq-tooltip--panel\"\n aria-hidden={this.isHidden}\n hidden={this.isHidden}\n role=\"tooltip\"\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n >\n {!this.hideArrow && <div class=\"bq-tooltip--arrow\" ref={(el) => (this.arrow = el)} />}\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,s4sBAAs4sB;;MCuD94sB,SAAS,GAAA,MAAA;;;;;;AAGZ,IAAA,OAAO;AACP,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,UAAU;;;;;;;;IAcV,aAAa,GAAa,KAAK;;IAGd,QAAQ,GAAY,EAAE;;IAGtB,SAAS,GAAa,KAAK;;IAG3B,SAAS,GAAe,KAAK;AAEtD;AACoE;IAC3C,SAAS,GAAa,KAAK;;IAG3B,SAAS,GAAsB,OAAO;AAE/D;;;AAGG;IACqC,OAAO,GAAI,KAAK;;;AAMxD,IAAA,MAAM,mBAAmB,GAAA;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACxC,YAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE;;AAG1B,QAAA,MAAM,IAAI,CAAC,IAAI,EAAE;;IAOnB,6BAA6B,GAAA;AAC3B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,OAAO;AAClB,SAAA,CAAC;;;;;;;;IAUJ,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE;AACzD,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7C,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,QAAQ,EAAE,CAAC;AACZ,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE;;;;IAM5B,MAAM,uBAAuB,CAAC,KAAiB,EAAA;;AAE7C,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AAC3B,YAAA,MAAM,IAAI,CAAC,IAAI,EAAE;;;;;;;;;;AAarB,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACnB,IAAI,CAAC,WAAW,EAAE;;;AAKpB,IAAA,MAAM,IAAI,GAAA;QACR,IAAI,IAAI,CAAC,aAAa;YAAE;AAExB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACpB,IAAI,CAAC,WAAW,EAAE;;;;;;IAQZ,sBAAsB,GAAG,MAAK;QACpC,CAAC,YAAW;AACV,YAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO;gBAAE;AAChC,YAAA,MAAM,IAAI,CAAC,IAAI,EAAE;SAClB,GAAG;AACN,KAAC;IAEO,uBAAuB,GAAG,MAAK;QACrC,CAAC,YAAW;AACV,YAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO;gBAAE;AAChC,YAAA,MAAM,IAAI,CAAC,IAAI,EAAE;SAClB,GAAG;AACN,KAAC;IAEO,oBAAoB,GAAG,MAAK;QAClC,CAAC,YAAW;AACV,YAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO;gBAAE;AAChC,YAAA,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;SACjD,GAAG;AACN,KAAC;IAEO,WAAW,GAAG,MAAK;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AACjB,QAAA,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE;AAC3B,KAAC;IAEO,WAAW,GAAG,MAAK;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AACjB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACtB,KAAC;AAED,IAAA,IAAY,QAAQ,GAAA;QAClB,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa;;;;;IAO7C,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EAAA,EAE1C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,YAAY,EAAE,IAAI,CAAC,uBAAuB,EAC1C,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,IAAI,EAAC,SAAS,EAAA,EAEd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,mBAAmB,EAAA,aAAA,EACZ,IAAI,CAAC,QAAQ,EAC1B,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEX,CAAC,IAAI,CAAC,SAAS,IAAI,4DAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAI,CAAA,EACrF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;"}

package/dist/beeq/index.esm.js CHANGED Viewed

@@ -2,5 +2,5 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-export{g as getBasePath,s as setBasePath}from"./p-a035d288.js";export{c as clamp}from"./p-1f3a4359.js";export{a as getCSSVariableValue,g as getColorCSSVariable}from"./p-c3a0bd23.js";export{d as debounce,s as setRafTimeout}from"./p-1defeea3.js";export{i as isEventTargetChildOfElement}from"./p-1c8b6eb4.js";export{g as getNextElement}from"./p-115ed5b2.js";export{i as isClient}from"./p-07b82e50.js";import{i as r}from"./p-9ecdbeec.js";export{i as isDefined}from"./p-9ecdbeec.js";import"./p-c05c50bf.js";import{i as o}from"./p-99829fc7.js";export{i as isNil}from"./p-99829fc7.js";export{i as isHTMLElement}from"./p-57621be1.js";export{i as isString}from"./p-ecd27cf2.js";export{v as validatePropValue}from"./p-687da041.js";export{g as getInnerHTML,a as getTextContent,h as hasSlot,b as hasSlotContent}from"./p-260d4ca0.js";export{e as enter,l as leave,t as toggle}from"./p-a5dc1c94.js";const p=(e,t)=>{let s=e.length;const a=new Array(t);const r=new Array(s);if(t>s)throw new RangeError("getRandom: more elements taken than available");while(t--){const o=Date.now()%s;a[t]=e[o in r?r[o]:o];r[o]=--s in r?r[s]:s}return a};const n=e=>{if(o(e)){return true}else if("size"in e){return!r(e.size)}else{return!r(Object.values(e).length)}};export{p as getRandomFromArray,n as isEmpty};
+export{g as getBasePath,s as setBasePath}from"./p-DG51kDIQ.js";export{c as clamp}from"./p-Cau9SvT4.js";export{a as getCSSVariableValue,g as getColorCSSVariable}from"./p-_RvVpeh2.js";export{d as debounce,s as setRafTimeout}from"./p-D9ofIraD.js";export{i as isEventTargetChildOfElement}from"./p-Dx-CEPSQ.js";export{g as getNextElement}from"./p-4iHDua0i.js";export{i as isClient}from"./p-B4sM1t6Z.js";import{i as r}from"./p-Ci39rxuU.js";import{i as o}from"./p-BcPwGxIn.js";export{i as isHTMLElement}from"./p-BxgDLPzX.js";export{i as isString}from"./p-CVMdKx0v.js";export{v as validatePropValue}from"./p-zh4P02Kn.js";export{g as getInnerHTML,a as getTextContent,h as hasSlot,b as hasSlotContent}from"./p-uqkxeAeG.js";export{s as stringToArray}from"./p-BO2RoztC.js";export{e as enter,l as leave,t as toggle}from"./p-DdvbF5yL.js";const n=(e,t)=>{let r=e.length;const s=new Array(t);const a=new Array(r);if(t>r)throw new RangeError("getRandom: more elements taken than available");while(t--){const o=Date.now()%r;s[t]=e[o in a?a[o]:o];a[o]=--r in a?a[r]:r}return s};const p=e=>{if(o(e)){return true}else if("size"in e){return!r(e.size)}else{return!r(Object.values(e).length)}};export{n as getRandomFromArray,r as isDefined,p as isEmpty,o as isNil};
 //# sourceMappingURL=index.esm.js.map

package/dist/beeq/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names~~":["~~getRandomFromArray~~","~~arr","n","length","result","Array","taken","RangeError","x","Date","now","isEmpty","value","isNil","isDefined","size","Object","values"],"~~sources":["../../packages/beeq/src/shared/utils/getRandom.ts","../../packages/beeq/src/shared/utils/isEmpty.ts"],"sourcesContent":["/*\n Get a number of randoms items from Array\n \n @param {Array} arr - The array where to look\n * @param {Number} n - The number of random items to take\n * @returns {Array} An array with the number of random items specified\n /\nexport const getRandomFromArray = <T>(arr: T[], n: number): T[] => {\n let length = arr.length;\n const result = new Array(n);\n const taken = new Array(length);\n\n if (n > length) throw new RangeError('getRandom: more elements taken than available');\n\n while (n--) {\n const x = Date.now() % length;\n result[n] = arr[x in taken ? taken[x] : x];\n taken[x] = --length in taken ? taken[length] : length;\n }\n return result;\n};\n","import { isDefined, isNil } from '.';\n\ntype TCollection = Map<unknown, unknown> \| Array<unknown> \| Record<string, unknown> \| Set<unknown> \| null \| undefined;\n\n/\n Check if the value is an empty array, object, set, map\n * @param value the value to be checked\n * @returns {boolean} true if value is empty\n */\nexport const isEmpty = <T extends TCollection>(value: T): boolean => {\n if (isNil(value)) {\n return true;\n } else if ('size' in value) {\n return !isDefined(value.size);\n } else {\n return !isDefined(Object.values(value).length);\n }\n};\n"],"mappings":"~~;;;;03BAOaA~~,~~EAAqB~~,~~CAAIC~~,~~EAAUC~~,~~KAC9C~~,~~IAAIC~~,~~EAASF~~,~~EAAIE~~,~~OACjB~~,~~MAAMC~~,~~EAAS~~,~~IAAIC~~,~~MAAMH~~,~~GACzB~~,~~MAAMI~~,~~EAAQ~~,~~IAAID~~,~~MAAMF~~,~~GAExB~~,~~GAAID~~,~~EAAIC~~,~~EAAQ~~,MAAM,~~IAAII~~,~~WAAW~~,~~iDAErC~~,~~MAAOL~~,~~IAAK~~,~~CACV~~,~~MAAMM~~,~~EAAIC~~,~~KAAKC~~,~~MAAQP~~,~~EACvBC~~,~~EAAOF~~,~~GAAKD~~,~~EAAIO~~,~~KAAKF~~,~~EAAQA~~,~~EAAME~~,~~GAAKA~~,~~GACxCF~~,~~EAAME~~,~~KAAOL~~,~~KAAUG~~,~~EAAQA~~,~~EAAMH~~,~~GAAUA~~,C,~~CAEjD~~,~~OAAOC~~,~~CAAM~~,E,~~MCVFO~~,~~EAAkCC~~,~~IAC7C~~,~~GAAIC~~,~~EAAMD~~,~~GAAQ~~,~~CAChB~~,OAAO,I,~~MACF~~,~~GAAI~~,~~SAAUA~~,~~EAAO~~,~~CAC1B~~,~~OAAQE~~,~~EAAUF~~,~~EAAMG~~,K,~~KACnB~~,~~CACL~~,~~OAAQD~~,~~EAAUE~~,~~OAAOC~~,~~OAAOL~~,~~GAAOT~~,O","~~ignoreList":[]~~}
1	+ {"version":3,"file":"index.esm.js","sources":["../../packages/beeq/src/shared/utils/getRandom.ts","../../packages/beeq/src/shared/utils/isEmpty.ts"],"sourcesContent":["/*\n Get a number of randoms items from Array\n \n @param {Array} arr - The array where to look\n * @param {Number} n - The number of random items to take\n * @returns {Array} An array with the number of random items specified\n /\nexport const getRandomFromArray = <T>(arr: T[], n: number): T[] => {\n let length = arr.length;\n const result = new Array(n);\n const taken = new Array(length);\n\n if (n > length) throw new RangeError('getRandom: more elements taken than available');\n\n while (n--) {\n const x = Date.now() % length;\n result[n] = arr[x in taken ? taken[x] : x];\n taken[x] = --length in taken ? taken[length] : length;\n }\n return result;\n};\n","import { isDefined, isNil } from '.';\n\ntype TCollection = Map<unknown, unknown> \| Array<unknown> \| Record<string, unknown> \| Set<unknown> \| null \| undefined;\n\n/\n Check if the value is an empty array, object, set, map\n * @param value the value to be checked\n * @returns {boolean} true if value is empty\n */\nexport const isEmpty = <T extends TCollection>(value: T): boolean => {\n if (isNil(value)) {\n return true;\n } else if ('size' in value) {\n return !isDefined(value.size);\n } else {\n return !isDefined(Object.values(value).length);\n }\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;AAMG;MACU,kBAAkB,GAAG,CAAI,GAAQ,EAAE,CAAS,KAAS;AAChE,IAAA,IAAI,MAAM,GAAG,GAAG,CAAC,MAAM;AACvB,IAAA,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC;AAC3B,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC;IAE/B,IAAI,CAAC,GAAG,MAAM;AAAE,QAAA,MAAM,IAAI,UAAU,CAAC,+CAA+C,CAAC;IAErF,OAAO,CAAC,EAAE,EAAE;QACV,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM;QAC7B,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1C,QAAA,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM;;AAEvD,IAAA,OAAO,MAAM;AACf;;AChBA;;;;AAIG;AACU,MAAA,OAAO,GAAG,CAAwB,KAAQ,KAAa;AAClE,IAAA,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE;AAChB,QAAA,OAAO,IAAI;;AACN,SAAA,IAAI,MAAM,IAAI,KAAK,EAAE;AAC1B,QAAA,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;;SACxB;AACL,QAAA,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;;AAElD;;;;"}

package/dist/beeq/loader.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"loader.esm.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n if (typeof window === 'undefined') return undefined;\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":[],"mappings":";;;;;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;"}