@acorex/charts 21.1.0-next.2 → 22.0.0-next.1

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

@@ -1,7 +1,7 @@
 import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, mergeChartMessages, resolveBarWidthFraction, formatLargeNumber, getEasingFunction, renderChartEmptyMessage, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ViewEncapsulation, Component } from '@angular/core';
 
 const AXBarChartDefaultConfig = {
     showXAxis: true,
@@ -41,14 +41,17 @@ function barChartConfig(config = {}) {
 class AXBarChartComponent extends AXChartComponent {
     // Inputs
     /** Chart data input */
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     /** Chart options input */
-    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    options = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     // Outputs
     /** Emitted when a bar is clicked */
     barClick = output();
     // Chart container reference
-    chartContainerEl = viewChild.required('chartContainer');
+    chartContainerEl = viewChild.required('chartContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chartContainerEl" }] : /* istanbul ignore next */ []));
     // D3 reference - loaded asynchronously
     d3;
     // Chart elements - using proper D3 types
@@ -102,21 +105,27 @@ class AXBarChartComponent extends AXChartComponent {
     MANY_ITEMS_THRESHOLD = 20;
     VERY_MANY_ITEMS_THRESHOLD = 50;
     // Animation state
-    _initialAnimationComplete = signal(false, ...(ngDevMode ? [{ debugName: "_initialAnimationComplete" }] : /* istanbul ignore next */ []));
+    _initialAnimationComplete = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialAnimationComplete" }] : /* istanbul ignore next */ []));
     // Tooltip state
-    _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : /* istanbul ignore next */ []));
-    _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
+    _tooltipVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : /* istanbul ignore next */ []));
+    _tooltipPosition = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
     _tooltipData = signal({
         title: '',
         value: '0',
         percentage: '0%',
         color: '',
-    }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipData" }] : /* istanbul ignore next */ []));
     _tooltipRafId = null;
     _pendingTooltipCoords = null;
     // Signals for component state
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
-    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
+    _initialized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
+    _rendered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
     // Tooltip accessors
     tooltipVisible = this._tooltipVisible.asReadonly();
     tooltipPosition = this._tooltipPosition.asReadonly();
@@ -128,9 +137,11 @@ class AXBarChartComponent extends AXChartComponent {
     // Inject AXPlatform
     // Removed unused AXPlatform injection
     // Configuration with defaults
-    effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
+    effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
     // Messages with defaults
-    effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : /* istanbul ignore next */ []));
+    effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : /* istanbul ignore next */ []));
     // Track hidden bars and series
     hiddenBars = new Set();
     hiddenSeries = new Set();
