@acorex/charts 19.13.3 → 19.13.5

package/bar-chart/lib/bar-chart.component.d.ts

@@ -1,4 +1,5 @@
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+import { NXComponent } from '@acorex/components/common';
 import { OnDestroy } from '@angular/core';
 import { AXBarChartClickEvent, AXPBarChartData, AXPBarChartOption } from './bar-chart.type';
 import * as i0 from "@angular/core";
@@ -10,7 +11,7 @@ export declare const AXBarChartColors: {
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-export declare class AXBarChartComponent implements OnDestroy {
+export declare class AXBarChartComponent extends NXComponent implements OnDestroy {
     /** Chart data input */
     data: import("@angular/core").InputSignal<AXPBarChartData[]>;
     /** Chart options input */
@@ -28,6 +29,7 @@ export declare class AXBarChartComponent implements OnDestroy {
     private width;
     private height;
     private margin;
+    private _initialAnimationComplete;
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
@@ -43,15 +45,10 @@ export declare class AXBarChartComponent implements OnDestroy {
     protected effectiveOptions: import("@angular/core").Signal<{
         width?: number;
         height?: number;
-        margin?: {
-            top: number;
-            right: number;
-            bottom: number;
-            left: number;
-        };
         showXAxis?: boolean;
         showYAxis?: boolean;
         showGrid?: boolean;
+        showDataLabels?: boolean;
         xAxisLabel?: string;
         yAxisLabel?: string;
         showTooltip?: boolean;

package/bar-chart/lib/bar-chart.type.d.ts

@@ -1,3 +1,4 @@
+import { NXNativeEvent } from '@acorex/components/common';
 /**
  * Bar chart data item interface
  */
@@ -12,23 +13,30 @@ export interface AXPBarChartData {
  */
 export interface AXBarChartClickEvent {
     item: AXPBarChartData;
-    event: MouseEvent;
+    event: NXNativeEvent;
 }
 /**
  * Bar chart options interface
+ *
+ * Component supports the following CSS custom properties (design tokens):
+ * - `--ax-comp-bar-chart-labels-color`: Color for axis labels in option (X/Y axis titles).
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.7 opacity where needed)
+ * - `--ax-comp-bar-chart-data-labels-color`: Color for data labels.
+ *   Default: `--ax-sys-color-on-lightest-surface`
+ * - `--ax-comp-bar-chart-axis-color`: Color for X/Y axis lines.
+ *   Default: `--ax-sys-color-on-lightest-surface`
+ * - `--ax-comp-bar-chart-grid-lines-color`: Color for grid lines.
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.2 opacity)
+ * - `--ax-comp-bar-chart-bg-color`: Background color for the chart.
+ *   Default: `--ax-sys-color-lightest-surface`
  */
 export interface AXPBarChartOption {
     width?: number;
     height?: number;
-    margin?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
     showXAxis?: boolean;
     showYAxis?: boolean;
     showGrid?: boolean;
+    showDataLabels?: boolean;
     xAxisLabel?: string;
     yAxisLabel?: string;
     showTooltip?: boolean;

package/donut-chart/lib/donut-chart.component.d.ts

@@ -43,6 +43,7 @@ export declare class AXDonutChartComponent implements OnDestroy {
         width?: number;
         height?: number;
         showTooltip?: boolean;
+        showDataLabels?: boolean;
         donutWidth?: number;
         cornerRadius?: number;
         animationDuration?: number;
@@ -138,6 +139,10 @@ export declare class AXDonutChartComponent implements OnDestroy {
      * Cleans up chart resources
      */
     private cleanupChart;
+    /**
+     * Gets an accessibility label describing the donut chart for screen readers
+     */
+    protected getAccessibilityLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDonutChartComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXDonutChartComponent, "ax-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "segmentClick": "segmentClick"; "segmentHover": "segmentHover"; }, never, never, true, never>;
 }

package/donut-chart/lib/donut-chart.type.d.ts

@@ -8,14 +8,71 @@ export interface AXPDonutChartData {
 }
 /**
  * Configuration options for the donut chart
+ *
+ * ## Design Tokens
+ * The component supports the following CSS custom properties:
+ *
+ * ### `--ax-comp-donut-chart-bg-color`
+ * Background color for the chart area and separator lines between segments.
+ * Default: `var(--ax-sys-color-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-donut-chart-bg-color))`
+ *
+ * ### `--ax-comp-donut-chart-text-color`
+ * Text color for all labels, values, total count, and percentage indicators.
+ * Default: `var(--ax-sys-color-on-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-donut-chart-text-color))`
+ *
+ * ## Usage
+ * Override these tokens in your CSS to customize the chart's appearance:
+ * ```css
+ * ax-donut-chart {
+ *   --ax-comp-donut-chart-bg-color: var(--your-custom-background);
+ *   --ax-comp-donut-chart-text-color: var(--your-custom-text-color);
+ * }
+ * ```
  */
 export interface AXPDonutChartOption {
+    /**
+     * Width of the chart in pixels
+     * If not provided, will use container width
+     */
     width?: number;
+    /**
+     * Height of the chart in pixels
+     * If not provided, will use container height
+     */
     height?: number;
+    /**
+     * Whether to show tooltips on hover
+     * Default: true
+     */
     showTooltip?: boolean;
+    /**
+     * Whether to show percentage labels inside chart segments
+     * Labels will only appear on segments large enough to fit text
+     * Default: true
+     */
+    showDataLabels?: boolean;
+    /**
+     * Width of the donut ring as a percentage (10-90)
+     * Higher values create a thicker ring
+     * Default: 35
+     */
     donutWidth?: number;
+    /**
+     * Radius for rounded corners on segments in pixels
+     * Default: 4
+     */
     cornerRadius?: number;
+    /**
+     * Duration of animations in milliseconds
+     * Default: 800
+     */
     animationDuration?: number;
+    /**
+     * Type of easing function for animations
+     * Default: 'cubic-out'
+     */
     animationEasing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic' | 'cubic-in' | 'cubic-out' | 'cubic-in-out';
 }
 /**

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

@@ -1,20 +1,16 @@
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import { NXComponent } from '@acorex/components/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
 import { set } from 'lodash-es';
 
 const AXBarChartDefaultConfig = {
-    margin: {
-        top: 20,
-        right: 20,
-        bottom: 30,
-        left: 40,
-    },
     showXAxis: true,
     showYAxis: true,
     showGrid: true,
+    showDataLabels: true,
     showTooltip: true,
     barWidth: 80,
     cornerRadius: 4,
@@ -61,7 +57,7 @@ const AXBarChartColors = {
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-class AXBarChartComponent {
+class AXBarChartComponent extends NXComponent {
     // Inputs
     /** Chart data input */
     data = input([]);
@@ -85,6 +81,8 @@ class AXBarChartComponent {
     width;
     height;
     margin = { top: 20, right: 20, bottom: 30, left: 40 };
+    // Animation state
+    _initialAnimationComplete = signal(false);
     // Tooltip state
     _tooltipVisible = signal(false);
     _tooltipPosition = signal({ x: 0, y: 0 });
@@ -111,6 +109,7 @@ class AXBarChartComponent {
         };
     });
     constructor() {
+        super();
         // Dynamically load D3 and initialize the chart when the component is ready
         afterNextRender(() => {
             this._initialized.set(true);
@@ -231,10 +230,10 @@ class AXBarChartComponent {
     calculateMargins(options) {
         // Start with default margins
         this.margin = {
-            top: options.margin?.top ?? 20,
-            right: options.margin?.right ?? 20,
-            bottom: options.margin?.bottom ?? 30,
-            left: options.margin?.left ?? 40,
+            top: 20,
+            right: 20,
+            bottom: 30,
+            left: 40,
         };
         // Adjust margins if axis labels are present
         if (options.xAxisLabel) {
@@ -294,7 +293,13 @@ class AXBarChartComponent {
                 .attr('transform', `translate(0,${this.height})`)
                 .call(this.d3.axisBottom(this.xScale));
             // Style the axis text
-            this.xAxis.selectAll('text').style('font-size', '11px').style('font-weight', '400').style('fill', '#666');
+            this.xAxis
+                .selectAll('text')
+                .style('font-size', '11px')
+                .style('font-weight', '400')
+                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)');
+            // Style all lines in the x-axis (path, ticks)
+            this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
             // Add X axis label if provided
             if (options.xAxisLabel) {
                 const labelY = this.height + this.margin.bottom * 0.65;
@@ -307,7 +312,7 @@ class AXBarChartComponent {
                     .attr('y', labelY)
                     .style('font-size', '13px')
                     .style('font-weight', '500')
-                    .style('fill', '#555')
+                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
                     .text(options.xAxisLabel);
             }
         }
@@ -315,7 +320,13 @@ class AXBarChartComponent {
             // Create Y axis
             this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
             // Style the axis text
-            this.yAxis.selectAll('text').style('font-size', '11px').style('font-weight', '400').style('fill', '#666');
+            this.yAxis
+                .selectAll('text')
+                .style('font-size', '11px')
+                .style('font-weight', '400')
+                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)');
+            // Style all lines in the y-axis (path, ticks)
+            this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
             // Add Y axis label if provided
             if (options.yAxisLabel) {
                 const labelX = -this.height / 2;
@@ -330,7 +341,7 @@ class AXBarChartComponent {
                     .attr('y', labelY)
                     .style('font-size', '13px')
                     .style('font-weight', '500')
-                    .style('fill', '#555')
+                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
                     .text(options.yAxisLabel);
             }
         }
@@ -343,14 +354,19 @@ class AXBarChartComponent {
                 .axisLeft(this.yScale)
                 .tickSize(-this.width)
                 .tickFormat(() => ''))
-                .selectAll('.tick')
-                .style('color', 'rgb(153 153 153 / 30%)'); // Add gray color to ticks
+                .selectAll('line')
+                .style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))')
+                .style('stroke-opacity', 0.2);
+            // Remove unneeded elements from grid
+            this.chart.select('.ax-bar-chart-grid').selectAll('path, text').remove();
         }
     }
     /**
      * Renders the bars with animations
      */
     renderBars(data) {
+        // Reset animation state
+        this._initialAnimationComplete.set(false);
         // Get corner radius from options
         const radius = this.effectiveOptions().cornerRadius;
         // Get animation options
@@ -377,52 +393,61 @@ class AXBarChartComponent {
             .attr('rx', radius) // Rounded corners
             .attr('ry', radius) // Rounded corners
             .attr('fill', (d, i) => d.color || AXBarChartColors.getColor(i));
+        // Add data labels if they're enabled
+        if (this.effectiveOptions().showDataLabels !== false) {
+            barGroups
+                .append('text')
+                .attr('class', 'ax-bar-chart-data-label')
+                .attr('text-anchor', 'middle')
+                .attr('x', (d) => this.xScale(d.label) + this.xScale.bandwidth() / 2)
+                .attr('y', this.height) // Start from bottom for animation
+                .style('font-size', 'clamp(8px, 2vmin, 12px)')
+                .style('font-weight', '500')
+                .style('fill', 'rgb(var(--ax-comp-bar-chart-data-labels-color))')
+                .style('opacity', 0) // Start invisible for animation
+                .text((d) => d.value);
+            // Animate data labels
+            barGroups
+                .selectAll('.ax-bar-chart-data-label')
+                .transition()
+                .duration(animationDuration)
+                .delay((d, i) => i * 50 + 100) // Slightly delayed after bar animation
+                .attr('y', (d) => this.yScale(d.value) - 8) // Position above bar
+                .style('opacity', 1)
+                .ease(animationEasing);
+        }
         // Set up event handlers on each group
         barGroups
             .on('mouseenter', (event, d) => {
+            // Only apply hover effects if initial animation is complete
+            if (!this._initialAnimationComplete())
+                return;
             const barEl = this.d3.select(event.currentTarget).select('rect');
-            const currentX = parseFloat(barEl.attr('x'));
-            const currentY = parseFloat(barEl.attr('y'));
-            const currentWidth = parseFloat(barEl.attr('width'));
-            const currentHeight = parseFloat(barEl.attr('height'));
-            // Calculate horizontal center point of the bar
-            const centerX = currentX + currentWidth / 2;
-            // Scale amount (5% larger)
-            const scaleX = 1.05;
-            const scaleY = 1.05;
-            // Calculate new dimensions with scaling
-            const newWidth = currentWidth * scaleX;
-            const newHeight = currentHeight * scaleY;
-            // Calculate new position:
-            // - Horizontally center-aligned
-            // - Vertically grow only upward from the bottom (X-axis)
-            const newX = centerX - newWidth / 2;
-            // The bottom of the bar stays at the same position (aligned with x-axis)
-            const newY = currentY - (newHeight - currentHeight);
-            // Apply the new position and size
-            barEl
-                .transition()
-                .duration(200)
-                .attr('x', newX)
-                .attr('y', newY)
-                .attr('width', newWidth)
-                .attr('height', newHeight);
+            // Standard hover effect - darken the bar slightly and add a subtle shadow
+            barEl.transition().duration(150).style('filter', 'brightness(0.9) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
             this.handleBarHover(event, d);
         })
-            .on('mousemove', (event) => this.updateTooltipPosition(event))
+            .on('mousemove', (event) => {
+            // Only update tooltip if initial animation is complete
+            if (this._initialAnimationComplete()) {
+                this.updateTooltipPosition(event);
+            }
+        })
             .on('mouseleave', (event, d) => {
+            // Only apply hover effects if initial animation is complete
+            if (!this._initialAnimationComplete())
+                return;
             const barEl = this.d3.select(event.currentTarget).select('rect');
-            // Restore original position and size
-            barEl
-                .transition()
-                .duration(200)
-                .attr('x', (d) => this.xScale(d.label))
-                .attr('y', (d) => this.yScale(d.value))
-                .attr('width', this.xScale.bandwidth())
-                .attr('height', (d) => this.height - this.yScale(d.value));
+            // Remove hover effect
+            barEl.transition().duration(150).style('filter', null);
             this._tooltipVisible.set(false);
         })
-            .on('click', (event, d) => this.handleBarClick(event, d));
+            .on('click', (event, d) => {
+            // Only trigger click events if initial animation is complete
+            if (this._initialAnimationComplete()) {
+                this.handleBarClick(event, d);
+            }
+        });
         // Add animation
         bars
             .transition()
@@ -430,7 +455,12 @@ class AXBarChartComponent {
             .delay((d, i) => i * 50) // Stagger each bar animation
             .attr('y', (d) => this.yScale(d.value))
             .attr('height', (d) => this.height - this.yScale(d.value))
-            .ease(animationEasing); // Use the configured easing function
+            .ease(animationEasing) // Use the configured easing function
+            .end() // Wait for all animations to complete
+            .then(() => {
+            // Mark animation as complete to enable hover effects
+            this._initialAnimationComplete.set(true);
+        });
     }
     /**
      * Gets the appropriate D3 easing function based on the option string
@@ -514,7 +544,7 @@ class AXBarChartComponent {
      * Handles bar click event
      */
     handleBarClick(event, datum) {
-        this.barClick.emit({ item: datum, event });
+        this.barClick.emit({ item: datum, event: { nativeEvent: event, sender: this } });
     }
     /**
      * Shows a message when no data is available
@@ -530,13 +560,13 @@ class AXBarChartComponent {
             .style('flex-direction', 'column')
             .style('align-items', 'center')
             .style('justify-content', 'center')
-            .style('text-align', 'center');
+            .style('text-align', 'center')
+            .style('background-color', 'rgb(var(--ax-comp-bar-chart-bg-color))');
         // Add an icon
         messageContainer
             .append('div')
             .attr('class', 'ax-bar-chart-no-data-icon')
             .style('margin-bottom', '10px')
-            .style('color', 'var(--ax-text-muted, #999)')
             .html('<i class="fa-light fa-chart-bar fa-2x"></i>');
         // Add text message
         messageContainer
@@ -544,15 +574,14 @@ class AXBarChartComponent {
             .attr('class', 'ax-bar-chart-no-data-text')
             .style('font-size', '16px')
             .style('font-weight', '600')
-            .style('color', 'var(--ax-text-color, #333)')
             .text('No data available');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared 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: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-bar-chart-bar{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.ax-bar-chart-bar:hover{filter:brightness(.9);transform:translateY(-3px)}.ax-bar-chart-axis-x path,.ax-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.ax-bar-chart-axis-x line,.ax-bar-chart-axis-y line,.ax-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.ax-bar-chart-grid path{stroke-width:0}.ax-bar-chart-axis-x text,.ax-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.ax-bar-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.ax-bar-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.ax-bar-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared 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: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: var(--ax-sys-color-lightest-surface)}.ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}.ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-bar-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}.ax-bar-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.6)}.ax-bar-chart-no-data-text{font-weight:600;color:rgb(var(--ax-sys-color-on-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', standalone: true, imports: [CommonModule, AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared 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: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-bar-chart-bar{transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.ax-bar-chart-bar:hover{filter:brightness(.9);transform:translateY(-3px)}.ax-bar-chart-axis-x path,.ax-bar-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.ax-bar-chart-axis-x line,.ax-bar-chart-axis-y line,.ax-bar-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.ax-bar-chart-grid path{stroke-width:0}.ax-bar-chart-axis-x text,.ax-bar-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:clamp(8px,2vmin,12px)}.ax-bar-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.ax-bar-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.ax-bar-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" #chartContainer>\n  <!-- Shared 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: ["ax-bar-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: var(--ax-sys-color-lightest-surface)}.ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}.ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-bar-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(var(--ax-comp-bar-chart-bg-color))}.ax-bar-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.6)}.ax-bar-chart-no-data-text{font-weight:600;color:rgb(var(--ax-sys-color-on-lightest-surface))}\n"] }]
         }], ctorParameters: () => [] });
 
 /**