q2-tecton-elements 1.63.2 → 1.64.0

package/dist/components/q2-avatar2.js.map

@@ -1 +1 @@
-{"file":"q2-avatar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-avatar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n    &.size-small {\n        height: var(--tct-avatar-img-small-size, 24px);\n        width: var(--tct-avatar-img-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-height, 44px);\n        width: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-img-large-size, 64px);\n        width: var(--tct-avatar-img-large-size, 64px);\n    }\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-medium-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-medium-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n    }\n}\n\n.size-small {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 30px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 24px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 20px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 15px);\n    }\n}\n.size-medium {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n    }\n}\n.size-large {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 90px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 72px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 60px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 45px);\n    }\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    &.size-small {\n        height: var(--tct-avatar-fallback-small-size, 24px);\n        width: var(--tct-avatar-fallback-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-fallback-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-fallback-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-fallback-large-size, 64px);\n        width: var(--tct-avatar-fallback-large-size, 64px);\n    }\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={`${isLoaded ? 'avatar-img' : 'avatar-img-default'} size-${this.size}`}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${this.size} initials-size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class={`fallback size-${this.size}`}\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-card.js

@@ -51,11 +51,6 @@ const Q2Card$1 = /*@__PURE__*/ proxyCustomElement(class Q2Card extends HTMLEleme
     }
     // #endregion
     // #region Component Lifecycle Events
-    componentDidLoad() {
-        const { hostElement, clickableElement } = this;
-        hostElement.click = () => clickableElement.click();
-        overrideFocus(this.hostElement);
-    }
     disconnectedCallback() {
         // Clean up manual click override
         if (this.hostElement) {
@@ -66,6 +61,11 @@ const Q2Card$1 = /*@__PURE__*/ proxyCustomElement(class Q2Card extends HTMLEleme
         this.clickableElement = null;
         this.containerElement = null;
     }
+    componentDidLoad() {
+        const { hostElement, clickableElement } = this;
+        hostElement.click = () => clickableElement.click();
+        overrideFocus(this.hostElement);
+    }
     // #endregion
     // #region Listeners
     onHostElementFocus(event) {

package/dist/components/q2-card.js.map

@@ -1 +1 @@
-{"file":"q2-card.js","mappings":"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","names":["Q2Card","__stencil_proxyCustomElement"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: var-list(--tct-card-height, 100%);\n    min-height: var-list(--tct-card-min-height, auto);\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n    backdrop-filter: var(--tct-card-backdrop-filter);\n\n    background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n    border-width: var-list(var-prefixer(card-border-width), 0px);\n    border-color: var-list(var-prefixer(card-border-color), transparent);\n    border-style: var-list(--tct-card-border-style, solid);\n    border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n    backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n    padding: var(--comp-card-padding);\n    text-decoration: none;\n    transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: var(--tct-card-overflow, auto);\n    max-height: var-list(--tct-card-max-height, none);\n    box-shadow:\n        var(--comp-card-shadow),\n        0 0 0 rgba(0, 0, 0, 0);\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    &.elevation-1 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-1-box-shadow,\n                --app-shadow-1,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-2 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-2-box-shadow,\n                --app-shadow-2,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-3 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-3-box-shadow,\n                --app-shadow-3,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-4 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-4-box-shadow,\n                --app-shadow-4,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-5 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-5-box-shadow,\n                --app-shadow-5,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n\n    &.clickable {\n        cursor: pointer;\n\n        &:hover {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-hover-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-hover-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-hover-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n\n        &:active {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-active-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-active-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-active-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n        &:focus-visible {\n            --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n            box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n        }\n    }\n\n    &.is-static {\n        cursor: auto;\n        background: var-list(--tct-card-static-background, --tct-card-background, none);\n        color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n        backdrop-filter: none;\n        border-radius: 0;\n        border: 0;\n        text-decoration: initial;\n        padding: 0;\n\n        :host([bar]) & {\n            padding-left: var(--comp-card-padding);\n        }\n\n        &,\n        &:hover,\n        &:active {\n            box-shadow: none;\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n    @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /**\n     * The initials to be placed in the avatar of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /**\n     * The name to be used for the avatar of the card which will be converted to initials.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /**\n     * The source of the image to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\n     * - accent-1\n     * - accent-2\n     * - accent-3\n     * - accent-4\n     * - accent-5\n     * - accent-6\n     * - accent-7\n     * - accent-8\n     * - accent-9\n     * - accent-10\n     * - accent-11\n     * - accent-12\n     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /**\n     * The description of the card (truncated after two lines).\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * The size of the box-shadow applied to the component, giving it a sense of depth.\n     *\n     * @info\n     * Set to `0` to disable.\n     */\n    @Prop({ reflect: true })\n    elevation: 0 | 1 | 2 | 3 | 4 | 5 = 2;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /**\n     * Display the card with no borders, padding, drop-shadows, or clickable behavior.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Target to be applied to the link when a URL is provided.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /**\n     * The title of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /**\n     * URL to navigate the user to when the card is clicked.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        // Clean up manual click override\n        if (this.hostElement) {\n            this.hostElement.click = null;\n        }\n\n        // Nullify DOM references\n        this.avatarElement = null;\n        this.clickableElement = null;\n        this.containerElement = null;\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContainerClasses() {\n        const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n        const result = ['container', type];\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (isSmall) result.push('is-small');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n        if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n        return result.join(' ');\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-card.js","mappings":"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","names":["Q2Card","__stencil_proxyCustomElement"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: var-list(--tct-card-height, 100%);\n    min-height: var-list(--tct-card-min-height, auto);\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n    backdrop-filter: var(--tct-card-backdrop-filter);\n\n    background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n    border-width: var-list(var-prefixer(card-border-width), 0px);\n    border-color: var-list(var-prefixer(card-border-color), transparent);\n    border-style: var-list(--tct-card-border-style, solid);\n    border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n    backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n    padding: var(--comp-card-padding);\n    text-decoration: none;\n    transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: var(--tct-card-overflow, auto);\n    max-height: var-list(--tct-card-max-height, none);\n    box-shadow:\n        var(--comp-card-shadow),\n        0 0 0 rgba(0, 0, 0, 0);\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    &.elevation-1 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-1-box-shadow,\n                --app-shadow-1,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-2 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-2-box-shadow,\n                --app-shadow-2,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-3 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-3-box-shadow,\n                --app-shadow-3,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-4 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-4-box-shadow,\n                --app-shadow-4,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-5 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-5-box-shadow,\n                --app-shadow-5,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n\n    &.clickable {\n        cursor: pointer;\n\n        &:hover {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-hover-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-hover-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-hover-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n\n        &:active {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-active-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-active-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-active-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n        &:focus-visible {\n            --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n            box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n        }\n    }\n\n    &.is-static {\n        cursor: auto;\n        background: var-list(--tct-card-static-background, --tct-card-background, none);\n        color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n        backdrop-filter: none;\n        border-radius: 0;\n        border: 0;\n        text-decoration: initial;\n        padding: 0;\n\n        :host([bar]) & {\n            padding-left: var(--comp-card-padding);\n        }\n\n        &,\n        &:hover,\n        &:active {\n            box-shadow: none;\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n    @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /**\n     * The initials to be placed in the avatar of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /**\n     * The name to be used for the avatar of the card which will be converted to initials.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /**\n     * The source of the image to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\n     * - accent-1\n     * - accent-2\n     * - accent-3\n     * - accent-4\n     * - accent-5\n     * - accent-6\n     * - accent-7\n     * - accent-8\n     * - accent-9\n     * - accent-10\n     * - accent-11\n     * - accent-12\n     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /**\n     * The description of the card (truncated after two lines).\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * The size of the box-shadow applied to the component, giving it a sense of depth.\n     *\n     * @info\n     * Set to `0` to disable.\n     */\n    @Prop({ reflect: true })\n    elevation: 0 | 1 | 2 | 3 | 4 | 5 = 2;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /**\n     * Display the card with no borders, padding, drop-shadows, or clickable behavior.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Target to be applied to the link when a URL is provided.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /**\n     * The title of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /**\n     * URL to navigate the user to when the card is clicked.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // Clean up manual click override\n        if (this.hostElement) {\n            this.hostElement.click = null;\n        }\n\n        // Nullify DOM references\n        this.avatarElement = null;\n        this.clickableElement = null;\n        this.containerElement = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContainerClasses() {\n        const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n        const result = ['container', type];\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (isSmall) result.push('is-small');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n        if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n        return result.join(' ');\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-chart-area.js

@@ -263,7 +263,7 @@ const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartArea extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '89ba0cf8a1082938847d0c3c6db58adf585806ee', class: "container" }, h("div", { key: 'c58f71060bdf90bd85fd95519b93b8e97a2c8310', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '7e0c56495c29ca880bb40a09c0f9029d2eab50c6', class: "container" }, h("div", { key: '66ae46924390b1472b2e86c7ff782e89bfcaba1f', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-area.js.map

@@ -1 +1 @@
-{"file":"q2-chart-area.js","mappings":"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","names":["LineSeries","layoutPoints","echarts.use","AriaComponent","LineChart","CanvasRenderer","UniversalTransition","GridComponent","TitleComponent","Q2ChartArea","__stencil_proxyCustomElement","echarts.init"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/line/install.js","src/components/q2-chart-area/q2-chart-area.scss?tag=q2-chart-area&encapsulation=shadow","src/components/q2-chart-area/q2-chart-area.tsx"],"sourcesContent":["\n/*\n* Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements.  See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership.  The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License.  You may obtain a copy of the License at\n*\n*   http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied.  See the License for the\n* specific language governing permissions and limitations\n* under the License.\n*/\n\n\n/**\n * AUTO-GENERATED FILE. DO NOT MODIFY.\n */\n\n/*\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements.  See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership.  The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License.  You may obtain a copy of the License at\r\n*\r\n*   http://www.apache.org/licenses/LICENSE-2.0\r\n*\r\n* Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied.  See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n*/\nimport LineSeries from './LineSeries.js';\nimport LineView from './LineView.js';\n// In case developer forget to include grid component\nimport layoutPoints from '../../layout/points.js';\nimport dataSample from '../../processor/dataSample.js';\nexport function install(registers) {\n  registers.registerChartView(LineView);\n  registers.registerSeriesModel(LineSeries);\n  registers.registerLayout(layoutPoints('line', true));\n  registers.registerVisual({\n    seriesType: 'line',\n    reset: function (seriesModel) {\n      var data = seriesModel.getData();\n      // Visual coding for legend\n      var lineStyle = seriesModel.getModel('lineStyle').getLineStyle();\n      if (lineStyle && !lineStyle.stroke) {\n        // Fill in visual should be palette color if\n        // has color callback\n        lineStyle.stroke = data.getVisual('style').fill;\n      }\n      data.setVisual('legendLineStyle', lineStyle);\n    }\n  });\n  // Down sample after filter\n  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('line'));\n}","@import '../../styles/host.scss';\n\n:host {\n    width: var(--tct-area-chart-width, 100%);\n    height: var(--tct-area-chart-height, 100%);\n    display: block;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n}\n\n.chart-container {\n    width: 100%;\n    height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event, Method } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TitleComponent,\n    TitleComponentOption,\n    AriaComponent,\n    AriaComponentOption,\n    GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption | LineSeriesOption | TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-area', shadow: true, styleUrl: 'q2-chart-area.scss' })\nexport class Q2ChartArea implements ComponentInterface {\n    // #region Own Properties\n\n    chart: echarts.ECharts;\n    chartContainer: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeEventListener: EventListener;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls alignment of the chart name when its visible. */\n    @Prop({ reflect: true })\n    alignChartName: 'left' | 'right' | 'center';\n\n    /**\n     * Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    areaColor: string;\n\n    /**\n     * The title of the chart. We recommend always including this for accessibility purposes.\n     *\n     * It is hidden by default, but can be made visible with the `showChartName` variable.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    chartName: string;\n\n    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */\n    @Prop({ reflect: true })\n    chartSubTitle: string;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IChartData[] = [];\n\n    /**\n     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n     * Values will ellipsize if the truncate option is used.\n     */\n    @Prop({ reflect: true })\n    dataNamesOverflow: 'break' | 'truncate';\n\n    /**\n     * Sets width available for labels on the name axis.\n     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n     */\n    @Prop({ reflect: true })\n    dataNamesWidth: number;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true })\n    format: 'currency' | 'default';\n\n    /**\n     * Can be used in coordination with the currency format property to control decimal handling.\n     * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Controls the direction or viibility of grid lines on the chart. */\n    @Prop({ reflect: true })\n    gridLines: 'horizontal' | 'vertical' | 'off';\n\n    /**\n     * Sets chart padding around the grid.\n     * Each value in the object will be interpreted as pixels.\n     *\n     * **Example:**\n     * @snippet\n     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n     */\n    @Prop()\n    gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n    /** Controls visibility of labels on the name axis. */\n    @Prop({ reflect: true })\n    hideNameAxisLabels: boolean = false;\n\n    /** Controls visibility of labels on the value axis. */\n    @Prop({ reflect: true })\n    hideValueAxisLabels: boolean = false;\n\n    /**\n     * Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    lineColor: string;\n\n    /**\n     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataNames: boolean = false;\n\n    /**\n     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataValues: boolean = false;\n\n    /**\n     * Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    pointerLineColor: string;\n\n    /** Controls the style of the vertical poiner line. */\n    @Prop({ reflect: true })\n    pointerLineStyle: 'solid' | 'dashed';\n\n    /** Controls the visibility of the chart name at the top of the chart. */\n    @Prop({ reflect: true })\n    showChartName: boolean = false;\n\n    /** Controls the visibility of a value label when a data point is shown on the chart. */\n    @Prop({ reflect: true })\n    showDatapointLabels: boolean = false;\n\n    /**\n     * Controls making the area fill color into a gradient.\n     * The gradient starts at the top with the `areaColor` value, and fades to white.\n     */\n    @Prop({ reflect: true })\n    showGradient: boolean = false;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a data point is clicked.\n     */\n    @Event()\n    change: EventEmitter<{\n        index: number;\n        data: IChartData;\n    }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // CRITICAL: Dispose eCharts instance to prevent memory leaks\n        // eCharts holds references to canvas, event listeners, and animation frames\n        if (this.chart) {\n            this.chart.dispose();\n            this.chart = null;\n        }\n\n        // Remove window resize listener\n        window.removeEventListener('resize', this.resizeEventListener);\n\n        // Clear cached style references that hold DOM references (Safari memory management)\n        this.chartContainerStyles = null;\n        this.hostElementStyles = null;\n\n        // Clear DOM and event listener references\n        this.chartContainer = null;\n        this.resizeEventListener = null;\n    }\n\n    componentDidLoad() {\n        const chart = echarts.init(this.chartContainer);\n\n        this.chart = chart;\n\n        this.resizeEventListener = () => this.resizeChart();\n        window.addEventListener('resize', this.resizeEventListener);\n\n        this.cacheComputedStyles();\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to fire change event on hover on a point.\n     *\n     * @testOnly\n     */\n    @Method()\n    async hoverDataPoint(index: number) {\n        this.change.emit({\n            index: index,\n            data: this.data[index],\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('data')\n    @Watch('alignChartName')\n    @Watch('chartName')\n    @Watch('chartSubTitle')\n    @Watch('lineColor')\n    @Watch('pointerLineColor')\n    @Watch('pointerLineStyle')\n    @Watch('areaColor')\n    @Watch('dataNamesOverflow')\n    @Watch('dataNamesWidth')\n    @Watch('format')\n    @Watch('formatModifier')\n    @Watch('hideNameAxisLabels')\n    @Watch('hideValueAxisLabels')\n    @Watch('offsetDataNames')\n    @Watch('offsetDataValues')\n    @Watch('showChartName')\n    @Watch('showDatapointLabels')\n    @Watch('showGradient')\n    @Watch('gridLines')\n    @Watch('gridPadding')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    getAreaFill() {\n        if (this.showGradient) {\n            return {\n                type: 'linear',\n                x: 0,\n                y: 0,\n                x2: 0,\n                y2: 1,\n                colorStops: [\n                    {\n                        offset: 0,\n                        color: this.getColor(this.areaColor),\n                    },\n                    {\n                        offset: 1,\n                        color: 'white',\n                    },\n                ],\n                global: false,\n            };\n        }\n        return this.getColor(this.areaColor);\n    }\n\n    getColor(color: string) {\n        const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n        const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n        if (cssColorProp) return cssColorProp;\n        if (isValidColor(color)) return color;\n        return primaryColor;\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        chart.on('finished', () => {\n            const canvas = chart.getDom().querySelector('canvas');\n            if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n            canvas.setAttribute('aria-hidden', 'true');\n        });\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n        const valueAxis = {\n            type: 'value',\n            axisLabel: {\n                formatter: (value: number) =>\n                    formatValue(value, {\n                        type: this.format,\n                        decimals,\n                    }),\n                rotate: this.offsetDataValues ? 45 : 0,\n                margin: this.offsetDataValues ? 15 : 8,\n                show: !this.hideValueAxisLabels,\n            },\n            splitLine: {\n                show: this.gridLines === 'horizontal' || !this.gridLines,\n            },\n        };\n\n        const categoryAxis = {\n            type: 'category',\n            boundaryGap: false,\n            data: this.data.map(datum => loc(datum.name) || ''),\n            axisLabel: {\n                rotate: this.offsetDataNames ? 45 : 0,\n                margin: this.offsetDataNames ? 15 : 8,\n                width: this.dataNamesWidth || 50,\n                overflow: this.dataNamesOverflow || 'none',\n                truncate: 'ellipsis',\n                show: !this.hideNameAxisLabels,\n            },\n            axisLine: {\n                show: !this.hideNameAxisLabels,\n            },\n            axisTick: {\n                show: !this.hideNameAxisLabels,\n            },\n            axisPointer: {\n                show: true,\n                type: 'line',\n                label: {\n                    show: false,\n                    formatter: (params: any) => {\n                        const dataIndex = params.seriesData[0].dataIndex;\n                        this.change.emit({\n                            index: dataIndex,\n                            data: this.data[dataIndex],\n                        });\n                    },\n                },\n                lineStyle: {\n                    color: this.getColor(this.pointerLineColor || 'var(--t-gray-10)'),\n                    type: this.pointerLineStyle || 'solid',\n                    width: 1.5,\n                },\n                z: 1,\n            },\n            splitLine: {\n                show: this.gridLines === 'vertical',\n            },\n        };\n\n        return chart.setOption<EChartsOption>({\n            aria: {\n                enabled: true,\n            },\n            title: {\n                text: loc(this.chartName),\n                show: this.showChartName,\n                left: this.alignChartName,\n                subtext: this.chartSubTitle,\n            },\n            grid: {\n                containLabel: true,\n                ...this.gridPadding,\n            },\n            xAxis: categoryAxis,\n            yAxis: valueAxis,\n            series: [\n                {\n                    data: this.data.map(datum => datum.value || 0),\n                    id: 'area',\n                    type: 'line',\n                    lineStyle: {\n                        color: this.getColor(this.lineColor),\n                    },\n                    itemStyle: {\n                        color: this.getColor(this.lineColor),\n                    },\n                    areaStyle: {\n                        color: this.getAreaFill(),\n                    },\n                    symbolSize: 10,\n                    showSymbol: false,\n                    label: {\n                        show: this.showDatapointLabels,\n                        position: 'right',\n                        formatter: (params: any) => {\n                            return formatValue(params.value as number, {\n                                type: this.format,\n                                decimals,\n                            });\n                        },\n                    },\n                },\n            ],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <div\n                    ref={el => (this.chartContainer = el)}\n                    class=\"chart-container\"\n                    role=\"img\"\n                    test-id=\"areaChartContainer\"\n                ></div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-chart-area.js","mappings":";;;;;;AAgDO,SAAS,OAAO,CAAC,SAAS,EAAE;AACnC,EAAE,SAAS,CAAC,iBAAiB,CAAC,QAAQ,CAAC;AACvC,EAAE,SAAS,CAAC,mBAAmB,CAACA,eAAU,CAAC;AAC3C,EAAE,SAAS,CAAC,cAAc,CAACC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACtD,EAAE,SAAS,CAAC,cAAc,CAAC;AAC3B,IAAI,UAAU,EAAE,MAAM;AACtB,IAAI,KAAK,EAAE,UAAU,WAAW,EAAE;AAClC,MAAM,IAAI,IAAI,GAAG,WAAW,CAAC,OAAO,EAAE;AACtC;AACA,MAAM,IAAI,SAAS,GAAG,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,YAAY,EAAE;AACtE,MAAM,IAAI,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;AAC1C;AACA;AACA,QAAQ,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI;AACvD;AACA,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,SAAS,CAAC;AAClD;AACA,GAAG,CAAC;AACJ;AACA,EAAE,SAAS,CAAC,iBAAiB,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;AACzF;;ACpEA,MAAM,cAAc,GAAG,i1BAAi1B;;ACiBx2BC,GAAW,CAAC,CAACC,SAAa,EAAEC,OAAS,EAAEC,SAAc,EAAEC,0BAAmB,EAAEC,SAAa,EAAEC,SAAc,CAAC,CAAC;MAK9FC,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AADxB,IAAA,WAAA,GAAA;;;;;;AAkDI,QAAA,IAAI,CAAA,IAAA,GAAiB,EAAE;;AA4CvB,QAAA,IAAkB,CAAA,kBAAA,GAAY,KAAK;;AAInC,QAAA,IAAmB,CAAA,mBAAA,GAAY,KAAK;AAcpC;;;AAGG;AAEH,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAEhC;;;AAGG;AAEH,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;;AAoBjC,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;;AAI9B,QAAA,IAAmB,CAAA,mBAAA,GAAY,KAAK;AAEpC;;;AAGG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAmRhC;;;IAlQG,oBAAoB,GAAA;;;AAGhB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACZ,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;AACpB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;;QAIrB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC;;AAG9D,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;AAChC,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;;AAG7B,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;;IAGnC,gBAAgB,GAAA;QACZ,MAAM,KAAK,GAAGC,IAAY,CAAC,IAAI,CAAC,cAAc,CAAC;AAE/C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;QAElB,IAAI,CAAC,mBAAmB,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE;QACnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC;QAE3D,IAAI,CAAC,mBAAmB,EAAE;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAE5B,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAMnC;;;;AAIG;IAEH,MAAM,cAAc,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;AACb,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACzB,SAAA,CAAC;;;;IA2BN,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;;;IAMhC,mBAAmB,GAAA;QACf,IAAI,CAAC,oBAAoB,GAAG,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC;QACjE,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG/D,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,OAAO;AACH,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,CAAC,EAAE,CAAC;AACJ,gBAAA,CAAC,EAAE,CAAC;AACJ,gBAAA,EAAE,EAAE,CAAC;AACL,gBAAA,EAAE,EAAE,CAAC;AACL,gBAAA,UAAU,EAAE;AACR,oBAAA;AACI,wBAAA,MAAM,EAAE,CAAC;wBACT,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AACvC,qBAAA;AACD,oBAAA;AACI,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,KAAK,EAAE,OAAO;AACjB,qBAAA;AACJ,iBAAA;AACD,gBAAA,MAAM,EAAE,KAAK;aAChB;;QAEL,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGxC,IAAA,QAAQ,CAAC,KAAa,EAAA;AAClB,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,kBAAkB,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC;AAC1G,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,CAAC;AAC7F,QAAA,IAAI,YAAY;AAAE,YAAA,OAAO,YAAY;QACrC,IAAI,YAAY,CAAC,KAAK,CAAC;AAAE,YAAA,OAAO,KAAK;AACrC,QAAA,OAAO,YAAY;;IAGvB,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;AAGvB,IAAA,gBAAgB,CAAC,KAAsB,EAAA;AACnC,QAAA,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,MAAK;;YACtB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC;AACrD,YAAA,IAAI,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAE,YAAY,CAAC,aAAa,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;gBAAE;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AAC9C,SAAC,CAAC;;AAGN,IAAA,WAAW,CAAC,KAAsB,EAAA;;QAC9B,MAAM,QAAQ,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC;AAElG,QAAA,MAAM,SAAS,GAAG;AACd,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,SAAS,EAAE;gBACP,SAAS,EAAE,CAAC,KAAa,KACrB,WAAW,CAAC,KAAK,EAAE;oBACf,IAAI,EAAE,IAAI,CAAC,MAAM;oBACjB,QAAQ;iBACX,CAAC;gBACN,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,CAAC;gBACtC,MAAM,EAAE,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,CAAC;AACtC,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,mBAAmB;AAClC,aAAA;AACD,YAAA,SAAS,EAAE;gBACP,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,SAAS;AAC3D,aAAA;SACJ;AAED,QAAA,MAAM,YAAY,GAAG;AACjB,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACnD,YAAA,SAAS,EAAE;gBACP,MAAM,EAAE,IAAI,CAAC,eAAe,GAAG,EAAE,GAAG,CAAC;gBACrC,MAAM,EAAE,IAAI,CAAC,eAAe,GAAG,EAAE,GAAG,CAAC;AACrC,gBAAA,KAAK,EAAE,IAAI,CAAC,cAAc,IAAI,EAAE;AAChC,gBAAA,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAAI,MAAM;AAC1C,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,kBAAkB;AACjC,aAAA;AACD,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,kBAAkB;AACjC,aAAA;AACD,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE,CAAC,IAAI,CAAC,kBAAkB;AACjC,aAAA;AACD,YAAA,WAAW,EAAE;AACT,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE;AACH,oBAAA,IAAI,EAAE,KAAK;AACX,oBAAA,SAAS,EAAE,CAAC,MAAW,KAAI;wBACvB,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS;AAChD,wBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;AACb,4BAAA,KAAK,EAAE,SAAS;AAChB,4BAAA,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7B,yBAAA,CAAC;qBACL;AACJ,iBAAA;AACD,gBAAA,SAAS,EAAE;oBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,IAAI,kBAAkB,CAAC;AACjE,oBAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,IAAI,OAAO;AACtC,oBAAA,KAAK,EAAE,GAAG;AACb,iBAAA;AACD,gBAAA,CAAC,EAAE,CAAC;AACP,aAAA;AACD,YAAA,SAAS,EAAE;AACP,gBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;AACtC,aAAA;SACJ;QAED,OAAO,KAAK,CAAC,SAAS,CAAgB;AAClC,YAAA,IAAI,EAAE;AACF,gBAAA,OAAO,EAAE,IAAI;AAChB,aAAA;AACD,YAAA,KAAK,EAAE;AACH,gBAAA,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBACzB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,IAAI,EAAE,IAAI,CAAC,cAAc;gBACzB,OAAO,EAAE,IAAI,CAAC,aAAa;AAC9B,aAAA;AACD,YAAA,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,YAAY,EAAE,IAAI,IACf,IAAI,CAAC,WAAW,CACtB;AACD,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE;AACJ,gBAAA;AACI,oBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;AAC9C,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,SAAS,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AACvC,qBAAA;AACD,oBAAA,SAAS,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AACvC,qBAAA;AACD,oBAAA,SAAS,EAAE;AACP,wBAAA,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;AAC5B,qBAAA;AACD,oBAAA,UAAU,EAAE,EAAE;AACd,oBAAA,UAAU,EAAE,KAAK;AACjB,oBAAA,KAAK,EAAE;wBACH,IAAI,EAAE,IAAI,CAAC,mBAAmB;AAC9B,wBAAA,QAAQ,EAAE,OAAO;AACjB,wBAAA,SAAS,EAAE,CAAC,MAAW,KAAI;AACvB,4BAAA,OAAO,WAAW,CAAC,MAAM,CAAC,KAAe,EAAE;gCACvC,IAAI,EAAE,IAAI,CAAC,MAAM;gCACjB,QAAQ;AACX,6BAAA,CAAC;yBACL;AACJ,qBAAA;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA,CAAC;;;;IAMN,MAAM,GAAA;QACF,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClB,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,KAAK,EAAA,SAAA,EACF,oBAAoB,EAAA,CACzB,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LineSeries","layoutPoints","echarts.use","AriaComponent","LineChart","CanvasRenderer","UniversalTransition","GridComponent","TitleComponent","Q2ChartArea","__stencil_proxyCustomElement","echarts.init"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/line/install.js","src/components/q2-chart-area/q2-chart-area.scss?tag=q2-chart-area&encapsulation=shadow","src/components/q2-chart-area/q2-chart-area.tsx"],"sourcesContent":["\n/*\n* Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements.  See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership.  The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License.  You may obtain a copy of the License at\n*\n*   http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied.  See the License for the\n* specific language governing permissions and limitations\n* under the License.\n*/\n\n\n/**\n * AUTO-GENERATED FILE. DO NOT MODIFY.\n */\n\n/*\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements.  See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership.  The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License.  You may obtain a copy of the License at\r\n*\r\n*   http://www.apache.org/licenses/LICENSE-2.0\r\n*\r\n* Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied.  See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n*/\nimport LineSeries from './LineSeries.js';\nimport LineView from './LineView.js';\n// In case developer forget to include grid component\nimport layoutPoints from '../../layout/points.js';\nimport dataSample from '../../processor/dataSample.js';\nexport function install(registers) {\n  registers.registerChartView(LineView);\n  registers.registerSeriesModel(LineSeries);\n  registers.registerLayout(layoutPoints('line', true));\n  registers.registerVisual({\n    seriesType: 'line',\n    reset: function (seriesModel) {\n      var data = seriesModel.getData();\n      // Visual coding for legend\n      var lineStyle = seriesModel.getModel('lineStyle').getLineStyle();\n      if (lineStyle && !lineStyle.stroke) {\n        // Fill in visual should be palette color if\n        // has color callback\n        lineStyle.stroke = data.getVisual('style').fill;\n      }\n      data.setVisual('legendLineStyle', lineStyle);\n    }\n  });\n  // Down sample after filter\n  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('line'));\n}","@import '../../styles/host.scss';\n\n:host {\n    width: var(--tct-area-chart-width, 100%);\n    height: var(--tct-area-chart-height, 100%);\n    display: block;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n}\n\n.chart-container {\n    width: 100%;\n    height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event, Method } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TitleComponent,\n    TitleComponentOption,\n    AriaComponent,\n    AriaComponentOption,\n    GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\n\nimport type { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption | LineSeriesOption | TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-area', shadow: true, styleUrl: 'q2-chart-area.scss' })\nexport class Q2ChartArea implements ComponentInterface {\n    // #region Own Properties\n\n    chart: echarts.ECharts;\n    chartContainer: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeEventListener: EventListener;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls alignment of the chart name when its visible. */\n    @Prop({ reflect: true })\n    alignChartName: 'left' | 'right' | 'center';\n\n    /**\n     * Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    areaColor: string;\n\n    /**\n     * The title of the chart. We recommend always including this for accessibility purposes.\n     *\n     * It is hidden by default, but can be made visible with the `showChartName` variable.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    chartName: string;\n\n    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */\n    @Prop({ reflect: true })\n    chartSubTitle: string;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IChartData[] = [];\n\n    /**\n     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n     * Values will ellipsize if the truncate option is used.\n     */\n    @Prop({ reflect: true })\n    dataNamesOverflow: 'break' | 'truncate';\n\n    /**\n     * Sets width available for labels on the name axis.\n     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n     */\n    @Prop({ reflect: true })\n    dataNamesWidth: number;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true })\n    format: 'currency' | 'default';\n\n    /**\n     * Can be used in coordination with the currency format property to control decimal handling.\n     * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /** Controls the direction or viibility of grid lines on the chart. */\n    @Prop({ reflect: true })\n    gridLines: 'horizontal' | 'vertical' | 'off';\n\n    /**\n     * Sets chart padding around the grid.\n     * Each value in the object will be interpreted as pixels.\n     *\n     * **Example:**\n     * @snippet\n     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n     */\n    @Prop()\n    gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n    /** Controls visibility of labels on the name axis. */\n    @Prop({ reflect: true })\n    hideNameAxisLabels: boolean = false;\n\n    /** Controls visibility of labels on the value axis. */\n    @Prop({ reflect: true })\n    hideValueAxisLabels: boolean = false;\n\n    /**\n     * Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    lineColor: string;\n\n    /**\n     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataNames: boolean = false;\n\n    /**\n     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataValues: boolean = false;\n\n    /**\n     * Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    pointerLineColor: string;\n\n    /** Controls the style of the vertical poiner line. */\n    @Prop({ reflect: true })\n    pointerLineStyle: 'solid' | 'dashed';\n\n    /** Controls the visibility of the chart name at the top of the chart. */\n    @Prop({ reflect: true })\n    showChartName: boolean = false;\n\n    /** Controls the visibility of a value label when a data point is shown on the chart. */\n    @Prop({ reflect: true })\n    showDatapointLabels: boolean = false;\n\n    /**\n     * Controls making the area fill color into a gradient.\n     * The gradient starts at the top with the `areaColor` value, and fades to white.\n     */\n    @Prop({ reflect: true })\n    showGradient: boolean = false;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a data point is clicked.\n     */\n    @Event()\n    change: EventEmitter<{\n        index: number;\n        data: IChartData;\n    }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // CRITICAL: Dispose eCharts instance to prevent memory leaks\n        // eCharts holds references to canvas, event listeners, and animation frames\n        if (this.chart) {\n            this.chart.dispose();\n            this.chart = null;\n        }\n\n        // Remove window resize listener\n        window.removeEventListener('resize', this.resizeEventListener);\n\n        // Clear cached style references that hold DOM references (Safari memory management)\n        this.chartContainerStyles = null;\n        this.hostElementStyles = null;\n\n        // Clear DOM and event listener references\n        this.chartContainer = null;\n        this.resizeEventListener = null;\n    }\n\n    componentDidLoad() {\n        const chart = echarts.init(this.chartContainer);\n\n        this.chart = chart;\n\n        this.resizeEventListener = () => this.resizeChart();\n        window.addEventListener('resize', this.resizeEventListener);\n\n        this.cacheComputedStyles();\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to fire change event on hover on a point.\n     *\n     * @testOnly\n     */\n    @Method()\n    async hoverDataPoint(index: number) {\n        this.change.emit({\n            index: index,\n            data: this.data[index],\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('data')\n    @Watch('alignChartName')\n    @Watch('chartName')\n    @Watch('chartSubTitle')\n    @Watch('lineColor')\n    @Watch('pointerLineColor')\n    @Watch('pointerLineStyle')\n    @Watch('areaColor')\n    @Watch('dataNamesOverflow')\n    @Watch('dataNamesWidth')\n    @Watch('format')\n    @Watch('formatModifier')\n    @Watch('hideNameAxisLabels')\n    @Watch('hideValueAxisLabels')\n    @Watch('offsetDataNames')\n    @Watch('offsetDataValues')\n    @Watch('showChartName')\n    @Watch('showDatapointLabels')\n    @Watch('showGradient')\n    @Watch('gridLines')\n    @Watch('gridPadding')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    getAreaFill() {\n        if (this.showGradient) {\n            return {\n                type: 'linear',\n                x: 0,\n                y: 0,\n                x2: 0,\n                y2: 1,\n                colorStops: [\n                    {\n                        offset: 0,\n                        color: this.getColor(this.areaColor),\n                    },\n                    {\n                        offset: 1,\n                        color: 'white',\n                    },\n                ],\n                global: false,\n            };\n        }\n        return this.getColor(this.areaColor);\n    }\n\n    getColor(color: string) {\n        const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n        const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n        if (cssColorProp) return cssColorProp;\n        if (isValidColor(color)) return color;\n        return primaryColor;\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        chart.on('finished', () => {\n            const canvas = chart.getDom().querySelector('canvas');\n            if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n            canvas.setAttribute('aria-hidden', 'true');\n        });\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n        const valueAxis = {\n            type: 'value',\n            axisLabel: {\n                formatter: (value: number) =>\n                    formatValue(value, {\n                        type: this.format,\n                        decimals,\n                    }),\n                rotate: this.offsetDataValues ? 45 : 0,\n                margin: this.offsetDataValues ? 15 : 8,\n                show: !this.hideValueAxisLabels,\n            },\n            splitLine: {\n                show: this.gridLines === 'horizontal' || !this.gridLines,\n            },\n        };\n\n        const categoryAxis = {\n            type: 'category',\n            boundaryGap: false,\n            data: this.data.map(datum => loc(datum.name) || ''),\n            axisLabel: {\n                rotate: this.offsetDataNames ? 45 : 0,\n                margin: this.offsetDataNames ? 15 : 8,\n                width: this.dataNamesWidth || 50,\n                overflow: this.dataNamesOverflow || 'none',\n                truncate: 'ellipsis',\n                show: !this.hideNameAxisLabels,\n            },\n            axisLine: {\n                show: !this.hideNameAxisLabels,\n            },\n            axisTick: {\n                show: !this.hideNameAxisLabels,\n            },\n            axisPointer: {\n                show: true,\n                type: 'line',\n                label: {\n                    show: false,\n                    formatter: (params: any) => {\n                        const dataIndex = params.seriesData[0].dataIndex;\n                        this.change.emit({\n                            index: dataIndex,\n                            data: this.data[dataIndex],\n                        });\n                    },\n                },\n                lineStyle: {\n                    color: this.getColor(this.pointerLineColor || 'var(--t-gray-10)'),\n                    type: this.pointerLineStyle || 'solid',\n                    width: 1.5,\n                },\n                z: 1,\n            },\n            splitLine: {\n                show: this.gridLines === 'vertical',\n            },\n        };\n\n        return chart.setOption<EChartsOption>({\n            aria: {\n                enabled: true,\n            },\n            title: {\n                text: loc(this.chartName),\n                show: this.showChartName,\n                left: this.alignChartName,\n                subtext: this.chartSubTitle,\n            },\n            grid: {\n                containLabel: true,\n                ...this.gridPadding,\n            },\n            xAxis: categoryAxis,\n            yAxis: valueAxis,\n            series: [\n                {\n                    data: this.data.map(datum => datum.value || 0),\n                    id: 'area',\n                    type: 'line',\n                    lineStyle: {\n                        color: this.getColor(this.lineColor),\n                    },\n                    itemStyle: {\n                        color: this.getColor(this.lineColor),\n                    },\n                    areaStyle: {\n                        color: this.getAreaFill(),\n                    },\n                    symbolSize: 10,\n                    showSymbol: false,\n                    label: {\n                        show: this.showDatapointLabels,\n                        position: 'right',\n                        formatter: (params: any) => {\n                            return formatValue(params.value as number, {\n                                type: this.format,\n                                decimals,\n                            });\n                        },\n                    },\n                },\n            ],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <div\n                    ref={el => (this.chartContainer = el)}\n                    class=\"chart-container\"\n                    role=\"img\"\n                    test-id=\"areaChartContainer\"\n                ></div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-chart-bar.js

@@ -215,7 +215,7 @@ const Q2ChartBar$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartBar extends H
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '8f5aaffd7285680005468a7021903f1af96d2b39', class: "container" }, h("div", { key: 'ca0ece94964da6a37d83bd3c5f71a5e7a62dffb6', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '7b6e9ef642df64d9fe4eabd7e830f682c55ba3ef', class: "container" }, h("div", { key: 'dba3992a647c06c6a64af2b381a734703b05790c', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-chart-bar.js.map

@@ -1 +1 @@
-{"file":"q2-chart-bar.js","mappings":"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","names":["BarSeries","zrUtil.curry","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","Q2ChartBar","__stencil_proxyCustomElement","echarts.init"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/*\n* Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements.  See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership.  The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License.  You may obtain a copy of the License at\n*\n*   http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied.  See the License for the\n* specific language governing permissions and limitations\n* under the License.\n*/\n\n\n/**\n * AUTO-GENERATED FILE. DO NOT MODIFY.\n */\n\n/*\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements.  See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership.  The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License.  You may obtain a copy of the License at\r\n*\r\n*   http://www.apache.org/licenses/LICENSE-2.0\r\n*\r\n* Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied.  See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n*/\nimport * as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n  registers.registerChartView(BarView);\n  registers.registerSeriesModel(BarSeries);\n  registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n  // Do layout after other overall layout, which can prepare some information.\n  registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n  // Down sample after filter\n  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n  /**\r\n   * @payload\r\n   * @property {string} [componentType=series]\r\n   * @property {number} [dx]\r\n   * @property {number} [dy]\r\n   * @property {number} [zoom]\r\n   * @property {number} [originX]\r\n   * @property {number} [originY]\r\n   */\n  registers.registerAction({\n    type: 'changeAxisOrder',\n    event: 'changeAxisOrder',\n    update: 'update'\n  }, function (payload, ecModel) {\n    var componentType = payload.componentType || 'series';\n    ecModel.eachComponent({\n      mainType: componentType,\n      query: payload\n    }, function (componentModel) {\n      if (payload.sortInfo) {\n        componentModel.axis.setCategorySortInfo(payload.sortInfo);\n      }\n    });\n  });\n}","@import '../../styles/host.scss';\n\n:host {\n    width: var(--tct-bar-chart-width, 100%);\n    height: var(--tct-bar-chart-height, 100%);\n    display: block;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n}\n\n.chart-container {\n    width: 100%;\n    height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TitleComponent,\n    TitleComponentOption,\n    AriaComponent,\n    AriaComponentOption,\n    GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption | BarSeriesOption | TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n    // #region Own Properties\n\n    chart: echarts.ECharts;\n    chartContainer: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    chartFinishedListener: () => void;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeEventListener: EventListener;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls alignment of the chart name when its visible. */\n    @Prop({ reflect: true })\n    alignChartName: 'left' | 'right' | 'center';\n\n    /**\n     * The title of the chart. We recommend always including this for accessibility purposes.\n     *\n     * It is hidden by default, but can be made visible with the `showChartName` variable.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    chartName: string;\n\n    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */\n    @Prop({ reflect: true })\n    chartSubTitle: string;\n\n    /**\n     * Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n     * Accept variables, hex codes, an CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    color: string;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IChartData[] = [];\n\n    /**\n     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n     * Values will ellipsize if the truncate option is used.\n     */\n    @Prop({ reflect: true })\n    dataNamesOverflow: 'break' | 'truncate';\n\n    /**\n     * Sets width available for labels on the name axis.\n     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n     */\n    @Prop({ reflect: true })\n    dataNamesWidth: number;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true })\n    format: 'currency' | 'default';\n\n    /**\n     * Can be used in coordination with the currency format property to control decimal handling.\n     * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /**\n     * Sets chart padding around the grid.\n     * Each value in the object will be interpreted as pixels.\n     *\n     * **Example:**\n     * @snippet\n     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n     */\n    @Prop()\n    gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n    /** Controls visibility of labels on the name axis. */\n    @Prop({ reflect: true })\n    hideBarLabels: boolean = false;\n\n    /** Controls visibility of labels on the value axis. */\n    @Prop({ reflect: true })\n    hideValueAxisLabels: boolean = false;\n\n    /**\n     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataNames: boolean = false;\n\n    /**\n     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataValues: boolean = false;\n\n    /**\n     * Controls which axes are the value and name axes.\n     * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n     * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n     */\n    @Prop({ reflect: true })\n    orientation: 'vertical' | 'horizontal';\n\n    /** Controls the visibility of the chart name at the top of the chart. */\n    @Prop({ reflect: true })\n    showChartName: boolean = false;\n\n    /**\n     * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n     * When set to `true`, values on the bar will be re-sorted in descending order.\n     */\n    @Prop({ reflect: true })\n    sort: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // Remove event listeners\n        window.removeEventListener('resize', this.resizeEventListener);\n\n        // Clean up chart instance\n        if (this.chart) {\n            if (this.chartFinishedListener) {\n                this.chart.off('finished', this.chartFinishedListener);\n            }\n            this.chart.dispose();\n            this.chart = null;\n        }\n\n        // Null out cached computed styles to allow GC\n        this.chartContainerStyles = null;\n        this.hostElementStyles = null;\n\n        // Null out DOM references\n        this.chartContainer = null;\n        this.resizeEventListener = null;\n        this.chartFinishedListener = null;\n    }\n\n    componentDidLoad() {\n        const chart = echarts.init(this.chartContainer);\n\n        this.chart = chart;\n\n        this.resizeEventListener = () => this.resizeChart();\n        window.addEventListener('resize', this.resizeEventListener);\n\n        this.cacheComputedStyles();\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('chartName')\n    @Watch('chartSubTitle')\n    @Watch('color')\n    @Watch('hideBarLabels')\n    @Watch('showChartName')\n    @Watch('alignChartName')\n    @Watch('orientation')\n    @Watch('format')\n    @Watch('sort')\n    @Watch('data')\n    @Watch('offsetDataNames')\n    @Watch('hideValueAxisLabels')\n    @Watch('formatModifier')\n    @Watch('dataNamesOverflow')\n    @Watch('gridPadding')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    getColor(color: string) {\n        const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n        const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n        const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n        if (cssColorProp) return cssColorProp;\n        if (isValidColor(color)) return color;\n        if (seriesColor) return seriesColor;\n        if (isValidColor(this.color)) return this.color;\n        return primaryColor;\n    }\n\n    processData(data: IChartData[]) {\n        return data.map(datum => {\n            return {\n                value: datum.value || 0,\n                itemStyle: {\n                    color: this.getColor(datum.color),\n                },\n            };\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        this.chartFinishedListener = () => {\n            const canvas = chart.getDom().querySelector('canvas');\n            if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n            canvas.setAttribute('aria-hidden', 'true');\n        };\n        chart.on('finished', this.chartFinishedListener);\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n        const valueAxis = {\n            type: 'value',\n            axisLabel: {\n                formatter: (value: number) =>\n                    formatValue(value, {\n                        type: this.format,\n                        decimals,\n                    }),\n                rotate: this.offsetDataValues ? 45 : 0,\n                margin: this.offsetDataValues ? 15 : 8,\n                show: !this.hideValueAxisLabels,\n            },\n        };\n\n        const categoryAxis = {\n            type: 'category',\n            data: this.data.map(datum => loc(datum.name) || ''),\n            axisLabel: {\n                rotate: this.offsetDataNames ? 45 : 0,\n                margin: this.offsetDataNames ? 15 : 8,\n                interval: 0,\n                width: this.dataNamesWidth || 50,\n                overflow: this.dataNamesOverflow || 'none',\n                truncate: 'ellipsis',\n            },\n            axisTick: {\n                alignWithLabel: this.offsetDataNames,\n            },\n        };\n\n        return chart.setOption<EChartsOption>({\n            aria: {\n                enabled: true,\n            },\n            title: {\n                text: loc(this.chartName),\n                show: this.showChartName,\n                left: this.alignChartName,\n                subtext: this.chartSubTitle,\n            },\n            grid: {\n                containLabel: true,\n                ...this.gridPadding,\n            },\n            xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n            yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n            series: [\n                {\n                    data: this.processData(this.data),\n                    id: 'bar',\n                    type: 'bar',\n                    label: {\n                        show: !this.hideBarLabels,\n                        position: 'top',\n                        fontWeight: 'bold',\n                        formatter: (params: CallbackDataParams) => {\n                            return formatValue(params.value as number, {\n                                type: this.format,\n                                decimals,\n                            });\n                        },\n                    },\n                    realtimeSort: this.sort,\n                },\n            ],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <div\n                    ref={el => (this.chartContainer = el)}\n                    class=\"chart-container\"\n                    role=\"img\"\n                    test-id=\"barChartContainer\"\n                ></div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-chart-bar.js","mappings":"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","names":["BarSeries","zrUtil.curry","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","Q2ChartBar","__stencil_proxyCustomElement","echarts.init"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/*\n* Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements.  See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership.  The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License.  You may obtain a copy of the License at\n*\n*   http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied.  See the License for the\n* specific language governing permissions and limitations\n* under the License.\n*/\n\n\n/**\n * AUTO-GENERATED FILE. DO NOT MODIFY.\n */\n\n/*\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements.  See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership.  The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License.  You may obtain a copy of the License at\r\n*\r\n*   http://www.apache.org/licenses/LICENSE-2.0\r\n*\r\n* Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied.  See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n*/\nimport * as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n  registers.registerChartView(BarView);\n  registers.registerSeriesModel(BarSeries);\n  registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n  // Do layout after other overall layout, which can prepare some information.\n  registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n  // Down sample after filter\n  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n  /**\r\n   * @payload\r\n   * @property {string} [componentType=series]\r\n   * @property {number} [dx]\r\n   * @property {number} [dy]\r\n   * @property {number} [zoom]\r\n   * @property {number} [originX]\r\n   * @property {number} [originY]\r\n   */\n  registers.registerAction({\n    type: 'changeAxisOrder',\n    event: 'changeAxisOrder',\n    update: 'update'\n  }, function (payload, ecModel) {\n    var componentType = payload.componentType || 'series';\n    ecModel.eachComponent({\n      mainType: componentType,\n      query: payload\n    }, function (componentModel) {\n      if (payload.sortInfo) {\n        componentModel.axis.setCategorySortInfo(payload.sortInfo);\n      }\n    });\n  });\n}","@import '../../styles/host.scss';\n\n:host {\n    width: var(--tct-bar-chart-width, 100%);\n    height: var(--tct-bar-chart-height, 100%);\n    display: block;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n}\n\n.chart-container {\n    width: 100%;\n    height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TitleComponent,\n    TitleComponentOption,\n    AriaComponent,\n    AriaComponentOption,\n    GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport type { CallbackDataParams } from 'echarts/types/dist/shared';\nimport type { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption | BarSeriesOption | TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n    // #region Own Properties\n\n    chart: echarts.ECharts;\n    chartContainer: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    chartFinishedListener: () => void;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeEventListener: EventListener;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls alignment of the chart name when its visible. */\n    @Prop({ reflect: true })\n    alignChartName: 'left' | 'right' | 'center';\n\n    /**\n     * The title of the chart. We recommend always including this for accessibility purposes.\n     *\n     * It is hidden by default, but can be made visible with the `showChartName` variable.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    chartName: string;\n\n    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */\n    @Prop({ reflect: true })\n    chartSubTitle: string;\n\n    /**\n     * Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n     * Accept variables, hex codes, an CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    color: string;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IChartData[] = [];\n\n    /**\n     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n     * Values will ellipsize if the truncate option is used.\n     */\n    @Prop({ reflect: true })\n    dataNamesOverflow: 'break' | 'truncate';\n\n    /**\n     * Sets width available for labels on the name axis.\n     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n     */\n    @Prop({ reflect: true })\n    dataNamesWidth: number;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true })\n    format: 'currency' | 'default';\n\n    /**\n     * Can be used in coordination with the currency format property to control decimal handling.\n     * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /**\n     * Sets chart padding around the grid.\n     * Each value in the object will be interpreted as pixels.\n     *\n     * **Example:**\n     * @snippet\n     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n     */\n    @Prop()\n    gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n    /** Controls visibility of labels on the name axis. */\n    @Prop({ reflect: true })\n    hideBarLabels: boolean = false;\n\n    /** Controls visibility of labels on the value axis. */\n    @Prop({ reflect: true })\n    hideValueAxisLabels: boolean = false;\n\n    /**\n     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataNames: boolean = false;\n\n    /**\n     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataValues: boolean = false;\n\n    /**\n     * Controls which axes are the value and name axes.\n     * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n     * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n     */\n    @Prop({ reflect: true })\n    orientation: 'vertical' | 'horizontal';\n\n    /** Controls the visibility of the chart name at the top of the chart. */\n    @Prop({ reflect: true })\n    showChartName: boolean = false;\n\n    /**\n     * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n     * When set to `true`, values on the bar will be re-sorted in descending order.\n     */\n    @Prop({ reflect: true })\n    sort: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // Remove event listeners\n        window.removeEventListener('resize', this.resizeEventListener);\n\n        // Clean up chart instance\n        if (this.chart) {\n            if (this.chartFinishedListener) {\n                this.chart.off('finished', this.chartFinishedListener);\n            }\n            this.chart.dispose();\n            this.chart = null;\n        }\n\n        // Null out cached computed styles to allow GC\n        this.chartContainerStyles = null;\n        this.hostElementStyles = null;\n\n        // Null out DOM references\n        this.chartContainer = null;\n        this.resizeEventListener = null;\n        this.chartFinishedListener = null;\n    }\n\n    componentDidLoad() {\n        const chart = echarts.init(this.chartContainer);\n\n        this.chart = chart;\n\n        this.resizeEventListener = () => this.resizeChart();\n        window.addEventListener('resize', this.resizeEventListener);\n\n        this.cacheComputedStyles();\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('chartName')\n    @Watch('chartSubTitle')\n    @Watch('color')\n    @Watch('hideBarLabels')\n    @Watch('showChartName')\n    @Watch('alignChartName')\n    @Watch('orientation')\n    @Watch('format')\n    @Watch('sort')\n    @Watch('data')\n    @Watch('offsetDataNames')\n    @Watch('hideValueAxisLabels')\n    @Watch('formatModifier')\n    @Watch('dataNamesOverflow')\n    @Watch('gridPadding')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    getColor(color: string) {\n        const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n        const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n        const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n        if (cssColorProp) return cssColorProp;\n        if (isValidColor(color)) return color;\n        if (seriesColor) return seriesColor;\n        if (isValidColor(this.color)) return this.color;\n        return primaryColor;\n    }\n\n    processData(data: IChartData[]) {\n        return data.map(datum => {\n            return {\n                value: datum.value || 0,\n                itemStyle: {\n                    color: this.getColor(datum.color),\n                },\n            };\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        this.chartFinishedListener = () => {\n            const canvas = chart.getDom().querySelector('canvas');\n            if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n            canvas.setAttribute('aria-hidden', 'true');\n        };\n        chart.on('finished', this.chartFinishedListener);\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n        const valueAxis = {\n            type: 'value',\n            axisLabel: {\n                formatter: (value: number) =>\n                    formatValue(value, {\n                        type: this.format,\n                        decimals,\n                    }),\n                rotate: this.offsetDataValues ? 45 : 0,\n                margin: this.offsetDataValues ? 15 : 8,\n                show: !this.hideValueAxisLabels,\n            },\n        };\n\n        const categoryAxis = {\n            type: 'category',\n            data: this.data.map(datum => loc(datum.name) || ''),\n            axisLabel: {\n                rotate: this.offsetDataNames ? 45 : 0,\n                margin: this.offsetDataNames ? 15 : 8,\n                interval: 0,\n                width: this.dataNamesWidth || 50,\n                overflow: this.dataNamesOverflow || 'none',\n                truncate: 'ellipsis',\n            },\n            axisTick: {\n                alignWithLabel: this.offsetDataNames,\n            },\n        };\n\n        return chart.setOption<EChartsOption>({\n            aria: {\n                enabled: true,\n            },\n            title: {\n                text: loc(this.chartName),\n                show: this.showChartName,\n                left: this.alignChartName,\n                subtext: this.chartSubTitle,\n            },\n            grid: {\n                containLabel: true,\n                ...this.gridPadding,\n            },\n            xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n            yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n            series: [\n                {\n                    data: this.processData(this.data),\n                    id: 'bar',\n                    type: 'bar',\n                    label: {\n                        show: !this.hideBarLabels,\n                        position: 'top',\n                        fontWeight: 'bold',\n                        formatter: (params: CallbackDataParams) => {\n                            return formatValue(params.value as number, {\n                                type: this.format,\n                                decimals,\n                            });\n                        },\n                    },\n                    realtimeSort: this.sort,\n                },\n            ],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <div\n                    ref={el => (this.chartContainer = el)}\n                    class=\"chart-container\"\n                    role=\"img\"\n                    test-id=\"barChartContainer\"\n                ></div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-chart-donut.js

@@ -351,7 +351,7 @@ function install(registers) {
   registers.registerProcessor(negativeDataFilter('pie'));
 }
 
-const q2ChartDonutCss = "*{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}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 4px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
+const q2ChartDonutCss = "*{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}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center;position:relative}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}button{--comp-button-padding:var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-padding)}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}button:focus-visible{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));border-radius:50%}.center-card{height:100%;width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.center-card:is(button){cursor:pointer;background:var(--tct-chart-donut-button-background, transparent);border:0;border-radius:50%}.center-card:is(button):hover{background:var(--tct-chart-donut-button-hover-background, transparent)}.center-card:is(button):active{background:var(--tct-chart-donut-button-active-background, transparent)}.center-card:is(button):focus-visible{background:var(--tct-chart-donut-button-focus-background, transparent)}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));--comp-icon-margin:var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));margin:var(--comp-icon-margin)}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}figure{margin:0}.legend{margin-top:var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0))}";
 
 use([install$4, install$1, install, install$6, install$7, installLabelLayout]);
 const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut extends HTMLElement {
@@ -809,9 +809,9 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
                     labelLine: {
                         show: false,
                     },
+                    padAngle: 3,
                     itemStyle: {
-                        borderWidth: 5,
-                        borderColor: getCSSProperty('--comp-background-color', this.chartContainerStyles, this.hostElementStyles),
+                        borderRadius: 2,
                     },
                     emphasis: {
                         disabled: this.isMobile,
@@ -854,14 +854,14 @@ const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class Q2ChartDonut exten
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
+        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '7b0842ae9a1bf7f2d90a6e816423b8f151cc9f80', onChange: this.onClickElsewhere }, h("figure", { key: 'e1862769652dee09eb717ec27ebfba2f32898247' }, h("div", { key: 'cf3eef7cc8614ecceabed79482ad2818ed3d276b', class: "container" }, h("div", { key: '87e36066691c80fdf385bd299e6b3e1220aaf180', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'cbba4155c6de3cbc9029967f974f0cfee886ec89' }, h("q2-legend", { key: 'e63cdcc2ce1028d6175ed8412b3e47b6b085c11b', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '7fce70ed13e0ab56961564fee31721fe7ad4e850', onChange: this.onClickElsewhere }, h("figure", { key: '1603c5194a1451188564b52af36cafb1c5cf53f6' }, h("div", { key: '2fbf01b6b59713110ab0888ca3ea5d58e1e2bb97', class: "container" }, h("div", { key: '95fe2ad723f1d11e585299a6edb3637452b3328f', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'e27530f5c8bcf06034baa2b3d65e4f6194e84838' }, h("q2-legend", { key: 'a56be723750d75cc5698add048e49c1f9bf3a26f', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {