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

@beeq/core 1.8.4 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (910) hide show

package/dist/collection/components/accordion/bq-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-accordion.js","sourceRoot":"","sources":["../../../../../../src/components/accordion/bq-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { ACCORDION_APPEARANCE, ACCORDION_SIZE, TAccordionAppearance, TAccordionSize } from './bq-accordion.types';\nimport { Accordion } from './helper';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/*\n The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n \n @example How to use it\n * ```html\n * <bq-accordion appearance=\"filled\" size=\"medium\">\n * <bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n * <h3 slot=\"header\">Header</h3>\n * <div>Lorem ipsum dolor...</div>\n * </bq-accordion>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/713eae-accordion\n * @status stable\n \n @dependency bq-icon\n \n @attr {\"filled\" \| \"ghost\"} [appearance=\"filled\"] - The appearance style of the Accordion\n * @attr {boolean} [disabled=false] - If true, the Accordion is disabled\n * @attr {boolean} [expanded=false] - If true, the Accordion is expanded\n * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.\n * @attr {boolean} [rotate=false] - If true, the Accordion expand icon is rotate 180deg when expanded\n * @attr {\"small\" \| \"medium\"} [size=\"medium\"] - The size of the the Accordion\n \n @event bqOpen - Handler to be called when the accordion is opened\n * @event bqAfterOpen - Handler to be called after the accordion is opened\n * @event bqClose - Handler to be called when the accordion is closed\n * @event bqAfterClose - Handler to be called after the accordion is closed\n * @event bqFocus - Handler to be called when the accordion gets focus\n * @event bqClick - Handler to be called when the accordion is clicked\n * @event bqBlur - Handler to be called when the accordion loses focus\n \n @slot - The accordion panel content\n * @slot collapse - The accordion collapse icon\n * @slot expand - The accordion expand icon\n * @slot header - The accordion header content\n * @slot prefix - The accordion prefix content (icon or avatar)\n * @slot suffix - The accordion suffix content (icon or avatar)\n \n @part base - The `<details>` that holds the accordion content\n * @part header - The `<summary>` that holds the accordion header content\n * @part panel - The `<div>` that holds the accordion panel content\n * @part prefix - The `<div>` that holds the accordion prefix content\n * @part suffix - The `<div>` that holds the accordion suffix content\n * @part text - The `<div>` that holds the accordion header text content\n \n @cssprop --bq-accordion--small-padding-y - Accordion small vertical padding\n * @cssprop --bq-accordion--small-padding-start - Accordion small start padding\n * @cssprop --bq-accordion--small-padding-end - Accordion small end padding\n * @cssprop --bq-accordion--small-padding-gap - Accordion small gap distance between suffix, title and prefix\n * @cssprop --bq-accordion--small-radius - Accordion small border radius\n \n @cssprop --bq-accordion--medium-padding-y - Accordion medium vertical padding\n * @cssprop --bq-accordion--medium-padding-start - Accordion medium start padding\n * @cssprop --bq-accordion--medium-padding-end - Accordion medium end padding\n * @cssprop --bq-accordion--medium-padding-gap - Accordion medium gap distance between suffix, title and prefix\n * @cssprop --bq-accordion--medium-radius - Accordion medium border radius\n \n @cssprop --bq-accordion--collapsed-border-color - Accordion collapsed border color\n * @cssprop --bq-accordion--collapsed-border-style - Accordion collapsed border style\n * @cssprop --bq-accordion--collapsed-border-width - Accordion collapsed border width\n \n @cssprop --bq-accordion--expanded-border-color - Accordion expanded border color\n * @cssprop --bq-accordion--expanded-border-style - Accordion expanded border style\n * @cssprop --bq-accordion--expanded-border-width - Accordion expanded border width\n \n @cssprop --bq-accordion--filled-collapsed-background - Accordion filled collapsed header background\n * @cssprop --bq-accordion--filled-collapsed-text-color - Accordion filled collapsed header text color\n * @cssprop --bq-accordion--filled-expanded-background - Accordion filled expanded header background\n * @cssprop --bq-accordion--filled-expanded-collapsed-hover - Accordion filled expanded header color on hover\n * @cssprop --bq-accordion--filled-expanded-text-color - Accordion filled expanded header text color\n \n @cssprop --bq-accordion--ghost-collapsed-background - Accordion ghost collapsed header background\n * @cssprop --bq-accordion--ghost-collapsed-text-color - Accordion ghost collapsed header text color\n * @cssprop --bq-accordion--ghost-expanded-background - Accordion ghost expanded header background\n * @cssprop --bq-accordion--ghost-expanded-collapsed-hover - Accordion ghost expanded header color on hover\n * @cssprop --bq-accordion--ghost-expanded-text-color - Accordion ghost expanded header text color\n \n @cssprop --bq-accordion--panel-filled-border-color - Accordion filled panel border color\n * @cssprop --bq-accordion--panel-filled-border-style - Accordion filled panel border style\n * @cssprop --bq-accordion--panel-filled-border-width - Accordion filled panel border width\n * @cssprop --bq-accordion--panel-small-filled-padding-y - Accordion small filled panel vertical padding\n * @cssprop --bq-accordion--panel-small-filled-padding-start - Accordion small filled panel start padding\n * @cssprop --bq-accordion--panel-small-filled-padding-end - Accordion small filled panel end padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-y - Accordion medium filled panel vertical padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-start - Accordion medium filled panel start padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-end - Accordion medium filled panel end padding\n \n @cssprop --bq-accordion--panel-ghost-border-color - Accordion ghost panel border color\n * @cssprop --bq-accordion--panel-ghost-border-style - Accordion ghost panel border style\n * @cssprop --bq-accordion--panel-ghost-border-width - Accordion ghost panel border width\n * @cssprop --bq-accordion--panel-small-ghost-padding-y - Accordion small ghost panel vertical padding\n * @cssprop --bq-accordion--panel-small-ghost-padding-start - Accordion small ghost panel start padding\n * @cssprop --bq-accordion--panel-small-ghost-padding-end - Accordion small ghost panel end padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-y - Accordion medium ghost panel vertical padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-start - Accordion medium ghost panel start padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-end - Accordion medium ghost panel end padding\n /\n@Component({\n tag: 'bq-accordion',\n styleUrl: './scss/bq-accordion.scss',\n shadow: true,\n})\nexport class BqAccordion {\n // Own Properties\n // ====================\n\n private accordion: Accordion;\n private prefixElem: HTMLDivElement;\n private suffixElem: HTMLDivElement;\n private detailsElem: HTMLDetailsElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAccordionElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /* The appearance style of the Accordion /\n @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n /* If true, the Accordion is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* If true, the Accordion is expanded /\n @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n /\n Animation is set through JS when the browser does not support CSS calc-size()\n * If true, the Accordion animation, will be disabled. No animation will be applied.\n /\n @Prop({ reflect: true }) noAnimation: boolean = false;\n\n /* If true, the Accordion expand icon is rotate 180deg when expanded /\n @Prop({ reflect: true }) rotate: boolean = false;\n\n /* The size of the Accordion /\n @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n checkPropValues() {\n validatePropValue(ACCORDION_SIZE, 'medium', this.el, 'size');\n validatePropValue(ACCORDION_APPEARANCE, 'filled', this.el, 'appearance');\n }\n\n @Watch('expanded')\n handleExpandedChange() {\n const event = this.expanded ? this.bqOpen.emit(this.el) : this.bqClose.emit(this.el);\n if (event.defaultPrevented) {\n this.expanded = !this.expanded;\n return;\n }\n\n if (this.expanded) {\n this.accordion?.open();\n } else {\n this.accordion?.close();\n }\n if (!this.isCssInterpolateSizeSupported) return;\n\n // NOTE: This is a workaround to trigger the transitionEnd event\n // when the open/close animation is handled via CSS instead of JS\n setTimeout(() => {\n this.el.dispatchEvent(new CustomEvent('accordionTransitionEnd', { bubbles: false, composed: true }));\n }, 200);\n }\n\n @Watch('disabled')\n handleDisabledChange() {\n if (!this.disabled) return;\n\n this.expanded = false;\n }\n\n @Watch('noAnimation')\n handleJsAnimation() {\n if (this.isCssInterpolateSizeSupported) return;\n\n console.warn(\n `[bq-accordion] animating to/from intrinsic sizing keywords (interpolate-size: allow-keywords) is not supported and animation will be set through JS.\n For vertical layout, consider using the 'noAnimation' prop ('no-animation' attribute) to disable it`,\n );\n this.accordion = !this.noAnimation ? new Accordion(this.detailsElem) : null;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the accordion loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion is opened /\n @Event() bqOpen: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called after the accordion is opened /\n @Event() bqAfterOpen: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion is closed /\n @Event() bqClose: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called after the accordion is closed /\n @Event() bqAfterClose: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion is clicked */\n @Event() bqClick: EventEmitter<HTMLBqAccordionElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleJsAnimation();\n this.handleExpandedChange();\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('accordionTransitionEnd')\n onAccordionTransitionEnd(event: CustomEvent) {\n event.stopPropagation();\n if (event.target !== this.el) return;\n\n if (this.expanded) {\n this.bqAfterOpen.emit(this.el);\n return;\n }\n\n this.bqAfterClose.emit(this.el);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = (event: MouseEvent) => {\n event.preventDefault();\n\n if (this.disabled) return;\n\n this.bqClick.emit(this.el);\n this.expanded = !this.expanded;\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private get open() {\n return this.expanded && !this.disabled;\n }\n\n private get isCssInterpolateSizeSupported() {\n return window.CSS?.supports('(interpolate-size: allow-keywords)');\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <details\n class={{\n [`bq-accordion overflow-hidden ${this.size} ${this.appearance}`]: true,\n 'no-animation': this.noAnimation,\n disabled: this.disabled,\n }}\n ref={(detailsElem: HTMLDetailsElement) => (this.detailsElem = detailsElem)}\n open={this.open}\n part=\"base\"\n >\n <summary\n id=\"bq-accordion__header\"\n class=\"bq-accordion__header\"\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-expanded={this.expanded ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls=\"bq-accordion__content\"\n tabindex={this.disabled ? -1 : 0}\n role=\"button\"\n part=\"header\"\n >\n <div\n ref={(element) => (this.prefixElem = element)}\n class={{ 'bq-accordion__header--prefix': true, '!hidden': !this.hasPrefix }}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"bq-accordion__header--text\" part=\"text\">\n <slot name=\"header\" />\n </div>\n <div\n ref={(element) => (this.suffixElem = element)}\n class={{ 'bq-accordion__header--suffix': true, '!hidden': !this.hasSuffix }}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </div>\n <div\n class={{\n 'flex items-center justify-center transition-transform duration-300 ease-in-out': true,\n '!hidden': this.open && !this.rotate,\n 'rotate-180': this.rotate && this.open,\n }}\n aria-hidden=\"true\"\n >\n <slot name=\"expand\">\n <bq-icon name=\"plus\" />\n </slot>\n </div>\n <div\n class={{ 'flex items-center justify-center': true, '!hidden': (!this.open && !this.rotate) \|\| this.rotate }}\n aria-hidden=\"true\"\n >\n <slot name=\"collapse\">\n <bq-icon name=\"minus\" />\n </slot>\n </div>\n </summary>\n <div\n class=\"bq-accordion__body overflow-hidden\"\n aria-labelledby=\"bq-accordion__header\"\n role=\"region\"\n part=\"panel\"\n >\n <slot id=\"bq-accordion__content\" class=\"bq-accordion__content block\" />\n </div>\n </details>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-accordion.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/accordion/bq-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { ACCORDION_APPEARANCE, ACCORDION_SIZE } from './bq-accordion.types';\nimport type { TAccordionAppearance, TAccordionSize } from './bq-accordion.types';\nimport { Accordion } from './helper';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n/*\n The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n \n @example How to use it\n * ```html\n * <bq-accordion appearance=\"filled\" size=\"medium\">\n * <bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n * <h3 slot=\"header\">Header</h3>\n * <div>Lorem ipsum dolor...</div>\n * </bq-accordion>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/713eae-accordion\n * @status stable\n \n @dependency bq-icon\n \n @attr {\"filled\" \| \"ghost\"} [appearance=\"filled\"] - The appearance style of the Accordion\n * @attr {boolean} [disabled=false] - If true, the Accordion is disabled\n * @attr {boolean} [expanded=false] - If true, the Accordion is expanded\n * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.\n * @attr {boolean} [rotate=false] - If true, the Accordion expand icon is rotate 180deg when expanded\n * @attr {\"small\" \| \"medium\"} [size=\"medium\"] - The size of the the Accordion\n \n @event bqOpen - Handler to be called when the accordion is opened\n * @event bqAfterOpen - Handler to be called after the accordion is opened\n * @event bqClose - Handler to be called when the accordion is closed\n * @event bqAfterClose - Handler to be called after the accordion is closed\n * @event bqFocus - Handler to be called when the accordion gets focus\n * @event bqClick - Handler to be called when the accordion is clicked\n * @event bqBlur - Handler to be called when the accordion loses focus\n \n @slot - The accordion panel content\n * @slot collapse - The accordion collapse icon\n * @slot expand - The accordion expand icon\n * @slot header - The accordion header content\n * @slot prefix - The accordion prefix content (icon or avatar)\n * @slot suffix - The accordion suffix content (icon or avatar)\n \n @part base - The `<details>` that holds the accordion content\n * @part header - The `<summary>` that holds the accordion header content\n * @part panel - The `<div>` that holds the accordion panel content\n * @part prefix - The `<div>` that holds the accordion prefix content\n * @part suffix - The `<div>` that holds the accordion suffix content\n * @part text - The `<div>` that holds the accordion header text content\n \n @cssprop --bq-accordion--small-padding-y - Accordion small vertical padding\n * @cssprop --bq-accordion--small-padding-start - Accordion small start padding\n * @cssprop --bq-accordion--small-padding-end - Accordion small end padding\n * @cssprop --bq-accordion--small-padding-gap - Accordion small gap distance between suffix, title and prefix\n * @cssprop --bq-accordion--small-radius - Accordion small border radius\n \n @cssprop --bq-accordion--medium-padding-y - Accordion medium vertical padding\n * @cssprop --bq-accordion--medium-padding-start - Accordion medium start padding\n * @cssprop --bq-accordion--medium-padding-end - Accordion medium end padding\n * @cssprop --bq-accordion--medium-padding-gap - Accordion medium gap distance between suffix, title and prefix\n * @cssprop --bq-accordion--medium-radius - Accordion medium border radius\n \n @cssprop --bq-accordion--collapsed-border-color - Accordion collapsed border color\n * @cssprop --bq-accordion--collapsed-border-style - Accordion collapsed border style\n * @cssprop --bq-accordion--collapsed-border-width - Accordion collapsed border width\n \n @cssprop --bq-accordion--expanded-border-color - Accordion expanded border color\n * @cssprop --bq-accordion--expanded-border-style - Accordion expanded border style\n * @cssprop --bq-accordion--expanded-border-width - Accordion expanded border width\n \n @cssprop --bq-accordion--filled-collapsed-background - Accordion filled collapsed header background\n * @cssprop --bq-accordion--filled-collapsed-text-color - Accordion filled collapsed header text color\n * @cssprop --bq-accordion--filled-expanded-background - Accordion filled expanded header background\n * @cssprop --bq-accordion--filled-expanded-collapsed-hover - Accordion filled expanded header color on hover\n * @cssprop --bq-accordion--filled-expanded-text-color - Accordion filled expanded header text color\n \n @cssprop --bq-accordion--ghost-collapsed-background - Accordion ghost collapsed header background\n * @cssprop --bq-accordion--ghost-collapsed-text-color - Accordion ghost collapsed header text color\n * @cssprop --bq-accordion--ghost-expanded-background - Accordion ghost expanded header background\n * @cssprop --bq-accordion--ghost-expanded-collapsed-hover - Accordion ghost expanded header color on hover\n * @cssprop --bq-accordion--ghost-expanded-text-color - Accordion ghost expanded header text color\n \n @cssprop --bq-accordion--panel-filled-border-color - Accordion filled panel border color\n * @cssprop --bq-accordion--panel-filled-border-style - Accordion filled panel border style\n * @cssprop --bq-accordion--panel-filled-border-width - Accordion filled panel border width\n * @cssprop --bq-accordion--panel-small-filled-padding-y - Accordion small filled panel vertical padding\n * @cssprop --bq-accordion--panel-small-filled-padding-start - Accordion small filled panel start padding\n * @cssprop --bq-accordion--panel-small-filled-padding-end - Accordion small filled panel end padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-y - Accordion medium filled panel vertical padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-start - Accordion medium filled panel start padding\n * @cssprop --bq-accordion--panel-medium-filled-padding-end - Accordion medium filled panel end padding\n \n @cssprop --bq-accordion--panel-ghost-border-color - Accordion ghost panel border color\n * @cssprop --bq-accordion--panel-ghost-border-style - Accordion ghost panel border style\n * @cssprop --bq-accordion--panel-ghost-border-width - Accordion ghost panel border width\n * @cssprop --bq-accordion--panel-small-ghost-padding-y - Accordion small ghost panel vertical padding\n * @cssprop --bq-accordion--panel-small-ghost-padding-start - Accordion small ghost panel start padding\n * @cssprop --bq-accordion--panel-small-ghost-padding-end - Accordion small ghost panel end padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-y - Accordion medium ghost panel vertical padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-start - Accordion medium ghost panel start padding\n * @cssprop --bq-accordion--panel-medium-ghost-padding-end - Accordion medium ghost panel end padding\n /\n@Component({\n tag: 'bq-accordion',\n styleUrl: './scss/bq-accordion.scss',\n shadow: true,\n})\nexport class BqAccordion {\n // Own Properties\n // ====================\n\n private accordion: Accordion;\n private prefixElem: HTMLDivElement;\n private suffixElem: HTMLDivElement;\n private detailsElem: HTMLDetailsElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAccordionElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /* The appearance style of the Accordion /\n @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n /* If true, the Accordion is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* If true, the Accordion is expanded /\n @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n\n /\n Animation is set through JS when the browser does not support CSS calc-size()\n * If true, the Accordion animation, will be disabled. No animation will be applied.\n /\n @Prop({ reflect: true }) noAnimation: boolean = false;\n\n /* If true, the Accordion expand icon is rotate 180deg when expanded /\n @Prop({ reflect: true }) rotate: boolean = false;\n\n /* The size of the Accordion /\n @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n checkPropValues() {\n validatePropValue(ACCORDION_SIZE, 'medium', this.el, 'size');\n validatePropValue(ACCORDION_APPEARANCE, 'filled', this.el, 'appearance');\n }\n\n @Watch('expanded')\n handleExpandedChange() {\n const event = this.expanded ? this.bqOpen.emit(this.el) : this.bqClose.emit(this.el);\n if (event.defaultPrevented) {\n this.expanded = !this.expanded;\n return;\n }\n\n if (this.expanded) {\n this.accordion?.open();\n } else {\n this.accordion?.close();\n }\n if (!this.isCssInterpolateSizeSupported) return;\n\n // NOTE: This is a workaround to trigger the transitionEnd event\n // when the open/close animation is handled via CSS instead of JS\n setTimeout(() => {\n this.el.dispatchEvent(new CustomEvent('accordionTransitionEnd', { bubbles: false, composed: true }));\n }, 200);\n }\n\n @Watch('disabled')\n handleDisabledChange() {\n if (!this.disabled) return;\n\n this.expanded = false;\n }\n\n @Watch('noAnimation')\n handleJsAnimation() {\n if (this.isCssInterpolateSizeSupported) return;\n\n console.warn(\n `[bq-accordion] animating to/from intrinsic sizing keywords (interpolate-size: allow-keywords) is not supported and animation will be set through JS.\n For vertical layout, consider using the 'noAnimation' prop ('no-animation' attribute) to disable it`,\n );\n this.accordion = !this.noAnimation ? new Accordion(this.detailsElem) : null;\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the accordion loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion is opened /\n @Event() bqOpen: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called after the accordion is opened /\n @Event() bqAfterOpen: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion is closed /\n @Event() bqClose: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called after the accordion is closed /\n @Event() bqAfterClose: EventEmitter<HTMLBqAccordionElement>;\n\n /* Handler to be called when the accordion is clicked */\n @Event() bqClick: EventEmitter<HTMLBqAccordionElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleJsAnimation();\n this.handleExpandedChange();\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('accordionTransitionEnd')\n onAccordionTransitionEnd(event: CustomEvent) {\n event.stopPropagation();\n if (event.target !== this.el) return;\n\n if (this.expanded) {\n this.bqAfterOpen.emit(this.el);\n return;\n }\n\n this.bqAfterClose.emit(this.el);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = (event: MouseEvent) => {\n event.preventDefault();\n\n if (this.disabled) return;\n\n this.bqClick.emit(this.el);\n this.expanded = !this.expanded;\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private get open() {\n return this.expanded && !this.disabled;\n }\n\n private get isCssInterpolateSizeSupported() {\n return window.CSS?.supports('(interpolate-size: allow-keywords)');\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <details\n class={{\n [`bq-accordion overflow-hidden ${this.size} ${this.appearance}`]: true,\n 'no-animation': this.noAnimation,\n disabled: this.disabled,\n }}\n ref={(detailsElem: HTMLDetailsElement) => (this.detailsElem = detailsElem)}\n open={this.open}\n part=\"base\"\n >\n <summary\n id=\"bq-accordion__header\"\n class=\"bq-accordion__header\"\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-expanded={this.expanded ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls=\"bq-accordion__content\"\n tabindex={this.disabled ? -1 : 0}\n role=\"button\"\n part=\"header\"\n >\n <div\n ref={(element) => (this.prefixElem = element)}\n class={{ 'bq-accordion__header--prefix': true, '!hidden': !this.hasPrefix }}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </div>\n <div class=\"bq-accordion__header--text\" part=\"text\">\n <slot name=\"header\" />\n </div>\n <div\n ref={(element) => (this.suffixElem = element)}\n class={{ 'bq-accordion__header--suffix': true, '!hidden': !this.hasSuffix }}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </div>\n <div\n class={{\n 'flex items-center justify-center transition-transform duration-300 ease-in-out': true,\n '!hidden': this.open && !this.rotate,\n 'rotate-180': this.rotate && this.open,\n }}\n aria-hidden=\"true\"\n >\n <slot name=\"expand\">\n <bq-icon name=\"plus\" />\n </slot>\n </div>\n <div\n class={{ 'flex items-center justify-center': true, '!hidden': (!this.open && !this.rotate) \|\| this.rotate }}\n aria-hidden=\"true\"\n >\n <slot name=\"collapse\">\n <bq-icon name=\"minus\" />\n </slot>\n </div>\n </summary>\n <div\n class=\"bq-accordion__body overflow-hidden\"\n aria-labelledby=\"bq-accordion__header\"\n role=\"region\"\n part=\"panel\"\n >\n <slot id=\"bq-accordion__content\" class=\"bq-accordion__content block\" />\n </div>\n </details>\n );\n }\n}\n"]}

package/dist/collection/components/accordion/bq-accordion.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-accordion.types.js","sourceRoot":"","sources":["../../../../../../src/components/accordion/bq-accordion.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAG3D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const ACCORDION_SIZE = ['small', 'medium'] as const;\nexport type TAccordionSize = (typeof ACCORDION_SIZE)[number];\n\nexport const ACCORDION_APPEARANCE = ['filled', 'ghost'] as const;\nexport type TAccordionAppearance = (typeof ACCORDION_APPEARANCE)[number];\n"]}
1	+ {"version":3,"file":"bq-accordion.types.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/accordion/bq-accordion.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU,CAAC;AAG3D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const ACCORDION_SIZE = ['small', 'medium'] as const;\nexport type TAccordionSize = (typeof ACCORDION_SIZE)[number];\n\nexport const ACCORDION_APPEARANCE = ['filled', 'ghost'] as const;\nexport type TAccordionAppearance = (typeof ACCORDION_APPEARANCE)[number];\n"]}

