@esfaenza/es-table 11.2.37 → 11.2.41

package/bundles/esfaenza-es-table.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@esfaenza/extensions'), require('@esfaenza/localizations'), require('@esfaenza/preferences'), require('@angular/platform-browser'), require('@angular/cdk/drag-drop'), require('@angular/common'), require('@angular/router'), require('@angular/material/select'), require('@angular/material/input'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('@ctrl/ngx-csv'), require('@esfaenza/ngx-contextmenu')) :
-    typeof define === 'function' && define.amd ? define('@esfaenza/es-table', ['exports', '@angular/core', '@angular/forms', '@esfaenza/extensions', '@esfaenza/localizations', '@esfaenza/preferences', '@angular/platform-browser', '@angular/cdk/drag-drop', '@angular/common', '@angular/router', '@angular/material/select', '@angular/material/input', 'ngx-bootstrap/modal', 'ngx-bootstrap/dropdown', '@ctrl/ngx-csv', '@esfaenza/ngx-contextmenu'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['es-table'] = {}), global.ng.core, global.ng.forms, global.i1, global.localizations, global.preferences, global.ng.platformBrowser, global.ng.cdk.dragDrop, global.ng.common, global.ng.router, global.ng.material.select, global.ng.material.input, global.modal, global.dropdown, global.ngxCsv, global.ngxContextmenu));
-}(this, (function (exports, i0, forms, i1, localizations, preferences, platformBrowser, dragDrop, common, router, select, input, modal, dropdown, ngxCsv, ngxContextmenu) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@esfaenza/localizations'), require('@esfaenza/extensions'), require('@angular/forms'), require('@esfaenza/preferences'), require('@angular/cdk/drag-drop'), require('@angular/common'), require('@angular/router'), require('@angular/material/select'), require('@angular/material/input'), require('@angular/platform-browser'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('@ctrl/ngx-csv'), require('@esfaenza/ngx-contextmenu')) :
+    typeof define === 'function' && define.amd ? define('@esfaenza/es-table', ['exports', '@angular/core', '@esfaenza/localizations', '@esfaenza/extensions', '@angular/forms', '@esfaenza/preferences', '@angular/cdk/drag-drop', '@angular/common', '@angular/router', '@angular/material/select', '@angular/material/input', '@angular/platform-browser', 'ngx-bootstrap/modal', 'ngx-bootstrap/dropdown', '@ctrl/ngx-csv', '@esfaenza/ngx-contextmenu'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['es-table'] = {}), global.ng.core, global.localizations, global.i1, global.ng.forms, global.preferences, global.ng.cdk.dragDrop, global.ng.common, global.ng.router, global.ng.material.select, global.ng.material.input, global.ng.platformBrowser, global.modal, global.dropdown, global.ngxCsv, global.ngxContextmenu));
+}(this, (function (exports, i0, localizations, i1, forms, preferences, dragDrop, common, router, select, input, platformBrowser, modal, dropdown, ngxCsv, ngxContextmenu) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -336,22 +336,135 @@
         return value;
     }
 
-    /**
-     * Classe che identifica un ordinamento di una colonna
-     */
-    var AppOrdering = /** @class */ (function () {
+    /** Token che indica il locale da utilizzare all'interno del componente. Supportati solo "it-IT" ed "en-US" */
+    var EST_LOCALE = new i0.InjectionToken('EST_LOCALE');
+    /** Token che indica se emettere log a console o meno */
+    var EST_DEBUG = new i0.InjectionToken('EST_DEBUG');
+    /** Token che indica i default da assegnare agli Input */
+    var EST_DEFAULTS = new i0.InjectionToken('EST_DEFAULTS');
+
+    /** Classe di localizzazione per il componente **TablePagerComponent** */
+    var TablePagerLoc = /** @class */ (function (_super) {
+        __extends(TablePagerLoc, _super);
+        /** @ignore */
+        function TablePagerLoc(LOC_LOCALE) {
+            var _this = _super.call(this, LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT') || this;
+            _super.prototype.set.call(_this, "en->it", "All", ["Tutto"]);
+            _super.prototype.set.call(_this, "en->it", "Shown Elements", ["Elementi visualizzati"]);
+            _super.prototype.set.call(_this, "en->it", "Shown Groups", ["Gruppi visualizzati"]);
+            _super.prototype.set.call(_this, "en->it", "Are you sure you want to retrieve all results?", ["Si è sicuri di voler caricare tutti i risultati?"]);
+            _super.prototype.set.call(_this, "en->it", "This might slow down the page and possibly crash the entire application", ["L'operazione potrebbe rallentare la pagina fino al crash dell'applicazione"]);
+            return _this;
+        }
+        return TablePagerLoc;
+    }(localizations.LocalizationService));
+    TablePagerLoc.decorators = [
+        { type: i0.Injectable }
+    ];
+    TablePagerLoc.ctorParameters = function () { return [
+        { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [EST_LOCALE,] }] }
+    ]; };
+
+    // Angular
+    /** Componente che si occupa della paginazione di una tabella */
+    var TablePagerComponent = /** @class */ (function () {
+        /** @ignore */
+        function TablePagerComponent(msgExts, lc, cdr, locale) {
+            this.msgExts = msgExts;
+            this.lc = lc;
+            this.cdr = cdr;
+            this.locale = locale;
+            /** Indica se deve mostrare un warning quando si cercano di solezionare come elementi da visualizzare "Tutti" */
+            this.WarnOnAll = true;
+            /** Indica se dare la possibilità o meno di selezionare "Tutti" nelle opzioni di paginazione */
+            this.AllSearch = true;
+            /** Placeholder che identifica il "Tutti" */
+            this.DefaultAll = 999999;
+            /** Indica se attivare la modalità gruppo con stili più snelli per apparire sotto ai raggruppamenti */
+            this.GroupMode = false;
+            /** Indica se utilizzare il conteggio dei gruppi o degli oggetti */
+            this.GroupCount = false;
+            /** Indica il testo che va a sostituire "Oggetti Visualizzati" in caso si stia facendo qualcosa di custom, Ignorato in caso di gruppi */
+            this.CountLabel = null;
+            /** Indica se visualizzare il numero totale di oggeti presenti */
+            this.ShowCount = true;
+            /** Indica se visualizzare il numero totale di oggeti presenti */
+            this.ShowPaging = true;
+            /** Output invocato quando il numero di elementi per pagina viene modificato da un click utente */
+            this.pagingSelected = new i0.EventEmitter();
+            /** Opzioni di paginazione */
+            this.PagingOptions = [10, 15, 30, 45, 100];
+        }
+        /** @ignore */
+        TablePagerComponent.prototype.ngOnInit = function () {
+            this.Model = this.View ? (this.View.itemsperpageoverride || 15) : this.CurrentPageSize;
+            if (this.AllSearch)
+                this.PagingOptions.push(this.DefaultAll);
+        };
+        /** @ignore */
+        TablePagerComponent.prototype.ngOnChanges = function (changes) {
+            var newView = changes['View'];
+            var newCPS = changes['CurrentPageSize'];
+            if ((newView && !newView.firstChange) || (newCPS && !newCPS.firstChange))
+                this.Model = (newView === null || newView === void 0 ? void 0 : newView.currentValue) ? (newView.currentValue.itemsperpageoverride || 15) : (newCPS === null || newCPS === void 0 ? void 0 : newCPS.currentValue) ? newCPS.currentValue : null;
+        };
         /**
-         * Costruttore
+         * Funzione richiamata dal template quando un utente clicca su un numero di paginazione.
          *
-         * @param {string} id ID della colonna a cui si vogliono applicare ordinamenti, deve combaciare all'id messo nella dichiarazione dell'ES-TD/TH
-         * @param {'DESC' | 'ASC' } order Ordinamento da applicare alla colonna, Discendente/Ascendente, default 'null' per indicare assenza di ordine
+         * Cliccare 2 volte sullo stesso numero causa comunque un refresh dei dati
+         *
+         * @param {number} pageSize Dimensione selezionata lato UI
          */
-        function AppOrdering(id, order) {
-            this.id = id;
-            this.order = order;
-        }
-        return AppOrdering;
-    }());
+        TablePagerComponent.prototype.choice = function (pageSize) {
+            var _this = this;
+            if (pageSize == this.DefaultAll && this.WarnOnAll) {
+                this.msgExts.simpleWarningWithChoice(this.lc.loc("Are you sure you want to retrieve all results?"), this.lc.loc("This might slow down the page and possibly crash the entire application"), function () { _this.pagingSelected.emit(pageSize); _this.Model = pageSize; }, function () {
+                    // Dio solo sa perché mi tocca fare sta roba... qui dentro per qualche motivo la CD non prende
+                    var prevModel = _this.Model;
+                    _this.Model = null;
+                    _this.cdr.detectChanges();
+                    _this.Model = prevModel;
+                    _this.cdr.detectChanges();
+                });
+            }
+            else {
+                this.pagingSelected.emit(pageSize);
+                this.Model = pageSize;
+            }
+        };
+        return TablePagerComponent;
+    }());
+    TablePagerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "app-paging",
+                    viewProviders: [{ provide: localizations.LocalizationService, useClass: TablePagerLoc }],
+                    template: "<ng-container *ngIf=\"!Hidden\">\r\n  <span class=\"est-fs-14\"> {{CountLabel && !GroupMode ? CountLabel : ((GroupMode ? 'Shown Groups' : 'Shown Elements') | localize : lc)}}:&nbsp;</span>\r\n  <ng-container *ngIf=\"ShowPaging && Model && (Model == DefaultAll || PagerCount >= Model || PagerCount == -1)\">\r\n    <mat-form-field [appearance]=\"'legacy'\" class=\"mat-paginator-page-size-select est-fs-14 est-ipp-bold\">\r\n      <select matNativeControl [ngModel]=\"Model\" name=\"input\" (ngModelChange)=\"choice($event)\">\r\n        <ng-container *ngFor=\"let pOpt of PagingOptions\">\r\n          <option *ngIf=\"pOpt == DefaultAll || PagerCount >= pOpt || PagerCount == -1\" [value]=\"pOpt\">{{ pOpt == DefaultAll ? ('All' | localize : lc) : pOpt.toString()}}</option>\r\n        </ng-container>\r\n      </select>\r\n    </mat-form-field>\r\n    <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount && PagerCount != -1\">&nbsp;/&nbsp;</span>\r\n  </ng-container>\r\n  <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount && PagerCount != -1\">{{PagerCount | number : '0.0-0' : locale}}</span>\r\n</ng-container>",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".est-ipp-sel,.est-ipp-sel-all,.est-rg-ipp-sel,.est-rg-ipp-sel-all{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block;display:inline}.est-ipp-bold{font-weight:700}.mat-paginator-page-size-select{margin:6px 4px 0;width:50px}.mat-paginator-page-size-select .mat-form-field-wrapper{height:52px!important;margin-top:-15px!important;padding:0!important}.mat-form-field-type-mat-native-select .mat-form-field-infix:after{margin-top:-5.5px!important}"]
+                },] }
+    ];
+    TablePagerComponent.ctorParameters = function () { return [
+        { type: i1.MessageService },
+        { type: localizations.LocalizationService },
+        { type: i0.ChangeDetectorRef },
+        { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [EST_LOCALE,] }] }
+    ]; };
+    TablePagerComponent.propDecorators = {
+        CurrentPageSize: [{ type: i0.Input }],
+        View: [{ type: i0.Input }],
+        WarnOnAll: [{ type: i0.Input }],
+        AllSearch: [{ type: i0.Input }],
+        DefaultAll: [{ type: i0.Input }],
+        GroupMode: [{ type: i0.Input }],
+        GroupCount: [{ type: i0.Input }],
+        CountLabel: [{ type: i0.Input }],
+        ShowCount: [{ type: i0.Input }],
+        ShowPaging: [{ type: i0.Input }],
+        PagerCount: [{ type: i0.Input }],
+        Hidden: [{ type: i0.Input }],
+        pagingSelected: [{ type: i0.Output }]
+    };
 
     /**
      * Classe che identifica una ricerca paginata in tutte le sue sfumature (di grigio)
@@ -389,65 +502,6 @@
         return AppSearch;
     }());
 
-    /** Classe che identifica una colonna. Utilizzata in modalità "Colonne dinamiche" */
-    var EsTableColumnsDefinition = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} description Descrizione della colonna
-         * @param {string} propertyName Nome della proprietà del modello in cui sono contenuti i dati da visualizzare per questa colonna
-         * @param {string} routePath Route di navigazione. Es. "['/pages/mod/mod_detail', { 'idItem': '{0}', 'idItem2' : '{1}' }]"
-         * @param {string[]} routeParameterProperties Proprietà da bindare a **routePath** per generare la route completa.
-         * L'indice scritto in **routePath** è l'indice di accesso a questo array. Es. ["iditem", "iditem2"]
-         * @param {'ASC' | 'DESC' } dataOrder Ordinamento dei dati presentati in questa colonna
-         * @param {number} columnOrder Ordinamento di questa colonna
-         * @param {boolean} visible Visibilità o meno della colonna
-         * @param {string} clss Classe da applicare sia ai TD che ai TH relativi a questa colonna
-         * @param {boolean} orderable Indica se la colonna è ordinabile o no (nel senso ASC / DESC / NONE)
-         * @param {boolean} headerWraps Indica se il testo dell'header dev'essere wrappato all'interno del th. Di default no.
-         */
-        function EsTableColumnsDefinition(description, propertyName, routePath, routeParameterProperties, dataOrder, columnOrder, visible, clss, orderable, headerWraps) {
-            if (routePath === void 0) { routePath = null; }
-            if (routeParameterProperties === void 0) { routeParameterProperties = null; }
-            if (dataOrder === void 0) { dataOrder = null; }
-            if (columnOrder === void 0) { columnOrder = null; }
-            if (visible === void 0) { visible = true; }
-            if (clss === void 0) { clss = null; }
-            if (orderable === void 0) { orderable = true; }
-            if (headerWraps === void 0) { headerWraps = false; }
-            this.description = description;
-            this.propertyName = propertyName;
-            this.routePath = routePath;
-            this.routeParameterProperties = routeParameterProperties;
-            this.dataOrder = dataOrder;
-            this.columnOrder = columnOrder;
-            this.visible = visible;
-            this.clss = clss;
-            this.orderable = orderable;
-            this.headerWraps = headerWraps;
-        }
-        return EsTableColumnsDefinition;
-    }());
-
-    /** Classe che definisce un oggetto generico come lista di proprietà-valore */
-    var GenericItem = /** @class */ (function () {
-        /** @ignore */
-        function GenericItem() {
-            this._selected = false;
-            this._rowClass = null;
-            this._hash = null;
-            this.properties = {};
-        }
-        return GenericItem;
-    }());
-
-    /** Indica un'opzione cliccabile nel Corner Menù della tabella (il menù richiamabile dai 3 pallini verticli in alto a destra) */
-    var CornerMenuOption = /** @class */ (function () {
-        function CornerMenuOption() {
-        }
-        return CornerMenuOption;
-    }());
-
     /** Definizione generica di un report che può o no disporre di paginazione/export e la cui richiesta è basata su uno o più parametri */
     var ReportDefinition = /** @class */ (function () {
         function ReportDefinition() {
@@ -455,64 +509,6 @@
         return ReportDefinition;
     }());
 
-    /** Classe che identifica una direttiva di ordinamento per un report */
-    var ReportOrder = /** @class */ (function () {
-        function ReportOrder() {
-        }
-        return ReportOrder;
-    }());
-
-    /** Classe che rappresenta una colonna di un report */
-    var ReportColumn = /** @class */ (function () {
-        function ReportColumn() {
-        }
-        return ReportColumn;
-    }());
-
-    /** Classe che rappresenta una lista di oggetti generati da un report */
-    var ReportResult = /** @class */ (function () {
-        function ReportResult() {
-        }
-        return ReportResult;
-    }());
-
-    /** Classe che rappresenta i valori delle proprietà di un oggetto Report */
-    var ReportRow = /** @class */ (function () {
-        function ReportRow() {
-        }
-        return ReportRow;
-    }());
-
-    /** Classe che identifica un parametro generico per un report */
-    var ReportParam = /** @class */ (function () {
-        function ReportParam() {
-        }
-        return ReportParam;
-    }());
-
-    /** Indica operazioni dinamiche generiche che possono essere effettuate per riga. Appaiono come colonne extra sul lato sinistro della tabella */
-    var EsTableOperationDefinition = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} id Codice dell'operazione
-         * @param {string} title Titolo dell'operazione, da presentare all'utente su hover della cella
-         * @param {string} iconClass Classe che fornisca un iconcina Es. "fa fa-remove"
-         * @param {string} text Eventuale testo presentato nella cella, genericamente va in alternativa a **iconClass**
-         * @param {string} conditionField Indica il campo dell'oggetto sottostante su cui verificare la visibilità o meno di questa icona
-         * @param {string} conditionValue Indica il valore che la proprietà **conditionField** dell'oggetto sottostante deve assumere affinché questa opzione si veda
-         */
-        function EsTableOperationDefinition(id, title, iconClass, text, conditionField, conditionValue) {
-            this.id = id;
-            this.title = title;
-            this.iconClass = iconClass;
-            this.text = text;
-            this.conditionField = conditionField;
-            this.conditionValue = conditionValue;
-        }
-        return EsTableOperationDefinition;
-    }());
-
     /** Identifica una selezione applicabile agli oggetti presentati in una tabella */
     var ItemsSelection = /** @class */ (function () {
         /**
@@ -537,446 +533,27 @@
         return ItemsSelection;
     }());
 
-    /** Classe che rappresenta un Gruppo con le proprie aggregazioni */
-    var Group = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} column ID della colonna raggruppata
-         * @param {number} count Numero di elementi raggruppati sotto questa colonna
-         * @param {string} value Valore del Gruppo
-         */
-        function Group(column, count, value) {
-            this.column = column;
-            this.count = count;
-            this.value = value;
-            this.aggregations = [];
-        }
-        return Group;
-    }());
-
-    /** Classe che rappresenta un'aggregazione */
-    var GroupAggregation = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} column ID della colonna aggregata
-         * @param {'min' | 'max' | 'sum' } aggregation Aggregazione da effettuare su questa colonna
-         * @param {string} value Valore dell'aggregazione
-         */
-        function GroupAggregation(column, aggregation, value) {
-            this.column = column;
-            this.aggregation = aggregation;
-            this.value = value;
-        }
-        return GroupAggregation;
-    }());
-
-    /** Classe che rappresenta un filtro su un gruppo */
-    var GroupFilter = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} column ID della colonna gruppata per cui si richiede di filtrare
-         * @param {string} value Valore del gruppo su questa **column** per cui si richiede di filtrare
-         */
-        function GroupFilter(column, value) {
-            this.column = column;
-            this.value = value;
-        }
-        return GroupFilter;
-    }());
-
-    /** Classe che rappresenta o un gruppo o una aggregazione su una colonna. Usata solo internamente */
-    var GroupOrAggregation = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} column Colonna su cui è presente o un gruppo o un'aggregazione
-         * @param {'min' | 'max' | 'sum' } aggregation Aggregazione presente sulla **column**. Se questo campo è nullo significa che è un gruppo.
-         * @param {'string' | 'date' | 'number'} datatype Tipo di dati contenuto nella colonna **column** se non c'è alcuna aggregazione è inutile, pertanto non sarà valorizzato
-         */
-        function GroupOrAggregation(column, aggregation, datatype) {
-            this.column = column;
-            this.aggregation = aggregation;
-            this.datatype = datatype;
-        }
-        return GroupOrAggregation;
-    }());
-
-    /** Rappresenta un trittico formato da un array e due cache relative a tale array per un accesso estremamente veloce per tutte le operazioni del caso */
-    var CacheTriptic = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {Map<string, any>} cache Cache Chiave-Oggetto
-         * @param {Map<string, number>} index_cache Cache Indice-Oggetto
-         * @param {any[]} array Array contenente gli oggetti
-         */
-        function CacheTriptic(cache, index_cache, array) {
-            this.cache = cache;
-            this.index_cache = index_cache;
-            this.array = array;
-        }
-        return CacheTriptic;
-    }());
-
-    /** Definizione di una colonna, utilizzato nella dialog che permette di modificare le posizioni e le visibilità */
-    var EsTableColumn = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} id Id colonna
-         * @param {string} description Descrizione (Header)
-         * @param {boolean} visible Indica se di default mostrarla o meno
-         * @param {boolean} fixed Indica se è una colonna fixed
-         * @param {boolean} pinned Indica se è una colonna pinnata
-         * @param {number} pinnedWidth Indica la dimensione da assegnare a questa colonna quando è pinnata
-         * @param {TemplateRef<any>} template Indica il template da usare per mostrare il testo dell'Header
-         * @param {TemplateRef<any>[]} parentTemplates Indica la lista di template padri collegata a questo header
-         */
-        function EsTableColumn(id, description, visible, fixed, pinned, pinnedWidth, template, parentTemplates) {
-            this.id = id;
-            this.description = description;
-            this.visible = visible;
-            this.fixed = fixed;
-            this.pinned = pinned;
-            this.pinnedWidth = pinnedWidth;
-            this.template = template;
-            this.parentTemplates = parentTemplates;
-        }
-        return EsTableColumn;
-    }());
-
-    /** Classe che rappresenta un separatore da inserire fra gli oggetti dell'es-table per le operazioni di paginazione dei raggruppamenti per riga */
-    var GroupPager = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {number} groupLevel Livello del gruppo a cui questo separatore fa riferimento
-         * @param {string} parentKey Chiave del gruppo parent se esiste
-         * @param {AppSearch<any>} view Vista di ricerca collegata a questo elemento
-         * @param {'groups' | 'items'} searches Indica che cosa cerca questo separatore, se sottogruppi o oggetti
-         */
-        function GroupPager(_grouplevel, _thisRoute, _parent, view, searches) {
-            this._grouplevel = _grouplevel;
-            this._thisRoute = _thisRoute;
-            this._parent = _parent;
-            this.view = view;
-            this.searches = searches;
-            this._sep = true;
-            this.buttons = [];
-        }
-        return GroupPager;
-    }());
-
-    /**
-     * Classe che rappresenta un singolo frammento di route di un elemento gruppo o non. Un array di questi indica tutte le colonne di gruppo con i loro valori
-     * per arrivare ad una ricerca su sottogruppi o elementi relativi
-     */
-    var GroupRouteFragment = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {string} column Colonna di raggruppamento
-         * @param {string} value Valore della colonna di raggruppamento
-         */
-        function GroupRouteFragment(column, value) {
-            this.column = column;
-            this.value = value;
-        }
-        return GroupRouteFragment;
-    }());
-
-    /** Classe rappresentante una singola aggregazione effettuata su una colonna */
-    var ThAggregation = /** @class */ (function () {
-        /**
-         * Costruttore
-         *
-         * @param {'min' | 'max' | 'sum'} func Funzione di aggergazione, può essere **min**, **max** o **sum**
-         * @param {string} format Formato richiesto per il valore dell'aggregazione
-         * @param {string} match Match intero del pezzo di testo da cui si è estrapolata l'aggregazione, da rimpiazzare col valore calcolato
-         */
-        function ThAggregation(func, format, match) {
-            this.func = func;
-            this.format = format;
-            this.match = match;
-        }
-        return ThAggregation;
-    }());
-
-    //Angular
-    /** Componente rappresentante una singola cella del body della tabella */
-    var EsTd = /** @class */ (function () {
-        /** @ignore */
-        function EsTd(myself, renderer, _viewContainer, sanitizer) {
-            this.myself = myself;
-            this.renderer = renderer;
-            this._viewContainer = _viewContainer;
-            this.sanitizer = sanitizer;
-            /** Id della cella, dev'essere lo stesso della colonna **EsTh** relativa */
-            this.ID = "";
-            /** Valore da mostrare all'interno della cella. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
-            this.Display = null;
-            /** Template Angular da istanziare per questo TD */
-            this.Template = null;
-        }
-        Object.defineProperty(EsTd.prototype, "Visible", {
-            /**
-             * Restituisce lo stato di Visibilità della cella in oggetto
-             *
-             * @returns {boolean} **true** se visibile, **false** altrimenti
-             */
-            get: function () {
-                if (this._Visible == undefined)
-                    this._Visible = true;
-                return this._Visible;
-            },
-            /**
-             * Imposta la visibilità o meno della cella, si traduce nell'applicazione o rimozione della classe **app-display-none**
-             *
-             * @param {boolean} expression Indicazione della visibilità
-             */
-            set: function (expression) {
-                this._Visible = expression;
-                if (expression)
-                    this.renderer.removeClass(this.myself.nativeElement, "app-display-none");
-                else
-                    this.renderer.addClass(this.myself.nativeElement, "app-display-none");
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /** @ignore */
-        EsTd.prototype.ngAfterViewInit = function () {
-            // Se è Internal significa che è gestita internamente da ES-TABLE quindi evito di fare sti due passaggi di lettura del DOM
-            if (this.Internal)
-                return;
-            // L'hash è calcolato dalla ES-table in fase di binding
-            this.Context = this.Context || this.getTemplateContext()._hash;
-            this.Content = this.Display === null || this.Display === "" ? this.sanitizer.bypassSecurityTrustHtml(this.myself.nativeElement.innerHTML) : this.sanitizer.bypassSecurityTrustHtml(this.Display);
-            this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
-        };
-        /** Ottiene il contesto della view su cui è istanziato il componente */
-        EsTd.prototype.getTemplateContext = function () {
-            // NGBUG: (<any>this._viewContainer)._view non esiste più in IVY: https://stackoverflow.com/questions/60398827/getting-the-context-of-the-template-inside-of-which-my-component-has-been-render
-            var vc = this._viewContainer;
-            var context;
-            // Primo giro di recupero del contesto, supponendo di non avere a che fare col compilatore IVY
-            if (vc._view == null)
-                context = null;
-            else if (vc._view.parent && !vc._view.context.$implicit && vc._view.parent.context && vc._view.parent.context.$implicit)
-                context = vc._view.parent.context.$implicit;
-            else if (vc._view.context && vc._view.context.ngIf)
-                context = vc._view.viewContainerParent.context.$implicit;
-            else
-                context = vc._view.context.$implicit;
-            if (context)
-                return context;
-            // Se non ho ancora trovato il contesto probabilmente sono in IVY e devo fare dei lookup un po' incasinati per beccarlo
-            var array = this._viewContainer._hostLView;
-            for (var i = 0; i < array.length; i++) {
-                var item = array[i];
-                if (item && item.$implicit && !item.ngIf)
-                    return item.$implicit;
-                // Second level search for the real context in case the first one we find is an ngIf
-                if (item && item.length && item.length > 0) {
-                    for (var ii = 0; ii < item.length; ii++) {
-                        var iitem = item[ii];
-                        if (iitem && iitem.$implicit && !iitem.ngIf)
-                            return iitem.$implicit;
-                    }
-                }
-            }
-        };
-        return EsTd;
-    }());
-    EsTd.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "[es-td]",
-                    template: "<span>\r\n    <ng-content></ng-content>\r\n</span>",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    EsTd.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 },
-        { type: i0.ViewContainerRef },
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    EsTd.propDecorators = {
-        ID: [{ type: i0.Input, args: ['es-td',] }],
-        Internal: [{ type: i0.Input }],
-        RouterLink: [{ type: i0.Input }],
-        Display: [{ type: i0.Input }],
-        Template: [{ type: i0.Input }],
-        Context: [{ type: i0.Input }],
-        Visible: [{ type: i0.Input }]
-    };
-
-    //Angular
-    /** Componente rappresentante una Colonna della tabella */
-    var EsTh = /** @class */ (function () {
-        /** @ignore */
-        function EsTh(myself, renderer) {
-            this.myself = myself;
-            this.renderer = renderer;
-            /** Dizionario di mappatura con ordinamento attuale e ordinamento successivo per gestire i passaggi di stato */
-            this.orderNext = { "NONE": "DESC", "DESC": "ASC", "ASC": null };
-            /** Indica se si sta effettuando un'operazione di resize su questa colonna */
-            this.resizingThis = false;
-            /**
-             * Storicizza l'offset di partenza del resize dell'elemento HTML per poter calcolare la nuova dimensione richiesta durente il resize
-             *
-             * nuova width = startOffset + posizione X del mouse
-             */
-            this.startOffset = null;
-            /** Id della colonna, dev'essere lo stesso per tutti gli **EsTd** relativi */
-            this.ID = "";
-            /** Indica se questa colonna è ordinabile o meno */
-            this.Orderable = true;
-            /** Valore da mostrare all'interno della colonna. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
-            this.Display = "";
-            /** Indica se le dimnsioni di questa colonna sono modificabili o meno */
-            this.Resizable = false;
-            /** Indica se questo header è pinnato. In caso lo fosse presenta il tastino per effettuare lo spinning */
-            this.Pinned = false;
-            /**
-             * Indica se sta venendo eseguita una operazione di ricerca o meno, serve per evitare l'esecuzione di eventuale codice che potrebbe dare fastidio
-             * come ad esempio l'escuzione di un ordinamento durante il caricamento di dati nuovi
-             */
-            this.SearchInProgress = false;
-            /** Indica se il testo presente in questo Header può andare a capo o meno, di default non può */
-            this.Wrap = false;
-            /** Indica se la colonna è fixed, cioè se non può né essere nascosta, né riposizionata. Solo le prime colonne possono essere Fixed */
-            this.Fixed = false;
-            /** Template Angular da istanziare per questo TH */
-            this.Template = null;
-            /** Evento emesso al cambio di ordinamento effettuato su questa colonna */
-            this.onOrderChange = new i0.EventEmitter();
-            /** Evento emesso all'unpinning della colonna */
-            this.onUnpinning = new i0.EventEmitter();
-            /** Impostato dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header */
-            this._referenced = false;
-        }
-        Object.defineProperty(EsTh.prototype, "Visible", {
-            /**
-             * Restituisce lo stato di Visibilità della colonna in oggetto
-             *
-             * @returns {boolean} **true** se visibile, **false** altrimenti
-             */
-            get: function () {
-                if (this._Visible == undefined)
-                    this._Visible = true;
-                return this._Visible;
-            },
-            /**
-             * Imposta la visibilità o meno della colonna, si traduce nell'applicazione o rimozione della classe **app-display-none**
-             *
-             * @param {boolean} expression Indicazione della visibilità
-             */
-            set: function (expression) {
-                this._Visible = expression;
-                if (expression)
-                    this.renderer.removeClass(this.myself.nativeElement, "app-display-none");
-                else
-                    this.renderer.addClass(this.myself.nativeElement, "app-display-none");
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /** @ignore */
-        EsTh.prototype.ngAfterViewInit = function () {
-            //Assegnare direttamente il content è più veloce che passare dal native element per qualche motivo
-            this.Description = this.Display === null || this.Display === "" ? this.content.nativeElement.innerText : this.Display;
-            this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
-            //Resize
-            if (this.Resizable)
-                this.renderer.addClass(this.myself.nativeElement, "app-relative");
-        };
-        /** Emette l'evento di unpinning */
-        EsTh.prototype.unpin = function () {
-            this.onUnpinning.emit(this.ID);
-        };
-        /** Gestisce la modifica dell'ordinamento qualora venisse cliccato su questa colonna */
-        EsTh.prototype.setupNextOrderAndNotify = function () {
-            if (!this.ID) {
-                console.log("Attempt to order a column without ID. Operation ignored");
-                return;
-            }
-            if (this.SearchInProgress) {
-                console.log("Attempt to order a column during a search. Operation ignored");
-                return;
-            }
-            if (!this.OrderBy || !this.Orderable)
-                return;
-            var nextOrder = this.orderNext[this.Order || "NONE"];
-            this.Order = nextOrder;
-            this.onOrderChange.emit(this.Order);
-        };
-        /**
-         * Evento di inizio resize della colonna
-         *
-         * @param {any} ev Evento MouseDown
-         */
-        EsTh.prototype.onResizeStart = function (ev) {
-            if (!this.Resizable)
-                return;
-            this.resizingThis = true;
-            this.startOffset = this.myself.nativeElement.offsetWidth - ev.pageX;
-        };
-        /** Listener per la fine dell'operazione di resize */
-        EsTh.prototype.onMouseUp = function () {
-            if (!this.Resizable)
-                return;
-            this.resizingThis = false;
-        };
+    /** Classe che rappresenta un filtro su un gruppo */
+    var GroupFilter = /** @class */ (function () {
         /**
-         * Listener per gestire il movimento del mouse qualora un'operazione di resize fosse in esecuzione
+         * Costruttore
          *
-         * @param {$event} ev Evento MouseMove
+         * @param {string} column ID della colonna gruppata per cui si richiede di filtrare
+         * @param {string} value Valore del gruppo su questa **column** per cui si richiede di filtrare
          */
-        EsTh.prototype.onMouseMove = function ($event) {
-            if (!this.Resizable || !this.resizingThis)
-                return;
-            //Uso jquery per non dover far partire un intero ciclo di change detection solo per fare un resize del cazzo
-            //(anche perché viene lanciato ogni 0.1 secondo quindi not a good idea)
-            this.myself.nativeElement.style.width = (this.startOffset + $event.pageX) + "px";
-            //Fermo il bubbling per non fare cose strane
-            $event.preventDefault();
-        };
-        return EsTh;
-    }());
-    EsTh.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "[es-th]",
-                    template: "<span (click)=\"setupNextOrderAndNotify()\" [class.app-no-selection]=\"!!ID && Orderable\" [class.app-pointer]=\"!!ID && Orderable\">\r\n    <span #content>\r\n        <ng-container *ngIf=\"Template\">\r\n            <ng-container *ngTemplateOutlet=\"Template\"></ng-container>\r\n        </ng-container>\r\n        <ng-content *ngIf=\"!Template\"></ng-content>\r\n    </span>&nbsp;\r\n    <span class=\"fa\" [class.fa-chevron-down]=\"Order == 'DESC'\" [class.fa-chevron-up]=\"Order == 'ASC'\"></span>\r\n</span>\r\n<span *ngIf=\"Pinned && !Fixed\" class=\"app-pointer fa fa-thumb-tack est-quick-unpin\" (click)=\"unpin()\"></span>\r\n<div [hidden]=\"!Resizable || Fixed || Pinned\" class=\"est-head-resizer\" (mousedown)=\"onResizeStart($event)\">\r\n    <div class=\"est-head-resizer-internal\"></div>\r\n</div>",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    EsTh.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 }
-    ]; };
-    EsTh.propDecorators = {
-        ID: [{ type: i0.Input, args: ['es-th',] }],
-        Order: [{ type: i0.Input }],
-        Orderable: [{ type: i0.Input }],
-        Display: [{ type: i0.Input }],
-        Resizable: [{ type: i0.Input }],
-        Pinned: [{ type: i0.Input }],
-        SearchInProgress: [{ type: i0.Input }],
-        OrderBy: [{ type: i0.Input }],
-        Wrap: [{ type: i0.Input }],
-        Fixed: [{ type: i0.Input }],
-        Template: [{ type: i0.Input }],
-        onOrderChange: [{ type: i0.Output }],
-        onUnpinning: [{ type: i0.Output }],
-        content: [{ type: i0.ViewChild, args: ["content", { static: false },] }],
-        Visible: [{ type: i0.Input }],
-        onMouseUp: [{ type: i0.HostListener, args: ['window:mouseup.out-zone',] }],
-        onMouseMove: [{ type: i0.HostListener, args: ['window:mousemove.out-zone', ['$event'],] }]
-    };
+        function GroupFilter(column, value) {
+            this.column = column;
+            this.value = value;
+        }
+        return GroupFilter;
+    }());
+
+    /** Raccolta di tutti gli Input dell'EsTable a cui può essere logicamente sensato assegnare default per progetto */
+    var EsTableDefaultable = /** @class */ (function () {
+        function EsTableDefaultable() {
+        }
+        return EsTableDefaultable;
+    }());
 
     /** Direttiva per la dichiarazione snella di un EsTd da emettere per ogni elemento, data una colonna */
     var EsTdDirective = /** @class */ (function () {
@@ -1026,6 +603,8 @@
             this.th = "";
             /** Indica se la colonna è pinnata o no */
             this.thPinned = false;
+            /** Indica se la colonna è pinnabile o no */
+            this.thPinnable = true;
             /** Indica le dimensioni che deve avere questa colonna quando viene pinnata, senza questo tutte le colonne mi collasserebbero l'una sull'altra */
             this.thPinnedWidth = 150;
             /** Indicazione sulla visibilità della colonna */
@@ -1060,6 +639,7 @@
     EsThDirective.propDecorators = {
         th: [{ type: i0.Input }],
         thPinned: [{ type: i0.Input }],
+        thPinnable: [{ type: i0.Input }],
         thPinnedWidth: [{ type: i0.Input }],
         thVisible: [{ type: i0.Input }],
         thFixed: [{ type: i0.Input }],
@@ -1076,13 +656,6 @@
         thAggregation: [{ type: i0.Input }]
     };
 
-    /** Token che indica il locale da utilizzare all'interno del componente. Supportati solo "it-IT" ed "en-US" */
-    var EST_LOCALE = new i0.InjectionToken('EST_LOCALE');
-    /** Token che indica se emettere log a console o meno */
-    var EST_DEBUG = new i0.InjectionToken('EST_DEBUG');
-    /** Token che indica i default da assegnare agli Input */
-    var EST_DEFAULTS = new i0.InjectionToken('EST_DEFAULTS');
-
     /** Classe di localizzazione per il componente **EsTableComponent** */
     var EsTableLoc = /** @class */ (function (_super) {
         __extends(EsTableLoc, _super);
@@ -1119,14 +692,184 @@
         { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [EST_LOCALE,] }] }
     ]; };
 
-    /** Raccolta di tutti gli Input dell'EsTable a cui può essere logicamente sensato assegnare default per progetto */
-    var EsTableDefaultable = /** @class */ (function () {
-        function EsTableDefaultable() {
+    /** Classe contenente la gestione delle importazioni */
+    var ExportHandler = /** @class */ (function () {
+        /** @ignore Costruttore*/
+        function ExportHandler(est, expExts, msgExts, utiExts, dateExts) {
+            this.est = est;
+            this.expExts = expExts;
+            this.msgExts = msgExts;
+            this.utiExts = utiExts;
+            this.dateExts = dateExts;
         }
-        return EsTableDefaultable;
+        /**
+         * Effettua l'esportazione dei dati
+         *
+         * @param {string} format Formato di esportazione. Letto solo in modalità Report della tabella
+         */
+        ExportHandler.prototype.tryExport = function (format) {
+            var _this = this;
+            if (!this.est.ExportFunction)
+                return;
+            if (this.est.reportMode)
+                this.est.ExportFunction(format);
+            else
+                this.est.ExportFunction(function (data, cancel) {
+                    if (cancel === void 0) { cancel = false; }
+                    return __awaiter(_this, void 0, void 0, function () {
+                        var _b, _a_1;
+                        var _this = this;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    if (cancel)
+                                        return [2 /*return*/];
+                                    if (data.length == 0) {
+                                        this.msgExts.simpleWarning(this.est.lc.loc("Cannot export an empty dataset"));
+                                        return [2 /*return*/];
+                                    }
+                                    this.setupExport(data);
+                                    if (!(format == "CSV")) return [3 /*break*/, 1];
+                                    this.est.cdr.detectChanges();
+                                    setTimeout(function () { _this.est.exportDownloader.nativeElement.click(); });
+                                    return [3 /*break*/, 7];
+                                case 1:
+                                    if (!(format == "XLSX")) return [3 /*break*/, 6];
+                                    if (this.ExcelJS != null) {
+                                        this.exportExcel();
+                                        return [2 /*return*/];
+                                    }
+                                    _c.label = 2;
+                                case 2:
+                                    _c.trys.push([2, 4, , 5]);
+                                    _b = this;
+                                    return [4 /*yield*/, import('exceljs')];
+                                case 3:
+                                    _b.ExcelJS = _c.sent();
+                                    this.exportExcel();
+                                    return [3 /*break*/, 5];
+                                case 4:
+                                    _a_1 = _c.sent();
+                                    throw "Impossibile caricare la libreria per l'esportazione in Excel";
+                                case 5: return [3 /*break*/, 7];
+                                case 6: throw "Formato di esportazione non riconosciuto";
+                                case 7: return [2 /*return*/];
+                            }
+                        });
+                    });
+                });
+        };
+        /** Effettua l'esportazione del file Excel basandosi sul modulo **ExcelJS**, sugli header **this.est.headers** e sui dati **this.est.data** */
+        ExportHandler.prototype.exportExcel = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var iFix, workbook, sheet, header, i, h, i, row, item, i_1, h, cell, val, buffer, blob, objectUrl, fn;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            iFix = 1;
+                            workbook = new this.ExcelJS.Workbook();
+                            workbook.creator = "Ema's big Es-Table";
+                            workbook.created = new Date();
+                            sheet = workbook.addWorksheet('Data');
+                            header = sheet.getRow(1);
+                            header.font = { bold: true };
+                            this.est.headers = this.est.headers.sort(function (a, b) { return a.order - b.order; });
+                            for (i = 0; i < this.est.headers.length; i++) {
+                                h = this.est.headers[i];
+                                header.getCell(i + iFix).value = h.label;
+                            }
+                            for (i = 0; i < this.est.data.length; i++) {
+                                row = sheet.getRow(i + iFix + 1);
+                                item = this.est.data[i];
+                                for (i_1 = 0; i_1 < this.est.headers.length; i_1++) {
+                                    h = this.est.headers[i_1];
+                                    cell = row.getCell(i_1 + 1);
+                                    val = item[h.key];
+                                    if (val == null || val == undefined)
+                                        cell.value = "";
+                                    else {
+                                        switch (h.type) {
+                                            case 'date':
+                                                cell.value = this.dateExts.getDateConvertion(val).toDate();
+                                            case 'number':
+                                                cell.value = parseFloat(val.replace(',', '.'));
+                                            default:
+                                                cell.value = val;
+                                        }
+                                    }
+                                }
+                            }
+                            return [4 /*yield*/, workbook.xlsx.writeBuffer()];
+                        case 1:
+                            buffer = _b.sent();
+                            blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;" });
+                            objectUrl = window.URL.createObjectURL(blob);
+                            fn = this.est.ExportFileName;
+                            this.utiExts.fileDownload(objectUrl, fn.endsWith('.csv') ? fn.replace('.csv', '.xlsx') : fn.endsWith('.xlsx') ? fn : fn + ".xlsx");
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Metodo che effettivamente genera gli header e i dati per l'esportazione con **ngx-csv**
+         *
+         * @param {any[]} items Oggetti da esportare
+         */
+        ExportHandler.prototype.setupExport = function (items) {
+            var drcd = this.est.DynamicRowColumnsDefinition;
+            this.est.headers = drcd && drcd.length > 0 ? this.expExts.setupForGenericExport(items, drcd.map(function (t) { return { label: t.description, key: t.propertyName, order: t.columnOrder, type: 'string' }; })) : this.expExts.setupForExport(items);
+            this.est.data = items;
+        };
+        return ExportHandler;
     }());
 
-    // Modelli
+    /**
+     * Classe che identifica un ordinamento di una colonna
+     */
+    var AppOrdering = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} id ID della colonna a cui si vogliono applicare ordinamenti, deve combaciare all'id messo nella dichiarazione dell'ES-TD/TH
+         * @param {'DESC' | 'ASC' } order Ordinamento da applicare alla colonna, Discendente/Ascendente, default 'null' per indicare assenza di ordine
+         */
+        function AppOrdering(id, order) {
+            this.id = id;
+            this.order = order;
+        }
+        return AppOrdering;
+    }());
+
+    /** Definizione di una colonna, utilizzato nella dialog che permette di modificare le posizioni e le visibilità */
+    var EsTableColumn = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} id Id colonna
+         * @param {string} description Descrizione (Header)
+         * @param {boolean} visible Indica se di default mostrarla o meno
+         * @param {boolean} fixed Indica se è una colonna fixed
+         * @param {boolean} pinned Indica se è una colonna pinnata
+         * @param {number} pinnedWidth Indica la dimensione da assegnare a questa colonna quando è pinnata
+         * @param {TemplateRef<any>} template Indica il template da usare per mostrare il testo dell'Header
+         * @param {TemplateRef<any>[]} parentTemplates Indica la lista di template padri collegata a questo header
+         */
+        function EsTableColumn(id, description, visible, fixed, pinned, pinnable, pinnedWidth, template, parentTemplates) {
+            this.id = id;
+            this.description = description;
+            this.visible = visible;
+            this.fixed = fixed;
+            this.pinned = pinned;
+            this.pinnable = pinnable;
+            this.pinnedWidth = pinnedWidth;
+            this.template = template;
+            this.parentTemplates = parentTemplates;
+        }
+        return EsTableColumn;
+    }());
+
+    // Angular
     /** Classe che gestisce tutte le informaizoni relative alle colonne: visibilità, posizione, stato di pin/unpin, ecc ecc... */
     var ColumnMetadataHandler = /** @class */ (function () {
         /** @ignore Costruttore*/
@@ -1191,7 +934,7 @@
          *
          * Costo: 1 scan EsThs
          *
-         * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
+         * @param {EsThDirective[]} ths Colonne della tabella
          */
         ColumnMetadataHandler.prototype.reviewColumnsList = function (ths) {
             var _this = this;
@@ -1200,30 +943,18 @@
                 return;
             var _loop_1 = function (i) {
                 var th = ths[i];
-                if (this_1.utilities.isEsTh(th)) {
-                    // Se non ho un id il th è considerato inerte
-                    if (!th.ID)
-                        return "continue";
-                    th.OrderBy = this_1.est.OrderByColumn;
-                    // Salvo le informazioni dell'header per far parte della lista da cui scegliere quali colonne visualizzare/nascondere
-                    // Di default la visibilità è quella impostata nel componente
-                    if (this_1.est.HiddenColumns || th.Visible)
-                        this_1.est.TMPColumnsList.push(new EsTableColumn(th.ID, th.Description, th.Visible, th.Fixed));
-                }
-                else {
-                    var column_1 = th.th;
-                    // Se non ho un id il th è considerato inerte
-                    if (!column_1)
-                        return "continue";
-                    // Salvo le informazioni dell'header per far parte della lista da cui scegliere quali colonne visualizzare/nascondere
-                    // Di default la visibilità è quella impostata nel componente
-                    if ((this_1.est.HiddenColumns || th.thVisible) && th.thIf) {
-                        var previouslyPinned = !this_1.est.ColumnsList || this_1.est.ColumnsList.length == 0 ? null : this_1.est.ColumnsList.find(function (t) { return t.id == column_1; }) || null;
-                        var toAdd = new EsTableColumn(column_1, null, th.thVisible, (th.thFixed || th.thGroup), previouslyPinned == null ? th.thPinned : previouslyPinned.pinned, th.thPinnedWidth, th.Template, th._thParents);
-                        if (previouslyPinned)
-                            toAdd.prev_index = previouslyPinned.prev_index;
-                        this_1.est.TMPColumnsList.push(toAdd);
-                    }
+                var column = th.th;
+                // Se non ho un id il th è considerato inerte
+                if (!column)
+                    return "continue";
+                // Salvo le informazioni dell'header per far parte della lista da cui scegliere quali colonne visualizzare/nascondere
+                // Di default la visibilità è quella impostata nel componente
+                if ((this_1.est.HiddenColumns || th.thVisible) && th.thIf) {
+                    var previouslyPinned = !this_1.est.ColumnsList || this_1.est.ColumnsList.length == 0 ? null : this_1.est.ColumnsList.find(function (t) { return t.id == column; }) || null;
+                    var toAdd = new EsTableColumn(column, null, th.thVisible, (th.thFixed || th.thGroup), previouslyPinned == null ? th.thPinned : previouslyPinned.pinned, th.thPinnable, th.thPinnedWidth, th.Template, th._thParents);
+                    if (previouslyPinned)
+                        toAdd.prev_index = previouslyPinned.prev_index;
+                    this_1.est.TMPColumnsList.push(toAdd);
                 }
             };
             var this_1 = this;
@@ -1263,33 +994,21 @@
             // Sposto tutti gli header fixed o pinned all'inizio
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
-                if (this.utilities.isEsTh(th)) {
-                    thsCache[th.ID] = th;
-                    if (th.Fixed) {
-                        if (i != pinneds + fixeds)
-                            this.utilities.arrayMove(ths, i, pinneds + fixeds);
-                        fixeds++;
-                    }
+                thsCache[th.th] = th;
+                // Riassegno sempre per ripulire valori di partenza o per aggiornarli in caso di modifiche utente
+                th.thPinned = (!columnsCache[th.th] && th.thPinned) || (columnsCache[th.th] && columnsCache[th.th].pinned);
+                if (th.thPinned) {
+                    if (i != pinneds)
+                        this.utilities.arrayMove(ths, i, pinneds);
+                    pinneds++;
                 }
-                else {
-                    thsCache[th.th] = th;
-                    // Riassegno sempre per ripulire valori di partenza o per aggiornarli in caso di modifiche utente
-                    th.thPinned = (!columnsCache[th.th] && th.thPinned) || (columnsCache[th.th] && columnsCache[th.th].pinned);
-                    if (th.thPinned) {
-                        if (i != pinneds)
-                            this.utilities.arrayMove(ths, i, pinneds);
-                        pinneds++;
-                    }
-                    //In questo caso sono informazioni statiche invece, non modificabili dall'utente, quindi non mi dò preoccupazioni
-                    if ((th.thFixed || th.thGroup) && !th.thPinned) {
-                        if (i != pinneds + fixeds)
-                            this.utilities.arrayMove(ths, i, pinneds + fixeds);
-                        fixeds++;
-                    }
+                //In questo caso sono informazioni statiche invece, non modificabili dall'utente, quindi non mi dò preoccupazioni
+                if ((th.thFixed || th.thGroup) && !th.thPinned) {
+                    if (i != pinneds + fixeds)
+                        this.utilities.arrayMove(ths, i, pinneds + fixeds);
+                    fixeds++;
                 }
             }
-            if (this.utilities.isEsTh(ths[0]) || this.utilities.isEsTd(tds[0]))
-                return;
             // Cache degli indici per riposizionare i td come i th
             for (var i = 0; i < ths.length; i++)
                 columnsIndexCache[ths[i].th] = i;
@@ -1376,8 +1095,8 @@
          *
          * Costo: 1 scan ColumnsList, 1 scan EsThs, 1 scan EsTds
          *
-         * @param {EsTh[] | EsThDirective[]} ths Header della tabella
-         * @param {EsTd[] | EsTdDirective[]} tds Celle della tabella
+         * @param {EsThDirective[]} ths Header della tabella
+         * @param {EsTdDirective[]} tds Celle della tabella
          * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
          */
         ColumnMetadataHandler.prototype.refreshColumnsVisibility = function (ths, tds, view) {
@@ -1399,26 +1118,16 @@
                 // Definisco se la colonna è visibile in base alla sua rappresentazione locale in ColumnsList
                 for (var i = 0; i < ths.length; i++) {
                     var th = ths[i];
-                    if (this.utilities.isEsTh(th)) {
-                        th.Visible = th.Fixed || (columnsCache[th.ID] ? columnsCache[th.ID].visible : th.Visible);
-                        if (th.Fixed)
-                            fixedThs[th.ID] = true;
-                    }
-                    else {
-                        th.thVisible = th.thFixed || (columnsCache[th.th] ? columnsCache[th.th].visible : th.thVisible);
-                        if (th.thFixed || th.thGroup)
-                            fixedThs[th.th] = true;
-                    }
+                    th.thVisible = th.thFixed || (columnsCache[th.th] ? columnsCache[th.th].visible : th.thVisible);
+                    if (th.thFixed || th.thGroup)
+                        fixedThs[th.th] = true;
                 }
             }
             if (tds) {
                 // Definisco se la cella è visibile in base alla sua rappresentazione locale in ColumnsList
                 for (var i = 0; i < tds.length; i++) {
                     var td = tds[i];
-                    if (this.utilities.isEsTd(td))
-                        td.Visible = fixedThs[td.ID] || (columnsCache[td.ID] ? columnsCache[td.ID].visible : td.Visible);
-                    else
-                        td.tdVisible = fixedThs[td.td] || (columnsCache[td.td] ? columnsCache[td.td].visible : td.tdVisible);
+                    td.tdVisible = fixedThs[td.td] || (columnsCache[td.td] ? columnsCache[td.td].visible : td.tdVisible);
                 }
             }
             this.est.changed();
@@ -1427,38 +1136,26 @@
          * Allinea gli ordinamenti dati fra le **EsThs** e le informazioni all'interno della View bindata
          *
          * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
-         * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
+         * @param {EsThDirective[]} ths Colonne della tabella
          */
         ColumnMetadataHandler.prototype.alignHeadersOrdering = function (ths, view) {
             var orders = view ? view.orders : this.est.arrayOrders;
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
-                if (this.utilities.isEsTh(th)) {
-                    th.Order = null;
-                    // Assegno tutti gli ordinamenti che mi vengono da AppSearch. Sono i più importanti. Non faccio cache o cose strano perché tanto questa
-                    // variabile sarà sempre massimo 3 elementi
-                    for (var i_1 = 0; i_1 < orders.length; i_1++) {
-                        var or = orders[i_1];
-                        if (or.id == th.ID)
-                            th.Order = or.order;
-                    }
-                }
-                else {
-                    th.thOrder = null;
-                    for (var i_2 = 0; i_2 < orders.length; i_2++) {
-                        var or = orders[i_2];
-                        if (or.id == th.th)
-                            th.thOrder = or.order;
-                    }
+                th.thOrder = null;
+                for (var i_1 = 0; i_1 < orders.length; i_1++) {
+                    var or = orders[i_1];
+                    if (or.id == th.th)
+                        th.thOrder = or.order;
                 }
             }
         };
         /**
          * Genera tutte le informazioni che servono per gestire il raggruppamento degli header
          *
-         * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
+         * @param {EsThDirective[]} ths Colonne della tabella
          *
-         * @returns {{ leafs: EsTh[] | EsThDirective[], groupingLevel: number, parentsCache: any, thsCache: any }} Oggetto contenente la lista delle foglie (header base), il livello
+         * @returns {{ leafs: EsThDirective[], groupingLevel: number, parentsCache: any, thsCache: any }} Oggetto contenente la lista delle foglie (header base), il livello
          * massimo di raggruppamento raggiunto, una cache in cui vengono indicati tutti i gruppi che sono "parent" (quindi che raggruppano almeno 1 header) e la cache degli header
          */
         ColumnMetadataHandler.prototype.evaluateHeadersGroupingInfos = function (ths) {
@@ -1467,8 +1164,6 @@
             var thsCache = {};
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
-                if (this.utilities.isEsTh(th))
-                    continue;
                 thsCache[th.th] = th;
                 if (th.thParent && !parentsCache[th.thParent])
                     parentsCache[th.thParent] = true;
@@ -1478,10 +1173,6 @@
             var leafs = [];
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
-                if (this.utilities.isEsTh(th)) {
-                    leafs.push(th);
-                    continue;
-                }
                 // Se sono una foglia vedo quanti livelli ci sono sopra
                 if (!parentsCache[th.th]) {
                     leafs.push(th);
@@ -1494,7 +1185,7 @@
         /**
          * Genera gli header groups da una lista di info sui th all'interno della variabile **TMPRowThGroups**
          *
-         * @param {{ leafs: EsTh[] | EsThDirective[], groupingLevel: number, parentsCache: any, thsCache: any }} infos Informazioni di raggruppamento valutate precedentemente
+         * @param {{ leafs: EsThDirective[], groupingLevel: number, parentsCache: any, thsCache: any }} infos Informazioni di raggruppamento valutate precedentemente
          */
         ColumnMetadataHandler.prototype.evaluateHeaderGroups = function (infos) {
             if (infos.groupingLevel == 0)
@@ -1601,7 +1292,7 @@
             if (!orderings || orderings.length == 0) {
                 for (var i = 0; i < ths.length; i++) {
                     var th = ths[i];
-                    var order = this.utilities.isEsTh(th) ? th.ID : th.th;
+                    var order = th.th;
                     this.est.OrderDirectives.push(order);
                 }
             }
@@ -1609,7 +1300,7 @@
                 this.est.OrderDirectives = orderings;
                 var _loop_2 = function (i) {
                     var th = ths[i];
-                    var thId = this_2.utilities.isEsTh(th) ? th.ID : th.th;
+                    var thId = th.th;
                     if (!this_2.est.OrderDirectives.find(function (o) { return o == thId; }))
                         this_2.est.OrderDirectives.push(thId);
                 };
@@ -1862,7 +1553,46 @@
         return ColumnMetadataHandler;
     }());
 
-    // Dominio
+    /** Classe che identifica una colonna. Utilizzata in modalità "Colonne dinamiche" */
+    var EsTableColumnsDefinition = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} description Descrizione della colonna
+         * @param {string} propertyName Nome della proprietà del modello in cui sono contenuti i dati da visualizzare per questa colonna
+         * @param {string} routePath Route di navigazione. Es. "['/pages/mod/mod_detail', { 'idItem': '{0}', 'idItem2' : '{1}' }]"
+         * @param {string[]} routeParameterProperties Proprietà da bindare a **routePath** per generare la route completa.
+         * L'indice scritto in **routePath** è l'indice di accesso a questo array. Es. ["iditem", "iditem2"]
+         * @param {'ASC' | 'DESC' } dataOrder Ordinamento dei dati presentati in questa colonna
+         * @param {number} columnOrder Ordinamento di questa colonna
+         * @param {boolean} visible Visibilità o meno della colonna
+         * @param {string} clss Classe da applicare sia ai TD che ai TH relativi a questa colonna
+         * @param {boolean} orderable Indica se la colonna è ordinabile o no (nel senso ASC / DESC / NONE)
+         * @param {boolean} headerWraps Indica se il testo dell'header dev'essere wrappato all'interno del th. Di default no.
+         */
+        function EsTableColumnsDefinition(description, propertyName, routePath, routeParameterProperties, dataOrder, columnOrder, visible, clss, orderable, headerWraps) {
+            if (routePath === void 0) { routePath = null; }
+            if (routeParameterProperties === void 0) { routeParameterProperties = null; }
+            if (dataOrder === void 0) { dataOrder = null; }
+            if (columnOrder === void 0) { columnOrder = null; }
+            if (visible === void 0) { visible = true; }
+            if (clss === void 0) { clss = null; }
+            if (orderable === void 0) { orderable = true; }
+            if (headerWraps === void 0) { headerWraps = false; }
+            this.description = description;
+            this.propertyName = propertyName;
+            this.routePath = routePath;
+            this.routeParameterProperties = routeParameterProperties;
+            this.dataOrder = dataOrder;
+            this.columnOrder = columnOrder;
+            this.visible = visible;
+            this.clss = clss;
+            this.orderable = orderable;
+            this.headerWraps = headerWraps;
+        }
+        return EsTableColumnsDefinition;
+    }());
+
     /** Classe contenente le gestioni particolari della modalità dinamica dell'es-table */
     var DynamicModeHandler = /** @class */ (function () {
         /** @ignore Costruttore*/
@@ -1926,138 +1656,6 @@
         return DynamicModeHandler;
     }());
 
-    /** Classe contenente la gestione delle importazioni */
-    var ExportHandler = /** @class */ (function () {
-        /** @ignore Costruttore*/
-        function ExportHandler(est, expExts, msgExts, utiExts, dateExts) {
-            this.est = est;
-            this.expExts = expExts;
-            this.msgExts = msgExts;
-            this.utiExts = utiExts;
-            this.dateExts = dateExts;
-        }
-        /**
-         * Effettua l'esportazione dei dati
-         *
-         * @param {string} format Formato di esportazione. Letto solo in modalità Report della tabella
-         */
-        ExportHandler.prototype.tryExport = function (format) {
-            var _this = this;
-            if (!this.est.ExportFunction)
-                return;
-            if (this.est.reportMode)
-                this.est.ExportFunction(format);
-            else
-                this.est.ExportFunction(function (data, cancel) {
-                    if (cancel === void 0) { cancel = false; }
-                    return __awaiter(_this, void 0, void 0, function () {
-                        var _b, _a_1;
-                        var _this = this;
-                        return __generator(this, function (_c) {
-                            switch (_c.label) {
-                                case 0:
-                                    if (cancel)
-                                        return [2 /*return*/];
-                                    if (data.length == 0) {
-                                        this.msgExts.simpleWarning(this.est.lc.loc("Cannot export an empty dataset"));
-                                        return [2 /*return*/];
-                                    }
-                                    this.setupExport(data);
-                                    if (!(format == "CSV")) return [3 /*break*/, 1];
-                                    this.est.cdr.detectChanges();
-                                    setTimeout(function () { _this.est.exportDownloader.nativeElement.click(); });
-                                    return [3 /*break*/, 7];
-                                case 1:
-                                    if (!(format == "XLSX")) return [3 /*break*/, 6];
-                                    if (this.ExcelJS != null) {
-                                        this.exportExcel();
-                                        return [2 /*return*/];
-                                    }
-                                    _c.label = 2;
-                                case 2:
-                                    _c.trys.push([2, 4, , 5]);
-                                    _b = this;
-                                    return [4 /*yield*/, import('exceljs')];
-                                case 3:
-                                    _b.ExcelJS = _c.sent();
-                                    this.exportExcel();
-                                    return [3 /*break*/, 5];
-                                case 4:
-                                    _a_1 = _c.sent();
-                                    throw "Impossibile caricare la libreria per l'esportazione in Excel";
-                                case 5: return [3 /*break*/, 7];
-                                case 6: throw "Formato di esportazione non riconosciuto";
-                                case 7: return [2 /*return*/];
-                            }
-                        });
-                    });
-                });
-        };
-        /** Effettua l'esportazione del file Excel basandosi sul modulo **ExcelJS**, sugli header **this.est.headers** e sui dati **this.est.data** */
-        ExportHandler.prototype.exportExcel = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var iFix, workbook, sheet, header, i, h, i, row, item, i_1, h, cell, val, buffer, blob, objectUrl, fn;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            iFix = 1;
-                            workbook = new this.ExcelJS.Workbook();
-                            workbook.creator = "Ema's big Es-Table";
-                            workbook.created = new Date();
-                            sheet = workbook.addWorksheet('Data');
-                            header = sheet.getRow(1);
-                            header.font = { bold: true };
-                            this.est.headers = this.est.headers.sort(function (a, b) { return a.order - b.order; });
-                            for (i = 0; i < this.est.headers.length; i++) {
-                                h = this.est.headers[i];
-                                header.getCell(i + iFix).value = h.label;
-                            }
-                            for (i = 0; i < this.est.data.length; i++) {
-                                row = sheet.getRow(i + iFix + 1);
-                                item = this.est.data[i];
-                                for (i_1 = 0; i_1 < this.est.headers.length; i_1++) {
-                                    h = this.est.headers[i_1];
-                                    cell = row.getCell(i_1 + 1);
-                                    val = item[h.key];
-                                    if (val == null || val == undefined)
-                                        cell.value = "";
-                                    else {
-                                        switch (h.type) {
-                                            case 'date':
-                                                cell.value = this.dateExts.getDateConvertion(val).toDate();
-                                            case 'number':
-                                                cell.value = parseFloat(val.replace(',', '.'));
-                                            default:
-                                                cell.value = val;
-                                        }
-                                    }
-                                }
-                            }
-                            return [4 /*yield*/, workbook.xlsx.writeBuffer()];
-                        case 1:
-                            buffer = _b.sent();
-                            blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;" });
-                            objectUrl = window.URL.createObjectURL(blob);
-                            fn = this.est.ExportFileName;
-                            this.utiExts.fileDownload(objectUrl, fn.endsWith('.csv') ? fn.replace('.csv', '.xlsx') : fn.endsWith('.xlsx') ? fn : fn + ".xlsx");
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        /**
-         * Metodo che effettivamente genera gli header e i dati per l'esportazione con **ngx-csv**
-         *
-         * @param {any[]} items Oggetti da esportare
-         */
-        ExportHandler.prototype.setupExport = function (items) {
-            var drcd = this.est.DynamicRowColumnsDefinition;
-            this.est.headers = drcd && drcd.length > 0 ? this.expExts.setupForGenericExport(items, drcd.map(function (t) { return { label: t.description, key: t.propertyName, order: t.columnOrder, type: 'string' }; })) : this.expExts.setupForExport(items);
-            this.est.data = items;
-        };
-        return ExportHandler;
-    }());
-
     /** Classe contenente la gestione della modalità gerarchica */
     var HierarchyModeHandler = /** @class */ (function () {
         /** @ignore Costruttore*/
@@ -2303,24 +1901,6 @@
             }
             return tmpItems;
         };
-        /**
-         * Metodo che prende tutti gli oggetti di cui dispone divisi in bucket da 100 elementi
-         *
-         * @returns {any[][]} Matrice di array Nx100
-         */
-        ItemsHandler.prototype.getItemSlices = function () {
-            // Se sono qui di sicuro non ho rowgrouping
-            var items = this.getItemsByMode();
-            if (!items)
-                return [];
-            var arrayBy100 = [];
-            var slices = Math.ceil(items.length / this.est.SliceSize);
-            for (var i = 0; i < slices; i++) {
-                var arraySlice = items.slice(i * this.est.SliceSize, i * this.est.SliceSize + this.est.SliceSize);
-                arrayBy100.push(arraySlice);
-            }
-            return arrayBy100;
-        };
         /** Se in modalità array applica gli ordinamenti ASC-DESC delle colonne */
         ItemsHandler.prototype.arrayModeReviewOrderings = function () {
             var _this = this;
@@ -2330,7 +1910,13 @@
         return ItemsHandler;
     }());
 
-    // Modelli
+    /** Classe che identifica una direttiva di ordinamento per un report */
+    var ReportOrder = /** @class */ (function () {
+        function ReportOrder() {
+        }
+        return ReportOrder;
+    }());
+
     /** Classe che gestisce la modalità Report dell'es-table utilizzata nel Metering */
     var ReportModeHandler = /** @class */ (function () {
         /** @ignore Costruttore */
@@ -2401,6 +1987,99 @@
         return ReportModeHandler;
     }());
 
+    /** Classe che rappresenta un Gruppo con le proprie aggregazioni */
+    var Group = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} column ID della colonna raggruppata
+         * @param {number} count Numero di elementi raggruppati sotto questa colonna
+         * @param {string} value Valore del Gruppo
+         */
+        function Group(column, count, value) {
+            this.column = column;
+            this.count = count;
+            this.value = value;
+            this.aggregations = [];
+        }
+        return Group;
+    }());
+
+    /** Classe che rappresenta un'aggregazione */
+    var GroupAggregation = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} column ID della colonna aggregata
+         * @param {'min' | 'max' | 'sum' } aggregation Aggregazione da effettuare su questa colonna
+         * @param {string} value Valore dell'aggregazione
+         */
+        function GroupAggregation(column, aggregation, value) {
+            this.column = column;
+            this.aggregation = aggregation;
+            this.value = value;
+        }
+        return GroupAggregation;
+    }());
+
+    /** Classe che rappresenta o un gruppo o una aggregazione su una colonna. Usata solo internamente */
+    var GroupOrAggregation = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} column Colonna su cui è presente o un gruppo o un'aggregazione
+         * @param {'min' | 'max' | 'sum' } aggregation Aggregazione presente sulla **column**. Se questo campo è nullo significa che è un gruppo.
+         * @param {'string' | 'date' | 'number'} datatype Tipo di dati contenuto nella colonna **column** se non c'è alcuna aggregazione è inutile, pertanto non sarà valorizzato
+         */
+        function GroupOrAggregation(column, aggregation, datatype) {
+            this.column = column;
+            this.aggregation = aggregation;
+            this.datatype = datatype;
+        }
+        return GroupOrAggregation;
+    }());
+
+    /** Classe che rappresenta un separatore da inserire fra gli oggetti dell'es-table per le operazioni di paginazione dei raggruppamenti per riga */
+    var GroupPager = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {number} groupLevel Livello del gruppo a cui questo separatore fa riferimento
+         * @param {string} parentKey Chiave del gruppo parent se esiste
+         * @param {AppSearch<any>} view Vista di ricerca collegata a questo elemento
+         * @param {'groups' | 'items'} searches Indica che cosa cerca questo separatore, se sottogruppi o oggetti
+         */
+        function GroupPager(_grouplevel, _thisRoute, _parent, view, searches) {
+            this._grouplevel = _grouplevel;
+            this._thisRoute = _thisRoute;
+            this._parent = _parent;
+            this.view = view;
+            this.searches = searches;
+            this._sep = true;
+            this.buttons = [];
+            this._thisKey = _parent + "_sep";
+        }
+        return GroupPager;
+    }());
+
+    /**
+     * Classe che rappresenta un singolo frammento di route di un elemento gruppo o non. Un array di questi indica tutte le colonne di gruppo con i loro valori
+     * per arrivare ad una ricerca su sottogruppi o elementi relativi
+     */
+    var GroupRouteFragment = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} column Colonna di raggruppamento
+         * @param {string} value Valore della colonna di raggruppamento
+         */
+        function GroupRouteFragment(column, value) {
+            this.column = column;
+            this.value = value;
+        }
+        return GroupRouteFragment;
+    }());
+
     /** Classe che gestisce la modalità Row Grouping dell'es-table */
     var RowGroupingHandler = /** @class */ (function () {
         /** @ignore Costruttore */
@@ -2449,7 +2128,7 @@
                 this.est.BaseItemsCount = view.objectcount;
             }
             else {
-                // 2) Se viene richiesto il dettaglio di un qualsiasi gruppo diverso dall'ultimo vuol dire che devo aggiungere 
+                // 2) Se viene richiesto il dettaglio di un qualsiasi gruppo diverso dall'ultimo vuol dire che devo aggiungere
                 //    dopo al gruppo che ho cliccato la lista dei gruppi tirata fuori questa volta (intermediateGroup = true)
                 /*
                 *   GruppoA                      GruppoA
@@ -2460,7 +2139,7 @@
                 *                                GruppoD
                 *                                GruppoE
                 */
-                // 3) se i gruppi richiesti dalla view sono uguali ai gruppi presenti vuol dire che sto prendendo gli oggetti veri e propri, sono in 
+                // 3) se i gruppi richiesti dalla view sono uguali ai gruppi presenti vuol dire che sto prendendo gli oggetti veri e propri, sono in
                 // view.items e quindi in TMPBoundSource, ho inoltre le informazioni di paginazione **per il singolo sottogruppo** (intermediateGroup = false)
                 /*
                 *   GruppoA                         GruppoA
@@ -2556,15 +2235,20 @@
                         itemsCacheReference_1.push(itm);
                     }
                 });
-                // Elimino gli oggetti vecchi 
+                // Elimino gli oggetti vecchi
                 // 1) Ricerca intermedia, stato salvato - Elimino tutti gli item e tutti i gruppi la cui route è più lunga della corrente, tutti gli item relativi alla path corrente, e tutte
                 //    le cache di ricerca effettuate su una path più profonda dell'attuale
                 // 2) Ricerca finale o ricerca intermedia senza stato salvato - Elimino tutti gli item relativi alla path corrente
-                // Per "stato salvato" si intendono ricerche vecchie salvate per poter essere rieffettuate in caso di ordinamenti su colonne di interesse 
+                // Per "stato salvato" si intendono ricerche vecchie salvate per poter essere rieffettuate in caso di ordinamenti su colonne di interesse
                 if (intermediateGroup_1 && view.savedstate) {
                     this.est.boundSource = this.est.boundSource.filter(function (t) { return !(t._item || t._thisRoute.length > groupRoute_1.length); });
                     this.est.groupSearchRequestsCache = this.est.groupSearchRequestsCache.filter(function (t) { return !(t.route.length > groupRoute_1.length); });
                 }
+                else if (intermediateGroup_1) {
+                    // Se invece lo stato non è salvato vuol dire che c'è stato un cambio di pagina interno ad un gruppo già aperto:
+                    // - Elimino tutti gli elementi riconducibili a questo gruppo che erano già presenti
+                    this.est.boundSource = this.est.boundSource.filter(function (t) { return !(t._item || (t._thisKey.startsWith(groupKey_1) && t._thisKey != groupKey_1)); });
+                }
                 this.est.boundSource = this.est.boundSource.filter(function (t) { return !(t._parent == groupKey_1); });
                 var thisGroup = this.est.boundSource[insertIndex];
                 if (intermediateGroup_1)
@@ -2586,13 +2270,11 @@
         /**
          * Se in modalità array applica i raggruppamenti definiti lato row-grouping
          *
-         * @param {ths: EsTh[] | EsThDirective[]} ths Header
+         * @param {ths: EsThDirective[]} ths Header
          */
         RowGroupingHandler.prototype.arrayModeReviewGroupings = function (ths) {
             if (ths.length == 0)
                 return;
-            if (this.utilities.isEsTh(ths[0]))
-                return;
             var headerGroups = [];
             var headerAggregations = [];
             for (var i = 0; i < ths.length; i++) {
@@ -2702,7 +2384,7 @@
                     anygp._thisKey = parent._thisKey + gp.value;
                     anygp._grouplevel = parent._grouplevel + 1;
                 }
-                // Pusho il gruppo, tutti i gruppi del livello sotto, o gli item se io sono l'ultimo gruppo. 
+                // Pusho il gruppo, tutti i gruppi del livello sotto, o gli item se io sono l'ultimo gruppo.
                 // La visibilità è solo per il gruppo a livello 0, tutti gli altri gruppi saranno mostrati o nascosti di conseguenza
                 if (currentIndex == 0)
                     anygp._visible = true;
@@ -2905,6 +2587,23 @@
         return RowGroupingHandler;
     }());
 
+    /** Rappresenta un trittico formato da un array e due cache relative a tale array per un accesso estremamente veloce per tutte le operazioni del caso */
+    var CacheTriptic = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {Map<string, any>} cache Cache Chiave-Oggetto
+         * @param {Map<string, number>} index_cache Cache Indice-Oggetto
+         * @param {any[]} array Array contenente gli oggetti
+         */
+        function CacheTriptic(cache, index_cache, array) {
+            this.cache = cache;
+            this.index_cache = index_cache;
+            this.array = array;
+        }
+        return CacheTriptic;
+    }());
+
     /** Classe che gestisce le selezioni degli oggetti */
     var SelectionHandler = /** @class */ (function () {
         /** @ignore Costruttore */
@@ -3525,20 +3224,6 @@
                 throw "Gli indici passati non fanno riferimento a una posizione dell'array. Length: " + array.length + " Old:" + oldI + " New: " + newI;
             array.splice(newI, 0, array.splice(oldI, 1)[0]);
         };
-        /**
-         * Helper che identifica se il td attuale è di tipo **EsTd**. In caso contrario è da considerarsi **EsTdDirective**
-         *
-         * @param {any} td Cella da valutare
-         * @returns {boolean} Restituisce **true** se il **td** è di tipo **EsTd**, **false** se è di tipo **EsTdDirective**
-         */
-        UtilitiesHandler.prototype.isEsTd = function (td) { return !td._directive; };
-        /**
-         * Helper che identifica se il th attuale è di tipo **EsTh**. In caso contrario è da considerarsi **EsThDirective**
-         *
-         * @param {any} td Header da valutare
-         * @returns {boolean} Restituisce **true** se il **th** è di tipo **EsTh**, **false** se è di tipo **EsThDirective**
-         */
-        UtilitiesHandler.prototype.isEsTh = function (th) { return !th._directive; };
         /**
          * Date le informazioni di paginazione ottiene l'array dei pulsanti
          *
@@ -3646,7 +3331,7 @@
     var EsTableComponent = /** @class */ (function () {
         /** @ignore */
         function EsTableComponent(ngControl, prefService, deafults, locale, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             this.ngControl = ngControl;
             this.prefService = prefService;
             this.deafults = deafults;
@@ -3735,28 +3420,10 @@
             this.CornerMenuOptions = null;
             /** Indica se dev'essere possibile effettuare il resize delle colonne */
             this.ColumnsResizable = null;
+            /** Indica se dev'essere possibile effettuare il pinning delle colonne */
+            this.ColumnsPinnable = null;
             /** Indica se dev'essere disponibile il sistema di aggiornamento automatico */
             this.AutoUpdate = null;
-            /** Indica se la tabella (configurata con **UseCustomCells**) deve mettersi in ascolto per i click sulle celle desiderate
-             *
-             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
-             */
-            this.UseCustomCellActions = null;
-            /**
-             * Indica le celle desiderate su cui intercettare i click. Attiva solo quando **UseCustomCellActions** è true.
-             * Ogni cella dev'essere separata dalla successiva dal carattere del Simoleon:
-             *
-             * Es, "MiaCella1§MiaCella2"
-             *
-             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
-             */
-            this.CustomCellActionsOn = '';
-            /**
-             * Serve per decidere di lanciare o meno il **event.stopPropagation()** al termine della gestione dell'evento
-             *
-             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
-             */
-            this.CellActionPropagates = true;
             /**
              * Decide se utilizzare o meno le CustomCells. Impostandolo a **true** l'es-table diventa in grado di gestire nativamente:
              *
@@ -3815,12 +3482,6 @@
             this.HasHeaderGroup = null;
             /** Indica la presenza di raggruppamenti a livello del raggruppamento precedentemente esistente, chiaramente è insensata senza **HasHeaderGroup** */
             this.HasSecondaryHeaderGroup = null;
-            /** Utilizzato per dividere la sorgente in modalità EndlessScroll */
-            this.SliceSize = 100;
-            /** Decide se utilizzare la modalità di EndlessScroll */
-            this.EndlessScroll = null;
-            /** Qualora **EndlessScroll** fosse true, indica se utilizzare questa modalità solo quando si cerca per "Tutti" o in generale */
-            this.EndlessScrollOnlyForAll = true;
             /** Indica se nascondere gli Header della tabella */
             this.HeaderHidden = null;
             /** Indica se nascondere il Body della tabella */
@@ -3903,11 +3564,6 @@
             this.onRemoval = new i0.EventEmitter();
             /** Evento richiamato all'annullamento di un'eliminazione */
             this.onAbortRemoval = new i0.EventEmitter();
-            /** Evento richiamato al click su una cella quando **UseCustomCellActions** è attivo
-             *
-             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
-             */
-            this.onCellClick = new i0.EventEmitter();
             /** Evento richiamato quando si clicca su un opzione definita nelle **CornerMenuOptions** */
             this.onCornerAction = new i0.EventEmitter();
             /** Evento richiamato quando si clicca su un opzione definita nelle **DynamicOperations** */
@@ -3991,14 +3647,11 @@
             this.UseSelectionCache = this.utilities_H.InputOrDefault(this.UseSelectionCache, (_p = this.deafults) === null || _p === void 0 ? void 0 : _p.UseSelectionCache, true);
             this.ShowItemGroupsColumns = this.utilities_H.InputOrDefault(this.ShowItemGroupsColumns, (_q = this.deafults) === null || _q === void 0 ? void 0 : _q.ShowItemGroupsColumns, false);
             this.ArraymodeItemsPerPage = this.utilities_H.InputOrDefault(this.ArraymodeItemsPerPage, (_r = this.deafults) === null || _r === void 0 ? void 0 : _r.ArraymodeItemsPerPage, 15);
+            this.ColumnsPinnable = this.utilities_H.InputOrDefault(this.ColumnsPinnable, (_s = this.deafults) === null || _s === void 0 ? void 0 : _s.ColumnsPinnable, true);
         }
         /** @ignore */
         EsTableComponent.prototype.ngOnInit = function () {
             var _this = this;
-            //Per poter cambiare il layout in base al livello gerarchico il componente deva avere il pieno controllo di ogni cella,
-            //che con solo la proiezione (senza celle cusotm) non è disponibile
-            if (this.Hierarchy && !this.UseCustomCells)
-                throw "Es-table error: Per poter utilizzare l'es-table con [Hierarchy]=\"true\" è richiesto anche [UseCustomCells]=\"true\"";
             // click destro su una riga con selezione attiva: Tiro fuori il context menu e selezione l'elemento corrente
             this.ctxMenuSubscription = (this.ContextMenu || this.tableEmptyMenu).open.subscribe(function (t) {
                 // Gruppi va bene, oggetti pure, ma separatori fra gruppi proprio no...
@@ -4031,6 +3684,10 @@
                     this.ShiftClick = true;
                 this.DirectivesBased = true;
             }
+            //Per poter cambiare il layout in base al livello gerarchico il componente deva avere il pieno controllo di ogni cella,
+            //che con solo la proiezione (senza celle cusotm) non è disponibile
+            if (this.Hierarchy && !this.UseCustomCells)
+                throw "Es-table error: Per poter utilizzare l'es-table con [Hierarchy]=\"true\" è richiesto anche [UseCustomCells]=\"true\"";
         };
         /** @ignore */
         EsTableComponent.prototype.ngOnDestroy = function () {
@@ -4041,7 +3698,7 @@
         EsTableComponent.prototype.ngOnChanges = function (changes) {
             return __awaiter(this, void 0, void 0, function () {
                 var newSearchView;
-                return __generator(this, function (_s) {
+                return __generator(this, function (_t) {
                     newSearchView = changes['SearchView'];
                     if (newSearchView && this.SearchView)
                         this.arrayPulsanti = this.utilities_H.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1, this.SearchView.items.length, this.SearchView.itemsperpageoverride);
@@ -4060,8 +3717,8 @@
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var firstItemGroupOrNoGrouping, prefs, prefs;
-                return __generator(this, function (_s) {
-                    switch (_s.label) {
+                return __generator(this, function (_t) {
+                    switch (_t.label) {
                         case 0:
                             this.View = obj ? obj : null;
                             // Mi è arrivata l'AppSearch quindi di sicuro non ho una ricerca in progress
@@ -4111,10 +3768,10 @@
                             return [3 /*break*/, 5];
                         case 3: return [4 /*yield*/, this.prefService.getItem(this.ngControl.name).toPromise()];
                         case 4:
-                            prefs = _s.sent();
+                            prefs = _t.sent();
                             this.View.columns = (prefs === null || prefs === void 0 ? void 0 : prefs.columns) || [];
                             this.View.column_ordering = (prefs === null || prefs === void 0 ? void 0 : prefs.column_ordering) || [];
-                            _s.label = 5;
+                            _t.label = 5;
                         case 5:
                             // La paginazione devo farla solamente quando richiedo o un gruppo principale (se sono in row grouping) o se non richiedo gruppi (in tutti lgi altri casi)
                             if (firstItemGroupOrNoGrouping)
@@ -4138,14 +3795,14 @@
                             return [3 /*break*/, 10];
                         case 8: return [4 /*yield*/, this.prefService.getItem(this.ngControl.name).toPromise()];
                         case 9:
-                            prefs = _s.sent();
+                            prefs = _t.sent();
                             this.arrayColumns = (prefs === null || prefs === void 0 ? void 0 : prefs.columns) || [];
                             this.arrayColumnOrdering = (prefs === null || prefs === void 0 ? void 0 : prefs.column_ordering) || [];
-                            _s.label = 10;
+                            _t.label = 10;
                         case 10:
                             if (this.SearchView)
                                 this.arrayPulsanti = this.utilities_H.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1, this.SearchView.items.length, this.SearchView.itemsperpageoverride);
-                            _s.label = 11;
+                            _t.label = 11;
                         case 11:
                             if (this.View && !(this.View instanceof ReportDefinition))
                                 this.finalizeContext();
@@ -4161,30 +3818,12 @@
          */
         EsTableComponent.prototype.finalizeContext = function () {
             var viewCasted = this.View;
-            /*
-             *Uso la tecnica di EndlessScroll se la variabile relativa è attiva e se
-             * 1) Ho un Array, oppure
-             * 2) Ho un AppSearch che sta cercando con paginazione "Tutto", oppure
-             * 3) Ho un AppSearch che sta cercando con paginazione diversa da "Tutto" ma con la variabile EndlessScrollOnlyForAll a false
-             */
-            var isAppSearchWithIppMax = this.viewMode && viewCasted.itemsperpageoverride == this.defaultAllPageOverride;
-            var isAppSearchNoMaxIpp = this.viewMode && viewCasted.itemsperpageoverride != this.defaultAllPageOverride;
-            this.UseEndlessscroll = this.EndlessScroll && (this.arrayMode || isAppSearchWithIppMax || (isAppSearchNoMaxIpp && !this.EndlessScrollOnlyForAll));
             var hasRowGroups = (viewCasted.groupings && viewCasted.groupings.filter(function (t) { return !t.aggregation; }).length > 0) || (this.arrayMode && this.EsThsDirective.some(function (t) { return t.thGroup; }));
             // Se ho dei gruppi in modalità array devo sistemare un po' di variabili che diventano insensate
             if (this.arrayMode && hasRowGroups)
                 this.UseArrayModePaging = false;
             // Riempimento della TMPBoundSource con gli oggetti che verranno poi mostrati ad interfaccia
-            if (this.UseEndlessscroll && !hasRowGroups) {
-                this.addedSlices = [];
-                this.boundSubSources = this.items_H.getItemSlices();
-                var firstSub = this.boundSubSources[0];
-                this.TMPBoundSource = firstSub ? firstSub : [];
-                if (firstSub)
-                    this.addedSlices.push(0);
-            }
-            else
-                this.TMPBoundSource = this.items_H.getItemsByMode(false, !this.internalWriteCall);
+            this.TMPBoundSource = this.items_H.getItemsByMode(false, !this.internalWriteCall);
             // Se ho una gerarchia, assegno i livelli gerarchici alla TMPBoundSource
             if (this.Hierarchy && !hasRowGroups)
                 this.hierarchyMode_H.assignHierarchyLevels(this.TMPBoundSource);
@@ -4244,51 +3883,22 @@
                 this.PagerOptions.ShowPagingOptions = this.PagerOptions.ShowButtons;
             }
         };
-        /**
-         * Metodo che gestisce l'endless scroll e in base a quanto la tabella è stata scrollata aggiunge degli elementi extra a **TMPBoundSource**
-         *
-         * @param {any} e Evento di scroll del browser
-         */
-        EsTableComponent.prototype.onScroll = function (e) {
-            var _this = this;
-            var tableViewHeight = e.target.offsetHeight;
-            var tableScrollHeight = e.target.scrollHeight;
-            var scrollLocation = e.target.scrollTop;
-            var buffer = 200;
-            var limit = tableScrollHeight - tableViewHeight - buffer;
-            if (scrollLocation > limit) {
-                var indexToAdd = Math.floor(this.TMPBoundSource.length / 100);
-                if (this.boundSubSources[indexToAdd] && this.addedSlices.indexOf(indexToAdd) == -1) {
-                    // Devo ricordarmi di fare l'hash del nuovo pezzo
-                    this.utilities_H.calculateHash(this.boundSubSources[indexToAdd]);
-                    this.TMPBoundSource = this.TMPBoundSource.concat(this.boundSubSources[indexToAdd]);
-                    this.addedSlices.push(indexToAdd);
-                    setTimeout(function () { _this.postBoundSourceCalculation(); });
-                }
-            }
-        };
         /**
          * Metodo lanciato dopo che la sorgente dati è stata correttamente bindata, si occupa di ricalcolare tutto ciò che serve
          * all'es-table per renderizzare i valori da mostrare
          */
         EsTableComponent.prototype.postBoundSourceCalculation = function () {
-            var _this = this;
             // Resetto tutto tranne RowTDs e RowTHs per evitare flickering. RowTDs e RowTHs saranno modificate all'interno del prossimo ciclo di CD
             this.RowContexts = [];
             this.OrderDirectives = [];
             this.lastSelectedItemID = null;
-            if (this.EsThsDirective && this.EsThsDirective.length > 0 && this.EsTdsDirective && this.EsTdsDirective.length > 0)
-                this.internalPostBoundSource();
-            else {
-                this.cdr.detectChanges();
-                setTimeout(function () { _this.internalPostBoundSource(); });
-            }
+            this.internalPostBoundSource();
         };
         /** Per poter distinguere le chiamate a questo metodo: Dopo il setTimeout se uso gli EsTd/EsTh vecchi, senza il setTimeout se uso le nuove direttive */
         EsTableComponent.prototype.internalPostBoundSource = function () {
             var View = this.View;
-            var ths = this.EsThs && this.EsThs.length > 0 ? this.EsThs.toArray() : this.EsThsDirective && this.EsThsDirective.length > 0 ? this.EsThsDirective.toArray() : [];
-            var tds = this.EsTds && this.EsTds.length > 0 ? this.EsTds.toArray() : this.EsTdsDirective && this.EsTdsDirective.length > 0 ? this.EsTdsDirective.toArray() : [];
+            var ths = this.EsThsDirective && this.EsThsDirective.length > 0 ? this.EsThsDirective.toArray() : [];
+            var tds = this.EsTdsDirective && this.EsTdsDirective.length > 0 ? this.EsTdsDirective.toArray() : [];
             // Se non ho colonne dinamiche ma sono in modalità dinamica (lo capisco perché c'è una view piena di genericitem) metto il default delle colonne
             this.dynamicMode_H.eventuallyReviewDynamicColumns();
             this.bindDisplayToLoadedItemsOrGroups(View);
@@ -4423,8 +4033,8 @@
          *
          * Costo: 2 scan EsThs, 1 scan EsTds
          *
-         * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
-         * @param {EsTd[] | EsTdDirective[]} tds Celle della tabella
+         * @param {EsThDirective[]} ths Colonne della tabella
+         * @param {EsTdDirective[]} tds Celle della tabella
          */
         EsTableComponent.prototype.evaluateRowTds = function (ths, tds) {
             if (tds.length == 0)
@@ -4437,58 +4047,35 @@
             }
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
-                thsCache[this.utilities_H.isEsTh(th) ? th.ID : th.th] = th;
+                thsCache[th.th] = th;
             }
             this.TMPRowTDs = {};
             // Variabile d'appoggio per permettermi di inserire tutte le colonne "Fixed" davanti
             var contextFixeds = {};
             for (var i = 0; i < tds.length; i++) {
                 var td = tds[i];
-                if (this.utilities_H.isEsTd(td)) {
-                    var th = thsCache[td.ID];
+                for (var i_1 = 0; i_1 < this.boundSource.length; i_1++) {
+                    var item = this.boundSource[i_1];
+                    var ctx = item._hash;
+                    var key = td.td;
+                    var th = thsCache[td.td];
                     if (!!th)
                         th._referenced = true;
                     else
-                        throw "ID dell'oggeto EsTd non compatibile con gli ID dicharati negli EsTh: " + td.ID;
-                    var isFixed = (this.utilities_H.isEsTh(th) && th.Fixed) || (!this.utilities_H.isEsTh(th) && (th.thFixed || th.thGroup));
-                    var itemToAdd = { GroupAggregation: false, GroupHeader: false, Wraps: true, ID: td.ID, Visible: td.Visible, Class: td.Class, Content: td.Content, RouterLink: td.RouterLink, Template: td.Template };
-                    var ctx = td.Context;
-                    if (this.TMPRowTDs[ctx]) {
-                        if (isFixed)
-                            this.TMPRowTDs[ctx].splice(0 + (contextFixeds[ctx]++), 0, itemToAdd);
-                        else
+                        throw "ID dell'oggeto EsTd non compatibile con gli ID dicharati negli EsTh: " + td.td;
+                    if (td.tdIf || th.thGroup) {
+                        var thCasted = th;
+                        var isFixed = th.thFixed || th.thGroup || th.thPinned;
+                        var itemToAdd = item._item ?
+                            { LeftBorder: thCasted._lbord, RightBorder: thCasted._rbord, ID: key, Pinned: columnsCache[td.td].pinned, PinnedWidth: thCasted.thPinnedWidth, GroupHeader: false, GroupAggregation: false, Visible: columnsCache[td.td].visible, Wraps: false, Class: td.tdClass, Template: thCasted.thGroup && !this.ShowItemGroupsColumns ? null : td.Template } :
+                            { LeftBorder: thCasted._lbord, RightBorder: thCasted._rbord, ID: key, Pinned: columnsCache[td.td].pinned, PinnedWidth: thCasted.thPinnedWidth, GroupHeader: thCasted.thGroup, GroupAggregation: !!thCasted.thAggregation, Visible: columnsCache[td.td].visible, Wraps: false, Class: thCasted.thGroupClass || '', Content: this.rowGrouping_H.getGroupCellDisplay(item, key, th) };
+                        if (this.TMPRowTDs[ctx]) {
                             this.TMPRowTDs[ctx].push(itemToAdd);
-                    }
-                    else {
-                        this.RowContexts.push(ctx);
-                        this.TMPRowTDs[ctx] = [itemToAdd];
-                        contextFixeds[ctx] = isFixed ? 1 : 0;
-                    }
-                }
-                else {
-                    for (var i_1 = 0; i_1 < this.boundSource.length; i_1++) {
-                        var item = this.boundSource[i_1];
-                        var ctx = item._hash;
-                        var key = td.td;
-                        var th = thsCache[td.td];
-                        if (!!th)
-                            th._referenced = true;
-                        else
-                            throw "ID dell'oggeto EsTd non compatibile con gli ID dicharati negli EsTh: " + td.td;
-                        if (td.tdIf || (!this.utilities_H.isEsTh(th) && th.thGroup)) {
-                            var thCasted = th;
-                            var isFixed = (this.utilities_H.isEsTh(th) && th.Fixed) || (!this.utilities_H.isEsTh(th) && (th.thFixed || th.thGroup || th.thPinned));
-                            var itemToAdd = item._item ?
-                                { LeftBorder: thCasted._lbord, RightBorder: thCasted._rbord, ID: key, Pinned: columnsCache[td.td].pinned, PinnedWidth: thCasted.thPinnedWidth, GroupHeader: false, GroupAggregation: false, Visible: columnsCache[td.td].visible, Wraps: false, Class: td.tdClass, Template: thCasted.thGroup && !this.ShowItemGroupsColumns ? null : td.Template } :
-                                { LeftBorder: thCasted._lbord, RightBorder: thCasted._rbord, ID: key, Pinned: columnsCache[td.td].pinned, PinnedWidth: thCasted.thPinnedWidth, GroupHeader: thCasted.thGroup, GroupAggregation: !!thCasted.thAggregation, Visible: columnsCache[td.td].visible, Wraps: false, Class: thCasted.thGroupClass || '', Content: this.rowGrouping_H.getGroupCellDisplay(item, key, th) };
-                            if (this.TMPRowTDs[ctx]) {
-                                this.TMPRowTDs[ctx].push(itemToAdd);
-                            }
-                            else {
-                                this.RowContexts.push(ctx);
-                                this.TMPRowTDs[ctx] = [itemToAdd];
-                                contextFixeds[ctx] = isFixed ? 1 : 0;
-                            }
+                        }
+                        else {
+                            this.RowContexts.push(ctx);
+                            this.TMPRowTDs[ctx] = [itemToAdd];
+                            contextFixeds[ctx] = isFixed ? 1 : 0;
                         }
                     }
                 }
@@ -4500,7 +4087,7 @@
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
                 if (!th._referenced)
-                    errs.push(this.utilities_H.isEsTh(th) ? th.ID : th.th);
+                    errs.push(th.th);
             }
             if (errs.length > 0) {
                 var errIds = errs.join(', ');
@@ -4514,10 +4101,10 @@
          *
          * Costo: 1 scan EsThs
          *
-         * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
+         * @param {EsThDirective[]} ths Colonne della tabella
          */
         EsTableComponent.prototype.evaluateRowThs = function (ths) {
-            var _s;
+            var _t;
             if (ths.length == 0)
                 return;
             var columnsListCache = {};
@@ -4528,18 +4115,10 @@
                 columnsListCache[itm.id] = itm;
             }
             this.TMPRowTHs = [];
-            var fixed = 0;
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
                 var toAdd = void 0;
-                if (this.utilities_H.isEsTh(th)) {
-                    toAdd = { Pinned: false, ID: th.ID, Visible: th.Visible, Class: th.Class, Order: th.Order, Orderable: th.Orderable, Template: null, Content: th.Description, Wrap: th.Wrap };
-                    if (th.Fixed)
-                        this.TMPRowTHs.splice(0 + (fixed++), 0, toAdd);
-                    else
-                        this.TMPRowTHs.push(toAdd);
-                }
-                else if (th.thIf || th.thGroup) {
+                if (th.thIf || th.thGroup) {
                     var thClass = (th.thClass || '') + (th.thGroup ? " est-col-min" : "");
                     toAdd = { Pinned: columnsListCache[th.th].pinned, Fixed: th.thFixed, PinnedWidth: th.thPinnedWidth, ID: th.th, Visible: th.thVisible, Class: thClass, Order: th.thOrder, Orderable: th.thOrderable, Template: th.Template, Content: null, Wrap: th.thWrap, LeftBorder: th._lbord, RightBorder: th._rbord };
                     this.TMPRowTHs.push(toAdd);
@@ -4550,7 +4129,7 @@
                         if (!castedView.groupings)
                             castedView.groupings = groupAggregations;
                         else
-                            (_s = castedView.groupings).push.apply(_s, __spread(groupAggregations));
+                            (_t = castedView.groupings).push.apply(_t, __spread(groupAggregations));
                         this.ResearchNeeded = true;
                     }
                 }
@@ -4793,21 +4372,6 @@
             // Riforzo il writevalue in modo che il codice passi dalla gestione come se fosse fatta ripartire una ricerca
             this.internalWriteValue();
         };
-        /**
-         * Gestore dei click sulle celle per le quali era impostata una azione custom da **CustomCellActionsOn**
-         *
-         * @param {string} name Nome della cella su cui si è fatto click
-         * @param {any} model Modello relativo alla cella cliccata
-         *
-         * @returns {boolean} **true** se il click è stato fatto su una cella cliccabile, **false** altrimenti
-         */
-        EsTableComponent.prototype.cellClicked = function (name, model) {
-            if (this.UseCustomCellActions && this.CustomCellActionsOn.split('$').indexOf(name) != -1) {
-                this.onCellClick.emit({ column: name, model: model });
-                return true;
-            }
-            return false;
-        };
         /**
          * Gestione dei click sulle opzioni del menù contestuale in alto a destra generato dall'Input **CornerMenuOptions**
          *
@@ -4866,7 +4430,7 @@
                     viewProviders: [{ provide: localizations.LocalizationService, useClass: EsTableLoc }],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<!--\r\nI TH sono contenuto statico, questo significa che senza condizione per RowTHs arriverebbero sia qui sia nell ng-container dell'header in fase non inizializzata, duplicando fisicamente le colonne.\r\nPer ovviare al problema, questo pezzo lo faccio apparire solo se ci sono gi\u00E0 dei RowTHs, quindi su valorizzazione della View succeder\u00E0:\r\n1) appaiono i th nell' ng-container dell'header, e NON qui\r\n2) i TH vengono presi, elaborati e trasformati in RowTHs\r\n3) l'ng-container dell'header sparisce (per la condizione !UseCustomCells || !RowTHs) e qui appaiono i nuovi TH (che poi sono gli stessi di prima che girano)\r\n4) Vengono presi i nuovi TH da qui e trasformati a loro volta in RowTHs\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && RowTHs\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Qui invece ci sono tutti i TH-->\r\n        <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<!--\r\nQuesta parte \u00E8 un po' pi\u00F9 semplice del sopra. Infatti i TD vengono s\u00EC bindati in entrambi i punti (qui e nell'ng-container del body), ma avr\u00F2 le TD statiche prima di generare la TMPBoundSource.\r\nQuesto significa che il workflow di binding sar\u00E0:\r\n1) Appaiono i TD statici nel body e NON qui, perch\u00E9 i TMPBoundSource non sono ancora stati emessi\r\n2) Contemporaneamente all'emissione dei TMPBoundSource vengono anche emessi i RowTds\r\n3) Considerando il punto 2, al giro dopo appariranno i TD qui, perch\u00E9 \u00E8 stata generata la TMPBoundSource, e spariranno contemporaneamente dall'ng-container del body (per la condizione !UseCustomCells || !RowTDs)\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && bodyRef\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Tutti i TD che dopo verranno presi ed elaborati internamente-->\r\n        <ng-container *ngFor=\"let item of TMPBoundSource\">\r\n            <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (!reportMode && (View?.selection || arraymodeSelection).all)\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{ContainerClass}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10\"  [class.est-high-density]=\"HighCellDensity\">\r\n            <thead [hidden]=\"HeaderHidden || FirstBind\">\r\n                <!-- Aggiungo il pezzo che gestisce la selezione di tutto se attivo da config -->\r\n                <tr *ngIf=\"SelectAll || PagingStyle != 'bottom'\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden-view]=\"!canSelectAll && (reportMode || !(View?.selection || arraymodeSelection).all) && PagingStyle == 'bottom'\">\r\n                        <p class=\"est-hidden-view app-margin-bottom-0\">\u00A7</p>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <ng-container *ngIf=\"RowThGroups\">\r\n                    <tr *ngFor=\"let level of RowThGroups\">\r\n                        <th *ngFor=\"let cell of level\" [attr.colspan]=\"cell.Span\" \r\n                            [class.est-pinned-header]=\"cell.Pinned\" [class.est-col-min]=\"cell.Pinned\"\r\n                            [class.est-ltab-border]=\"cell.Borders\" [class.est-rtab-border]=\"cell.Borders\"\r\n                            class=\"est-text-center\">\r\n                            <ng-container *ngIf=\"cell.Pinned; Else: cell.Template\">\r\n                                <div class=\"est-pinned-border est-cell-group-padding\"></div>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!RowThGroups\">\r\n                    <tr *ngIf=\"HasHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"headerGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n    \r\n                    <!-- Blocco header group secondario -->\r\n                    <tr *ngIf=\"HasSecondaryHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"secondaryHeaderGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection && !HasPinnedColumns\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode -->\r\n                    <ng-container *ngIf=\"(viewMode || arrayMode)\">\r\n\r\n                        <!-- In una tabella base prendo semplicemente i th scritti dall'utente nell'HTML -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && !DynamicRowColumnsDefinition\">\r\n                            <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se ho un modello dinamico dell'oggetto creo le colonne in base alle propriet\u00E0 -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && DynamicRowColumnsDefinition\">\r\n                            <th *ngFor=\"let operation of DynamicOperations\" class=\"est-col-min est-no-side-padding\"></th>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition\">\r\n                                <ng-container *ngIf=\"rowHeader.visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? ((rowHeader.clss || '') + (rowHeader.headerWraps ? '' : ' est-nowrap')) : ' est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.propertyName, $event)\">{{rowHeader.description}}</th>\r\n                                    <th *ngIf=\"!OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? ((rowHeader.clss || '') + (rowHeader.headerWraps ? '' : ' est-nowrap')) : ' est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [OrderBy]=\"OrderByColumn\">{{rowHeader.description}}</th>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se non ho un modello dinamico ma invece delle celle custom, genero gli header in base ai row th -->\r\n                        <ng-container *ngIf=\"UseCustomCells && RowTHs\">\r\n                            <th *ngIf=\"HasPinnedColumns\" class=\"est-pinned-header est-col-min\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-simple-border-bottom\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\" [style.width.px]=\"20\">\r\n                                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                        <th *ngIf=\"rowHeader && rowHeader.Visible && rowHeader.Pinned\" [style.width.px]=\"rowHeader.PinnedWidth\" es-th=\"{{rowHeader.ID}}\" \r\n                                            class=\"{{rowHeader.Class || ''}}\" \r\n                                            [class.est-pinned-internal-header]=\"true\" \r\n                                            [class.est-no-border]=\"true\" \r\n                                            [class.est-nowrap]=\"!rowHeader.Wrap\" \r\n                                            [Pinned]=\"true\" [Fixed]=\"rowHeader.Fixed\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                            <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container></ng-container>\r\n                                            <span *ngIf=\"!rowHeader.Template\">{{rowHeader.Content}}</span>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </th>\r\n                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class || ''}}\" [class.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                    <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container></ng-container>\r\n                                    <span *ngIf=\"!rowHeader.Template\">{{rowHeader.Content}}</span>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n\r\n                    <!--Casistica in cui ho il setup proveniente da un report. Gli header sono definiti da come \u00E8 fatto il report-->\r\n                    <ng-container *ngIf=\"reportMode\">\r\n                        <th [style.color]=\"clm.color\" *ngFor=\"let clm of ReportValues.columns\" class=\"est-no-selection est-pointer est-nowrap\" (click)=\"reportMode_H.setupNextOrderAndSearch(clm)\">\r\n                            {{clm.description}}<span class=\"fa\" [class.fa-chevron-down]=\"clm.order == 'DESC'\" [class.fa-chevron-up]=\"clm.order == 'ASC'\"></span>\r\n                        </th>\r\n                    </ng-container>\r\n\r\n                    <!--Per l'eliminazione mi serve un header aggiuntivo-->\r\n                    <th *ngIf=\"Removal\" [class.est-right-9]=\"Export || HiddenColumns\" class=\"est-col-min est-sticky-last-column\"><span class=\"fa fa-trash\"></span></th>\r\n\r\n                    <!--Per l'esportazione mi serve l'header extra da cui faccio uscire i 3 pallocchi-->\r\n                    <th *ngIf=\"Export || HiddenColumns || ColumnsOrdering || CornerMenuOptions\" class=\"est-table-dotted-menu est-sticky-last-column est-col-min text-sm-center\">\r\n                        \r\n                        <!-- Link nascosto che serve a scaricare il file -->\r\n                        <a *ngIf=\"headers\" hidden #exportDownloader csvLink [data]=\"data\" [headers]=\"headers\" [delimiter]=\"';'\" [filename]=\"ExportFileName.endsWith('.xlsx') ? ExportFileName.replace('.xlsx', '.csv') : ExportFileName.endsWith('.csv') ? ExportFileName : ExportFileName + '.csv'\"></a>\r\n\r\n                        <!-- Blocco con i 3 pallocchi che tira fuori il context menu delle operazioni -->\r\n                        <div class=\"btn-group\" container=\"body\" placement=\"bottom right\" dropdown #dropdown=\"bs-dropdown\" [autoClose]=\"true\">\r\n                            <span dropdownToggle class=\"fa fa-ellipsis-v est-fs-18 est-pointer est-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right est-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"HiddenColumns || ColumnsOrdering\" (click)=\"columnMetadata_H.resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"export_H.tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"export_H.tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            \r\n            <!-- Valido per modalit\u00E0 View o Array. Se sono in report mode il body \u00E8 creato in altro modo -->\r\n            <tbody [hidden]=\"BodyHidden || FirstBind\" *ngIf=\"(arrayMode || viewMode)\">\r\n                <!--Con selection attiva richiamo il template che gestisce il context menu-->\r\n                <ng-container *ngIf=\"Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBodySelection; context: { $implicit: { selDisabled: arrayMode ? false : SelectionDisabled, sel: Selection }}\"></ng-container>\r\n                </ng-container>\r\n\r\n                <!--Senza selection richiamo il template che NON gestisce il context menu-->\r\n                <ng-container *ngIf=\"!Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBody\"></ng-container>\r\n                </ng-container>\r\n            </tbody>\r\n\r\n            <!-- Per la modalit\u00E0 a report c'\u00E8 un body particolare semi-dinamico -->\r\n            <tbody [hidden]=\"BodyHidden\" *ngIf=\"reportMode\">\r\n                <tr *ngFor=\"let row of ReportValues.rows; let even = even;\">\r\n                    <td class=\"est-nowrap\" *ngFor=\"let val of row.values\">{{val}}</td>\r\n                    <td class=\"est-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <div *ngIf=\"PagingStyle == 'both' || PagingStyle == 'bottom'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n<!-- Template che contiene tutte le info di paginazione in modo da poterlo replicare anche sopra -->\r\n<ng-template #pagingElement>\r\n    <ng-container *ngIf=\"!FirstBind\">\r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div *ngIf=\"PagerOptions.ShowPaging && PagerOptions.ShowButtons && (PagerOptions.PagerCount > 10 || PagerOptions.PagerCount == -1)\" class=\"pull-right btn-toolbar\">\r\n            <ng-container *ngIf=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-right\" *ngIf=\"PagerOptions.ShowCount || PagerOptions.ShowPagingOptions\">\r\n            <div class=\"est-mt-min-5\" *ngIf=\"PagerOptions.ShowPaging\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [GroupMode]=\"PagerOptions.Searches == 'groups'\" [AllSearch]=\"AllSearch\" [View]=\"PagerOptions.View\" (pagingSelected)=\"onItemsPerPageChanged($event);\"></app-paging>\r\n            </div>\r\n            <div *ngIf=\"reportMode && !PagerOptions.ShowPaging\"><em>{{'Paging options are not available for this report' | localize: lc}}</em></div>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <div class=\"est-flex\" [class.est-margin-left-50]=\"options.Margin\">\r\n        <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n        <div *ngIf=\"options.Array\" class=\"est-inline\"><a *ngFor=\"let p of options.Array\" class=\"btn est-page-sel {{p.cssClass}}\" (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a></div>\r\n        <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index; trackBy: bodyTrackBy\">\r\n        <tr *ngIf=\"item._visible || (!Hierarchy && !ArrayGrouping)\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\" \r\n            [class.est-pointer]=\"!item.locked\" \r\n            [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"(!item.locked && !item._sep && !item._group && handleClick($event, item)) || item._group && handleGroupClick(item)\">\r\n\r\n            <td *ngIf=\"!item.locked && !item._sep && !HasPinnedColumns\">\r\n                <input  type=\"checkbox\" \r\n                        [disabled]=\"templateOptions.selDisabled\" \r\n                        [class.est-pointer]=\"!item.locked\"\r\n                        [(ngModel)]=\"item._selected\" name=\"check{{i}}\" \r\n                        (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n            </td>\r\n            <td *ngIf=\"(item.locked || item._sep) && !HasPinnedColumns\"></td>\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container> </ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #TBody>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even;\">\r\n        <tr *ngIf=\"item._visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            (click)=\"item._group && handleGroupClick(item)\">\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #groupPager let-item>\r\n    <td class=\"est-pinned-body \" *ngIf=\"HasPinnedColumns\"><div class=\"est-pinned-border est-cell-group-padding\"></div></td>\r\n    <td *ngIf=\"item._grouplevel > 1\" [attr.colspan]=\"item._grouplevel-1\"></td>\r\n    <td [attr.colspan]=\"Columns.VisibleUnpinned - (item._grouplevel > 0 ? item._grouplevel - 1 : 0)\">\r\n        <div class=\"est-rg-sep-flex-right\" *ngIf=\"RowGroupingPagingStyle == 'right'\">\r\n            <div class=\"est-rg-page\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n            <div class=\"est-rg-ipp\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><app-paging [CountLabel]=\"CountLabel\" [AllSearch]=\"AllSearch\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n        </div>\r\n\r\n        <div class=\"est-rg-sep-flex-left\" *ngIf=\"RowGroupingPagingStyle == 'left'\">\r\n            <div class=\"est-rg-ipp\"><app-paging [AllSearch]=\"AllSearch\" [CountLabel]=\"CountLabel\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n            <div class=\"est-rg-page\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle definite in maniera dinamica dal modello -->\r\n<ng-template #dynamicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && DynamicRowColumnsDefinition\">\r\n        <ng-container *ngFor=\"let operation of DynamicOperations; let first = first; let last = last;\">\r\n            <ng-container *ngIf=\"!operation.conditionField || (item.properties[operation.conditionField] == operation.conditionValue)\">\r\n                <td [class.est-no-right-padding]=\"last\" [class.est-no-left-padding]=\"!first\" class=\"est-col-min\"><span title=\"{{operation.title}}\" class=\"{{operation.iconClass}} est-pointer\" (click)=\"dynamicOperation(item, operation.id)\">{{operation.text}}</span></td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"operation.conditionField && (item.properties[operation.conditionField] != operation.conditionValue)\">\r\n                <td class=\"est-col-min est-no-side-padding\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let rowItem of DynamicRowColumnsDefinition\">\r\n            <ng-container *ngIf=\"rowItem.routePath && rowItem.visible\">\r\n                <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [Internal]=\"false\" [Context]=\"item._hash\">\r\n                    <a [routerLink]=\"dynamicMode_H.generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"est-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.propertyName) || defaultEsTd; context: { $implicit: item.properties[rowItem.propertyName], rowItem : rowItem, item : item }\"> </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-value let-rowItem='rowItem' let-item='item'>\r\n    <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\"\r\n        [class.est-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\"\r\n        (click)=\"cellClicked(rowItem.propertyName, item) && !CellActionPropagates && $event.stopPropagation()\"\r\n        [Internal]=\"false\" [Context]=\"item._hash\">\r\n        {{value}}\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-item let-opt=\"templateOptions\">\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n\r\n        <td *ngIf=\"HasPinnedColumns\" class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\" [style.width.px]=\"20\">\r\n                    <input type=\"checkbox\" [disabled]=\"opt.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{item._hash}}\" (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n                </td>\r\n                <td class=\"est-no-border est-col-min\" *ngIf=\"(item.locked || item._sep) && Selection\" [style.width.px]=\"20\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n                    <td *ngIf=\"rowItem && rowItem.Pinned\" [style.width.px]=\"rowItem.PinnedWidth\" es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-no-border]=\"true\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem && !rowItem.Pinned\">\r\n\r\n                <!-- Casistica senza bodyRef, quindi con direttive per i td -->\r\n                <ng-container *ngIf=\"!bodyRef && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-ltab-border]=\"rowItem.LeftBorder\" [class.est-rtab-border]=\"rowItem.RightBorder\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"est-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (NON RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [class.est-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + $any(rowItem).ID + '$') != -1\" (click)=\"cellClicked(rowItem.ID, item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\">\r\n                            <ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\" [innerHTML]=\"rowItem.Content\"></span>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"hierarchyMode_H.collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"hierarchyMode_H.expandParent(item[this.OwnKey])\"></span>\r\n    &nbsp;\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove est-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"est-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" cdkDrag>\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header est-pointer\" cdkDragHandle>\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info est-padding-10 est-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm est-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"columnMetadata_H.globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <!-- <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th> -->\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                                <!-- Pinner -->\r\n                                <th *ngIf=\"DirectivesBased\" class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody \r\n                            cdkDropList \r\n                            [cdkDropListData]=\"TMPColumnsList\" \r\n                            (cdkDropListDropped)=\"columnMetadata_H.columnReordered($event)\" \r\n                            [cdkDropListSortPredicate]=\"columnMetadata_H.sortPredicate.bind(this.columnMetadata_H)\"\r\n                            class=\"est-dropbox\">\r\n\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" \r\n                                class=\"est-pointer est-droplist\" \r\n                                [class.est-white-selected]=\"lastSelectedItemID == item.id\" \r\n                                [class.est-no-selection]=\"!item.visible\"\r\n                                cdkDrag\r\n                                [cdkDragData]=\"item\"\r\n                                [cdkDragDisabled]=\"!ColumnsOrdering || item.fixed || item.pinned\">\r\n\r\n                                <td *ngIf=\"HiddenColumns\">\r\n                                    <input type=\"checkbox\" [class.est-hidden-view]=\"item.fixed\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"columnMetadata_H.updateGlobalColVisCheck();\" />\r\n                                </td>\r\n                                <!-- <td class=\"est-nowrap\" *ngIf=\"ColumnsOrdering\">\r\n                                    <span class=\"fa fa-arrow-up\" [class.est-hidden-view]=\"item.fixed || item.pinned\" (click)=\"lastSelectedItemID = item.id; i != 0 && !item.fixed && columnMetadata_H.sendUp(item); $event.stopPropagation();\"></span>\r\n                                    <span class=\"fa fa-arrow-down\" [class.est-hidden-view]=\"item.fixed || item.pinned\" (click)=\"lastSelectedItemID = item.id; !last && !item.fixed && columnMetadata_H.sendDown(item); $event.stopPropagation();\"></span>\r\n                                </td> -->\r\n                                <td class=\"est-nowrap drag-visible\" (click)=\"columnMetadata_H.columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\r\n                                        <!-- Padri -->\r\n                                        <span *ngIf=\"item.parentTemplates && item.parentTemplates.length > 0\" class=\"est-fw-bold est-fs-13\">\r\n                                            (&nbsp;\r\n                                            <ng-container *ngFor=\"let parent of item.parentTemplates; let last=last\">\r\n                                                <ng-container *ngTemplateOutlet=\"parent\"></ng-container>\r\n                                                <span *ngIf=\"!last\">&nbsp;-&nbsp;</span>\r\n                                            </ng-container>\r\n                                            &nbsp;)\r\n                                        </span>\r\n                                        <!-- Template header originale -->\r\n                                        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"!item.template\">{{item.description}}</ng-container>\r\n                                </td>\r\n                                <!--Filler-->\r\n                                <td (click)=\"columnMetadata_H.columnClicked(item);\"></td>\r\n                                <!-- Pinner -->\r\n                                <td *ngIf=\"DirectivesBased\"><span *ngIf=\"!item.fixed\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"columnMetadata_H.pinOrUnpinColumn(item)\"></span></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary est-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
+                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (!reportMode && (View?.selection || arraymodeSelection)?.all)\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection)?.all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{ContainerClass}}\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10\"  [class.est-high-density]=\"HighCellDensity\">\r\n            <thead [hidden]=\"HeaderHidden || FirstBind\">\r\n                <!-- Aggiungo il pezzo che gestisce la selezione di tutto se attivo da config -->\r\n                <tr *ngIf=\"SelectAll || PagingStyle != 'bottom'\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden-view]=\"!canSelectAll && (reportMode || !(View?.selection || arraymodeSelection)?.all) && PagingStyle == 'bottom'\">\r\n                        <p class=\"est-hidden-view app-margin-bottom-0\">\u00A7</p>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <ng-container *ngIf=\"RowThGroups\">\r\n                    <tr *ngFor=\"let level of RowThGroups\">\r\n                        <th *ngFor=\"let cell of level\" [attr.colspan]=\"cell.Span\" \r\n                            [class.est-pinned-header]=\"cell.Pinned\" [class.est-col-min]=\"cell.Pinned\"\r\n                            [class.est-ltab-border]=\"cell.Borders\" [class.est-rtab-border]=\"cell.Borders\"\r\n                            class=\"est-text-center\">\r\n                            <ng-container *ngIf=\"cell.Pinned; Else: cell.Template\">\r\n                                <div class=\"est-pinned-border est-cell-group-padding\"></div>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!RowThGroups\">\r\n                    <tr *ngIf=\"HasHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"headerGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n    \r\n                    <!-- Blocco header group secondario -->\r\n                    <tr *ngIf=\"HasSecondaryHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"secondaryHeaderGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection && !HasPinnedColumns\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode -->\r\n                    <ng-container *ngIf=\"(viewMode || arrayMode)\">\r\n\r\n                        <!-- In una tabella base prendo semplicemente i th scritti dall'utente nell'HTML -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && !DynamicRowColumnsDefinition\">\r\n                            <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se ho un modello dinamico dell'oggetto creo le colonne in base alle propriet\u00E0 -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && DynamicRowColumnsDefinition\">\r\n                            <th *ngFor=\"let operation of DynamicOperations\" class=\"est-col-min est-no-side-padding\"></th>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition\">\r\n                                <ng-container *ngIf=\"rowHeader.visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? ((rowHeader.clss || '') + (rowHeader.headerWraps ? '' : ' est-nowrap')) : ' est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.propertyName, $event)\">{{rowHeader.description}}</th>\r\n                                    <th *ngIf=\"!OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? ((rowHeader.clss || '') + (rowHeader.headerWraps ? '' : ' est-nowrap')) : ' est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [OrderBy]=\"OrderByColumn\">{{rowHeader.description}}</th>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se non ho un modello dinamico ma invece delle celle custom, genero gli header in base ai row th -->\r\n                        <ng-container *ngIf=\"UseCustomCells && RowTHs\">\r\n                            <th *ngIf=\"HasPinnedColumns\" class=\"est-pinned-header est-col-min\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-simple-border-bottom\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\" [style.width.px]=\"20\">\r\n                                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                        <th *ngIf=\"rowHeader && rowHeader.Visible && rowHeader.Pinned\" [style.width.px]=\"rowHeader.PinnedWidth\" es-th=\"{{rowHeader.ID}}\" \r\n                                            class=\"{{rowHeader.Class || ''}}\" \r\n                                            [class.est-pinned-internal-header]=\"true\" \r\n                                            [class.est-no-border]=\"true\" \r\n                                            [class.est-nowrap]=\"!rowHeader.Wrap\" \r\n                                            [Pinned]=\"true\" [Fixed]=\"rowHeader.Fixed\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                            <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container></ng-container>\r\n                                            <span *ngIf=\"!rowHeader.Template\">{{rowHeader.Content}}</span>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </th>\r\n                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class || ''}}\" [class.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                    <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container></ng-container>\r\n                                    <span *ngIf=\"!rowHeader.Template\">{{rowHeader.Content}}</span>\r\n                                </th>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n\r\n                    <!--Casistica in cui ho il setup proveniente da un report. Gli header sono definiti da come \u00E8 fatto il report-->\r\n                    <ng-container *ngIf=\"reportMode\">\r\n                        <th [style.color]=\"clm.color\" *ngFor=\"let clm of ReportValues.columns\" class=\"est-no-selection est-pointer est-nowrap\" (click)=\"reportMode_H.setupNextOrderAndSearch(clm)\">\r\n                            {{clm.description}}<span class=\"fa\" [class.fa-chevron-down]=\"clm.order == 'DESC'\" [class.fa-chevron-up]=\"clm.order == 'ASC'\"></span>\r\n                        </th>\r\n                    </ng-container>\r\n\r\n                    <!--Per l'eliminazione mi serve un header aggiuntivo-->\r\n                    <th *ngIf=\"Removal\" [class.est-right-9]=\"Export || HiddenColumns\" class=\"est-col-min est-sticky-last-column\"><span class=\"fa fa-trash\"></span></th>\r\n\r\n                    <!--Per l'esportazione mi serve l'header extra da cui faccio uscire i 3 pallocchi-->\r\n                    <th *ngIf=\"Export || HiddenColumns || ColumnsOrdering || CornerMenuOptions\" class=\"est-table-dotted-menu est-sticky-last-column est-col-min text-sm-center\">\r\n                        \r\n                        <!-- Link nascosto che serve a scaricare il file -->\r\n                        <a *ngIf=\"headers\" hidden #exportDownloader csvLink [data]=\"data\" [headers]=\"headers\" [delimiter]=\"';'\" [filename]=\"ExportFileName.endsWith('.xlsx') ? ExportFileName.replace('.xlsx', '.csv') : ExportFileName.endsWith('.csv') ? ExportFileName : ExportFileName + '.csv'\"></a>\r\n\r\n                        <!-- Blocco con i 3 pallocchi che tira fuori il context menu delle operazioni -->\r\n                        <div class=\"btn-group\" container=\"body\" placement=\"bottom right\" dropdown #dropdown=\"bs-dropdown\" [autoClose]=\"true\">\r\n                            <span dropdownToggle class=\"fa fa-ellipsis-v est-fs-18 est-pointer est-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right est-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"HiddenColumns || ColumnsOrdering\" (click)=\"columnMetadata_H.resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"export_H.tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"export_H.tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            \r\n            <!-- Valido per modalit\u00E0 View o Array. Se sono in report mode il body \u00E8 creato in altro modo -->\r\n            <tbody [hidden]=\"BodyHidden || FirstBind\" *ngIf=\"(arrayMode || viewMode)\">\r\n                <!--Con selection attiva richiamo il template che gestisce il context menu-->\r\n                <ng-container *ngIf=\"Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBodySelection; context: { $implicit: { selDisabled: arrayMode ? false : SelectionDisabled, sel: Selection }}\"></ng-container>\r\n                </ng-container>\r\n\r\n                <!--Senza selection richiamo il template che NON gestisce il context menu-->\r\n                <ng-container *ngIf=\"!Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBody\"></ng-container>\r\n                </ng-container>\r\n            </tbody>\r\n\r\n            <!-- Per la modalit\u00E0 a report c'\u00E8 un body particolare semi-dinamico -->\r\n            <tbody [hidden]=\"BodyHidden\" *ngIf=\"reportMode\">\r\n                <tr *ngFor=\"let row of ReportValues.rows; let even = even;\">\r\n                    <td class=\"est-nowrap\" *ngFor=\"let val of row.values\">{{val}}</td>\r\n                    <td class=\"est-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <div *ngIf=\"PagingStyle == 'both' || PagingStyle == 'bottom'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n<!-- Template che contiene tutte le info di paginazione in modo da poterlo replicare anche sopra -->\r\n<ng-template #pagingElement>\r\n    <ng-container *ngIf=\"!FirstBind\">\r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div *ngIf=\"PagerOptions.ShowPaging && PagerOptions.ShowButtons && (PagerOptions.PagerCount > 10 || PagerOptions.PagerCount == -1)\" class=\"pull-right btn-toolbar\">\r\n            <ng-container *ngIf=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-right\" *ngIf=\"PagerOptions.ShowCount || PagerOptions.ShowPagingOptions\">\r\n            <div class=\"est-mt-min-5\" *ngIf=\"PagerOptions.ShowPaging\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [GroupMode]=\"PagerOptions.Searches == 'groups'\" [AllSearch]=\"AllSearch\" [View]=\"PagerOptions.View\" (pagingSelected)=\"onItemsPerPageChanged($event);\"></app-paging>\r\n            </div>\r\n            <div *ngIf=\"reportMode && !PagerOptions.ShowPaging\"><em>{{'Paging options are not available for this report' | localize: lc}}</em></div>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <div class=\"est-flex\" [class.est-margin-left-50]=\"options.Margin\">\r\n        <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n        <div *ngIf=\"options.Array\" class=\"est-inline\"><a *ngFor=\"let p of options.Array\" class=\"btn est-page-sel {{p.cssClass}}\" (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a></div>\r\n        <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index; trackBy: bodyTrackBy\">\r\n        <tr *ngIf=\"item._visible || (!Hierarchy && !ArrayGrouping)\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\" \r\n            [class.est-pointer]=\"!item.locked\" \r\n            [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"(!item.locked && !item._sep && !item._group && handleClick($event, item)) || item._group && handleGroupClick(item)\">\r\n\r\n            <td *ngIf=\"!item.locked && !item._sep && !HasPinnedColumns\">\r\n                <input  type=\"checkbox\" \r\n                        [disabled]=\"templateOptions.selDisabled\" \r\n                        [class.est-pointer]=\"!item.locked\"\r\n                        [(ngModel)]=\"item._selected\" name=\"check{{i}}\" \r\n                        (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n            </td>\r\n            <td *ngIf=\"(item.locked || item._sep) && !HasPinnedColumns\"></td>\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container> </ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #TBody>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even;\">\r\n        <tr *ngIf=\"item._visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            (click)=\"item._group && handleGroupClick(item)\">\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #groupPager let-item>\r\n    <td class=\"est-pinned-body \" *ngIf=\"HasPinnedColumns\"><div class=\"est-pinned-border est-cell-group-padding\"></div></td>\r\n    <td *ngIf=\"item._grouplevel > 1\" [attr.colspan]=\"item._grouplevel-1\"></td>\r\n    <td [attr.colspan]=\"Columns.VisibleUnpinned - (item._grouplevel > 0 ? item._grouplevel - 1 : 0)\">\r\n        <div class=\"est-rg-sep-flex-right\" *ngIf=\"RowGroupingPagingStyle == 'right'\">\r\n            <div class=\"est-rg-page\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n            <div class=\"est-rg-ipp\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><app-paging [CountLabel]=\"CountLabel\" [AllSearch]=\"AllSearch\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n        </div>\r\n\r\n        <div class=\"est-rg-sep-flex-left\" *ngIf=\"RowGroupingPagingStyle == 'left'\">\r\n            <div class=\"est-rg-ipp\"><app-paging [AllSearch]=\"AllSearch\" [CountLabel]=\"CountLabel\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n            <div class=\"est-rg-page\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle definite in maniera dinamica dal modello -->\r\n<ng-template #dynamicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && DynamicRowColumnsDefinition\">\r\n        <ng-container *ngFor=\"let operation of DynamicOperations; let first = first; let last = last;\">\r\n            <ng-container *ngIf=\"!operation.conditionField || (item.properties[operation.conditionField] == operation.conditionValue)\">\r\n                <td [class.est-no-right-padding]=\"last\" [class.est-no-left-padding]=\"!first\" class=\"est-col-min\"><span title=\"{{operation.title}}\" class=\"{{operation.iconClass}} est-pointer\" (click)=\"dynamicOperation(item, operation.id)\">{{operation.text}}</span></td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"operation.conditionField && (item.properties[operation.conditionField] != operation.conditionValue)\">\r\n                <td class=\"est-col-min est-no-side-padding\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let rowItem of DynamicRowColumnsDefinition\">\r\n            <ng-container *ngIf=\"rowItem.routePath && rowItem.visible\">\r\n                <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [Internal]=\"false\" [Context]=\"item._hash\">\r\n                    <a [routerLink]=\"dynamicMode_H.generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"est-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.propertyName) || defaultEsTd; context: { $implicit: item.properties[rowItem.propertyName], rowItem : rowItem, item : item }\"> </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-value let-rowItem='rowItem' let-item='item'>\r\n    <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [Internal]=\"false\" [Context]=\"item._hash\">\r\n        {{value}}\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-item let-opt=\"templateOptions\">\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n\r\n        <td *ngIf=\"HasPinnedColumns\" class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\" [style.width.px]=\"20\">\r\n                    <input type=\"checkbox\" [disabled]=\"opt.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{item._hash}}\" (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n                </td>\r\n                <td class=\"est-no-border est-col-min\" *ngIf=\"(item.locked || item._sep) && Selection\" [style.width.px]=\"20\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n                    <td *ngIf=\"rowItem && rowItem.Pinned && rowItem.Visible\" [style.width.px]=\"rowItem.PinnedWidth\" es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-no-border]=\"true\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem && !rowItem.Pinned\">\r\n\r\n                <!-- Casistica senza bodyRef, quindi con direttive per i td -->\r\n                <ng-container *ngIf=\"!bodyRef && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-ltab-border]=\"rowItem.LeftBorder\" [class.est-rtab-border]=\"rowItem.RightBorder\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"est-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (NON RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\">\r\n                            <ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\" [innerHTML]=\"rowItem.Content\"></span>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"hierarchyMode_H.collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"hierarchyMode_H.expandParent(item[this.OwnKey])\"></span>\r\n    &nbsp;\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove est-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"est-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" cdkDrag>\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header est-pointer\" cdkDragHandle>\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info est-padding-10 est-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm est-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"columnMetadata_H.globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <!-- <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th> -->\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                                <!-- Pinner -->\r\n                                <th *ngIf=\"DirectivesBased\" class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody \r\n                            cdkDropList \r\n                            [cdkDropListData]=\"TMPColumnsList\" \r\n                            (cdkDropListDropped)=\"columnMetadata_H.columnReordered($event)\" \r\n                            [cdkDropListSortPredicate]=\"columnMetadata_H.sortPredicate.bind(this.columnMetadata_H)\"\r\n                            class=\"est-dropbox\">\r\n\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" \r\n                                class=\"est-pointer est-droplist\" \r\n                                [class.est-white-selected]=\"lastSelectedItemID == item.id\" \r\n                                [class.est-no-selection]=\"!item.visible\"\r\n                                cdkDrag\r\n                                [cdkDragData]=\"item\"\r\n                                [cdkDragDisabled]=\"!ColumnsOrdering || item.fixed || item.pinned\">\r\n\r\n                                <td *ngIf=\"HiddenColumns\">\r\n                                    <input type=\"checkbox\" [class.est-hidden-view]=\"item.fixed\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"columnMetadata_H.updateGlobalColVisCheck();\" />\r\n                                </td>\r\n                                <td class=\"est-nowrap drag-visible\" (click)=\"columnMetadata_H.columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\r\n                                        <!-- Padri -->\r\n                                        <span *ngIf=\"item.parentTemplates && item.parentTemplates.length > 0\" class=\"est-fw-bold est-fs-13\">\r\n                                            (&nbsp;\r\n                                            <ng-container *ngFor=\"let parent of item.parentTemplates; let last=last\">\r\n                                                <ng-container *ngTemplateOutlet=\"parent\"></ng-container>\r\n                                                <span *ngIf=\"!last\">&nbsp;-&nbsp;</span>\r\n                                            </ng-container>\r\n                                            &nbsp;)\r\n                                        </span>\r\n                                        <!-- Template header originale -->\r\n                                        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"!item.template\">{{item.description}}</ng-container>\r\n                                </td>\r\n                                <!--Filler-->\r\n                                <td (click)=\"columnMetadata_H.columnClicked(item);\"></td>\r\n                                <!-- Pinner -->\r\n                                <td *ngIf=\"DirectivesBased && ColumnsPinnable\"><span *ngIf=\"!item.fixed && item.pinnable\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"columnMetadata_H.pinOrUnpinColumn(item)\"></span></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary est-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
                     styles: [".est-loading-box{height:200px;text-align:center;position:relative;background:#ccc}.est-loading-content{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:35px}.est-scrollable{max-height:600px;overflow:auto}.est-head-resizer{top:0;right:0;bottom:0;width:7px;position:absolute;cursor:col-resize}.est-head-resizer-internal{top:0;right:0;left:6px;bottom:0;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density td,.est-high-density th{padding:0 .2rem}.est-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}.est-hidden-view{visibility:hidden}.est-no-border{border:none!important}.est-nowrap{white-space:nowrap}.est-mt-min-5{margin-top:-5px}.est-white-selected{background-color:#ddd!important}.est-line-through{text-decoration:line-through}.est-no-side-padding{padding-left:0;padding-right:0}.est-no-left-padding,.est-no-right-padding{padding-left:0}.est-col-min{width:1px}.est-margin-bottom-0{margin-bottom:0!important}.est-margin-right-10{margin-right:10px!important}.est-right-9{right:9px!important}.est-table-dotted-menu{padding:0 0 2px!important;color:#999}.est-fs-18{font-size:18px}.est-fs-13,.est-fs-14{font-size:14px}.est-fw-bold{font-weight:700}.est-padding-3{padding:3px!important}.est-page-container{position:relative}.est-bring-to-front-strong{z-index:99999999!important}.est-switch{position:relative;display:inline-block;width:30px;height:17px;margin-bottom:0;margin-right:5px;margin-left:5px}.est-switch input{display:none}.est-slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.est-slider,.est-slider:before{position:absolute;transition:.4s}.est-slider:before{content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{transform:translateX(11px)}.est-slider.round{border-radius:10px}.est-slider.round:before{border-radius:50%}.est-custom-input{width:30px;display:inline;padding:1px;height:20px}.est-row-lvl-1 td:first-child{padding-left:5px}.est-row-lvl-2 td:first-child{padding-left:20px}.est-row-lvl-3 td:first-child{padding-left:35px}.est-row-lvl-4 td:first-child{padding-left:50px}.est-row-lvl-5 td:first-child{padding-left:65px}.est-row-lvl-6 td:first-child{padding-left:80px}.est-row-lvl-7 td:first-child{padding-left:95px}.est-row-lvl-8 td:first-child{padding-left:110px}.est-row-lvl-9 td:first-child{padding-left:125px}.est-row-lvl-10 td:first-child{padding-left:140px}.est-row-lvl-11 td:first-child{padding-left:155px}.est-row-lvl-12 td:first-child{padding-left:170px}.est-row-lvl-13 td:first-child{padding-left:185px}.est-row-lvl-14 td:first-child{padding-left:200px}.est-row-lvl-15 td:first-child{padding-left:215px}.est-row-lvl-16 td:first-child{padding-left:230px}.est-row-lvl-17 td:first-child{padding-left:245px}.est-row-lvl-18 td:first-child{padding-left:260px}.est-row-lvl-19 td:first-child{padding-left:275px}.est-row-lvl-20 td:first-child{padding-left:290px}.est-row-lvl-21 td:first-child{padding-left:305px}.est-row-lvl-22 td:first-child{padding-left:320px}.est-row-lvl-23 td:first-child{padding-left:335px}.est-row-lvl-24 td:first-child{padding-left:350px}.est-row-lvl-25 td:first-child{padding-left:365px}.est-row-lvl-26 td:first-child{padding-left:380px}.est-row-lvl-27 td:first-child{padding-left:395px}.est-row-lvl-28 td:first-child{padding-left:410px}.est-row-lvl-29 td:first-child{padding-left:425px}.est-row-lvl-30 td:first-child{padding-left:440px}.est-row-lvl-31 td:first-child{padding-left:455px}.est-row-lvl-32 td:first-child{padding-left:470px}.est-row-lvl-33 td:first-child{padding-left:485px}.est-row-lvl-34 td:first-child{padding-left:500px}.est-row-lvl-35 td:first-child{padding-left:515px}.est-row-lvl-36 td:first-child{padding-left:530px}.est-row-lvl-37 td:first-child{padding-left:545px}.est-row-lvl-38 td:first-child{padding-left:560px}.est-row-lvl-39 td:first-child{padding-left:575px}.est-row-lvl-40 td:first-child{padding-left:590px}.est-row-lvl-41 td:first-child{padding-left:605px}.est-row-lvl-42 td:first-child{padding-left:620px}.est-row-lvl-43 td:first-child{padding-left:635px}.est-row-lvl-44 td:first-child{padding-left:650px}.est-row-lvl-45 td:first-child{padding-left:665px}.est-row-lvl-46 td:first-child{padding-left:680px}.est-row-lvl-47 td:first-child{padding-left:695px}.est-row-lvl-48 td:first-child{padding-left:710px}.est-row-lvl-49 td:first-child{padding-left:725px}.est-row-lvl-50 td:first-child{padding-left:740px}.est-row-lvl-51 td:first-child{padding-left:755px}.est-row-lvl-52 td:first-child{padding-left:770px}.est-row-lvl-53 td:first-child{padding-left:785px}.est-row-lvl-54 td:first-child{padding-left:800px}.est-row-lvl-55 td:first-child{padding-left:815px}.est-row-lvl-56 td:first-child{padding-left:830px}.est-row-lvl-57 td:first-child{padding-left:845px}.est-row-lvl-58 td:first-child{padding-left:860px}.est-row-lvl-59 td:first-child{padding-left:875px}.est-row-lvl-60 td:first-child{padding-left:890px}.est-row-lvl-61 td:first-child{padding-left:905px}.est-row-lvl-62 td:first-child{padding-left:920px}.est-row-lvl-63 td:first-child{padding-left:935px}.est-row-lvl-64 td:first-child{padding-left:950px}.est-row-lvl-65 td:first-child{padding-left:965px}.est-row-lvl-66 td:first-child{padding-left:980px}.est-row-lvl-67 td:first-child{padding-left:995px}.est-row-lvl-68 td:first-child{padding-left:1010px}.est-row-lvl-69 td:first-child{padding-left:1025px}.est-row-lvl-70 td:first-child{padding-left:1040px}.est-row-lvl-71 td:first-child{padding-left:1055px}.est-row-lvl-72 td:first-child{padding-left:1070px}.est-row-lvl-73 td:first-child{padding-left:1085px}.est-row-lvl-74 td:first-child{padding-left:1100px}.est-row-lvl-75 td:first-child{padding-left:1115px}.est-row-lvl-76 td:first-child{padding-left:1130px}.est-row-lvl-77 td:first-child{padding-left:1145px}.est-row-lvl-78 td:first-child{padding-left:1160px}.est-row-lvl-79 td:first-child{padding-left:1175px}.est-row-lvl-80 td:first-child{padding-left:1190px}.est-row-lvl-81 td:first-child{padding-left:1205px}.est-row-lvl-82 td:first-child{padding-left:1220px}.est-row-lvl-83 td:first-child{padding-left:1235px}.est-row-lvl-84 td:first-child{padding-left:1250px}.est-row-lvl-85 td:first-child{padding-left:1265px}.est-row-lvl-86 td:first-child{padding-left:1280px}.est-row-lvl-87 td:first-child{padding-left:1295px}.est-row-lvl-88 td:first-child{padding-left:1310px}.est-row-lvl-89 td:first-child{padding-left:1325px}.est-row-lvl-90 td:first-child{padding-left:1340px}.est-row-lvl-91 td:first-child{padding-left:1355px}.est-row-lvl-92 td:first-child{padding-left:1370px}.est-row-lvl-93 td:first-child{padding-left:1385px}.est-row-lvl-94 td:first-child{padding-left:1400px}.est-row-lvl-95 td:first-child{padding-left:1415px}.est-row-lvl-96 td:first-child{padding-left:1430px}.est-row-lvl-97 td:first-child{padding-left:1445px}.est-row-lvl-98 td:first-child{padding-left:1460px}.est-row-lvl-99 td:first-child{padding-left:1475px}.est-relative{position:relative}.est-top-pager{position:absolute;right:0;top:5px}.est-top-allselect{position:absolute;left:0;top:5px;font-weight:700}.est-padding-10{padding:10px!important}.est-margin-right-50{margin-right:50px}.est-margin-left-50{margin-left:50px}.est-quick-unpin{color:#000;margin-left:8px;font-size:14px;transform:rotate(45deg)}.est-page-sel{color:#000;margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-next,.est-page-prev{color:#000;font-size:inherit;padding:2px 0 0}.est-pinned-header{background-color:#fff;left:0;top:0;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0 solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:sticky;z-index:1;border-top:1px solid #dee2e6!important;padding:0!important}.est-inline{display:inline!important}.est-inline-block{display:inline-block!important}.est-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.est-link:hover{color:#23527c!important;cursor:pointer;text-decoration:underline!important}.est-sticky-last-column{right:-1px;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:2px solid #bbb}.est-rtab-border{border-right:2px solid #bbb}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-margin-bottom-10{margin-bottom:10px}.est-text-center{text-align:center}.est-flex{display:flex}.est-rg-sep-flex-right{display:flex;flex-direction:row-reverse;width:100%;margin:-5px}.est-rg-sep-flex-left{display:flex;flex-direction:row;width:100%;margin:-5px}.est-rg-hdr{font-weight:700}.est-rg-agg{font-style:italic}.est-rg{background-color:hsla(0,0%,46.7%,.4666666666666667)!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:hsla(0,0%,73.3%,.7333333333333333)!important}.est-rg-ipp{text-align:left;display:inline-flex;margin-right:25px}.est-rg-page{text-align:right;display:inline-flex;font-size:inherit;padding-top:5px}.est-droplist.cdk-drag-placeholder{opacity:0}.est-droplist.cdk-drag-preview{z-index:999999999!important;opacity:1;box-sizing:border-box;border-radius:4px;background-color:#fff;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.est-droplist.cdk-drag-preview td:not(.drag-visible){visibility:hidden}.est-droplist.cdk-drag-preview td.drag-visible{padding-top:3px}.est-droplist.cdk-drag-animating,.est-droplist.cdk-drop-list-dragging .est-dropbox:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]
                 },] }
     ];
@@ -4886,18 +4450,14 @@
     EsTableComponent.propDecorators = {
         EsTdsDirective: [{ type: i0.ContentChildren, args: [EsTdDirective,] }],
         EsThsDirective: [{ type: i0.ContentChildren, args: [EsThDirective,] }],
-        EsThs: [{ type: i0.ContentChildren, args: [i0.forwardRef(function () { return EsTh; }),] }],
-        EsTds: [{ type: i0.ContentChildren, args: [i0.forwardRef(function () { return EsTd; }),] }],
         bodyRef: [{ type: i0.ContentChild, args: ['body', { static: false },] }],
         headerRef: [{ type: i0.ContentChild, args: ['header', { static: false },] }],
         headerGroupRef: [{ type: i0.ContentChild, args: ['headerGroup', { static: false },] }],
         secondaryHeaderGroupRef: [{ type: i0.ContentChild, args: ['secondaryHeaderGroup', { static: false },] }],
         CornerMenuOptions: [{ type: i0.Input }],
         ColumnsResizable: [{ type: i0.Input }],
+        ColumnsPinnable: [{ type: i0.Input }],
         AutoUpdate: [{ type: i0.Input }],
-        UseCustomCellActions: [{ type: i0.Input }],
-        CustomCellActionsOn: [{ type: i0.Input }],
-        CellActionPropagates: [{ type: i0.Input }],
         UseCustomCells: [{ type: i0.Input }],
         MaxHeight: [{ type: i0.Input }],
         ContainerClass: [{ type: i0.Input }],
@@ -4921,9 +4481,6 @@
         ExportFunction: [{ type: i0.Input }],
         HasHeaderGroup: [{ type: i0.Input }],
         HasSecondaryHeaderGroup: [{ type: i0.Input }],
-        SliceSize: [{ type: i0.Input }],
-        EndlessScroll: [{ type: i0.Input }],
-        EndlessScrollOnlyForAll: [{ type: i0.Input }],
         HeaderHidden: [{ type: i0.Input }],
         BodyHidden: [{ type: i0.Input }],
         SelectionDisabled: [{ type: i0.Input }],
@@ -4954,7 +4511,6 @@
         onSelectionChanged: [{ type: i0.Output }],
         onRemoval: [{ type: i0.Output }],
         onAbortRemoval: [{ type: i0.Output }],
-        onCellClick: [{ type: i0.Output }],
         onCornerAction: [{ type: i0.Output }],
         onDynamicOperation: [{ type: i0.Output }],
         exportDownloader: [{ type: i0.ViewChild, args: ['exportDownloader', { static: false },] }],
@@ -4969,127 +4525,243 @@
         return EsTableModuleConfig;
     }());
 
-    /** Classe di localizzazione per il componente **TablePagerComponent** */
-    var TablePagerLoc = /** @class */ (function (_super) {
-        __extends(TablePagerLoc, _super);
-        /** @ignore */
-        function TablePagerLoc(LOC_LOCALE) {
-            var _this = _super.call(this, LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT') || this;
-            _super.prototype.set.call(_this, "en->it", "All", ["Tutto"]);
-            _super.prototype.set.call(_this, "en->it", "Shown Elements", ["Elementi visualizzati"]);
-            _super.prototype.set.call(_this, "en->it", "Shown Groups", ["Gruppi visualizzati"]);
-            _super.prototype.set.call(_this, "en->it", "Are you sure you want to retrieve all results?", ["Si è sicuri di voler caricare tutti i risultati?"]);
-            _super.prototype.set.call(_this, "en->it", "This might slow down the page and possibly crash the entire application", ["L'operazione potrebbe rallentare la pagina fino al crash dell'applicazione"]);
-            return _this;
-        }
-        return TablePagerLoc;
-    }(localizations.LocalizationService));
-    TablePagerLoc.decorators = [
-        { type: i0.Injectable }
-    ];
-    TablePagerLoc.ctorParameters = function () { return [
-        { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [EST_LOCALE,] }] }
-    ]; };
-
-    // Angular
-    /** Componente che si occupa della paginazione di una tabella */
-    var TablePagerComponent = /** @class */ (function () {
+    //Angular
+    /** Componente rappresentante una Colonna della tabella */
+    var EsTh = /** @class */ (function () {
         /** @ignore */
-        function TablePagerComponent(msgExts, lc, cdr, locale) {
-            this.msgExts = msgExts;
-            this.lc = lc;
-            this.cdr = cdr;
-            this.locale = locale;
-            /** Indica se deve mostrare un warning quando si cercano di solezionare come elementi da visualizzare "Tutti" */
-            this.WarnOnAll = true;
-            /** Indica se dare la possibilità o meno di selezionare "Tutti" nelle opzioni di paginazione */
-            this.AllSearch = true;
-            /** Placeholder che identifica il "Tutti" */
-            this.DefaultAll = 999999;
-            /** Indica se attivare la modalità gruppo con stili più snelli per apparire sotto ai raggruppamenti */
-            this.GroupMode = false;
-            /** Indica se utilizzare il conteggio dei gruppi o degli oggetti */
-            this.GroupCount = false;
-            /** Indica il testo che va a sostituire "Oggetti Visualizzati" in caso si stia facendo qualcosa di custom, Ignorato in caso di gruppi */
-            this.CountLabel = null;
-            /** Indica se visualizzare il numero totale di oggeti presenti */
-            this.ShowCount = true;
-            /** Indica se visualizzare il numero totale di oggeti presenti */
-            this.ShowPaging = true;
-            /** Output invocato quando il numero di elementi per pagina viene modificato da un click utente */
-            this.pagingSelected = new i0.EventEmitter();
-            /** Opzioni di paginazione */
-            this.PagingOptions = [10, 15, 30, 45, 100];
+        function EsTh(myself, renderer) {
+            this.myself = myself;
+            this.renderer = renderer;
+            /** Dizionario di mappatura con ordinamento attuale e ordinamento successivo per gestire i passaggi di stato */
+            this.orderNext = { "NONE": "DESC", "DESC": "ASC", "ASC": null };
+            /** Indica se si sta effettuando un'operazione di resize su questa colonna */
+            this.resizingThis = false;
+            /**
+             * Storicizza l'offset di partenza del resize dell'elemento HTML per poter calcolare la nuova dimensione richiesta durente il resize
+             *
+             * nuova width = startOffset + posizione X del mouse
+             */
+            this.startOffset = null;
+            /** Id della colonna, dev'essere lo stesso per tutti gli **EsTd** relativi */
+            this.ID = "";
+            /** Indica se questa colonna è ordinabile o meno */
+            this.Orderable = true;
+            /** Valore da mostrare all'interno della colonna. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
+            this.Display = "";
+            /** Indica se le dimnsioni di questa colonna sono modificabili o meno */
+            this.Resizable = false;
+            /** Indica se questo header è pinnato. In caso lo fosse presenta il tastino per effettuare lo spinning */
+            this.Pinned = false;
+            /**
+             * Indica se sta venendo eseguita una operazione di ricerca o meno, serve per evitare l'esecuzione di eventuale codice che potrebbe dare fastidio
+             * come ad esempio l'escuzione di un ordinamento durante il caricamento di dati nuovi
+             */
+            this.SearchInProgress = false;
+            /** Indica se il testo presente in questo Header può andare a capo o meno, di default non può */
+            this.Wrap = false;
+            /** Indica se la colonna è fixed, cioè se non può né essere nascosta, né riposizionata. Solo le prime colonne possono essere Fixed */
+            this.Fixed = false;
+            /** Template Angular da istanziare per questo TH */
+            this.Template = null;
+            /** Evento emesso al cambio di ordinamento effettuato su questa colonna */
+            this.onOrderChange = new i0.EventEmitter();
+            /** Evento emesso all'unpinning della colonna */
+            this.onUnpinning = new i0.EventEmitter();
+            /** Impostato dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header */
+            this._referenced = false;
         }
+        Object.defineProperty(EsTh.prototype, "Visible", {
+            /**
+             * Restituisce lo stato di Visibilità della colonna in oggetto
+             *
+             * @returns {boolean} **true** se visibile, **false** altrimenti
+             */
+            get: function () {
+                if (this._Visible == undefined)
+                    this._Visible = true;
+                return this._Visible;
+            },
+            /**
+             * Imposta la visibilità o meno della colonna, si traduce nell'applicazione o rimozione della classe **app-display-none**
+             *
+             * @param {boolean} expression Indicazione della visibilità
+             */
+            set: function (expression) {
+                this._Visible = expression;
+                if (expression)
+                    this.renderer.removeClass(this.myself.nativeElement, "app-display-none");
+                else
+                    this.renderer.addClass(this.myself.nativeElement, "app-display-none");
+            },
+            enumerable: false,
+            configurable: true
+        });
         /** @ignore */
-        TablePagerComponent.prototype.ngOnInit = function () {
-            this.Model = this.View ? (this.View.itemsperpageoverride || 15) : this.CurrentPageSize;
-            if (this.AllSearch)
-                this.PagingOptions.push(this.DefaultAll);
+        EsTh.prototype.ngAfterViewInit = function () {
+            //Assegnare direttamente il content è più veloce che passare dal native element per qualche motivo
+            this.Description = this.Display === null || this.Display === "" ? this.content.nativeElement.innerText : this.Display;
+            this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
+            //Resize
+            if (this.Resizable)
+                this.renderer.addClass(this.myself.nativeElement, "app-relative");
         };
-        /** @ignore */
-        TablePagerComponent.prototype.ngOnChanges = function (changes) {
-            var newView = changes['View'];
-            var newCPS = changes['CurrentPageSize'];
-            if ((newView && !newView.firstChange) || (newCPS && !newCPS.firstChange))
-                this.Model = (newView === null || newView === void 0 ? void 0 : newView.currentValue) ? (newView.currentValue.itemsperpageoverride || 15) : (newCPS === null || newCPS === void 0 ? void 0 : newCPS.currentValue) ? newCPS.currentValue : null;
+        /** Emette l'evento di unpinning */
+        EsTh.prototype.unpin = function () {
+            this.onUnpinning.emit(this.ID);
+        };
+        /** Gestisce la modifica dell'ordinamento qualora venisse cliccato su questa colonna */
+        EsTh.prototype.setupNextOrderAndNotify = function () {
+            if (!this.ID) {
+                console.log("Attempt to order a column without ID. Operation ignored");
+                return;
+            }
+            if (this.SearchInProgress) {
+                console.log("Attempt to order a column during a search. Operation ignored");
+                return;
+            }
+            if (!this.OrderBy || !this.Orderable)
+                return;
+            var nextOrder = this.orderNext[this.Order || "NONE"];
+            this.Order = nextOrder;
+            this.onOrderChange.emit(this.Order);
         };
         /**
-         * Funzione richiamata dal template quando un utente clicca su un numero di paginazione.
+         * Evento di inizio resize della colonna
          *
-         * Cliccare 2 volte sullo stesso numero causa comunque un refresh dei dati
+         * @param {any} ev Evento MouseDown
+         */
+        EsTh.prototype.onResizeStart = function (ev) {
+            if (!this.Resizable)
+                return;
+            this.resizingThis = true;
+            this.startOffset = this.myself.nativeElement.offsetWidth - ev.pageX;
+        };
+        /** Listener per la fine dell'operazione di resize */
+        EsTh.prototype.onMouseUp = function () {
+            if (!this.Resizable)
+                return;
+            this.resizingThis = false;
+        };
+        /**
+         * Listener per gestire il movimento del mouse qualora un'operazione di resize fosse in esecuzione
          *
-         * @param {number} pageSize Dimensione selezionata lato UI
+         * @param {$event} ev Evento MouseMove
          */
-        TablePagerComponent.prototype.choice = function (pageSize) {
-            var _this = this;
-            if (pageSize == this.DefaultAll && this.WarnOnAll) {
-                this.msgExts.simpleWarningWithChoice(this.lc.loc("Are you sure you want to retrieve all results?"), this.lc.loc("This might slow down the page and possibly crash the entire application"), function () { _this.pagingSelected.emit(pageSize); _this.Model = pageSize; }, function () {
-                    // Dio solo sa perché mi tocca fare sta roba... qui dentro per qualche motivo la CD non prende
-                    var prevModel = _this.Model;
-                    _this.Model = null;
-                    _this.cdr.detectChanges();
-                    _this.Model = prevModel;
-                    _this.cdr.detectChanges();
-                });
-            }
-            else {
-                this.pagingSelected.emit(pageSize);
-                this.Model = pageSize;
-            }
+        EsTh.prototype.onMouseMove = function ($event) {
+            if (!this.Resizable || !this.resizingThis)
+                return;
+            //Uso jquery per non dover far partire un intero ciclo di change detection solo per fare un resize del cazzo
+            //(anche perché viene lanciato ogni 0.1 secondo quindi not a good idea)
+            this.myself.nativeElement.style.width = (this.startOffset + $event.pageX) + "px";
+            //Fermo il bubbling per non fare cose strane
+            $event.preventDefault();
         };
-        return TablePagerComponent;
+        return EsTh;
     }());
-    TablePagerComponent.decorators = [
+    EsTh.decorators = [
         { type: i0.Component, args: [{
-                    selector: "app-paging",
-                    viewProviders: [{ provide: localizations.LocalizationService, useClass: TablePagerLoc }],
-                    template: "<ng-container *ngIf=\"!Hidden\">\r\n  <span class=\"est-fs-14\"> {{CountLabel && !GroupMode ? CountLabel : ((GroupMode ? 'Shown Groups' : 'Shown Elements') | localize : lc)}}:&nbsp;</span>\r\n  <ng-container *ngIf=\"ShowPaging && Model && (Model == DefaultAll || PagerCount >= Model || PagerCount == -1)\">\r\n    <mat-form-field [appearance]=\"'legacy'\" class=\"mat-paginator-page-size-select est-fs-14 est-ipp-bold\">\r\n      <select matNativeControl [ngModel]=\"Model\" name=\"input\" (ngModelChange)=\"choice($event)\">\r\n        <ng-container *ngFor=\"let pOpt of PagingOptions\">\r\n          <option *ngIf=\"pOpt == DefaultAll || PagerCount >= pOpt || PagerCount == -1\" [value]=\"pOpt\">{{ pOpt == DefaultAll ? ('All' | localize : lc) : pOpt.toString()}}</option>\r\n        </ng-container>\r\n      </select>\r\n    </mat-form-field>\r\n    <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount && PagerCount != -1\">&nbsp;/&nbsp;</span>\r\n  </ng-container>\r\n  <span class=\"est-fs-14 est-ipp-bold\" *ngIf=\"ShowCount && PagerCount != -1\">{{PagerCount | number : '0.0-0' : locale}}</span>\r\n</ng-container>",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".est-ipp-sel,.est-ipp-sel-all,.est-rg-ipp-sel,.est-rg-ipp-sel-all{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block;display:inline}.est-ipp-bold{font-weight:700}.mat-paginator-page-size-select{margin:6px 4px 0;width:50px}.mat-paginator-page-size-select .mat-form-field-wrapper{height:52px!important;margin-top:-15px!important;padding:0!important}.mat-form-field-type-mat-native-select .mat-form-field-infix:after{margin-top:-5.5px!important}"]
+                    selector: "[es-th]",
+                    template: "<span (click)=\"setupNextOrderAndNotify()\" [class.app-no-selection]=\"!!ID && Orderable\" [class.app-pointer]=\"!!ID && Orderable\">\r\n    <span #content>\r\n        <ng-container *ngIf=\"Template\">\r\n            <ng-container *ngTemplateOutlet=\"Template\"></ng-container>\r\n        </ng-container>\r\n        <ng-content *ngIf=\"!Template\"></ng-content>\r\n    </span>&nbsp;\r\n    <span class=\"fa\" [class.fa-chevron-down]=\"Order == 'DESC'\" [class.fa-chevron-up]=\"Order == 'ASC'\"></span>\r\n</span>\r\n<span *ngIf=\"Pinned && !Fixed\" class=\"app-pointer fa fa-thumb-tack est-quick-unpin\" (click)=\"unpin()\"></span>\r\n<div [hidden]=\"!Resizable || Fixed || Pinned\" class=\"est-head-resizer\" (mousedown)=\"onResizeStart($event)\">\r\n    <div class=\"est-head-resizer-internal\"></div>\r\n</div>",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    TablePagerComponent.ctorParameters = function () { return [
-        { type: i1.MessageService },
-        { type: localizations.LocalizationService },
-        { type: i0.ChangeDetectorRef },
-        { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [EST_LOCALE,] }] }
+    EsTh.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
     ]; };
-    TablePagerComponent.propDecorators = {
-        CurrentPageSize: [{ type: i0.Input }],
-        View: [{ type: i0.Input }],
-        WarnOnAll: [{ type: i0.Input }],
-        AllSearch: [{ type: i0.Input }],
-        DefaultAll: [{ type: i0.Input }],
-        GroupMode: [{ type: i0.Input }],
-        GroupCount: [{ type: i0.Input }],
-        CountLabel: [{ type: i0.Input }],
-        ShowCount: [{ type: i0.Input }],
-        ShowPaging: [{ type: i0.Input }],
-        PagerCount: [{ type: i0.Input }],
-        Hidden: [{ type: i0.Input }],
-        pagingSelected: [{ type: i0.Output }]
+    EsTh.propDecorators = {
+        ID: [{ type: i0.Input, args: ['es-th',] }],
+        Order: [{ type: i0.Input }],
+        Orderable: [{ type: i0.Input }],
+        Display: [{ type: i0.Input }],
+        Resizable: [{ type: i0.Input }],
+        Pinned: [{ type: i0.Input }],
+        SearchInProgress: [{ type: i0.Input }],
+        OrderBy: [{ type: i0.Input }],
+        Wrap: [{ type: i0.Input }],
+        Fixed: [{ type: i0.Input }],
+        Template: [{ type: i0.Input }],
+        onOrderChange: [{ type: i0.Output }],
+        onUnpinning: [{ type: i0.Output }],
+        content: [{ type: i0.ViewChild, args: ["content", { static: false },] }],
+        Visible: [{ type: i0.Input }],
+        onMouseUp: [{ type: i0.HostListener, args: ['window:mouseup.out-zone',] }],
+        onMouseMove: [{ type: i0.HostListener, args: ['window:mousemove.out-zone', ['$event'],] }]
+    };
+
+    //Angular
+    /** Componente rappresentante una singola cella del body della tabella */
+    var EsTd = /** @class */ (function () {
+        /** @ignore */
+        function EsTd(myself, renderer, _viewContainer, sanitizer) {
+            this.myself = myself;
+            this.renderer = renderer;
+            this._viewContainer = _viewContainer;
+            this.sanitizer = sanitizer;
+            /** Id della cella, dev'essere lo stesso della colonna **EsTh** relativa */
+            this.ID = "";
+            /** Valore da mostrare all'interno della cella. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
+            this.Display = null;
+            /** Template Angular da istanziare per questo TD */
+            this.Template = null;
+        }
+        Object.defineProperty(EsTd.prototype, "Visible", {
+            /**
+             * Restituisce lo stato di Visibilità della cella in oggetto
+             *
+             * @returns {boolean} **true** se visibile, **false** altrimenti
+             */
+            get: function () {
+                if (this._Visible == undefined)
+                    this._Visible = true;
+                return this._Visible;
+            },
+            /**
+             * Imposta la visibilità o meno della cella, si traduce nell'applicazione o rimozione della classe **app-display-none**
+             *
+             * @param {boolean} expression Indicazione della visibilità
+             */
+            set: function (expression) {
+                this._Visible = expression;
+                if (expression)
+                    this.renderer.removeClass(this.myself.nativeElement, "app-display-none");
+                else
+                    this.renderer.addClass(this.myself.nativeElement, "app-display-none");
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /** @ignore */
+        EsTd.prototype.ngAfterViewInit = function () {
+            // Se è Internal significa che è gestita internamente da ES-TABLE quindi evito di fare sti due passaggi di lettura del DOM
+            if (this.Internal)
+                return;
+            this.Content = this.Display === null || this.Display === "" ? this.sanitizer.bypassSecurityTrustHtml(this.myself.nativeElement.innerHTML) : this.sanitizer.bypassSecurityTrustHtml(this.Display);
+            this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
+        };
+        return EsTd;
+    }());
+    EsTd.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "[es-td]",
+                    template: "<span>\r\n    <ng-content></ng-content>\r\n</span>",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    EsTd.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 },
+        { type: i0.ViewContainerRef },
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    EsTd.propDecorators = {
+        ID: [{ type: i0.Input, args: ['es-td',] }],
+        Internal: [{ type: i0.Input }],
+        RouterLink: [{ type: i0.Input }],
+        Display: [{ type: i0.Input }],
+        Template: [{ type: i0.Input }],
+        Context: [{ type: i0.Input }],
+        Visible: [{ type: i0.Input }]
     };
 
     var EsTableModule = /** @class */ (function () {
@@ -5123,13 +4795,79 @@
                     ],
                     declarations: [EsTh, EsTd, EsTableComponent, EsTdDirective, EsThDirective, TablePagerComponent],
                     providers: [i1.UtilityService, i1.ExportService, i1.HashingService, i1.MessageService],
-                    exports: [EsTh, EsTd, EsTableComponent, EsTdDirective, EsThDirective, TablePagerComponent]
+                    exports: [EsTableComponent, EsTdDirective, EsThDirective, TablePagerComponent]
                 },] }
     ];
 
-    /*
-     * Public API Surface of es-table
-     */
+    /** Indica un'opzione cliccabile nel Corner Menù della tabella (il menù richiamabile dai 3 pallini verticli in alto a destra) */
+    var CornerMenuOption = /** @class */ (function () {
+        function CornerMenuOption() {
+        }
+        return CornerMenuOption;
+    }());
+
+    /** Indica operazioni dinamiche generiche che possono essere effettuate per riga. Appaiono come colonne extra sul lato sinistro della tabella */
+    var EsTableOperationDefinition = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {string} id Codice dell'operazione
+         * @param {string} title Titolo dell'operazione, da presentare all'utente su hover della cella
+         * @param {string} iconClass Classe che fornisca un iconcina Es. "fa fa-remove"
+         * @param {string} text Eventuale testo presentato nella cella, genericamente va in alternativa a **iconClass**
+         * @param {string} conditionField Indica il campo dell'oggetto sottostante su cui verificare la visibilità o meno di questa icona
+         * @param {string} conditionValue Indica il valore che la proprietà **conditionField** dell'oggetto sottostante deve assumere affinché questa opzione si veda
+         */
+        function EsTableOperationDefinition(id, title, iconClass, text, conditionField, conditionValue) {
+            this.id = id;
+            this.title = title;
+            this.iconClass = iconClass;
+            this.text = text;
+            this.conditionField = conditionField;
+            this.conditionValue = conditionValue;
+        }
+        return EsTableOperationDefinition;
+    }());
+
+    /** Classe che definisce un oggetto generico come lista di proprietà-valore */
+    var GenericItem = /** @class */ (function () {
+        /** @ignore */
+        function GenericItem() {
+            this._selected = false;
+            this._rowClass = null;
+            this._hash = null;
+            this.properties = {};
+        }
+        return GenericItem;
+    }());
+
+    /** Classe che rappresenta una colonna di un report */
+    var ReportColumn = /** @class */ (function () {
+        function ReportColumn() {
+        }
+        return ReportColumn;
+    }());
+
+    /** Classe che identifica un parametro generico per un report */
+    var ReportParam = /** @class */ (function () {
+        function ReportParam() {
+        }
+        return ReportParam;
+    }());
+
+    /** Classe che rappresenta una lista di oggetti generati da un report */
+    var ReportResult = /** @class */ (function () {
+        function ReportResult() {
+        }
+        return ReportResult;
+    }());
+
+    /** Classe che rappresenta i valori delle proprietà di un oggetto Report */
+    var ReportRow = /** @class */ (function () {
+        function ReportRow() {
+        }
+        return ReportRow;
+    }());
 
     /**
      * Generated bundle index. Do not edit.
@@ -5144,8 +4882,8 @@
     exports.EsTableModule = EsTableModule;
     exports.EsTableModuleConfig = EsTableModuleConfig;
     exports.EsTableOperationDefinition = EsTableOperationDefinition;
-    exports.EsTd = EsTd;
-    exports.EsTh = EsTh;
+    exports.EsTdDirective = EsTdDirective;
+    exports.EsThDirective = EsThDirective;
     exports.GenericItem = GenericItem;
     exports.Group = Group;
     exports.GroupAggregation = GroupAggregation;
@@ -5158,15 +4896,15 @@
     exports.ReportParam = ReportParam;
     exports.ReportResult = ReportResult;
     exports.ReportRow = ReportRow;
-    exports.ɵa = EsTableLoc;
+    exports.TablePagerComponent = TablePagerComponent;
+    exports.ɵa = TablePagerLoc;
     exports.ɵb = EST_LOCALE;
     exports.ɵc = EST_DEBUG;
     exports.ɵd = EST_DEFAULTS;
-    exports.ɵe = UtilitiesHandler;
-    exports.ɵf = EsTdDirective;
-    exports.ɵg = EsThDirective;
-    exports.ɵh = TablePagerComponent;
-    exports.ɵi = TablePagerLoc;
+    exports.ɵe = EsTableLoc;
+    exports.ɵf = UtilitiesHandler;
+    exports.ɵg = EsTh;
+    exports.ɵh = EsTd;
 
     Object.defineProperty(exports, '__esModule', { value: true });