q2-tecton-elements 1.56.0 → 1.56.2

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

@@ -1 +1 @@
-{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"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    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\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    &.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    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\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(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-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            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\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(1);\n}\n\np {\n    @include line-clamp(2);\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\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\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, 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    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\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    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\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    /** URL to navigate the user to when the card is clicked. */\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        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(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    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\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 {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\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                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\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"],"mappings":"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"}
+{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"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    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(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\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    &.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    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\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(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-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            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\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    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\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\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, 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    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\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    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\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    /** URL to navigate the user to when the card is clicked. */\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        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(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    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\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 {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\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                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\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"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-carousel-pane.entry.js

@@ -99,7 +99,7 @@ const c = class {
   render() {
     const {label: e} = this;
     return t(r, {
-      key: "6bbb70ebc178e351702b79ab12050c84998e4c9e",
+      key: "eb479b4002eba012cdeb7445f70c9734a6c5371e",
       class: this.generatePaneClass(this.currentPaneIndex),
       tabIndex: this.isActivePane ? 0 : -1,
       role: "group",
@@ -108,10 +108,10 @@ const c = class {
       "aria-label": e ? n(e) : n("tecton.element.carousel.itemDescription", [ (this.currentPaneIndex + 1).toString(), (this.siblingCount || 0).toString() ]),
       onClick: this.paneClicked
     }, t("article", {
-      key: "08e793a4e7a20ab397a41afd7d493c33d0d1c2ff",
+      key: "1b6169d334748dca8b5c74cac9b12f7d7ca565a5",
       class: "q2-carousel-pane-main-content"
     }, t("slot", {
-      key: "041dd958e7027ed0a99a48b960a0e9655791dd96"
+      key: "b3459d31dd3960aa96d2e9772c2e87a232f64e3d"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-chart-area.entry.js

@@ -4284,10 +4284,10 @@ const aa = class {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "e0eaa73cf897de8c1e5bb0647a648e3cea6dcfc4",
+      key: "85df05669b0dffd91ea75a0e293be3e98c42f841",
       class: "container"
     }, t("div", {
-      key: "deb131339361a78cca8976d2737cba485f9e4ad2",
+      key: "9f377d127d3e0e3528fccf93aa8a7efe68865a86",
       ref: r => this.chartContainer = r,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-bar.entry.js

@@ -2,7 +2,7 @@ import { r as e, h as r, g as a } from "./index-7a5365e2.js";
 
 import { o as t, l as i } from "./index-c215e8ef.js";
 
-import { _ as s, I as n, S as o, b6 as h, P as u, b7 as l, o as c, a0 as d, h as f, i as v, u as p, s as g, H as b, b8 as m, G as w, m as S, d as B, C as A, W as y, a as x, g as M, b as k, b9 as P, t as V, z as C, ba as N, V as L, ai as D, bb as z, bc as j, a9 as U, aa as T, ab as I, ac as O, ad as R, ae as E, af as W } from "./charting-1abfb877.js";
+import { _ as s, I as n, S as o, b6 as h, P as u, b7 as l, o as d, a0 as c, h as f, i as v, u as p, s as g, H as b, b8 as m, G as w, m as S, d as B, C as A, W as y, a as x, g as M, b as k, b9 as P, t as V, z as C, ba as N, V as L, ai as D, bb as z, bc as j, a9 as U, aa as T, ab as I, ac as O, ad as R, ae as E, af as W } from "./charting-1abfb877.js";
 
 import { c as _, j as X, g as Y, i as H, a as F, e as q, f as Z, h as G } from "./dataSample-7b62e101.js";
 
@@ -52,12 +52,12 @@ var Q = /** @class */ function(e) {
             }
             var u = void 0;
             var l = void 0;
-            var c = 1;
-            for (var d = 0; d < t.length; d++) {
-              var f = t[d].coord;
+            var d = 1;
+            for (var c = 0; c < t.length; c++) {
+              var f = t[c].coord;
               // The last item of tickCoords doesn't contain
               // tickValue
-                            var v = d === t.length - 1 ? t[d - 1].tickValue + c : t[d].tickValue;
+                            var v = c === t.length - 1 ? t[c - 1].tickValue + d : t[c].tickValue;
               if (v === o) {
                 l = f;
                 break;
@@ -67,10 +67,10 @@ var Q = /** @class */ function(e) {
                 l = (f + u) / 2;
                 break;
               }
-              if (d === 1) {
+              if (c === 1) {
                 // Here we assume the step of category axes is
                 // the same
-                c = v - t[0].tickValue;
+                d = v - t[0].tickValue;
               }
             }
             if (l == null) {
@@ -223,17 +223,17 @@ var te = /** @class */ function(e) {
     var h = r.startAngle;
     var u = r.endAngle;
     var l = r.clockwise;
-    var c = Math.PI * 2;
-    var d = l ? u - h < c : h - u < c;
-    if (!d) {
+    var d = Math.PI * 2;
+    var c = l ? u - h < d : h - u < d;
+    if (!c) {
       // Normalize angles
-      h = u - (l ? c : -c);
+      h = u - (l ? d : -d);
     }
     var f = Math.cos(h);
     var v = Math.sin(h);
     var p = Math.cos(u);
     var g = Math.sin(u);
-    if (d) {
+    if (c) {
       e.moveTo(f * i + a, v * i + t);
       e.arc(f * o + a, v * o + t, n, -Math.PI + h, h, !l);
     } else {
@@ -263,81 +263,81 @@ function createSectorCalculateTextPosition(e, r) {
     var o = t.distance != null ? t.distance : 5;
     var h = this.shape;
     var u = h.cx;
-    var c = h.cy;
-    var d = h.r;
+    var d = h.cy;
+    var c = h.r;
     var f = h.r0;
-    var v = (d + f) / 2;
+    var v = (c + f) / 2;
     var p = h.startAngle;
     var g = h.endAngle;
     var b = (p + g) / 2;
-    var m = a ? Math.abs(d - f) / 2 : 0;
+    var m = a ? Math.abs(c - f) / 2 : 0;
     var w = Math.cos;
     var S = Math.sin;
     // base position: top-left
-        var B = u + d * w(p);
-    var A = c + d * S(p);
+        var B = u + c * w(p);
+    var A = d + c * S(p);
     var y = "left";
     var x = "top";
     switch (n) {
      case "startArc":
       B = u + (f - o) * w(b);
-      A = c + (f - o) * S(b);
+      A = d + (f - o) * S(b);
       y = "center";
       x = "top";
       break;
 
      case "insideStartArc":
       B = u + (f + o) * w(b);
-      A = c + (f + o) * S(b);
+      A = d + (f + o) * S(b);
       y = "center";
       x = "bottom";
       break;
 
      case "startAngle":
       B = u + v * w(p) + adjustAngleDistanceX(p, o + m, false);
-      A = c + v * S(p) + adjustAngleDistanceY(p, o + m, false);
+      A = d + v * S(p) + adjustAngleDistanceY(p, o + m, false);
       y = "right";
       x = "middle";
       break;
 
      case "insideStartAngle":
       B = u + v * w(p) + adjustAngleDistanceX(p, -o + m, false);
-      A = c + v * S(p) + adjustAngleDistanceY(p, -o + m, false);
+      A = d + v * S(p) + adjustAngleDistanceY(p, -o + m, false);
       y = "left";
       x = "middle";
       break;
 
      case "middle":
       B = u + v * w(b);
-      A = c + v * S(b);
+      A = d + v * S(b);
       y = "center";
       x = "middle";
       break;
 
      case "endArc":
-      B = u + (d + o) * w(b);
-      A = c + (d + o) * S(b);
+      B = u + (c + o) * w(b);
+      A = d + (c + o) * S(b);
       y = "center";
       x = "bottom";
       break;
 
      case "insideEndArc":
-      B = u + (d - o) * w(b);
-      A = c + (d - o) * S(b);
+      B = u + (c - o) * w(b);
+      A = d + (c - o) * S(b);
       y = "center";
       x = "top";
       break;
 
      case "endAngle":
       B = u + v * w(g) + adjustAngleDistanceX(g, o + m, true);
-      A = c + v * S(g) + adjustAngleDistanceY(g, o + m, true);
+      A = d + v * S(g) + adjustAngleDistanceY(g, o + m, true);
       y = "left";
       x = "middle";
       break;
 
      case "insideEndAngle":
       B = u + v * w(g) + adjustAngleDistanceX(g, -o + m, true);
-      A = c + v * S(g) + adjustAngleDistanceY(g, -o + m, true);
+      A = d + v * S(g) + adjustAngleDistanceY(g, -o + m, true);
       y = "right";
       x = "middle";
       break;
@@ -355,13 +355,13 @@ function createSectorCalculateTextPosition(e, r) {
 }
 
 function setSectorTextRotation(e, r, a, t) {
-  if (c(t)) {
+  if (d(t)) {
     // user-set rotation
     e.setTextConfig({
       rotation: t
     });
     return;
-  } else if (d(r)) {
+  } else if (c(r)) {
     // user-set position, use 0 as auto rotation
     e.setTextConfig({
       rotation: 0
@@ -502,11 +502,11 @@ var oe = /** @class */ function(e) {
       u = h.dim === "angle";
     }
     var l = e.isAnimationEnabled() ? e : null;
-    var c = shouldRealtimeSort(e, o);
-    if (c) {
-      this._enableRealtimeSort(c, s, a);
+    var d = shouldRealtimeSort(e, o);
+    if (d) {
+      this._enableRealtimeSort(d, s, a);
     }
-    var d = e.get("clip", true) || c;
+    var c = e.get("clip", true) || d;
     var f = getClipArea(o, s);
     // If there is clipPath created in large mode. Remove it.
         i.removeClipPath();
@@ -540,17 +540,17 @@ var oe = /** @class */ function(e) {
         createBackground(r);
       }
       // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
-            if (!s.hasValue(r) || !de[o.type](t)) {
+            if (!s.hasValue(r) || !ce[o.type](t)) {
         return;
       }
       var n = false;
-      if (d) {
+      if (c) {
         // Clip will modify the layout params.
         // And return a boolean to determine if the shape are fully clipped.
         n = he[o.type](f, t);
       }
       var p = ue[o.type](e, s, r, t, u, l, h.model, false, S);
-      if (c) {
+      if (d) {
         /**
          * Force label animation because even if the element is
          * ignored because it's clipped, it may not be clipped after
@@ -566,8 +566,8 @@ var oe = /** @class */ function(e) {
         p.attr({
           shape: t
         });
-      } else if (c) {
-        updateRealtimeAnimation(c, l, p, t, r, u, false, false);
+      } else if (d) {
+        updateRealtimeAnimation(d, l, p, t, r, u, false, false);
       } else {
         v(p, {
           shape: t
@@ -601,12 +601,12 @@ var oe = /** @class */ function(e) {
         }, l, r);
       }
       var C = n.getItemGraphicEl(a);
-      if (!s.hasValue(r) || !de[o.type](v)) {
+      if (!s.hasValue(r) || !ce[o.type](v)) {
         i.remove(C);
         return;
       }
       var N = false;
-      if (d) {
+      if (c) {
         N = he[o.type](f, v);
         if (N) {
           i.remove(C);
@@ -617,7 +617,7 @@ var oe = /** @class */ function(e) {
       } else {
         g(C);
       }
-      if (c) {
+      if (d) {
         C.forceLabelAnimation = true;
       }
       if (P) {
@@ -644,8 +644,8 @@ var oe = /** @class */ function(e) {
         C.attr({
           shape: v
         });
-      } else if (c) {
-        updateRealtimeAnimation(c, l, C, v, r, u, true, P);
+      } else if (d) {
+        updateRealtimeAnimation(d, l, C, v, r, u, true, P);
       } else {
         p(C, {
           shape: v
@@ -845,15 +845,15 @@ var he = {
     var h = se(r.y, e.y);
     var u = ne(r.y + r.height, s);
     var l = o < n;
-    var c = u < h;
+    var d = u < h;
     // When xClipped or yClipped, the element will be marked as `ignore`.
     // But we should also place the element at the edge of the coord sys bounding rect.
     // Because if data changed and the bar shows again, its transition animation
     // will begin at this place.
         r.x = l && n > i ? o : n;
-    r.y = c && h > s ? u : h;
+    r.y = d && h > s ? u : h;
     r.width = l ? 0 : o - n;
-    r.height = c ? 0 : u - h;
+    r.height = d ? 0 : u - h;
     // Reverse back
         if (a < 0) {
       r.x += r.width;
@@ -863,7 +863,7 @@ var he = {
       r.y += r.height;
       r.height = -r.height;
     }
-    return l || c;
+    return l || d;
   },
   polar: function(e, r) {
     var a = r.r0 <= r.r ? 1 : -1;
@@ -898,8 +898,8 @@ var ue = {
     u.name = "item";
     if (s) {
       var l = u.shape;
-      var c = i ? "height" : "width";
-      l[c] = 0;
+      var d = i ? "height" : "width";
+      l[d] = 0;
     }
     return u;
   },
@@ -910,16 +910,16 @@ var ue = {
       z2: 1
     });
     l.name = "item";
-    var c = createPolarPositionMapping(i);
-    l.calculateTextPosition = createSectorCalculateTextPosition(c, {
+    var d = createPolarPositionMapping(i);
+    l.calculateTextPosition = createSectorCalculateTextPosition(d, {
       isRoundCap: u === ie
     });
     // Animation
         if (s) {
-      var d = l.shape;
+      var c = l.shape;
       var f = i ? "r" : "endAngle";
       var g = {};
-      d[f] = i ? t.r0 : t.startAngle;
+      c[f] = i ? t.r0 : t.startAngle;
       g[f] = t[f];
       (o ? p : v)(l, {
         shape: g
@@ -986,14 +986,14 @@ function checkPropertiesNotValid(e, r) {
 
 var le = [ "x", "y", "width", "height" ];
 
-var ce = [ "cx", "cy", "r", "startAngle", "endAngle" ];
+var de = [ "cx", "cy", "r", "startAngle", "endAngle" ];
 
-var de = {
+var ce = {
   cartesian2d: function(e) {
     return !checkPropertiesNotValid(e, le);
   },
   polar: function(e) {
-    return !checkPropertiesNotValid(e, ce);
+    return !checkPropertiesNotValid(e, de);
   }
 };
 
@@ -1055,10 +1055,10 @@ function updateStyle(e, r, a, t, i, s, o, h) {
     var l = t.get([ "itemStyle", "borderRadius" ]) || 0;
     e.setShape("r", l);
   } else if (!s.get("roundCap")) {
-    var c = e.shape;
-    var d = J(t.getModel("itemStyle"), c, true);
-    x(c, d);
-    e.setShape(c);
+    var d = e.shape;
+    var c = J(t.getModel("itemStyle"), d, true);
+    x(d, c);
+    e.setShape(d);
   }
   e.useStyle(u);
   var f = t.getShallow("cursor");
@@ -1169,7 +1169,7 @@ function createLarge(e, r, a, t) {
     r.add(l);
     a && a.push(l);
   }
-  var c = new pe({
+  var d = new pe({
     shape: {
       points: i.getLayout("largePoints")
     },
@@ -1177,18 +1177,18 @@ function createLarge(e, r, a, t) {
     ignoreCoarsePointer: true,
     z2: 1
   });
-  c.baseDimIdx = s;
-  c.largeDataIndices = n;
-  c.barWidth = o;
-  r.add(c);
-  c.useStyle(i.getVisual("style"));
+  d.baseDimIdx = s;
+  d.largeDataIndices = n;
+  d.barWidth = o;
+  r.add(d);
+  d.useStyle(i.getVisual("style"));
   // Enable tooltip and user mouse/touch event handlers.
-    B(c).seriesIndex = e.seriesIndex;
+    B(d).seriesIndex = e.seriesIndex;
   if (!e.get("silent")) {
-    c.on("mousedown", ge);
-    c.on("mousemove", ge);
+    d.on("mousedown", ge);
+    d.on("mousemove", ge);
   }
-  a && a.push(c);
+  a && a.push(d);
 }
 
 // Use throttle to avoid frequently traverse to find dataIndex.
@@ -1206,12 +1206,12 @@ function largePathFindDataIndex(e, r, a) {
   var o = [];
   var h = [];
   var u = e.barWidth;
-  for (var l = 0, c = s.length / 3; l < c; l++) {
-    var d = l * 3;
+  for (var l = 0, d = s.length / 3; l < d; l++) {
+    var c = l * 3;
     h[t] = u;
-    h[i] = s[d + 2];
-    o[t] = s[d + t];
-    o[i] = s[d + i];
+    h[i] = s[c + 2];
+    o[t] = s[c + t];
+    o[i] = s[c + i];
     if (h[i] < 0) {
       o[i] += h[i];
       h[i] = -h[i];
@@ -1439,10 +1439,10 @@ const Se = class {
   // #region Render Methods
   render() {
     return r("div", {
-      key: "9d26c68727816cf46614fc2d1f59e59866b1eed3",
+      key: "e2b54e01d70161a8a451a3a08b4b6d4f01451a0a",
       class: "container"
     }, r("div", {
-      key: "cf6809c45130b33ea2ebaa8d18654d9e02e0fc76",
+      key: "8e376178aa5a423b762d52cd8151d9b9fa214c89",
       ref: e => this.chartContainer = e,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-donut.entry.js

@@ -4483,15 +4483,15 @@ const Ee = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "3d18832c2e83de45c3d6d3334aea24c9766b1f58",
+      key: "3497db6724e78d2035f2b71d912ede14c7db6d28",
       onChange: this.onClickElsewhere
     }, i("figure", {
-      key: "4608be26e3d64a551e8c1c5cca4202254d67c9e9"
+      key: "098942c0ad558ce5d33106a53626e7573e499d0e"
     }, i("div", {
-      key: "6a38081d203e899ffdc5b4a653bc2c1910c7d659",
+      key: "096d1496748be990c9f057cabf38fbbca8442d72",
       class: "container"
     }, i("div", {
-      key: "5a178c6445cc16594141dcbfd45d27b1da2e9671",
+      key: "3a87e9065d8ba5eccb1f6a9af492a3c9d91aaef4",
       ref: t => this.chartContainer = t,
       "aria-describedby": !this.isClickable ? "center-card-description" : undefined,
       class: "chart-container",
@@ -4501,9 +4501,9 @@ const Ee = class {
       tabIndex: !this.isClickable ? 0 : undefined,
       onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined
     }), this.renderCenterBlock()), this.showLegend && i("figcaption", {
-      key: "a693203a46b943ad7d11ccf348b8f5a8c65ef760"
+      key: "05158b9062ef042de632b2f886bf805b2b55918f"
     }, i("q2-legend", {
-      key: "060b76987bb07d35eb41b7c8b822b0114d708b01",
+      key: "c374dd66e82f129328f6fcebe9001dc3615bf225",
       class: "legend",
       data: this.legendData,
       format: this.format,