@esfaenza/es-table 11.2.38-beta1 → 11.2.42

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/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', '@angular/forms', '@esfaenza/extensions', '@esfaenza/localizations', '@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.ng.forms, global.i1, global.localizations, 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, forms, i1, localizations, preferences, dragDrop, common, router, select, input, platformBrowser, 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)
@@ -366,343 +479,80 @@
             this.orders = [];
             this.columns = [];
             this.column_ordering = [];
-            this.savedstate = false;
-            this.searchinprogress = false;
-            this.firstsearch = true;
-        }
-        /**
-         * Permette di resettare questo oggetto ai valori di default
-         */
-        AppSearch.prototype.reset = function () {
-            this.pages = 1;
-            this.objectcount = 0;
-            this.searchinprogress = false;
-            this.firstsearch = false;
-            this.page = 1;
-            this.itemsperpageoverride = 15;
-            this.items = [];
-            this.orders = [];
-            this.columns = [];
-            this.column_ordering = [];
-            this.savedstate = false;
-        };
-        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() {
-        }
-        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 () {
-        /**
-         * Costruttore
-         *
-         * @param {T[]} selected Oggetti da considerare selezionati
-         */
-        function ItemsSelection(selected) {
-            /** Indica se tutti gli elementi sono da considerarsi selezionati (anche quelli di altre pagine) */
-            this.all = false;
-            /** Se **all** è **true**, indica gli elementi da escludere, altrimenti è insensato */
-            this.exclusions = [];
-            /** Se **all** è **true**, indica i gruppi da escludere, altrimenti è insensato */
-            this.group_exclusions = [];
-            this.count = selected.length;
-            this.items = selected;
-            this.all = false;
-            this.exclusions = [];
-            this.groups = [];
-            this.group_exclusions = [];
-        }
-        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 () {
+            this.savedstate = false;
+            this.searchinprogress = false;
+            this.firstsearch = true;
+        }
         /**
-         * 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
+         * Permette di resettare questo oggetto ai valori di default
          */
-        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;
+        AppSearch.prototype.reset = function () {
+            this.pages = 1;
+            this.objectcount = 0;
+            this.searchinprogress = false;
+            this.firstsearch = false;
+            this.page = 1;
+            this.itemsperpageoverride = 15;
+            this.items = [];
+            this.orders = [];
+            this.columns = [];
+            this.column_ordering = [];
+            this.savedstate = false;
+        };
+        return AppSearch;
+    }());
+
+    /** 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() {
         }
-        return EsTableColumn;
+        return ReportDefinition;
     }());
 
-    /** 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 () {
+    /** Identifica una selezione applicabile agli oggetti presentati in una tabella */
+    var ItemsSelection = /** @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
+         * @param {T[]} selected Oggetti da considerare selezionati
          */
-        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 = [];
+        function ItemsSelection(selected) {
+            /** Indica se tutti gli elementi sono da considerarsi selezionati (anche quelli di altre pagine) */
+            this.all = false;
+            /** Se **all** è **true**, indica gli elementi da escludere, altrimenti è insensato */
+            this.exclusions = [];
+            /** Se **all** è **true**, indica i gruppi da escludere, altrimenti è insensato */
+            this.group_exclusions = [];
+            this.count = selected.length;
+            this.items = selected;
+            this.all = false;
+            this.exclusions = [];
+            this.groups = [];
+            this.group_exclusions = [];
         }
-        return GroupPager;
+        return ItemsSelection;
     }());
 
