@acorex/charts 22.0.0-next.3 → 22.0.0-next.30

package/fesm2022/acorex-charts-chart-legend.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, viewChild, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, output, viewChild, signal, computed, ViewEncapsulation, Component } from '@angular/core';
 
 class AXChartLegendComponent {
     /**
@@ -33,6 +33,8 @@ class AXChartLegendComponent {
      */
     legendContainer = viewChild('legendContainer', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "legendContainer" }] : /* istanbul ignore next */ []));
+    interactionVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactionVersion" }] : /* istanbul ignore next */ []));
     // Computed values for the template
     showValues = computed(() => this.options()?.showValues !== false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
@@ -54,7 +56,10 @@ class AXChartLegendComponent {
     ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     // Compute the items to display from the chart
     displayItems = computed(() => {
-        return this.chart().getLegendItems();
+        const chart = this.chart();
+        chart.legendStateVersion?.();
+        this.interactionVersion();
+        return chart.getLegendItems();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
     /**
@@ -62,20 +67,17 @@ class AXChartLegendComponent {
      */
     onItemClick(item) {
         const chartInstance = this.chart();
-        // If we have a chart and it's interactive, toggle the segment
         if (this.isInteractive()) {
-            const isVisible = chartInstance.toggleSegment(item.id);
-            // Update the item's hidden state to reflect the current state
-            item.hidden = !isVisible;
+            chartInstance.toggleSegment(item.id);
+            this.interactionVersion.update((version) => version + 1);
         }
-        // Always emit the item click event
-        this.itemClick.emit(item);
+        const refreshedItem = this.displayItems().find((legendItem) => legendItem.id === item.id) ?? item;
+        this.itemClick.emit(refreshedItem);
     }
     /**
      * Handle mouse enter on legend items
      */
     onItemMouseEnter(item) {
-        this.chart().highlightSegment(null);
         this.itemMouseEnter.emit(item);
         this.chart().highlightSegment(item.id);
     }
@@ -86,6 +88,9 @@ class AXChartLegendComponent {
         this.itemMouseLeave.emit(item);
         this.chart().highlightSegment(null);
     }
+    hasValidPercentage(value) {
+        return value != null && !Number.isNaN(value);
+    }
     /**
      * Get legend container dimensions
      */
@@ -99,11 +104,11 @@ class AXChartLegendComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXChartLegendComponent, isStandalone: true, selector: "ax-chart-legend", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", itemMouseLeave: "itemMouseLeave" }, viewQueries: [{ propertyName: "legendContainer", first: true, predicate: ["legendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #legendContainer [ngClass]=\"containerClass()\">\n  @for (item of displayItems(); track item.id) {\n  <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n    (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n    <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n    <span class=\"ax-legend-name\">{{ item.name }}</span>\n    @if (showValues()) {\n    <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n    }\n    @if (showPercentage()) {\n    <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n    }\n  </div>\n  }\n</div>", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-legend{@apply block h-full w-full;--ax-legend-bg: var(--ax-sys-color-lightest-surface, 255, 255, 255);--ax-legend-text: var(--ax-sys-color-on-lightest-surface, 51, 51, 51);--ax-legend-border: var(--ax-sys-color-border-surface, 0, 0, 0);--ax-legend-radius: .5rem;--ax-legend-padding: .75rem;--ax-legend-gap: .5rem;--ax-legend-item-height: 1.75rem}.ax-chart-legend{@apply flex w-full max-h-full flex-col overflow-y-auto;background-color:rgba(var(--ax-legend-bg));border-radius:var(--ax-legend-radius);border:1px solid rgba(var(--ax-legend-border));padding:var(--ax-legend-padding);gap:var(--ax-legend-gap)}.ax-chart-legend.ax-legend-horizontal{@apply flex-row flex-wrap items-center;}.ax-legend-item{@apply flex cursor-pointer items-baseline gap-2 whitespace-nowrap rounded px-2 py-1;height:var(--ax-legend-item-height);transition:all .15s ease;color:var(--ax-legend-text)}.ax-legend-item:hover{background-color:#0000000a}.ax-legend-item:active{transform:scale(.98)}.ax-legend-item.ax-legend-item-hidden{@apply opacity-75;}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{@apply line-through;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{@apply relative opacity-40;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";@apply absolute inset-0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 2px,transparent 2px,transparent 4px);border-radius:inherit}.ax-legend-color{@apply size-3 shrink-0 rounded-[3px];}.ax-legend-name{@apply text-sm font-medium;}.ax-legend-value{@apply ms-1 text-xs opacity-70;}.ax-legend-percentage{@apply ms-[.35rem] rounded-lg px-[.35rem] py-[.1rem] text-[.7rem] font-medium leading-none;background-color:#0000000d}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXChartLegendComponent, isStandalone: true, selector: "ax-chart-legend", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", itemMouseLeave: "itemMouseLeave" }, viewQueries: [{ propertyName: "legendContainer", first: true, predicate: ["legendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #legendContainer [ngClass]=\"containerClass()\">\n  @for (item of displayItems(); track item.id) {\n  <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n    (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n    <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n    <span class=\"ax-legend-name\">{{ item.name }}</span>\n    @if (showValues()) {\n    <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n    }\n    @if (showPercentage() && hasValidPercentage(item.percentage)) {\n    <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n    }\n  </div>\n  }\n</div>", styles: ["@layer properties;@layer components{ax-chart-legend{display:block;height:100%;width:100%;--ax-legend-bg: var(--ax-sys-color-lightest-surface);--ax-legend-text: var(--ax-sys-color-on-lightest-surface);--ax-legend-border: var(--ax-sys-color-border-surface);--ax-legend-radius: .5rem;--ax-legend-padding: .75rem;--ax-legend-gap: .5rem;--ax-legend-item-height: 1.75rem}.ax-chart-legend{display:flex;max-height:100%;width:100%;flex-direction:column;overflow-y:auto;background-color:rgba(var(--ax-legend-bg));border-radius:var(--ax-legend-radius);border:1px solid rgba(var(--ax-legend-border));padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgba(var(--ax-legend-text))}.ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center}.ax-legend-item{display:flex;cursor:pointer;align-items:baseline;gap:calc(var(--spacing, .25rem) * 2);border-radius:.25rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);white-space:nowrap;height:var(--ax-legend-item-height);transition:background-color .15s ease,opacity .15s ease,transform .15s ease;color:rgba(var(--ax-legend-text))}.ax-legend-item:hover{background-color:rgba(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){.ax-legend-item:hover{background-color:color-mix(in srgb,rgba(var(--ax-legend-text)) 6%,transparent)}}.ax-legend-item:active{transform:scale(.98)}.ax-legend-item.ax-legend-item-hidden{opacity:75%}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{text-decoration-line:line-through}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{position:relative;opacity:40%}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";position:absolute;inset:calc(var(--spacing, .25rem) * 0);background:repeating-linear-gradient(45deg,rgba(var(--ax-legend-text)),rgba(var(--ax-legend-text)) 2px,transparent 2px,transparent 4px);border-radius:inherit}@supports (color: color-mix(in lab,red,red)){.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{background:repeating-linear-gradient(45deg,color-mix(in srgb,rgba(var(--ax-legend-text)) 35%,transparent),color-mix(in srgb,rgba(var(--ax-legend-text)) 35%,transparent) 2px,transparent 2px,transparent 4px)}}.ax-legend-color{width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);flex-shrink:0;border-radius:3px}.ax-legend-name{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-legend-value{margin-inline-start:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.ax-legend-percentage{margin-inline-start:.35rem;border-radius:var(--radius-lg, .5rem);padding-inline:.35rem;padding-block:.1rem;font-size:.7rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);background-color:rgba(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){.ax-legend-percentage{background-color:color-mix(in srgb,rgba(var(--ax-legend-text)) 10%,transparent)}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartLegendComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chart-legend', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div #legendContainer [ngClass]=\"containerClass()\">\n  @for (item of displayItems(); track item.id) {\n  <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n    (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n    <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n    <span class=\"ax-legend-name\">{{ item.name }}</span>\n    @if (showValues()) {\n    <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n    }\n    @if (showPercentage()) {\n    <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n    }\n  </div>\n  }\n</div>", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-legend{@apply block h-full w-full;--ax-legend-bg: var(--ax-sys-color-lightest-surface, 255, 255, 255);--ax-legend-text: var(--ax-sys-color-on-lightest-surface, 51, 51, 51);--ax-legend-border: var(--ax-sys-color-border-surface, 0, 0, 0);--ax-legend-radius: .5rem;--ax-legend-padding: .75rem;--ax-legend-gap: .5rem;--ax-legend-item-height: 1.75rem}.ax-chart-legend{@apply flex w-full max-h-full flex-col overflow-y-auto;background-color:rgba(var(--ax-legend-bg));border-radius:var(--ax-legend-radius);border:1px solid rgba(var(--ax-legend-border));padding:var(--ax-legend-padding);gap:var(--ax-legend-gap)}.ax-chart-legend.ax-legend-horizontal{@apply flex-row flex-wrap items-center;}.ax-legend-item{@apply flex cursor-pointer items-baseline gap-2 whitespace-nowrap rounded px-2 py-1;height:var(--ax-legend-item-height);transition:all .15s ease;color:var(--ax-legend-text)}.ax-legend-item:hover{background-color:#0000000a}.ax-legend-item:active{transform:scale(.98)}.ax-legend-item.ax-legend-item-hidden{@apply opacity-75;}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{@apply line-through;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{@apply relative opacity-40;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";@apply absolute inset-0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 2px,transparent 2px,transparent 4px);border-radius:inherit}.ax-legend-color{@apply size-3 shrink-0 rounded-[3px];}.ax-legend-name{@apply text-sm font-medium;}.ax-legend-value{@apply ms-1 text-xs opacity-70;}.ax-legend-percentage{@apply ms-[.35rem] rounded-lg px-[.35rem] py-[.1rem] text-[.7rem] font-medium leading-none;background-color:#0000000d}}\n"] }]
+            args: [{ selector: 'ax-chart-legend', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div #legendContainer [ngClass]=\"containerClass()\">\n  @for (item of displayItems(); track item.id) {\n  <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n    (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n    <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n    <span class=\"ax-legend-name\">{{ item.name }}</span>\n    @if (showValues()) {\n    <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n    }\n    @if (showPercentage() && hasValidPercentage(item.percentage)) {\n    <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n    }\n  </div>\n  }\n</div>", styles: ["@layer properties;@layer components{ax-chart-legend{display:block;height:100%;width:100%;--ax-legend-bg: var(--ax-sys-color-lightest-surface);--ax-legend-text: var(--ax-sys-color-on-lightest-surface);--ax-legend-border: var(--ax-sys-color-border-surface);--ax-legend-radius: .5rem;--ax-legend-padding: .75rem;--ax-legend-gap: .5rem;--ax-legend-item-height: 1.75rem}.ax-chart-legend{display:flex;max-height:100%;width:100%;flex-direction:column;overflow-y:auto;background-color:rgba(var(--ax-legend-bg));border-radius:var(--ax-legend-radius);border:1px solid rgba(var(--ax-legend-border));padding:var(--ax-legend-padding);gap:var(--ax-legend-gap);color:rgba(var(--ax-legend-text))}.ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center}.ax-legend-item{display:flex;cursor:pointer;align-items:baseline;gap:calc(var(--spacing, .25rem) * 2);border-radius:.25rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);white-space:nowrap;height:var(--ax-legend-item-height);transition:background-color .15s ease,opacity .15s ease,transform .15s ease;color:rgba(var(--ax-legend-text))}.ax-legend-item:hover{background-color:rgba(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){.ax-legend-item:hover{background-color:color-mix(in srgb,rgba(var(--ax-legend-text)) 6%,transparent)}}.ax-legend-item:active{transform:scale(.98)}.ax-legend-item.ax-legend-item-hidden{opacity:75%}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{text-decoration-line:line-through}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{position:relative;opacity:40%}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";position:absolute;inset:calc(var(--spacing, .25rem) * 0);background:repeating-linear-gradient(45deg,rgba(var(--ax-legend-text)),rgba(var(--ax-legend-text)) 2px,transparent 2px,transparent 4px);border-radius:inherit}@supports (color: color-mix(in lab,red,red)){.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{background:repeating-linear-gradient(45deg,color-mix(in srgb,rgba(var(--ax-legend-text)) 35%,transparent),color-mix(in srgb,rgba(var(--ax-legend-text)) 35%,transparent) 2px,transparent 2px,transparent 4px)}}.ax-legend-color{width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);flex-shrink:0;border-radius:3px}.ax-legend-name{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-legend-value{margin-inline-start:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.ax-legend-percentage{margin-inline-start:.35rem;border-radius:var(--radius-lg, .5rem);padding-inline:.35rem;padding-block:.1rem;font-size:.7rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);background-color:rgba(var(--ax-legend-text))}@supports (color: color-mix(in lab,red,red)){.ax-legend-percentage{background-color:color-mix(in srgb,rgba(var(--ax-legend-text)) 10%,transparent)}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemMouseEnter: [{ type: i0.Output, args: ["itemMouseEnter"] }], itemMouseLeave: [{ type: i0.Output, args: ["itemMouseLeave"] }], legendContainer: [{ type: i0.ViewChild, args: ['legendContainer', { isSignal: true }] }] } });
 
 /**

package/fesm2022/acorex-charts-chart-legend.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-charts-chart-legend.mjs","sources":["../../../../packages/charts/chart-legend/src/lib/chart-legend.component.ts","../../../../packages/charts/chart-legend/src/lib/chart-legend.component.html","../../../../packages/charts/chart-legend/src/acorex-charts-chart-legend.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ElementRef, ViewEncapsulation, computed, input, output, viewChild } from '@angular/core';\nimport { AXChartLegendCompatible, AXChartLegendItem, AXChartLegendOptions } from './chart-legend.type';\n\n@Component({\n  selector: 'ax-chart-legend',\n  templateUrl: './chart-legend.component.html',\n  styleUrls: ['./chart-legend.component.css'],\n  imports: [CommonModule],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXChartLegendComponent {\n  /**\n   * Chart component instance\n   * Must implement AXChartLegendCompatible interface\n   */\n  chart = input.required<AXChartLegendCompatible>();\n\n  /**\n   * Configuration options for the legend\n   */\n  options = input<AXChartLegendOptions>({});\n\n  /**\n   * Event emitted when a legend item is clicked\n   * Returns the item that was clicked\n   */\n  itemClick = output<AXChartLegendItem>();\n\n  /**\n   * Event emitted when the mouse enters a legend item\n   */\n  itemMouseEnter = output<AXChartLegendItem>();\n\n  /**\n   * Event emitted when the mouse leaves a legend item\n   */\n  itemMouseLeave = output<AXChartLegendItem>();\n\n  /**\n   * Reference to legend container for measuring dimensions\n   */\n  legendContainer = viewChild<ElementRef<HTMLDivElement>>('legendContainer');\n\n  // Computed values for the template\n  protected showValues = computed(() => this.options()?.showValues !== false);\n  protected showPercentage = computed(() => this.options()?.showPercentage !== false);\n  protected containerClass = computed(() => {\n    const opts = this.options();\n    const className = opts?.className || '';\n    const mode = opts?.mode || 'vertical';\n    return {\n      'ax-chart-legend': true,\n      [className]: !!className,\n      [`ax-legend-${mode}`]: true,\n    };\n  });\n\n  // Track if the legend is interactive\n  protected isInteractive = computed(() => this.options()?.interactive !== false);\n\n  // Compute the items to display from the chart\n  protected displayItems = computed(() => {\n    return this.chart().getLegendItems();\n  });\n\n  /**\n   * Handle clicks on legend items\n   */\n  protected onItemClick(item: AXChartLegendItem): void {\n    const chartInstance = this.chart();\n\n    // If we have a chart and it's interactive, toggle the segment\n    if (this.isInteractive()) {\n      const isVisible = chartInstance.toggleSegment(item.id);\n      // Update the item's hidden state to reflect the current state\n      item.hidden = !isVisible;\n    }\n\n    // Always emit the item click event\n    this.itemClick.emit(item);\n  }\n\n  /**\n   * Handle mouse enter on legend items\n   */\n  protected onItemMouseEnter(item: AXChartLegendItem): void {\n    this.chart().highlightSegment(null);\n    this.itemMouseEnter.emit(item);\n    this.chart().highlightSegment(item.id);\n  }\n\n  /**\n   * Handle mouse leave on legend items\n   */\n  protected onItemMouseLeave(item: AXChartLegendItem): void {\n    this.itemMouseLeave.emit(item);\n    this.chart().highlightSegment(null);\n  }\n\n  /**\n   * Get legend container dimensions\n   */\n  getDimensions(): { width: number; height: number } {\n    if (!this.legendContainer()?.nativeElement) {\n      return { width: 0, height: 0 };\n    }\n\n    return {\n      width: this.legendContainer().nativeElement.offsetWidth,\n      height: this.legendContainer().nativeElement.offsetHeight,\n    };\n  }\n}\n","<div #legendContainer [ngClass]=\"containerClass()\">\n  @for (item of displayItems(); track item.id) {\n  <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n    (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n    <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n    <span class=\"ax-legend-name\">{{ item.name }}</span>\n    @if (showValues()) {\n    <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n    }\n    @if (showPercentage()) {\n    <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n    }\n  </div>\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-charts-chart-legend.mjs","sources":["../../../../packages/charts/chart-legend/src/lib/chart-legend.component.ts","../../../../packages/charts/chart-legend/src/lib/chart-legend.component.html","../../../../packages/charts/chart-legend/src/acorex-charts-chart-legend.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ElementRef, ViewEncapsulation, computed, input, output, signal, viewChild } from '@angular/core';\nimport { AXChartLegendCompatible, AXChartLegendItem, AXChartLegendOptions } from './chart-legend.type';\n\n@Component({\n  selector: 'ax-chart-legend',\n  templateUrl: './chart-legend.component.html',\n  styleUrls: ['./chart-legend.component.css'],\n  imports: [CommonModule],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXChartLegendComponent {\n  /**\n   * Chart component instance\n   * Must implement AXChartLegendCompatible interface\n   */\n  chart = input.required<AXChartLegendCompatible>();\n\n  /**\n   * Configuration options for the legend\n   */\n  options = input<AXChartLegendOptions>({});\n\n  /**\n   * Event emitted when a legend item is clicked\n   * Returns the item that was clicked\n   */\n  itemClick = output<AXChartLegendItem>();\n\n  /**\n   * Event emitted when the mouse enters a legend item\n   */\n  itemMouseEnter = output<AXChartLegendItem>();\n\n  /**\n   * Event emitted when the mouse leaves a legend item\n   */\n  itemMouseLeave = output<AXChartLegendItem>();\n\n  /**\n   * Reference to legend container for measuring dimensions\n   */\n  legendContainer = viewChild<ElementRef<HTMLDivElement>>('legendContainer');\n\n  private readonly interactionVersion = signal(0);\n\n  // Computed values for the template\n  protected showValues = computed(() => this.options()?.showValues !== false);\n  protected showPercentage = computed(() => this.options()?.showPercentage !== false);\n  protected containerClass = computed(() => {\n    const opts = this.options();\n    const className = opts?.className || '';\n    const mode = opts?.mode || 'vertical';\n    return {\n      'ax-chart-legend': true,\n      [className]: !!className,\n      [`ax-legend-${mode}`]: true,\n    };\n  });\n\n  // Track if the legend is interactive\n  protected isInteractive = computed(() => this.options()?.interactive !== false);\n\n  // Compute the items to display from the chart\n  protected displayItems = computed(() => {\n    const chart = this.chart();\n    chart.legendStateVersion?.();\n    this.interactionVersion();\n    return chart.getLegendItems();\n  });\n\n  /**\n   * Handle clicks on legend items\n   */\n  protected onItemClick(item: AXChartLegendItem): void {\n    const chartInstance = this.chart();\n\n    if (this.isInteractive()) {\n      chartInstance.toggleSegment(item.id);\n      this.interactionVersion.update((version) => version + 1);\n    }\n\n    const refreshedItem = this.displayItems().find((legendItem) => legendItem.id === item.id) ?? item;\n    this.itemClick.emit(refreshedItem);\n  }\n\n  /**\n   * Handle mouse enter on legend items\n   */\n  protected onItemMouseEnter(item: AXChartLegendItem): void {\n    this.itemMouseEnter.emit(item);\n    this.chart().highlightSegment(item.id);\n  }\n\n  /**\n   * Handle mouse leave on legend items\n   */\n  protected onItemMouseLeave(item: AXChartLegendItem): void {\n    this.itemMouseLeave.emit(item);\n    this.chart().highlightSegment(null);\n  }\n\n  protected hasValidPercentage(value: number | undefined): boolean {\n    return value != null && !Number.isNaN(value);\n  }\n\n  /**\n   * Get legend container dimensions\n   */\n  getDimensions(): { width: number; height: number } {\n    if (!this.legendContainer()?.nativeElement) {\n      return { width: 0, height: 0 };\n    }\n\n    return {\n      width: this.legendContainer().nativeElement.offsetWidth,\n      height: this.legendContainer().nativeElement.offsetHeight,\n    };\n  }\n}\n","<div #legendContainer [ngClass]=\"containerClass()\">\n  @for (item of displayItems(); track item.id) {\n  <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n    (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n    <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n    <span class=\"ax-legend-name\">{{ item.name }}</span>\n    @if (showValues()) {\n    <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n    }\n    @if (showPercentage() && hasValidPercentage(item.percentage)) {\n    <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n    }\n  </div>\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-charts-chart-tooltip.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, input, viewChild, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { inject, NgZone, input, viewChild, effect, ViewEncapsulation, Component } from '@angular/core';
 
 class AXChartTooltipComponent {
     ngZone = inject(NgZone);
@@ -30,9 +30,10 @@ class AXChartTooltipComponent {
     tooltipWidth = 0;
     tooltipHeight = 0;
     constructor() {
-        afterNextRender(() => {
-            // Update tooltip dimensions when visible changes
-            this.updateTooltipDimensions();
+        effect(() => {
+            if (this.visible() && this.data()) {
+                this.updateTooltipDimensions();
+            }
         });
     }
     // Helpers to support color as string | string[]
@@ -101,13 +102,13 @@ class AXChartTooltipComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXChartTooltipComponent, isStandalone: true, selector: "ax-chart-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-chart-tooltip-host" }, viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip chart-tooltip-visible\"\n    [style.background-color]=\"data()!.tooltipBgColor || null\"\n    [style.color]=\"data()!.tooltipColor || null\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n    aria-hidden=\"false\"\n  >\n    <div class=\"chart-tooltip-content\">\n      <div class=\"chart-tooltip-body\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row\">\n            @if (singleColor()) {\n              <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n            }\n            <div class=\"chart-tooltip-title\">\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row\">\n                @if (colorAt(i)) {\n                  <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n                }\n                <div class=\"chart-tooltip-title\">\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row\">\n          <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div class=\"chart-tooltip-percentage\">\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-tooltip.ax-chart-tooltip-host{@apply pointer-events-none absolute top-0 left-0 z-10 size-0 overflow-visible;--ax-comp-chart-tooltip-bg-color: var(--ax-comp-tooltip-bg-color, var(--ax-sys-color-dark));--ax-comp-chart-tooltip-text-color: var(--ax-comp-tooltip-text-color, var(--ax-sys-color-light))}.chart-tooltip{@apply pointer-events-none invisible fixed z-[1000] w-max max-w-[250px] rounded-md border border-white/10 px-3 py-2 text-[.8rem] opacity-0 backdrop-blur-sm transition-opacity duration-150 ease-in;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background-color:rgba(var(--ax-comp-chart-tooltip-bg-color));color:rgba(var(--ax-comp-chart-tooltip-text-color))}.chart-tooltip-visible{@apply visible opacity-100;}.chart-tooltip-content{@apply flex items-center justify-between gap-2;}.chart-tooltip-body{@apply flex flex-col overflow-hidden text-ellipsis;}.chart-tooltip-title-row{@apply flex items-center gap-1.5 pb-2;}.chart-tooltip-title-list .chart-tooltip-title-row{@apply pb-1;}.chart-tooltip-color{@apply size-2.5 shrink-0 rounded-[2px];}.chart-tooltip-title{@apply overflow-hidden leading-[1.2] font-semibold text-ellipsis whitespace-nowrap;}.chart-tooltip-value-row{@apply flex items-center gap-2 whitespace-nowrap;}.chart-tooltip-value{@apply grow font-medium;}.chart-tooltip-percentage{@apply shrink-0 rounded-full px-1.5 py-0.5 text-[.7rem] font-medium;background-color:#fff3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXChartTooltipComponent, isStandalone: true, selector: "ax-chart-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-chart-tooltip-host" }, viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip chart-tooltip-visible\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n    aria-hidden=\"false\"\n  >\n    <div class=\"chart-tooltip-content\">\n      <div class=\"chart-tooltip-body\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row\">\n            @if (singleColor()) {\n              <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n            }\n            <div class=\"chart-tooltip-title\">\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row\">\n                @if (colorAt(i)) {\n                  <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n                }\n                <div class=\"chart-tooltip-title\">\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row\">\n          <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div class=\"chart-tooltip-percentage\">\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-chart-tooltip.ax-chart-tooltip-host{pointer-events:none;position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);z-index:10;width:calc(var(--spacing, .25rem) * 0);height:calc(var(--spacing, .25rem) * 0);overflow:visible;--ax-comp-chart-tooltip-bg-color: 23, 23, 23;--ax-comp-chart-tooltip-text-color: 245, 245, 245}.chart-tooltip{pointer-events:none;visibility:hidden;position:absolute;z-index:1000;width:max-content;max-width:250px;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#fff 10%,transparent);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.8rem;opacity:0%;--tw-backdrop-blur: blur(var(--blur-sm, 8px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in, cubic-bezier(.4, 0, 1, 1));transition-timing-function:var(--ease-in, cubic-bezier(.4, 0, 1, 1));background-color:rgba(var(--ax-comp-chart-tooltip-bg-color),.96);color:rgba(var(--ax-comp-chart-tooltip-text-color));box-shadow:0 10px 15px -3px #00000059,0 4px 6px -2px #0003}@supports (color: color-mix(in lab,red,red)){.chart-tooltip{border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}.chart-tooltip-visible{visibility:visible;opacity:100%}.chart-tooltip-content{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.chart-tooltip-body{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-title-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}.chart-tooltip-title-list .chart-tooltip-title-row{padding-bottom:calc(var(--spacing, .25rem) * 1)}.chart-tooltip-color{width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5);flex-shrink:0;border-radius:2px}.chart-tooltip-title{overflow:hidden;--tw-leading: 1.2;line-height:1.2;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}.chart-tooltip-value-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);white-space:nowrap}.chart-tooltip-value{flex-grow:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.chart-tooltip-percentage{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.7rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);background-color:rgba(var(--ax-comp-chart-tooltip-text-color))}@supports (color: color-mix(in lab,red,red)){.chart-tooltip-percentage{background-color:color-mix(in srgb,rgba(var(--ax-comp-chart-tooltip-text-color)) 20%,transparent)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-backdrop-blur{syntax: \"*\"; inherits: false;}@property --tw-backdrop-brightness{syntax: \"*\"; inherits: false;}@property --tw-backdrop-contrast{syntax: \"*\"; inherits: false;}@property --tw-backdrop-grayscale{syntax: \"*\"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-invert{syntax: \"*\"; inherits: false;}@property --tw-backdrop-opacity{syntax: \"*\"; inherits: false;}@property --tw-backdrop-saturate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-sepia{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-duration: initial;--tw-ease: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chart-tooltip', imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ax-chart-tooltip', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
                         class: 'ax-chart-tooltip-host',
-                    }, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip chart-tooltip-visible\"\n    [style.background-color]=\"data()!.tooltipBgColor || null\"\n    [style.color]=\"data()!.tooltipColor || null\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n    aria-hidden=\"false\"\n  >\n    <div class=\"chart-tooltip-content\">\n      <div class=\"chart-tooltip-body\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row\">\n            @if (singleColor()) {\n              <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n            }\n            <div class=\"chart-tooltip-title\">\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row\">\n                @if (colorAt(i)) {\n                  <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n                }\n                <div class=\"chart-tooltip-title\">\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row\">\n          <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div class=\"chart-tooltip-percentage\">\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-tooltip.ax-chart-tooltip-host{@apply pointer-events-none absolute top-0 left-0 z-10 size-0 overflow-visible;--ax-comp-chart-tooltip-bg-color: var(--ax-comp-tooltip-bg-color, var(--ax-sys-color-dark));--ax-comp-chart-tooltip-text-color: var(--ax-comp-tooltip-text-color, var(--ax-sys-color-light))}.chart-tooltip{@apply pointer-events-none invisible fixed z-[1000] w-max max-w-[250px] rounded-md border border-white/10 px-3 py-2 text-[.8rem] opacity-0 backdrop-blur-sm transition-opacity duration-150 ease-in;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background-color:rgba(var(--ax-comp-chart-tooltip-bg-color));color:rgba(var(--ax-comp-chart-tooltip-text-color))}.chart-tooltip-visible{@apply visible opacity-100;}.chart-tooltip-content{@apply flex items-center justify-between gap-2;}.chart-tooltip-body{@apply flex flex-col overflow-hidden text-ellipsis;}.chart-tooltip-title-row{@apply flex items-center gap-1.5 pb-2;}.chart-tooltip-title-list .chart-tooltip-title-row{@apply pb-1;}.chart-tooltip-color{@apply size-2.5 shrink-0 rounded-[2px];}.chart-tooltip-title{@apply overflow-hidden leading-[1.2] font-semibold text-ellipsis whitespace-nowrap;}.chart-tooltip-value-row{@apply flex items-center gap-2 whitespace-nowrap;}.chart-tooltip-value{@apply grow font-medium;}.chart-tooltip-percentage{@apply shrink-0 rounded-full px-1.5 py-0.5 text-[.7rem] font-medium;background-color:#fff3}}\n"] }]
+                    }, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip chart-tooltip-visible\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n    aria-hidden=\"false\"\n  >\n    <div class=\"chart-tooltip-content\">\n      <div class=\"chart-tooltip-body\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row\">\n            @if (singleColor()) {\n              <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n            }\n            <div class=\"chart-tooltip-title\">\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row\">\n                @if (colorAt(i)) {\n                  <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n                }\n                <div class=\"chart-tooltip-title\">\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row\">\n          <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div class=\"chart-tooltip-percentage\">\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-chart-tooltip.ax-chart-tooltip-host{pointer-events:none;position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);z-index:10;width:calc(var(--spacing, .25rem) * 0);height:calc(var(--spacing, .25rem) * 0);overflow:visible;--ax-comp-chart-tooltip-bg-color: 23, 23, 23;--ax-comp-chart-tooltip-text-color: 245, 245, 245}.chart-tooltip{pointer-events:none;visibility:hidden;position:absolute;z-index:1000;width:max-content;max-width:250px;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#fff 10%,transparent);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:.8rem;opacity:0%;--tw-backdrop-blur: blur(var(--blur-sm, 8px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in, cubic-bezier(.4, 0, 1, 1));transition-timing-function:var(--ease-in, cubic-bezier(.4, 0, 1, 1));background-color:rgba(var(--ax-comp-chart-tooltip-bg-color),.96);color:rgba(var(--ax-comp-chart-tooltip-text-color));box-shadow:0 10px 15px -3px #00000059,0 4px 6px -2px #0003}@supports (color: color-mix(in lab,red,red)){.chart-tooltip{border-color:color-mix(in oklab,var(--color-white, #fff) 10%,transparent)}}.chart-tooltip-visible{visibility:visible;opacity:100%}.chart-tooltip-content{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.chart-tooltip-body{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-title-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-bottom:calc(var(--spacing, .25rem) * 2)}.chart-tooltip-title-list .chart-tooltip-title-row{padding-bottom:calc(var(--spacing, .25rem) * 1)}.chart-tooltip-color{width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5);flex-shrink:0;border-radius:2px}.chart-tooltip-title{overflow:hidden;--tw-leading: 1.2;line-height:1.2;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}.chart-tooltip-value-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);white-space:nowrap}.chart-tooltip-value{flex-grow:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.chart-tooltip-percentage{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.7rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);background-color:rgba(var(--ax-comp-chart-tooltip-text-color))}@supports (color: color-mix(in lab,red,red)){.chart-tooltip-percentage{background-color:color-mix(in srgb,rgba(var(--ax-comp-chart-tooltip-text-color)) 20%,transparent)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-backdrop-blur{syntax: \"*\"; inherits: false;}@property --tw-backdrop-brightness{syntax: \"*\"; inherits: false;}@property --tw-backdrop-contrast{syntax: \"*\"; inherits: false;}@property --tw-backdrop-grayscale{syntax: \"*\"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-invert{syntax: \"*\"; inherits: false;}@property --tw-backdrop-opacity{syntax: \"*\"; inherits: false;}@property --tw-backdrop-saturate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-sepia{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-duration: initial;--tw-ease: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }] } });
 
 /**

package/fesm2022/acorex-charts-chart-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.ts","../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.html","../../../../packages/charts/chart-tooltip/src/acorex-charts-chart-tooltip.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  NgZone,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { AXChartTooltipData } from './chart-tooltip.type';\n\n@Component({\n  selector: 'ax-chart-tooltip',\n  templateUrl: './chart-tooltip.component.html',\n  styleUrls: ['./chart-tooltip.component.css'],\n  imports: [CommonModule],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ax-chart-tooltip-host',\n  },\n})\nexport class AXChartTooltipComponent {\n  private ngZone = inject(NgZone);\n\n  data = input<AXChartTooltipData | null>(null);\n  position = input<{ x: number; y: number }>({ x: 0, y: 0 });\n  visible = input<boolean>(false);\n\n  /**\n   * Whether to show the tooltip's percentage badge\n   */\n  showPercentage = input<boolean>(true);\n\n  /**\n   * Optional custom styling for the tooltip\n   */\n  style = input<{ [key: string]: string }>({});\n\n  /**\n   * Reference to tooltip container for measuring dimensions\n   */\n  tooltipContainer = viewChild<ElementRef<HTMLDivElement>>('tooltipContainer');\n\n  // Tooltip dimensions\n  protected tooltipWidth = 0;\n  protected tooltipHeight = 0;\n\n  constructor() {\n    afterNextRender(() => {\n      // Update tooltip dimensions when visible changes\n      this.updateTooltipDimensions();\n    });\n  }\n\n  // Helpers to support color as string | string[]\n  protected isColorArray(): boolean {\n    const color = this.data()?.color as unknown;\n    return Array.isArray(color);\n  }\n\n  protected colorList(): string[] {\n    const color = this.data()?.color as unknown;\n    return Array.isArray(color) ? (color as string[]) : [];\n  }\n\n  protected singleColor(): string | null {\n    const color = this.data()?.color as unknown;\n    return typeof color === 'string' ? (color as string) : null;\n  }\n\n  protected isTitleArray(): boolean {\n    const t = this.data()?.title as unknown;\n    return Array.isArray(t);\n  }\n\n  protected titleList(): string[] {\n    const t = this.data()?.title as unknown;\n    return Array.isArray(t) ? (t as string[]) : [];\n  }\n\n  protected colorAt(index: number): string | null {\n    const c = this.data()?.color as unknown;\n    if (Array.isArray(c)) {\n      return (c as string[])[index] ?? null;\n    }\n    return typeof c === 'string' ? (c as string) : null;\n  }\n\n  protected formattedValue(): string {\n    const v = this.data()?.value;\n    if (v == null) return '';\n    if (typeof v === 'number') return v.toLocaleString();\n    const num = Number(v);\n    return isNaN(num) ? v : num.toLocaleString();\n  }\n\n  /**\n   * Updates tooltip dimensions after it's rendered\n   */\n  protected updateTooltipDimensions(): void {\n    if (!this.visible()) {\n      return;\n    }\n\n    this.ngZone.runOutsideAngular(() => {\n      requestAnimationFrame(() => {\n        const tooltipEl = this.tooltipContainer()?.nativeElement;\n        if (!tooltipEl) {\n          return;\n        }\n\n        this.tooltipWidth = tooltipEl.offsetWidth;\n        this.tooltipHeight = tooltipEl.offsetHeight;\n      });\n    });\n  }\n\n  /**\n   * Get adjusted tooltip position\n   * Exposes properties for parent components to query tooltip dimensions\n   */\n  getDimensions(): { width: number; height: number } {\n    return {\n      width: this.tooltipWidth,\n      height: this.tooltipHeight,\n    };\n  }\n}\n","@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip chart-tooltip-visible\"\n    [style.background-color]=\"data()!.tooltipBgColor || null\"\n    [style.color]=\"data()!.tooltipColor || null\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n    aria-hidden=\"false\"\n  >\n    <div class=\"chart-tooltip-content\">\n      <div class=\"chart-tooltip-body\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row\">\n            @if (singleColor()) {\n              <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n            }\n            <div class=\"chart-tooltip-title\">\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row\">\n                @if (colorAt(i)) {\n                  <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n                }\n                <div class=\"chart-tooltip-title\">\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row\">\n          <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div class=\"chart-tooltip-percentage\">\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.ts","../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.html","../../../../packages/charts/chart-tooltip/src/acorex-charts-chart-tooltip.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ElementRef, NgZone, ViewEncapsulation, effect, inject, input, viewChild } from '@angular/core';\nimport { AXChartTooltipData } from './chart-tooltip.type';\n\n@Component({\n  selector: 'ax-chart-tooltip',\n  templateUrl: './chart-tooltip.component.html',\n  styleUrls: ['./chart-tooltip.component.css'],\n  imports: [CommonModule],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ax-chart-tooltip-host',\n  },\n})\nexport class AXChartTooltipComponent {\n  private ngZone = inject(NgZone);\n\n  data = input<AXChartTooltipData | null>(null);\n  position = input<{ x: number; y: number }>({ x: 0, y: 0 });\n  visible = input<boolean>(false);\n\n  /**\n   * Whether to show the tooltip's percentage badge\n   */\n  showPercentage = input<boolean>(true);\n\n  /**\n   * Optional custom styling for the tooltip\n   */\n  style = input<{ [key: string]: string }>({});\n\n  /**\n   * Reference to tooltip container for measuring dimensions\n   */\n  tooltipContainer = viewChild<ElementRef<HTMLDivElement>>('tooltipContainer');\n\n  // Tooltip dimensions\n  protected tooltipWidth = 0;\n  protected tooltipHeight = 0;\n\n  constructor() {\n    effect(() => {\n      if (this.visible() && this.data()) {\n        this.updateTooltipDimensions();\n      }\n    });\n  }\n\n  // Helpers to support color as string | string[]\n  protected isColorArray(): boolean {\n    const color = this.data()?.color as unknown;\n    return Array.isArray(color);\n  }\n\n  protected colorList(): string[] {\n    const color = this.data()?.color as unknown;\n    return Array.isArray(color) ? (color as string[]) : [];\n  }\n\n  protected singleColor(): string | null {\n    const color = this.data()?.color as unknown;\n    return typeof color === 'string' ? (color as string) : null;\n  }\n\n  protected isTitleArray(): boolean {\n    const t = this.data()?.title as unknown;\n    return Array.isArray(t);\n  }\n\n  protected titleList(): string[] {\n    const t = this.data()?.title as unknown;\n    return Array.isArray(t) ? (t as string[]) : [];\n  }\n\n  protected colorAt(index: number): string | null {\n    const c = this.data()?.color as unknown;\n    if (Array.isArray(c)) {\n      return (c as string[])[index] ?? null;\n    }\n    return typeof c === 'string' ? (c as string) : null;\n  }\n\n  protected formattedValue(): string {\n    const v = this.data()?.value;\n    if (v == null) return '';\n    if (typeof v === 'number') return v.toLocaleString();\n    const num = Number(v);\n    return isNaN(num) ? v : num.toLocaleString();\n  }\n\n  /**\n   * Updates tooltip dimensions after it's rendered\n   */\n  protected updateTooltipDimensions(): void {\n    if (!this.visible()) {\n      return;\n    }\n\n    this.ngZone.runOutsideAngular(() => {\n      requestAnimationFrame(() => {\n        const tooltipEl = this.tooltipContainer()?.nativeElement;\n        if (!tooltipEl) {\n          return;\n        }\n\n        this.tooltipWidth = tooltipEl.offsetWidth;\n        this.tooltipHeight = tooltipEl.offsetHeight;\n      });\n    });\n  }\n\n  /**\n   * Get adjusted tooltip position\n   * Exposes properties for parent components to query tooltip dimensions\n   */\n  getDimensions(): { width: number; height: number } {\n    return {\n      width: this.tooltipWidth,\n      height: this.tooltipHeight,\n    };\n  }\n}\n","@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip chart-tooltip-visible\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n    aria-hidden=\"false\"\n  >\n    <div class=\"chart-tooltip-content\">\n      <div class=\"chart-tooltip-body\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row\">\n            @if (singleColor()) {\n              <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n            }\n            <div class=\"chart-tooltip-title\">\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row\">\n                @if (colorAt(i)) {\n                  <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n                }\n                <div class=\"chart-tooltip-title\">\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row\">\n          <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div class=\"chart-tooltip-percentage\">\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-charts-donut-chart.mjs

@@ -63,6 +63,9 @@ class AXDonutChartComponent extends AXChartComponent {
     pieData = [];
     // State management
     hiddenSegments = new Set();
+    _legendStateVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_legendStateVersion" }] : /* istanbul ignore next */ []));
+    legendStateVersion = this._legendStateVersion.asReadonly();
     _initialized = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
     _rendered = signal(false, /* @ts-ignore */
@@ -143,10 +146,14 @@ class AXDonutChartComponent extends AXChartComponent {
         untracked(() => {
             if (this._rendered()) {
                 this.updateChart();
+                this.bumpLegendState();
             }
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : /* istanbul ignore next */ []));
+    bumpLegendState() {
+        this._legendStateVersion.update((version) => version + 1);
+    }
     /**
      * Highlights a specific segment by ID
      * @param id The segment ID to highlight, or null to clear highlight
@@ -251,6 +258,7 @@ class AXDonutChartComponent extends AXChartComponent {
             this.hiddenSegments.add(id);
             this.updateChart();
         }
+        this.bumpLegendState();
         return !this.isSegmentHidden(id);
     }
     ngOnDestroy() {
@@ -369,10 +377,19 @@ class AXDonutChartComponent extends AXChartComponent {
         const svg = this.createSvgWithFilters(container, width, height);
         // Create main chart group
         this.svg = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
+        const { innerRadius } = this.getDonutRadii(width, height);
         // Create donut segments
         this.createDonutSegments(width, height, visibleData, layoutTotal);
         // Add total in center
-        this.addCenterDisplay(displayTotal);
+        this.addCenterDisplay(displayTotal, innerRadius);
+    }
+    getDonutRadii(chartWidth, chartHeight) {
+        const maxRadius = Math.min(chartWidth, chartHeight) / 2;
+        const radius = Math.max(0, maxRadius - this.CHART_INSET);
+        const donutWidthPercent = this.effectiveOptions().donutWidth / 100;
+        const innerRadius = radius * (1 - donutWidthPercent);
+        const outerRadius = radius * 0.95;
+        return { innerRadius, outerRadius, radius };
     }
     /**
      * Create SVG element with filter definitions for shadows
@@ -413,13 +430,7 @@ class AXDonutChartComponent extends AXChartComponent {
             .value((d) => this.getSegmentLayoutValue(d.value))
             .sort(null)
             .padAngle(0.02);
-        // Calculate the radius of the donut chart
-        const maxRadius = Math.min(chartWidth, chartHeight) / 2;
-        const radius = Math.max(0, maxRadius - this.CHART_INSET);
-        // Calculate inner radius based on donutWidth percentage
-        const donutWidthPercent = this.effectiveOptions().donutWidth / 100;
-        const innerRadius = radius * (1 - donutWidthPercent);
-        const outerRadius = radius * 0.95;
+        const { innerRadius, outerRadius } = this.getDonutRadii(chartWidth, chartHeight);
         const ringWidth = outerRadius - innerRadius;
         const arc = this.d3
             .arc()
@@ -705,44 +716,79 @@ class AXDonutChartComponent extends AXChartComponent {
                 return;
             }
             this._tooltipRafId = null;
-            const containerRect = containerEl.getBoundingClientRect();
             const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
-            const pos = computeTooltipPosition(containerRect, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
+            const pos = computeTooltipPosition(containerEl, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
             this._tooltipPosition.set(pos);
         });
     }
+    cancelTooltipPosition() {
+        if (this._tooltipRafId != null) {
+            cancelAnimationFrame(this._tooltipRafId);
+            this._tooltipRafId = null;
+        }
+        this._pendingTooltipCoords = null;
+    }
     /**
-     * Adds center display with total value
+     * Adds center display with total value, scaled to fit the donut hole.
      */
-    addCenterDisplay(displayTotal) {
-        if (!this.svg)
+    addCenterDisplay(displayTotal, innerRadius) {
+        if (!this.svg || innerRadius <= 0)
             return;
-        const chartContainerWidth = this.chartContainerEl().nativeElement.clientWidth;
-        // Improved font scaling: better minimum for small sizes, better ratio for scaling
-        const baseFontSize = Math.max(1.8, Math.min(3.2, chartContainerWidth / 150));
-        const subTextFontSize = baseFontSize * 0.5;
-        // Create group for the total display
+        const valueText = displayTotal.toLocaleString();
+        const labelText = this.effectiveOptions().totalLabel || 'Total';
+        const { valueFontSize, labelFontSize, displayLabel } = this.calculateCenterTextSizes(valueText, labelText, innerRadius);
+        const labelLineHeight = labelFontSize * 1.3;
+        const valueY = -(labelLineHeight / 2);
         const totalDisplay = this.svg
             .append('g')
             .attr('class', 'ax-donut-chart-total-display')
             .attr('text-anchor', 'middle');
-        // Add total value
         totalDisplay
             .append('text')
             .attr('class', 'ax-donut-chart-total-value')
-            .style('font-size', `${baseFontSize}rem`)
+            .attr('y', valueY)
+            .attr('dominant-baseline', 'middle')
+            .style('font-size', `${valueFontSize}px`)
             .style('font-weight', '600')
             .style('fill', 'rgb(var(--ax-comp-donut-chart-value-color))')
-            .text(displayTotal.toLocaleString());
-        // Add label
+            .text(valueText);
         totalDisplay
             .append('text')
             .attr('class', 'ax-donut-chart-total-label')
-            .attr('dy', '1.4em')
-            .style('font-size', `${subTextFontSize}rem`)
+            .attr('y', valueY + valueFontSize * 0.55 + labelLineHeight / 2)
+            .attr('dominant-baseline', 'middle')
+            .style('font-size', `${labelFontSize}px`)
             .style('fill', 'rgb(var(--ax-comp-donut-chart-value-color))')
             .style('opacity', '0.8')
-            .text(this.effectiveOptions().totalLabel || 'Total');
+            .text(displayLabel);
+    }
+    calculateCenterTextSizes(valueText, labelText, innerRadius) {
+        const availableDiameter = innerRadius * 2;
+        const availableWidth = availableDiameter * 0.82;
+        const availableHeight = availableDiameter * 0.78;
+        const MIN_VALUE_FONT = 9;
+        const MAX_VALUE_FONT = innerRadius * 0.42;
+        let valueFontSize = Math.min(innerRadius * 0.34, MAX_VALUE_FONT);
+        while (valueFontSize > MIN_VALUE_FONT && !this.doesTextFit(valueText, valueFontSize, availableWidth)) {
+            valueFontSize -= 0.5;
+        }
+        valueFontSize = Math.max(MIN_VALUE_FONT, Math.round(valueFontSize * 2) / 2);
+        let labelFontSize = Math.max(8, Math.round(valueFontSize * 0.42 * 2) / 2);
+        const labelLineHeight = labelFontSize * 1.3;
+        const totalHeight = valueFontSize + labelLineHeight;
+        if (totalHeight > availableHeight) {
+            const scale = availableHeight / totalHeight;
+            valueFontSize = Math.max(MIN_VALUE_FONT, Math.round(valueFontSize * scale * 2) / 2);
+            labelFontSize = Math.max(8, Math.round(labelFontSize * scale * 2) / 2);
+        }
+        while (labelFontSize > 8 && !this.doesTextFit(labelText, labelFontSize, availableWidth)) {
+            labelFontSize -= 0.5;
+        }
+        labelFontSize = Math.max(8, Math.round(labelFontSize * 2) / 2);
+        const displayLabel = this.doesTextFit(labelText, labelFontSize, availableWidth)
+            ? labelText
+            : this.truncateTextToFit(labelText, labelFontSize, availableWidth);
+        return { valueFontSize, labelFontSize, displayLabel };
     }
     /**
      * Handles chart rendering errors
@@ -757,11 +803,7 @@ class AXDonutChartComponent extends AXChartComponent {
      * Cleans up chart resources
      */
     cleanupChart() {
-        if (this._tooltipRafId != null) {
-            cancelAnimationFrame(this._tooltipRafId);
-            this._tooltipRafId = null;
-        }
-        this._pendingTooltipCoords = null;
+        this.cancelTooltipPosition();
         const container = this.chartContainerEl()?.nativeElement;
         if (container) {
             this.d3
@@ -776,7 +818,6 @@ class AXDonutChartComponent extends AXChartComponent {
         this._currentlyHighlightedSegment.set(null);
     }
     // ===== Helper utilities for modularity and maintainability =====
-    // computeTooltipPosition moved to shared chart utils
     /**
      * Gets an accessibility label describing the donut chart for screen readers
      * @returns Descriptive string for screen readers
@@ -827,11 +868,11 @@ class AXDonutChartComponent extends AXChartComponent {
         return (this.getSegmentLayoutValue(segmentValue) / layoutTotal) * 100;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-donut-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden rounded-lg;padding:clamp(.5rem,1.2vw,.875rem);background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{@apply block h-full max-h-full w-full max-w-full overflow-hidden;}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-donut-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.5rem,1.2vw,.875rem);background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;overflow:hidden}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDonutChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-donut-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden rounded-lg;padding:clamp(.5rem,1.2vw,.875rem);background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{@apply block h-full max-h-full w-full max-w-full overflow-hidden;}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}}\n"] }]
+            args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-donut-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.5rem,1.2vw,.875rem);background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;overflow:hidden}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], segmentHover: [{ type: i0.Output, args: ["segmentHover"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**