@@ -138,14 +149,16 @@ class AXBarChartComponent extends AXChartComponent {
     isClusteredMode = computed(() => {
         const value = this.data();
         return Array.isArray(value) && value.length > 0 && 'chartData' in value[0];
-    }, ...(ngDevMode ? [{ debugName: "isClusteredMode" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isClusteredMode" }] : /* istanbul ignore next */ []));
     visibleData = computed(() => {
         const value = this.data() || [];
         if (this.isClusteredMode()) {
             return value;
         }
         return value.filter((d) => !this.hiddenBars.has(d.id));
-    }, ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
     hasVisibleData = computed(() => {
         const value = this.data();
         if (!Array.isArray(value) || value.length === 0)
@@ -157,7 +170,8 @@ class AXBarChartComponent extends AXChartComponent {
             return groups.some((g) => visibleSeries.some((label) => !!g.chartData.find((item) => item.label === label)));
         }
         return value.some((d) => !this.hiddenBars.has(d.id));
-    }, ...(ngDevMode ? [{ debugName: "hasVisibleData" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasVisibleData" }] : /* istanbul ignore next */ []));
     // Type guard helper
     isClusteredData(value) {
         return Array.isArray(value) && value.length > 0 && 'chartData' in value[0];
@@ -221,7 +235,7 @@ class AXBarChartComponent extends AXChartComponent {
         const visibleSingleData = isClustered ? [] : this.visibleData();
         const groupedData = isClustered ? inputValue : [];
         // Clear existing chart SVG and messages (do not remove tooltip component)
-        this.d3.select(containerElement).selectAll('svg, .ax-chart-message-container').remove();
+        this.clearChartArea(containerElement);
         // Early return if no data
         if (!Array.isArray(inputValue) || inputValue.length === 0) {
             this.showNoDataMessage(containerElement);
@@ -264,7 +278,7 @@ class AXBarChartComponent extends AXChartComponent {
         this._pendingTooltipCoords = null;
         const container = this.chartContainerEl()?.nativeElement;
         if (container) {
-            this.d3?.select(container).selectAll('svg, .ax-chart-message-container').remove();
+            this.clearChartArea(container);
         }
         this.svg = undefined;
         this.chart = undefined;
@@ -920,24 +934,35 @@ class AXBarChartComponent extends AXChartComponent {
                 percentage: `${percentage}%`,
                 color: color,
             });
-            this.updateTooltipPosition(event);
             this._tooltipVisible.set(true);
+            this.updateTooltipPosition(event);
         }
     }
     updateTooltipPosition(event) {
         this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
         if (this._tooltipRafId != null)
             return;
+        this.scheduleTooltipPosition(0);
+    }
+    scheduleTooltipPosition(attempt) {
         this._tooltipRafId = requestAnimationFrame(() => {
-            this._tooltipRafId = null;
             const coords = this._pendingTooltipCoords;
-            if (!coords)
+            if (!coords) {
+                this._tooltipRafId = null;
                 return;
+            }
             const containerEl = this.chartContainerEl()?.nativeElement;
-            if (!containerEl)
+            if (!containerEl) {
+                this._tooltipRafId = null;
                 return;
-            const containerRect = containerEl.getBoundingClientRect();
+            }
             const tooltipEl = containerEl.querySelector('.chart-tooltip');
+            if (!tooltipEl && this._tooltipVisible() && attempt < 3) {
+                this.scheduleTooltipPosition(attempt + 1);
+                return;
+            }
+            this._tooltipRafId = null;
+            const containerRect = containerEl.getBoundingClientRect();
             const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
             const pos = this.computeEnhancedTooltipPosition(containerRect, tooltipRect, coords.x, coords.y);
             this._tooltipPosition.set(pos);
@@ -947,51 +972,42 @@ class AXBarChartComponent extends AXChartComponent {
      * Enhanced tooltip positioning that considers chart boundaries and prevents overflow
      */
     computeEnhancedTooltipPosition(containerRect, tooltipRect, clientX, clientY) {
-        const cursorX = clientX - containerRect.left;
-        const cursorY = clientY - containerRect.top;
+        const containerLeft = containerRect.left;
+        const containerTop = containerRect.top;
+        const containerRight = containerRect.right;
+        const containerBottom = containerRect.bottom;
         if (!tooltipRect) {
-            // Default positioning when tooltip dimensions are unknown
             return {
-                x: Math.min(cursorX + this.TOOLTIP_GAP, containerRect.width - this.TOOLTIP_GAP),
-                y: Math.max(this.TOOLTIP_GAP, Math.min(cursorY, containerRect.height - this.TOOLTIP_GAP)),
+                x: Math.min(clientX + this.TOOLTIP_GAP, containerRight - this.TOOLTIP_GAP),
+                y: Math.max(containerTop + this.TOOLTIP_GAP, Math.min(clientY + this.TOOLTIP_GAP, containerBottom - this.TOOLTIP_GAP)),
             };
         }
-        // Calculate available space in each direction
-        const spaceRight = containerRect.width - cursorX;
-        const spaceLeft = cursorX;
-        const spaceBelow = containerRect.height - cursorY;
-        const spaceAbove = cursorY;
-        // Determine best horizontal position
+        const spaceRight = containerRight - clientX;
+        const spaceLeft = clientX - containerLeft;
+        const spaceBelow = containerBottom - clientY;
+        const spaceAbove = clientY - containerTop;
         let x;
         if (spaceRight >= tooltipRect.width + this.TOOLTIP_GAP) {
-            // Position to the right of cursor
-            x = cursorX + this.TOOLTIP_GAP;
+            x = clientX + this.TOOLTIP_GAP;
         }
         else if (spaceLeft >= tooltipRect.width + this.TOOLTIP_GAP) {
-            // Position to the left of cursor
-            x = cursorX - tooltipRect.width - this.TOOLTIP_GAP;
+            x = clientX - tooltipRect.width - this.TOOLTIP_GAP;
         }
         else {
-            // Center horizontally if neither side has enough space
-            x = Math.max(this.TOOLTIP_GAP, Math.min((containerRect.width - tooltipRect.width) / 2, containerRect.width - tooltipRect.width - this.TOOLTIP_GAP));
+            x = Math.max(containerLeft + this.TOOLTIP_GAP, Math.min(containerLeft + (containerRect.width - tooltipRect.width) / 2, containerRight - tooltipRect.width - this.TOOLTIP_GAP));
         }
-        // Calculate best vertical position
         let y;
         if (spaceBelow >= tooltipRect.height + this.TOOLTIP_GAP) {
-            // Position below cursor
-            y = cursorY + this.TOOLTIP_GAP;
+            y = clientY + this.TOOLTIP_GAP;
         }
         else if (spaceAbove >= tooltipRect.height + this.TOOLTIP_GAP) {
-            // Position above cursor
-            y = cursorY - tooltipRect.height - this.TOOLTIP_GAP;
+            y = clientY - tooltipRect.height - this.TOOLTIP_GAP;
         }
         else {
-            // Center vertically if neither direction has enough space
-            y = Math.max(this.TOOLTIP_GAP, Math.min((containerRect.height - tooltipRect.height) / 2, containerRect.height - tooltipRect.height - this.TOOLTIP_GAP));
+            y = Math.max(containerTop + this.TOOLTIP_GAP, Math.min(containerTop + (containerRect.height - tooltipRect.height) / 2, containerBottom - tooltipRect.height - this.TOOLTIP_GAP));
         }
-        // Ensure tooltip stays within container bounds
-        x = Math.max(this.TOOLTIP_GAP, Math.min(x, containerRect.width - tooltipRect.width - this.TOOLTIP_GAP));
-        y = Math.max(this.TOOLTIP_GAP, Math.min(y, containerRect.height - tooltipRect.height - this.TOOLTIP_GAP));
+        x = Math.max(containerLeft + this.TOOLTIP_GAP, Math.min(x, containerRight - tooltipRect.width - this.TOOLTIP_GAP));
+        y = Math.max(containerTop + this.TOOLTIP_GAP, Math.min(y, containerBottom - tooltipRect.height - this.TOOLTIP_GAP));
         return { x, y };
     }
     /**
@@ -1176,10 +1192,7 @@ class AXBarChartComponent extends AXChartComponent {
                 this.hiddenBars.delete(id);
                 if (wasAllHidden) {
                     if (this.chartContainerEl()?.nativeElement) {
-                        this.d3
-                            ?.select(this.chartContainerEl().nativeElement)
-                            .selectAll('svg, .ax-chart-message-container')
-                            .remove();
+                        this.clearChartArea(this.chartContainerEl().nativeElement);
                         setTimeout(() => {
                             this.createChart();
                         }, 0);
@@ -1204,7 +1217,7 @@ class AXBarChartComponent extends AXChartComponent {
             this.hiddenSeries.delete(id);
             if (wasAllHidden) {
                 if (this.chartContainerEl()?.nativeElement) {
-                    this.d3?.select(this.chartContainerEl().nativeElement).selectAll('svg, .ax-chart-message-container').remove();
+                    this.clearChartArea(this.chartContainerEl().nativeElement);
                     setTimeout(() => {
                         this.createChart();
                     }, 0);
@@ -1225,6 +1238,8 @@ class AXBarChartComponent extends AXChartComponent {
         return this.chartContainerEl()?.nativeElement ?? null;
     }
     clearChartArea(containerElement) {
+        if (!this.d3)
+            return;
         this.d3.select(containerElement).selectAll('svg, .ax-chart-empty, .ax-chart-message-container').remove();
     }
     /**
@@ -1313,12 +1328,12 @@ class AXBarChartComponent extends AXChartComponent {
             this.createXAxisTitle(axesGroup, options.xAxisLabel, tickAreaHeight, gapBelowTicks);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-bar-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--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: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{@apply block h-full max-h-full w-full max-w-full;}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{@apply pointer-events-none select-none;}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", 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\" role=\"img\" #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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-bar-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--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: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{@apply block h-full max-h-full w-full max-w-full;}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{@apply pointer-events-none select-none;}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}\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: "21.2.9", ngImport: i0, type: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" role=\"img\" #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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-bar-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--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: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{@apply block h-full max-h-full w-full max-w-full;}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{@apply pointer-events-none select-none;}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}\n"] }]
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], template: "<div class=\"ax-bar-chart\" role=\"img\" #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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-bar-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--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: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{@apply block h-full max-h-full w-full max-w-full;}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{@apply pointer-events-none select-none;}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}\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 }] }], barClick: [{ type: i0.Output, args: ["barClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**