-    /**
-     * 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 () {
+    /** Classe che rappresenta un filtro su un gruppo */
+    var GroupFilter = /** @class */ (function () {
         /**
          * Costruttore
          *
-         * @param {string} column Colonna di raggruppamento
-         * @param {string} value Valore della colonna di raggruppamento
+         * @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 GroupRouteFragment(column, value) {
+        function GroupFilter(column, value) {
             this.column = column;
             this.value = value;
         }
-        return GroupRouteFragment;
+        return GroupFilter;
     }());
 
-    /** 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;
+    /** Raccolta di tutti gli Input dell'EsTable a cui può essere logicamente sensato assegnare default per progetto */
+    var EsTableDefaultable = /** @class */ (function () {
+        function EsTableDefaultable() {
         }
-        return ThAggregation;
+        return EsTableDefaultable;
     }());
 
     /** Direttiva per la dichiarazione snella di un EsTd da emettere per ogni elemento, data una colonna */
@@ -753,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 */
@@ -787,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 }],
@@ -803,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);
@@ -846,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;
+        }
+        /**
+         * 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 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 EsTableDefaultable;
+        return EsTableColumn;
     }());
 
-    // Modelli
+    // Angular
     /** Classe che gestisce tutte le informaizoni relative alle colonne: visibilità, posizione, stato di pin/unpin, ecc ecc... */
     var ColumnMetadataHandler = /** @class */ (function () {
         /** @ignore Costruttore*/
@@ -935,7 +951,7 @@
                 // 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.thPinnedWidth, th.Template, th._thParents);
+                    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);
@@ -1537,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*/
@@ -1601,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*/
@@ -1987,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 */
@@ -2058,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 */
@@ -2106,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
@@ -2117,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
@@ -2213,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)
@@ -2357,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;
@@ -2560,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 */
@@ -3287,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;
@@ -3376,6 +3420,8 @@
             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;
             /**
@@ -3601,6 +3647,7 @@
             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 () {
@@ -3651,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);
@@ -3670,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
@@ -3721,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)
@@ -3748,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();
@@ -3910,7 +3957,7 @@
             var _a, _b;
             if (!this.TMPBoundSource || this.TMPBoundSource.length == 0) {
                 this.BaseItemsCount = 0;
-                this.boundSource = this.TMPBoundSource;
+                this.boundSource = [];
                 return;
             }
             if (this.arrayMode || !this.UseCustomCells) {
@@ -4057,7 +4104,7 @@
          * @param {EsThDirective[]} ths Colonne della tabella
          */
         EsTableComponent.prototype.evaluateRowThs = function (ths) {
-            var _s;
+            var _t;
             if (ths.length == 0)
                 return;
             var columnsListCache = {};
@@ -4082,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;
                     }
                 }
@@ -4383,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<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\" [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\" *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)}"]
                 },] }
     ];
@@ -4409,6 +4456,7 @@
         secondaryHeaderGroupRef: [{ type: i0.ContentChild, args: ['secondaryHeaderGroup', { static: false },] }],
         CornerMenuOptions: [{ type: i0.Input }],
         ColumnsResizable: [{ type: i0.Input }],
+        ColumnsPinnable: [{ type: i0.Input }],
         AutoUpdate: [{ type: i0.Input }],
         UseCustomCells: [{ type: i0.Input }],
         MaxHeight: [{ type: i0.Input }],
@@ -4477,129 +4525,6 @@
         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 () {
-        /** @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;
-        };
-        /**
-         * Funzione richiamata dal template quando un utente clicca su un numero di paginazione.
-         *
-         * Cliccare 2 volte sullo stesso numero causa comunque un refresh dei dati
-         *
-         * @param {number} pageSize Dimensione selezionata lato UI
-         */
-        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 }]
-    };
-
     //Angular
     /** Componente rappresentante una Colonna della tabella */
     var EsTh = /** @class */ (function () {
@@ -4847,7 +4772,8 @@
                 ngModule: EsTableModule,
                 providers: [
                     { provide: EST_LOCALE, useValue: (config === null || config === void 0 ? void 0 : config.locale) || 'it-IT' },
-                    { provide: EST_DEBUG, useValue: (config === null || config === void 0 ? void 0 : config.debugMode) || false }
+                    { provide: EST_DEBUG, useValue: (config === null || config === void 0 ? void 0 : config.debugMode) || false },
+                    { provide: EST_DEFAULTS, useValue: (config === null || config === void 0 ? void 0 : config.defaults) || null },
                 ]
             };
         };
@@ -4874,9 +4800,75 @@
                 },] }
     ];
 
-    /*
-     * 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.
@@ -4905,15 +4897,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 = EsTh;
-    exports.ɵg = EsTd;
-    exports.ɵh = TablePagerComponent;
-    exports.ɵi = TablePagerLoc;
+    exports.ɵe = EsTableLoc;
+    exports.ɵf = UtilitiesHandler;
+    exports.ɵg = EsTh;
+    exports.ɵh = EsTd;
 
     Object.defineProperty(exports, '__esModule', { value: true });