@esfaenza/es-charts 20.3.11 → 20.3.13

package/fesm2022/esfaenza-es-charts.mjs

@@ -3,6 +3,7 @@ import { EventEmitter, ContentChild, Output, Input, ChangeDetectionStrategy, Com
 import * as i4 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as am5 from '@amcharts/amcharts5';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
 import * as am5xy from '@amcharts/amcharts5/xy';
 import am5locales_it_IT from '@amcharts/amcharts5/locales/it_IT';
 import * as am5percent from '@amcharts/amcharts5/percent';
@@ -317,10 +318,10 @@ class PageChartSelector {
                 this.currentindex--;
         }, this.BrowseDelayMs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: PageChartSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: PageChartSelector, isStandalone: false, selector: "chart-pager", inputs: { Items: "Items", Dtos: "Dtos", BrowseDelayMs: "BrowseDelayMs", StartIndex: "StartIndex" }, outputs: { onPageChange: "onPageChange" }, queries: [{ propertyName: "headerInner_tr", first: true, predicate: ["header_inner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos)?.length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos)?.length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>", styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:currentcolor none medium}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PageChartSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: PageChartSelector, isStandalone: false, selector: "chart-pager", inputs: { Items: "Items", Dtos: "Dtos", BrowseDelayMs: "BrowseDelayMs", StartIndex: "StartIndex" }, outputs: { onPageChange: "onPageChange" }, queries: [{ propertyName: "headerInner_tr", first: true, predicate: ["header_inner"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos)?.length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos)?.length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>", styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:currentcolor none medium}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: PageChartSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PageChartSelector, decorators: [{
             type: Component,
             args: [{ selector: "chart-pager", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"(Items || Dtos) && (Items || Dtos).length > 0\" class=\"pcs-no-selection\">\r\n    <div class=\"pcs-button pcs-backward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"currentpage != 1 && Previous(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\"  [style.cursor]=\"currentpage == 1 ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-left\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div class=\"pcs-infos\">\r\n        <ng-container *ngIf=\"headerInner_tr\">\r\n            <ng-container *ngTemplateOutlet=\"headerInner_tr; context : {$implicit: (Items || Dtos)[currentpage - 1]}\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"pcs-button pcs-forward\">\r\n        <svg class=\"pcs-svg-header\">\r\n            <g class=\"pcs-svg-button-container\" role=\"button\" (click)=\"(Items || Dtos)?.length != currentpage && Next(); $event.stopPropagation(); $event.preventDefault();\">\r\n                <!--Pulsante e freccettina all'interno-->\r\n                <g class=\"pcs-svg-button\" [style.cursor]=\"(Items || Dtos)?.length == currentpage ? 'not-allowed' : 'pointer'\"><path d=\"M3,0 L53.027,0 a3,3 0 0 1 3,3 L56.027,36.817 a3,3 0 0 1 -3,3 L3,39.817 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z\"></path></g>\r\n                <g class=\"pcs-svg-arrow pcs-svg-arrow-right\"><path d=\"M26,14H10l5.17-6.79A2,2,0,0,0,12,4.79l-7.62,10a2,2,0,0,0,0,2.42l7.62,10a2,2,0,0,0,3.18-2.42L10,18H26a2,2,0,0,0,0-4Z\"></path></g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n    <div style=\"clear: both;\"></div>\r\n</div>", styles: [".pcs-button{width:60px}.pcs-forward{float:right;text-align:end}.pcs-backward{float:left}.pcs-svg-header{width:57px;height:40px}.pcs-svg-button-container{outline:currentcolor none medium}.pcs-svg-arrow{pointer-events:none;fill:#555}.pcs-svg-arrow-right{transform:translate(44px,36px) rotate(180deg)}.pcs-svg-arrow-left{transform:translate(13px,4px)}.pcs-svg-button{fill:#d9d9d9;stroke:#fff;fill-opacity:1;stroke-opacity:1}.pcs-svg-button:hover{fill:#a3a3a3;cursor:pointer}.pcs-infos{width:calc(100% - 120px);height:44px;float:left}.pcs-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}\n"] }]
         }], propDecorators: { Items: [{
@@ -561,10 +562,10 @@ class ChartLoader {
         if (this.logs)
             console.log("@esfaenza/es-charts: " + text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ChartLoader, deps: [{ token: ESC_DEBUG_MODE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ChartLoader }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartLoader, deps: [{ token: ESC_DEBUG_MODE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartLoader }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ChartLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartLoader, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -649,10 +650,10 @@ class ChartDispatcher {
         if (this.logs)
             console.log("@esfaenza/es-charts: " + text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ChartDispatcher, deps: [{ token: ESC_DEBUG_MODE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ChartDispatcher }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartDispatcher, deps: [{ token: ESC_DEBUG_MODE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartDispatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ChartDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ChartDispatcher, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -944,10 +945,10 @@ class BaseChartComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: BaseChartComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: BaseChartComponent, isStandalone: true, inputs: { XTitle: "XTitle", YTitle: "YTitle", Settings: "Settings", Legend: "Legend", LegendPosition: "LegendPosition", Timeline: "Timeline", name: "name", Animations: "Animations", Theme: "Theme", Locale: "Locale", HideSeriesOnLabelClick: "HideSeriesOnLabelClick", MinGridDistance: "MinGridDistance", AdaptLabelSizeAndOrientation: "AdaptLabelSizeAndOrientation", LegendPadding: "LegendPadding", DataDtos: "DataDtos", DataDtoStartIndex: "DataDtoStartIndex", DataRetrieve: "DataRetrieve", BrowseDelayMs: "BrowseDelayMs" }, outputs: { onSelectionChanged: "onSelectionChanged", onSeriesClicked: "onSeriesClicked", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", chartLoaded: "chartLoaded" }, queries: [{ propertyName: "header_tr", first: true, predicate: ["header"], descendants: true }, { propertyName: "loading_template", first: true, predicate: ["loading"], descendants: true }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BaseChartComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BaseChartComponent, isStandalone: true, inputs: { XTitle: "XTitle", YTitle: "YTitle", Settings: "Settings", Legend: "Legend", LegendPosition: "LegendPosition", Timeline: "Timeline", name: "name", Animations: "Animations", Theme: "Theme", Locale: "Locale", HideSeriesOnLabelClick: "HideSeriesOnLabelClick", MinGridDistance: "MinGridDistance", AdaptLabelSizeAndOrientation: "AdaptLabelSizeAndOrientation", LegendPadding: "LegendPadding", DataDtos: "DataDtos", DataDtoStartIndex: "DataDtoStartIndex", DataRetrieve: "DataRetrieve", BrowseDelayMs: "BrowseDelayMs" }, outputs: { onSelectionChanged: "onSelectionChanged", onSeriesClicked: "onSeriesClicked", onLoadStart: "onLoadStart", onLoadEnd: "onLoadEnd", chartLoaded: "chartLoaded" }, queries: [{ propertyName: "header_tr", first: true, predicate: ["header"], descendants: true }, { propertyName: "loading_template", first: true, predicate: ["loading"], descendants: true }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: BaseChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BaseChartComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Object }, { type: i0.NgZone }, { type: ChartLoader }, { type: ChartDispatcher }, { type: undefined }, { type: undefined }, { type: undefined }, { type: undefined }], propDecorators: { XTitle: [{
                 type: Input
@@ -1003,6 +1004,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Palette storica "Spirited Away" ereditata da amCharts4.
+ *
+ * In amCharts4 il tema di default della libreria ('spiritedaway') veniva applicato globalmente
+ * (am4core.useTheme) e impostava questa esatta lista di colori sul ColorSet di ogni grafico.
+ * Le serie/colonne prive di un colore esplicito pescavano da qui in ordine.
+ *
+ * Con la migrazione ad amCharts5 il sistema dei temi e stato disabilitato, percio i grafici
+ * mostravano la palette di default di amCharts5. Questa costante ripristina i colori originali.
+ *
+ * Valori estratti dal tema Spirited di @amcharts/amcharts4@4.10.40
+ * (.internal/themes/spiritedaway.js, "Color set from Spirited away movie").
+ */
+const SPIRITED_PALETTE = [
+    0x65738e,
+    0x766c91,
+    0x78566f,
+    0x523b58,
+    0x813b3d,
+    0xbc5e52,
+    0xee8b78,
+    0xf9c885,
+    0xeba05c,
+    0x9b5134
+];
+/**
+ * Crea un ColorSet con la palette storica {@link SPIRITED_PALETTE} da applicare a un grafico
+ * tramite `chart.set("colors", createSpiritedColorSet(root))`.
+ *
+ * `reuse: true` replica il comportamento del tema amCharts4: quando le serie superano i colori
+ * disponibili, la palette viene riciclata invece di generare tinte arbitrarie.
+ *
+ * @param {am5.Root} root Root del grafico a cui il ColorSet appartiene
+ * @returns {am5.ColorSet} ColorSet pronto da assegnare al setting "colors" del grafico
+ */
+function createSpiritedColorSet(root) {
+    return am5.ColorSet.new(root, {
+        colors: SPIRITED_PALETTE.map(c => am5.color(c)),
+        reuse: true
+    });
+}
+
+/**
+ * Applica il tema "Animated" di amCharts5 al root del grafico.
+ *
+ * Replica il comportamento della versione amCharts4 della libreria, dove il tema animated veniva applicato
+ * globalmente quando l'input/Setting `Animations` era attivo, fornendo transizioni fluide (zoom, hover,
+ * mostra/nascondi serie, cursore).
+ *
+ * Va invocato subito dopo la creazione del root, prima di costruire il grafico e le serie, in modo che il
+ * tema venga applicato a tutti gli elementi. La comparsa animata iniziale va invece innescata a parte con
+ * le chiamate `appear()` su grafico e serie (in amCharts5 il tema non anima piu automaticamente il primo disegno).
+ *
+ * @param {am5.Root} root Root del grafico
+ */
+function applyAnimatedTheme(root) {
+    root.setThemes([am5themes_Animated.new(root)]);
+}
+
 /**
  * Classe il cui unico scopo e gestire il setup e rendering di un LineChart
  */
@@ -1020,6 +1080,10 @@ class LineChartService {
         this.singleDataSet = false;
         /** @ignore */
         this.mergedData = [];
+        /** Flag "istante finale" corrente, memorizzato per riformattare le date nei refresh */
+        this.currentFinalInstant = true;
+        /** Colori assegnati a ciascuna serie, usati anche per i pallini nel tooltip unificato */
+        this.seriesColors = [];
         //******************** Funzione di throttling per non spammare richieste in caso di animazioni attivate
         //TODO: spostarla in un metodo di utilita (esfaenza/extensions)
         /** @ignore */
@@ -1050,7 +1114,12 @@ class LineChartService {
         this.ChartRoot?.dispose();
         this.ChartRoot = am5.Root.new(settings.Name);
         this.applyLocale(settings);
+        // Tema Animated (transizioni fluide) come nella versione amCharts4, se le animazioni sono attive
+        if (settings.Animations)
+            applyAnimatedTheme(this.ChartRoot);
         this.ChartInstance = this.ChartRoot.container.children.push(am5xy.XYChart.new(this.ChartRoot, {}));
+        // Ripristina la palette storica ereditata da amCharts4 per le serie prive di colore esplicito
+        this.ChartInstance.set("colors", createSpiritedColorSet(this.ChartRoot));
         //#endregion
         // Carico l'Asse Y
         let yRenderer = am5xy.AxisRendererY.new(this.ChartRoot, {});
@@ -1113,15 +1182,23 @@ class LineChartService {
                 centerX: am5.p50
             }));
         }
+        this.currentInterval = interval;
+        this.currentFinalInstant = finalInstant;
         if (this.singleDataSet)
             this.mergedData = this.generateSingleDataset(dataConverted);
+        // Pre-calcolo i colori di tutte le serie prima di crearle: il tooltip unificato mostra un pallino
+        // colorato per ogni serie, quindi ha bisogno dell'intera lista di colori gia al primo createSeries
         let seriesColors = [];
         let defaultIndex = 0;
+        dataConverted.series.forEach(s => {
+            let color = s.color ? am5.color(s.color) : this.ChartInstance.get("colors").getIndex(defaultIndex++);
+            seriesColors.push(color);
+        });
+        this.seriesColors = seriesColors;
         dataConverted.series.forEach((s, index) => {
             let stacked = s.stacked != null && s.stacked != undefined ? s.stacked : (settings?.Stacked ?? false);
             let fill = stacked || (s.fill != null && s.fill != undefined ? s.fill : (settings?.Fill ?? false));
-            let color = s.color ? am5.color(s.color) : this.ChartInstance.get("colors").getIndex(defaultIndex++);
-            seriesColors.push(color);
+            let color = seriesColors[index];
             let series = this.createSeries(s, index, dateAxis, yAxis, settings, gapsAllowed, fill, stacked, color, interval, finalInstant);
             if (showTimeline)
                 this.addSeriesToScrollbar(series, s, index, dateAxis, yAxis, settings, gapsAllowed, color);
@@ -1186,13 +1263,22 @@ class LineChartService {
         //#endregion
         let cursor = am5xy.XYCursor.new(this.ChartRoot, {
             xAxis: dateAxis,
-            yAxis
+            yAxis,
+            // Ripristina lo zoom con click-and-drag su un range di date (comportamento di default di amCharts4,
+            // perso nella migrazione ad amCharts5 dove il behavior di default del cursore e "none").
+            // "zoomX" gestisce nativamente il drag in entrambe le direzioni (destra->sinistra e sinistra->destra)
+            behavior: "zoomX"
         });
         this.ChartInstance.set("cursor", cursor);
         if (this.singleDataSet)
             this.ChartInstance.set("maxTooltipDistance", -1);
         dateAxis.on("start", () => this.emitSelectionChanged(dateAxis, settings));
         dateAxis.on("end", () => this.emitSelectionChanged(dateAxis, settings));
+        // Comparsa animata iniziale di serie e grafico, come nella versione amCharts4
+        if (settings.Animations) {
+            this.ChartInstance.series.each(s => s.appear(1000));
+            this.ChartInstance.appear(1000, 100);
+        }
         return this;
     }
     fixTimeUnit(tu) {
@@ -1254,10 +1340,42 @@ class LineChartService {
                 let singleVal = values[series];
                 item[series] = singleVal;
             }
+            // Data gia formattata col DateService applicativo, cosi il tooltip non dipende dal formatter di amCharts
+            item.dl = this.formatTooltipDate(new Date(item.d), this.currentInterval, this.currentFinalInstant);
             ret.push(item);
         }
         return ret;
     }
+    /**
+     * Formatta una data per il tooltip usando il DateService applicativo, replicando il comportamento di amCharts4.
+     *
+     * Con "istante finale" attivo e intervalli a livello di ora/minuto/secondo la data viene riportata alla fine
+     * del periodo; negli altri casi si usa la formattazione standard (senza orario per intervalli giornalieri o piu ampi).
+     *
+     * @param {Date} date Data da formattare
+     * @param {any} interval Intervallo delle serie (puo essere null)
+     * @param {boolean} finalInstant Indica se le date rappresentano l'istante finale del periodo
+     * @returns {string} Data formattata (es. "25/08/2026 09:29", con o senza orario in base all'intervallo)
+     */
+    formatTooltipDate(date, interval, finalInstant) {
+        if (interval && finalInstant && ["hour", "minute", "second"].includes(interval.timeunit)) {
+            let timepart = null;
+            switch (interval.timeunit) {
+                case "hour":
+                    timepart = 'day';
+                    break;
+                case "minute":
+                    timepart = 'hour';
+                    break;
+                case "second":
+                    timepart = 'minute';
+                    break;
+            }
+            if (timepart)
+                return this.dateExts.adjustDateToFinalInstant(date, timepart, interval.timeunit == "second");
+        }
+        return this.dateExts.getFormatted(date, interval ? ["day", "week", "month", "year"].includes(interval.timeunit) : false, interval ? interval.timeunit == "second" : false);
+    }
     /** @ignore */
     createSeries(source, index, dateAxis, yAxis, settings, gapsAllowed, fill, stacked, color, interval, finalInstant) {
         let SeriesClass = settings?.Step ? am5xy.StepLineSeries : am5xy.LineSeries;
@@ -1282,14 +1400,28 @@ class LineChartService {
             visible: true
         });
         series.set("minBulletDistance", 10);
-        series.set("tooltip", am5.Tooltip.new(this.ChartRoot, {
+        let tooltip = am5.Tooltip.new(this.ChartRoot, {
             pointerOrientation: "vertical",
             labelText: this.getTooltipText(source, index, interval, finalInstant)
-        }));
-        series.get("tooltip")?.get("background")?.setAll({
-            fillOpacity: this.singleDataSet ? 1 : 0.5,
-            fill: this.singleDataSet ? am5.color(0xeeeeee) : undefined
         });
+        series.set("tooltip", tooltip);
+        if (this.singleDataSet) {
+            // Comportamento ereditato da amCharts4: tooltip unico grigio con testo scuro, indipendente dal
+            // colore della serie (altrimenti amCharts5 lo colorerebbe con il colore della serie attiva)
+            tooltip.set("getFillFromSprite", false);
+            tooltip.get("background")?.setAll({
+                fillOpacity: 1,
+                fill: am5.color(0xeeeeee)
+            });
+            // Adapter e non set: amCharts5 reimposta il colore del testo del tooltip ad ogni aggiornamento
+            // interno, quindi un semplice set verrebbe sovrascritto. L'adapter forza sempre il testo scuro.
+            tooltip.label.adapters.add("fill", () => am5.color(0x000000));
+        }
+        else {
+            tooltip.get("background")?.setAll({
+                fillOpacity: 0.5
+            });
+        }
         if (this.singleDataSet)
             series.data.setAll(this.mergedData);
         else
@@ -1302,10 +1434,11 @@ class LineChartService {
     getTooltipText(source, index, interval, finalInstant) {
         if (!this.singleDataSet)
             return source.name ? "{name}: [bold]{valueY}[/]" : "[bold]{valueY}[/]";
-        let text = "[bold]{valueX.formatDate()}[/]\n";
+        let text = "[bold]{dl}[/]\n";
         this.currentSeriesData.series.forEach((serie, sindex) => {
             let uom = serie.uom ? " [fontStyle: italic]" + serie.uom + "[/]" : "";
-            text += (serie.name ? (serie.name + ": ") : "") + "[bold]{v" + sindex + "}[/]" + uom + "\n";
+            let bullet = this.seriesColors[sindex] ? "[" + this.seriesColors[sindex].toString() + "]●[/] " : "";
+            text += bullet + (serie.name ? (serie.name + ": ") : "") + "[bold]{v" + sindex + "}[/]" + uom + "\n";
         });
         return text;
     }
@@ -1412,21 +1545,118 @@ class LineChartService {
     }
     /** @ignore */
     getGridIntervals(baseTimeUnit) {
-        if (baseTimeUnit == "hour") {
-            return [
-                { timeUnit: "hour", count: 1 },
-                { timeUnit: "hour", count: 3 },
-                { timeUnit: "hour", count: 6 },
-                { timeUnit: "hour", count: 12 },
-                { timeUnit: "day", count: 1 },
-                { timeUnit: "day", count: 2 },
-                { timeUnit: "day", count: 3 },
-                { timeUnit: "week", count: 1 },
-                { timeUnit: "month", count: 1 },
-                { timeUnit: "year", count: 1 }
-            ];
-        }
-        return undefined;
+        switch (baseTimeUnit) {
+            case "millisecond":
+                return [
+                    { timeUnit: "millisecond", count: 1 },
+                    { timeUnit: "millisecond", count: 5 },
+                    { timeUnit: "millisecond", count: 10 },
+                    { timeUnit: "millisecond", count: 50 },
+                    { timeUnit: "millisecond", count: 100 },
+                    { timeUnit: "millisecond", count: 500 },
+                    { timeUnit: "second", count: 1 },
+                    { timeUnit: "second", count: 5 },
+                    { timeUnit: "second", count: 10 },
+                    { timeUnit: "second", count: 30 },
+                    { timeUnit: "minute", count: 1 },
+                    { timeUnit: "minute", count: 5 },
+                    { timeUnit: "minute", count: 10 },
+                    { timeUnit: "minute", count: 30 },
+                    { timeUnit: "hour", count: 1 },
+                    { timeUnit: "hour", count: 3 },
+                    { timeUnit: "hour", count: 6 },
+                    { timeUnit: "hour", count: 12 },
+                    { timeUnit: "day", count: 1 },
+                    { timeUnit: "day", count: 2 },
+                    { timeUnit: "day", count: 3 },
+                    { timeUnit: "week", count: 1 },
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "second":
+                return [
+                    { timeUnit: "second", count: 1 },
+                    { timeUnit: "second", count: 5 },
+                    { timeUnit: "second", count: 10 },
+                    { timeUnit: "second", count: 30 },
+                    { timeUnit: "minute", count: 1 },
+                    { timeUnit: "minute", count: 5 },
+                    { timeUnit: "minute", count: 10 },
+                    { timeUnit: "minute", count: 30 },
+                    { timeUnit: "hour", count: 1 },
+                    { timeUnit: "hour", count: 3 },
+                    { timeUnit: "hour", count: 6 },
+                    { timeUnit: "hour", count: 12 },
+                    { timeUnit: "day", count: 1 },
+                    { timeUnit: "day", count: 2 },
+                    { timeUnit: "day", count: 3 },
+                    { timeUnit: "week", count: 1 },
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "minute":
+                return [
+                    { timeUnit: "minute", count: 1 },
+                    { timeUnit: "minute", count: 5 },
+                    { timeUnit: "minute", count: 10 },
+                    { timeUnit: "minute", count: 30 },
+                    { timeUnit: "hour", count: 1 },
+                    { timeUnit: "hour", count: 3 },
+                    { timeUnit: "hour", count: 6 },
+                    { timeUnit: "hour", count: 12 },
+                    { timeUnit: "day", count: 1 },
+                    { timeUnit: "day", count: 2 },
+                    { timeUnit: "day", count: 3 },
+                    { timeUnit: "week", count: 1 },
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "hour":
+                return [
+                    { timeUnit: "hour", count: 1 },
+                    { timeUnit: "hour", count: 3 },
+                    { timeUnit: "hour", count: 6 },
+                    { timeUnit: "hour", count: 12 },
+                    { timeUnit: "day", count: 1 },
+                    { timeUnit: "day", count: 2 },
+                    { timeUnit: "day", count: 3 },
+                    { timeUnit: "week", count: 1 },
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "day":
+                return [
+                    { timeUnit: "day", count: 1 },
+                    { timeUnit: "day", count: 2 },
+                    { timeUnit: "day", count: 3 },
+                    { timeUnit: "week", count: 1 },
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "week":
+                return [
+                    { timeUnit: "week", count: 1 },
+                    { timeUnit: "week", count: 2 },
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "month", count: 3 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "month":
+                return [
+                    { timeUnit: "month", count: 1 },
+                    { timeUnit: "month", count: 2 },
+                    { timeUnit: "month", count: 3 },
+                    { timeUnit: "month", count: 6 },
+                    { timeUnit: "year", count: 1 }
+                ];
+            case "year":
+                return [
+                    { timeUnit: "year", count: 1 },
+                    { timeUnit: "year", count: 2 },
+                    { timeUnit: "year", count: 5 },
+                    { timeUnit: "year", count: 10 }
+                ];
+        }
     }
     /** @ignore */
     getTooltipDateFormat(baseTimeUnit) {
@@ -1595,6 +1825,11 @@ class PieChartService {
             layout: this.ChartRoot.verticalLayout
         }));
         this.ChartInstance = ChartContainer.children.push(am5percent.PieChart.new(this.ChartRoot, {}));
+        // Ripristina la palette storica ereditata da amCharts4 per le fette prive di colore esplicito
+        this.ChartInstance.set("colors", createSpiritedColorSet(this.ChartRoot));
+        // Tema Animated (transizioni fluide) come nella versione amCharts4, se le animazioni sono attive
+        if (settings.Animations)
+            applyAnimatedTheme(this.ChartRoot);
         //#endregion
         // Raggio Torta
         // In am4 non c'era un modo automatico di calcolare il raggio sulle dimensioni del grafico, quindi si era fatto
@@ -1763,6 +1998,11 @@ class PieChartService {
             });
             this.ChartLegend.data.setAll(series.dataItems);
         }
+        // Comparsa animata iniziale di fette e grafico, come nella versione amCharts4
+        if (settings.Animations) {
+            this.ChartInstance.series.each(s => s.appear(1000));
+            this.ChartInstance.appear(1000, 100);
+        }
         return this;
     }
     /** @ignore */
@@ -1802,6 +2042,11 @@ class VerticalChartService {
         this.ChartRoot?.dispose();
         this.ChartRoot = am5.Root.new(settings.Name);
         this.ChartInstance = this.ChartRoot.container.children.push(am5xy.XYChart.new(this.ChartRoot, {}));
+        // Ripristina la palette storica ereditata da amCharts4 per le colonne prive di colore esplicito
+        this.ChartInstance.set("colors", createSpiritedColorSet(this.ChartRoot));
+        // Tema Animated (transizioni fluide) come nella versione amCharts4, se le animazioni sono attive
+        if (settings.Animations)
+            applyAnimatedTheme(this.ChartRoot);
         //#endregion
         let chartData = dataConverted.values.map(value => ({
             ...value,
@@ -1953,6 +2198,11 @@ class VerticalChartService {
         if (settings.Legend) {
             this.ChartLegend.data.setAll(this.ChartInstance.series.values);
         }
+        // Comparsa animata iniziale di colonne e grafico, come nella versione amCharts4
+        if (settings.Animations) {
+            this.ChartInstance.series.each(s => s.appear(1000));
+            this.ChartInstance.appear(1000, 100);
+        }
         return this;
     }
     /** @ignore */
@@ -1998,6 +2248,11 @@ class Vertical2DChartService {
         this.ChartRoot?.dispose();
         this.ChartRoot = am5.Root.new(settings.Name);
         this.ChartInstance = this.ChartRoot.container.children.push(am5xy.XYChart.new(this.ChartRoot, {}));
+        // Ripristina la palette storica ereditata da amCharts4 per le colonne prive di colore esplicito
+        this.ChartInstance.set("colors", createSpiritedColorSet(this.ChartRoot));
+        // Tema Animated (transizioni fluide) come nella versione amCharts4, se le animazioni sono attive
+        if (settings.Animations)
+            applyAnimatedTheme(this.ChartRoot);
         //#endregion
         //#region Carico la Legenda
         if (settings.Legend) {
@@ -2131,6 +2386,11 @@ class Vertical2DChartService {
         if (settings.Legend) {
             this.ChartLegend.data.setAll(this.ChartInstance.series.values);
         }
+        // Comparsa animata iniziale di colonne e grafico, come nella versione amCharts4
+        if (settings.Animations) {
+            this.ChartInstance.series.each(s => s.appear(1000));
+            this.ChartInstance.appear(1000, 100);
+        }
         return this;
     }
     /** @ignore */
@@ -2219,6 +2479,11 @@ class VerticalStackedChartService {
         this.ChartRoot?.dispose();
         this.ChartRoot = am5.Root.new(settings.Name);
         this.ChartInstance = this.ChartRoot.container.children.push(am5xy.XYChart.new(this.ChartRoot, {}));
+        // Ripristina la palette storica ereditata da amCharts4 per le colonne prive di colore esplicito
+        this.ChartInstance.set("colors", createSpiritedColorSet(this.ChartRoot));
+        // Tema Animated (transizioni fluide) come nella versione amCharts4, se le animazioni sono attive
+        if (settings.Animations)
+            applyAnimatedTheme(this.ChartRoot);
         //#endregion
         //#region Carico la Legenda
         if (settings.Legend) {
@@ -2347,6 +2612,11 @@ class VerticalStackedChartService {
         if (settings.Legend) {
             this.ChartLegend.data.setAll(this.ChartInstance.series.values);
         }
+        // Comparsa animata iniziale di colonne e grafico, come nella versione amCharts4
+        if (settings.Animations) {
+            this.ChartInstance.series.each(s => s.appear(1000));
+            this.ChartInstance.appear(1000, 100);
+        }
         return this;
     }
     /** @ignore */
@@ -2421,6 +2691,11 @@ class AreaChartService {
         this.ChartRoot?.dispose();
         this.ChartRoot = am5.Root.new(settings.Name);
         this.ChartInstance = this.ChartRoot.container.children.push(am5xy.XYChart.new(this.ChartRoot, {}));
+        // Ripristina la palette storica ereditata da amCharts4 per le serie prive di colore esplicito
+        this.ChartInstance.set("colors", createSpiritedColorSet(this.ChartRoot));
+        // Tema Animated (transizioni fluide) come nella versione amCharts4, se le animazioni sono attive
+        if (settings.Animations)
+            applyAnimatedTheme(this.ChartRoot);
         //#endregion
         //#region Carico la Legenda
         if (settings.Legend) {
@@ -2544,6 +2819,11 @@ class AreaChartService {
         // let cursor = ^, cursor.lineY.set("visible", false), per cursore verticale
         dateAxis.on("start", () => { this.emitSelectionChanged(dateAxis, settings); });
         dateAxis.on("end", () => { this.emitSelectionChanged(dateAxis, settings); });
+        // Comparsa animata iniziale di serie e grafico, come nella versione amCharts4
+        if (settings.Animations) {
+            this.ChartInstance.series.each(s => s.appear(1000));
+            this.ChartInstance.appear(1000, 100);
+        }
         return this;
     }
     fixTimeUnit(tu) {
@@ -2690,10 +2970,10 @@ class EsChartComponent extends BaseChartComponent {
                 return new VerticalStackedChartService().graphicate(this.Data, settings);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsChartComponent, isStandalone: false, selector: "es-chart", inputs: { Type: "Type", Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsChartComponent, isStandalone: false, selector: "es-chart", inputs: { Type: "Type", Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i3.DateService }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -2756,10 +3036,10 @@ class EsAreaChartComponent extends BaseChartComponent {
     graphicate(settingsCasted) {
         return new AreaChartService().graphicate(this.Data, settingsCasted);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsAreaChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsAreaChartComponent, isStandalone: false, selector: "es-area-chart", inputs: { Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsAreaChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsAreaChartComponent, isStandalone: false, selector: "es-area-chart", inputs: { Data: "Data", DataArray: "DataArray" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsAreaChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsAreaChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-area-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -2832,10 +3112,10 @@ class EsLineChartComponent extends BaseChartComponent {
     graphicate(settingsCasted) {
         return new LineChartService(this.dateService).graphicate(this.Data, settingsCasted);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsLineChartComponent, isStandalone: false, selector: "es-line-chart", inputs: { Data: "Data", DataArray: "DataArray", Step: "Step", DataGroupBucketSize: "DataGroupBucketSize", DataGroupingThreshold: "DataGroupingThreshold", StrokeSize: "StrokeSize", AllowGaps: "AllowGaps", MergeDatasets: "MergeDatasets", FinalInstants: "FinalInstants", Min: "Min", Max: "Max", Fill: "Fill", Stacked: "Stacked" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsLineChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i3.DateService }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsLineChartComponent, isStandalone: false, selector: "es-line-chart", inputs: { Data: "Data", DataArray: "DataArray", Step: "Step", DataGroupBucketSize: "DataGroupBucketSize", DataGroupingThreshold: "DataGroupingThreshold", StrokeSize: "StrokeSize", AllowGaps: "AllowGaps", MergeDatasets: "MergeDatasets", FinalInstants: "FinalInstants", Min: "Min", Max: "Max", Fill: "Fill", Stacked: "Stacked" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsLineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsLineChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i3.DateService }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -2925,10 +3205,10 @@ class EsPieChartComponent extends BaseChartComponent {
     graphicate(settingsCasted) {
         return new PieChartService().graphicate(this.Data, settingsCasted);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsPieChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsPieChartComponent, isStandalone: false, selector: "es-pie-chart", inputs: { Data: "Data", DataArray: "DataArray", HideZeroes: "HideZeroes", Mode3D: "Mode3D", DonutRadiusPercentage: "DonutRadiusPercentage", LabelsWrap: "LabelsWrap", LabelsTruncate: "LabelsTruncate", LabelsWidth: "LabelsWidth", LabelsVisible: "LabelsVisible", Total: "Total" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsPieChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsPieChartComponent, isStandalone: false, selector: "es-pie-chart", inputs: { Data: "Data", DataArray: "DataArray", HideZeroes: "HideZeroes", Mode3D: "Mode3D", DonutRadiusPercentage: "DonutRadiusPercentage", LabelsWrap: "LabelsWrap", LabelsTruncate: "LabelsTruncate", LabelsWidth: "LabelsWidth", LabelsVisible: "LabelsVisible", Total: "Total" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsPieChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsPieChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-pie-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -3011,10 +3291,10 @@ class EsVertical2DChartComponent extends BaseChartComponent {
     graphicate(settingsCasted) {
         return new Vertical2DChartService().graphicate(this.Data, settingsCasted);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsVertical2DChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsVertical2DChartComponent, isStandalone: false, selector: "es-vertical-2d-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", GroupPaddingPercentage: "GroupPaddingPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsVertical2DChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsVertical2DChartComponent, isStandalone: false, selector: "es-vertical-2d-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", GroupPaddingPercentage: "GroupPaddingPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsVertical2DChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsVertical2DChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-vertical-2d-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -3092,10 +3372,10 @@ class EsVerticalChartComponent extends BaseChartComponent {
     graphicate(settingsCasted) {
         return new VerticalChartService().graphicate(this.Data, settingsCasted);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsVerticalChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsVerticalChartComponent, isStandalone: false, selector: "es-vertical-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsVerticalChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsVerticalChartComponent, isStandalone: false, selector: "es-vertical-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsVerticalChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsVerticalChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-vertical-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -3171,10 +3451,10 @@ class EsVerticalStackedChartComponent extends BaseChartComponent {
     graphicate(settingsCasted) {
         return new VerticalStackedChartService().graphicate(this.Data, settingsCasted);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsVerticalStackedChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: EsVerticalStackedChartComponent, isStandalone: false, selector: "es-vertical-stacked-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsVerticalStackedChartComponent, deps: [{ token: i0.ElementRef }, { token: ChartLoader }, { token: ChartDispatcher }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: ESC_DEBUG_MODE }, { token: ESC_ANIMATIONS }, { token: ESC_THEME }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: EsVerticalStackedChartComponent, isStandalone: false, selector: "es-vertical-stacked-chart", inputs: { Data: "Data", DataArray: "DataArray", ColumnWidthPercentage: "ColumnWidthPercentage", LabelWidth: "LabelWidth", LabelVerticalOrientationCutoffWidth: "LabelVerticalOrientationCutoffWidth", LabelRightWhenCompressed: "LabelRightWhenCompressed", LabelTopWhenCompressed: "LabelTopWhenCompressed" }, usesInheritance: true, ngImport: i0, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PageChartSelector, selector: "chart-pager", inputs: ["Items", "Dtos", "BrowseDelayMs", "StartIndex"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsVerticalStackedChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsVerticalStackedChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'es-vertical-stacked-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<chart-pager *ngIf=\"isPaged\" (onPageChange)=\"changePage($event)\" [Items]=\"DataArray\" [Dtos]=\"DataDtos\" [StartIndex]=\"DataDtoStartIndex\"\r\n    [BrowseDelayMs]=\"BrowseDelayMs\">\r\n    <ng-template #header_inner let-headerItem>\r\n        <ng-container *ngTemplateOutlet=\"header_tr; context : {$implicit: headerItem}\"></ng-container>\r\n    </ng-template>\r\n</chart-pager>\r\n\r\n<ng-container *ngIf=\"loadingChart && loading_template\">\r\n    <div style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <ng-container *ngTemplateOutlet=\"loading_template\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"loadingChart && !loading_template\">\r\n    <div class=\"esc-loading-overlay\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\">\r\n        <p class=\"label\">Loading....</p>\r\n    </div>\r\n</ng-container>\r\n\r\n<div [class.hide-block]=\"loadingChart\" id=\"{{name}}\" style=\"width: 100%;\" [style.height]=\"isPaged ? 'calc(100% - 44px)' : '100%'\"></div>", styles: [".esc-loading-overlay{background:#9999;text-transform:uppercase;font-size:30px;font-weight:700;color:#fff;text-align:center;font-family:monospace}.esc-loading-overlay .label{margin:0;padding-top:7%}.hide-block{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChartLoader }, { type: ChartDispatcher }, { type: i0.NgZone }, { type: Object, decorators: [{
@@ -3249,8 +3529,8 @@ class EsChartsModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.28", ngImport: i0, type: EsChartsModule, declarations: [EsChartComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: EsChartsModule, declarations: [EsChartComponent,
             EsLineChartComponent,
             EsPieChartComponent,
             EsVertical2DChartComponent,
@@ -3265,9 +3545,9 @@ class EsChartsModule {
             EsVerticalStackedChartComponent,
             PageChartSelector,
             EsAreaChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsChartsModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsChartsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsChartsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: EsChartsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],