package/dist/collection/components/accordion/helper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion/helper/index.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------------------- /\n/ 💡 Credits: https://css-tricks.com/how-to-animate-the-details-element-using-waapi /\n/ -------------------------------------------------------------------------------------- */\n\nexport class Accordion {\n private el: HTMLDetailsElement;\n private header: HTMLElement;\n private panel: HTMLElement;\n private animation: Animation \| null;\n private isClosing: boolean;\n private isExpanding: boolean;\n private animationOptions = {\n duration: 200,\n easing: 'ease-in-out',\n };\n\n constructor(el: HTMLDetailsElement) {\n // Store the <details> element\n this.el = el;\n // Store the <summary> header element\n this.header = el.querySelector('summary');\n // Store the <div class=\"content\"> element\n this.panel = el.querySelector('.bq-accordion__body');\n // Store the animation object (so we can cancel it, if needed)\n this.animation = null;\n // Store if the element is closing\n this.isClosing = false;\n // Store if the element is expanding\n this.isExpanding = false;\n }\n\n public open() {\n // Check if the element is being closed or is already closed\n if (!this.isClosing && this.el.open) return;\n // Apply a fixed height on the element\n this.el.style.height = `${this.el.offsetHeight}px`;\n // Force the [open] attribute on the details element\n this.el.open = true;\n // Wait for the next frame to call the expand function\n window.requestAnimationFrame(() => this.expand());\n }\n\n public close() {\n // Check if the element is being opened or is already open\n if (!this.isExpanding && !this.el.open) return;\n // Set the element as \"being closed\"\n this.isClosing = true;\n\n // Store the current height of the element\n const startHeight = `${this.el.offsetHeight}px`;\n // Calculate the height of the <summary> header\n const endHeight = `${this.header.offsetHeight}px`;\n\n // If there is already an animation running\n if (this.animation) {\n // Cancel the current animation\n this.animation.cancel();\n }\n\n // Start a WAAPI animation\n this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n // When the animation is complete, call onAnimationFinish()\n this.animation.onfinish = () => this.onAnimationFinish(false);\n // If the animation is cancelled, isClosing variable is set to false\n this.animation.oncancel = () => (this.isClosing = false);\n }\n\n // Expands the accordion\n private expand() {\n // Set the element as \"being expanding\"\n this.isExpanding = true;\n // Get the current fixed height of the element\n const startHeight = `${this.el.offsetHeight}px`;\n // Calculate the open height of the element (summary header height + panel body height)\n const endHeight = `${this.header.offsetHeight + this.panel.offsetHeight}px`;\n\n // If there is already an animation running\n if (this.animation) {\n // Cancel the current animation\n this.animation.cancel();\n }\n\n // Start a WAAPI animation\n this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n // When the animation is complete, call onAnimationFinish()\n this.animation.onfinish = () => this.onAnimationFinish(true);\n // If the animation is cancelled, isExpanding variable is set to false\n this.animation.oncancel = () => (this.isExpanding = false);\n }\n\n // Handles the end of the animation\n private onAnimationFinish(open: boolean) {\n // Set the open attribute based on the parameter\n this.el.open = open;\n // Clear the stored animation\n this.animation = null;\n // Reset isClosing & isExpanding\n this.isClosing = false;\n this.isExpanding = false;\n // Remove the overflow hidden and the fixed height\n this.el.removeAttribute('style');\n // Dispatch a custom event based on the open parameter\n const endEvent = new Event('accordionTransitionEnd', { bubbles: false, composed: true });\n this.el.dispatchEvent(endEvent);\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/beeq/src/components/accordion/helper/index.ts"],"names":[],"mappings":"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","sourcesContent":["/* -------------------------------------------------------------------------------------- /\n/ 💡 Credits: https://css-tricks.com/how-to-animate-the-details-element-using-waapi /\n/ -------------------------------------------------------------------------------------- */\n\nexport class Accordion {\n private el: HTMLDetailsElement;\n private header: HTMLElement;\n private panel: HTMLElement;\n private animation: Animation \| null;\n private isClosing: boolean;\n private isExpanding: boolean;\n private animationOptions = {\n duration: 200,\n easing: 'ease-in-out',\n };\n\n constructor(el: HTMLDetailsElement) {\n // Store the <details> element\n this.el = el;\n // Store the <summary> header element\n this.header = el.querySelector('summary');\n // Store the <div class=\"content\"> element\n this.panel = el.querySelector('.bq-accordion__body');\n // Store the animation object (so we can cancel it, if needed)\n this.animation = null;\n // Store if the element is closing\n this.isClosing = false;\n // Store if the element is expanding\n this.isExpanding = false;\n }\n\n public open() {\n // Check if the element is being closed or is already closed\n if (!this.isClosing && this.el.open) return;\n // Apply a fixed height on the element\n this.el.style.height = `${this.el.offsetHeight}px`;\n // Force the [open] attribute on the details element\n this.el.open = true;\n // Wait for the next frame to call the expand function\n window.requestAnimationFrame(() => this.expand());\n }\n\n public close() {\n // Check if the element is being opened or is already open\n if (!this.isExpanding && !this.el.open) return;\n // Set the element as \"being closed\"\n this.isClosing = true;\n\n // Store the current height of the element\n const startHeight = `${this.el.offsetHeight}px`;\n // Calculate the height of the <summary> header\n const endHeight = `${this.header.offsetHeight}px`;\n\n // If there is already an animation running\n if (this.animation) {\n // Cancel the current animation\n this.animation.cancel();\n }\n\n // Start a WAAPI animation\n this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n // When the animation is complete, call onAnimationFinish()\n this.animation.onfinish = () => this.onAnimationFinish(false);\n // If the animation is cancelled, isClosing variable is set to false\n this.animation.oncancel = () => (this.isClosing = false);\n }\n\n // Expands the accordion\n private expand() {\n // Set the element as \"being expanding\"\n this.isExpanding = true;\n // Get the current fixed height of the element\n const startHeight = `${this.el.offsetHeight}px`;\n // Calculate the open height of the element (summary header height + panel body height)\n const endHeight = `${this.header.offsetHeight + this.panel.offsetHeight}px`;\n\n // If there is already an animation running\n if (this.animation) {\n // Cancel the current animation\n this.animation.cancel();\n }\n\n // Start a WAAPI animation\n this.animation = this.el.animate({ height: [startHeight, endHeight] }, this.animationOptions);\n // When the animation is complete, call onAnimationFinish()\n this.animation.onfinish = () => this.onAnimationFinish(true);\n // If the animation is cancelled, isExpanding variable is set to false\n this.animation.oncancel = () => (this.isExpanding = false);\n }\n\n // Handles the end of the animation\n private onAnimationFinish(open: boolean) {\n // Set the open attribute based on the parameter\n this.el.open = open;\n // Clear the stored animation\n this.animation = null;\n // Reset isClosing & isExpanding\n this.isClosing = false;\n this.isExpanding = false;\n // Remove the overflow hidden and the fixed height\n this.el.removeAttribute('style');\n // Dispatch a custom event based on the open parameter\n const endEvent = new Event('accordionTransitionEnd', { bubbles: false, composed: true });\n this.el.dispatchEvent(endEvent);\n }\n}\n"]}

