q2-tecton-elements 1.46.0 → 1.46.2

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

@@ -2,9 +2,17 @@ import { Host, h } from "@stencil/core";
 import { loc } from "../../utils/index";
 export class Q2CarouselPane {
     constructor() {
+        this.disabledElements = [];
         this.generatePaneClass = (currentIndex) => {
             return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;
         };
+        this.onMutationObserved = () => {
+            this.removePointerMoveListeners();
+            this.addPointerMoveListeners();
+        };
+        this.pointerMoveHandler = (event) => {
+            event.stopPropagation();
+        };
         this.paneClicked = event => {
             if (this.isActivePane)
                 return;
@@ -25,10 +33,35 @@ export class Q2CarouselPane {
     }
     componentDidLoad() {
         this.determineDisabledContent();
+        this.addPointerMoveListeners();
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        this.removePointerMoveListeners();
+    }
+    addPointerMoveListeners() {
+        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];
+        this.disabledElements = Array.from(this.hostElement.querySelectorAll(elementsToDisable.join(',')));
+        this.disabledElements.forEach(element => {
+            element.addEventListener('pointermove', this.pointerMoveHandler);
+        });
+    }
+    removePointerMoveListeners() {
+        this.disabledElements.forEach(element => {
+            element.removeEventListener('pointermove', this.pointerMoveHandler);
+        });
     }
     determineDisabledContent() {
         const { isActivePane } = this;
-        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex="-1"])');
+        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex="-1"])');
         focusableElements.forEach(element => {
             const hasValidTabIndex = element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;
             if (hasValidTabIndex) {
@@ -39,9 +72,6 @@ export class Q2CarouselPane {
                     element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));
                     element.removeAttribute('data-q2-tabindex');
                 }
-                else if (element.tagName.startsWith('Q2-')) {
-                    element.tabIndex = undefined;
-                }
                 else {
                     element.removeAttribute('tabindex');
                 }
@@ -53,12 +83,12 @@ export class Q2CarouselPane {
     }
     render() {
         const { label } = this;
-        return (h(Host, { key: '3408598713aeea60c644c3ea0750f0dce2d40ca9', 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: '2e020850bd15a1e0e6a85e781a78075c422d4c4d', 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: 'a03a7125b958195b21d731f9cbeebdb1c8f9a0b3', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'c07f1d5fc75a902a6f9741e746279bad8c094a13' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '165581d0a2f2909849d671884ee6cd9daef8dcb3', class: "q2-carousel-pane-main-content" }, h("slot", { key: '7d5d8fe33e5acdb30d779a488062233cc3b85ac6' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"q2-carousel-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n        );\n\n        focusableElements.forEach(element => {\n            const hasValidTabIndex =\n                element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n            if (hasValidTabIndex) {\n                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else if (element.tagName.startsWith('Q2-')) {\n                    element.tabIndex = undefined;\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-carousel-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n        );\n\n        focusableElements.forEach(element => {\n            const hasValidTabIndex =\n                element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n            if (hasValidTabIndex) {\n                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -190,7 +190,7 @@ export class Q2ChartArea {
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: 'c9e469efcd0cb91b3116d1a5dae051c38b70657f', class: "container" }, h("div", { key: '22ea317a0f8506a9ccf1ac5f454a5e97cb3f7621', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '5ac722f85acf3a00828cfcd6bfb3d13cadc8d4ef', class: "container" }, h("div", { key: 'a39f5664712841ad70c1628c88b77500b694db63', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }

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

@@ -139,7 +139,7 @@ export class Q2ChartBar {
         this.updateChart(this.chart);
     }
     render() {
-        return (h("div", { key: '38e48c98140b0151cfe3efea85d8209e134bee61', class: "container" }, h("div", { key: '96ef6c96eba64a245da4e365c23033efac974557', ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
+        return (h("div", { key: '1c7a900e24ad8c960c7e701e00d3218388e97f36', class: "container" }, h("div", { key: 'beb2ec288287a1ae437d9f355a8fd1fed577912d', ref: el => (this.chartContainer = el), class: "chart-container", "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.css

@@ -77,6 +77,7 @@ button {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 .chart-container {
@@ -149,4 +150,12 @@ q2-icon {
 
 .value {
   font-size: var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px));
+}
+
+figure {
+  margin: 0;
+}
+
+.legend {
+  margin-top: var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0));
 }

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

@@ -47,6 +47,9 @@ export class Q2ChartDonut {
                 case 'Escape':
                     this.clearSelection();
                     break;
+                case ' ':
+                    event.preventDefault();
+                    break;
                 default:
                     return;
             }
@@ -65,6 +68,45 @@ export class Q2ChartDonut {
             this.clearSelection();
             event.stopPropagation();
         };
+        this.onLegendClick = event => {
+            if (event.detail) {
+                const dataIndex = this.getDataIndexForId(event.detail.id);
+                this.selectedId = event.detail.id;
+                this.chart.dispatchAction({
+                    type: 'select',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+            else {
+                const dataIndex = this.getDataIndexForId(this.selectedId);
+                this.hoveredId = this.selectedId;
+                this.selectedId = null;
+                this.chart.dispatchAction({
+                    type: 'unselect',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+        };
+        this.onLegendMouseleave = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = this.selectedId;
+            this.chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
+        this.onLegendMouseenter = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = event.detail.id;
+            this.chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
         this.data = [];
         this.chartName = undefined;
         this.format = undefined;
@@ -75,9 +117,11 @@ export class Q2ChartDonut {
         this.outerRadius = '85%';
         this.selectedId = undefined;
         this.selectedOffset = 10;
+        this.showLegend = false;
         this.summaryIcon = undefined;
         this.summaryName = undefined;
         this.hoveredId = undefined;
+        this.legendData = undefined;
     }
     /// LifeCycle Hooks ///
     componentDidLoad() {
@@ -90,6 +134,7 @@ export class Q2ChartDonut {
         this.setupChartEvents(chart);
         this.checkSelectedId();
         this.chart = chart;
+        this.setLegendData();
         this.selectById(this.selectedId);
         overrideFocus(this.hostElement);
     }
@@ -112,6 +157,9 @@ export class Q2ChartDonut {
     get isMobile() {
         return isMobile();
     }
+    get legendHoveredId() {
+        return this.hoveredId === this.selectedId ? null : this.hoveredId;
+    }
     /// Helpers ///
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -184,6 +232,17 @@ export class Q2ChartDonut {
     getMinSliceSizeAsAngle() {
         return (parseFloat(this.minSliceSize) / 100) * 360;
     }
+    getDataIndexForId(id) {
+        return this.data.findIndex(item => item.id === id);
+    }
+    setLegendData() {
+        const chartColors = this.chart.getOption().series[0].color;
+        this.legendData = this.data.map((item, index) => {
+            if (!item.color)
+                item.color = chartColors[index];
+            return item;
+        });
+    }
     // Edit with caution. Echarts does not interpret events the same on mobile.
     setupChartEvents(chart) {
         if (!this.isMobile) {
@@ -209,6 +268,13 @@ export class Q2ChartDonut {
                 this.isInChangeEvent = false;
             }, 0);
         });
+        chart.on('finished', () => {
+            var _a;
+            const canvas = chart.getDom().querySelector('canvas');
+            if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.hasAttribute('aria-hidden')) !== null && _a !== void 0 ? _a : false)
+                return;
+            canvas.setAttribute('aria-hidden', 'true');
+        });
     }
     updateChart(chart) {
         return chart.setOption({
@@ -376,14 +442,14 @@ export class Q2ChartDonut {
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, isClickable && (h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description'))), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
+        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'e5bec431c5bdc58d9ec1f89d374a7e24475f832b', onChange: this.onClickElsewhere }, h("div", { key: 'd1bf82b8746b7d9c000d1493a69f77306dbe61ed', class: "container" }, h("div", { key: 'f4e6e3fba1b86f91a429daaa70a7811ed192a503', ref: el => (this.chartContainer = el), class: "chart-container", role: "status", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
+        return (h("click-elsewhere", { key: 'afb2c469d720c679bb6b3f42eee5a520030de23e', onChange: this.onClickElsewhere }, h("figure", { key: 'ceb28a40cbb00dd8d4d56ed4058ced1ecfaf102f' }, h("div", { key: 'e878cbc604d5f6b09a9c733d369f6090838b4eef', class: "container" }, h("div", { key: 'c83ba457d429413b4e1bd9612cdf8d573c33ec52', 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: '34128ccf59eb451f078568369348f1af93d1570f' }, h("q2-legend", { key: 'd27aad35463cd154015386025154949b7f202b60', 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"; }
@@ -591,6 +657,27 @@ export class Q2ChartDonut {
                 "reflect": false,
                 "defaultValue": "10"
             },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "The legend is a list of the data points in the chart and their colors."
+                        }],
+                    "text": "Determines whether the legend is displayed."
+                },
+                "attribute": "show-legend",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "summaryIcon": {
                 "type": "string",
                 "mutable": false,
@@ -632,7 +719,8 @@ export class Q2ChartDonut {
     }
     static get states() {
         return {
-            "hoveredId": {}
+            "hoveredId": {},
+            "legendData": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-{"version":3,"file":"q2-chart-donut.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-donut/q2-chart-donut.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport { EChartsCoreOption } from 'echarts/types/dist/core';\nimport {\n    TooltipComponent,\n    TooltipComponentOption,\n    LegendComponent,\n    AriaComponent,\n    AriaComponentOption,\n    LegendComponentOption,\n} from 'echarts/components';\nimport { PieChart, PieSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { isEventFromElement, isMobile, loc, overrideFocus } from 'src/utils';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n    TooltipComponentOption | LegendComponentOption | AriaComponentOption | PieSeriesOption\n>;\n@Component({ tag: 'q2-chart-donut', shadow: true, styleUrl: 'q2-chart-donut.scss' })\nexport class Q2ChartDonut implements ComponentInterface {\n    /** An array of objects that contain the data to be displayed. */\n    @Prop() data: IDonutChartData[] = [];\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 }) chartName: string;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true }) format: 'currency' | 'default';\n\n    /** The amount which the slice will scale when hovered. */\n    @Prop() hoverScaleSize: number = 5;\n\n    /**\n     * Determine whether the data in the center renders inside a button element.\n     *\n     * @info\n     * This also enables extra keyboard controls when the button is focused.\n     */\n    @Prop({ reflect: true }) isClickable: boolean;\n\n    /**\n     * The inner radius of the chart slices which is represeted by a percentage of the radius.\n     *\n     * @warning\n     * If you update this property to be greater than or equal to the `outerRadius`,\n     * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.\n     */\n    @Prop({ mutable: true }) innerRadius: string = '70%';\n\n    /** The minimum size of the chart slizes which is represented as a percentage of the circumferences. */\n    @Prop() minSliceSize: string = '2.5%';\n\n    /**\n     * The outer radius of the chart slices which is represented by a percentage of the radius.\n     *\n     * @warning\n     * If you update this property to be less than or equal to the `innerRadius`,\n     * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.\n     */\n    @Prop({ mutable: true }) outerRadius: string = '85%';\n\n    /** The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. */\n    @Prop({ mutable: true }) selectedId: string;\n\n    /** The amount which the slice will separate from the chart when selected. */\n    @Prop() selectedOffset: number = 10;\n\n    /** The icon that displays by default when no slices are selected. */\n    @Prop({ reflect: true }) summaryIcon: string;\n\n    /**\n     * The name that displays by default when no slices are selected.\n     * @localizable\n     */\n    @Prop({ reflect: true }) summaryName: string;\n\n    isInChangeEvent: boolean;\n    chartContainer: HTMLDivElement;\n    centerButtonElement: HTMLButtonElement;\n    btnElement: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeObserver: ResizeObserver;\n    colors: string[];\n    chart: echarts.ECharts;\n    defaultRecord = { id: null, value: null, name: null };\n\n    @State() hoveredId: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /// Events ///\n    /**\n     * Emitted when a slice is selected.\n     */\n    @Event() change: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the center button is clicked.\n     *\n     * Requires the `isClickable` prop to be set to `true`.\n     */\n    @Event() click: EventEmitter<IDonutChartData>;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        const chart = echarts.init(this.chartContainer);\n\n        this.cacheComputedStyles();\n        this.colors = this.getColors();\n\n        this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n        this.resizeObserver.observe(this.hostElement);\n\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n        this.checkSelectedId();\n\n        this.chart = chart;\n        this.selectById(this.selectedId);\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    /// Getters ///\n    get centerData() {\n        const { hoveredId, data } = this;\n        const idToDisplay = hoveredId;\n        const index = this.getIndexById(idToDisplay);\n\n        return idToDisplay\n            ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n            : {\n                  name: loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName'),\n                  icon: this.summaryIcon,\n                  value: data.reduce((acc, cur) => acc + cur.value, 0),\n                  color: null,\n              };\n    }\n\n    get isMobile(): boolean {\n        return isMobile();\n    }\n\n    /// Helpers ///\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    displayValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (isNaN(valueAsFloat)) return;\n\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        } else {\n            return Intl.NumberFormat('en-US').format(valueAsFloat);\n        }\n    }\n\n    getCSSProperty(name: string) {\n        let fallback;\n        if (name.startsWith('var(') && name.endsWith(')')) {\n            const regExp = /var\\((.*)\\)/g;\n            const result = regExp.exec(name);\n            const split = result.length >= 2 ? result[1].split(',') : [];\n            name = split[0];\n            fallback = split[1];\n        }\n        let result = this.chartContainerStyles.getPropertyValue(name).trim();\n        if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n        return result || fallback;\n    }\n\n    getIndexById(id: string) {\n        return this.data.findIndex(item => item.id === id);\n    }\n\n    getDataByIndex(index: number) {\n        if (typeof index !== 'number') return;\n        return this.data[index];\n    }\n\n    getDataById(id: string) {\n        if (!id) return;\n        return this.data.find(item => item.id === id);\n    }\n\n    getColors() {\n        const defaultColors = [\n            '--comp-color-1',\n            '--comp-color-2',\n            '--comp-color-3',\n            '--comp-color-4',\n            '--comp-color-5',\n            '--comp-color-6',\n            '--comp-color-7',\n            '--comp-color-8',\n            '--comp-color-9',\n            '--comp-color-10',\n            '--comp-color-11',\n            '--comp-color-12',\n        ];\n\n        return this.data.reduce((acc, cur) => {\n            let color = defaultColors.shift();\n            if (cur.color) color = cur.color;\n\n            acc.push(this.getCSSProperty(color) || color);\n            return acc;\n        }, []);\n    }\n\n    getMinSliceSizeAsAngle() {\n        return (parseFloat(this.minSliceSize) / 100) * 360;\n    }\n\n    // Edit with caution. Echarts does not interpret events the same on mobile.\n    setupChartEvents(chart: echarts.ECharts) {\n        if (!this.isMobile) {\n            chart.on('mouseover', (params: any) => {\n                this.hoveredId = params.data.id;\n            });\n            chart.on('mouseout', () => {\n                this.hoveredId = this.selectedId;\n            });\n        }\n        chart.on('click', params => {\n            // Don't emit click event when clicking a chart slice\n            params.event.event.stopPropagation();\n        });\n        chart.on('selectchanged', (params: any) => {\n            const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n            const data =\n                typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n            this.selectedId = data.id;\n            this.isInChangeEvent = true;\n            this.change.emit(data);\n            setTimeout(() => {\n                this.isInChangeEvent = false;\n            }, 0);\n        });\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        return chart.setOption<EChartsOption>({\n            tooltip: {\n                show: false,\n            },\n            legend: {\n                show: false,\n            },\n            aria: {\n                enabled: true,\n            },\n            series: [\n                {\n                    name: this.chartName,\n                    animationType: 'scale',\n                    color: this.colors,\n                    id: 'pie',\n                    type: 'pie',\n                    selectedOffset: this.selectedOffset,\n                    selectedMode: 'single',\n                    radius: [this.innerRadius, this.outerRadius],\n                    label: {\n                        show: false,\n                    },\n                    labelLine: {\n                        show: false,\n                    },\n                    itemStyle: {\n                        borderWidth: 5,\n                        borderColor: this.getCSSProperty('--comp-background-color'),\n                    },\n                    emphasis: {\n                        disabled: this.isMobile,\n                        scaleSize: this.hoverScaleSize,\n                        itemStyle: {\n                            color: 'inherit',\n                        },\n                    },\n                    minAngle: this.getMinSliceSizeAsAngle(),\n                    data: this.data,\n                },\n            ],\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    /// Watchers ///\n    @Watch('chartName')\n    @Watch('innerRadius')\n    @Watch('outerRadius')\n    @Watch('minSliceSize')\n    @Watch('hoverScaleSize')\n    @Watch('selectedOffset')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    @Watch('data')\n    dataUpdated() {\n        this.colors = this.getColors();\n        this.updateChart(this.chart);\n    }\n\n    @Watch('innerRadius')\n    innerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (innerRadiusInt >= outerRadiusInt) {\n            this.innerRadius = `${outerRadiusInt - 15}%`;\n        }\n    }\n\n    @Watch('outerRadius')\n    outerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (outerRadiusInt <= innerRadiusInt) {\n            this.outerRadius = `${innerRadiusInt + 15}%`;\n        }\n    }\n\n    // Function to detect and set a data range (category) as selected\n    // Logic for when legends are present, and can set selectedId when ledgend category is clicked\n    // Also can be used by dev to preset\n    @Watch('selectedId')\n    checkSelectedId() {\n        if (!!this.selectedId) {\n            this.hoveredId = this.selectedId;\n            // Dispatch action only to be fired when chart is rendered\n            if (this.chart) {\n                this.selectById(this.selectedId);\n            }\n        } else {\n            // Dispatch action only to be fired when chart is rendered\n            if (this.chart) {\n                this.chart.dispatchAction({\n                    type: 'unselect',\n                    seriesId: 'pie',\n                    dataIndex: this.getIndexById(this.hoveredId),\n                });\n            }\n            this.hoveredId = null;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.isClickable) return;\n        this.centerButtonElement?.focus();\n    }\n\n    /// Methods ///\n    /**\n     * Selects a slice by its provided `id` in the provided `data`.\n     */\n    @Method()\n    async selectById(id: string) {\n        const dataIndex = this.getIndexById(id);\n        if (dataIndex === -1) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Selects a slice by its index in the provided `data`.\n     */\n    @Method()\n    async selectByIndex(index: number) {\n        const dataIndex = this.data[index] ? index : null;\n        if (!dataIndex) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Clears any selected slice.\n     */\n    @Method()\n    async clearSelection() {\n        const { selectedId } = this;\n        if (!selectedId) return;\n\n        this.chart.dispatchAction({\n            type: 'unselect',\n            seriesId: 'pie',\n            dataIndex: this.getIndexById(selectedId),\n        });\n    }\n\n    /**\n     * Returns the chart instance for e2e testing.\n     *\n     * @testOnly\n     */\n    @Method()\n    async getChartOptions(): Promise<EChartsCoreOption> {\n        return this.chart.getOption();\n    }\n\n    /// Event Handlers ///\n    onClickElsewhere = (event: Event) => {\n        event.stopPropagation();\n        this.clearSelection();\n    };\n\n    onButtonKeyDown = (event: KeyboardEvent) => {\n        const { selectedId, data } = this;\n        let selectedIndex = this.getIndexById(selectedId) || 0;\n        switch (event.key) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n                event.preventDefault();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedIndex--;\n                if (selectedIndex < 0) selectedIndex = data.length - 1;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedIndex++;\n                if (selectedIndex > data.length - 1) selectedIndex = 0;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'Escape':\n                this.clearSelection();\n                break;\n\n            default:\n                return;\n        }\n    };\n\n    onButtonClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        const { selectedId } = this;\n        const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n        this.click.emit(data);\n    };\n\n    onContainerClick = (event: Event) => {\n        if (this.isInChangeEvent) return;\n        if (!(event.target instanceof HTMLElement)) return;\n        this.clearSelection();\n        event.stopPropagation();\n    };\n\n    /// DOM ///\n    renderCenterBlock() {\n        const { icon, name, value, color } = this.centerData;\n        const { isClickable } = this;\n        const TagName = isClickable ? 'button' : 'div';\n        const displayValue = this.displayValue(value);\n\n        const props = isClickable\n            ? {\n                  onKeyDown: this.onButtonKeyDown,\n                  onClick: this.onButtonClick,\n                  ref: el => (this.centerButtonElement = el),\n                  'aria-describedby': 'center-card-description',\n                  'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n              }\n            : null;\n\n        return (\n            <div\n                class=\"center-card-container\"\n                style={{ width: `calc(${this.innerRadius} - 10%)` }}\n            >\n                {isClickable && (\n                    <div\n                        id=\"center-card-description\"\n                        class=\"sr\"\n                    >\n                        {loc('tecton.element.chartDonut.button.description')}\n                    </div>\n                )}\n                <TagName\n                    class=\"center-card\"\n                    test-id=\"centerCard\"\n                    {...props}\n                >\n                    {!!icon && (\n                        <q2-icon\n                            type={icon}\n                            style={\n                                color && {\n                                    '--tct-icon-stroke-primary': color,\n                                    '--tct-icon-stroke-secondary': color,\n                                    color,\n                                }\n                            }\n                        ></q2-icon>\n                    )}\n                    {!!name && <div class=\"name\">{name}</div>}\n                    {!!value && <div class=\"value\">{displayValue}</div>}\n                </TagName>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class=\"container\">\n                    <div\n                        ref={el => (this.chartContainer = el)}\n                        class=\"chart-container\"\n                        role=\"status\"\n                        test-id=\"chartContainer\"\n                        onClick={this.onContainerClick}\n                    ></div>\n                    {this.renderCenterBlock()}\n                </div>\n            </click-elsewhere>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-chart-donut.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-donut/q2-chart-donut.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n    Watch,\n    Listen,\n} from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport { EChartsCoreOption } from 'echarts/types/dist/core';\nimport {\n    TooltipComponent,\n    TooltipComponentOption,\n    LegendComponent,\n    AriaComponent,\n    AriaComponentOption,\n    LegendComponentOption,\n} from 'echarts/components';\nimport { PieChart, PieSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { isEventFromElement, isMobile, loc, overrideFocus } from 'src/utils';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);\ntype EChartsOption = echarts.ComposeOption<\n    TooltipComponentOption | LegendComponentOption | AriaComponentOption | PieSeriesOption\n>;\n@Component({ tag: 'q2-chart-donut', shadow: true, styleUrl: 'q2-chart-donut.scss' })\nexport class Q2ChartDonut implements ComponentInterface {\n    /** An array of objects that contain the data to be displayed. */\n    @Prop() data: IDonutChartData[] = [];\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 }) chartName: string;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true }) format: 'currency' | 'default';\n\n    /** The amount which the slice will scale when hovered. */\n    @Prop() hoverScaleSize: number = 5;\n\n    /**\n     * Determine whether the data in the center renders inside a button element.\n     *\n     * @info\n     * This also enables extra keyboard controls when the button is focused.\n     */\n    @Prop({ reflect: true }) isClickable: boolean;\n\n    /**\n     * The inner radius of the chart slices which is represeted by a percentage of the radius.\n     *\n     * @warning\n     * If you update this property to be greater than or equal to the `outerRadius`,\n     * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.\n     */\n    @Prop({ mutable: true }) innerRadius: string = '70%';\n\n    /** The minimum size of the chart slizes which is represented as a percentage of the circumferences. */\n    @Prop() minSliceSize: string = '2.5%';\n\n    /**\n     * The outer radius of the chart slices which is represented by a percentage of the radius.\n     *\n     * @warning\n     * If you update this property to be less than or equal to the `innerRadius`,\n     * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.\n     */\n    @Prop({ mutable: true }) outerRadius: string = '85%';\n\n    /** The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. */\n    @Prop({ mutable: true }) selectedId: string;\n\n    /** The amount which the slice will separate from the chart when selected. */\n    @Prop() selectedOffset: number = 10;\n\n    /**\n     * Determines whether the legend is displayed.\n     *\n     * @info\n     * The legend is a list of the data points in the chart and their colors.\n     */\n    @Prop({ reflect: true }) showLegend: boolean = false;\n\n    /** The icon that displays by default when no slices are selected. */\n    @Prop({ reflect: true }) summaryIcon: string;\n\n    /**\n     * The name that displays by default when no slices are selected.\n     * @localizable\n     */\n    @Prop({ reflect: true }) summaryName: string;\n\n    isInChangeEvent: boolean;\n    chartContainer: HTMLDivElement;\n    centerButtonElement: HTMLButtonElement;\n    btnElement: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeObserver: ResizeObserver;\n    colors: string[];\n    chart: echarts.ECharts;\n    defaultRecord = { id: null, value: null, name: null };\n\n    @State() hoveredId: string;\n    @State() legendData: IDonutChartData[];\n\n    @Element() hostElement: HTMLElement;\n\n    /// Events ///\n    /**\n     * Emitted when a slice is selected.\n     */\n    @Event() change: EventEmitter<IDonutChartData>;\n\n    /**\n     * Emitted when the center button is clicked.\n     *\n     * Requires the `isClickable` prop to be set to `true`.\n     */\n    @Event() click: EventEmitter<IDonutChartData>;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        const chart = echarts.init(this.chartContainer);\n\n        this.cacheComputedStyles();\n        this.colors = this.getColors();\n\n        this.resizeObserver = new ResizeObserver(() => this.resizeChart());\n        this.resizeObserver.observe(this.hostElement);\n\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n        this.checkSelectedId();\n\n        this.chart = chart;\n        this.setLegendData();\n        this.selectById(this.selectedId);\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver = null;\n    }\n\n    /// Getters ///\n    get centerData() {\n        const { hoveredId, data } = this;\n        const idToDisplay = hoveredId;\n        const index = this.getIndexById(idToDisplay);\n\n        return idToDisplay\n            ? { ...this.getDataById(idToDisplay), color: this.colors[index] }\n            : {\n                  name: loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName'),\n                  icon: this.summaryIcon,\n                  value: data.reduce((acc, cur) => acc + cur.value, 0),\n                  color: null,\n              };\n    }\n\n    get isMobile(): boolean {\n        return isMobile();\n    }\n\n    get legendHoveredId() {\n        return this.hoveredId === this.selectedId ? null : this.hoveredId;\n    }\n\n    /// Helpers ///\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    displayValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (isNaN(valueAsFloat)) return;\n\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        } else {\n            return Intl.NumberFormat('en-US').format(valueAsFloat);\n        }\n    }\n\n    getCSSProperty(name: string) {\n        let fallback;\n        if (name.startsWith('var(') && name.endsWith(')')) {\n            const regExp = /var\\((.*)\\)/g;\n            const result = regExp.exec(name);\n            const split = result.length >= 2 ? result[1].split(',') : [];\n            name = split[0];\n            fallback = split[1];\n        }\n        let result = this.chartContainerStyles.getPropertyValue(name).trim();\n        if (!result) result = this.hostElementStyles.getPropertyValue(name).trim();\n        return result || fallback;\n    }\n\n    getIndexById(id: string) {\n        return this.data.findIndex(item => item.id === id);\n    }\n\n    getDataByIndex(index: number) {\n        if (typeof index !== 'number') return;\n        return this.data[index];\n    }\n\n    getDataById(id: string) {\n        if (!id) return;\n        return this.data.find(item => item.id === id);\n    }\n\n    getColors() {\n        const defaultColors = [\n            '--comp-color-1',\n            '--comp-color-2',\n            '--comp-color-3',\n            '--comp-color-4',\n            '--comp-color-5',\n            '--comp-color-6',\n            '--comp-color-7',\n            '--comp-color-8',\n            '--comp-color-9',\n            '--comp-color-10',\n            '--comp-color-11',\n            '--comp-color-12',\n        ];\n\n        return this.data.reduce((acc, cur) => {\n            let color = defaultColors.shift();\n            if (cur.color) color = cur.color;\n\n            acc.push(this.getCSSProperty(color) || color);\n            return acc;\n        }, []);\n    }\n\n    getMinSliceSizeAsAngle() {\n        return (parseFloat(this.minSliceSize) / 100) * 360;\n    }\n\n    getDataIndexForId(id: string) {\n        return this.data.findIndex(item => item.id === id);\n    }\n\n    setLegendData() {\n        const chartColors = this.chart.getOption().series[0].color;\n        this.legendData = this.data.map((item, index) => {\n            if (!item.color) item.color = chartColors[index];\n\n            return item;\n        });\n    }\n\n    // Edit with caution. Echarts does not interpret events the same on mobile.\n    setupChartEvents(chart: echarts.ECharts) {\n        if (!this.isMobile) {\n            chart.on('mouseover', (params: any) => {\n                this.hoveredId = params.data.id;\n            });\n            chart.on('mouseout', () => {\n                this.hoveredId = this.selectedId;\n            });\n        }\n        chart.on('click', params => {\n            // Don't emit click event when clicking a chart slice\n            params.event.event.stopPropagation();\n        });\n        chart.on('selectchanged', (params: any) => {\n            const selectedIndex = params.selected?.[0]?.dataIndex?.[0] ?? null;\n            const data =\n                typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : { ...this.defaultRecord };\n            this.selectedId = data.id;\n            this.isInChangeEvent = true;\n            this.change.emit(data);\n            setTimeout(() => {\n                this.isInChangeEvent = false;\n            }, 0);\n        });\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        return chart.setOption<EChartsOption>({\n            tooltip: {\n                show: false,\n            },\n            legend: {\n                show: false,\n            },\n            aria: {\n                enabled: true,\n            },\n            series: [\n                {\n                    name: this.chartName,\n                    animationType: 'scale',\n                    color: this.colors,\n                    id: 'pie',\n                    type: 'pie',\n                    selectedOffset: this.selectedOffset,\n                    selectedMode: 'single',\n                    radius: [this.innerRadius, this.outerRadius],\n                    label: {\n                        show: false,\n                    },\n                    labelLine: {\n                        show: false,\n                    },\n                    itemStyle: {\n                        borderWidth: 5,\n                        borderColor: this.getCSSProperty('--comp-background-color'),\n                    },\n                    emphasis: {\n                        disabled: this.isMobile,\n                        scaleSize: this.hoverScaleSize,\n                        itemStyle: {\n                            color: 'inherit',\n                        },\n                    },\n                    minAngle: this.getMinSliceSizeAsAngle(),\n                    data: this.data,\n                },\n            ],\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    /// Watchers ///\n    @Watch('chartName')\n    @Watch('innerRadius')\n    @Watch('outerRadius')\n    @Watch('minSliceSize')\n    @Watch('hoverScaleSize')\n    @Watch('selectedOffset')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    @Watch('data')\n    dataUpdated() {\n        this.colors = this.getColors();\n        this.updateChart(this.chart);\n    }\n\n    @Watch('innerRadius')\n    innerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (innerRadiusInt >= outerRadiusInt) {\n            this.innerRadius = `${outerRadiusInt - 15}%`;\n        }\n    }\n\n    @Watch('outerRadius')\n    outerRadiusUpdated() {\n        const { innerRadius, outerRadius } = this;\n        const innerRadiusInt = parseFloat(innerRadius);\n        const outerRadiusInt = parseFloat(outerRadius);\n        if (outerRadiusInt <= innerRadiusInt) {\n            this.outerRadius = `${innerRadiusInt + 15}%`;\n        }\n    }\n\n    // Function to detect and set a data range (category) as selected\n    // Logic for when legends are present, and can set selectedId when ledgend category is clicked\n    // Also can be used by dev to preset\n    @Watch('selectedId')\n    checkSelectedId() {\n        if (!!this.selectedId) {\n            this.hoveredId = this.selectedId;\n            // Dispatch action only to be fired when chart is rendered\n            if (this.chart) {\n                this.selectById(this.selectedId);\n            }\n        } else {\n            // Dispatch action only to be fired when chart is rendered\n            if (this.chart) {\n                this.chart.dispatchAction({\n                    type: 'unselect',\n                    seriesId: 'pie',\n                    dataIndex: this.getIndexById(this.hoveredId),\n                });\n            }\n            this.hoveredId = null;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.isClickable) return;\n        this.centerButtonElement?.focus();\n    }\n\n    /// Methods ///\n    /**\n     * Selects a slice by its provided `id` in the provided `data`.\n     */\n    @Method()\n    async selectById(id: string) {\n        const dataIndex = this.getIndexById(id);\n        if (dataIndex === -1) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Selects a slice by its index in the provided `data`.\n     */\n    @Method()\n    async selectByIndex(index: number) {\n        const dataIndex = this.data[index] ? index : null;\n        if (!dataIndex) return;\n        this.chart.dispatchAction({\n            type: 'select',\n            seriesId: 'pie',\n            dataIndex,\n        });\n    }\n\n    /**\n     * Clears any selected slice.\n     */\n    @Method()\n    async clearSelection() {\n        const { selectedId } = this;\n        if (!selectedId) return;\n\n        this.chart.dispatchAction({\n            type: 'unselect',\n            seriesId: 'pie',\n            dataIndex: this.getIndexById(selectedId),\n        });\n    }\n\n    /**\n     * Returns the chart instance for e2e testing.\n     *\n     * @testOnly\n     */\n    @Method()\n    async getChartOptions(): Promise<EChartsCoreOption> {\n        return this.chart.getOption();\n    }\n\n    /// Event Handlers ///\n    onClickElsewhere = (event: Event) => {\n        event.stopPropagation();\n        this.clearSelection();\n    };\n\n    onButtonKeyDown = (event: KeyboardEvent) => {\n        const { selectedId, data } = this;\n        let selectedIndex = this.getIndexById(selectedId) || 0;\n        switch (event.key) {\n            case 'ArrowUp':\n            case 'ArrowDown':\n                event.preventDefault();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedIndex--;\n                if (selectedIndex < 0) selectedIndex = data.length - 1;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedIndex++;\n                if (selectedIndex > data.length - 1) selectedIndex = 0;\n                this.chart.dispatchAction({\n                    type: 'select',\n                    seriesId: 'pie',\n                    dataIndex: selectedIndex,\n                });\n                break;\n\n            case 'Escape':\n                this.clearSelection();\n                break;\n\n            case ' ':\n                event.preventDefault();\n                break;\n\n            default:\n                return;\n        }\n    };\n\n    onButtonClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        const { selectedId } = this;\n        const data = selectedId ? this.getDataById(selectedId) : { ...this.defaultRecord };\n        this.click.emit(data);\n    };\n\n    onContainerClick = (event: Event) => {\n        if (this.isInChangeEvent) return;\n        if (!(event.target instanceof HTMLElement)) return;\n        this.clearSelection();\n        event.stopPropagation();\n    };\n\n    onLegendClick = event => {\n        if (event.detail) {\n            const dataIndex = this.getDataIndexForId(event.detail.id);\n            this.selectedId = event.detail.id;\n            this.chart.dispatchAction({\n                type: 'select',\n                seriesIndex: 0,\n                dataIndex,\n            });\n        } else {\n            const dataIndex = this.getDataIndexForId(this.selectedId);\n            this.hoveredId = this.selectedId;\n            this.selectedId = null;\n            this.chart.dispatchAction({\n                type: 'unselect',\n                seriesIndex: 0,\n                dataIndex,\n            });\n        }\n    };\n\n    onLegendMouseleave = event => {\n        const dataIndex = this.getDataIndexForId(event.detail.id);\n        this.hoveredId = this.selectedId;\n        this.chart.dispatchAction({\n            type: 'downplay',\n            seriesIndex: 0,\n            dataIndex,\n        });\n    };\n\n    onLegendMouseenter = event => {\n        const dataIndex = this.getDataIndexForId(event.detail.id);\n        this.hoveredId = event.detail.id;\n        this.chart.dispatchAction({\n            type: 'highlight',\n            seriesIndex: 0,\n            dataIndex,\n        });\n    };\n\n    /// DOM ///\n    renderCenterBlock() {\n        const { icon, name, value, color } = this.centerData;\n        const { isClickable } = this;\n        const TagName = isClickable ? 'button' : 'div';\n        const displayValue = this.displayValue(value);\n\n        const props = isClickable\n            ? {\n                  onKeyDown: this.onButtonKeyDown,\n                  onClick: this.onButtonClick,\n                  ref: el => (this.centerButtonElement = el),\n                  'aria-describedby': 'center-card-description',\n                  'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),\n              }\n            : null;\n\n        return (\n            <div\n                class=\"center-card-container\"\n                style={{ width: `calc(${this.innerRadius} - 10%)` }}\n            >\n                <div\n                    id=\"center-card-description\"\n                    class=\"sr\"\n                >\n                    {loc('tecton.element.chartDonut.button.description')}\n                </div>\n                <TagName\n                    class=\"center-card\"\n                    test-id=\"centerCard\"\n                    {...props}\n                >\n                    {!!icon && (\n                        <q2-icon\n                            type={icon}\n                            style={\n                                color && {\n                                    '--tct-icon-stroke-primary': color,\n                                    '--tct-icon-stroke-secondary': color,\n                                    color,\n                                }\n                            }\n                        ></q2-icon>\n                    )}\n                    {!!name && <div class=\"name\">{name}</div>}\n                    {!!value && <div class=\"value\">{displayValue}</div>}\n                </TagName>\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <figure>\n                    <div class=\"container\">\n                        <div\n                            ref={el => (this.chartContainer = el)}\n                            aria-describedby={!this.isClickable ? 'center-card-description' : undefined}\n                            class=\"chart-container\"\n                            role=\"img\"\n                            test-id=\"chartContainer\"\n                            onClick={this.onContainerClick}\n                            tabIndex={!this.isClickable ? 0 : undefined}\n                            onKeyDown={!this.isClickable ? this.onButtonKeyDown : undefined}\n                        ></div>\n                        {this.renderCenterBlock()}\n                    </div>\n                    {this.showLegend && (\n                        <figcaption>\n                            <q2-legend\n                                class=\"legend\"\n                                data={this.legendData}\n                                format={this.format}\n                                hoveredItemId={this.legendHoveredId}\n                                onClick={this.onLegendClick}\n                                onMouseleave={this.onLegendMouseleave}\n                                onMouseenter={this.onLegendMouseenter}\n                                selectedItemId={this.selectedId}\n                            />\n                        </figcaption>\n                    )}\n                </figure>\n            </click-elsewhere>\n        );\n    }\n}\n"]}

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

@@ -7,7 +7,7 @@ export class Q2Checkbox {
         this.onInputClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            const isNotInteractive = this.disabled || this.readonly;
+            const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;
             if (isNotInteractive)
                 return;
             if (!(event.target instanceof HTMLInputElement))
@@ -29,6 +29,7 @@ export class Q2Checkbox {
         this.label = undefined;
         this.name = undefined;
         this.readonly = undefined;
+        this.slotReadonly = undefined;
         this.type = undefined;
         this.value = undefined;
         this.groupDisabled = undefined;
@@ -72,7 +73,7 @@ export class Q2Checkbox {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '8a47f38a9e71f309758382f3401ab8f8caeecade', class: "container" }, h("input", { key: '1473a55f6ad4984616e9f527120e083ed2ffc71a', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '35e9a47c70c9b6ce91a767fad50ab0f3182ef924', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { key: '71805bb7b3d2aa466fcd8f717cebe54dca237ffd', class: textLabelClasses.join(' ') }, h("label", { key: '3b625b7cde8282a1b91dc5da0ce38fafef94253e', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: 'e18745bcde6f545c42d1bb83ee8e58488b755df5' }))), this.description && (h("div", { key: 'c8440ff5ba14bb03bc34de02102179b3e260f89f', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '72089fee38e591729f863d7b4e4f8f7ea0d7ca45', class: "container" }, h("input", { key: '5932e63f5cd0482363f02663a55228cd1a46621c', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '51f115702f745117273e4c47f34513907a53605a', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { key: '5957c85cd35366d76a8fa68d565be6767386488e', class: textLabelClasses.join(' ') }, h("label", { key: '6b8a89037d7cb5e93182dd132cb7f027e66ea068', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: '49ad6f1037e60eacba5bade1e73845cf2f211719' }))), this.description && (h("div", { key: 'd3f7d30481f2007c127b5913f1dc659ddd6affe7', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     generateCheckboxSVG() {
         if (this.type === 'favorite') {
@@ -287,6 +288,23 @@ export class Q2Checkbox {
                 "attribute": "readonly",
                 "reflect": true
             },
+            "slotReadonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The field is not interactive, but remains focusable."
+                },
+                "attribute": "slot-readonly",
+                "reflect": true
+            },
             "type": {
                 "type": "string",
                 "mutable": false,