q2-tecton-elements 1.52.7 → 1.52.8

package/dist/esm/q2-chart-donut.entry.js

@@ -4161,8 +4161,29 @@ const Q2ChartDonut = class {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         var _a;
+        // CRITICAL: Dispose eCharts instance to prevent memory leaks
+        // eCharts holds references to canvas, event listeners (mouseover, mouseout, click, selectchanged, finished),
+        // and animation frames. All chart event listeners are automatically cleaned up by dispose()
+        if (this.chart) {
+            this.chart.dispose();
+            this.chart = null;
+        }
+        // Disconnect ResizeObserver
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
+        // Clear cached style references that hold DOM references (Safari memory management)
+        this.chartContainerStyles = null;
+        this.hostElementStyles = null;
+        // Clear DOM references
+        this.chartContainer = null;
+        this.centerButtonElement = null;
+        this.btnElement = null;
+        // Clear data references
+        this.colors = null;
+        this.legendData = null;
+        // Clear state to prevent lingering references
+        this.hoveredId = null;
+        this.selectedId = null;
     }
     componentDidLoad() {
         const chart = init(this.chartContainer);
@@ -4507,7 +4528,7 @@ const Q2ChartDonut = class {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'b29ca18598a09472f568338d98f3075e530daf74', onChange: this.onClickElsewhere }, h("figure", { key: '7e576d6d0b2f3d8446cd90f664ca2a07537cc3d2' }, h("div", { key: 'b008ec034395cd27a4a80a339afffc1c41ceb1c6', class: "container" }, h("div", { key: '31ce13ef5327426627937e69a4503df3e6a29b3d', 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: 'e3148f952eba1acc3f91c8b241f8e3906db890cf' }, h("q2-legend", { key: '55a66d778e325cb2af906de88af5088a16b9b3a8', 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: 'd97fd96a56f2f6ba206d2f07fa986e48702180aa', onChange: this.onClickElsewhere }, h("figure", { key: '4b56f4ec01675b11cfd589e3877998d28f1ce8aa' }, h("div", { key: '3f66b3d98f093a7da1a90650e2fd9ef48916e847', class: "container" }, h("div", { key: 'bb0513d31884d2c8b2f454b9fbf899b770716bc7', 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: 'bf7180411fc3cc46b74edf7dd8794475c331e496' }, h("q2-legend", { key: '14994085c95d3cc662d919dfdc69a7ad3c579a21', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {