npm - @beeq/core - Versions diffs - 1.10.0-beta.3 → 1.10.0-beta.4 - Mend

@beeq/core 1.10.0-beta.3 → 1.10.0-beta.4

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

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

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

package/dist/beeq/bq-radio-group.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-radio-group.entry.esm.js","sources":["../../packages/beeq/src/components/radio-group/bq-radio-group.types.ts","../../packages/beeq/src/components/radio-group/scss/bq-radio-group.scss?tag=bq-radio-group&encapsulation=shadow","../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"sourcesContent":["export const RADIO_GROUP_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TRadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATION)[number];\n","/* -------------------------------------------------------------------------- /\n/ Radio group styles /\n/ -------------------------------------------------------------------------- /\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio-group {\n @apply m-b-0 m-i-0;\n\n &:not(.has-fieldset) {\n @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;\n }\n\n &--horizontal {\n @apply flex;\n }\n\n &--vertical {\n @apply flex flex-col;\n }\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport { debounce, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\n\n/\n The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n \n @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n * <span slot=\"label\">radio group</span>\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * <bq-radio value=\"option2\">Radio option 2</bq-radio>\n * <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n \n @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" \| \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n \n @event bqChange - Handler to be called when the radio state changes\n \n @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n \n @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n /\n@Component({\n tag: 'bq-radio-group',\n styleUrl: './scss/bq-radio-group.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqRadioGroup {\n // Own Properties\n // ====================\n\n private focusedBqRadio: HTMLBqRadioElement \| null = null;\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqRadioGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true, all radio inputs in the group will display a background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change /\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n /* If true radio inputs are disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If true displays fieldset /\n @Prop({ reflect: true }) fieldset? = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* The display orientation of the radio inputs /\n @Prop({ reflect: true, mutable: true }) orientation?: TRadioGroupOrientation = 'vertical';\n\n /* If true, the radio group is required /\n @Prop({ reflect: true }) required? = false;\n\n /* The native form validation message when the radio group is required /\n @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true, mutable: true }) value?: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('backgroundOnHover')\n @Watch('disabled')\n @Watch('name')\n @Watch('required')\n @Watch('value')\n handleGroupProperties() {\n if (!this.bqRadioElements) return;\n\n this.bqRadioElements.forEach((bqRadio) => {\n bqRadio.backgroundOnHover = this.backgroundOnHover;\n bqRadio.checked = !isNil(this.value) ? bqRadio.value === this.value : false;\n bqRadio.disabled = this.disabled;\n bqRadio.name = this.name;\n bqRadio.required = this.required;\n });\n }\n\n @Watch('orientation')\n checkPropValues() {\n validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n }\n\n @Watch('debounceTime')\n checkDebounceChange() {\n if (this.debounceTime < 0) {\n this.debounceTime = Math.max(0, this.debounceTime);\n }\n\n if (this.debouncedBqChange) {\n this.debouncedBqChange.cancel();\n }\n\n this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n this.bqChange.emit(event);\n }, this.debounceTime);\n }\n\n @Watch('required')\n @Watch('value')\n async handleRequiredChange() {\n await this.updateFormValidity();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes */\n @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.checkDebounceChange();\n this.internals.setFormValue(this.value);\n }\n\n componentDidLoad() {\n this.handleGroupProperties();\n }\n\n async formAssociatedCallback() {\n this.internals.setFormValue(this.value);\n await this.updateFormValidity();\n }\n\n formResetCallback() {\n this.value = null;\n this.internals.setFormValue(this.value);\n }\n\n // Listeners\n // ==============\n\n @Listen('mousedown', { target: 'body', passive: true })\n onMouseDown(event: MouseEvent) {\n if (!isNil(this.focusedBqRadio) && isHTMLElement(event.target, 'bq-radio') && this.el.contains(event.target)) {\n this.focusedBqRadio = event.target;\n }\n }\n\n @Listen('bqClick')\n onBqClick(event: CustomEvent<HTMLBqRadioElement>) {\n if (isNil(this.focusedBqRadio)) {\n this.focusedBqRadio = event.detail;\n }\n\n if (event.detail.value === this.value) return;\n\n const target = event.detail;\n this.bqRadioElements.forEach((bqRadioElement) => (bqRadioElement.checked = bqRadioElement === target));\n this.setCheckedRadioItem(event.detail);\n }\n\n @Listen('bqKeyDown')\n onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n const { target } = event;\n\n if (!isHTMLElement(target, 'bq-radio')) return;\n\n switch (event.detail.key) {\n case 'ArrowDown':\n case 'ArrowRight': {\n this.focusRadioInputSibling(target, true);\n break;\n }\n\n case 'ArrowUp':\n case 'ArrowLeft': {\n this.focusRadioInputSibling(target, false);\n break;\n }\n\n default:\n }\n }\n\n @Listen('bqFocus', { capture: true })\n onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n if (event.detail !== this.focusedBqRadio) return;\n\n event.stopPropagation();\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isNil(this.focusedBqRadio) && event.detail !== this.focusedBqRadio) {\n event.stopPropagation();\n } else {\n this.focusedBqRadio = null;\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, next: boolean): void => {\n this.bqRadioElements.forEach((bqRadioElement, index, elements) => {\n if (bqRadioElement === currentTarget) {\n const target = this.getNextRadioElement(elements, index, next);\n\n currentTarget.checked = false;\n\n target.vFocus();\n this.setCheckedRadioItem(target);\n }\n });\n };\n\n private setCheckedRadioItem = (target: HTMLBqRadioElement): void => {\n const { value } = target;\n target.checked = true;\n this.value = value;\n this.focusedBqRadio = target;\n this.internals.setFormValue(value);\n this.debouncedBqChange({ value, target });\n };\n\n private getNextRadioElement = (elements: HTMLBqRadioElement[], index: number, forward = true): HTMLBqRadioElement => {\n let element = null;\n let elementIndex = index;\n\n do {\n elementIndex = (elements.length + (elementIndex + (forward ? 1 : -1))) % elements.length;\n element = elements[elementIndex];\n } while (element.disabled);\n\n return element;\n };\n\n private updateFormValidity = async (): Promise<void> => {\n const { internals, required, requiredValidationMessage, value } = this;\n // Clear the validity state\n internals?.states.clear();\n\n if (!required \|\| (required && !isNil(value))) {\n // If the checkbox is not required or is checked, set the validity state to valid\n internals?.states.add('valid');\n internals?.setValidity({});\n return;\n }\n\n // If the checkbox is required and not checked, set the validity state to invalid\n internals?.states.add('invalid');\n internals?.setValidity(\n { valueMissing: true },\n requiredValidationMessage,\n await this.bqRadioElements[0].getNativeInput(),\n );\n };\n\n private get bqRadioElements(): HTMLBqRadioElement[] {\n return Array.from(this.el.querySelectorAll('bq-radio'));\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <fieldset\n class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n aria-labelledby=\"bq-radio-group__label\"\n aria-controls=\"bq-radiogroup\"\n role=\"radiogroup\"\n part=\"base\"\n >\n <legend part=\"label\">\n <slot id=\"bq-radiogroup__label\" name=\"label\" />\n </legend>\n <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n <slot id=\"bq-radiogroup\" />\n </div>\n </fieldset>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"bq-radio-group.entry.esm.js","sources":["../../packages/beeq/src/components/radio-group/bq-radio-group.types.ts","../../packages/beeq/src/components/radio-group/scss/bq-radio-group.scss?tag=bq-radio-group&encapsulation=shadow","../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"sourcesContent":["export const RADIO_GROUP_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TRadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATION)[number];\n","/* -------------------------------------------------------------------------- /\n/ Radio group styles /\n/ -------------------------------------------------------------------------- /\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio-group {\n @apply m-b-0 m-i-0;\n\n &:not(.has-fieldset) {\n @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;\n }\n\n &--horizontal {\n @apply flex;\n }\n\n &--vertical {\n @apply flex flex-col;\n }\n}\n","import { AttachInternals, Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport {\n debounce,\n getNextElement,\n isEventTargetChildOfElement,\n isNil,\n TDebounce,\n validatePropValue,\n} from '../../shared/utils';\n\nconst KEY_MAP = {\n ArrowDown: 'forward',\n ArrowRight: 'forward',\n ArrowUp: 'backward',\n ArrowLeft: 'backward',\n} as const;\n\ntype Direction = (typeof KEY_MAP)[keyof typeof KEY_MAP];\n\n/\n The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n \n @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n * <span slot=\"label\">radio group</span>\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * <bq-radio value=\"option2\">Radio option 2</bq-radio>\n * <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n \n @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" \| \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n \n @event bqChange - Handler to be called when the radio state changes\n \n @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n \n @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n /\n@Component({\n tag: 'bq-radio-group',\n styleUrl: './scss/bq-radio-group.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqRadioGroup {\n // Own Properties\n // ====================\n\n private initialValue?: string;\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n private focusedBqRadio: HTMLBqRadioElement \| null = null;\n private readonly radioElementsSet = new Set<HTMLBqRadioElement>();\n private cachedRadioElements: HTMLBqRadioElement[] = [];\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqRadioGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() checkedRadio?: HTMLBqRadioElement;\n @State() tabIndex: '0' \| '-1' = '0';\n\n // Public Property API\n // ========================\n\n /* If true, all radio inputs in the group will display a background on hover /\n @Prop({ reflect: true }) backgroundOnHover = false;\n\n /* A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change /\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n /* If true radio inputs are disabled /\n @Prop({ reflect: true }) disabled = false;\n\n /* If true displays fieldset /\n @Prop({ reflect: true }) fieldset = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* The display orientation of the radio inputs /\n @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n /* If true, the radio group is required /\n @Prop({ reflect: true }) required = false;\n\n /* The native form validation message when the radio group is required /\n @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true, mutable: true }) value?: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('debounceTime')\n handleDebounceTimeChange() {\n const MIN_DEBOUNCE_TIME = 0;\n const normalizedDebounceTime = Math.max(MIN_DEBOUNCE_TIME, this.debounceTime);\n\n if (normalizedDebounceTime !== this.debounceTime) {\n this.debounceTime = normalizedDebounceTime;\n }\n\n this.debouncedBqChange?.cancel();\n this.debouncedBqChange = debounce((event: { value: string; target: HTMLBqRadioElement }): void => {\n this.bqChange?.emit(event);\n }, this.debounceTime);\n }\n\n @Watch('disabled')\n handleDisabledChange() {\n this.tabIndex = this.disabled ? '-1' : '0';\n this.updateRadioTabIndexes();\n }\n\n @Watch('backgroundOnHover')\n @Watch('disabled')\n @Watch('name')\n @Watch('required')\n handleGroupProperties() {\n this.updateRadioProperties();\n }\n\n @Watch('orientation')\n checkPropValues() {\n validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n }\n\n @Watch('required')\n handleRequiredChange() {\n this.updateFormValidity();\n }\n\n @Watch('value')\n handleValueChange() {\n this.updateRadioProperties();\n this.updateFormValidity();\n\n // Find and update the checked radio based on the new value\n const newCheckedRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n if (newCheckedRadio) {\n this.checkedRadio = newCheckedRadio;\n this.debouncedBqChange?.({ value: this.value, target: newCheckedRadio });\n } else {\n this.checkedRadio = undefined;\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes /\n @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.handleDebounceTimeChange();\n this.internals.setFormValue(this.value ?? null);\n\n this.updateCustomStates();\n this.updateFormValidity();\n }\n\n disconnectedCallback() {\n this.debouncedBqChange?.cancel();\n }\n\n formAssociatedCallback() {\n this.internals.setFormValue(this.value ?? null);\n this.updateFormValidity();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.internals.setFormValue(this.value ?? null);\n this.updateFormValidity();\n this.updateCustomStates();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { capture: true })\n async onBqClick(event: CustomEvent<{ value: string; target: HTMLBqRadioElement }>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const { target, value } = event.detail;\n if (value === this.value) return;\n\n requestAnimationFrame(() => {\n if (event.defaultPrevented) return;\n this.updateRadioSelection(target);\n });\n }\n\n @Listen('bqKeyDown')\n onBqKeyDown(event: CustomEvent<{ key: string; target: HTMLBqRadioElement }>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const direction: Direction \| undefined = KEY_MAP[event.detail.key];\n if (!direction) return;\n\n this.focusRadioInputSibling(event.detail.target, direction);\n }\n\n @Listen('bqFocus', { capture: true })\n onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const shouldStopPropagation = this.focusedBqRadio && event.detail !== this.focusedBqRadio;\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n this.focusedBqRadio = event.detail;\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const shouldStopPropagation = this.focusedBqRadio && event.detail !== this.focusedBqRadio;\n if (shouldStopPropagation) {\n event.stopPropagation();\n return;\n }\n\n this.focusedBqRadio = null;\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 /\n Initializes the radio elements set by querying the host element for `ds-radio` elements.\n * This is done to avoid re-querying the host element for radio elements on every change.\n /\n private initializeRadioElements = (): void => {\n this.radioElementsSet.clear();\n this.el.querySelectorAll('bq-radio').forEach((radio) => this.radioElementsSet.add(radio));\n // Caching the radio elements in an array for faster access and iteration\n this.cachedRadioElements = Array.from(this.radioElementsSet);\n // Set the tabIndex of the host element to -1 if there are no radio elements or the group is disabled, otherwise set it to 0\n this.tabIndex = this.cachedRadioElements.length === 0 \|\| this.disabled ? '-1' : '0';\n // Set initial tabIndex for all radios\n this.updateRadioTabIndexes();\n };\n\n /\n Sets tabIndex for all radio elements based on current state\n * Handles all scenarios: disabled state, checked radio, value matching, fallback to first\n /\n private updateRadioTabIndexes = (): void => {\n if (this.cachedRadioElements.length === 0) return;\n\n // If disabled, all radios get tabIndex -1\n if (this.disabled) {\n this.cachedRadioElements.forEach((radio) => (radio.tabIndex = -1));\n return;\n }\n\n // Find which radio should be focusable\n let focusableRadio: HTMLBqRadioElement \| undefined;\n\n // Priority 1: Currently checked radio\n focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);\n\n // Priority 2: Radio matching current value\n if (!focusableRadio && this.value) {\n focusableRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n }\n\n // Priority 3: First enabled radio (fallback)\n if (!focusableRadio) {\n focusableRadio = this.cachedRadioElements.find((radio) => !radio.disabled);\n }\n\n // Apply tabIndex to all radios\n this.cachedRadioElements.forEach((radio) => {\n radio.tabIndex = radio === focusableRadio ? 0 : -1;\n });\n };\n\n /\n Updates the radio selection and focus.\n * @param target - The radio element to update.\n /\n private updateRadioSelection = (target: HTMLBqRadioElement): void => {\n // Only uncheck the previously checked radio if it's different\n if (this.checkedRadio && this.checkedRadio !== target) {\n this.checkedRadio.checked = false;\n this.checkedRadio.tabIndex = -1;\n }\n\n target.checked = true;\n target.tabIndex = 0;\n target.vFocus();\n\n this.checkedRadio = target;\n this.value = target.value;\n this.internals?.setFormValue(this.value ?? null);\n\n this.updateRadioTabIndexes();\n };\n\n /\n Synchronizes properties of child radio elements with the group's state.\n /\n private updateRadioProperties = (): void => {\n if (this.cachedRadioElements.length === 0) return;\n\n const { backgroundOnHover, disabled, name, required, value } = this;\n\n for (const radio of this.cachedRadioElements) {\n radio.backgroundOnHover = backgroundOnHover;\n radio.checked = value === radio.value;\n // This will allows us to force all radio elements to be disabled\n // while keeping the disabled state of the radio element if it was set individually by the user\n radio.forceDisabled = disabled;\n radio.name = name;\n radio.required = required;\n }\n };\n\n /\n Focuses the next/previous radio element in the group based on the current target.\n * Handles circular navigation and skips disabled elements.\n * @param currentTarget - The currently focused radio element\n * @param direction - The navigation direction ('forward' \| 'backward')\n /\n private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, direction: Direction): void => {\n // If there is none or only one radio element, there will be no sibling to focus\n if (this.cachedRadioElements.length <= 1) return;\n\n const currentIndex = this.cachedRadioElements.indexOf(currentTarget);\n // If the index of the radio element target is not found, it means that it's not part of the group\n if (currentIndex === -1) return;\n\n const nextElement = getNextElement(this.cachedRadioElements, currentIndex, direction);\n this.updateRadioSelection(nextElement);\n };\n\n private updateFormValidity = async (): Promise<void> => {\n const { internals, required, requiredValidationMessage, value } = this;\n // Clear the validity state\n internals?.states.clear();\n\n if (!required \|\| (required && !isNil(value))) {\n // If the radio group is not required or has a value, set the validity state to valid\n internals?.states.add('valid');\n internals?.setValidity({});\n return;\n }\n\n const firstRadio = this.cachedRadioElements[0];\n if (!firstRadio) return;\n // If the radio group is required and has no value, set the validity state to invalid\n internals?.states.add('invalid');\n // We need to pass the native input element to the setValidity method as anchor element\n internals?.setValidity(\n { valueMissing: true },\n requiredValidationMessage ?? 'Please select an option',\n await firstRadio.getNativeInput(),\n );\n };\n\n /\n Updates the custom states based on the component properties.\n * The custom states can be used to style the component based on the component properties.\n * The custom states are `disabled`, based on the component properties.\n */\n private updateCustomStates = (): void => {\n const states = new Set<string>();\n\n if (this.disabled) states.add('disabled');\n if (this.orientation) states.add(this.orientation);\n\n // Update states\n this.internals?.states.clear();\n states.forEach((state) => this.internals?.states.add(state));\n };\n\n private handleSlotChange = (): void => {\n this.initializeRadioElements();\n this.updateRadioProperties();\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host tabindex={this.tabIndex}>\n <fieldset\n class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n aria-controls=\"bq-radiogroup\"\n aria-labelledby=\"bq-radio-group__label\"\n aria-disabled={this.disabled}\n aria-required={this.required}\n disabled={this.disabled}\n role=\"radiogroup\"\n part=\"base\"\n >\n <legend part=\"label\">\n <slot id=\"bq-radiogroup__label\" name=\"label\" />\n </legend>\n <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n <slot id=\"bq-radiogroup\" onSlotchange={this.handleSlotChange} />\n </div>\n </fieldset>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-radio.entry.esm.js","sources":["../../packages/beeq/src/components/radio/scss/bq-radio.scss?tag=bq-radio&encapsulation=shadow","../../packages/beeq/src/components/radio/bq-radio.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Radio styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-radio.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio {\n @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;\n @apply rounded-s p-b-xs p-i-xs;\n\n &.is-disabled {\n .bq-radio__circle {\n @apply opacity-60;\n }\n\n &.is-checked .bq-radio__circle {\n @apply border-icon-brand;\n }\n\n &.is-checked .bq-radio__checked {\n @apply bg-ui-brand;\n }\n }\n\n &.has-background:not(.is-disabled):hover {\n @apply bg-hover-ui-primary;\n }\n\n &.is-checked:not(.is-disabled) {\n .bq-radio__circle {\n @apply border-icon-brand;\n }\n\n .bq-radio__checked {\n @apply bg-ui-brand;\n }\n }\n\n &:not(.is-disabled):hover .bq-radio__circle {\n @apply border-hover-icon-brand;\n }\n\n &.is-checked:not(.is-disabled):hover {\n .bq-radio__checked,\n .bq-radio__circle {\n @apply border-hover-icon-brand;\n }\n }\n}\n\n.bq-radio__input {\n @apply sr-only;\n\n &:focus-visible {\n ~ .bq-radio__circle {\n @apply focus;\n }\n }\n}\n\n.bq-radio__control {\n @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];\n}\n\n.bq-radio__circle {\n @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];\n}\n\n.bq-radio__checked {\n @apply rounded-full bs-full is-full;\n}\n\n.bq-radio__label {\n @apply font-medium leading-regular text-primary;\n}\n\n.bq-radio__circle,\n.bq-radio__checked,\n.bq-radio__label {\n @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, h, Method, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/\n The radio button is a user interface element that allows users to select a single option.\n \n @example How to use it\n * ```html\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n \n @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {boolean} checked - If `true` radio input is checked\n * @attr {boolean} disabled - If `true` radio input is disabled\n * @attr {string} form-id - The form ID that the radio input is associated with\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted\n * @attr {boolean} value - A string representing the value of the radio\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n * @method getNativeInput - Returns the native `<input>` HTML element used under the hood\n \n @event bqBlur - Handler to be called when the radio loses focus\n * @event bqClick - Handler to be called when the radio state changes\n * @event bqFocus - Handler to be called when the radio gets focused\n * @event bqKeyDown - The handler is to be called when the radio key is pressed\n \n @slot - The bq-radio item\n \n @part base - The component's internal wrapper of the radio component.\n * @part input - The native HTML `<input type=\"radio\">` used under the hood.\n * @part radio - The component's internal wrapper of the radio component.\n * @part label - The `<span>` element that holds the text content.\n \n @cssprop --bq-radio--size - Radio size\n * @cssprop --bq-radio--border-width - Radio border width\n /\n@Component({\n tag: 'bq-radio',\n styleUrl: './scss/bq-radio.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqRadio {\n // Own Properties\n // ====================\n private inputElement: HTMLInputElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqRadioElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true radio input is checked /\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /* If true radio input is disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* If true radio displays background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* The form ID that the radio input is associated with /\n @Prop({ reflect: true }) formId?: string;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes /\n @Event() bqClick: EventEmitter<HTMLBqRadioElement>;\n\n /* Handler to be called when the radio gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqRadioElement>;\n\n /* Handler to be called when the radio loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n /* Handler to be called when the radio key is pressed /\n @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\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.inputElement?.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.inputElement?.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.inputElement?.blur();\n }\n\n /\n Returns the native `<input>` HTML element used under the hood.\n */\n @Method()\n async getNativeInput() {\n return this.inputElement;\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.checked = 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 get tabindex(): string {\n // NOTE: this.checked is undefined when is not part of bq-radio-group\n return `${-1 + +(this.checked ?? 1)}`;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n class={{\n 'bq-radio group': true,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'is-checked': this.checked,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n >\n <div class=\"bq-radio__control\">\n <input\n class=\"bq-radio__input\"\n ref={(element) => (this.inputElement = element)}\n type=\"radio\"\n form={this.formId}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.disabled}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-labelledby=\"bq-radio__label\"\n tabindex={this.tabindex}\n part=\"input\"\n />\n <div class=\"bq-radio__circle\" part=\"radio\">\n <div class=\"bq-radio__checked\" />\n </div>\n </div>\n <span\n class=\"bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled\"\n part=\"label\"\n >\n <slot id=\"bq-radio__label\"></slot>\n </span>\n </label>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,2mvBAA2mvB;;MCiDjnvB,OAAO,GAAA,MAAA;;;;;;;;;;AAGV,IAAA,YAAY;;;;;;;;AAeoB,IAAA,OAAO;;IAGtB,QAAQ,GAAI,KAAK;;IAGjB,iBAAiB,GAAI,KAAK;;AAG1B,IAAA,MAAM;;AAGN,IAAA,IAAI;;AAGJ,IAAA,QAAQ;;AAGR,IAAA,KAAK;;;;;;;AAUrB,IAAA,OAAO;;AAGP,IAAA,OAAO;;AAGP,IAAA,MAAM;;AAGN,IAAA,SAAS;;;;;;;;;;;;AAgBlB;;;AAGG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE;;AAG5B;;;AAGG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE;;AAG5B;;;AAGG;AAEH,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE;;AAG3B;;AAEG;AAEH,IAAA,MAAM,cAAc,GAAA;QAClB,OAAO,IAAI,CAAC,YAAY;;;;;;IAQlB,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACnB,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;AAED,IAAA,IAAY,QAAQ,GAAA;;AAElB,QAAA,OAAO,CAAG,EAAA,GAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,EAAE;;;;;IAOvC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;gBACtB,iCAAiC,EAAE,IAAI,CAAC,QAAQ;gBAChD,YAAY,EAAE,IAAI,CAAC,OAAO;gBAC1B,gBAAgB,EAAE,IAAI,CAAC,iBAAiB;aACzC,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,EAC/C,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,SAAS,EAAE,IAAI,CAAC,eAAe,EAAA,cAAA,EACjB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC9B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/B,iBAAA,EAAA,iBAAiB,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,CAAG,CAC7B,CACF,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qGAAqG,EAC3G,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,iBAAiB,GAAQ,CAC7B,CACD;;;;;;;;"}
1	+ {"version":3,"file":"bq-radio.entry.esm.js","sources":["../../packages/beeq/src/components/radio/scss/bq-radio.scss?tag=bq-radio&encapsulation=shadow","../../packages/beeq/src/components/radio/bq-radio.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Radio styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-radio.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-radio {\n @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;\n @apply rounded-s p-b-xs p-i-xs;\n\n &.is-disabled {\n @apply cursor-not-allowed opacity-60;\n\n &.is-checked .bq-radio__circle {\n @apply border-icon-brand;\n }\n\n &.is-checked .bq-radio__checked {\n @apply bg-ui-brand;\n }\n }\n\n &.has-background:not(.is-disabled):hover {\n @apply bg-hover-ui-primary;\n }\n\n &.is-checked:not(.is-disabled) {\n .bq-radio__circle {\n @apply border-icon-brand;\n }\n\n .bq-radio__checked {\n @apply bg-ui-brand;\n }\n }\n\n &:not(.is-disabled):hover .bq-radio__circle {\n @apply border-hover-icon-brand;\n }\n\n &.is-checked:not(.is-disabled):hover {\n .bq-radio__checked,\n .bq-radio__circle {\n @apply border-hover-icon-brand;\n }\n }\n}\n\n.bq-radio__input {\n @apply sr-only;\n\n &:focus-visible {\n ~ .bq-radio__circle {\n @apply focus;\n }\n }\n}\n\n.bq-radio__control {\n @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];\n}\n\n.bq-radio__circle {\n @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];\n}\n\n.bq-radio__checked {\n @apply rounded-full bs-full is-full;\n}\n\n.bq-radio__label {\n @apply font-medium leading-regular text-primary;\n}\n\n.bq-radio__circle,\n.bq-radio__checked,\n.bq-radio__label {\n @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/\n The radio button is a user interface element that allows users to select a single option.\n \n @example How to use it\n * ```html\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n \n @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {boolean} checked - If `true` radio input is checked\n * @attr {boolean} disabled - If `true` radio input is disabled\n * @attr {string} form-id - The form ID that the radio input is associated with\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted\n * @attr {boolean} value - A string representing the value of the radio\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n * @method getNativeInput - Returns the native `<input>` HTML element used under the hood\n \n @event bqBlur - Handler to be called when the radio loses focus\n * @event bqClick - Handler to be called when the radio state changes\n * @event bqFocus - Handler to be called when the radio gets focused\n * @event bqKeyDown - The handler is to be called when the radio key is pressed\n \n @slot - The bq-radio item\n \n @part base - The component's internal wrapper of the radio component.\n * @part input - The native HTML `<input type=\"radio\">` used under the hood.\n * @part radio - The component's internal wrapper of the radio component.\n * @part label - The `<span>` element that holds the text content.\n \n @cssprop --bq-radio--size - Radio size\n * @cssprop --bq-radio--border-width - Radio border width\n /\n@Component({\n tag: 'bq-radio',\n styleUrl: './scss/bq-radio.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqRadio {\n // Own Properties\n // ====================\n private inputElement: HTMLInputElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqRadioElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true radio displays background on hover /\n @Prop({ reflect: true }) backgroundOnHover = false;\n\n /* If true radio input is checked /\n @Prop({ reflect: true, mutable: true }) checked = false;\n\n /* If true radio input is disabled /\n @Prop({ reflect: true }) disabled = false;\n\n /* @internal Used by the radio-group parent component to force the disabled state of the radio input /\n @Prop({ reflect: true }) forceDisabled = false;\n\n /* The form ID that the radio input is associated with /\n @Prop({ reflect: true }) formId?: string;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes /\n @Event() bqClick: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n /* Handler to be called when the radio gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqRadioElement>;\n\n /* Handler to be called when the radio loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n /* Handler to be called when the radio key is pressed /\n @Event() bqKeyDown: EventEmitter<{ key: string; target: HTMLBqRadioElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\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.inputElement?.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.inputElement?.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.inputElement?.blur();\n }\n\n /\n Returns the native `<input>` HTML element used under the hood.\n */\n @Method()\n async getNativeInput() {\n return this.inputElement;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = (event: MouseEvent) => {\n // Prevent the native input click default behavior\n event.preventDefault();\n if (this.disabled) return;\n\n // Emit the event without changing state\n // Let the radio-group handle all state management and event propagation\n const bqClickEvent = this.bqClick.emit({ value: this.value, target: this.el });\n if (bqClickEvent.defaultPrevented) {\n event.stopImmediatePropagation();\n }\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({ key: event.key, target: this.el });\n };\n\n private get isDisabled() {\n return this.disabled \|\| this.forceDisabled;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host>\n <label\n class={{\n 'bq-radio group': true,\n 'is-disabled': this.isDisabled,\n 'is-checked': this.checked,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n >\n <div class=\"bq-radio__control\">\n <input\n class=\"bq-radio__input\"\n ref={(element) => (this.inputElement = element)}\n type=\"radio\"\n form={this.formId}\n name={this.name}\n value={this.value}\n required={this.required}\n disabled={this.isDisabled}\n checked={this.checked}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.isDisabled ? 'true' : 'false'}\n aria-labelledby=\"bq-radio__label\"\n part=\"input\"\n />\n <div class=\"bq-radio__circle\" part=\"radio\">\n <div class=\"bq-radio__checked\" />\n </div>\n </div>\n <span\n class=\"bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled\"\n part=\"label\"\n >\n <slot id=\"bq-radio__label\"></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-select.entry.esm.js","sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Select styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-select.variables';\n\n:host {\n @apply block w-full;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Label and Helper text /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__label {\n @apply flex items-center m-be-[--bq-select--label-margin-bottom];\n @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n @apply text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color] m-bs-[--bq-select--helper-margin-top];\n}\n\n.bq-select__helper-text.validation-error {\n @apply text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n @apply text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n @apply text-warning;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Select input group control /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n // The focus state will be controlled by the dropdown element\n // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n .bq-select__control {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n @apply focus border-[color:--bq-select--border-color-focus];\n }\n}\n\n.bq-select__control {\n @apply flex items-center transition-[border-color,box-shadow] is-full;\n // Border\n @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n // Padding\n @apply pe-[--bq-select--padding-end] ps-[--bq-select--padding-start] p-b-[var(--bq-select--paddingY)];\n // Text\n @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n // Hover\n @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n border-style: var(--bq-select--border-style);\n\n // Enable clear button whenever the input group control is hovered or has focus\n &:not(.disabled):hover,\n &:not(.disabled):focus-within {\n .bq-select__control--clear {\n @apply inline-block;\n }\n }\n}\n\n.bq-select__control.disabled {\n @apply cursor-not-allowed opacity-60;\n}\n\n/ ------------------------------- Validation ------------------------------- /\n\n.bq-select__control.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-select__control.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-select__control.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/ Native HTML Input /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--input {\n @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n @apply m-0 border-none p-0 min-bs-[var(--bq-select--icon-size)] min-is-0 focus:outline-none focus-visible:outline-none;\n\n box-shadow: none;\n font-weight: inherit;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Clear button /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--clear::part(button) {\n // Since the clear button is inside the input group control,\n // we need to reset the focus ring styles\n --bq-ring-width: initial;\n --bq-ring-offset-width: initial;\n --bq-ring-color-focus: initial;\n\n @apply rounded-xs border-none p-0 bs-auto;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Prefix and suffix /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n.bq-select__tags {\n @apply me-xs2 flex flex-1 gap-xs2;\n\n bq-tag,\n ::slotted(bq-tag) {\n @apply inline-flex;\n }\n\n bq-tag::part(text) {\n @apply text-nowrap leading-small;\n }\n}\n\n/ -------------------------------------------------------------------------- /\n/ Slotted and internal icons /\n/ -------------------------------------------------------------------------- /\n\nbq-icon,\n::slotted(bq-icon) {\n --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport {\n debounce,\n hasSlotContent,\n isDefined,\n isHTMLElement,\n isNil,\n stringToArray,\n TDebounce,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string \| string[];\n\n/\n The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.\n \n @example How to use it\n * ```html\n * <bq-select placeholder=\"Placeholder\">\n * <label slot=\"label\">Select label</label>\n * <span slot=\"helper-text\">\n * <bq-icon name=\"star\"></bq-icon>\n * Helper text\n * </span>\n \n <bq-option value=\"1\">Option 1</bq-option>\n * <bq-option value=\"2\">Option 2</bq-option>\n * <bq-option value=\"3\">Option 3</bq-option>\n * </bq-select>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/41989d-select/b/09d7b1\n * @status stable\n \n @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n * @dependency bq-option-list\n * @dependency bq-tag\n \n @attr {boolean} autofocus - If `true`, the Select input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.\n * @attr {string} form - The ID of the form that Select input field belongs to.\n * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.\n * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.\n * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.\n * @attr {string} name - The Select input name.\n * @attr {boolean} open - If `true`, the Select panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Select panel.\n * @attr {string} placeholder - The Select input placeholder text value.\n * @attr {\"bottom\" \| \"bottom-end\" \| \"bottom-start\" \| \"left\" \| \"left-end\" \| \"left-start\" \| \"right\" \| \"right-end\" \| \"right-start\" \| \"top\" \| \"top-end\" \| \"top-start\"} placement - Position of the Select panel.\n * @attr {boolean} readonly - If `true`, the Select input cannot be modified.\n * @attr {boolean} required - Indicates whether or not the Select input is required to be filled out before submitting the form.\n * @attr {boolean} same-width - Whether the panel should have the Select same width as the input element.\n * @attr {number} skidding - Represents the skidding between the Select panel and the input element.\n * @attr {\"absolute\" \| \"fixed\"} strategy - Defines the strategy to position the Select panel.\n * @attr {\"error\" \| \"success\" \| \"warning\" \| \"none\"} validation-status - The validation status of the Select input.\n * @attr {\"number\" \| \"string\" \| \"string[]\"} value - The select input value can be used to reset the field to a previous value.\n \n @method clear - Method to be called to clear the selected value.\n \n @event bqBlur - The callback handler is emitted when the Select input loses focus.\n * @event bqClear - The callback handler is emitted when the selected value has been cleared.\n * @event bqFocus - A callback handler is emitted when the Select input has received focus.\n * @event bqSelect - The callback handler is emitted when the selected value has changed.\n \n @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot tags - The tags slot container.\n * @slot clear-icon - The clear icon slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\n \n @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n \n @cssprop --bq-select--background-color - Select background color\n * @cssprop --bq-select--border-color - Select border color\n * @cssprop --bq-select--border-color-focus - Select border color on focus\n * @cssprop --bq-select--border-color-disabled - Select border color when disabled\n * @cssprop --bq-select--border-radius - Select border radius\n * @cssprop --bq-select--border-width - Select border width\n * @cssprop --bq-select--border-style - Select border style\n * @cssprop --bq-select--gap - Gap between Select content and prefix/suffix\n * @cssprop --bq-select--helper-margin-top - Helper text margin top\n * @cssprop --bq-select--helper-text-color - Helper text color\n * @cssprop --bq-select--helper-text-size - Helper text size\n * @cssprop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-select--label-margin-bottom - Select label margin bottom\n * @cssprop --bq-select--label-text-color - Select label text color\n * @cssprop --bq-select--label-text-size - Select label text size\n * @cssprop --bq-select--padding-start - Select padding start\n * @cssprop --bq-select--padding-end - Select padding end\n * @cssprop --bq-select--paddingY - Select padding top and bottom\n * @cssprop --bq-select--text-color - Select text color\n * @cssprop --bq-select--text-size - Select text size\n * @cssprop --bq-select--text-placeholder-color - Select placeholder text color\n /\n@Component({\n tag: 'bq-select',\n styleUrl: './scss/bq-select.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSelect {\n // Own Properties\n // ====================\n\n private helperTextElem?: HTMLElement;\n private inputElem?: HTMLInputElement;\n private labelElem?: HTMLElement;\n private prefixElem?: HTMLElement;\n private suffixElem?: HTMLElement;\n\n private debounceQuery: TDebounce<void>;\n private debounceInput: TDebounce<void>;\n\n private fallbackInputId = 'select';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSelectElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() displayValue?: string;\n @State() hasHelperText = false;\n @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If true, the Select input will be focused on component render /\n @Prop({ reflect: true }) autofocus: boolean;\n\n /* The clear button aria label /\n @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n /\n The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input 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 Select panel will not lock the page body scroll when open. /\n @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n /\n Indicates whether the Select input is disabled or not.\n * If `true`, the Select is disabled and cannot be interacted with.\n /\n @Prop({ mutable: true }) disabled?: boolean = false;\n\n /* If true, the clear button won't be displayed /\n @Prop({ reflect: true }) disableClear? = false;\n\n /* Represents the distance (gutter or margin) between the Select panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The ID of the form that the Select input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* If true, the Select panel will remain open after a selection is made. /\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /* The Select input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* The maximum number of tags to display when multiple selection is enabled /\n @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n /* If true, the Select input will allow multiple selections. /\n @Prop({ reflect: true }) multiple?: boolean = false;\n\n /* If true, the Select panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Select panel. /\n @Prop({ reflect: true }) panelHeight?: string;\n\n /* The Select input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Select panel /\n @Prop({ reflect: true }) placement?: Placement = 'bottom';\n\n /* If true, the list of options cannot be filtered (searching won't be available) /\n @Prop({ reflect: true }) readonly?: boolean;\n\n /* Indicates whether or not the Select input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Whether the panel should have the Select same width as the input element /\n @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n /* Represents the skidding between the Select panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Defines the strategy to position the Select panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The input has a validation error.\n * - `'warning'`: The input has a validation warning.\n * - `'success'`: The input has passed validation.\n /\n @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n /* The select input value, it can be used to reset the field to a previous value /\n @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n // Early return for undefined/null values\n if (isNil(this.value)) {\n this.value = this.multiple ? [] : '';\n this.internals.setFormValue(undefined);\n this.syncItemsFromValue();\n return;\n }\n\n // Handle multiple selection mode\n if (this.multiple) {\n this.value = stringToArray(this.value);\n this.internals.setFormValue(this.value.join(','));\n this.syncItemsFromValue();\n\n return;\n }\n\n // Handle single selection mode\n this.value = String(this.value);\n this.internals.setFormValue(this.value);\n this.syncItemsFromValue();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the Select input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the Select input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has changed /\n @Event() bqSelect!: EventEmitter<{ value: string \| number \| string[]; item: HTMLBqOptionElement }>;\n\n /* Callback handler emitted when the Select input changes its value while typing /\n @Event() bqInput: EventEmitter<{ value: string \| number \| string[] }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.initMultipleValue();\n }\n\n componentWillLoad() {\n this.initMultipleValue();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n }\n this.handleValueChange();\n }\n\n formAssociatedCallback() {\n this.internals.role = 'combobox';\n this.internals.ariaExpanded = this.open ? 'true' : 'false';\n }\n\n async formResetCallback() {\n if (isNil(this.value)) return;\n\n this.internals.setValidity({});\n this.clear();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n }\n\n @Listen('bqFocus', { capture: true })\n @Listen('bqBlur', { capture: true })\n stopOptionFocusBlurPropagation(ev: CustomEvent) {\n // Stop propagation of focus and blur events coming from the `bq-option` elements\n if (isHTMLElement(ev.target, 'bq-select')) return;\n\n ev.stopPropagation();\n }\n\n @Listen('scroll', { target: 'window', passive: true, capture: true })\n handleScrollEvent() {\n if (!this.open \|\| this.disableScrollLock) return;\n\n // Close the panel when the scroll event is triggered.\n // This is useful for those cases where the floating panel is inside a scrollable container.\n // For example, a select inside a dialog, drawer, etc.\n // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n this.open = false;\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 Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n const { multiple, inputElem, bqClear, el } = this;\n\n // Clear value and selected options\n this.value = '';\n this.selectedOptions = [];\n\n // Clear display value and input element if not multiple\n if (!multiple) {\n this.displayValue = '';\n inputElem.value = '';\n }\n\n // Update form value and reset options visibility\n this.resetOptionsVisibility();\n\n // Emit clear event\n bqClear.emit(el);\n }\n\n /\n Resets the Select input to a previous value.\n \n @param {TSelectValue} value - The value to reset the Select input to.\n * @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async reset(value: TSelectValue): Promise<void> {\n if (isNil(value)) return;\n\n this.value = value;\n this.syncItemsFromValue();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private initMultipleValue = () => {\n if (!this.multiple) return;\n\n this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n if (this.disabled) return;\n\n if (this.multiple) {\n ev.stopPropagation();\n }\n\n const { value, item } = ev.detail;\n\n if (this.multiple) {\n this.handleMultipleSelection(item);\n // Clear the input value after selecting an item\n this.inputElem.value = '';\n // If multiple selection is enabled, emit the selected items array instead of relying on\n // the option list to emit the value of the selected item\n this.bqSelect.emit({ value: this.value, item });\n } else {\n this.value = value;\n }\n\n this.resetOptionsVisibility();\n this.inputElem.focus();\n };\n\n private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n const selectedOptionsSet = new Set(this.selectedOptions);\n\n if (selectedOptionsSet.has(item)) {\n selectedOptionsSet.delete(item);\n } else {\n selectedOptionsSet.add(item);\n }\n\n this.selectedOptions = Array.from(selectedOptionsSet);\n this.value = this.selectedOptions.map((item) => item.value);\n };\n\n private handleSearchFilter = (value: string) => {\n if (this.disabled) return;\n\n this.debounceQuery?.cancel();\n\n if (!isDefined(value)) {\n this.clear();\n } else {\n this.debounceQuery = debounce(() => {\n this.options.forEach((item: HTMLBqOptionElement) => {\n const itemLabel = this.getOptionLabel(item).toLowerCase();\n item.hidden = !itemLabel.includes(value);\n });\n }, this.debounceTime);\n\n this.debounceQuery();\n }\n\n // The panel will close once a selection is made\n // so we need to make sure it's open when the user is typing and the query is not empty\n this.open = true;\n };\n\n private handleInput = (ev: Event) => {\n if (this.disabled) return;\n\n const { value } = ev.target as HTMLInputElement;\n\n this.debounceInput?.cancel();\n\n this.debounceInput = debounce(() => {\n const inputEvent = this.bqInput.emit({ value });\n if (!inputEvent.defaultPrevented) {\n // Continue with search filtering only if the event wasn't prevented\n this.handleSearchFilter(value);\n }\n }, this.debounceTime);\n\n this.debounceInput();\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n (async () => {\n await this.clear();\n })();\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleTagRemove = (item: HTMLBqOptionElement) => {\n if (this.disabled) return;\n\n this.handleMultipleSelection(item);\n this.bqSelect.emit({ value: this.value, item });\n };\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n this.hasPrefix = hasSlotContent(this.prefixElem);\n this.hasSuffix = hasSlotContent(this.suffixElem);\n this.hasHelperText = hasSlotContent(this.helperTextElem);\n };\n\n private resetOptionsVisibility = () => {\n this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n };\n\n private syncItemsFromValue = () => {\n const { internals, options, value } = this;\n if (!options.length) return;\n\n // Sync selected state of the BqOption elements\n this.syncSelectedOptionsState();\n\n if (this.multiple) {\n // Sync selected options for multiple selection mode\n this.selectedOptions = options.filter((option) => this.value?.includes(option.value));\n }\n\n // Always update display value and form value\n this.updateDisplayLabel();\n internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n };\n\n /\n Syncs the selected state of the BqOption elements which value is included in the `value` property.\n * Notice that value can be a string or an array of strings.\n \n @private\n * @memberof BqSelect\n /\n private syncSelectedOptionsState = () => {\n const { options, multiple, value } = this;\n const lowerCaseValue = String(value).toLowerCase();\n\n options.forEach((option: HTMLBqOptionElement) => {\n if (multiple && Array.isArray(value)) {\n option.selected = value.includes(option.value);\n } else {\n option.selected = option.value.toLowerCase() === lowerCaseValue;\n }\n });\n };\n\n /\n Updates the display value of the input element based on the selected option.\n \n @private\n * @memberof BqSelect\n /\n private updateDisplayLabel = () => {\n const { value, options, inputElem } = this;\n\n const checkedItem = options.find((item) => item.value === value);\n const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n\n inputElem.value = displayValue;\n this.displayValue = displayValue;\n };\n\n private getOptionLabel = (item: HTMLBqOptionElement) => {\n if (!item) return '';\n return item.innerText.trim() ?? '';\n };\n\n private get options() {\n return Array.from(this.el.querySelectorAll('bq-option'));\n }\n\n private get displayPlaceholder() {\n // Hide the placeholder when multiple selection is enabled and there are selected items\n return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n }\n\n private get displayTags() {\n return this.selectedOptions.map((item, index) => {\n if (index < this.maxTagsVisible \|\| this.maxTagsVisible < 0) {\n return (\n <bq-tag\n key={item.value}\n removable\n size=\"xsmall\"\n variant=\"filled\"\n onBqClose={(event) => {\n // NOTE: prevents triggering bqClose on parent\n event.stopPropagation();\n this.handleTagRemove(item);\n }}\n // Prevent the tag from closing the panel when clicked\n onClick={(ev: MouseEvent) => ev.stopPropagation()}\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n {this.getOptionLabel(item)}\n </bq-tag>\n );\n } else if (index === this.maxTagsVisible) {\n return (\n <bq-tag\n key=\"more\"\n size=\"xsmall\"\n variant=\"filled\"\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n +{this.selectedOptions.length - index}\n </bq-tag>\n );\n }\n\n return null;\n });\n }\n\n private get hasClearIcon() {\n if (this.disableClear \|\| this.disabled) {\n return false;\n }\n\n if (this.multiple) {\n return this.selectedOptions.length > 0;\n }\n\n return isDefined(this.displayValue);\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const labelId = `bq-select__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-select\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n aria-label={this.name \|\| this.fallbackInputId}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n </label>\n {/ Select dropdown /}\n <bq-dropdown\n class=\"bq-select__dropdown w-full\"\n disableScrollLock={this.disableScrollLock}\n disabled={this.disabled}\n distance={this.distance}\n keepOpenOnSelect={this.keepOpenOnSelect}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-select__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n {/ Display selected values using BqTags for multiple selection /}\n {this.multiple && (\n <span class=\"bq-select__tags\" part=\"tags\">\n <slot name=\"tags\">{this.displayTags}</slot>\n </span>\n )}\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-select__control--input flex-grow is-full\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`bq-options-${this.name}`}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.displayPlaceholder}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n role=\"combobox\"\n spellcheck={false}\n type=\"text\"\n value={this.displayValue}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInput={this.handleInput}\n />\n </div>\n {/ Clear Button /}\n {this.hasClearIcon && (\n // The clear button will be visible as long as the input has a value\n // and the parent group is hovered or has focus-within\n <bq-button\n class=\"bq-select__control--clear ms-[--bq-select--gap]\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n tabIndex={-1}\n >\n <slot name=\"clear-icon\">\n <bq-icon name=\"x-circle\" class=\"flex\" />\n </slot>\n </bq-button>\n )}\n {/ Suffix /}\n <span\n class={{ 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n <bq-icon name=\"caret-down\" class=\"flex\" />\n </slot>\n </span>\n </div>\n <bq-option-list\n id={`bq-options-${this.name}`}\n onBqSelect={this.handleSelect}\n aria-expanded={this.open ? 'true' : 'false'}\n exportparts=\"base:option-list\"\n role=\"listbox\"\n >\n <slot />\n </bq-option-list>\n </bq-dropdown>\n {/ Helper text */}\n <div\n class={{\n [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}\n part=\"helper-text\"\n >\n <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"bq-select.entry.esm.js","sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Select styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-select.variables';\n\n:host {\n @apply block w-full;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Label and Helper text /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__label {\n @apply flex items-center m-be-[--bq-select--label-margin-bottom];\n @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n @apply text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color] m-bs-[--bq-select--helper-margin-top];\n}\n\n.bq-select__helper-text.validation-error {\n @apply text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n @apply text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n @apply text-warning;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Select input group control /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n // The focus state will be controlled by the dropdown element\n // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n .bq-select__control {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n @apply focus border-[color:--bq-select--border-color-focus];\n }\n}\n\n.bq-select__control {\n @apply flex items-center transition-[border-color,box-shadow] is-full;\n // Border\n @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n // Padding\n @apply pe-[--bq-select--padding-end] ps-[--bq-select--padding-start] p-b-[var(--bq-select--paddingY)];\n // Text\n @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n // Hover\n @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n border-style: var(--bq-select--border-style);\n\n // Enable clear button whenever the input group control is hovered or has focus\n &:not(.disabled):hover,\n &:not(.disabled):focus-within {\n .bq-select__control--clear {\n @apply inline-block;\n }\n }\n}\n\n.bq-select__control.disabled {\n @apply cursor-not-allowed opacity-60;\n}\n\n/ ------------------------------- Validation ------------------------------- /\n\n.bq-select__control.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-select__control.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-select__control.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/ Native HTML Input /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--input {\n @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n @apply m-0 border-none p-0 min-bs-[var(--bq-select--icon-size)] min-is-0 focus:outline-none focus-visible:outline-none;\n\n box-shadow: none;\n font-weight: inherit;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Clear button /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--clear::part(button) {\n // Since the clear button is inside the input group control,\n // we need to reset the focus ring styles\n --bq-ring-width: initial;\n --bq-ring-offset-width: initial;\n --bq-ring-color-focus: initial;\n\n @apply rounded-xs border-none p-0 bs-auto;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Prefix and suffix /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n.bq-select__tags {\n @apply me-xs2 flex flex-1 gap-xs2;\n\n bq-tag,\n ::slotted(bq-tag) {\n @apply inline-flex;\n }\n\n bq-tag::part(text) {\n @apply text-nowrap leading-small;\n }\n}\n\n/ -------------------------------------------------------------------------- /\n/ Slotted and internal icons /\n/ -------------------------------------------------------------------------- /\n\nbq-icon,\n::slotted(bq-icon) {\n --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport {\n debounce,\n hasSlotContent,\n isDefined,\n isHTMLElement,\n isNil,\n stringToArray,\n TDebounce,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string \| string[];\n\n/\n The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.\n \n @example How to use it\n * ```html\n * <bq-select placeholder=\"Placeholder\">\n * <label slot=\"label\">Select label</label>\n * <span slot=\"helper-text\">\n * <bq-icon name=\"star\"></bq-icon>\n * Helper text\n * </span>\n \n <bq-option value=\"1\">Option 1</bq-option>\n * <bq-option value=\"2\">Option 2</bq-option>\n * <bq-option value=\"3\">Option 3</bq-option>\n * </bq-select>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/41989d-select/b/09d7b1\n * @status stable\n \n @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n * @dependency bq-option-list\n * @dependency bq-tag\n \n @attr {boolean} autofocus - If `true`, the Select input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.\n * @attr {string} form - The ID of the form that Select input field belongs to.\n * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.\n * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.\n * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.\n * @attr {string} name - The Select input name.\n * @attr {boolean} open - If `true`, the Select panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Select panel.\n * @attr {string} placeholder - The Select input placeholder text value.\n * @attr {\"bottom\" \| \"bottom-end\" \| \"bottom-start\" \| \"left\" \| \"left-end\" \| \"left-start\" \| \"right\" \| \"right-end\" \| \"right-start\" \| \"top\" \| \"top-end\" \| \"top-start\"} placement - Position of the Select panel.\n * @attr {boolean} readonly - If `true`, the Select input cannot be modified.\n * @attr {boolean} required - Indicates whether or not the Select input is required to be filled out before submitting the form.\n * @attr {boolean} same-width - Whether the panel should have the Select same width as the input element.\n * @attr {number} skidding - Represents the skidding between the Select panel and the input element.\n * @attr {\"absolute\" \| \"fixed\"} strategy - Defines the strategy to position the Select panel.\n * @attr {\"error\" \| \"success\" \| \"warning\" \| \"none\"} validation-status - The validation status of the Select input.\n * @attr {\"number\" \| \"string\" \| \"string[]\"} value - The select input value can be used to reset the field to a previous value.\n \n @method clear - Method to be called to clear the selected value.\n \n @event bqBlur - The callback handler is emitted when the Select input loses focus.\n * @event bqClear - The callback handler is emitted when the selected value has been cleared.\n * @event bqFocus - A callback handler is emitted when the Select input has received focus.\n * @event bqSelect - The callback handler is emitted when the selected value has changed.\n \n @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot tags - The tags slot container.\n * @slot clear-icon - The clear icon slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\n \n @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n \n @cssprop --bq-select--background-color - Select background color\n * @cssprop --bq-select--border-color - Select border color\n * @cssprop --bq-select--border-color-focus - Select border color on focus\n * @cssprop --bq-select--border-color-disabled - Select border color when disabled\n * @cssprop --bq-select--border-radius - Select border radius\n * @cssprop --bq-select--border-width - Select border width\n * @cssprop --bq-select--border-style - Select border style\n * @cssprop --bq-select--gap - Gap between Select content and prefix/suffix\n * @cssprop --bq-select--helper-margin-top - Helper text margin top\n * @cssprop --bq-select--helper-text-color - Helper text color\n * @cssprop --bq-select--helper-text-size - Helper text size\n * @cssprop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-select--label-margin-bottom - Select label margin bottom\n * @cssprop --bq-select--label-text-color - Select label text color\n * @cssprop --bq-select--label-text-size - Select label text size\n * @cssprop --bq-select--padding-start - Select padding start\n * @cssprop --bq-select--padding-end - Select padding end\n * @cssprop --bq-select--paddingY - Select padding top and bottom\n * @cssprop --bq-select--text-color - Select text color\n * @cssprop --bq-select--text-size - Select text size\n * @cssprop --bq-select--text-placeholder-color - Select placeholder text color\n /\n@Component({\n tag: 'bq-select',\n styleUrl: './scss/bq-select.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSelect {\n // Own Properties\n // ====================\n\n private helperTextElem?: HTMLElement;\n private inputElem?: HTMLInputElement;\n private labelElem?: HTMLElement;\n private prefixElem?: HTMLElement;\n private suffixElem?: HTMLElement;\n\n private debounceQuery: TDebounce<void>;\n private debounceInput: TDebounce<void>;\n\n private fallbackInputId = 'select';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSelectElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() displayValue?: string;\n @State() hasHelperText = false;\n @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If true, the Select input will be focused on component render /\n @Prop({ reflect: true }) autofocus: boolean;\n\n /* The clear button aria label /\n @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n /\n The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input 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 Select panel will not lock the page body scroll when open. /\n @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n /\n Indicates whether the Select input is disabled or not.\n * If `true`, the Select is disabled and cannot be interacted with.\n /\n @Prop({ mutable: true }) disabled?: boolean = false;\n\n /* If true, the clear button won't be displayed /\n @Prop({ reflect: true }) disableClear? = false;\n\n /* Represents the distance (gutter or margin) between the Select panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The ID of the form that the Select input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* If true, the Select panel will remain open after a selection is made. /\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /* The Select input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* The maximum number of tags to display when multiple selection is enabled /\n @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n /* If true, the Select input will allow multiple selections. /\n @Prop({ reflect: true }) multiple?: boolean = false;\n\n /* If true, the Select panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Select panel. /\n @Prop({ reflect: true }) panelHeight?: string;\n\n /* The Select input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Select panel /\n @Prop({ reflect: true }) placement?: Placement = 'bottom';\n\n /* If true, the list of options cannot be filtered (searching won't be available) /\n @Prop({ reflect: true }) readonly?: boolean;\n\n /* Indicates whether or not the Select input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Whether the panel should have the Select same width as the input element /\n @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n /* Represents the skidding between the Select panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Defines the strategy to position the Select panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The input has a validation error.\n * - `'warning'`: The input has a validation warning.\n * - `'success'`: The input has passed validation.\n /\n @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n /* The select input value, it can be used to reset the field to a previous value /\n @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n // Early return for undefined/null values\n if (isNil(this.value)) {\n this.value = this.multiple ? [] : '';\n this.internals.setFormValue(undefined);\n this.syncItemsFromValue();\n return;\n }\n\n // Handle multiple selection mode\n if (this.multiple) {\n this.value = stringToArray(this.value);\n this.internals.setFormValue(this.value.join(','));\n this.syncItemsFromValue();\n\n return;\n }\n\n // Handle single selection mode\n this.value = String(this.value);\n this.internals.setFormValue(this.value);\n this.syncItemsFromValue();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the Select input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the Select input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has changed /\n @Event() bqSelect!: EventEmitter<{ value: string \| number \| string[]; item: HTMLBqOptionElement }>;\n\n /* Callback handler emitted when the Select input changes its value while typing /\n @Event() bqInput: EventEmitter<{ value: string \| number \| string[] }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.initMultipleValue();\n }\n\n componentWillLoad() {\n this.initMultipleValue();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n }\n this.handleValueChange();\n }\n\n formAssociatedCallback() {\n this.internals.role = 'combobox';\n this.internals.ariaExpanded = this.open ? 'true' : 'false';\n }\n\n async formResetCallback() {\n if (isNil(this.value)) return;\n\n this.internals.setValidity({});\n this.clear();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n }\n\n @Listen('bqFocus', { capture: true })\n @Listen('bqBlur', { capture: true })\n stopOptionFocusBlurPropagation(ev: CustomEvent) {\n // Stop propagation of focus and blur events coming from the `bq-option` elements\n if (isHTMLElement(ev.target, 'bq-select')) return;\n\n ev.stopPropagation();\n }\n\n @Listen('scroll', { target: 'window', passive: true, capture: true })\n handleScrollEvent() {\n if (!this.open \|\| this.disableScrollLock) return;\n\n // Close the panel when the scroll event is triggered.\n // This is useful for those cases where the floating panel is inside a scrollable container.\n // For example, a select inside a dialog, drawer, etc.\n // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n this.open = false;\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 Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n const { multiple, inputElem, bqClear, el } = this;\n\n // Clear value and selected options\n this.value = '';\n this.selectedOptions = [];\n\n // Clear display value and input element if not multiple\n if (!multiple) {\n this.displayValue = '';\n inputElem.value = '';\n }\n\n // Update form value and reset options visibility\n this.resetOptionsVisibility();\n\n // Emit clear event\n bqClear.emit(el);\n }\n\n /\n Resets the Select input to a previous value.\n \n @param {TSelectValue} value - The value to reset the Select input to.\n * @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async reset(value: TSelectValue): Promise<void> {\n if (isNil(value)) return;\n\n this.value = value;\n this.syncItemsFromValue();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private initMultipleValue = () => {\n if (!this.multiple) return;\n\n this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n if (this.disabled) return;\n\n if (this.multiple) {\n ev.stopPropagation();\n }\n\n const { value, item } = ev.detail;\n\n if (this.multiple) {\n this.handleMultipleSelection(item);\n // Clear the input value after selecting an item\n this.inputElem.value = '';\n // If multiple selection is enabled, emit the selected items array instead of relying on\n // the option list to emit the value of the selected item\n this.bqSelect.emit({ value: this.value, item });\n } else {\n this.value = value;\n }\n\n this.resetOptionsVisibility();\n this.inputElem.focus();\n };\n\n private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n const selectedOptionsSet = new Set(this.selectedOptions);\n\n if (selectedOptionsSet.has(item)) {\n selectedOptionsSet.delete(item);\n } else {\n selectedOptionsSet.add(item);\n }\n\n this.selectedOptions = Array.from(selectedOptionsSet);\n this.value = this.selectedOptions.map((item) => item.value);\n };\n\n private handleSearchFilter = (value: string) => {\n if (this.disabled) return;\n\n this.debounceQuery?.cancel();\n\n if (!isDefined(value)) {\n this.clear();\n } else {\n this.debounceQuery = debounce(() => {\n this.options.forEach((item: HTMLBqOptionElement) => {\n const itemLabel = this.getOptionLabel(item).toLowerCase();\n item.hidden = !itemLabel.includes(value);\n });\n }, this.debounceTime);\n\n this.debounceQuery();\n }\n\n // The panel will close once a selection is made\n // so we need to make sure it's open when the user is typing and the query is not empty\n this.open = true;\n };\n\n private handleInput = (ev: Event) => {\n if (this.disabled) return;\n\n const { value } = ev.target as HTMLInputElement;\n\n this.debounceInput?.cancel();\n\n this.debounceInput = debounce(() => {\n const inputEvent = this.bqInput.emit({ value });\n if (!inputEvent.defaultPrevented) {\n // Continue with search filtering only if the event wasn't prevented\n this.handleSearchFilter(value);\n }\n }, this.debounceTime);\n\n this.debounceInput();\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n (async () => {\n await this.clear();\n })();\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleTagRemove = (item: HTMLBqOptionElement) => {\n if (this.disabled) return;\n\n this.handleMultipleSelection(item);\n this.bqSelect.emit({ value: this.value, item });\n };\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n this.hasPrefix = hasSlotContent(this.prefixElem);\n this.hasSuffix = hasSlotContent(this.suffixElem);\n this.hasHelperText = hasSlotContent(this.helperTextElem);\n };\n\n private resetOptionsVisibility = () => {\n this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n };\n\n private syncItemsFromValue = () => {\n const { internals, options, value } = this;\n if (!options.length) return;\n\n // Sync selected state of the BqOption elements\n this.syncSelectedOptionsState();\n\n if (this.multiple) {\n // Sync selected options for multiple selection mode\n this.selectedOptions = options.filter((option) => this.value?.includes(option.value));\n }\n\n // Always update display value and form value\n this.updateDisplayLabel();\n internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n };\n\n /\n Syncs the selected state of the BqOption elements which value is included in the `value` property.\n * Notice that value can be a string or an array of strings.\n \n @private\n * @memberof BqSelect\n /\n private syncSelectedOptionsState = () => {\n const { options, multiple, value } = this;\n const lowerCaseValue = String(value).toLowerCase();\n\n options.forEach((option: HTMLBqOptionElement) => {\n if (multiple && Array.isArray(value)) {\n option.selected = value.includes(option.value);\n } else {\n option.selected = option.value.toLowerCase() === lowerCaseValue;\n }\n });\n };\n\n /\n Updates the display value of the input element based on the selected option.\n \n @private\n * @memberof BqSelect\n /\n private updateDisplayLabel = () => {\n const { value, options, inputElem } = this;\n\n const checkedItem = options.find((item) => item.value === value);\n const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n\n inputElem.value = displayValue;\n this.displayValue = displayValue;\n };\n\n private getOptionLabel = (item: HTMLBqOptionElement) => {\n if (!item) return '';\n return item.innerText.trim() ?? '';\n };\n\n private get options() {\n return Array.from(this.el.querySelectorAll('bq-option'));\n }\n\n private get displayPlaceholder() {\n // Hide the placeholder when multiple selection is enabled and there are selected items\n return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n }\n\n private get displayTags() {\n return this.selectedOptions.map((item, index) => {\n if (index < this.maxTagsVisible \|\| this.maxTagsVisible < 0) {\n return (\n <bq-tag\n key={item.value}\n removable\n size=\"xsmall\"\n variant=\"filled\"\n onBqClose={(event) => {\n // NOTE: prevents triggering bqClose on parent\n event.stopPropagation();\n this.handleTagRemove(item);\n }}\n // Prevent the tag from closing the panel when clicked\n onClick={(ev: MouseEvent) => ev.stopPropagation()}\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n {this.getOptionLabel(item)}\n </bq-tag>\n );\n } else if (index === this.maxTagsVisible) {\n return (\n <bq-tag\n key=\"more\"\n size=\"xsmall\"\n variant=\"filled\"\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n +{this.selectedOptions.length - index}\n </bq-tag>\n );\n }\n\n return null;\n });\n }\n\n private get hasClearIcon() {\n if (this.disableClear \|\| this.disabled) {\n return false;\n }\n\n if (this.multiple) {\n return this.selectedOptions.length > 0;\n }\n\n return isDefined(this.displayValue);\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const labelId = `bq-select__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-select\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n aria-label={this.name \|\| this.fallbackInputId}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n </label>\n {/ Select dropdown /}\n <bq-dropdown\n class=\"bq-select__dropdown w-full\"\n disableScrollLock={this.disableScrollLock}\n disabled={this.disabled}\n distance={this.distance}\n keepOpenOnSelect={this.keepOpenOnSelect}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-select__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n {/ Display selected values using BqTags for multiple selection /}\n {this.multiple && (\n <span class=\"bq-select__tags\" part=\"tags\">\n <slot name=\"tags\">{this.displayTags}</slot>\n </span>\n )}\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-select__control--input flex-grow is-full\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`bq-options-${this.name}`}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.displayPlaceholder}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n role=\"combobox\"\n spellcheck={false}\n type=\"text\"\n value={this.displayValue}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInput={this.handleInput}\n />\n </div>\n {/ Clear Button /}\n {this.hasClearIcon && (\n // The clear button will be visible as long as the input has a value\n // and the parent group is hovered or has focus-within\n <bq-button\n class=\"bq-select__control--clear ms-[--bq-select--gap]\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n tabIndex={-1}\n >\n <slot name=\"clear-icon\">\n <bq-icon name=\"x-circle\" class=\"flex\" />\n </slot>\n </bq-button>\n )}\n {/ Suffix /}\n <span\n class={{ 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n <bq-icon name=\"caret-down\" class=\"flex\" />\n </slot>\n </span>\n </div>\n <bq-option-list\n id={`bq-options-${this.name}`}\n onBqSelect={this.handleSelect}\n aria-expanded={this.open ? 'true' : 'false'}\n exportparts=\"base:option-list\"\n role=\"listbox\"\n >\n <slot />\n </bq-option-list>\n </bq-dropdown>\n {/ Helper text */}\n <div\n class={{\n [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}\n part=\"helper-text\"\n >\n <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-side-menu-item.entry.esm.js","sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Side menu item styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-side-menu-item.variables';\n\n:host {\n @apply block;\n}\n\n.bq-side-menu__item {\n @apply flex items-center gap-x-s rounded-s px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n // Default state\n @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n // Focus state\n @apply [&:not(.disabled)]:focus-visible:focus;\n\n // Hover state\n @apply [&:not(.disabled)]:hover:cursor-pointer;\n\n &:not(.disabled, .active):hover {\n @apply hover:bg-[var(--bq-side-menu-item--bg-hover)] hover:text-m hover:text-[color:var(--bq-side-menu-item--text-hover)];\n }\n}\n\n.bq-side-menu__item.active {\n // Active state\n @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n @apply justify-center gap-0;\n\n .bq-side-menu__item--label,\n .bq-side-menu__item--suffix {\n @apply sr-only scale-0;\n }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, Fragment, h, Prop, State } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/\n Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n \n @example How to use it\n * ```html\n * <bq-side-menu-item>\n * <bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\n * Menu item\n * <bq-badge slot=\"suffix\">5</bq-badge>\n * </bq-side-menu-item>\n * ```\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n \n @dependency bq-tooltip\n \n @attr {boolean} active - If `true`, the menu item will be shown as active/selected.\n * @attr {boolean} collapse - If `true`, the item label and suffix will be hidden and the with will be reduced according to its parent.\n * @attr {boolean} disabled - If `true`, the menu item will be disabled (no interaction allowed).\n \n @event bqBlur - Handler to be called when the button loses focus.\n * @event bqClick - Handler to be called when the button gets focused.\n * @event bqFocus - Handler to be called when the button is clicked.\n \n @slot prefix - The prefix part of menu item.\n * @slot - The content of the menu item.\n * @slot suffix - The suffix part of menu item.\n \n @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n \n @cssprop --bq-side-menu-item--bg-default - Side menu item default background color\n * @cssprop --bq-side-menu-item--bg-hover - Side menu item hover background color\n * @cssprop --bq-side-menu-item--bg-active - Side menu item active background color\n * @cssprop --bq-side-menu-item--text-default - Side menu item default text color\n * @cssprop --bq-side-menu-item--text-hover - Side menu item hover text color\n * @cssprop --bq-side-menu-item--text-active - Side menu item active text color\n * @cssprop --bq-side-menu-item--text-disabled - Side menu item disable text color\n * @cssprop --bq-side-menu-item--paddingX - Side menu item vertical padding\n * @cssprop --bq-side-menu-item--paddingY - Side menu item horizontal padding\n /\n@Component({\n tag: 'bq-side-menu-item',\n styleUrl: './scss/bq-side-menu-item.scss',\n shadow: true,\n})\nexport class BqSideMenuItem {\n // Own Properties\n // ====================\n\n private labelElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSideMenuItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() textContent: string;\n\n // Public Property API\n // ========================\n\n /* If true, the menu item will be shown as active/selected. /\n @Prop() active: boolean = false;\n\n /* If true, the item label and suffix will be hidden and the with will be reduce according to its parent /\n @Prop() collapse: boolean = false;\n\n /* If true, the menu item will be disabled (no interaction allowed) /\n @Prop() disabled: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n /* Handler to be called when the button is clicked /\n @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n /* Handler to be called when button gets focus /\n @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleSlotChange = () => {\n if (!this.labelElem) return;\n this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n };\n\n handleBlur = (ev: Event) => {\n if (this.disabled) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n this.bqBlur.emit(this.el);\n };\n\n handleFocus = (ev: Event) => {\n if (this.disabled) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n this.bqFocus.emit(this.el);\n };\n\n handleClick = (ev: Event) => {\n if (this.disabled) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n this.bqClick.emit(this.el);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n private menuItem = () => (\n <Fragment>\n {/ eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n <a\n class={{\n 'bq-side-menu__item': true,\n active: this.active,\n disabled: this.disabled,\n 'is-collapsed': this.collapse,\n }}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n aria-disabled={this.disabled ? 'true' : 'false'}\n role=\"menuitem\"\n tabindex={this.disabled ? -1 : 0}\n slot=\"trigger\"\n part=\"base\"\n >\n <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n <slot name=\"prefix\" />\n </div>\n <div\n class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n ref={(labelElem) => (this.labelElem = labelElem)}\n >\n <slot onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n <slot name=\"suffix\" />\n </div>\n </a>\n </Fragment>\n );\n\n render() {\n return !this.collapse ? (\n this.menuItem()\n ) : (\n <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n {this.textContent}\n {this.menuItem()}\n </bq-tooltip>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"bq-side-menu-item.entry.esm.js","sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Side menu item styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-side-menu-item.variables';\n\n:host {\n @apply flex;\n}\n\n.bq-side-menu__item {\n @apply flex flex-grow items-center gap-x-s rounded-s border-none px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n // Default state\n @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n // Focus state\n @apply [&:not(.disabled)]:focus-visible:focus;\n\n // Hover state\n @apply [&:not(.disabled)]:hover:cursor-pointer;\n @apply [&:not(.disabled,.active)]:hover:text-m [&:not(.disabled,.active)]:hover:bg-hover-ui-alt [&:not(.disabled,.active)]:hover:text-hover-primary;\n}\n\n.bq-side-menu__item.active {\n // Active state\n @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n @apply justify-center gap-0;\n\n .bq-side-menu__item--label,\n .bq-side-menu__item--suffix {\n @apply sr-only scale-0;\n }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, h, Prop, State } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/\n Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n \n @example How to use it\n * ```html\n * <bq-side-menu-item>\n * <bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\n * Menu item\n * <bq-badge slot=\"suffix\">5</bq-badge>\n * </bq-side-menu-item>\n * ```\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n \n @dependency bq-tooltip\n \n @attr {boolean} active - If `true`, the menu item will be shown as active/selected.\n * @attr {boolean} collapse - If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.\n * @attr {boolean} disabled - If `true`, the menu item will be disabled (no interaction allowed).\n \n @event bqBlur - Handler to be called when the button loses focus.\n * @event bqClick - Handler to be called when the button gets focused.\n * @event bqFocus - Handler to be called when the button is clicked.\n \n @slot prefix - The prefix part of menu item.\n * @slot - The content of the menu item.\n * @slot suffix - The suffix part of menu item.\n \n @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n \n @cssprop --bq-side-menu-item--bg-default - Side menu item default background color\n * @cssprop --bq-side-menu-item--bg-active - Side menu item active background color\n * @cssprop --bq-side-menu-item--text-default - Side menu item default text color\n * @cssprop --bq-side-menu-item--text-active - Side menu item active text color\n * @cssprop --bq-side-menu-item--paddingX - Side menu item vertical padding\n * @cssprop --bq-side-menu-item--paddingY - Side menu item horizontal padding\n /\n@Component({\n tag: 'bq-side-menu-item',\n styleUrl: './scss/bq-side-menu-item.scss',\n shadow: true,\n})\nexport class BqSideMenuItem {\n // Own Properties\n // ====================\n\n private labelElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSideMenuItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() textContent: string;\n\n // Public Property API\n // ========================\n\n /* If true, the menu item will be shown as active/selected. /\n @Prop() active: boolean = false;\n\n /* If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent. /\n @Prop() collapse: boolean = false;\n\n /* If true, the menu item will be disabled (no interaction allowed) /\n @Prop() disabled: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n /* Handler to be called when the button is clicked /\n @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n /* Handler to be called when button gets focus */\n @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleSlotChange = () => {\n if (!this.labelElem) return;\n this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n };\n\n handleBlur = (ev: Event) => {\n if (this.disabled) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n this.bqBlur.emit(this.el);\n };\n\n handleFocus = (ev: Event) => {\n if (this.disabled) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n this.bqFocus.emit(this.el);\n };\n\n handleClick = (ev: Event) => {\n if (this.disabled \|\| this.active) {\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n\n this.bqClick.emit(this.el);\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n private menuItem = () => (\n <button\n class={{\n 'bq-side-menu__item': true,\n active: this.active,\n disabled: this.disabled,\n 'is-collapsed': this.collapse,\n }}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n aria-disabled={this.disabled ? 'true' : 'false'}\n role=\"menuitem\"\n tabindex={this.disabled ? -1 : 0}\n slot=\"trigger\"\n part=\"base\"\n >\n <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n <slot name=\"prefix\" />\n </div>\n <div\n class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n ref={(labelElem) => (this.labelElem = labelElem)}\n >\n <slot onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n <slot name=\"suffix\" />\n </div>\n </button>\n );\n\n render() {\n return !this.collapse ? (\n this.menuItem()\n ) : (\n <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n {this.textContent}\n {this.menuItem()}\n </bq-tooltip>\n );\n }\n}\n"],"names":[],"mappings":"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"}