@porscheinformatik/clr-addons 21.2.0 → 21.3.1

package/fesm2022/porscheinformatik-clr-addons-charts.mjs

@@ -19,11 +19,12 @@ import { CommonModule, DecimalPipe } from '@angular/common';
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-const TOO_MANY_ITEMS_MESSAGE = 'too many items';
-const TOO_MANY_ITEMS_GROUPED_MESSAGE = 'too many items';
+const TOO_MANY_ITEMS_MESSAGE = 'showing {{showingAmount}} of {{totalAmount}} items';
+const TOO_MANY_ITEMS_GROUPED_MESSAGE = 'showing {{showingAmount}} of {{totalAmount}} groups';
 const TOO_MANY_ITEMS_ALERT_TYPE = 'warning';
 const NO_ITEMS_MESSAGE = 'no items';
 const NO_ITEMS_ALERT_TYPE = 'info';
+const ALL_ITEMS_ZERO_MESSAGE = 'all chart values are 0';
 
 /**
  * Converts a chart color value to a CSS-compatible string.
@@ -639,10 +640,12 @@ class BarChartComponent extends ChartBase {
         this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
         this.tooManyItemsMessage = input(TOO_MANY_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "tooManyItemsMessage" }] : /* istanbul ignore next */ []));
         this.tooManyItemsGroupedMessage = input(TOO_MANY_ITEMS_GROUPED_MESSAGE, ...(ngDevMode ? [{ debugName: "tooManyItemsGroupedMessage" }] : /* istanbul ignore next */ []));
+        this.allValuesZeroMessage = input(ALL_ITEMS_ZERO_MESSAGE, ...(ngDevMode ? [{ debugName: "allValuesZeroMessage" }] : /* istanbul ignore next */ []));
         this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
         this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
         this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
         this.exportFilename = input('bar-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
+        this.allValuesZero = computed(() => !!this.data()?.length && this.data().every(d => d.value === 0), ...(ngDevMode ? [{ debugName: "allValuesZero" }] : /* istanbul ignore next */ []));
         /** Optional label rendered below the X axis. */
         this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
         /** Optional label rendered rotated to the left of the Y axis. */
@@ -680,14 +683,17 @@ class BarChartComponent extends ChartBase {
             if (this.loading()) {
                 return undefined;
             }
+            if (this.allValuesZero()) {
+                return [this.allValuesZeroMessage(), NO_ITEMS_ALERT_TYPE];
+            }
             if (!this.showingBarCount()) {
                 return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
             }
             else if (this.totalBarCount() !== this.showingBarCount()) {
-                return [
-                    this.stacks() ? this.tooManyItemsGroupedMessage() : this.tooManyItemsMessage(),
-                    TOO_MANY_ITEMS_ALERT_TYPE,
-                ];
+                const message = (this.stacks() ? this.tooManyItemsGroupedMessage() : this.tooManyItemsMessage())
+                    .replace('{{totalAmount}}', String(this.totalBarCount()))
+                    .replace('{{showingAmount}}', String(this.showingBarCount()));
+                return [message, TOO_MANY_ITEMS_ALERT_TYPE];
             }
             return undefined;
         }, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
@@ -922,14 +928,18 @@ class BarChartComponent extends ChartBase {
         });
     }
     addTextClickHandler(g) {
-        // no click handler for labels in stacked charts
-        if (this.stacks()?.length) {
-            return;
-        }
         g.on('click', (event, d) => {
             event.stopPropagation();
-            // Note: In non-stacked charts, the stackKey is equal to the key, so this works - but the logic is confusing [VU3REQ-4790]
-            this.openTooltipByKey(d.stackKey);
+            if (this.stacks()?.length) {
+                //For stacked charts find the first item that belongs to that stack group and use it's key
+                const firstInStack = this.slicedDataPoints().find(item => item.stackKey === d.stackKey);
+                if (firstInStack) {
+                    this.openTooltipByKey(firstInStack.key);
+                }
+            }
+            else {
+                this.openTooltipByKey(d.stackKey);
+            }
         });
     }
     openTooltipByKey(key) {
@@ -1033,12 +1043,12 @@ class BarChartComponent extends ChartBase {
         return Math.floor(height / BarChartComponent.HORIZONTAL_BAR_MIN_HEIGHT_PX);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BarChartComponent, isStandalone: false, selector: "clr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, stacks: { classPropertyName: "stacks", publicName: "stacks", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, barAreaSizePx: { classPropertyName: "barAreaSizePx", publicName: "barAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOf: { classPropertyName: "tooltipPercentOf", publicName: "tooltipPercentOf", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsMessage: { classPropertyName: "tooManyItemsMessage", publicName: "tooManyItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BarChartComponent, isStandalone: false, selector: "clr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, stacks: { classPropertyName: "stacks", publicName: "stacks", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, barAreaSizePx: { classPropertyName: "barAreaSizePx", publicName: "barAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOf: { classPropertyName: "tooltipPercentOf", publicName: "tooltipPercentOf", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsMessage: { classPropertyName: "tooManyItemsMessage", publicName: "tooManyItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, allValuesZeroMessage: { classPropertyName: "allValuesZeroMessage", publicName: "allValuesZeroMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length || allValuesZero()) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], stacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacks", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], barAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barAreaSizePx", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], tooltipPercentOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOf", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooManyItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsMessage", required: false }] }], tooManyItemsGroupedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsGroupedMessage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
+            args: [{ selector: 'clr-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\">\n  <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n    <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n    @if (tooltipPosition()) {\n    <cng-chart-tooltip\n      [tooltipPosition]=\"tooltipPosition()\"\n      [tooltipOrientation]=\"tooltipOrientation()\"\n      [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n      (tooltipClosed)=\"resetTooltip()\"\n      (cngOutsideClick)=\"resetTooltip()\"\n      (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n    >\n      <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n      <p class=\"mt-0\">\n        {{ (100 * tooltipValue()) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n      </p>\n\n      @if (stacks()) { @for (slice of selectedStackSlices(); track slice.key) {\n      <div class=\"mt-0-5 d-flex\">\n        <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n        <strong>{{ slice.fullLabel || slice.label }}:&nbsp;</strong>\n        <span\n          class=\"has-more-info\"\n          (click)=\"\n                  valueClicked.emit({\n                    key: [slice.key],\n                    label: slice.fullLabel || slice.label,\n                    value: slice.value,\n                  })\n                \"\n        >\n          {{ slice.value }}\n        </span>\n      </div>\n      <p class=\"mt-0-25 percentage-info\">\n        {{ (100 * slice.value) / total() | number : '1.0-2' }}%\n        {{ tooltipPercentOfTotal() }}\n        {{ slice.percentageOfStack | number : '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n      </p>\n      } }\n    </cng-chart-tooltip>\n    } @if (loading() || !data()?.length || allValuesZero()) {\n    <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n    } @if (alertMessageAndType()) {\n    <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n    }\n  </div>\n\n  @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n  <cng-chart-legend [items]=\"legendItems()\" />\n  } @if (showExportButton() && !loading() && data()?.length) {\n  <cng-chart-export-button\n    [svgRef]=\"svgElement()\"\n    [filename]=\"exportFilename()\"\n    [buttonTitle]=\"exportButtonTitle()\"\n    [legendItems]=\"legendItems()\"\n  />\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], stacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacks", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], barAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barAreaSizePx", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], tooltipPercentOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOf", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooManyItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsMessage", required: false }] }], tooManyItemsGroupedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsGroupedMessage", required: false }] }], allValuesZeroMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValuesZeroMessage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
 
 /*
  * Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.