q2-tecton-elements 1.66.1 → 1.67.0

package/dist/q2-tecton-elements/q2-item.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-item.entry.esm.js","sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: var(--tct-item-action-align-items, center);\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    color: var-list(--tct-item-footer-color, inherit);\n    font-size: var(--tct-item-footer-font-size, inherit);\n    font-weight: var(--tct-item-footer-font-weight, inherit);\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/**\n * @name Item\n * @category Display\n * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.\n * @slot decorator - An optional slot to display custom content in the decorator area.\n * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this to provide a visual indicator or icon for your item.\n *\n * @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n *\n * @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n *\n * @slot action - An optional slot to display custom content in the action area.\n * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.\n *\n * @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n */\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasDecoratorSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get decoratorClasses() {\n        const classes = ['bullet', 'decorator'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`, `decorator-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-bullet`, `footer-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator') || hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`item-no-bullet`, `item-no-decorator`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`main-no-bullet`, `main-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasDecoratorSlotContent && (\n                    <div class={this.decoratorClasses}>\n                        <slot name=\"decorator\">\n                            <slot name=\"bullet\" />\n                        </slot>\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-item.entry.esm.js","sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: var(--tct-item-action-align-items, center);\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n    font-style: var-list(--tct-item-body-font-style, inherit);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    color: var-list(--tct-item-footer-color, inherit);\n    font-size: var(--tct-item-footer-font-size, inherit);\n    font-weight: var(--tct-item-footer-font-weight, inherit);\n    font-style: var-list(--tct-item-footer-font-style, inherit);\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-style: var-list(--tct-item-header-font-style, inherit);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    font-style: var-list(--tct-item-font-style, inherit);\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/**\n * @name Item\n * @category Display\n * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.\n * @slot decorator - An optional slot to display custom content in the decorator area.\n * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this to provide a visual indicator or icon for your item.\n *\n * @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n *\n * @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n *\n * @slot action - An optional slot to display custom content in the action area.\n * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.\n *\n * @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n */\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasDecoratorSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get decoratorClasses() {\n        const classes = ['bullet', 'decorator'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`, `decorator-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-bullet`, `footer-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator') || hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`item-no-bullet`, `item-no-decorator`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`main-no-bullet`, `main-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasDecoratorSlotContent && (\n                    <div class={this.decoratorClasses}>\n                        <slot name=\"decorator\">\n                            <slot name=\"bullet\" />\n                        </slot>\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-item.entry.js

@@ -1,12 +1,12 @@
-import { r as t, h as o, g as e } from "./index-CGkHOjh1.js";
+import { r as t, h as e, g as o } from "./index-CGkHOjh1.js";
 
-import { o as i, h as a } from "./index-B4WYBDS9.js";
+import { o as i, h as a } from "./index-C4PILj1_.js";
 
-const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(\n      --tct-btn-primary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  )}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{color:var(--tct-item-footer-color, inherit);font-size:var(--tct-item-footer-font-size, inherit);font-weight:var(--tct-item-footer-font-weight, inherit);grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(\n      --tct-btn-primary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  )}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400);font-style:var(--tct-item-body-font-style, inherit)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{color:var(--tct-item-footer-color, inherit);font-size:var(--tct-item-footer-font-size, inherit);font-weight:var(--tct-item-footer-font-weight, inherit);font-style:var(--tct-item-footer-font-style, inherit);grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-style:var(--tct-item-header-font-style, inherit);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{font-style:var(--tct-item-font-style, inherit);border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 
 const n = class {
-  constructor(o) {
-    t(this, o);
+  constructor(e) {
+    t(this, e);
     // #endregion
     // #region State Properties
         this.renderTrigger = 0;
@@ -28,9 +28,9 @@ const n = class {
   // #endregion
   // #region Listeners
   delegateFocus(t) {
-    var o;
+    var e;
     if (this.clickable) {
-      (o = this.itemElement) === null || o === void 0 ? void 0 : o.focus();
+      (e = this.itemElement) === null || e === void 0 ? void 0 : e.focus();
     } else {
       t.preventDefault();
     }
@@ -104,53 +104,53 @@ const n = class {
   // #region Render Methods
   render() {
     const {clickable: t} = this;
-    return o("div", {
-      key: "031b5234d0a672203b5611b485e123c61281a728",
+    return e("div", {
+      key: "ca6b1f858b9857c47204acc08f686727ee8beeeb",
       "test-id": "itemContainer",
       class: this.itemClasses,
       ref: t => this.itemElement = t,
       role: t ? "button" : undefined,
       tabIndex: t ? 0 : undefined
-    }, this.hasDecoratorSlotContent && o("div", {
-      key: "dd55fd88f122b0aa1830680e3d104ad1a51e969c",
+    }, this.hasDecoratorSlotContent && e("div", {
+      key: "230306123ce534b5d581d5d3c8ac43abc51e5b4e",
       class: this.decoratorClasses
-    }, o("slot", {
-      key: "384102a2d0764bff0a542759d62382146e524872",
+    }, e("slot", {
+      key: "a4cf798e99caa5f158bcffcf88a7fa8655c26a83",
       name: "decorator"
-    }, o("slot", {
-      key: "c46aa05fbb824df0454d517637593dd8a0dc4095",
+    }, e("slot", {
+      key: "e2e97954c5d6b4eacbbd9a39c78296cb273daa06",
       name: "bullet"
-    }))), o("div", {
-      key: "1c6dbbd0f2a9c1c40c82cbc940c2ec8367e07057",
+    }))), e("div", {
+      key: "482f65fea497fbca187cc77849584fd4f3a07aff",
       class: this.mainClasses
-    }, this.hasHeaderSlotContent && o("div", {
-      key: "5d2d1c2a4333d14bf185f57e20a4b064ed6a269b",
+    }, this.hasHeaderSlotContent && e("div", {
+      key: "8863cc54ea1f757f0eafd879e15d9647b5a426e6",
       class: "header"
-    }, o("slot", {
-      key: "2da3db423b914bcd7cdd52ace4e898c1b7957b8f",
+    }, e("slot", {
+      key: "2977d0908edde16d5b3f2c0cddd3254cce20b68a",
       name: "header"
-    })), this.hasBodySlotContent && o("div", {
-      key: "82fc01d1ab048104b14b269c41af995a53bac2c3",
+    })), this.hasBodySlotContent && e("div", {
+      key: "ba3e78a5001eb2fe8103b4320781dbc093d5e965",
       class: "body"
-    }, o("slot", {
-      key: "3d254e0f4a297671d64014bc92b8ebe33d90200b",
+    }, e("slot", {
+      key: "8c0d7c06c88ba2c3e338db99d99095552c40e787",
       name: "body"
-    }))), this.hasActionSlotContent && o("div", {
-      key: "8186ab3896ca69110dbfbcb90fe9cec73a6ed695",
+    }))), this.hasActionSlotContent && e("div", {
+      key: "89ba277d280eb8b847252c9cecd556b6308d240d",
       class: this.actionClasses
-    }, o("slot", {
-      key: "e05c19d86e8cbbd696b2a50cc081dc51ed2ba006",
+    }, e("slot", {
+      key: "d690fc381d89367183832c70c48d0de1f263b5bc",
       name: "action"
-    })), this.hasFooterSlotContent && o("div", {
-      key: "671f2bb2bc7e0f2af9082771cf9d70ea489d5cda",
+    })), this.hasFooterSlotContent && e("div", {
+      key: "5cda2ab77b732eb6449b6afe5944a4a68fb5ffb4",
       class: this.footerClasses
-    }, o("slot", {
-      key: "e078cc80aba9b91ac5000ceb3ba39d4f756a4fb1",
+    }, e("slot", {
+      key: "ac4fbf27d7af6aa9b383096a415770c972efbade",
       name: "footer"
     })));
   }
   get hostElement() {
-    return e(this);
+    return o(this);
   }
 };
 

package/dist/q2-tecton-elements/q2-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ItemCss","Q2Item","constructor","hostRef","this","renderTrigger","componentDidLoad","MutationObserver","observer","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasDecoratorSlotContent","push","join","decoratorClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: var(--tct-item-action-align-items, center);\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    color: var-list(--tct-item-footer-color, inherit);\n    font-size: var(--tct-item-footer-font-size, inherit);\n    font-weight: var(--tct-item-footer-font-weight, inherit);\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/**\n * @name Item\n * @category Display\n * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.\n * @slot decorator - An optional slot to display custom content in the decorator area.\n * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this to provide a visual indicator or icon for your item.\n *\n * @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n *\n * @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n *\n * @slot action - An optional slot to display custom content in the action area.\n * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.\n *\n * @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n */\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasDecoratorSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get decoratorClasses() {\n        const classes = ['bullet', 'decorator'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`, `decorator-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-bullet`, `footer-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator') || hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`item-no-bullet`, `item-no-decorator`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`main-no-bullet`, `main-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasDecoratorSlotContent && (\n                    <div class={this.decoratorClasses}>\n                        <slot name=\"decorator\">\n                            <slot name=\"bullet\" />\n                        </slot>\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2ItemCss","Q2Item","constructor","hostRef","this","renderTrigger","componentDidLoad","MutationObserver","observer","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasDecoratorSlotContent","push","join","decoratorClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-0, 0)};\n    }\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: var(--tct-item-action-align-items, center);\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n    font-style: var-list(--tct-item-body-font-style, inherit);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    color: var-list(--tct-item-footer-color, inherit);\n    font-size: var(--tct-item-footer-font-size, inherit);\n    font-weight: var(--tct-item-footer-font-weight, inherit);\n    font-style: var-list(--tct-item-footer-font-style, inherit);\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-style: var-list(--tct-item-header-font-style, inherit);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    font-style: var-list(--tct-item-font-style, inherit);\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n/**\n * @name Item\n * @category Display\n * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.\n * @slot decorator - An optional slot to display custom content in the decorator area.\n * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this to provide a visual indicator or icon for your item.\n *\n * @slot header - An optional slot to display custom content in the header area.\n * Use this to provide a title or label for your item.\n *\n * @slot body - An optional slot to display custom content in the body area.\n * Use this to provide the main content of your item.\n *\n * @slot action - An optional slot to display custom content in the action area.\n * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.\n *\n * @slot footer - An optional slot to display custom content in the footer area.\n * Use this to provide additional information or actions related to the item.\n */\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasDecoratorSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get decoratorClasses() {\n        const classes = ['bullet', 'decorator'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`, `decorator-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`footer-no-bullet`, `footer-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator') || hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`item-no-bullet`, `item-no-decorator`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasDecoratorSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasDecoratorSlotContent) {\n            classes.push(`main-no-bullet`, `main-no-decorator`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasDecoratorSlotContent && (\n                    <div class={this.decoratorClasses}>\n                        <slot name=\"decorator\">\n                            <slot name=\"bullet\" />\n                        </slot>\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-legend.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-legend.entry.esm.js","sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: flex-start;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    min-height: var-list(--tct-legend-item-min-height, 15px);\n    opacity: 1;\n    padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var(--tct-legend-item-name-line-height, 1);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    margin-left: auto;\n    flex-grow: 0;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-value-font-weight, 400);\n    line-height: var(--tct-legend-item-value-line-height, 1);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n */\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a legend item is clicked.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            mirrorEmit(this, ['click', 'tctClick'], null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-legend.entry.esm.js","sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: flex-start;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    min-height: var-list(--tct-legend-item-min-height, 15px);\n    opacity: 1;\n    padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:focus-visible {\n        box-shadow: var-list(--tct-legend-item-focus-visible-box-shadow, --aesthetic-focus-ring-shadow);\n    }\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var(--tct-legend-item-name-line-height, 1);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    margin-left: auto;\n    flex-grow: 0;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-value-font-weight, 400);\n    line-height: var(--tct-legend-item-value-line-height, 1);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n */\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: DonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a legend item is clicked.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<DonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            mirrorEmit(this, ['click', 'tctClick'], null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-legend.entry.js

@@ -2,7 +2,7 @@ import { r as t, c as e, h as i } from "./index-CGkHOjh1.js";
 
 import { m as s } from "./mirror-emit-DUjY_ucm.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:flex-start;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;min-height:var(--tct-legend-item-min-height, 15px);opacity:1;padding:var(--tct-legend-item-padding, 0 0 9px 0);transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;margin-left:auto;flex-grow:0;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1);text-align:right}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:flex-start;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;min-height:var(--tct-legend-item-min-height, 15px);opacity:1;padding:var(--tct-legend-item-padding, 0 0 9px 0);transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:focus-visible{box-shadow:var(--tct-legend-item-focus-visible-box-shadow, var(--aesthetic-focus-ring-shadow))}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;margin-left:auto;flex-grow:0;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1);text-align:right}";
 
 const o = class {
   constructor(i) {
@@ -110,10 +110,10 @@ const o = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "c3b1288ebd1e0c3371a208b2a0a1658d0f36d3a9",
+      key: "2edad285ad14be5cdee30e071d1e5e11337076f0",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "5c0cbb9dcfbd3ef8bab0921b8f38a136d3d12f92"
+      key: "11104022e84eddd37155299b0833c71bc9a0582d"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {

package/dist/q2-tecton-elements/q2-legend.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2LegendCss","Q2Legend","constructor","hostRef","this","hoveredItemIndex","selectedItemIndex","data","format","hoveredItemId","selectedItemId","componentWillLoad","watchHoveredItemId","watchSelectedItemId","newItemId","newItemIndex","getDataIndexForId","dataWithClasses","map","item","index","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","mirrorEmit","onClickElsewhere","obj","onMouseEnter","onMouseLeave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: flex-start;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    min-height: var-list(--tct-legend-item-min-height, 15px);\n    opacity: 1;\n    padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var(--tct-legend-item-name-line-height, 1);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    margin-left: auto;\n    flex-grow: 0;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-value-font-weight, 400);\n    line-height: var(--tct-legend-item-value-line-height, 1);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n */\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a legend item is clicked.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            mirrorEmit(this, ['click', 'tctClick'], null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAc;;MCcPC,IAAQ;EALrB,WAAAC,CAAAC;;;;;;;;;QASIC,KAAgBC,oBAAW;IAG3BD,KAAiBE,qBAAW;;;yEAO5BF,KAAIG,OAAsB;+DAI1BH,KAAMI,SAA2B;oDAIjCJ,KAAaK,gBAAW;qDAIxBL,KAAcM,iBAAW;AAiM5B;;;EAlJG,iBAAAC;IACIP,KAAKQ,mBAAmBR,KAAKK;IAC7BL,KAAKS,oBAAoBT,KAAKM;;;;EAOlC,kBAAAE,CAAmBE;IACf,MAAMC,IAAeX,KAAKY,kBAAkBF;IAC5CV,KAAKC,mBAAmBU;;EAI5B,mBAAAF,CAAoBC;IAChB,MAAMC,IAAeX,KAAKY,kBAAkBF;IAC5CV,KAAKE,oBAAoBS;;;;EAM7B,mBAAIE;IACA,OAAOb,KAAKG,KAAKW,KAAI,CAACC,GAAMC,OAAK;SAC1BD;MACHE,SAAS;QACL,eAAe;QACf,qBAAqBjB,KAAKkB,kBAAkBF;QAC5C,wBAAwBhB,KAAKmB,qBAAqBH;;;;EAK9D,WAAAI,CAAYC;IACR,MAAMC,IAAeC,WAAWF,EAAMG;IACtC,IAAIxB,KAAKI,WAAW,YAAY;MAC5B,OAAOqB,KAAKC,aAAa,SAAS;QAC9BC,OAAO;QACPC,UAAU;SACXxB,OAAOkB;;IAGd,OAAOG,KAAKC,aAAa,SAAStB,OAAOkB;;EAG7C,iBAAAV,CAAkBiB;IACd,MAAMb,IAAQhB,KAAKG,KAAK2B,WAAUf,KAAQA,EAAKc,OAAOA;IACtD,OAAOb,KAAS,IAAIA,KAAQ;;EAGhC,iBAAAE,CAAkBF;IACd,IAAIhB,KAAKmB,qBAAqBH,MAAUA,KAAShB,KAAKC,kBAAkB,OAAO;IAE/E,IAAID,KAAKE,qBAAqB,KAAKF,KAAKC,sBAAqB,GAAI,OAAO;IAExE,OAAOD,KAAKC,oBAAoB,KAAKe,MAAUhB,KAAKC;;EAGxD,oBAAAkB,CAAqBH;IACjB,OAAOA,MAAUhB,KAAKE;;EAG1B,OAAA6B,CAAQC,GAAmBC;IACvBD,EAAME;IACN,MAAMC,IAAYnC,KAAKY,kBAAkBqB,EAASJ;IAClD,IAAI7B,KAAKE,sBAAsBiC,GAAW;MACtCnC,KAAKE,qBAAoB;MACzB,IAAI8B,EAAMI,WAAW,GAAG;;QAEpBpC,KAAKC,oBAAmB;aACrB;;QAEHD,KAAKC,mBAAmBkC;;MAE5BE,EAAWrC,MAAM,EAAC,SAAS,cAAa;MACxC;;IAGJA,KAAKE,oBAAoBiC;IACzBE,EAAWrC,MAAM,EAAC,SAAS,cAAaA,KAAKG,KAAKgC;;EAGtD,gBAAAG,CAAiBC;IACbA,EAAIrC,qBAAoB;;EAG5B,YAAAsC,CAAaR,GAAcC;IACvBD,EAAME;IACN,MAAMC,IAAYnC,KAAKY,kBAAkBqB,EAASJ;IAClD7B,KAAKC,mBAAmBkC;IACxBE,EAAWrC,MAAM,EAAC,cAAc,mBAAkBA,KAAKG,KAAKgC;;EAGhE,YAAAM,CAAaT,GAAcC;IACvBD,EAAME;IACN,MAAMC,IAAYnC,KAAKY,kBAAkBqB,EAASJ;IAClD7B,KAAKC,oBAAmB;IACxBoC,EAAWrC,MAAM,EAAC,cAAc,mBAAkBA,KAAKG,KAAKgC;;;;EAMhE,MAAAO;IACI,OACIC,EAAA;MAAAC,KAAA;MAAiBC,UAAU,MAAM7C,KAAKsC,iBAAiBtC;OACnD2C,EAAA;MAAAC,KAAA;OACK5C,KAAKa,gBAAgBC,KAAIC,KACtB4B,EAAI;MAAAG,OAAM;OACNH,EAAA;MAAA,WACY;MAAM,cACF,GAAG5B,EAAKgC,QAAQ/C,KAAKoB,YAAYL,EAAKM;MAClDyB,OAAO/B,EAAKE;MACZc,SAASC,KAAShC,KAAK+B,QAAQC,GAAOjB;MACtCyB,cAAcR,KAAShC,KAAKwC,aAAaR,GAAOjB;MAChD0B,cAAcT,KAAShC,KAAKyC,aAAaT,GAAOjB;OAEhD4B,EAAA;MAAA,WACY;MACRG,OAAM;MACNnB,OAAO;QAAEqB,iBAAiBjC,EAAKkC;;MAAO,eAC1B;QAEhBN,EACY;MAAA;MACRG,OAAM;OAEL/B,EAAKgC,OAEVJ,EAAA;MACId,IAAI,QAAQd,EAAKc;MAAI,WACb;MACRiB,OAAM;OAEL9C,KAAKoB,YAAYL,EAAKM","ignoreList":[]}
+{"version":3,"names":["q2LegendCss","Q2Legend","constructor","hostRef","this","hoveredItemIndex","selectedItemIndex","data","format","hoveredItemId","selectedItemId","componentWillLoad","watchHoveredItemId","watchSelectedItemId","newItemId","newItemIndex","getDataIndexForId","dataWithClasses","map","item","index","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","mirrorEmit","onClickElsewhere","obj","onMouseEnter","onMouseLeave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: flex-start;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    min-height: var-list(--tct-legend-item-min-height, 15px);\n    opacity: 1;\n    padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:focus-visible {\n        box-shadow: var-list(--tct-legend-item-focus-visible-box-shadow, --aesthetic-focus-ring-shadow);\n    }\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var(--tct-legend-item-name-line-height, 1);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    margin-left: auto;\n    flex-grow: 0;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-value-font-weight, 400);\n    line-height: var(--tct-legend-item-value-line-height, 1);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport type { DonutChartData } from 'q2-tecton-common/lib/types/elements';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Legend\n * @category Data Visualization\n * @summary Use for displaying chart legends with interactive item selection.\n */\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: DonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a legend item is clicked.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     * @deprecated Use 'tctMouseenter' instead\n     */\n    @Event()\n    mouseenter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     * @deprecated Use 'tctMouseleave' instead\n     */\n    @Event()\n    mouseleave: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when a legend item is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse enters a legend item.\n     */\n    @Event()\n    tctMouseEnter: EventEmitter<DonutChartData>;\n\n    /**\n     * Emitted when the mouse leaves a legend item.\n     */\n    @Event()\n    tctMouseLeave: EventEmitter<DonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            mirrorEmit(this, ['click', 'tctClick'], null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        mirrorEmit(this, ['click', 'tctClick'], this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        mirrorEmit(this, ['mouseenter', 'tctMouseEnter'], this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: DonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        mirrorEmit(this, ['mouseleave', 'tctMouseLeave'], this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-link.q2-list.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-link.q2-list.entry.esm.js","sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n    display: block;\n    flex: 0 1 auto;\n    max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n    min-width: 0;\n    overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n    flex: 1 1 0px;\n    max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n.ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n}\n\n.label {\n    &.ellipsis {\n        display: block;\n        min-width: 0;\n        flex: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    border-radius: var(--tct-link-border-radius, 0);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    max-width: 100%;\n    overflow: hidden;\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            min-height: var(--tct-link-min-height, 24px);\n            display: flex;\n            align-items: center;\n            border-radius: var(--tct-link-border-radius, 0);\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            overflow: hidden;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n                color: var(--tct-link-icon-color, inherit);\n                flex-shrink: 0;\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n                opacity: var-list(\n                    --tct-link-color-standalone-disabled-opacity,\n                    --tct-link-disabled-opacity,\n                    --app-disabled-opacity,\n                    0.4\n                );\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &.ellipsis {\n            display: block;\n            max-width: 100%;\n        }\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n        }\n        &:focus-visible & {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/**\n * @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n */\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-link.q2-list.entry.esm.js","sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n    display: block;\n    flex: 0 1 auto;\n    max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n    min-width: 0;\n    overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n    flex: 1 1 0px;\n    max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n.ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n}\n\n.label {\n    &.ellipsis {\n        display: block;\n        min-width: 0;\n        flex: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    border-radius: var(--tct-link-border-radius, 0);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    max-width: 100%;\n    overflow: hidden;\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            min-height: var(--tct-link-min-height, 24px);\n            display: flex;\n            align-items: center;\n            border-radius: var(--tct-link-border-radius, 0);\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            overflow: hidden;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n                color: var(--tct-link-icon-color, inherit);\n                flex-shrink: 0;\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n                opacity: var-list(\n                    --tct-link-color-standalone-disabled-opacity,\n                    --tct-link-disabled-opacity,\n                    --app-disabled-opacity,\n                    0.4\n                );\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n        &:has(:focus-visible) {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &.ellipsis {\n            display: block;\n            max-width: 100%;\n        }\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n        }\n        &:focus-visible {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText = this.label || this.hostElement.textContent.trim() || undefined;\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div class={this.classes}>\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    aria-label={this.composedAriaLabel}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                aria-label={this.composedAriaLabel}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/**\n * @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n */\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}