package/dist/collection/components/accordion-group/bq-accordion-group.js CHANGED Viewed

@@ -111,7 +111,7 @@ export class BqAccordionGroup {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '0cb47bc1f87226598dc90aad5eefb37926ae32b4', class: "flex flex-col gap-[--bq-accordion-group--gap]", part: "base" }, h("slot", { key: '2865f4184272dd10fa9bc60b62b147145ffedd09' })));
+        return (h("div", { key: '646cf8dd63e62a13b26ba00b5ed8800a2dd6bed4', class: "flex flex-col gap-[--bq-accordion-group--gap]", part: "base" }, h("slot", { key: 'efce7d88e22807675764ced32c76610c8106884f' })));
     }
     static get is() { return "bq-accordion-group"; }
     static get encapsulation() { return "shadow"; }
@@ -129,6 +129,7 @@ export class BqAccordionGroup {
         return {
             "appearance": {
                 "type": "string",
+                "attribute": "appearance",
                 "mutable": true,
                 "complexType": {
                     "original": "TAccordionAppearance",
@@ -149,12 +150,12 @@ export class BqAccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "appearance",
                 "reflect": true,
                 "defaultValue": "'filled'"
             },
             "expandAll": {
                 "type": "boolean",
+                "attribute": "expand-all",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -169,11 +170,11 @@ export class BqAccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand-all",
                 "reflect": true
             },
             "noAnimation": {
                 "type": "boolean",
+                "attribute": "no-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,12 +189,12 @@ export class BqAccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-animation",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -208,12 +209,12 @@ export class BqAccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "TAccordionSize",
@@ -234,7 +235,6 @@ export class BqAccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-accordion-group.js","sourceRoot":"","sources":["../../../../../../src/components/accordion-group/bq-accordion-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { isHTMLElement, isNil } from '../../shared/utils';\nimport { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';\n\n/*\n The accordion group component is a container for multiple accordion elements.\n * It allows to manage the appearance and size of all accordions at once.\n \n @example How to use it\n * ```html\n * <bq-accordion-group appearance=\"filled\" size=\"medium\">\n * <bq-accordion> ... </bq-accordion>\n * <bq-accordion> ... </bq-accordion>\n * <bq-accordion> ... </bq-accordion>\n * </bq-accordion-group>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/713eae-accordion\n * @status stable\n \n @attr {\"filled\" \| \"ghost\"} [appearance=\"filled\"] - The appearance style of accordion to be applied to all accordions\n * @attr {boolean} [expandAll=false] - If true all accordions are expanded\n * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.\n * @attr {boolean} [multiple=false] - If true multiple accordions can be expanded at the same time\n * @attr {\"small\" \| \"medium\"} [size=\"medium\"] - The size of accordion to be applied to all accordions\n \n @slot - The default slot where the bq-accordion elements are placed.\n \n @part base - The component's base wrapper.\n \n @cssprop --bq-accordion-group--gap - Accordion group distance between elements\n /\n@Component({\n tag: 'bq-accordion-group',\n styleUrl: './scss/bq-accordion-group.scss',\n shadow: true,\n})\nexport class BqAccordionGroup {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAccordionGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The appearance style of accordion to be applied to all accordions /\n @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n /* If true all accordions are expanded /\n @Prop({ reflect: true }) expandAll: boolean;\n\n /\n Animation is set through JS when the browser does not support CSS calc-size()\n * If true, the accordion animation, will be disabled. No animation will be applied.\n /\n @Prop({ reflect: true }) noAnimation: boolean = false;\n\n /* If true multiple accordions can be expanded at the same time /\n @Prop({ reflect: true }) multiple: boolean = false;\n\n /* The size of accordion to be applied to all accordions */\n @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('expandAll')\n @Watch('noAnimation')\n @Watch('size')\n checkPropValues() {\n this.bqAccordionElements.forEach((bqAccordionElement) => {\n // NOTE: if expandAll is nil we will keep accordion default state\n if (!isNil(this.expandAll)) {\n bqAccordionElement.expanded = this.expandAll;\n }\n bqAccordionElement.appearance = this.appearance;\n bqAccordionElement.noAnimation = this.noAnimation;\n bqAccordionElement.size = this.size;\n });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n @Listen('bqClick', { passive: true })\n onBqClick(event: CustomEvent<HTMLBqAccordionElement>) {\n const { detail: bqElem } = event;\n // Make sure the event is coming from a bq-accordion element and its a child of the bq-accordion-group\n if (!isHTMLElement(bqElem, 'bq-accordion') \|\| !this.el.contains(bqElem)) return;\n // We keep default behavior if multiple accordion can be expanded\n if (this.multiple) return;\n\n this.bqAccordionElements.forEach((bqAccordionElement) => {\n if (bqAccordionElement === event.detail) return;\n\n bqAccordionElement.expanded = false;\n });\n }\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqAccordionElements(): HTMLBqAccordionElement[] {\n return Array.from(this.el.querySelectorAll('bq-accordion'));\n }\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"flex flex-col gap-[--bq-accordion-group--gap]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-accordion-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/accordion-group/bq-accordion-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { isHTMLElement, isNil } from '../../shared/utils';\nimport type { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';\n\n/*\n The accordion group component is a container for multiple accordion elements.\n * It allows to manage the appearance and size of all accordions at once.\n \n @example How to use it\n * ```html\n * <bq-accordion-group appearance=\"filled\" size=\"medium\">\n * <bq-accordion> ... </bq-accordion>\n * <bq-accordion> ... </bq-accordion>\n * <bq-accordion> ... </bq-accordion>\n * </bq-accordion-group>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/713eae-accordion\n * @status stable\n \n @attr {\"filled\" \| \"ghost\"} [appearance=\"filled\"] - The appearance style of accordion to be applied to all accordions\n * @attr {boolean} [expandAll=false] - If true all accordions are expanded\n * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.\n * @attr {boolean} [multiple=false] - If true multiple accordions can be expanded at the same time\n * @attr {\"small\" \| \"medium\"} [size=\"medium\"] - The size of accordion to be applied to all accordions\n \n @slot - The default slot where the bq-accordion elements are placed.\n \n @part base - The component's base wrapper.\n \n @cssprop --bq-accordion-group--gap - Accordion group distance between elements\n /\n@Component({\n tag: 'bq-accordion-group',\n styleUrl: './scss/bq-accordion-group.scss',\n shadow: true,\n})\nexport class BqAccordionGroup {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAccordionGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The appearance style of accordion to be applied to all accordions /\n @Prop({ reflect: true, mutable: true }) appearance: TAccordionAppearance = 'filled';\n\n /* If true all accordions are expanded /\n @Prop({ reflect: true }) expandAll: boolean;\n\n /\n Animation is set through JS when the browser does not support CSS calc-size()\n * If true, the accordion animation, will be disabled. No animation will be applied.\n /\n @Prop({ reflect: true }) noAnimation: boolean = false;\n\n /* If true multiple accordions can be expanded at the same time /\n @Prop({ reflect: true }) multiple: boolean = false;\n\n /* The size of accordion to be applied to all accordions */\n @Prop({ reflect: true, mutable: true }) size: TAccordionSize = 'medium';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('expandAll')\n @Watch('noAnimation')\n @Watch('size')\n checkPropValues() {\n this.bqAccordionElements.forEach((bqAccordionElement) => {\n // NOTE: if expandAll is nil we will keep accordion default state\n if (!isNil(this.expandAll)) {\n bqAccordionElement.expanded = this.expandAll;\n }\n bqAccordionElement.appearance = this.appearance;\n bqAccordionElement.noAnimation = this.noAnimation;\n bqAccordionElement.size = this.size;\n });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n @Listen('bqClick', { passive: true })\n onBqClick(event: CustomEvent<HTMLBqAccordionElement>) {\n const { detail: bqElem } = event;\n // Make sure the event is coming from a bq-accordion element and its a child of the bq-accordion-group\n if (!isHTMLElement(bqElem, 'bq-accordion') \|\| !this.el.contains(bqElem)) return;\n // We keep default behavior if multiple accordion can be expanded\n if (this.multiple) return;\n\n this.bqAccordionElements.forEach((bqAccordionElement) => {\n if (bqAccordionElement === event.detail) return;\n\n bqAccordionElement.expanded = false;\n });\n }\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private get bqAccordionElements(): HTMLBqAccordionElement[] {\n return Array.from(this.el.querySelectorAll('bq-accordion'));\n }\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"flex flex-col gap-[--bq-accordion-group--gap]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/alert/bq-alert.js CHANGED Viewed

@@ -236,16 +236,16 @@ export class BqAlert {
         const style = {
             ...(this.border && { '--bq-alert--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (h(Host, { key: '3afa4ec1224f998151b8a8f3572a67872f8047d6', style: style, class: { 'is-sticky': this.sticky }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "alert" }, h("div", { key: '4e126e373cc7bc3d28e25ed28b1834619b70a18d', class: {
+        return (h(Host, { key: 'd875895fd50bf029ac8f1175a684130c7a54c1cd', style: style, class: { 'is-sticky': this.sticky }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "alert" }, h("div", { key: '7fdf1134416a7bb74c7d1df8e780afcb29f4318d', class: {
                 [`bq-alert bq-alert__${this.type}`]: true,
                 'is-sticky': this.sticky,
-            }, "data-transition-enter": "transition ease-out duration-300", "data-transition-enter-start": "opacity-0", "data-transition-enter-end": "opacity-100", "data-transition-leave": "transition ease-in duration-200", "data-transition-leave-start": "opacity-100", "data-transition-leave-end": "opacity-0", ref: (div) => (this.alertElement = div), part: "wrapper" }, !this.disableClose && (h("bq-button", { key: '5706a6a8d2598de2f863484a6678f43157563c95', class: "bq-alert__close absolute end-5 focus-visible:focus [&::part(label)]:inline-flex", appearance: "text", size: "small", onClick: this.hide.bind(this), part: "btn-close" }, h("slot", { key: 'c7369c4bce9e1d900e53621e7d33229f15406243', name: "btn-close" }, h("bq-icon", { key: 'aa485f14009405a5a64596661ee2ac98f882554e', name: "x" })))), h("div", { key: '4108c0728d88cf785182bced12108ff4f0ac1a37', class: {
+            }, "data-transition-enter": "transition ease-out duration-300", "data-transition-enter-start": "opacity-0", "data-transition-enter-end": "opacity-100", "data-transition-leave": "transition ease-in duration-200", "data-transition-leave-start": "opacity-100", "data-transition-leave-end": "opacity-0", ref: (div) => (this.alertElement = div), part: "wrapper" }, !this.disableClose && (h("bq-button", { key: '8b1f833cbf4aa25038eeb5a9785aa72e0436c774', class: "bq-alert__close absolute end-5 focus-visible:focus [&::part(label)]:inline-flex", appearance: "text", size: "small", onClick: this.hide.bind(this), part: "btn-close" }, h("slot", { key: 'c6a9891f4e6cf1b976e8138080a2fecdb3bf2165', name: "btn-close" }, h("bq-icon", { key: 'f20552c6787c89bf08ab62f8c8124cce9db93dfe', name: "x" })))), h("div", { key: '0e35ca76614a60eae41e0d6220e31106c10e89ad', class: {
                 [`bq-alert__icon--${this.type} me-s flex text-left align-top`]: true,
                 '!hidden': this.hideIcon,
-            }, part: "icon-outline" }, h("slot", { key: 'd2d3548e26a9cf3cea9aa3fe6664cf0ebf3eb9d2', name: "icon" }, this.type !== 'default' && h("bq-icon", { key: '1cb34c894ecf125575354ab10a6c3d482d2b1a38', name: this.iconName, part: "icon", exportparts: "base,svg" }))), h("div", { key: '262bad3bf5dc0aed051febc835d136bb85f98668', class: "flex flex-col items-start gap-[--bq-alert--content-footer-gap]", part: "main" }, h("div", { key: 'ce47e60f3907612949203ddbd81e3e67103e8440', class: "flex flex-col gap-[--bq-alert--title-body-gap]", part: "content" }, h("div", { key: '81c75aacfad79273751b44073353b417cd29e217', class: {
+            }, part: "icon-outline" }, h("slot", { key: '959a8a439b5323f10798e446923868b25d0c8574', name: "icon" }, this.type !== 'default' && h("bq-icon", { key: '3b8ad8e59f6c6d01add104958914613bbc4b1c71', name: this.iconName, part: "icon", exportparts: "base,svg" }))), h("div", { key: '03fd2f2739b1d31ecf850c2901de60cbb869c3a6', class: "flex flex-col items-start gap-[--bq-alert--content-footer-gap]", part: "main" }, h("div", { key: 'ccbc15f997ff17c7c6057ac845121cfd8558a42a', class: "flex flex-col gap-[--bq-alert--title-body-gap]", part: "content" }, h("div", { key: '762afaa99f1924703fc59b9784db034e2c1531aa', class: {
                 'title-font font-semibold leading-regular text-primary': true,
                 'flex items-center': this.sticky,
-            }, part: "title" }, h("slot", { key: '4ffbfaab20b684214ba67463de8440e7e167dfa8' })), h("div", { key: '6d21bc580ae18c43d5c19c160d6bc77d116515c8', class: { 'text-s leading-regular': true, '!hidden': !this.hasContent }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '94ffe68008bf87c3f28a4d63d4f579584966840c', name: "body", onSlotchange: this.handleSlotChange }))), h("div", { key: 'fb61157c4d460fc75e2bd9ee2b12c8c248bf4c39', class: { 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '035146fd7e599324fda070780ed072e938c74f04', name: "footer", onSlotchange: this.handleSlotChange }))))));
+            }, part: "title" }, h("slot", { key: '5a87f39e6e243d9aae6b1d87e2e3f7c89fe6fd67' })), h("div", { key: 'c6ad8da5ad12bca777420adba8ef1544f7669780', class: { 'text-s leading-regular': true, '!hidden': !this.hasContent }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '33095ba63ed31a67c8ec4b72f0c01a0ba851db0e', name: "body", onSlotchange: this.handleSlotChange }))), h("div", { key: '6ee65cf63a0008f8aee59ee7b79813cba5850278', class: { 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '01baebc90efc7382cc53bd8741908f79b30de060', name: "footer", onSlotchange: this.handleSlotChange }))))));
     }
     static get is() { return "bq-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -263,6 +263,7 @@ export class BqAlert {
         return {
             "autoDismiss": {
                 "type": "boolean",
+                "attribute": "auto-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -277,11 +278,11 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-dismiss",
                 "reflect": true
             },
             "border": {
                 "type": "string",
+                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "TAlertBorderRadius",
@@ -302,12 +303,12 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border",
                 "reflect": true,
                 "defaultValue": "'s'"
             },
             "disableClose": {
                 "type": "boolean",
+                "attribute": "disable-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +323,11 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disable-close",
                 "reflect": true
             },
             "hideIcon": {
                 "type": "boolean",
+                "attribute": "hide-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -341,11 +342,11 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-icon",
                 "reflect": true
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -360,11 +361,11 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true
             },
             "time": {
                 "type": "number",
+                "attribute": "time",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -379,12 +380,12 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "time",
                 "reflect": true,
                 "defaultValue": "3000"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TAlertType",
@@ -405,12 +406,12 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'default'"
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -425,7 +426,6 @@ export class BqAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": true
             }
         };

package/dist/collection/components/alert/bq-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-alert.js","sourceRoot":"","sources":["../../../../../../src/components/alert/bq-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { ALERT_TYPE, TAlertBorderRadius, TAlertType } from './bq-alert.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\n/*\n The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\n * It can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n \n @example How to use it\n * ```html\n * <bq-alert>\n * <bq-icon name=\"star\" slot=\"icon\"></bq-icon>\n * Title\n * <span slot=\"body\">\n * Description\n * <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n * </span>\n * <div slot=\"footer\">\n * <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n * <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n * </div>\n * </bq-alert>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/848a50-alert\n * @status stable\n \n @dependency bq-button\n * @dependency bq-icon\n \n @attr {boolean} [auto-dismiss=false] - If true, the alert will automatically hide after the specified amount of time\n * @attr {\"none\" \| \"xs2\" \| \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"full\"} [border='s'] - The corner radius of the alert component\n * @attr {boolean} [disable-close=false] - If true, the close button at the top right of the alert won't be shown\n * @attr {boolean} [hide-icon=false] - If true, the alert icon won't be shown\n * @attr {boolean} [open=false] - If true, the alert will be shown\n * @attr {number} [time=3000] - The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`\n * @attr {\"info\" \| \"success\" \| \"warning\" \| \"error\" \| \"default\"} [type='default'] - Type of Alert\n * @attr {boolean} [sticky=false] - If true, the alert component will remain fixed at the top of the page, occupying the full viewport\n \n @event bqHide - Callback handler to be called when the alert is hidden\n * @event bqShow - Callback handler to be called when the alert is shown\n * @event bqAfterShow - Callback handler to be called after the alert has been shown\n * @event bqAfterHide - Callback handler to be called after the alert has been hidden\n \n @slot - The alert title content (no slot name required)\n * @slot body - The alert description content\n * @slot footer - The alert footer content\n * @slot icon - The predefined icon based on the alert type (info, success, warning, error, default)\n * @slot btn-close - The close button of the alert\n \n @part base - The `<div>` container of the predefined bq-icon component\n * @part body - The container `<div>` that wraps the alert description content\n * @part btn-close - The `bq-button` used to close the alert\n * @part content - The container `<div>` that wraps all the alert content (title, description, footer)\n * @part footer - The container `<div>` that wraps the alert footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the alert main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component\n * @part title - The container `<div>` that wraps the alert title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-alert--background - The alert background color\n * @cssprop --bq-alert--border-radius - The alert border radius\n * @cssprop --bq-alert--content-footer-gap - The alert content and footer gap\n * @cssprop --bq-alert--title-body-gap - The alert title and body gap\n \n @cssprop --bq-alert--border-color - The alert border color\n * @cssprop --bq-alert--border-style - The alert border style\n * @cssprop --bq-alert--border-width - The alert border width\n \n @cssprop --bq-alert--background-info - The alert background color for info type\n * @cssprop --bq-alert--background-success - The alert background color for success type\n * @cssprop --bq-alert--background-warning - The alert background color for warning type\n * @cssprop --bq-alert--background-error - The alert background color for error type\n \n @cssprop --bq-alert--border-info - The alert border color for info type\n * @cssprop --bq-alert--border-success - The alert border color for success type\n * @cssprop --bq-alert--border-warning - The alert border color for warning type\n * @cssprop --bq-alert--border-error - The alert border color for error type\n \n @cssprop --bq-alert--icon-color-info - The alert icon color for info type\n * @cssprop --bq-alert--icon-color-success - The alert icon color for success type\n * @cssprop --bq-alert--icon-color-warning - The alert icon color for warning type\n * @cssprop --bq-alert--icon-color-error - The alert icon color for error type\n \n @cssprop --bq-alert--padding - The alert padding\n * @cssprop --bq-alert--min-width - The alert min width\n /\n@Component({\n tag: 'bq-alert',\n styleUrl: './scss/bq-alert.scss',\n shadow: true,\n})\nexport class BqAlert {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private alertElement: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAlertElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n\n // Public Property API\n // ========================\n\n /* If true, the alert will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corner radius of the alert component /\n @Prop({ reflect: true }) border: TAlertBorderRadius = 's';\n\n /* If true, the close button at the top right of the alert won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the alert icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the alert will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Alert /\n @Prop({ reflect: true }) type: TAlertType = 'default';\n\n /* If true, the alert component will remain fixed at the top of the page, occupying the full viewport /\n @Prop({ reflect: true }) sticky: boolean;\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!this.open) {\n this.handleHide();\n return;\n }\n\n this.handleShow();\n\n if (this.autoDismiss) {\n this.autoDismissDebounce();\n }\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(ALERT_TYPE, 'info', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the alert is hidden /\n @Event() bqHide!: EventEmitter;\n\n /* Callback handler to be called when the alert is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the alert has been shown /\n @Event() bqAfterShow!: EventEmitter;\n\n /* Callback handler to be called after the alert has been hidden /\n @Event() bqAfterHide!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n\n if (!this.open) {\n this.el.classList.add('is-hidden');\n }\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Method to be called to hide the alert component /\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n /* Method to be called to show the alert component /\n @Method()\n async show(): Promise<void> {\n this.open = true;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.alertElement);\n this.el.classList.add('is-hidden');\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.el.classList.remove('is-hidden');\n await enter(this.alertElement);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterShow.emit();\n return;\n }\n\n this.bqAfterHide.emit();\n };\n\n private handleSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem, 'body');\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const iconName = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return iconName[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-alert--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n style={style}\n class={{ 'is-sticky': this.sticky }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n >\n <div\n class={{\n [`bq-alert bq-alert__${this.type}`]: true,\n 'is-sticky': this.sticky,\n }}\n data-transition-enter=\"transition ease-out duration-300\"\n data-transition-enter-start=\"opacity-0\"\n data-transition-enter-end=\"opacity-100\"\n data-transition-leave=\"transition ease-in duration-200\"\n data-transition-leave-start=\"opacity-100\"\n data-transition-leave-end=\"opacity-0\"\n ref={(div) => (this.alertElement = div)}\n part=\"wrapper\"\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n class=\"bq-alert__close absolute end-5 focus-visible:focus [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n onClick={this.hide.bind(this)}\n part=\"btn-close\"\n >\n <slot name=\"btn-close\">\n <bq-icon name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n [`bq-alert__icon--${this.type} me-s flex text-left align-top`]: true,\n '!hidden': this.hideIcon,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n {this.type !== 'default' && <bq-icon name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />}\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-alert--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-alert--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div\n class={{\n 'title-font font-semibold leading-regular text-primary': true,\n 'flex items-center': this.sticky,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n ref={(div) => (this.footerElem = div)}\n part=\"footer\"\n >\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-alert.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/alert/bq-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { ALERT_TYPE } from './bq-alert.types';\nimport type { TAlertBorderRadius, TAlertType } from './bq-alert.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\n/*\n The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\n * It can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n \n @example How to use it\n * ```html\n * <bq-alert>\n * <bq-icon name=\"star\" slot=\"icon\"></bq-icon>\n * Title\n * <span slot=\"body\">\n * Description\n * <a class=\"bq-link\" href=\"https://example.com\">Link</a>\n * </span>\n * <div slot=\"footer\">\n * <bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n * <bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n * </div>\n * </bq-alert>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/848a50-alert\n * @status stable\n \n @dependency bq-button\n * @dependency bq-icon\n \n @attr {boolean} [auto-dismiss=false] - If true, the alert will automatically hide after the specified amount of time\n * @attr {\"none\" \| \"xs2\" \| \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"full\"} [border='s'] - The corner radius of the alert component\n * @attr {boolean} [disable-close=false] - If true, the close button at the top right of the alert won't be shown\n * @attr {boolean} [hide-icon=false] - If true, the alert icon won't be shown\n * @attr {boolean} [open=false] - If true, the alert will be shown\n * @attr {number} [time=3000] - The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"`\n * @attr {\"info\" \| \"success\" \| \"warning\" \| \"error\" \| \"default\"} [type='default'] - Type of Alert\n * @attr {boolean} [sticky=false] - If true, the alert component will remain fixed at the top of the page, occupying the full viewport\n \n @event bqHide - Callback handler to be called when the alert is hidden\n * @event bqShow - Callback handler to be called when the alert is shown\n * @event bqAfterShow - Callback handler to be called after the alert has been shown\n * @event bqAfterHide - Callback handler to be called after the alert has been hidden\n \n @slot - The alert title content (no slot name required)\n * @slot body - The alert description content\n * @slot footer - The alert footer content\n * @slot icon - The predefined icon based on the alert type (info, success, warning, error, default)\n * @slot btn-close - The close button of the alert\n \n @part base - The `<div>` container of the predefined bq-icon component\n * @part body - The container `<div>` that wraps the alert description content\n * @part btn-close - The `bq-button` used to close the alert\n * @part content - The container `<div>` that wraps all the alert content (title, description, footer)\n * @part footer - The container `<div>` that wraps the alert footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the alert main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component\n * @part title - The container `<div>` that wraps the alert title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-alert--background - The alert background color\n * @cssprop --bq-alert--border-radius - The alert border radius\n * @cssprop --bq-alert--content-footer-gap - The alert content and footer gap\n * @cssprop --bq-alert--title-body-gap - The alert title and body gap\n \n @cssprop --bq-alert--border-color - The alert border color\n * @cssprop --bq-alert--border-style - The alert border style\n * @cssprop --bq-alert--border-width - The alert border width\n \n @cssprop --bq-alert--background-info - The alert background color for info type\n * @cssprop --bq-alert--background-success - The alert background color for success type\n * @cssprop --bq-alert--background-warning - The alert background color for warning type\n * @cssprop --bq-alert--background-error - The alert background color for error type\n \n @cssprop --bq-alert--border-info - The alert border color for info type\n * @cssprop --bq-alert--border-success - The alert border color for success type\n * @cssprop --bq-alert--border-warning - The alert border color for warning type\n * @cssprop --bq-alert--border-error - The alert border color for error type\n \n @cssprop --bq-alert--icon-color-info - The alert icon color for info type\n * @cssprop --bq-alert--icon-color-success - The alert icon color for success type\n * @cssprop --bq-alert--icon-color-warning - The alert icon color for warning type\n * @cssprop --bq-alert--icon-color-error - The alert icon color for error type\n \n @cssprop --bq-alert--padding - The alert padding\n * @cssprop --bq-alert--min-width - The alert min width\n /\n@Component({\n tag: 'bq-alert',\n styleUrl: './scss/bq-alert.scss',\n shadow: true,\n})\nexport class BqAlert {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private alertElement: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqAlertElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n\n // Public Property API\n // ========================\n\n /* If true, the alert will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corner radius of the alert component /\n @Prop({ reflect: true }) border: TAlertBorderRadius = 's';\n\n /* If true, the close button at the top right of the alert won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the alert icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the alert will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Alert /\n @Prop({ reflect: true }) type: TAlertType = 'default';\n\n /* If true, the alert component will remain fixed at the top of the page, occupying the full viewport /\n @Prop({ reflect: true }) sticky: boolean;\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!this.open) {\n this.handleHide();\n return;\n }\n\n this.handleShow();\n\n if (this.autoDismiss) {\n this.autoDismissDebounce();\n }\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(ALERT_TYPE, 'info', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the alert is hidden /\n @Event() bqHide!: EventEmitter;\n\n /* Callback handler to be called when the alert is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the alert has been shown /\n @Event() bqAfterShow!: EventEmitter;\n\n /* Callback handler to be called after the alert has been hidden /\n @Event() bqAfterHide!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n\n if (!this.open) {\n this.el.classList.add('is-hidden');\n }\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Method to be called to hide the alert component /\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n /* Method to be called to show the alert component /\n @Method()\n async show(): Promise<void> {\n this.open = true;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.alertElement);\n this.el.classList.add('is-hidden');\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.el.classList.remove('is-hidden');\n await enter(this.alertElement);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterShow.emit();\n return;\n }\n\n this.bqAfterHide.emit();\n };\n\n private handleSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem, 'body');\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const iconName = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return iconName[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-alert--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n style={style}\n class={{ 'is-sticky': this.sticky }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n >\n <div\n class={{\n [`bq-alert bq-alert__${this.type}`]: true,\n 'is-sticky': this.sticky,\n }}\n data-transition-enter=\"transition ease-out duration-300\"\n data-transition-enter-start=\"opacity-0\"\n data-transition-enter-end=\"opacity-100\"\n data-transition-leave=\"transition ease-in duration-200\"\n data-transition-leave-start=\"opacity-100\"\n data-transition-leave-end=\"opacity-0\"\n ref={(div) => (this.alertElement = div)}\n part=\"wrapper\"\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n class=\"bq-alert__close absolute end-5 focus-visible:focus [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n onClick={this.hide.bind(this)}\n part=\"btn-close\"\n >\n <slot name=\"btn-close\">\n <bq-icon name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n [`bq-alert__icon--${this.type} me-s flex text-left align-top`]: true,\n '!hidden': this.hideIcon,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n {this.type !== 'default' && <bq-icon name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />}\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-alert--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-alert--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div\n class={{\n 'title-font font-semibold leading-regular text-primary': true,\n 'flex items-center': this.sticky,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n ref={(div) => (this.footerElem = div)}\n part=\"footer\"\n >\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/alert/bq-alert.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-alert.types.js","sourceRoot":"","sources":["../../../../../../src/components/alert/bq-alert.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAGtF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAU,CAAC","sourcesContent":["export const ALERT_TYPE = ['info', 'success', 'warning', 'error', 'default'] as const;\nexport type TAlertType = (typeof ALERT_TYPE)[number];\n\nexport const ALERT_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TAlertBorderRadius = (typeof ALERT_BORDER_RADIUS)[number];\n"]}
1	+ {"version":3,"file":"bq-alert.types.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/alert/bq-alert.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAGtF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAU,CAAC","sourcesContent":["export const ALERT_TYPE = ['info', 'success', 'warning', 'error', 'default'] as const;\nexport type TAlertType = (typeof ALERT_TYPE)[number];\n\nexport const ALERT_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TAlertBorderRadius = (typeof ALERT_BORDER_RADIUS)[number];\n"]}