q2-tecton-elements 1.51.0 → 1.52.0

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

@@ -49,6 +49,8 @@ export class Q2Card {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
     componentDidLoad() {

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

@@ -1 +1 @@
-{"version":3,"file":"q2-card.js","sourceRoot":"","sources":["../../../src/components/q2-card/q2-card.tsx"],"names":[],"mappings":"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","sourcesContent":["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 = 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"]}
+{"version":3,"file":"q2-card.js","sourceRoot":"","sources":["../../../src/components/q2-card/q2-card.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js

@@ -92,12 +92,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '19ee20073c4e1c4cf787450e2e0558020f2d281e', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: 'd71b36dcf424483f8d72024513a2ef41af68cfbe', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: '7603016c43a342e9733bd6b9ab60c212c0d4594d', class: "q2-carousel-pane-main-content" }, h("slot", { key: '94524394e0a431c369887d7d2e040430f3f852dd' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: 'fb6543bd551d8d4ece1df1f8dd77940465bdc03a', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'b0abb74467220e13dcca406cdf3beffeef0cdf5b' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

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

@@ -205,9 +205,22 @@ export class Q2ChartArea {
         });
     }
     // #endregion
+    // #region Test Methods API
+    /**
+     * A method to fire change event on hover on a point.
+     *
+     * @testOnly
+     */
+    async hoverDataPoint(index) {
+        this.change.emit({
+            index: index,
+            data: this.data[index],
+        });
+    }
+    // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1c54ebb293f7a71741ba2f805591e1e2a876ba11', class: "container" }, h("div", { key: 'd0a8520a736ad2236b30255725a91b501c009642', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '4f547daaeaf622ac320a7760e93b7cd34f6c77d9', class: "container" }, h("div", { key: '7aaae35934415b5bc06a1d57253c0683c9cc448b', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }
@@ -631,6 +644,34 @@ export class Q2ChartArea {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "hoverDataPoint": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "A method to fire change event on hover on a point.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{

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

@@ -1 +1 @@
-{"version":3,"file":"q2-chart-area.js","sourceRoot":"","sources":["../../../src/components/q2-chart-area/q2-chart-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event } 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        window.removeEventListener('resize', this.resizeEventListener);\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('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","sourceRoot":"","sources":["../../../src/components/q2-chart-area/q2-chart-area.tsx"],"names":[],"mappings":"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","sourcesContent":["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        window.removeEventListener('resize', this.resizeEventListener);\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('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 Test 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    // #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"]}

package/dist/collection/components/q2-chart-area/test/q2-chart-area-test.e2e.js

@@ -79,5 +79,20 @@ describe('q2-chart-area', () => {
         describe('Keyboard Controls', () => { });
         describe('Other', () => { });
     });
+    describe('Test methods', () => {
+        it('call hoverDataPoint', async () => {
+            const chart = await page.find('q2-chart-area');
+            const changeSpy = await chart.spyOnEvent('change');
+            await chart.callMethod('hoverDataPoint', 2);
+            expect(changeSpy).toHaveReceivedEventDetail({
+                index: 2,
+                data: {
+                    id: 'tuesday',
+                    name: 'Tue',
+                    value: 62,
+                },
+            });
+        });
+    });
 });
 //# sourceMappingURL=q2-chart-area-test.e2e.js.map

package/dist/collection/components/q2-chart-area/test/q2-chart-area-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-chart-area-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/test/q2-chart-area-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-area', () => {\n    let page: E2EPage;\n    let chart: E2EElement;\n\n    beforeEach(async () => {\n        page = await setup({ html: '' });\n        await page.setContent('<q2-chart-area></q2-chart-area>');\n        chart = await page.find('q2-chart-area');\n        chart.setProperty('chartName', 'Weekly spending');\n        chart.setProperty('data', [\n            { value: 45, name: 'Sun', id: 'sunday' },\n            { value: 36, name: 'Mon', id: 'monday' },\n            { value: 62, name: 'Tue', id: 'tuesday' },\n            { value: 51, name: 'Wed', id: 'wednesday' },\n            { value: 104, name: 'Thu', id: 'thursday' },\n            { value: 122, name: 'Fri', id: 'friday' },\n            { value: 215, name: 'Sat', id: 'saturday' },\n        ]);\n        await page.waitForChanges();\n    });\n\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-chart-area')).toHaveLength(0);\n    });\n\n    it('renders a canvas element', async () => {\n        const canvas = await page.find('q2-chart-area >>> canvas');\n        expect(canvas).toBeTruthy();\n    });\n\n    it('renders a descriptive aria-label for the chart', async () => {\n        const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n        const ariaLabelText = await chartContainer.getAttribute('aria-label');\n        expect(ariaLabelText).toContain('This is a chart about \"Weekly spending\" with type Line chart');\n        expect(ariaLabelText).toContain('the data for Sun is 0, 45');\n        expect(ariaLabelText).toContain('the data for Mon is 1, 36');\n        expect(ariaLabelText).toContain('the data for Tue is 2, 62');\n        expect(ariaLabelText).toContain('the data for Wed is 3, 51');\n        expect(ariaLabelText).toContain('the data for Thu is 4, 104');\n        expect(ariaLabelText).toContain('the data for Fri is 5, 122');\n        expect(ariaLabelText).toContain('the data for Sat is 6, 215');\n    });\n    describe('chartName', () => {\n        describe('when provided', () => {\n            it('renders with provided chartName', async () => {\n                page = await setup({ html: `` });\n                await page.setContent('<q2-chart-area></q2-chart-area>');\n                chart = await page.find('q2-chart-area');\n                chart.setProperty('chartName', 'Weekly spending');\n                await page.waitForChanges();\n\n                expect(await chart.getProperty('chartName')).toEqualText('Weekly spending');\n            });\n        });\n        describe('when provided a custom name translation', () => {\n            it('renders the translated value', async () => {\n                page = await setup({\n                    html: ``,\n                });\n                await setTestStrings(page, {\n                    'q2ChartArea.customName': 'Custom Chart Name',\n                });\n                page.setContent(`<q2-chart-area chart-name=\"q2ChartArea.customName\"></q2-chart-area>`);\n                await page.waitForChanges();\n                chart = await page.find('q2-chart-area');\n                const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n                const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n                expect(await chart.getProperty('chartName')).toEqualText('q2ChartArea.customName');\n                expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Line chart');\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}
+{"version":3,"file":"q2-chart-area-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/test/q2-chart-area-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-area', () => {\n    let page: E2EPage;\n    let chart: E2EElement;\n\n    beforeEach(async () => {\n        page = await setup({ html: '' });\n        await page.setContent('<q2-chart-area></q2-chart-area>');\n        chart = await page.find('q2-chart-area');\n        chart.setProperty('chartName', 'Weekly spending');\n        chart.setProperty('data', [\n            { value: 45, name: 'Sun', id: 'sunday' },\n            { value: 36, name: 'Mon', id: 'monday' },\n            { value: 62, name: 'Tue', id: 'tuesday' },\n            { value: 51, name: 'Wed', id: 'wednesday' },\n            { value: 104, name: 'Thu', id: 'thursday' },\n            { value: 122, name: 'Fri', id: 'friday' },\n            { value: 215, name: 'Sat', id: 'saturday' },\n        ]);\n        await page.waitForChanges();\n    });\n\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-chart-area')).toHaveLength(0);\n    });\n\n    it('renders a canvas element', async () => {\n        const canvas = await page.find('q2-chart-area >>> canvas');\n        expect(canvas).toBeTruthy();\n    });\n\n    it('renders a descriptive aria-label for the chart', async () => {\n        const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n        const ariaLabelText = await chartContainer.getAttribute('aria-label');\n        expect(ariaLabelText).toContain('This is a chart about \"Weekly spending\" with type Line chart');\n        expect(ariaLabelText).toContain('the data for Sun is 0, 45');\n        expect(ariaLabelText).toContain('the data for Mon is 1, 36');\n        expect(ariaLabelText).toContain('the data for Tue is 2, 62');\n        expect(ariaLabelText).toContain('the data for Wed is 3, 51');\n        expect(ariaLabelText).toContain('the data for Thu is 4, 104');\n        expect(ariaLabelText).toContain('the data for Fri is 5, 122');\n        expect(ariaLabelText).toContain('the data for Sat is 6, 215');\n    });\n    describe('chartName', () => {\n        describe('when provided', () => {\n            it('renders with provided chartName', async () => {\n                page = await setup({ html: `` });\n                await page.setContent('<q2-chart-area></q2-chart-area>');\n                chart = await page.find('q2-chart-area');\n                chart.setProperty('chartName', 'Weekly spending');\n                await page.waitForChanges();\n\n                expect(await chart.getProperty('chartName')).toEqualText('Weekly spending');\n            });\n        });\n        describe('when provided a custom name translation', () => {\n            it('renders the translated value', async () => {\n                page = await setup({\n                    html: ``,\n                });\n                await setTestStrings(page, {\n                    'q2ChartArea.customName': 'Custom Chart Name',\n                });\n                page.setContent(`<q2-chart-area chart-name=\"q2ChartArea.customName\"></q2-chart-area>`);\n                await page.waitForChanges();\n                chart = await page.find('q2-chart-area');\n                const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n                const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n                expect(await chart.getProperty('chartName')).toEqualText('q2ChartArea.customName');\n                expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Line chart');\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n\n    describe('Test methods', () => {\n        it('call hoverDataPoint', async () => {\n            const chart = await page.find('q2-chart-area');\n            const changeSpy = await chart.spyOnEvent('change');\n            await chart.callMethod('hoverDataPoint', 2);\n            expect(changeSpy).toHaveReceivedEventDetail({\n                index: 2,\n                data: {\n                    id: 'tuesday',\n                    name: 'Tue',\n                    value: 62,\n                },\n            });\n        });\n    });\n});\n"]}

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

@@ -156,7 +156,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '894583cef73c43fc6ad9488a73c93f34acf266ca', class: "container" }, h("div", { key: '7c8b92cce307c4d14bf5f4735ba9c40ed48d2592', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: 'b40ff8d49858ebfc55afb86a2a385bbe3c3e6851', class: "container" }, h("div", { key: 'dffb3ce8dd7e638842d58d59ef09c34f9904af56', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -127,6 +127,8 @@ export class Q2ChartDonut {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
     componentDidLoad() {
@@ -436,6 +438,20 @@ export class Q2ChartDonut {
         });
     }
     // #endregion
+    // #region Test Methods API
+    /**
+     * A method to select a slice with index.
+     *
+     * @testOnly
+     */
+    async selectDataPoint(index) {
+        this.chart.dispatchAction({
+            type: 'select',
+            seriesId: 'pie',
+            dataIndex: index,
+        });
+    }
+    // #endregion
     // #region Render Methods
     renderCenterBlock() {
         const { icon, name, value, color } = this.centerData;
@@ -458,7 +474,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '653843d0844777cd5a1eca08ff2212af8866a30a', onChange: this.onClickElsewhere }, h("figure", { key: '3189ea33feae10932fe45ed1a6930badb4a9b438' }, h("div", { key: '3be03652e90ae4a776b9bf87ec575863c8f03621', class: "container" }, h("div", { key: '2e08d9019dfaabefd989ba51870bc778fa04905c', 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: '158058ae81b1c016474f73c943d1452c6955022b' }, h("q2-legend", { key: '2d3f38b153a808c6eb15c69cc5450cc6838a5166', 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: '061f0df2cfc531af2df0d583f7cea0a2e7d68c7d', onChange: this.onClickElsewhere }, h("figure", { key: '324163777739ef74d986c94fda412a91f0f34124' }, h("div", { key: 'a866867bfd653239d8f7c0a630f2b222c353bdb1', class: "container" }, h("div", { key: 'fcb2076e8b390ef19ab28f03d25e66bb48c7bdd9', 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: '2115b858f955bb6751a8d7d4476d4addc76e8f50' }, h("q2-legend", { key: '2a20e076a5bb3ac2b3430f1cefe38d9cdf594ccb', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }
@@ -866,6 +882,30 @@ export class Q2ChartDonut {
                     "text": "Selects a slice by its index in the provided `data`.",
                     "tags": []
                 }
+            },
+            "selectDataPoint": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "A method to select a slice with index.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }