@esfaenza/es-table 11.2.21 → 11.2.22-beta1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@esfaenza/extensions'), require('@esfaenza/localizations'), require('@esfaenza/preferences'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/router'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('@ctrl/ngx-csv'), require('@esfaenza/ngx-contextmenu')) :
-    typeof define === 'function' && define.amd ? define('@esfaenza/es-table', ['exports', '@angular/core', '@angular/forms', '@esfaenza/extensions', '@esfaenza/localizations', '@esfaenza/preferences', '@angular/platform-browser', '@angular/common', '@angular/router', '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.extensions, global.localizations, global.preferences, global.ng.platformBrowser, global.ng.common, global.ng.router, global.modal, global.dropdown, global.ngxCsv, global.ngxContextmenu));
-}(this, (function (exports, core, forms, extensions, localizations, preferences, platformBrowser, common, router, modal, dropdown, ngxCsv, ngxContextmenu) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@esfaenza/extensions'), require('@esfaenza/localizations'), require('@esfaenza/preferences'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/router'), require('@angular/material/select'), require('@angular/material/input'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('@ctrl/ngx-csv'), require('@esfaenza/ngx-contextmenu')) :
+    typeof define === 'function' && define.amd ? define('@esfaenza/es-table', ['exports', '@angular/core', '@angular/forms', '@esfaenza/extensions', '@esfaenza/localizations', '@esfaenza/preferences', '@angular/platform-browser', '@angular/common', '@angular/router', '@angular/material/select', '@angular/material/input', 'ngx-bootstrap/modal', 'ngx-bootstrap/dropdown', '@ctrl/ngx-csv', '@esfaenza/ngx-contextmenu'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['es-table'] = {}), global.ng.core, global.ng.forms, global.extensions, global.localizations, global.preferences, global.ng.platformBrowser, global.ng.common, global.ng.router, global.ng.material.select, global.ng.material.input, global.modal, global.dropdown, global.ngxCsv, global.ngxContextmenu));
+}(this, (function (exports, core, forms, extensions, localizations, preferences, platformBrowser, common, router, select, input, modal, dropdown, ngxCsv, ngxContextmenu) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -366,9 +366,7 @@
         return AppSearch;
     }());
 
-    /**
-     * Classe che identifica una colonna. Utilizzata in modalità "Colonne dinamiche"
-     */
+    /** Classe che identifica una colonna. Utilizzata in modalità "Colonne dinamiche" */
     var EsTableColumnsDefinition = /** @class */ (function () {
         /**
          * Costruttore
@@ -383,8 +381,9 @@
          * @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) {
+        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; }
@@ -392,6 +391,7 @@
             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;
@@ -401,92 +401,73 @@
             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
-     */
+    /** Classe che definisce un oggetto generico come lista di proprietà-valore */
     var GenericItem = /** @class */ (function () {
-        /**
-         * @ignore
-         */
+        /** @ignore */
         function GenericItem() {
             this._selected = false;
             this._rowClass = null;
-            this.hash = 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)
-     */
+    /** 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
-     */
+    /** 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
-     */
+    /** 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
-     */
+    /** 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
-     */
+    /** 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
-     */
+    /** 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
-     */
+    /** 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
-     */
+    /** Indica operazioni dinamiche generiche che possono essere effettuate per riga. Appaiono come colonne extra sul lato sinistro della tabella */
     var EsTableOperationDefinition = /** @class */ (function () {
         /**
          * Costruttore
@@ -509,9 +490,115 @@
         return EsTableOperationDefinition;
     }());
 
-    /**
-     * Definizione di una colonna
-     */
+    /** 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 () {
         /**
          * Costruttore
@@ -520,68 +607,93 @@
          * @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
          */
-        function EsTableColumn(id, description, visible, fixed, template) {
+        function EsTableColumn(id, description, visible, fixed, pinned, pinnedWidth, template) {
             this.id = id;
             this.description = description;
             this.visible = visible;
             this.fixed = fixed;
+            this.pinned = pinned;
+            this.pinnedWidth = pinnedWidth;
             this.template = template;
         }
         return EsTableColumn;
     }());
 
-    /**
-     * Identifica una selezione applicabile agli oggetti presentati in una tabella
-     */
-    var ItemsSelection = /** @class */ (function () {
+    /** 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 {T[]} selected Oggetti da considerare selezionati
+         * @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 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 = [];
-            this.count = selected.length;
-            this.items = selected;
-            this.all = false;
-            this.exclusions = [];
+        function GroupPager(_grouplevel, _thisRoute, _parent, view, searches) {
+            this._grouplevel = _grouplevel;
+            this._thisRoute = _thisRoute;
+            this._parent = _parent;
+            this.view = view;
+            this.searches = searches;
+            this._sep = true;
+            this.buttons = [];
         }
-        return ItemsSelection;
+        return GroupPager;
     }());
 
-    //Angular
     /**
-     * Componente rappresentante una singola cella del body della tabella
+     * 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 EsTd = /** @class */ (function () {
+    var GroupRouteFragment = /** @class */ (function () {
         /**
-         * @ignore
+         * Costruttore
+         *
+         * @param {string} column Colonna di raggruppamento
+         * @param {string} value Valore della colonna di raggruppamento
+         */
+        function GroupRouteFragment(column, value) {
+            this.column = column;
+            this.value = value;
+        }
+        return GroupRouteFragment;
+    }());
+
+    /** Classe rappresentante una singola aggregazione effettuata su una colonna */
+    var ThAggregation = /** @class */ (function () {
+        /**
+         * Costruttore
+         *
+         * @param {'min' | 'max' | 'sum'} func Funzione di aggergazione, può essere **min**, **max** o **sum**
+         * @param {string} format Formato richiesto per il valore dell'aggregazione
+         * @param {string} match Match intero del pezzo di testo da cui si è estrapolata l'aggregazione, da rimpiazzare col valore calcolato
          */
+        function ThAggregation(func, format, match) {
+            this.func = func;
+            this.format = format;
+            this.match = match;
+        }
+        return ThAggregation;
+    }());
+
+    //Angular
+    /** Componente rappresentante una singola cella del body della tabella */
+    var EsTd = /** @class */ (function () {
+        /** @ignore */
         function EsTd(myself, renderer, _viewContainer, sanitizer) {
             this.myself = myself;
             this.renderer = renderer;
             this._viewContainer = _viewContainer;
             this.sanitizer = sanitizer;
-            /**
-             * Id della cella, dev'essere lo stesso della colonna **EsTh** relativa
-             */
+            /** Id della cella, dev'essere lo stesso della colonna **EsTh** relativa */
             this.ID = "";
-            /**
-             * Valore da mostrare all'interno della cella. Se omesso verrà proiettato il contenuto dal template in cui è stata usata
-             */
+            /** Valore da mostrare all'interno della cella. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
             this.Display = null;
-            /**
-             * Template Angular da istanziare per questo TD
-             */
+            /** Template Angular da istanziare per questo TD */
             this.Template = null;
         }
         Object.defineProperty(EsTd.prototype, "Visible", {
@@ -610,13 +722,18 @@
             enumerable: false,
             configurable: true
         });
-        /**
-         * @ignore
-         */
+        /** @ignore */
         EsTd.prototype.ngAfterViewInit = function () {
             // Se è Internal significa che è gestita internamente da ES-TABLE quindi evito di fare sti due passaggi di lettura del DOM
             if (this.Internal)
                 return;
+            // L'hash è calcolato dalla ES-table in fase di binding
+            this.Context = this.Context || this.getTemplateContext()._hash;
+            this.Content = this.Display === null || this.Display === "" ? this.sanitizer.bypassSecurityTrustHtml(this.myself.nativeElement.innerHTML) : this.sanitizer.bypassSecurityTrustHtml(this.Display);
+            this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
+        };
+        /** Ottiene il contesto della view su cui è istanziato il componente */
+        EsTd.prototype.getTemplateContext = function () {
             // NGBUG: (<any>this._viewContainer)._view non esiste più in IVY: https://stackoverflow.com/questions/60398827/getting-the-context-of-the-template-inside-of-which-my-component-has-been-render
             var vc = this._viewContainer;
             var context;
@@ -629,34 +746,23 @@
                 context = vc._view.viewContainerParent.context.$implicit;
             else
                 context = vc._view.context.$implicit;
+            if (context)
+                return context;
             // Se non ho ancora trovato il contesto probabilmente sono in IVY e devo fare dei lookup un po' incasinati per beccarlo
-            if (context == null) {
-                var array = this._viewContainer._hostLView;
-                for (var i = 0; i < array.length; i++) {
-                    var item = array[i];
-                    if (item && item.$implicit && !item.ngIf) {
-                        context = item.$implicit;
-                        break;
-                    }
-                    // Second level search for the real context in case the first one we find is an ngIf
-                    if (item && item.length && item.length > 0) {
-                        for (var ii = 0; ii < item.length; ii++) {
-                            var iitem = item[ii];
-                            if (iitem && iitem.$implicit && !iitem.ngIf) {
-                                context = iitem.$implicit;
-                                break;
-                            }
-                        }
+            var array = this._viewContainer._hostLView;
+            for (var i = 0; i < array.length; i++) {
+                var item = array[i];
+                if (item && item.$implicit && !item.ngIf)
+                    return item.$implicit;
+                // Second level search for the real context in case the first one we find is an ngIf
+                if (item && item.length && item.length > 0) {
+                    for (var ii = 0; ii < item.length; ii++) {
+                        var iitem = item[ii];
+                        if (iitem && iitem.$implicit && !iitem.ngIf)
+                            return iitem.$implicit;
                     }
-                    if (context)
-                        break;
                 }
             }
-            // Calcolato dalla ES-table in fase di binding
-            var hash = context.hash;
-            this.Context = hash;
-            this.Content = this.Display === null || this.Display === "" ? this.sanitizer.bypassSecurityTrustHtml(this.myself.nativeElement.innerHTML) : this.sanitizer.bypassSecurityTrustHtml(this.Display);
-            this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
         };
         return EsTd;
     }());
@@ -679,27 +785,20 @@
         RouterLink: [{ type: core.Input }],
         Display: [{ type: core.Input }],
         Template: [{ type: core.Input }],
+        Context: [{ type: core.Input }],
         Visible: [{ type: core.Input }]
     };
 
     //Angular
-    /**
-     * Componente rappresentante una Colonna della tabella
-     */
+    /** Componente rappresentante una Colonna della tabella */
     var EsTh = /** @class */ (function () {
-        /**
-         * @ignore
-         */
+        /** @ignore */
         function EsTh(myself, renderer) {
             this.myself = myself;
             this.renderer = renderer;
-            /**
-             * Dizionario di mappatura con ordinamento attuale e ordinamento successivo per gestire i passaggi di stato
-             */
+            /** Dizionario di mappatura con ordinamento attuale e ordinamento successivo per gestire i passaggi di stato */
             this.orderNext = { "NONE": "DESC", "DESC": "ASC", "ASC": null };
-            /**
-             * Indica se si sta effettuando un'operazione di resize su questa colonna
-             */
+            /** Indica se si sta effettuando un'operazione di resize su questa colonna */
             this.resizingThis = false;
             /**
              * Storicizza l'offset di partenza del resize dell'elemento HTML per poter calcolare la nuova dimensione richiesta durente il resize
@@ -707,21 +806,13 @@
              * nuova width = startOffset + posizione X del mouse
              */
             this.startOffset = null;
-            /**
-             * Id della colonna, dev'essere lo stesso per tutti gli **EsTd** relativi
-             */
+            /** Id della colonna, dev'essere lo stesso per tutti gli **EsTd** relativi */
             this.ID = "";
-            /**
-             * Indica se questa colonna è ordinabile o meno
-             */
+            /** Indica se questa colonna è ordinabile o meno */
             this.Orderable = true;
-            /**
-             * Valore da mostrare all'interno della colonna. Se omesso verrà proiettato il contenuto dal template in cui è stata usata
-             */
+            /** Valore da mostrare all'interno della colonna. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
             this.Display = "";
-            /**
-             * Indica se le dimnsioni di questa colonna sono modificabili o meno
-             */
+            /** Indica se le dimnsioni di questa colonna sono modificabili o meno */
             this.Resizable = false;
             /**
              * Indica se sta venendo eseguita una operazione di ricerca o meno, serve per evitare l'esecuzione di eventuale codice che potrebbe dare fastidio
@@ -732,18 +823,12 @@
             this.Wrap = false;
             /** Indica se la colonna è fixed, cioè se non può né essere nascosta, né riposizionata. Solo le prime colonne possono essere Fixed */
             this.Fixed = false;
-            /**
-             * Template Angular da istanziare per questo TH
-             */
+            /** Template Angular da istanziare per questo TH */
             this.Template = null;
-            /**
-             * Evento emesso al cambio di ordinamento effettuato su questa colonna
-             */
+            /** Evento emesso al cambio di ordinamento effettuato su questa colonna */
             this.onOrderChange = new core.EventEmitter();
-            /**
-             * Impostato dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header
-             */
-            this.Referenced = false;
+            /** Impostato dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header */
+            this._referenced = false;
         }
         Object.defineProperty(EsTh.prototype, "Visible", {
             /**
@@ -771,9 +856,7 @@
             enumerable: false,
             configurable: true
         });
-        /**
-         * @ignore
-         */
+        /** @ignore */
         EsTh.prototype.ngAfterViewInit = function () {
             //Assegnare direttamente il content è più veloce che passare dal native element per qualche motivo
             this.Description = this.Display === null || this.Display === "" ? this.content.nativeElement.innerText : this.Display;
@@ -782,9 +865,7 @@
             if (this.Resizable)
                 this.renderer.addClass(this.myself.nativeElement, "app-relative");
         };
-        /**
-         * Gestisce la modifica dell'ordinamento qualora venisse cliccato su questa colonna
-         */
+        /** Gestisce la modifica dell'ordinamento qualora venisse cliccato su questa colonna */
         EsTh.prototype.setupNextOrderAndNotify = function () {
             if (!this.ID) {
                 console.log("Attempt to order a column without ID. Operation ignored");
@@ -811,9 +892,7 @@
             this.resizingThis = true;
             this.startOffset = this.myself.nativeElement.offsetWidth - ev.pageX;
         };
-        /**
-         * Listener per la fine dell'operazione di resize
-         */
+        /** Listener per la fine dell'operazione di resize */
         EsTh.prototype.onMouseUp = function () {
             if (!this.Resizable)
                 return;
@@ -864,9 +943,7 @@
         onMouseMove: [{ type: core.HostListener, args: ['window:mousemove.out-zone', ['$event'],] }]
     };
 
-    /**
-     * Direttiva per la dichiarazione snella di un EsTd da emettere per ogni elemento, data una colonna
-     */
+    /** Direttiva per la dichiarazione snella di un EsTd da emettere per ogni elemento, data una colonna */
     var EsTdDirective = /** @class */ (function () {
         /**
          * @ignore
@@ -895,23 +972,31 @@
         tdClass: [{ type: core.Input }]
     };
 
-    /**
-     * Direttiva per la dichiarazione snella di un EsTh da emettere come header
-     */
+    /** Direttiva per la dichiarazione snella di un EsTh da emettere come header */
     var EsThDirective = /** @class */ (function () {
         /**
          * @ignore
          */
         function EsThDirective(Template) {
             this.Template = Template;
+            /** Variabile interna all'interno della quale viene raccolta la cache delle aggregazioni specificate in thAggregation */
+            this._thAggregations = null;
             /** Variabile interna che indica il fatto che questo componente è una direttiva. Serve per disambigualrlo dell'EsThComponent */
             this._directive = true;
+            /** Variabile interna impostata dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header */
+            this._referenced = false;
             /** Id della colonna, dev'essere lo stesso per tutti i **td** relativi */
             this.th = "";
+            /** Indica se la colonna è pinnata o no */
+            this.thPinned = false;
+            /** 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 */
             this.thVisible = true;
             /** Indica se la colonna è fixed, cioè se non può né essere nascosta, né riposizionata. Solo le prime colonne possono essere Fixed */
             this.thFixed = false;
+            /** Indica che la colonna è sotto ad un raggruppamento padre, con questo nome nel **th** */
+            this.thParent = "";
             /** Indica se questa colonna è ordinabile o meno */
             this.thOrderable = true;
             /** Indica se il testo presente in questo Header può andare a capo o meno, di default non può */
@@ -920,8 +1005,10 @@
             this.thResizable = false;
             /** Equivalente dell'NgIf sul th */
             this.thIf = true;
-            /** Impostato dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header */
-            this.Referenced = false;
+            /** Indica che bisogna fare un raggruppamento su questa colonna */
+            this.thGroup = false;
+            /** Indica che bisogna fare una aggregazione su questa colonna, a fronte di almeno un altra con un raggruppamento */
+            this.thAggregation = null;
         }
         return EsThDirective;
     }());
@@ -933,31 +1020,38 @@
     ]; };
     EsThDirective.propDecorators = {
         th: [{ type: core.Input }],
+        thPinned: [{ type: core.Input }],
+        thPinnedWidth: [{ type: core.Input }],
         thVisible: [{ type: core.Input }],
         thFixed: [{ type: core.Input }],
+        thParent: [{ type: core.Input }],
         thOrder: [{ type: core.Input }],
         thOrderable: [{ type: core.Input }],
         thWrap: [{ type: core.Input }],
         thResizable: [{ type: core.Input }],
         thClass: [{ type: core.Input }],
-        thIf: [{ type: core.Input }]
+        thGroupClass: [{ type: core.Input }],
+        thIf: [{ type: core.Input }],
+        thGroup: [{ type: core.Input }],
+        thAggregation: [{ type: core.Input }]
     };
 
-    /**
-     * Token che indica il locale da utilizzare all'interno del componente. Supportati solo "it-IT" ed "en-US"
-     */
-    var EST_LOCALE = new core.InjectionToken('EST_LOCALE');
+    /** Token che indica il locale da utilizzare all'interno del componente. Supportati solo "it-IT" ed "en-US" */
+    var EST_LOCALE = new core.InjectionToken('EST_LOCALE');
+    /** Token che indica se emettere log a console o meno */
+    var EST_DEBUG = new core.InjectionToken('EST_DEBUG');
+    /** Token che indica i default da assegnare agli Input */
+    var EST_DEFAULTS = new core.InjectionToken('EST_DEFAULTS');
 
-    /**
-     * Classe di localizzazione per il componente **EsTableComponent**
-     */
+    /** Classe di localizzazione per il componente **EsTableComponent** */
     var EsTableLoc = /** @class */ (function (_super) {
         __extends(EsTableLoc, _super);
-        /**
-         * @ignore
-         */
+        /** @ignore */
         function EsTableLoc(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", "Groups", ["Gruppi"]);
+            _super.prototype.set.call(_this, "en->it", "Cannot export an empty dataset", ["Impossibile esportare un dataset vuoto"]);
             _super.prototype.set.call(_this, "en->it", "Performing Table bootstrap", ["Sto caricando la Tabella"]);
             _super.prototype.set.call(_this, "en->it", "Update every", ["Aggiorna ogni"]);
             _super.prototype.set.call(_this, "en->it", "second/s", ["secondo/i"]);
@@ -984,25 +1078,34 @@
         { type: String, decorators: [{ type: core.Optional }, { type: core.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() {
+        }
+        return EsTableDefaultable;
+    }());
+
     /** Componente che permette di rappresentare una griglia di valori */
     var EsTableComponent = /** @class */ (function () {
         /** @ignore */
-        function EsTableComponent(ngControl, prefService, lc, cdr, hashExts, utiExts, expExts) {
+        function EsTableComponent(ngControl, prefService, deafults, locale, lc, cdr, hashExts, utiExts, expExts, dateExts, msgExts) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
             this.ngControl = ngControl;
             this.prefService = prefService;
+            this.deafults = deafults;
+            this.locale = locale;
             this.lc = lc;
             this.cdr = cdr;
             this.hashExts = hashExts;
             this.utiExts = utiExts;
             this.expExts = expExts;
+            this.dateExts = dateExts;
+            this.msgExts = msgExts;
             /** View finale su cui bindarsi lato Frontend, il tipo può essere IAppSearch<any> (per la **viewMode**), any[] (per l'**arrayMode**) e ReportDefinition per la **reportMode** */
             this.View = null;
             /** Indica se l'es-table deve mostrare il check globale nell'header per fare il "seleziona tutto" */
             this.globalCheck = false;
-            /**
-             * Tiene da conto l'ultimo elemento selezionato in modo da fare ragionamenti del tipo
-             * "Ho selezionato questo, l'ultimo selezionato era **lastSelected**, devo selezionare tutti quelli in mezzo", ad esempio per la selezione multipla
-             */
+            /** Tiene da conto l'ultimo elemento selezionato in modo da poter effettuare il SHIFT+CLICK */
             this.lastSelected = null;
             /** Conteggio interno per il numero di elementi selezionati */
             this.selectedObjects = 0;
@@ -1041,6 +1144,10 @@
             this.RowTHs = null;
             /** Modello di appoggio temporaneo per i **RowTHs** */
             this.TMPRowTHs = null;
+            /** Modello di appoggio temporaneo per i **RowThGroups** */
+            this.TMPRowThGroups = null;
+            /** Modello rappresentante un singolo header group della tabella. Questa lista è già ordinata e pronta per essere utilizzata in ngFor */
+            this.RowThGroups = null;
             /** Cache per i routerLink generati nelle tabelle dinamiche */
             this.DynamicTableRouterLinkCache = {};
             /**
@@ -1087,7 +1194,11 @@
              * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
              */
             this.CustomCellActionsOn = '';
-            /** Serve per decidere di lanciare o meno il **event.stopPropagation()** al termine della gestione dell'evento */
+            /**
+             * Serve per decidere di lanciare o meno il **event.stopPropagation()** al termine della gestione dell'evento
+             *
+             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
+             */
             this.CellActionPropagates = true;
             /**
              * Decide se utilizzare o meno le CustomCells. Impostandolo a **true** l'es-table diventa in grado di gestire nativamente:
@@ -1103,14 +1214,14 @@
             this.UseCustomCells = null;
             /** Permette di impostare l'altezza massima della tabella. Se null la dimensione si adatta al numero di elementi attualmente in visualizzazione */
             this.MaxHeight = null;
-            /** Classi da applicare alla tabella oltre a quelle gestite autonomamente dalla libreria */
-            this.Class = '';
+            /** Classi da applicare al contenitore della tabella */
+            this.ContainerClass = null;
             /** Permette o meno l'export in formato XLSX */
             this.XLSXExport = null;
             /** Permette o meno l'export in formato CSV */
             this.CSVExport = true;
             /** Permette di visualizzare o meno l'opzione di paginazione "Tutti" */
-            this.AllSearch = true;
+            this.AllSearch = null;
             /** Diminuisce gli spazi fra una cella e l'altra, e internamente il padding del font in modo da presentare molti più dati in un'unica pagina */
             this.HighCellDensity = null;
             /** Abilita o meno la possibilità di selezionare oggetti */
@@ -1129,8 +1240,6 @@
             this.Export = null;
             /** Indica se permettere la selezione multipla Windows-like cliccando un oggetto e facendo poi Shift + click su un oggetto successivo */
             this.ShiftClick = null;
-            /** Mostra o nasconde le informazioni di paginazione, sia i pulsanti, sia il selettore degli oggetti per pagina */
-            this.ShowPaging = true;
             /** Indica se nascondere o mostrare il componente di paginazione */
             this.HidePaging = null;
             /** Indica se nascondere o mostrare il conteggio degli elementi trovati */
@@ -1142,12 +1251,10 @@
             /** Nome dell'esportazione generata da questa tabella */
             this.ExportFileName = 'Export.csv';
             /** Classe (HTML) di default della tabella */
-            this.TableClass = 'table table-striped table-hover table-sm';
-            /** Testo da visualizzare nel conteggio. Di default: "Oggetti selezionati" */
-            this.CountLabel = this.lc.loc('Found objects');
-            /** Indica la presenza di raggruppamenti a livello di header */
+            this.TableClass = null;
+            /** @deprecated Indica la presenza di raggruppamenti a livello di header */
             this.HasHeaderGroup = null;
-            /** Indica la presenza di raggruppamenti a livello del raggruppamento precedentemente esistente, chiaramente è insensata senza **HasHeaderGroup** */
+            /** @deprecated Indica la presenza di raggruppamenti a livello del raggruppamento precedentemente esistente, chiaramente è insensata senza **HasHeaderGroup** */
             this.HasSecondaryHeaderGroup = null;
             /** Utilizzato per dividere la sorgente in modalità EndlessScroll */
             this.SliceSize = 100;
@@ -1179,11 +1286,7 @@
             this.HiddenColumns = null;
             /** Permette di riordinare le colonne in base alle impostazioni effettuate dal Menù contestuale in alto a destra */
             this.ColumnsOrdering = null;
-            /**
-             * Eventuale supporto alle ricerche applicate alla modalità Array
-             *
-             * @deprecated Utilizzato solo per un caso particolare del Metering
-             */
+            /** Eventuale supporto alle ricerche applicate alla modalità Array */
             this.SearchView = null;
             /** Abilita o disabilita il sistema che permette di selezionare tutti gli elementi nella vista */
             this.SelectAll = null;
@@ -1203,6 +1306,10 @@
             this.StartsExpanded = true;
             /** Indica se effettuare il salvataggio delle preferenze di ricerca */
             this.SavePreferences = null;
+            /** Indica dove visualizzare le informazioni di paginazione, se sopra, sotto o in entrambi */
+            this.PagingStyle = null;
+            /** Indica dove visualizzare le informazioni di paginazione, se sopra, sotto o in entrambi */
+            this.RowGroupingPagingStyle = null;
             /**
              * Sorgente dati secondaria
              *
@@ -1216,12 +1323,19 @@
              */
             this.TertiarySource = null;
             /** Indica se utilizzare la cache di selezione che permette di mantenere gli stati di selezione dei vari oggetti navigando da una pagina all'altra */
-            this.UseSelectionCache = true;
+            this.UseSelectionCache = null;
+            /** Permette di decidere se, in modalità raggruppamento, mostrare o meno il valore delle colonne di gruppo negli oggetti finali. Di default sono nascosti */
+            this.ShowItemGroupsColumns = null;
             /** Evento che viene richiamato al cambio di oridnamento di una colonna */
             this.onOrderChanged = new core.EventEmitter();
             /**
              * Evento che viene richiamato quando l'es-table ritiene sia necessario ri-effettuare la ricerca.
-             * Il booleano dell'evento indica se viene suggerito di resettare la pagina o meno
+             * Il booleano dell'evento indica se viene suggerito di resettare la pagina o meno.
+             *
+             * Solo in caso venga utilizzata la modalità a raggruppamenti di righe può succedere che l'es-table passi un intero AppSearch come parametro di ricerca,
+             * in quel caso l'applicazione ricevente dovrà onorare la richiesta spedendo al backand l'oggetto di ricerca AS-IS
+             *
+             * il tipo dell'Emitter invece di essere [boolean | AppSearch<any>] è stato impostato a "any" per evitare problemi di retrocompatibilità
              */
             this.onSearchRequest = new core.EventEmitter();
             /** Evento che parte ad ogni modifica di "checkaggio" in forma di comodo array. Espone l'oggetto con lo stato di check attuale */
@@ -1244,19 +1358,91 @@
             /** Numero di pagine (durante la paginazione in modalità Array) */
             this.arraymodePages = 1;
             /** Oggetti per ogni pagina (durante la paginazione in modalità Array) */
-            this.ArraymodeItemsPerPage = 15;
+            this.ArraymodeItemsPerPage = null;
+            /** Colonne da visualizzare in modalità array */
+            this.arrayColumns = [];
+            /** Ordine delle colonne da visualizzare in modalità array */
+            this.arrayColumnOrdering = [];
+            /** Ordinamenti ASC-DESC sulle colonne in modalità array */
+            this.arrayOrders = [];
             /**
              * Variabile che serve a gestire il momento in cui l'es-table aggiorna la paginazione (pulsanti ecc).
              * Essendo operazioni comunque costose le effettuo solo su binding esterni, non su rewrite generati internamente
              */
             this.internalWriteCall = false;
-            /** Cache di selezione Hash - Oggetto */
-            this.selOrDeselCache = {};
+            /**
+             * Cache che conterrà tutte le ricerche effettuate su gruppi diversi dal primo e su elementi contenuti nei gruppi.
+             * In caso di cambi di ordinamento delle colonne diverse dalla prima tutte le chiamate fatte dal secondo livello in poi devono essere rieseguite secondo la seguente logica:
+             *
+             *
+             * **Cambio ordinamento sul primo gruppo**: reload completo, non mi occupo di ripulire gli elementi bindati in alcun modo
+             *
+             * **Cambio ordinamento sulla colonna relativa all'N-esimo gruppo**: reload completo del contenuto dei gruppi precedenti, ripulendo precedentemente
+             * tutti gli elementi con **_grouplevel** = N
+             *
+             * **Cambio ordinamento su una colonna non raggruppata**: reload completo per tutti i gruppi finali aperti, devo precedentemente ripulire tutti gli elementi con **_item** = true
+             *
+             * Altri eventi non dovrebbero rappresentare problemi:
+             * - Selezione: non cambia nulla
+             * - Paginazione: cambia a livello root quindi viene ricaricato tutto comunque, stesso vale per le paginazioni interne
+             */
+            this.groupSearchRequestsCache = [];
+            /** Variabile d'appoggio per capire se c'è bisogno di ri-effettuare una ricerca o meno */
+            this.ResearchNeeded = false;
+            /** Colonne visibili della vista attuale. Valorizzato di default al numero massimo di colonne supportate dalla tabella per le casistiche in assenza di custom cells */
+            this.Columns = { Visibile: 100, VisibleUnpinned: 100, Global: 100 };
+            /** In caso di Row Grouping qui viene salvata la vista principale dei gruppi base */
+            this.MainGroupView = null;
+            /** Conteggio base degli oggetti. In modalità normale viene resettato ad ogni nuova View inserita, in modalità RowGrouping viene resettato solo ad una nuova View di livello "0" */
+            this.BaseItemsCount = null;
+            /** Cache per salvare per ogni chiave di ogni gruppo chi è il gruppo rappresentato */
+            this.rgGroupCache = new Map();
+            /** Cache per salvare per ogni chiave di ogni gruppo chi sono gli oggetti sottostanti, non dei sottogruppi */
+            this.rgItemCache = new Map();
+            /** Cache per salvare per ogni chiave di ogni gruppo chi sono gli oggetti sottostanti, non dei sottogruppi */
+            this.rgChildGroupsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **items** dell'itemSelector. Facilita le operazioni di lookup via hash*/
+            this.itemsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **groups** dell'itemSelector. Facilita le operazioni di lookup via hash */
+            this.groupsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **exclusions** dell'itemSelector. Facilita le operazioni di lookup via hash */
+            this.exclusionsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **group_exclusions** dell'itemSelector. Facilita le operazioni di lookup via hash */
+            this.group_exclusionsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **items** dell'itemSelector. Facilita le operazioni di lookup via indice*/
+            this.i_itemsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **groups** dell'itemSelector. Facilita le operazioni di lookup via indice */
+            this.i_groupsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **exclusions** dell'itemSelector. Facilita le operazioni di lookup via indice */
+            this.i_exclusionsCache = new Map();
+            /** Cache di selezione Hash - Oggetto per la variabile **group_exclusions** dell'itemSelector. Facilita le operazioni di lookup via indice */
+            this.i_group_exclusionsCache = new Map();
+            /** Indica se nonostante siamo in modalità array sono stati individuati dei gruppi. In tal caso es-table si comporta da pseudo backend ed effettua le aggregazioni e raggruppamenti completamente lato client */
+            this.ArrayGrouping = false;
+            this.PagerOptions = { PagerCount: null, ShowCount: true, ShowPaging: true, UsesView: true, View: null, Ready: false, Searches: 'items' };
             /** @ignore */
             this.propagateChange = function (_) { };
             if (ngControl)
                 ngControl.valueAccessor = this;
+            // Assegnazione per tutti gli Input di default
+            this.ColumnsResizable = this.InputOrDefault(this.ColumnsResizable, (_a = this.deafults) === null || _a === void 0 ? void 0 : _a.ColumnsResizable);
+            this.AutoUpdate = this.InputOrDefault(this.AutoUpdate, (_b = this.deafults) === null || _b === void 0 ? void 0 : _b.AutoUpdate);
+            this.AllSearch = this.InputOrDefault(this.AllSearch, (_c = this.deafults) === null || _c === void 0 ? void 0 : _c.AllSearch, true);
+            this.Export = this.InputOrDefault(this.Export, (_d = this.deafults) === null || _d === void 0 ? void 0 : _d.Export);
+            this.HidePaging = this.InputOrDefault(this.HidePaging, (_e = this.deafults) === null || _e === void 0 ? void 0 : _e.HidePaging, false);
+            this.HidePagingCount = this.InputOrDefault(this.HidePagingCount, (_f = this.deafults) === null || _f === void 0 ? void 0 : _f.HidePagingCount);
+            this.HidePagingButtons = this.InputOrDefault(this.HidePagingButtons, (_g = this.deafults) === null || _g === void 0 ? void 0 : _g.HidePagingButtons);
+            this.ContainerClass = this.InputOrDefault(this.ContainerClass, (_h = this.deafults) === null || _h === void 0 ? void 0 : _h.ContainerClass, '');
+            this.TableClass = this.InputOrDefault(this.TableClass, (_j = this.deafults) === null || _j === void 0 ? void 0 : _j.TableClass, 'table table-striped table-hover table-sm');
+            this.Selection = this.InputOrDefault(this.Selection, (_k = this.deafults) === null || _k === void 0 ? void 0 : _k.Selection);
+            this.SavePreferences = this.InputOrDefault(this.SavePreferences, (_l = this.deafults) === null || _l === void 0 ? void 0 : _l.SavePreferences);
+            this.PagingStyle = this.InputOrDefault(this.PagingStyle, (_m = this.deafults) === null || _m === void 0 ? void 0 : _m.PagingStyle, 'bottom');
+            this.RowGroupingPagingStyle = this.InputOrDefault(this.RowGroupingPagingStyle, (_o = this.deafults) === null || _o === void 0 ? void 0 : _o.RowGroupingPagingStyle, 'left');
+            this.UseSelectionCache = this.InputOrDefault(this.UseSelectionCache, (_p = this.deafults) === null || _p === void 0 ? void 0 : _p.UseSelectionCache, true);
+            this.ShowItemGroupsColumns = this.InputOrDefault(this.ShowItemGroupsColumns, (_q = this.deafults) === null || _q === void 0 ? void 0 : _q.ShowItemGroupsColumns, false);
+            this.ArraymodeItemsPerPage = this.InputOrDefault(this.ArraymodeItemsPerPage, (_r = this.deafults) === null || _r === void 0 ? void 0 : _r.ArraymodeItemsPerPage, 15);
         }
+        // #region Ciclo di vita ES-Table - Inizializzazioni
         /** @ignore */
         EsTableComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1266,6 +1452,9 @@
                 throw "Es-table error: Per poter utilizzare l'es-table con [Hierarchy]=\"true\" è richiesto anche [UseCustomCells]=\"true\"";
             // click destro su una riga con selezione attiva: Tiro fuori il context menu e selezione l'elemento corrente
             this.ctxMenuSubscription = (this.ContextMenu || this.tableEmptyMenu).open.subscribe(function (t) {
+                // Gruppi va bene, oggetti pure, ma separatori fra gruppi proprio no...
+                if (t.item._sep)
+                    return;
                 var shouldEmit = !t.item._selected;
                 t.item._selected = true;
                 var itemSelection = _this.handleItemsSelection([t.item]);
@@ -1293,6 +1482,26 @@
                     this.ShiftClick = true;
             }
         };
+        /**
+         * Se l'Input è null (valore non settato) vede se c'è un default con cui valorizzarlo. Se non c'è utilizza il valore di fallback (qualora fornito)
+         *
+         * @param {T} inputValue Valore dell'Input
+         * @param {T} defaultValue Valore di default impostato da configurazione
+         * @param {T} fallbackValue Valore dell'Input per quando non è stato assegnato dal programmatore e non ha un default
+         */
+        EsTableComponent.prototype.InputOrDefault = function (inputValue, defaultValue, fallbackValue) {
+            // Input valorizzato dal programmatore
+            if (inputValue != null && inputValue != undefined)
+                return inputValue;
+            // Input valorizzato da configurazione globale
+            if (defaultValue != null && defaultValue != undefined)
+                return defaultValue;
+            //Input non valorizzato da niente e da nessuno
+            if (fallbackValue != null && fallbackValue != undefined)
+                return fallbackValue;
+            // I casi in cui si arriva qui sono i casi di Input che di default va bene che siano nulli e che nessuno si caga
+            return null;
+        };
         /** @ignore */
         EsTableComponent.prototype.ngOnDestroy = function () {
             if (this.ctxMenuSubscription)
@@ -1302,7 +1511,7 @@
         EsTableComponent.prototype.ngOnChanges = function (changes) {
             return __awaiter(this, void 0, void 0, function () {
                 var newSearchView;
-                return __generator(this, function (_c) {
+                return __generator(this, function (_s) {
                     newSearchView = changes['SearchView'];
                     if (newSearchView && this.SearchView)
                         this.arrayPulsanti = this.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1);
@@ -1310,6 +1519,7 @@
                 });
             });
         };
+        // #endregion
         // #region Implementazione ControlValueAccessor ignorabile
         /** @ignore */
         EsTableComponent.prototype.registerOnChange = function (fn) { this.propagateChange = fn; };
@@ -1320,6 +1530,7 @@
         // #endregion
         /** @ignore */
         EsTableComponent.prototype.writeValue = function (obj) {
+            var _a;
             this.View = obj ? obj : null;
             // Mi è arrivata l'AppSearch quindi di sicuro non ho una ricerca in progress
             this.researchInProgress = false;
@@ -1352,10 +1563,11 @@
             else if (this.View && this.View instanceof AppSearch) {
                 // Se cambia l'oggetto intero significa che ho rimandato la ricerca
                 this.setMode('view');
+                var firstItemGroupOrNoGrouping = (((_a = this.View.requestedgroups) === null || _a === void 0 ? void 0 : _a.length) || 0) == 0;
                 // Se vengo da una ricerca interna mantengo lo stato di selezione precedente (quindi su cambio pagina, cambio ipp, ecc...)
                 // se invece l'utente ha fatto una ricerca lui (quindi cambiando filtri), secco le info di selezione
-                if (!this.View.selection || !this.View.internalsearchrequest || !this.UseSelectionCache) {
-                    this.selOrDeselCache = {};
+                if (!this.View.selection || (!this.View.internalsearchrequest && firstItemGroupOrNoGrouping) || !this.UseSelectionCache) {
+                    this.clearSelectionCaches();
                     this.View.selection = new ItemsSelection([]);
                     this.onSelectionChanged.emit(this.View.selection);
                 }
@@ -1374,55 +1586,136 @@
                         }
                     }
                 }
-                this.arrayPulsanti = this.getPagesArray(6, this.View.page, this.View.pages || 1);
+                // 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)
+                    this.arrayPulsanti = this.getPagesArray(6, this.View.page, this.View.pages || 1);
             }
             else if (this.View && (this.View.length != null && this.View.length != undefined)) {
                 this.setMode('array');
                 if (!this.UseSelectionCache || !this.arraymodeSelection) {
-                    this.selOrDeselCache = {};
+                    this.clearSelectionCaches();
                     this.arraymodeSelection = new ItemsSelection([]);
                     ;
                     this.onSelectionChanged.emit(this.arraymodeSelection);
                 }
+                // Recupero Preference
+                if (this.SavePreferences) {
+                    if (!this.ngControl.name)
+                        console.error("Non posso utilizzare le preference senza avere un 'name' per questa tabella");
+                    else if (!this.prefService)
+                        console.error("Non posso utilizzare le preference senza che il pacchetto @esfaenza/preferences sia installato");
+                    else {
+                        var prefs = this.prefService.retrieve(this.ngControl.name);
+                        if (prefs) {
+                            this.arrayColumns = prefs.columns;
+                            this.arrayColumnOrdering = prefs.column_ordering;
+                        }
+                    }
+                }
                 if (this.SearchView)
                     this.arrayPulsanti = this.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1);
             }
-            if (this.View && !(this.View instanceof ReportDefinition)) {
-                /*
-                 *Uso la tecnica di EndlessScroll se la variabile relativa è attiva e se
-                 * 1) Ho un Array, oppure
-                 * 2) Ho un AppSearch che sta cercando con paginazione "Tutto", oppure
-                 * 3) Ho un AppSearch che sta cercando con paginazione diversa da "Tutto" ma con la variabile EndlessScrollOnlyForAll a false
-                 */
-                var viewCasted = this.View;
-                var isAppSearchWithIppMax = this.viewMode && viewCasted.itemsperpageoverride == this.defaultAllPageOverride;
-                var isAppSearchNoMaxIpp = this.viewMode && viewCasted.itemsperpageoverride != this.defaultAllPageOverride;
-                this.UseEndlessscroll = this.EndlessScroll && (this.arrayMode || isAppSearchWithIppMax || (isAppSearchNoMaxIpp && !this.EndlessScrollOnlyForAll));
-                if (this.UseEndlessscroll) {
-                    this.addedSlices = [];
-                    this.boundSubSources = this.getItemSlices();
-                    this.TMPBoundSource = this.boundSubSources[0] ? this.boundSubSources[0] : [];
-                    if (this.boundSubSources[0])
-                        this.addedSlices.push(0);
+            if (this.View && !(this.View instanceof ReportDefinition))
+                this.finalizeContext();
+            this.postBoundSourceCalculation();
+        };
+        /**
+         * Successivamente al bind del nuovo input questa funzione si occupa di finalizzare tutti i parametri di funzionamento dell'es-table
+         * in base a Input - Modello, e qualsiasi altra cosa possa servire
+         */
+        EsTableComponent.prototype.finalizeContext = function () {
+            var viewCasted = this.View;
+            /*
+             *Uso la tecnica di EndlessScroll se la variabile relativa è attiva e se
+             * 1) Ho un Array, oppure
+             * 2) Ho un AppSearch che sta cercando con paginazione "Tutto", oppure
+             * 3) Ho un AppSearch che sta cercando con paginazione diversa da "Tutto" ma con la variabile EndlessScrollOnlyForAll a false
+             */
+            var isAppSearchWithIppMax = this.viewMode && viewCasted.itemsperpageoverride == this.defaultAllPageOverride;
+            var isAppSearchNoMaxIpp = this.viewMode && viewCasted.itemsperpageoverride != this.defaultAllPageOverride;
+            this.UseEndlessscroll = this.EndlessScroll && (this.arrayMode || isAppSearchWithIppMax || (isAppSearchNoMaxIpp && !this.EndlessScrollOnlyForAll));
+            var hasRowGroups = (viewCasted.groupings && viewCasted.groupings.filter(function (t) { return !t.aggregation; }).length > 0) || (this.arrayMode && this.EsThsDirective.some(function (t) { return t.thGroup; }));
+            // Se ho dei gruppi in modalità array devo sistemare un po' di variabili che diventano insensate
+            if (this.arrayMode) {
+                if (hasRowGroups)
+                    this.UseArrayModePaging = false;
+            }
+            // Riempimento della TMPBoundSource con gli oggetti che verranno poi mostrati ad interfaccia
+            if (this.UseEndlessscroll && !hasRowGroups) {
+                this.addedSlices = [];
+                this.boundSubSources = this.getItemSlices();
+                var firstSub = this.boundSubSources[0];
+                this.TMPBoundSource = firstSub ? firstSub : [];
+                if (firstSub)
+                    this.addedSlices.push(0);
+            }
+            else
+                this.TMPBoundSource = this.getItemsByMode(false, !this.internalWriteCall);
+            // Se ho una gerarchia, assegno i livelli gerarchici alla TMPBoundSource
+            if (this.Hierarchy && !hasRowGroups)
+                this.assignHierarchyLevels(this.TMPBoundSource);
+            // L'hashing degli oggetti lo faccio a prescindere
+            this.calculateHash(this.TMPBoundSource);
+            // Assegno a una variabile mia l'eventuale override per la classe della riga
+            // Se poi sono in modalità gerarchica inietto anche la classe per la configurazione del livello della riga
+            if ((this.TMPBoundSource && this.RowClassAssigner) || this.Hierarchy) {
+                for (var i = 0; i < this.TMPBoundSource.length; i++) {
+                    var item = this.TMPBoundSource[i];
+                    item._rowClass = this.RowClassAssigner ? this.RowClassAssigner(item) : "";
+                    item._rowClass += this.Hierarchy ? " est-row-lvl-" + item._level : "";
                 }
-                else
-                    this.TMPBoundSource = this.getItemsByMode(false, !this.internalWriteCall);
-                if (this.Hierarchy)
-                    this.assignHierarchyLevels(this.TMPBoundSource);
-                this.calculateHash(this.TMPBoundSource);
-                // Assegno a una variabile mia l'eventuale override per la classe della riga
-                // Se poi sono in modalità gerarchica inietto anche la classe per la configurazione del livello della riga
-                if ((this.TMPBoundSource && this.RowClassAssigner) || this.Hierarchy) {
-                    for (var i = 0; i < this.TMPBoundSource.length; i++) {
-                        var item = this.TMPBoundSource[i];
-                        item._rowClass = this.RowClassAssigner ? this.RowClassAssigner(item) : "";
-                        item._rowClass += this.Hierarchy ? " est-row-lvl-" + item.level : "";
-                    }
+            }
+        };
+        /** Genera le informzioni di paginazione per la vista globale dell'es-table */
+        EsTableComponent.prototype.setupPagingInformations = function () {
+            this.PagerOptions.ShowCount = !this.HidePagingCount;
+            if (this.arrayMode && this.UseArrayModePaging && !this.SearchView) {
+                this.PagerOptions.PagerCount = this.View.length || 0;
+                this.PagerOptions.ShowPaging = !this.HidePaging && this.View.length > 10;
+                this.PagerOptions.View = this.View;
+                this.PagerOptions.UsesView = false;
+            }
+            else if (this.arrayMode && (!this.UseArrayModePaging || this.SearchView)) {
+                if (this.SearchView) {
+                    this.PagerOptions.View = this.SearchView;
+                    this.PagerOptions.PagerCount = this.SearchView.objectcount || 0;
                 }
+                else
+                    this.PagerOptions.PagerCount = this.View.length || 0;
+                this.PagerOptions.ShowCount = this.PagerOptions.ShowCount || (this.View && this.View.length) || (this.SearchView && this.SearchView.objectcount && this.SearchView.objectcount != -1);
             }
-            this.postBoundSourceCalculation();
+            else if (this.viewMode) {
+                var tmpView = this.MainGroupView || this.View;
+                var count = (tmpView === null || tmpView === void 0 ? void 0 : tmpView.groupcount) || (tmpView === null || tmpView === void 0 ? void 0 : tmpView.objectcount);
+                this.PagerOptions.Searches = (tmpView === null || tmpView === void 0 ? void 0 : tmpView.groupcount) != null && (tmpView === null || tmpView === void 0 ? void 0 : tmpView.groupcount) != undefined ? 'groups' : 'items';
+                this.PagerOptions.PagerCount = count || 0;
+                this.PagerOptions.View = tmpView;
+                this.PagerOptions.ShowCount = this.PagerOptions.ShowCount || (tmpView && count && count != -1);
+                this.PagerOptions.ShowPaging = !this.HidePaging;
+            }
+            else if (this.reportMode) {
+                var rvc = this.ReportValues.count;
+                this.PagerOptions.View = this.View;
+                this.PagerOptions.PagerCount = rvc && rvc == -1 ? this.ReportValues.rows.length : rvc && rvc > 0 ? this.ReportValues.count : 0;
+                this.PagerOptions.ShowCount = this.PagerOptions.ShowCount || (this.View && this.View.objectcount && this.View.objectcount != -1);
+                this.PagerOptions.ShowPaging = !this.HidePaging && this.View.pagingavailable;
+            }
+        };
+        /**
+         * Ripulisce le cache di selezione
+         *
+         * @todo: SELECTION
+         */
+        EsTableComponent.prototype.clearSelectionCaches = function () {
+            this.itemsCache.clear();
+            this.groupsCache.clear();
+            this.exclusionsCache.clear();
+            this.group_exclusionsCache.clear();
+            this.i_itemsCache.clear();
+            this.i_groupsCache.clear();
+            this.i_exclusionsCache.clear();
+            this.i_group_exclusionsCache.clear();
         };
-        // #region Gestione retrieve degli oggetti da mostrare in tabella, considerando eventuali Endless Scrolls
         /**
          * In base alla modalità specificata (ArrayMode, ViewMode, ecc...) questo metodo recupera l'array di oggetti da bindare ad interfaccia
          *
@@ -1431,6 +1724,8 @@
          * @param {boolean} allIfPossible [false] Indica se prendere tutti gli oggetti quaora possibile, usato solo in ArrayMode
          *
          * @returns {any[]} Lista degli oggetti su cui effettuare il bind lato interfaccia
+         *
+         * @todo: ITEMS
          */
         EsTableComponent.prototype.getItemsByMode = function (onlyselected, refreshPaging, allIfPossible) {
             if (onlyselected === void 0) { onlyselected = false; }
@@ -1441,6 +1736,8 @@
                 items = this.getViewItemsBySource();
             }
             else if (this.arrayMode) {
+                this.View.forEach(function (itm) { itm._item = true; });
+                // Se faccio dei raggruppamenti ignoro la paginazione
                 if (this.UseArrayModePaging && !allIfPossible) {
                     // Se sono in modalità array ma la ricerca dipende da una view devo riallineare gli itemperpage
                     if (this.SearchView)
@@ -1459,16 +1756,62 @@
                 return items.filter(function (t) { return t._selected; });
             return items;
         };
-        /** @ignore */
-        EsTableComponent.prototype.getViewItemsBySource = function () {
-            return this.SecondarySource ? this.View.items2 : this.TertiarySource ? this.View.items3 : this.View.items;
-        };
         /**
-         * Metodo che prende tutti gli oggetti di cui dispone divisi in bucket da 100 elementi
+         * @ignore
          *
-         * @returns {any[][]} Matrice di array Nx100
+         * @todo: ITEMS
          */
-        EsTableComponent.prototype.getItemSlices = function () {
+        EsTableComponent.prototype.getViewItemsBySource = function () {
+            var _this = this;
+            var _a, _b;
+            var castedView = this.View;
+            var groupKeys = castedView.groupings ? castedView.groupings.filter(function (t) { return !t.aggregation; }).length : 0;
+            //Gruppi intermedi
+            if ((((_a = castedView.requestedgroups) === null || _a === void 0 ? void 0 : _a.length) != groupKeys || ((_b = castedView.requestedgroups) === null || _b === void 0 ? void 0 : _b.length) == 0) && groupKeys > 0) {
+                var ret = castedView.groups;
+                ret.forEach(function (itm) {
+                    // Setto variabile interna per capire che questo è in realtà un gruppo
+                    itm._group = true;
+                    // Le informazioni passate come lista le metto dentro a una cache per velocizzarne l'accesso quando devo tirare fuori il display della proprietà
+                    _this.cacheAggregations(itm);
+                });
+                return ret;
+            }
+            else {
+                var ret = this.SecondarySource ? this.View.items2 : this.TertiarySource ? this.View.items3 : this.View.items;
+                // Setto variabile interna per specificare che questo è un elemento normale, non un gruppo o altro
+                ret.forEach(function (itm) { itm._item = true; });
+                return ret;
+            }
+        };
+        /**
+         * Helper per effettuare il caching delle aggregazioni. Le sposta da una lista di **GroupAggregation** a una **<Map<string, Map<string, string>>**
+         *
+         * @todo: ROWGROUPING
+         */
+        EsTableComponent.prototype.cacheAggregations = function (group) {
+            group._aggregationsCache = new Map();
+            var castedAgCache = group._aggregationsCache;
+            for (var i = 0; i < group.aggregations.length; i++) {
+                var agg = group.aggregations[i];
+                if (castedAgCache.has(agg.column))
+                    castedAgCache.get(agg.column).set(agg.aggregation, agg.value);
+                else {
+                    var tmp = new Map();
+                    tmp.set(agg.aggregation, agg.value);
+                    castedAgCache.set(agg.column, tmp);
+                }
+            }
+        };
+        /**
+         * Metodo che prende tutti gli oggetti di cui dispone divisi in bucket da 100 elementi
+         *
+         * @returns {any[][]} Matrice di array Nx100
+         *
+         * @todo: ITEMS
+         */
+        EsTableComponent.prototype.getItemSlices = function () {
+            // Se sono qui di sicuro non ho rowgrouping
             var items = this.getItemsByMode();
             if (!items)
                 return [];
@@ -1503,8 +1846,6 @@
                 }
             }
         };
-        // #endregion
-        // #region Gestione di tutto il ciclo di vita post binding oggetti
         /**
          * Metodo lanciato dopo che la sorgente dati è stata correttamente bindata, si occupa di ricalcolare tutto ciò che serve
          * all'es-table per renderizzare i valori da mostrare
@@ -1515,113 +1856,476 @@
             this.RowContexts = [];
             this.OrderDirectives = [];
             this.lastSelectedItemID = null;
-            // Set timeout e basta funzionerebbe per la modalità JIT, ma per AOT servono sia quello che detectChanges
-            this.cdr.detectChanges();
-            setTimeout(function () {
-                // Se non ho colonne dinamiche ma sono in modalità dinamica (lo capisco perché c'è una view piena di genericitem) metto il default delle colonne
-                _this.eventuallyReviewDynamicColumns();
-                // Molte cose sono ovviamente disponibili solo in modalità View
-                if (_this.viewMode && _this.UseCustomCells) {
-                    var view = _this.View;
-                    var ths = _this.EsThs && _this.EsThs.length > 0 ? _this.EsThs.toArray() : _this.EsThsDirective && _this.EsThsDirective.length > 0 ? _this.EsThsDirective.toArray() : [];
-                    var tds = _this.EsTds && _this.EsTds.length > 0 ? _this.EsTds.toArray() : _this.EsTdsDirective && _this.EsTdsDirective.length > 0 ? _this.EsTdsDirective.toArray() : [];
-                    // N.B: Rispettare l'ordine di queste 3 macrocategorie è VITALE
-                    // *************************************        Sistemazioni di TH, TD, e visibilità varie      *************************************
-                    _this.alignColumnsIfLoadedView(view); // Se sto caricando una View da hotpotato (quindi con savedstate = true) riallineo la visibilità delle colonne e il loro ordine.
-                    _this.refreshColumnsVisibility(ths, tds, view); // Lavoro sui TH ed eventualmente modifico la visibilità anche dei TD.
-                    _this.alignHeadersOrdering(ths, view); // Allineo gli ordinamenti agli header
-                    _this.reviewColumnsList(ths); // Aggiorna la lista delle colonne da mostrare nella dialog per ordinamento ecc
-                    // *************************************        Generazione binding per righe e colonne         *************************************
-                    _this.evaluateRowThs(ths); // Raccolgo i TH
-                    _this.evaluateRowTds(ths, tds); // Raccolgo i TD in contesti separati, un contesto per ogni item
-                    // *************************************        Ultimi aggiustmaenti dei binding                *************************************
-                    _this.generateDefaultOrder(view); // Genero le direttive di ordinamento, che siano default o derivanti dalla AppSearch
-                    _this.applyOrdering(view, true); // Applico l'ordinamento sulle colonne (non ASC DESC, ma "prima questa o quella colonna")
-                    _this.MoveTemporaryVariablesToRealOnes(); // Collego TH e TD aggiustati fino ad ora alle variabili di Binding HTML
-                    _this.evaluateSelection(view.items, view.selection); // Riallineo le info di selezione degli elementi della View
-                }
-                else if (_this.viewMode && !_this.UseCustomCells) {
-                    // Riallineo le info di selezione degli elementi della View
-                    var view = _this.View;
-                    _this.evaluateSelection(view.items, view.selection);
-                }
-                else if (_this.arrayMode) {
-                    // Riallineo le info di selezione degli elementi dell'array
-                    _this.arrayModeEvaluateSelection(_this.View);
-                }
-                // Collego gli oggetti da mostrare
-                _this.boundSource = _this.TMPBoundSource;
-                // Per essere sicuro che dopo un bind di oggetti la es-table aggiorni la grafica
-                _this.cdr.markForCheck();
-                _this.FirstBind = false;
-            });
+            if (this.EsThsDirective && this.EsThsDirective.length > 0 && this.EsTdsDirective && this.EsTdsDirective.length > 0)
+                this.internalPostBoundSource();
+            else {
+                this.cdr.detectChanges();
+                setTimeout(function () { _this.internalPostBoundSource(); });
+            }
         };
         /**
-         * Metodo richiamato solo quando **TMPRowTDs** e **TMPRowTHs** sono completamente generati ed aggiustati. Serve per collegarli alle variabili usate lato binding HTML
+         * Per poter distinguere le chiamate a questo metodo: Dopo il setTimeout se uso gli EsTd/EsTh vecchi, senza il setTimeout se uso le nuove direttive
          */
-        EsTableComponent.prototype.MoveTemporaryVariablesToRealOnes = function () {
-            this.RowTDs = this.TMPRowTDs;
-            this.RowTHs = this.TMPRowTHs;
+        EsTableComponent.prototype.internalPostBoundSource = function () {
+            var View = this.View;
+            var ths = this.EsThs && this.EsThs.length > 0 ? this.EsThs.toArray() : this.EsThsDirective && this.EsThsDirective.length > 0 ? this.EsThsDirective.toArray() : [];
+            var tds = this.EsTds && this.EsTds.length > 0 ? this.EsTds.toArray() : this.EsTdsDirective && this.EsTdsDirective.length > 0 ? this.EsTdsDirective.toArray() : [];
+            // Se non ho colonne dinamiche ma sono in modalità dinamica (lo capisco perché c'è una view piena di genericitem) metto il default delle colonne
+            this.eventuallyReviewDynamicColumns();
+            this.bindDisplayToLoadedItemsOrGroups(View);
+            // Questo dev'essere per forza lanciato dopo **bindDisplayToLoadedItemsOrGroups** dato che è lì che alcune cose vengono valorizzate
+            this.setupPagingInformations();
+            // Molte cose sono ovviamente disponibili solo in modalità View
+            if ((this.viewMode || this.arrayMode) && this.UseCustomCells) {
+                var view = this.viewMode ? View : null;
+                var itemsAndGroups = this.viewMode ? __spread((view.items || []), (view.groups || [])) : View;
+                var si = this.viewMode ? view.selection : this.arraymodeSelection;
+                // N.B: Rispettare l'ordine di queste 3 macrocategorie è VITALE
+                // *************************************        Sistemazioni di TH, TD, e visibilità varie      *************************************
+                var hI = this.evaluateHeadersGroupingInfos(ths); // Prepassaggio per tirare fuori tutte le info utili sugli headers in modo da non ricacolarseli sempre dopo
+                if (this.arrayMode) { // In modalità array non ho un backend...
+                    this.arrayModeReviewOrderings(); // ... quindi gli ordinamenti li devo fare lato client, e ...
+                    this.arrayModeReviewGroupings(hI.leafs); // ... i raggruppamenti li devo fare lato client
+                }
+                this.reviewColumnsList(hI.leafs); // Aggiorna la lista delle colonne da mostrare nella dialog per ordinamento ecc
+                this.moveFixedColumnsAtTheBeginning(hI.leafs, tds); // Sposto tutte le cose fixed all'inizio in modo che la creazione di th e td sia più snella (Utilizza le ColumnsList, quindi dev'essere richiamata PIRMA di reviewColumnsList)
+                this.alignHeadersOrdering(hI.leafs, view); // Allineo gli ordinamenti agli header
+                this.alignColumnsIfLoadedView(view); // Se sto caricando una View da hotpotato (quindi con savedstate = true) riallineo la visibilità delle colonne e il loro ordine.
+                this.refreshColumnsVisibility(hI.leafs, tds, view); // Lavoro sui TH ed eventualmente modifico la visibilità anche dei TD.
+                this.evaluatePinnedColumnsWidth(); // Se sono presenti colonne pinnate valuta la dimensione del contenitore
+                this.generateDefaultOrder(hI.leafs, view); // Genero le direttive di ordinamento, che siano default o derivanti dalla AppSearch
+                this.evaluateHeaderGroups(hI); // Valuto i raggruppamenti degli header se presenti
+                // *************************************        Generazione binding per righe e colonne         *************************************
+                this.evaluateRowThs(hI.leafs); // Raccolgo i TH
+                this.evaluateRowTds(hI.leafs, tds); // Raccolgo i TD in contesti separati, un contesto per ogni item o gruppo
+                // *************************************        Ultimi aggiustmaenti dei binding                *************************************
+                this.applyOrdering(view, true); // Applico l'ordinamento sulle colonne (non ASC DESC, ma "prima questa o quella colonna")
+                this.MoveTemporaryVariablesToRealOnes(); // Collego TH e TD aggiustati fino ad ora alle variabili di Binding HTML
+                this.evaluateSelection(itemsAndGroups, si); // Riallineo le info di selezione degli elementi della View
+                if (this.ResearchNeeded) {
+                    this.changed();
+                    this.emitSearchRequest(false);
+                    this.ResearchNeeded = false;
+                }
+            }
+            else if ((this.viewMode || this.arrayMode) && !this.UseCustomCells) {
+                // Riallineo le info di selezione degli elementi della View
+                var items = this.viewMode ? View.items : View;
+                var si = this.viewMode ? View.selection : this.arraymodeSelection;
+                this.evaluateSelection(items, si);
+            }
+            // Per essere sicuro che dopo un bind di oggetti la es-table aggiorni la grafica
+            this.cdr.markForCheck();
+            this.FirstBind = false;
         };
         /**
-         * Valuta quali elementi devono essere marcati come selezionati nella vista attuale. Si basa sull'oggetto **selection** interno all'AppSearch
+         * Se in modalità array applica gli ordinamenti ASC-DESC delle colonne
          *
-         * @param {any[]} items Oggetti di cui valutare la selezione
-         * @param {ItemsSelection<any>} selectionItem Oggetti di selezione derivante dalla view o dall'oggetto per Array
+         * @todo: INTERNALDB
          */
-        EsTableComponent.prototype.evaluateSelection = function (items, selectionItem) {
-            if (!selectionItem)
+        EsTableComponent.prototype.arrayModeReviewOrderings = function () {
+            var _this = this;
+            if (this.arrayOrders.length > 0)
+                this.arrayOrders.forEach(function (t) {
+                    _this.boundSource = _this.boundSource.sort(function (a, b) { return (a[t.id] > b[t.id] ? 1 : -1) * (t.order == 'DESC' ? -1 : 1); });
+                });
+        };
+        /**
+         * Se in modalità array applica i raggruppamenti definiti lato row-grouping
+         *
+         * @param {ths: EsTh[] | EsThDirective[]} ths Header
+         *
+         * @todo: ROW GROUPING
+         */
+        EsTableComponent.prototype.arrayModeReviewGroupings = function (ths) {
+            if (ths.length == 0)
                 return;
-            this.handleSelectionEvaluation(items, selectionItem);
+            if (this.isEsTh(ths[0]))
+                return;
+            var headerGroups = [];
+            var headerAggregations = [];
+            for (var i = 0; i < ths.length; i++) {
+                var th = ths[i];
+                if (th.thGroup)
+                    headerGroups.push(new Group(th.th, 0, ""));
+                else if (th.thAggregation)
+                    headerAggregations = __spread(headerAggregations, this.getGroupAggregations(th));
+            }
+            if (headerGroups.length > 0) {
+                // Pulizia delle cache
+                this.rgGroupCache.clear();
+                this.rgItemCache.clear();
+                this.rgChildGroupsCache.clear();
+                this.ArrayGrouping = true;
+                this.boundSource = this.getGroupsRecursive(headerGroups, 0, this.boundSource, headerAggregations, null);
+            }
         };
         /**
-         * Valuta quali elementi devono essere marcati come selezionati nella vista attuale. Si basa sull'oggetto **arraymodeSelection** dell'es-table
+         * Data la definizione dei gruppi da generare da una lista di oggetti, suddivide gli oggetti passati in gruppi e sottogruppi
          *
-         * @param {any[]} array Lista di oggetti di cui valutare la selezione in modalità array
+         * @param {Group[]} grps Definizione dei gruppi
+         * @param {number} currentIndex Indice di elaborazione. Al livello 0 ho tutti gli oggetti e devo generare i primi gruppi, a livello 1 ho tutti i gruppi principali e devo
+         * elaborare i sottogruppi, e così via ricorsivamente...
+         * @param {any[]} items Oggetti da raggruppare
+         * @param {GroupOrAggregation[]} aggregations Info di aggregazione
+         * @param {any} parent Riferimento al gruppo padre
+         *
+         * @todo: INTERNALDB
          */
-        EsTableComponent.prototype.arrayModeEvaluateSelection = function (array) {
-            if (array.length == 0)
+        EsTableComponent.prototype.getGroupsRecursive = function (grps, currentIndex, items, aggregations, parent) {
+            // Se l'indice è 0 devo sicuramente nascondere tutti gli oggetti. Solo i gruppi saranno visualizzati
+            if (currentIndex == 0)
+                items.forEach(function (i) { return i._visible = false; });
+            var grp = grps[currentIndex];
+            var ret = [];
+            var last = grps.length == currentIndex + 1;
+            var groups = this.groupBy(items, grp.column);
+            var _loop_1 = function (prop) {
+                var itms = groups[prop];
+                var gp = new Group(grp.column, itms.length, prop);
+                gp.aggregations = this_1.generateAggregations(itms, aggregations);
+                var anygp = gp;
+                anygp._group = true;
+                anygp._expanded = false;
+                if (!parent) {
+                    anygp._thisRoute = [{ column: gp.column, value: gp.value }];
+                    anygp._thisKey = gp.value;
+                    anygp._grouplevel = 0;
+                }
+                else {
+                    anygp._parent = parent._thisKey;
+                    anygp._parentRoute = parent._thisRoute;
+                    anygp._thisRoute = __spread(parent._thisRoute, [{ column: gp.column, value: gp.value }]);
+                    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. 
+                // 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;
+                this_1.calculateHash([anygp]);
+                this_1.cacheAggregations(anygp);
+                // Aggiungo il gruppo padre
+                ret.push(anygp);
+                this_1.rgGroupCache.set(anygp._thisKey, anygp);
+                if (!last) {
+                    //Dal gruppo padre, se non è l'ultimo gruppo della catena, calcolo ricorsivamente tutta la catena sotto
+                    var subGroupsAndItems = this_1.getGroupsRecursive(grps, currentIndex + 1, itms, aggregations, anygp);
+                    var childgroups = subGroupsAndItems.filter(function (t) { return t._group && t._parent == anygp._thisKey; });
+                    anygp._groupscount = childgroups.length;
+                    // Aggiungo la catena del gruppo sotto, aggiungendo alla cache solo i gruppi padre
+                    ret.push.apply(ret, __spread(subGroupsAndItems));
+                    this_1.rgChildGroupsCache.set(anygp._thisKey, childgroups);
+                }
+                else {
+                    // Al gruppo padre, se è l'ultimo assegno tutte le foglie assegnandogli anche la chiave del gruppo
+                    itms.forEach(function (i) { return i._thisKey = anygp._thisKey; });
+                    ret.push.apply(ret, __spread(itms));
+                    this_1.rgItemCache.set(anygp._thisKey, itms);
+                }
+            };
+            var this_1 = this;
+            for (var prop in groups) {
+                _loop_1(prop);
+            }
+            return ret;
+        };
+        /**
+         * Data una lista di oggetti genera le aggregazioni specificate. Si considera di avere tutti gli oggetti
+         *
+         * @param {any[]} items Oggetti di cui calcolare le aggregazione
+         * @param {GroupOrAggregation[]} aggregations Aggergazioni da generare
+         *
+         * @todo: INTERNALDB
+         */
+        EsTableComponent.prototype.generateAggregations = function (items, aggregations) {
+            var rets = [];
+            var aggregationValue = "", feField = null, stringAgg = null, dateAgg = null, numberAgg = null;
+            for (var i = 0; i < aggregations.length; i++) {
+                var agg = aggregations[i];
+                feField = agg.column;
+                if (!feField)
+                    continue;
+                switch (agg.datatype) {
+                    case 'string':
+                        stringAgg = items.map(function (i) { return i[feField].toString(); });
+                        break;
+                    case 'date':
+                        dateAgg = items.map(function (i) { return new Date(i[feField]).getTime(); });
+                        break;
+                    case 'number':
+                        numberAgg = items.map(function (i) { return parseFloat(i[feField]); });
+                        break;
+                }
+                switch (agg.aggregation) {
+                    case 'max':
+                        switch (agg.datatype) {
+                            case 'string':
+                                aggregationValue = stringAgg.sort().reverse()[0];
+                                break;
+                            case 'date':
+                                aggregationValue = new Date(Math.max.apply(Math, __spread(dateAgg))).toString();
+                                break;
+                            case 'number':
+                                aggregationValue = Math.max.apply(Math, __spread(numberAgg)).toString();
+                                break;
+                        }
+                        break;
+                    case 'min':
+                        switch (agg.datatype) {
+                            case 'string':
+                                aggregationValue = stringAgg.sort()[0];
+                                break;
+                            case 'date':
+                                aggregationValue = new Date(Math.min.apply(Math, __spread(dateAgg))).toString();
+                                break;
+                            case 'number':
+                                aggregationValue = Math.min.apply(Math, __spread(numberAgg)).toString();
+                                break;
+                        }
+                        break;
+                    case 'sum':
+                        switch (agg.datatype) {
+                            case 'string':
+                                aggregationValue = stringAgg.join(", ");
+                                break;
+                            case 'date':
+                                aggregationValue = "";
+                                break;
+                            case 'number':
+                                aggregationValue = numberAgg.reduce(function (pre, curr) { return pre + curr; }, 0).toString();
+                                break;
+                        }
+                        break;
+                }
+                rets.push(new GroupAggregation(agg.column, agg.aggregation, aggregationValue));
+            }
+            return rets;
+        };
+        /**
+         * Data una lista di oggetti effettua dei raggruppamenti in base alla proprietà **field**, restituendo un oggetto del tipo { Gruppo1: oggetti[], Gruppo2: oggetti[], ecc... }
+         *
+         * @param {any[]} array Lista degli oggetti da raggruppare
+         * @param {string} field Campo su cui effettuare i raggruppamenti
+         *
+         * @returns {{ [id: string]: any[] }} Dizionario dei gruppi
+         *
+         * @todo: INTERNALDB
+         */
+        EsTableComponent.prototype.groupBy = function (array, field) {
+            var ret = {};
+            for (var i = 0; i < array.length; i++) {
+                var x = array[i];
+                (ret[x[field]] = ret[x[field]] || []).push(x);
+            }
+            return ret;
+        };
+        ;
+        /**
+         * Effettua il binding degli oggetti pervenuti da questa chiamata con gli oggetti effettivamente da graficare
+         *
+         * @param {any} view View da cui sono arrivati gli oggetti. Può essere o un array se sono in **arrayMode** o una AppSearch<T> se sono in **viewMode**
+         */
+        EsTableComponent.prototype.bindDisplayToLoadedItemsOrGroups = function (view) {
+            var _a, _b;
+            if (this.TMPBoundSource.length == 0) {
+                this.BaseItemsCount = 0;
                 return;
-            this.handleSelectionEvaluation(array, this.arraymodeSelection);
+            }
+            if (this.arrayMode || !this.UseCustomCells) {
+                this.boundSource = this.TMPBoundSource;
+                this.BaseItemsCount = (view === null || view === void 0 ? void 0 : view.objectcount) || view.length;
+                return;
+            }
+            var groupingKeys = ((_b = (_a = view.groupings) === null || _a === void 0 ? void 0 : _a.filter(function (t) { return !t.aggregation; })) === null || _b === void 0 ? void 0 : _b.length) || 0;
+            if (groupingKeys == 0) {
+                this.boundSource = this.TMPBoundSource;
+                this.BaseItemsCount = view.objectcount;
+                return;
+            }
+            this.handleNewDataOnRowGrouping(view, groupingKeys);
         };
         /**
-         * Implementazione agnostica della valutazione delle selezioni degli oggetti. Richiede gli oggetti della vista attuale e l'itemSelector
+         * In modalità rowgrouping quando mi arriva un nuovo blocco di oggetti devo aggiungerlo alla vista attuale:
          *
-         * @param {any[]} items Oggetti di cui aggiornare lo stato di selezione
-         * @param {ItemsSelection<any>} selectionItem Oggetto contenente lo stato attuale di selezione
+         * 1) Se non viene richiesto il dettaglio di alcun gruppo significa che devo considerare mi siano arrivati tutti i gruppi principali
+         * 2) Se viene richiesto il dettaglio di un gruppo diverso dall'ultimo devo aggiungere dopo al gruppo cliccato la lista dei sottogruppi
+         * 2) Se viene richiesto il dettaglio dell'ultimo gruppo devo aggiungere dopo al gruppo cliccato la lista degli oggetti
+         *
+         * @param {any} view AppSearch<T> da cui sono arrivati gli oggetti
+         * @param {number} groupingKeys Livelli di raggruppamento da aspettarsi sui dati
+         *
+         * @todo: ROWGROUPING
          */
-        EsTableComponent.prototype.handleSelectionEvaluation = function (items, selectionItem) {
-            var allSelected = true;
-            for (var i = 0; i < items.length; i++) {
-                var itm = items[i];
-                // Reidrato la cache di selezione coi nuovi oggetti altrimenti non riuscirei a beccare gli indici giusti
-                // Dopodiché la uso per calcolare istantaneamente se gli oggetti sono selezionati o no
-                if (this.selOrDeselCache[itm.hash])
-                    this.selOrDeselCache[itm.hash] = itm;
-                if (selectionItem.all)
-                    itm._selected = !this.selOrDeselCache[itm.hash];
-                else
-                    itm._selected = !!this.selOrDeselCache[itm.hash];
-                allSelected = allSelected && itm._selected;
+        EsTableComponent.prototype.handleNewDataOnRowGrouping = function (view, groupingKeys) {
+            var e_1, _s, e_2, _t, _u;
+            var _this = this;
+            var _a, _b;
+            // 1) Se non viene richiesto il dettaglio di alcun gruppo significa che la chiamata restituisce la lista paginata dei gruppi principali.
+            //    Li tratto come se fosse una qualsiasi altra query paginata su N elementi
+            if ((((_a = view.requestedgroups) === null || _a === void 0 ? void 0 : _a.length) || 0) == 0) {
+                this.boundSource = this.TMPBoundSource;
+                this.rgGroupCache = new Map();
+                this.rgItemCache = new Map();
+                this.rgChildGroupsCache = new Map();
+                this.TMPBoundSource.forEach(function (itm) {
+                    itm._thisRoute = itm._group ? [{ column: itm.column, value: itm.value }] : [];
+                    itm._thisKey = itm._group ? itm.value : null;
+                    itm._grouplevel = 0;
+                    _this.rgGroupCache.set(itm._thisKey, itm);
+                });
+                // Resetto la ricerca alla cache di questa "sessione"
+                var firstItem = this.TMPBoundSource[0];
+                this.MainGroupView = Object.assign({}, view);
+                this.groupSearchRequestsCache = [{ path: '', route: [{ column: firstItem.column, value: firstItem.value }], view: this.MainGroupView, group_column: this.TMPBoundSource[0].column }];
+                this.BaseItemsCount = view.objectcount;
             }
-            // Se tutti gli oggetti di questa pagina sono solezionati allora posso mettere il global check a true
-            // Se sono in situazione di all-select anche metto la global checkbox, nonostante ci possano essere delle esclusioni
-            this.globalCheck = allSelected || selectionItem.all;
-            this.canSelectAll = selectionItem.count > 0 && this.SelectAll;
-            // Potrebbe cambiare qualora qualcuno inserisse dati a manazza in modalità Array e desse il refresh manuale alla tabella
-            // Comunque costa 0 quindi mi permetto di refreshare
-            if (this.arrayMode) {
-                var prevSelected = this.selectedObjects;
-                this.finalizeSelectionInformations(selectionItem);
-                if (this.selectedObjects != prevSelected)
-                    this.onSelectionChanged.emit(selectionItem);
+            else {
+                // 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
+                *   GruppoB                      GruppoB
+                *   GruppoC <- Clicco qui        GruppoC
+                *   GruppoD                          GruppoC1
+                *   GruppoE                          GruppoC2
+                *                                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 
+                // view.items e quindi in TMPBoundSource, ho inoltre le informazioni di paginazione **per il singolo sottogruppo** (intermediateGroup = false)
+                /*
+                *   GruppoA                         GruppoA
+                *       GruppoC1                        GruppoC1
+                *   GruppoB                         GruppoB
+                *   GruppoC                         GruppoC
+                *       GruppoC1 <-- Clicco qui         GruppoC1
+                *                                           Oggetto1
+                *                                           Oggetto2
+                *                                           Oggetto3
+                *       GruppoC2                        GruppoC2
+                *   GruppoD                         GruppoD
+                *   GruppoE                         GruppoE
+                */
+                var intermediateGroup_1 = view.requestedgroups.length != groupingKeys;
+                var items = this.boundSource;
+                var insertIndex_1 = 0;
+                var groupKey_1 = "";
+                var groupRoute_1 = [];
+                var _loop_2 = function (i) {
+                    var rg = view.requestedgroups[i];
+                    groupKey_1 += rg.value;
+                    groupRoute_1.push({ column: rg.column, value: rg.value });
+                    insertIndex_1 = items.findIndex(function (t, i) { return i >= insertIndex_1 && t._group && t.column == rg.column && t.value == rg.value; });
+                };
+                // Navigo la stuttura dei gruppi ignorando ricorsivamente tutti gli indici fino ai gruppi che mi interessano in modo da non beccare il primo "GruppoC1" del caso sopra
+                for (var i = 0; i < view.requestedgroups.length; i++) {
+                    _loop_2(i);
+                }
+                var itemsCacheReference_1;
+                var childGroupsCacheReference_1;
+                // Se non è un gruppo intermedio devo ripulire la cache del gruppo su cui ho attualmente cliccato. Gli oggetti saranno riaggiunti dopo
+                if (!intermediateGroup_1) {
+                    this.rgItemCache.set(groupKey_1, []);
+                    itemsCacheReference_1 = this.rgItemCache.get(groupKey_1);
+                }
+                else {
+                    try {
+                        // Se invece è un gruppo intermedio devo ripulire sia tutti i child group ricorsivamente, sia tutti gli item
+                        for (var _v = __values(this.rgChildGroupsCache.keys()), _w = _v.next(); !_w.done; _w = _v.next()) {
+                            var key = _w.value;
+                            if (key.startsWith(groupKey_1))
+                                this.rgChildGroupsCache.delete(key);
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_w && !_w.done && (_s = _v.return)) _s.call(_v);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                    try {
+                        for (var _x = __values(this.rgItemCache.keys()), _y = _x.next(); !_y.done; _y = _x.next()) {
+                            var key = _y.value;
+                            if (key.startsWith(groupKey_1))
+                                this.rgItemCache.delete(key);
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_y && !_y.done && (_t = _x.return)) _t.call(_x);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                    this.rgChildGroupsCache.set(groupKey_1, []);
+                    childGroupsCacheReference_1 = this.rgChildGroupsCache.get(groupKey_1);
+                }
+                // Assegno un livello ai valori che arrivano da usare per formattare la parte grafica. Il primo gruppo cliccato sarà a livello 1,
+                // il secondo sarà a livello 2 e così via...
+                // Li marco inoltre con il parent in modo da poter eliminare i vecchi qualora servisse
+                this.TMPBoundSource.forEach(function (itm) {
+                    itm._parent = groupKey_1;
+                    itm._parentRoute = groupRoute_1;
+                    itm._thisRoute = itm._group ? __spread(groupRoute_1, [new GroupRouteFragment(itm.column, itm.value)]) : [];
+                    itm._thisKey = itm._group ? groupKey_1 + itm.value : groupKey_1;
+                    // Per le ricerca intermedie metto i gruppi nella cache dei gruppi
+                    if (intermediateGroup_1) {
+                        itm._grouplevel = view.requestedgroups.length;
+                        _this.rgGroupCache.set(itm._thisKey, itm);
+                        childGroupsCacheReference_1.push(itm);
+                    }
+                    else {
+                        // Metto anche gli oggetti nella cache non ricorsiva
+                        itemsCacheReference_1.push(itm);
+                    }
+                });
+                // 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 
+                if (intermediateGroup_1 && view.savedstate) {
+                    this.boundSource = this.boundSource.filter(function (t) { return !(t._item || t._thisRoute.length > groupRoute_1.length); });
+                    this.groupSearchRequestsCache = this.groupSearchRequestsCache.filter(function (t) { return !(t.route.length > groupRoute_1.length); });
+                }
+                this.boundSource = this.boundSource.filter(function (t) { return !(t._parent == groupKey_1); });
+                var thisGroup = this.boundSource[insertIndex_1];
+                if (intermediateGroup_1)
+                    thisGroup._groupscount = (_b = this.View) === null || _b === void 0 ? void 0 : _b.groupcount;
+                // Li sostituisco coi nuovi di questa ricerca
+                (_u = this.boundSource).splice.apply(_u, __spread([insertIndex_1 + 1, 0], this.TMPBoundSource));
+                // Aggiungo un separatore alla fine o all'inizio di questi gruppi che dovrà occuparsi di caricare ALTRI gruppi o oggetti (se sono all'ultimo gruppo)
+                var addLast = false;
+                this.boundSource.splice(insertIndex_1 + 1 + (addLast ? this.TMPBoundSource.length : 0), 0, this.getGroupSeparator(view, groupKey_1, groupRoute_1, view.requestedgroups.length, intermediateGroup_1 ? 'groups' : 'items'));
+                // Aggiungo la ricerca alla cache di questa "sessione"
+                var toAdd_1 = { path: groupKey_1, route: groupRoute_1, view: Object.assign({}, view), group_column: intermediateGroup_1 ? this.TMPBoundSource[0].column : '' };
+                var prev = this.groupSearchRequestsCache.findIndex(function (t) { return t.path == toAdd_1.path && t.group_column == toAdd_1.group_column; });
+                if (prev == -1)
+                    this.groupSearchRequestsCache.push(toAdd_1);
+                else
+                    this.groupSearchRequestsCache.splice(prev, 1, toAdd_1);
             }
         };
+        /**
+         * Metodo richiamato solo quando **TMPRowTDs** e **TMPRowTHs** sono completamente generati ed aggiustati. Serve per collegarli alle variabili usate lato binding HTML
+         */
+        EsTableComponent.prototype.MoveTemporaryVariablesToRealOnes = function () {
+            this.RowTDs = this.TMPRowTDs;
+            this.RowTHs = this.TMPRowTHs;
+            this.RowThGroups = this.TMPRowThGroups ? this.TMPRowThGroups.reverse() : null;
+            this.Columns.Visibile = this.RowTHs.filter(function (t) { return t.Visible; }).length;
+            this.Columns.VisibleUnpinned = this.RowTHs.filter(function (t) { return t.Visible && !t.Pinned; }).length;
+            this.Columns.Global = this.Columns.VisibleUnpinned + (this.HasPinnedColumns ? 1 : 0) + (this.Selection ? 1 : 0) + (this.Removal ? 1 : 0) + (this.Export || this.HiddenColumns || this.ColumnsOrdering || this.CornerMenuOptions ? 1 : 0);
+        };
         /**
          * Permette di selezionare o deselezionare in maniera arbitraria degli oggetti
          *
          * @param {any[]} items Oggetti da selezionare o deselezionare
          * @param {boolean} select **true** per selezionarli, **false** per non toccarli
+         *
+         * @todo: SELECTION
          */
         EsTableComponent.prototype.setSelectionStatus = function (items, select) {
             this.handleItemsSelection(items, select);
@@ -1655,32 +2359,118 @@
          * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
          */
         EsTableComponent.prototype.reviewColumnsList = function (ths) {
-            this.ColumnsList = [];
+            var _this = this;
+            this.TMPColumnsList = [];
             if (ths.length == 0)
                 return;
-            // Appena il contentChildren è valorizzato scorro tutti gli header
-            for (var i = 0; i < ths.length; i++) {
+            var _loop_3 = function (i) {
                 var th = ths[i];
-                if (this.isEsTh(th)) {
+                if (this_2.isEsTh(th)) {
                     // Se non ho un id il th è considerato inerte
                     if (!th.ID)
-                        continue;
-                    th.OrderBy = this.OrderByColumn;
+                        return "continue";
+                    th.OrderBy = this_2.OrderByColumn;
                     // Salvo le informazioni dell'header per far parte della lista da cui scegliere quali colonne visualizzare/nascondere
                     // Di default la visibilità è quella impostata nel componente
-                    if (this.HiddenColumns || th.Visible)
-                        this.ColumnsList.push(new EsTableColumn(th.ID, th.Description, th.Visible, th.Fixed, null));
+                    if (this_2.HiddenColumns || th.Visible)
+                        this_2.TMPColumnsList.push(new EsTableColumn(th.ID, th.Description, th.Visible, th.Fixed, null, null, null));
                 }
                 else {
+                    var column_1 = th.th;
                     // Se non ho un id il th è considerato inerte
-                    if (!th.th)
-                        continue;
+                    if (!column_1)
+                        return "continue";
                     // Salvo le informazioni dell'header per far parte della lista da cui scegliere quali colonne visualizzare/nascondere
                     // Di default la visibilità è quella impostata nel componente
-                    if (this.HiddenColumns || th.thVisible)
-                        this.ColumnsList.push(new EsTableColumn(th.th, null, th.thVisible, th.thFixed, th.Template));
+                    if (this_2.HiddenColumns || th.thVisible) {
+                        var previouslyPinned = !this_2.ColumnsList || this_2.ColumnsList.length == 0 || !this_2.ColumnsList.find(function (t) { return t.id == column_1; }) ? null : this_2.ColumnsList.find(function (t) { return t.id == column_1; }).pinned;
+                        this_2.TMPColumnsList.push(new EsTableColumn(column_1, null, th.thVisible, (th.thFixed || th.thGroup), previouslyPinned == null ? th.thPinned : previouslyPinned, th.thPinnedWidth, th.Template));
+                    }
                 }
+            };
+            var this_2 = this;
+            // Appena il contentChildren è valorizzato scorro tutti gli header
+            for (var i = 0; i < ths.length; i++) {
+                _loop_3(i);
             }
+            this.ColumnsList = [];
+            this.TMPColumnsList.forEach(function (c) { _this.ColumnsList.push(Object.assign({}, c)); });
+        };
+        /**
+         * Prende i th e i td in modalità diretive e li ordina in base a se ci sono colonne fixed o meno
+         */
+        EsTableComponent.prototype.moveFixedColumnsAtTheBeginning = function (ths, tds) {
+            var thsCache = {};
+            var fixeds = 0, pinneds = 0;
+            var columnsCache = {};
+            var columnsIndexCache = {};
+            // Creo la cache delle colonne
+            for (var coli = 0; coli < this.ColumnsList.length; coli++) {
+                var col = this.ColumnsList[coli];
+                columnsCache[col.id] = col;
+            }
+            // Sposto tutti gli header fixed o pinned all'inizio
+            for (var i = 0; i < ths.length; i++) {
+                var th = ths[i];
+                if (this.isEsTh(th)) {
+                    thsCache[th.ID] = th;
+                    if (th.Fixed) {
+                        if (i != pinneds + fixeds)
+                            this.arrayMove(ths, i, pinneds + fixeds);
+                        fixeds++;
+                    }
+                }
+                else {
+                    thsCache[th.th] = th;
+                    // Riassegno sempre per ripulire valori di partenza o per aggiornarli in caso di modifiche utente
+                    th.thPinned = (!columnsCache[th.th] && th.thPinned) || (columnsCache[th.th] && columnsCache[th.th].pinned);
+                    if (th.thPinned) {
+                        if (i != pinneds)
+                            this.arrayMove(ths, i, pinneds);
+                        pinneds++;
+                    }
+                    //In questo caso sono informazioni statiche invece, non modificabili dall'utente, quindi non mi dò preoccupazioni
+                    if (th.thFixed || th.thGroup) {
+                        if (i != pinneds + fixeds)
+                            this.arrayMove(ths, i, pinneds + fixeds);
+                        fixeds++;
+                    }
+                }
+            }
+            if (this.isEsTh(ths[0]) || this.isEsTd(tds[0]))
+                return;
+            // Cache degli indici per riposizionare i td come i th
+            for (var i = 0; i < ths.length; i++)
+                columnsIndexCache[ths[i].th] = i;
+            // Riordino le celle per fargli mantenere la stessa struttura dei th
+            var newTds = new Array(ths.length);
+            for (var i = 0; i < tds.length; i++) {
+                var item = tds[i];
+                newTds[columnsIndexCache[item.td]] = item;
+            }
+            this.HasPinnedColumns = pinneds > 0;
+        };
+        /**
+         * In base alla configurazione delle colonne calcola le dimenioni delle colonne pinnate
+         */
+        EsTableComponent.prototype.evaluatePinnedColumnsWidth = function () {
+            if (!this.HasPinnedColumns)
+                return;
+            this.PinnedContainerWidth = 0;
+            for (var i = 0; i < this.ColumnsList.length; i++) {
+                var col = this.ColumnsList[i];
+                if (col.pinned && col.visible)
+                    this.PinnedContainerWidth += col.pinnedWidth;
+            }
+            this.PinnedContainerWidth += this.Selection ? 25 : 0;
+        };
+        /**
+         * Helper per spostare un oggetto di un array da un indice all'altro, in place
+         */
+        EsTableComponent.prototype.arrayMove = function (array, oldI, newI) {
+            if (newI > array.length - 1 || oldI > array.length - 1 || newI < 0 || oldI < 0)
+                throw "Gli indici passati non fanno riferimento a una posizione dell'array. Length: " + array.length + " Old:" + oldI + " New: " + newI;
+            array.splice(newI, 0, array.splice(oldI, 1)[0]);
         };
         /**
          * Terminato il binding delle colonne da **reviewColumnsList** e della **View** dal **writeValue** questo metodo si occupa
@@ -1690,14 +2480,19 @@
          */
         EsTableComponent.prototype.alignColumnsIfLoadedView = function (view) {
             var _this = this;
-            var emitChanged = view.savedstate;
+            var emitChanged = this.viewMode && view.savedstate;
             var newColset = [];
             if (!this.ColumnsList || this.ColumnsList.length == 0)
                 return;
+            var columns = this.viewMode ? view.columns : this.arrayColumns;
             this.ColumnsList.forEach(function (c) {
-                var exCl = view.columns.filter(function (cc) { return cc == c.id; });
-                // Se l'appsearch viene da uno stato precedente, uso le informaizoni sulle colonne che ha dentro, altrimenti sovrascrivo tutto  **
-                if (c.visible && view.columns.length == 0)
+                // Se la colonna è pinnata mi arriva col simoleon
+                var exCl = columns.filter(function (cc) { return cc.replace('§', '') == c.id; });
+                // Se la colonna è pinnata aggiorno l'informazione nella view
+                if (exCl.length == 1)
+                    c.pinned = exCl[0].startsWith('§');
+                // Se l'appsearch viene da uno stato precedente, uso le informazioni sulle colonne che ha dentro, altrimenti sovrascrivo tutto  **
+                if (c.visible && columns.length == 0)
                     newColset.push(c.id);
                 // Se ho una colonna lato AppSearch e nella ColumnList non è visibile, allineo all'AppSearch
                 else if (exCl.length == 1 && !c.visible)
@@ -1707,11 +2502,15 @@
                     c.visible = false;
             });
             // Non ho colonne nella appsearch, vuol dire che sono al primo binding
-            if (view.columns.length == 0)
-                view.columns = newColset;
-            if (view.savedstate && this.ColumnsOrdering && view.column_ordering.length > 0) {
-                var newColList_1 = [];
+            if (columns.length == 0) {
+                if (this.viewMode)
+                    view.columns = newColset;
+                else
+                    this.arrayColumns = newColset;
+            }
+            if ((this.viewMode && view.savedstate) && this.ColumnsOrdering && view.column_ordering.length > 0) {
                 // Scorro gli ordinamenti che avevo salvato e ricreo la ColumnsList in base a loro
+                var newColList_1 = [];
                 view.column_ordering.forEach(function (co) {
                     _this.ColumnsList.forEach(function (c) {
                         if (c.id == co)
@@ -1721,7 +2520,8 @@
                 this.ColumnsList = newColList_1;
             }
             // In ogni caso questo non mi serve più, lo resetto  **
-            view.savedstate = false;
+            if (this.viewMode)
+                view.savedstate = false;
             if (emitChanged)
                 this.changed();
         };
@@ -1732,20 +2532,22 @@
          * @param {'DESC' | 'ASC'} order Nuovo ordine selezionato per la colonna
          */
         EsTableComponent.prototype.thOrderChanged = function (id, order) {
-            if (!this.viewMode) {
-                console.warn('Order changed on a table not in viewMode. Operation not supported');
+            if (!this.viewMode && !this.arrayMode) {
+                console.warn('Order changed on a table not in viewMode or Array mode. Operation not supported');
                 return;
             }
             if (!this.OrderByColumn)
                 return;
-            var appSearch = this.View;
+            var orders = this.viewMode ? this.View.orders : this.arrayOrders;
             var orderToAdd = true;
             var orderToRemove = null;
             // Se per qualche motivo il costruttore non è passato (cache tarpate o simila) fixo
-            if (!appSearch.orders)
-                appSearch.orders = [];
-            for (var i = 0; i < appSearch.orders.length; i++) {
-                var t = appSearch.orders[i];
+            if (!orders && this.viewMode)
+                this.View.orders = [];
+            else if (!orders && this.arrayMode)
+                this.arrayOrders = [];
+            for (var i = 0; i < orders.length; i++) {
+                var t = orders[i];
                 if (t.id == id) {
                     if (order) {
                         t.order = order;
@@ -1756,27 +2558,46 @@
                 }
             }
             if (orderToRemove != null) {
-                appSearch.orders.splice(orderToRemove, 1);
+                orders.splice(orderToRemove, 1);
             }
             else if (orderToAdd) {
                 if (this.MultipleOrderingDirectives)
-                    appSearch.orders.push(new AppOrdering(id, order));
-                else
-                    appSearch.orders = [new AppOrdering(id, order)];
+                    orders.push(new AppOrdering(id, order));
+                else {
+                    if (this.viewMode)
+                        this.View.orders = [new AppOrdering(id, order)];
+                    else if (this.arrayMode)
+                        this.arrayOrders = [new AppOrdering(id, order)];
+                }
             }
             this.onOrderChanged.emit({ id: id, order: order });
-            this.emitSearchRequest(false);
+            if (this.viewMode) {
+                if (this.groupSearchRequestsCache.length > 0)
+                    this.emitRowGroupingSearches(id, orders);
+                else
+                    this.emitSearchRequest(false);
+            }
+            else if (this.arrayMode)
+                this.internalWriteValue();
         };
         /**
          * Metodo da chiamare ogni volta che si vuole dare evidenza all'esterno del bisogno di rieffettuare la ricerca
+         *
+         * @param {boolean} resetsPage Indica al listener che deve resettare il numero di pagina
+         * @param {AppSearch<any>} viewOverride Override della view da emettere per questa ricerca
          */
-        EsTableComponent.prototype.emitSearchRequest = function (value) {
-            if (this.viewMode) {
+        EsTableComponent.prototype.emitSearchRequest = function (resetsPage, viewOverride) {
+            if (this.viewMode && !viewOverride) {
                 this.View.internalsearchrequest = true;
                 this.changed();
             }
+            if (viewOverride) {
+                if (resetsPage)
+                    viewOverride.page = 1;
+                viewOverride.internalsearchrequest = true;
+            }
             this.researchInProgress = true;
-            this.onSearchRequest.emit(value);
+            this.onSearchRequest.emit(viewOverride ? viewOverride : resetsPage);
         };
         /**
          * In base alla visibilità registrata nelle **ColumnsList** questo metodo si occupa di prendere tutti i **EsThs** ed **EsTds** relativi e nasonderli/mostrarli
@@ -1788,16 +2609,19 @@
          * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
          */
         EsTableComponent.prototype.refreshColumnsVisibility = function (ths, tds, view) {
-            var columnsCache = {};
             var newColset = [];
             var fixedThs = {};
+            var columnsCache = {};
             for (var coli = 0; coli < this.ColumnsList.length; coli++) {
                 var col = this.ColumnsList[coli];
                 columnsCache[col.id] = col;
                 if (col.visible)
-                    newColset.push(col.id);
+                    newColset.push((col.pinned ? "§" : "") + col.id);
             }
-            view.columns = newColset;
+            if (view)
+                view.columns = newColset;
+            else
+                this.arrayColumns = newColset;
             // Da qui in poi devono essere eseguiti SOLO in fase di writeValue quindi devo assicurarmi di passarli null in tutti i passaggi diversi da quello
             if (ths) {
                 // Definisco se la colonna è visibile in base alla sua rappresentazione locale in ColumnsList
@@ -1810,7 +2634,7 @@
                     }
                     else {
                         th.thVisible = th.thFixed || (columnsCache[th.th] ? columnsCache[th.th].visible : th.thVisible);
-                        if (th.thFixed)
+                        if (th.thFixed || th.thGroup)
                             fixedThs[th.th] = true;
                     }
                 }
@@ -1827,18 +2651,6 @@
             }
             this.changed();
         };
-        /**
-         *
-         */
-        EsTableComponent.prototype.isEsTd = function (td) {
-            return !td._directive;
-        };
-        /**
-         *
-         */
-        EsTableComponent.prototype.isEsTh = function (th) {
-            return !th._directive;
-        };
         /**
          * Allinea gli ordinamenti dati fra le **EsThs** e le informazioni all'interno della View bindata
          *
@@ -1846,30 +2658,28 @@
          * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
          */
         EsTableComponent.prototype.alignHeadersOrdering = function (ths, view) {
-            var researchNeeded = false;
+            var orders = view ? view.orders : this.arrayOrders;
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
                 if (this.isEsTh(th)) {
                     th.Order = null;
                     // Assegno tutti gli ordinamenti che mi vengono da AppSearch. Sono i più importanti. Non faccio cache o cose strano perché tanto questa
                     // variabile sarà sempre massimo 3 elementi
-                    for (var i_1 = 0; i_1 < view.orders.length; i_1++) {
-                        var or = view.orders[i_1];
+                    for (var i_1 = 0; i_1 < orders.length; i_1++) {
+                        var or = orders[i_1];
                         if (or.id == th.ID)
                             th.Order = or.order;
                     }
                 }
                 else {
                     th.thOrder = null;
-                    for (var i_2 = 0; i_2 < view.orders.length; i_2++) {
-                        var or = view.orders[i_2];
+                    for (var i_2 = 0; i_2 < orders.length; i_2++) {
+                        var or = orders[i_2];
                         if (or.id == th.th)
                             th.thOrder = or.order;
                     }
                 }
             }
-            if (researchNeeded)
-                this.emitSearchRequest(false);
         };
         /**
          * Partendo dagli **EsTds** bindati genera, all'interno del dizionario **TMPRowTDs** tutti i contesti dei vari oggetti.
@@ -1885,6 +2695,11 @@
             if (tds.length == 0)
                 return;
             var thsCache = {};
+            var columnsCache = {};
+            for (var coli = 0; coli < this.ColumnsList.length; coli++) {
+                var col = this.ColumnsList[coli];
+                columnsCache[col.id] = col;
+            }
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
                 thsCache[this.isEsTh(th) ? th.ID : th.th] = th;
@@ -1897,11 +2712,11 @@
                 if (this.isEsTd(td)) {
                     var th = thsCache[td.ID];
                     if (!!th)
-                        th.Referenced = true;
+                        th._referenced = true;
                     else
                         throw "ID dell'oggeto EsTd non compatibile con gli ID dicharati negli EsTh: " + td.ID;
-                    var isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && th.thFixed);
-                    var itemToAdd = { ID: td.ID, Visible: td.Visible, Class: td.Class, Content: td.Content, RouterLink: td.RouterLink, Template: td.Template };
+                    var isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && (th.thFixed || th.thGroup));
+                    var itemToAdd = { GroupAggregation: false, GroupHeader: false, Wraps: true, ID: td.ID, Visible: td.Visible, Class: td.Class, Content: td.Content, RouterLink: td.RouterLink, Template: td.Template };
                     var ctx = td.Context;
                     if (this.TMPRowTDs[ctx]) {
                         if (isFixed)
@@ -1916,22 +2731,27 @@
                     }
                 }
                 else {
-                    for (var i_3 = 0; i_3 < this.TMPBoundSource.length; i_3++) {
-                        var ctx = this.TMPBoundSource[i_3].hash;
+                    for (var i_3 = 0; i_3 < this.boundSource.length; i_3++) {
+                        var item = this.boundSource[i_3];
+                        var ctx = item._hash;
                         var key = td.td;
                         var th = thsCache[td.td];
                         if (!!th)
-                            th.Referenced = true;
+                            th._referenced = true;
                         else
                             throw "ID dell'oggeto EsTd non compatibile con gli ID dicharati negli EsTh: " + td.td;
-                        if (td.tdIf) {
-                            var isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && th.thFixed);
-                            var itemToAdd = { ID: key, Visible: td.tdVisible, Class: td.tdClass, Template: td.Template };
+                        if (td.tdIf || (!this.isEsTh(th) && th.thGroup)) {
+                            var thCasted = th;
+                            var isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && (th.thFixed || th.thGroup || th.thPinned));
+                            var itemToAdd = item._item ?
+                                { LeftBorder: thCasted._lbord, RightBorder: thCasted._rbord, ID: key, Pinned: columnsCache[td.td].pinned, PinnedWidth: thCasted.thPinnedWidth, GroupHeader: false, GroupAggregation: false, Visible: columnsCache[td.td].visible, Wraps: false, Class: td.tdClass, Template: thCasted.thGroup && !this.ShowItemGroupsColumns ? null : td.Template } :
+                                { LeftBorder: thCasted._lbord, RightBorder: thCasted._rbord, ID: key, Pinned: columnsCache[td.td].pinned, PinnedWidth: thCasted.thPinnedWidth, GroupHeader: thCasted.thGroup, GroupAggregation: !!thCasted.thAggregation, Visible: columnsCache[td.td].visible, Wraps: false, Class: thCasted.thGroupClass || '', Content: this.getGroupCellDisplay(item, key, th) };
                             if (this.TMPRowTDs[ctx]) {
-                                if (isFixed)
-                                    this.TMPRowTDs[ctx].splice(0 + (contextFixeds[ctx]++), 0, itemToAdd);
-                                else
-                                    this.TMPRowTDs[ctx].push(itemToAdd);
+                                // Non serve più grazie al metodo **oveFixedColumnsAtTheBeginning**
+                                //if (isFixed)
+                                //    this.TMPRowTDs[ctx].splice(0 + (contextFixeds[ctx]++), 0, itemToAdd);
+                                //else
+                                this.TMPRowTDs[ctx].push(itemToAdd);
                             }
                             else {
                                 this.RowContexts.push(ctx);
@@ -1948,7 +2768,7 @@
             var errs = [];
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
-                if (!th.Referenced)
+                if (!th._referenced)
                     errs.push(this.isEsTh(th) ? th.ID : th.th);
             }
             if (errs.length > 0) {
@@ -1966,46 +2786,234 @@
          * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
          */
         EsTableComponent.prototype.evaluateRowThs = function (ths) {
+            var _s;
             if (ths.length == 0)
                 return;
+            var columnsListCache = {};
+            var castedView = this.View;
+            var groupingsUndefined = this.viewMode && (castedView && !castedView.groupings || castedView.groupings.length == 0);
+            for (var i = 0; i < this.ColumnsList.length; i++) {
+                var itm = this.ColumnsList[i];
+                columnsListCache[itm.id] = itm;
+            }
             this.TMPRowTHs = [];
             var fixed = 0;
             for (var i = 0; i < ths.length; i++) {
                 var th = ths[i];
                 var toAdd = void 0;
                 if (this.isEsTh(th)) {
-                    toAdd = { Fixed: th.Fixed, ID: th.ID, Visible: th.Visible, Class: th.Class, Order: th.Order, Orderable: th.Orderable, Template: null, Content: th.Description, Wrap: false };
+                    toAdd = { Pinned: false, ID: th.ID, Visible: th.Visible, Class: th.Class, Order: th.Order, Orderable: th.Orderable, Template: null, Content: th.Description, Wrap: false };
                     if (th.Fixed)
                         this.TMPRowTHs.splice(0 + (fixed++), 0, toAdd);
                     else
                         this.TMPRowTHs.push(toAdd);
                 }
-                else if (th.thIf) {
-                    // Mentre inserisco mi assicuro di mettere l'elemento per bene in ordine in base alla proprietà "Fixed". Tutte le colonne Fixed devono finire all'inizio
-                    // (Questo probabilmente diventerà il comportamento di default anche per le colonne "Pinned")
-                    toAdd = { Fixed: th.thFixed, ID: th.th, Visible: th.thVisible, Class: th.thClass, Order: th.thOrder, Orderable: th.thOrderable, Template: th.Template, Content: null, Wrap: false };
-                    if (th.thFixed)
-                        this.TMPRowTHs.splice(0 + (fixed++), 0, toAdd);
-                    else
-                        this.TMPRowTHs.push(toAdd);
+                else if (th.thIf || th.thGroup) {
+                    var thClass = (th.thClass || '') + (th.thGroup ? " est-col-min" : "");
+                    toAdd = { Pinned: columnsListCache[th.th].pinned, PinnedWidth: th.thPinnedWidth, ID: th.th, Visible: th.thVisible, Class: thClass, Order: th.thOrder, Orderable: th.thOrderable, Template: th.Template, Content: null, Wrap: false, LeftBorder: th._lbord, RightBorder: th._rbord };
+                    this.TMPRowTHs.push(toAdd);
+                    // Se ho un modello che deve funzionare a rowgrouping ma non è ancora stata effettuata nessuna ricerca sui gruppi principali (groupingsUndefined)
+                    // li genero e mando la prima ricerca che dev'essere spedita al backend per il primo caricamento dei gruppi
+                    if (groupingsUndefined && (th.thAggregation || th.thGroup)) {
+                        var groupAggregations = this.getGroupAggregations(th);
+                        if (!castedView.groupings)
+                            castedView.groupings = groupAggregations;
+                        else
+                            (_s = castedView.groupings).push.apply(_s, __spread(groupAggregations));
+                        this.ResearchNeeded = true;
+                    }
+                }
+            }
+        };
+        EsTableComponent.prototype.evaluateHeadersGroupingInfos = function (ths) {
+            // Pregiro per trovare i parent
+            var parentsCache = {};
+            var thsCache = {};
+            for (var i = 0; i < ths.length; i++) {
+                var th = ths[i];
+                if (this.isEsTh(th))
+                    continue;
+                thsCache[th.th] = th;
+                if (th.thParent && !parentsCache[th.thParent])
+                    parentsCache[th.thParent] = true;
+            }
+            // Secondo giro per beccare il livello massimo e la lista di foglie (th senza parent)
+            var hMaxLevel = 0;
+            var leafs = [];
+            for (var i = 0; i < ths.length; i++) {
+                var th = ths[i];
+                if (this.isEsTh(th)) {
+                    leafs.push(th);
+                    continue;
+                }
+                // Se sono una foglia vedo quanti livelli ci sono sopra
+                if (!parentsCache[th.th]) {
+                    leafs.push(th);
+                    var tmp = this.jumpsToFinalParent(th, thsCache);
+                    hMaxLevel = tmp > hMaxLevel ? tmp : hMaxLevel;
+                }
+            }
+            return { leafs: leafs, groupingLevel: hMaxLevel, parentsCache: parentsCache, thsCache: thsCache };
+        };
+        /**
+         * Genera gli header groups da una lista di info sui th all'interno della variabile **TMPRowThGroups**
+         */
+        EsTableComponent.prototype.evaluateHeaderGroups = function (infos) {
+            if (infos.groupingLevel == 0)
+                return;
+            // Giro 2.5, creo l'output dei raggruppamenti per header in modo da non dovermi preoccupare di celle non inizializzate
+            var expandedGroups = [];
+            var visibleUnpinnedLeafs = infos.leafs.filter(function (t) { return t.thVisible && !t.thPinned; });
+            for (var l = 0; l < infos.groupingLevel; l++) {
+                expandedGroups.push([]);
+                for (var i = 0; i < visibleUnpinnedLeafs.length; i++)
+                    expandedGroups[l].push("");
+            }
+            // Ordino le foglie in base agli ordinamenti delle colonne
+            var orderedLeafs = [];
+            for (var i = 0; i < this.OrderDirectives.length; i++) {
+                var leaf = infos.thsCache[this.OrderDirectives[i]];
+                if (leaf.thVisible && !leaf.thPinned)
+                    orderedLeafs.push(leaf);
+            }
+            // Terzo giro per creare l'array group con tutti i riferimenti del caso
+            var currentParent = "";
+            for (var i = 0; i < orderedLeafs.length; i++) {
+                var refTh = orderedLeafs[i];
+                var prevTh = i - 1 >= 0 ? orderedLeafs[i - 1] : null;
+                // Parent diverso da prima, metto il bordo a sinistra e a destra della cella precedente (se c'è)
+                // All'ultimo giro metto il bordo a destra. Tutto questo lo rieseguo per ogni cella in modo da ripulire eventuali a cui avevo assegnato tag precedentemente
+                refTh._lbord = refTh.thParent != currentParent;
+                refTh._rbord = visibleUnpinnedLeafs.length == i + 1;
+                if (prevTh)
+                    prevTh._rbord = refTh.thParent != currentParent;
+                currentParent = refTh.thParent;
+                // Per ogni gruppo srotolo il parent nella matrice dei raggruppamenti
+                for (var l = 0; l < infos.groupingLevel; l++) {
+                    var parent = refTh.thParent;
+                    if (parent && !refTh.thPinned) {
+                        expandedGroups[l][i] = parent;
+                        refTh = infos.thsCache[parent];
+                    }
+                }
+            }
+            // Quarto giro per compattarlo nell'elemento finale su cui bindarmi
+            currentParent = "";
+            var currentSpan = 0;
+            this.TMPRowThGroups = [];
+            for (var l = 0; l < expandedGroups.length; l++) {
+                var levelArray = [];
+                this.TMPRowThGroups.push(levelArray);
+                if (this.Selection || this.HasPinnedColumns)
+                    levelArray.push({ Span: 1, Template: null, Pinned: this.HasPinnedColumns });
+                for (var h = 0; h < expandedGroups[l].length; h++) {
+                    var item = expandedGroups[l][h];
+                    if (item == currentParent)
+                        currentSpan++;
+                    else {
+                        if (currentSpan > 0)
+                            levelArray.push({ Span: currentSpan, Template: (currentParent ? infos.thsCache[currentParent].Template : null), Borders: !!currentParent });
+                        currentSpan = 1;
+                        currentParent = item;
+                    }
                 }
+                // Ultima aggiunta che altrimenti mi rimarrebbe in cache
+                levelArray.push({ Span: currentSpan, Template: (currentParent ? infos.thsCache[currentParent].Template : null), Borders: !!currentParent });
+                if (this.Removal)
+                    levelArray.push({ Span: 1, Template: null });
+                if (this.Export || this.HiddenColumns || this.ColumnsOrdering || this.CornerMenuOptions)
+                    levelArray.push({ Span: 1, Template: null });
+                currentSpan = 0;
+                currentParent = "";
             }
         };
+        /**
+         * Calcola il numero di salti da un header foglia all'ultimo parent della catena
+         */
+        EsTableComponent.prototype.jumpsToFinalParent = function (th, thsCache) {
+            var jumps = 0;
+            var parent = null;
+            do {
+                parent = th.thParent;
+                if (parent)
+                    jumps++;
+                th = thsCache[parent];
+            } while (parent);
+            return jumps;
+        };
+        /**
+         * Data una direttiva EsTh restituisce la lista delle aggregazioni richiesta per questa colonna o il gruppo che rappresenta
+         *
+         * @param {EsThDirective} th Direttiva
+         *
+         * @returns {GroupOrAggregation[]} Lista dei gruppi o aggregazioni relativi alla Direttiva passata
+         */
+        EsTableComponent.prototype.getGroupAggregations = function (th) {
+            var ret = [];
+            // Es: '{min:dd/MM/yyyy} - {max:dd/MM/yyyy}'
+            if (th.thAggregation) {
+                this.getEsThDirectiveListOfAggregations(th).forEach(function (agg) {
+                    var isdate = agg.format && ['small', 'long', 'verylong'].includes(agg.format);
+                    var isnumber = agg.format && agg.format.startsWith("F") && !Number.isNaN(agg.format.charAt(1)) && agg.format.length == 2;
+                    if (!isdate && !isnumber && agg.format)
+                        throw "Le aggergazioni supportate dall'es-table sono solo 'small', 'long', 'verylong' per le date e 'F0-9' per i numeri";
+                    ret.push(new GroupOrAggregation(th.th, agg.func, isdate ? 'date' : isnumber ? 'number' : 'string'));
+                });
+            }
+            else if (th.thGroup)
+                ret.push(new GroupOrAggregation(th.th, null));
+            return ret;
+        };
+        /**
+         * Data una direttiva con un formato restituisce tutte le coppie Funzione di Aggregazione - Formato
+         *
+         * @param {EsThDirective} th Direttiva EsTh di cui calcolare le funzioni di aggregazione usate
+         *
+         * @returns {{ func: string, format: string }[]} Lista delle funzioni di aggregazione rilevate
+         */
+        EsTableComponent.prototype.getEsThDirectiveListOfAggregations = function (th) {
+            if (!th.thAggregation)
+                return [];
+            // Se ho già effettuato questo calcolo per questo th restituisco la versione in cache
+            if (th._thAggregations)
+                return th._thAggregations;
+            var ret = [];
+            var display = th.thAggregation;
+            var matches = display.match(/{[a-zA-Z0-9\/:]*}/gi);
+            if (!matches)
+                return [];
+            matches.forEach(function (m) {
+                var split = m.split(":");
+                var func = m, format = "";
+                if (split.length > 0) {
+                    // Escludo primo e ultimo carattere (le graffe)
+                    func = split[0].substr(1);
+                    format = split[1].substr(0, split[1].length - 1);
+                }
+                ret.push({ func: func, format: format, match: m });
+            });
+            th._thAggregations = ret;
+            return ret;
+        };
         /**
          * Metodo che genera l'ordine di default delle colonne
          *
          * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
          */
-        EsTableComponent.prototype.generateDefaultOrder = function (view) {
-            if (this.TMPRowTHs.length == 0)
+        EsTableComponent.prototype.generateDefaultOrder = function (ths, view) {
+            if (ths.length == 0)
                 return;
+            var orderings = this.viewMode ? view.column_ordering : this.arrayColumnOrdering;
             // Genero ordinamento di default da 0 fino a dove deve arrivare. Situazione attuale senza hotpotato
-            if (!view.column_ordering || view.column_ordering.length == 0) {
-                for (var i = 0; i < this.TMPRowTHs.length; i++)
-                    this.OrderDirectives.push(this.TMPRowTHs[i].ID);
+            if (!orderings || orderings.length == 0) {
+                for (var i = 0; i < ths.length; i++) {
+                    var th = ths[i];
+                    var order = this.isEsTh(th) ? th.ID : th.th;
+                    this.OrderDirectives.push(order);
+                }
             }
             else
-                this.OrderDirectives = view.column_ordering;
+                this.OrderDirectives = orderings;
         };
         /**
          * Applica l'ordine specificato alle varie colonne
@@ -2014,37 +3022,220 @@
          * @param {boolean} finalize Se **true** significa che non mi aspetto di dover effettuare altre operazioni e posso renderizzare la situazione in base ai RowContext
          * Senza finalize significa che mi aspetto altre operazioni che prima o poi richiameranno questa funzione col finalize.
          *
-         * Ad esempio, una volta selezionato ordinamento fisico/logico delle colonne so che parte un altra ricerca che mi rivalorizzera da "writeValue", che già chiama questa funzione.
-         * Mettendo solo la chiamata da "writeValue" come "finalizzante" mi assicuro che smanattamenti a frontend non causino flickering fino a quando non servono
+         * Ad esempio, una volta selezionato ordinamento fisico/logico delle colonne so che parte un altra ricerca che mi rivalorizzerà da "writeValue", che già chiama questa funzione.
+         * Mettendo solo la chiamata da "writeValue" come "finalizzante" mi assicuro che smanattamenti a frontend non causino flickering fino a quando non servono
+         */
+        EsTableComponent.prototype.applyOrdering = function (view, finalize) {
+            var _this = this;
+            // Genero ordinamento per gli header
+            var newHeaders = [];
+            // Se devo finalizzare aggancio tutte le variabili di bind
+            if (finalize) {
+                this.OrderDirectives.forEach(function (o) {
+                    var heaedrItem = _this.TMPRowTHs.filter(function (t) { return t.ID == o; })[0];
+                    newHeaders.push(heaedrItem);
+                });
+                this.TMPRowTHs = newHeaders;
+                var _loop_4 = function (i) {
+                    var context = this_3.TMPRowTDs[this_3.RowContexts[i]];
+                    var newContext = [];
+                    this_3.OrderDirectives.forEach(function (o) {
+                        var contextItem = context.filter(function (t) { return t.ID == o; })[0];
+                        newContext.push(contextItem);
+                    });
+                    this_3.TMPRowTDs[this_3.RowContexts[i]] = newContext;
+                };
+                var this_3 = this;
+                // Genero ordinamento per le celle
+                for (var i = 0; i < this.RowContexts.length; i++) {
+                    _loop_4(i);
+                }
+            }
+            if (this.viewMode)
+                view.column_ordering = this.OrderDirectives;
+            else
+                this.arrayColumnOrdering = this.OrderDirectives;
+            this.changed();
+        };
+        // #endregion
+        // #region Gestione raggruppamenti per riga
+        /**
+         * Ottiene un elemento di separazione fra Gruppi che serve per paginare le ricerche all'interno di ogni singolo gruppo
+         *
+         * @param {AppSearch<any>} view View utilizzata per la ricerca. Me ne salvo i parametri nel separatore attuale dato che ne ho bisogno per caricare altri elementi
+         * facenti riferimento allo stesso contesto
+         * @param {string} parent Parent path che rappresenta a quale gruppo è affibbiato questo separatore
+         * @param {GroupRouteFragment[]} route Route path che rappresenta a quale gruppo è affibbiato questo separatore
+         * @param {number} level Livello del gruppo di cui questo elemento è separatore, viene usato per applicare la classe "est-lvl-{{level}}"
+         *
+         * @returns {any} Elemento di separazione contenente tutti i bind per presentare una paginazione sotto questo gruppo lato interfaccia
+         */
+        EsTableComponent.prototype.getGroupSeparator = function (view, parent, route, level, searches) {
+            var item = new GroupPager(level, route, parent, Object.assign({}, view), searches);
+            item.buttons = this.getPagesArray(6, view.page, view.pages);
+            this.calculateHash([item]);
+            return item;
+        };
+        /**
+         * Sposta la ricerca di una pagina in avanti (o indietro)
+         *
+         * @param {number} page Numero di pagine da aggiungere (o sottrarre, se negativo) alla pagina attuale
+         * @param {any} pager Elemento di separazione su cui è effettuata la ricerca
+         */
+        EsTableComponent.prototype.addToPageGroup = function (page, pager) {
+            this.goToPageGroup(pager.view.page + page, pager);
+        };
+        /**
+         * Sposta la ricerca alla pagina specificata
+         *
+         * @param {number} page Pagina a cui navigare
+         * @param {any} pager Elemento di separazione su cui è effettuata la ricerca
+         */
+        EsTableComponent.prototype.goToPageGroup = function (page, pager) {
+            var appSearchElement = pager.view;
+            if (page === 0 || page > appSearchElement.pages)
+                return;
+            appSearchElement.page = page;
+            pager.buttons = this.getPagesArray(6, appSearchElement.page, appSearchElement.pages);
+            this.emitSearchRequest(false, appSearchElement);
+        };
+        /**
+         * Data una colonna effettua la riemissione di tutte le ricerche relative.
+         *
+         * Es. Ho 2 campi di gruppo e ho espanso fino a vedere i valori fino ad un livello qualsiasi.
+         * Clicco l'ordinamento sul secondo gruppo.
+         * Tutte le ricerche relative ai primi gruppi devono essere rieseguite. Quando i risultati arriveranno ci penserà il metodo **bindDisplayToLoadedItemsOrGroups**
+         * a tagliare via gli oggetti non più visualizzati
+         *
+         * @param {string} column Colonna su cui si è effettuata un'operazione di ordinamento
+         * @param {AppOrdering[]} orderings Direttive di ordinamento da applicare alle varie sottoricerche
+         *
+         * @todo: Testare
+         */
+        EsTableComponent.prototype.emitRowGroupingSearches = function (column, orderings) {
+            var _this = this;
+            // Per tutte le ricerche intermedie che devo rivalutare le re-emitto in modo da aggiornargli i dati
+            var meaningfulAppSearches = this.groupSearchRequestsCache.filter(function (t) { return t.group_column == column; }).map(function (t) { return t.view; });
+            // Se non ne trovo significa che ho fatto l'ordinamento o sugli item, o su colonne relative a un sottogruppo non caricato
+            if (!meaningfulAppSearches || meaningfulAppSearches.length == 0)
+                meaningfulAppSearches = this.groupSearchRequestsCache.filter(function (t) { return !t.group_column; }).map(function (t) { return t.view; });
+            // Se non ne trovo qui significa che sto ordinando su colonne relative a un sottogruppo non caricato
+            if (!meaningfulAppSearches || meaningfulAppSearches.length == 0)
+                return;
+            meaningfulAppSearches.forEach(function (as) {
+                // Ovviamente gli oridnamenti devono essere quelli appena generati
+                as.orders = orderings;
+                as.savedstate = true;
+                _this.emitSearchRequest(false, as);
+            });
+        };
+        /**
+         * Helper che calcola il contenuto di una cella relativa a un gruppo riga, tenendo conto del formato delle eventuali aggregazioni
+         *
+         * @param {Group} grp Gruppo di cui mostrare le celle
+         * @param {string} cell Cella attuale di cui calcolare il testo
+         * @param {EsThDirective} header Header relativo alla cella attuale, utilizzata per identificare le informazioni di aggregazione
+         *
+         * @returns {string} Testo finale calcolato per la **cell** corrente, in base alle aggregazioni di **header**
+         */
+        EsTableComponent.prototype.getGroupCellDisplay = function (grp, cell, header) {
+            var _this = this;
+            if (grp._sep)
+                return "";
+            var display = header.thAggregation;
+            if (grp.column == cell) {
+                var groupsPart = grp._groupscount ? " - " + grp._groupscount + " " + this.lc.loc("Groups") : "";
+                return grp.value + " (" + grp.count + groupsPart + ")";
+            }
+            else {
+                var agg_1 = grp._aggregationsCache.get(cell);
+                if (!agg_1)
+                    return "";
+                this.getEsThDirectiveListOfAggregations(header).forEach(function (itm) {
+                    display = display.replace(itm.match, _this.formatAggregationValue(agg_1.get(itm.func), itm.format));
+                });
+                return display;
+            }
+        };
+        /**
+         * Gestisce i click sulla tabella solo per le righe a gruppo.
+         * O rimuove gli elementi attualmente presenti o carica il contenuto del gruppo
+         *
+         * @param {any} group Gruppo bindato su cui si è effettuato il click
+         *
+         * @returns {boolean} **true** se l'operaizone è andata a buon fine, **false** altrimenti
+         */
+        EsTableComponent.prototype.handleGroupClick = function (group) {
+            var casted = this.View;
+            var anyG = group;
+            anyG._expanded = !anyG._expanded;
+            // Sono in modalità raggruppamento virtuale da array: Espandere significa rendere visibili tutti gli oggetti relativi a questo gruppo, viceversa il contrarre
+            if (this.ArrayGrouping) {
+                var allRelatives = this.boundSource.filter(function (t) { return (t._group && ((anyG._expanded && t._parent == anyG._thisKey) || (!anyG._expanded && t._parent && t._parent.startsWith(anyG._thisKey)))) ||
+                    (t._item && ((anyG._expanded && t._thisKey == anyG._thisKey) || (!anyG._expanded && t._thisKey.startsWith(anyG._thisKey)))); });
+                allRelatives.forEach(function (t) {
+                    t._visible = anyG._expanded;
+                    if (t._group)
+                        t._expanded = false;
+                });
+                return;
+            }
+            if (anyG._expanded) {
+                // Resetto ipp
+                casted.itemsperpageoverride = 15;
+                if (!casted.requestedgroups)
+                    casted.requestedgroups = [new GroupFilter(group.column, group.value)];
+                else {
+                    var level = anyG._grouplevel;
+                    // se il gruppo cliccato non ha un livello è il primo gruppo, quindi ordinamento unico
+                    // altrimenti devo rimuovere tutti i filtri su livelli superiori al level cliccato e aggiungere il level cliccato
+                    if (!level)
+                        casted.requestedgroups = [new GroupFilter(group.column, group.value)];
+                    else {
+                        casted.requestedgroups = [];
+                        anyG._parentRoute.forEach(function (step) {
+                            casted.requestedgroups.push(new GroupFilter(step.column, step.value));
+                        });
+                        casted.requestedgroups.push(new GroupFilter(group.column, group.value));
+                    }
+                }
+                this.changed();
+                this.emitSearchRequest(true);
+            }
+            else {
+                var path_1 = (anyG._parent || '') + group.value;
+                // Se ho chiuso un gruppo non mi serve rieffettuare ricerce, mi basta eliminare dagli oggetti bindati tutti gli elementi sottostanti a quel gruppo
+                this.boundSource = this.boundSource.filter(function (t) { return !t._parent || !t._parent.startsWith(path_1); });
+                // devo però anche rimuovere eventuali cache relative
+                this.groupSearchRequestsCache = this.groupSearchRequestsCache.filter(function (t) { return t.path != path_1; });
+            }
+            return true;
+        };
+        /**
+         * Funzione che dato un valore lo formatta in base al tipo
+         *
+         * @param {string} value Valore che generalemnte può essere una data o un numero
+         * @param {string} fromat Formato su cui formattare il valore. Può essere ad esempio "small", "long" "verylong" per le date o F{0-9} per i numeri decimali
+         *
+         * @returns {string} Valore dell'aggregazione formattato come si deve
          */
-        EsTableComponent.prototype.applyOrdering = function (view, finalize) {
-            var _this = this;
-            // Genero ordinamento per gli header
-            var newHeaders = [];
-            // Se devo finalizzare aggancio tutte le variabili di bind
-            if (finalize) {
-                this.OrderDirectives.forEach(function (o) {
-                    var heaedrItem = _this.TMPRowTHs.filter(function (t) { return t.ID == o; })[0];
-                    newHeaders.push(heaedrItem);
-                });
-                this.TMPRowTHs = newHeaders;
-                var _loop_1 = function (i) {
-                    var context = this_1.TMPRowTDs[this_1.RowContexts[i]];
-                    var newContext = [];
-                    this_1.OrderDirectives.forEach(function (o) {
-                        var contextItem = context.filter(function (t) { return t.ID == o; })[0];
-                        newContext.push(contextItem);
-                    });
-                    this_1.TMPRowTDs[this_1.RowContexts[i]] = newContext;
-                };
-                var this_1 = this;
-                // Genero ordinamento per le celle
-                for (var i = 0; i < this.RowContexts.length; i++) {
-                    _loop_1(i);
-                }
+        EsTableComponent.prototype.formatAggregationValue = function (value, format) {
+            if (!format)
+                return value;
+            var isNumber = !Number.isNaN(value) && (!format || format.startsWith("F"));
+            if (isNumber && format.startsWith("F") && !Number.isNaN(format.substr(1)))
+                return parseFloat(value).toFixed(parseInt(format.substr(1)));
+            var date = null;
+            // Alcune versione di extensions rischiano di crashare con cose non date... è stato risolto dopo quindi questo try - catch in realtà
+            // torna utile solo con versioni vecchie/deprecate della libreria @esfaenza/extensions
+            try {
+                date = this.dateExts.getDateConvertion(value);
             }
-            view.column_ordering = this.OrderDirectives;
-            this.changed();
+            catch (_a) { }
+            if (date)
+                return this.dateExts.getFormatted(date, format == 'small', format == 'verylong');
+            // Qui ci finisco sia per input che non sono né date né numeri, sia per formati non riconosciuti
+            return value;
         };
         // #endregion
         // #region Gestione Operaizoni dialog ordinamento/visibilità colonne
@@ -2055,7 +3246,7 @@
          */
         EsTableComponent.prototype.sendUp = function (columnItem) {
             var itemIndex = this.TMPColumnsList.indexOf(columnItem);
-            if (this.TMPColumnsList[itemIndex - 1].fixed)
+            if (this.TMPColumnsList[itemIndex - 1].fixed || this.TMPColumnsList[itemIndex - 1].pinned)
                 return;
             this.utiExts.swap(this.TMPColumnsList, itemIndex, itemIndex - 1);
             // Non posso fare JSON.parse(JSON.stringify(this.ColumnsList)) perché contiene riferimenti a TemplateRef
@@ -2076,6 +3267,25 @@
             this.TMPColumnsList.forEach(function (c) { tmp.push(Object.assign({}, c)); });
             this.TMPColumnsList = tmp;
         };
+        /**
+         * All'interno della dialog "Ordinamento e Visibilità Colonne" pinna la colonna specificata
+         *
+         * @param {EsTableColumn} columnItem Colonna da spostare
+         */
+        EsTableComponent.prototype.pinOrUnpinColumn = function (columnItem) {
+            var itemIndex = this.TMPColumnsList.indexOf(columnItem);
+            // Sposto la colonna alla fine di tutte quelle pinnate. La cosa funziona in entrambi sensi:
+            // 1) Se sto pinnando, devo metterla come ultima pinnata
+            // 2) Se sto spinnando devo metterla come prima non pinnata
+            // Coincidenza vuole che il punto 1 e 2 siano equivalenti
+            for (var i = 0; i < this.TMPColumnsList.length; i++) {
+                if (!this.TMPColumnsList[i].pinned) {
+                    this.arrayMove(this.TMPColumnsList, itemIndex, i);
+                    break;
+                }
+            }
+            columnItem.pinned = !columnItem.pinned;
+        };
         /**
          * All'interno della dialog "Ordinamento e Visibilità Colonne" inverte le impostazioni di visibilità della colonna
          *
@@ -2136,12 +3346,12 @@
             // Non permetto di non selezionare nulla
             if (this.TMPColumnsList.every(function (t) { return !t.visible; }))
                 return false;
-            var castedView = this.View;
+            var castedView = this.viewMode ? this.View : null;
             this.ColumnsList = [];
             this.TMPColumnsList.forEach(function (c) { _this.ColumnsList.push(Object.assign({}, c)); });
             this.refreshColumnOrdering();
-            this.refreshColumnsVisibility(null, null, castedView);
             this.applyOrdering(castedView, false);
+            this.refreshColumnsVisibility(null, null, castedView);
             //Salvo le preferences di questa view
             //Di default registro ordinamento e visibilità delle colonne nella vista. Solo le cose di UI
             if (this.SavePreferences) {
@@ -2153,11 +3363,17 @@
                     console.error("Non posso utilizzare le preference senza che il pacchetto @esfaenza/preferences sia installato");
                     return false;
                 }
-                var toStore = { columns: JSON.parse(JSON.stringify(castedView.columns)), column_ordering: JSON.parse(JSON.stringify(castedView.column_ordering)) };
+                var columns = this.arrayMode ? this.arrayColumns : castedView.columns;
+                var columnsOrderings = this.arrayMode ? this.arrayColumnOrdering : castedView.column_ordering;
+                var toStore = { columns: JSON.parse(JSON.stringify(columns)), column_ordering: JSON.parse(JSON.stringify(columnsOrderings)) };
                 this.prefService.store(this.ngControl.name, toStore);
             }
+            // Rieseguo l'ultima ricerca bindata alla tabella
             // Mi assicuro di farlo dopo l'espansione del changed o rischio che la ricerca mi ridia colonne che in realtà non esistono
-            setTimeout(function () { _this.emitSearchRequest(false); });
+            if (this.viewMode)
+                setTimeout(function () { _this.emitSearchRequest(false); });
+            else if (this.arrayMode)
+                setTimeout(function () { _this.internalWriteValue(); });
             // Lo vorrei mettere lato template ma no
             this.lastSelectedItemID = null;
             return true;
@@ -2167,7 +3383,10 @@
          */
         EsTableComponent.prototype.globalColVisCheckChanged = function () {
             var _this = this;
-            this.TMPColumnsList.forEach(function (t) { t.visible = _this.globalColVisCheck; });
+            this.TMPColumnsList.forEach(function (t) {
+                if (!t.fixed)
+                    t.visible = _this.globalColVisCheck;
+            });
         };
         // #endregion
         // #region Gestione data source gerarchici
@@ -2215,9 +3434,9 @@
                 var obj = objs[i];
                 // Se la parentKey non è valorizzata, questo è il livello 0 (1... perché gli 0 son perciolosi)
                 if (!obj[this.ParentKey] && levelToAssign == 1) {
-                    obj.level = 1;
-                    obj.visible = true;
-                    obj.expanded = this.StartsExpanded;
+                    obj._level = 1;
+                    obj._visible = true;
+                    obj._expanded = this.StartsExpanded;
                     assigned++;
                     continue;
                 }
@@ -2227,13 +3446,13 @@
                     for (var p = 0; p < objs.length; p++) {
                         var possibleParent = objs[p];
                         // Trovato il parent dell'item, assegno all'item il livello giusto
-                        if (possibleParent[this.OwnKey] == obj[this.ParentKey] && possibleParent.level == levelToAssign - 1) {
-                            obj.level = levelToAssign;
+                        if (possibleParent[this.OwnKey] == obj[this.ParentKey] && possibleParent._level == levelToAssign - 1) {
+                            obj._level = levelToAssign;
                             // So che questo item ha un parent. Ribadisco che il parent è espanso in base alle impostazione e stessa logica
                             // per la visibilità del figlio
-                            possibleParent.expanded = this.StartsExpanded;
+                            possibleParent._expanded = this.StartsExpanded;
                             possibleParent.parent = true;
-                            obj.visible = this.StartsExpanded;
+                            obj._visible = this.StartsExpanded;
                             assigned++;
                             break;
                         }
@@ -2252,12 +3471,12 @@
                 var obj = this.boundSource[i];
                 // Trovo il parent con quell'id e lo espando
                 if (obj[this.OwnKey] == key) {
-                    obj.expanded = true;
+                    obj._expanded = true;
                     for (var ic = 0; ic < this.boundSource.length; ic++) {
                         var child = this.boundSource[ic];
                         // Trovo tutti i child di quel parent e li rendo visibili
                         if (child[this.ParentKey] == key)
-                            child.visible = true;
+                            child._visible = true;
                     }
                     return;
                 }
@@ -2273,7 +3492,7 @@
                 var obj = this.boundSource[i];
                 // Trovo il parent con quell'id e lo collasso
                 if (obj[this.OwnKey] == key) {
-                    obj.expanded = false;
+                    obj._expanded = false;
                     // Collasso/nascondo tutti i child del parent
                     this.collapseChildOfParent(key);
                     return;
@@ -2291,16 +3510,115 @@
                 // Trovo tutti i child di quel parent e li rendo invisibili. Se il child trovato è a sua volta un parent,
                 // lo collasso e vado in ricorsione sui figli
                 if (child[this.ParentKey] == parentKey && !child.parent)
-                    child.visible = false;
+                    child._visible = false;
                 else if (child[this.ParentKey] == parentKey && child.parent) {
-                    child.expanded = false;
-                    child.visible = false;
+                    child._expanded = false;
+                    child._visible = false;
                     this.collapseChildOfParent(child[this.OwnKey]);
                 }
             }
         };
         // #endregion
         // #region Gestione Selezione
+        /**
+         * Valuta quali elementi devono essere marcati come selezionati nella vista attuale. Si basa sull'oggetto **selection** interno all'AppSearch
+         *
+         * @param {any[]} items Oggetti di cui valutare la selezione
+         * @param {ItemsSelection<any>} selectionItem Oggetti di selezione derivante dalla view o dall'oggetto per Array
+         */
+        EsTableComponent.prototype.evaluateSelection = function (items, selectionItem) {
+            if (!selectionItem)
+                return;
+            this.handleSelectionEvaluation(items, selectionItem);
+        };
+        /**
+         * Valuta quali elementi devono essere marcati come selezionati nella vista attuale. Si basa sull'oggetto **arraymodeSelection** dell'es-table
+         *
+         * @param {any[]} array Lista di oggetti di cui valutare la selezione in modalità array
+         */
+        EsTableComponent.prototype.arrayModeEvaluateSelection = function (array) {
+            if (array.length == 0)
+                return;
+            this.handleSelectionEvaluation(array, this.arraymodeSelection);
+        };
+        /**
+         * Implementazione agnostica della valutazione delle selezioni degli oggetti. Richiede gli oggetti della vista attuale e l'itemSelector
+         *
+         * @param {any[]} items Oggetti di cui aggiornare lo stato di selezione
+         * @param {ItemsSelection<any>} selectionItem Oggetto contenente lo stato attuale di selezione
+         */
+        EsTableComponent.prototype.handleSelectionEvaluation = function (items, selectionItem) {
+            for (var i = 0; i < items.length; i++) {
+                var itm = items[i];
+                var hash = itm._hash;
+                var itemGroup = itm._group ? null : this.getItemGroup(itm);
+                // Reidrato la cache di selezione coi nuovi oggetti altrimenti non riuscirei a beccare gli indici giusti
+                // Dopodiché la uso per calcolare istantaneamente se gli oggetti sono selezionati o no
+                this.rehidrateCache(itm);
+                if (itm._item) {
+                    if (selectionItem.all)
+                        itm._selected = !this.exclusionsCache.has(hash) && ((!this.groupsCache.has(itemGroup === null || itemGroup === void 0 ? void 0 : itemGroup._hash) && this.itemsCache.has(hash)) || !this.group_exclusionsCache.has(itemGroup === null || itemGroup === void 0 ? void 0 : itemGroup._hash));
+                    else
+                        itm._selected = !this.exclusionsCache.has(hash) && (this.groupsCache.has(itemGroup === null || itemGroup === void 0 ? void 0 : itemGroup._hash) || this.itemsCache.has(hash) || (this.parentTreeStatus(itemGroup) == 'included' && !this.group_exclusionsCache.has(itemGroup === null || itemGroup === void 0 ? void 0 : itemGroup._hash)));
+                }
+                else if (itm._group) {
+                    if (selectionItem.all)
+                        itm._selected = !this.group_exclusionsCache.has(hash) && this.parentTreeStatus(itm) != 'excluded';
+                    else
+                        itm._selected = this.groupsCache.has(hash) || (this.parentTreeStatus(itm) == 'included' && !this.group_exclusionsCache.has(hash));
+                }
+            }
+            // Se tutti gli oggetti di questa pagina sono solezionati allora posso mettere il global check a true
+            // Se sono in situazione di all-select anche metto la global checkbox, nonostante ci possano essere delle esclusioni
+            this.globalCheck = this.boundSource.filter(function (t) { return t._group || t._item; }).every(function (t) { return t._selected; });
+            this.canSelectAll = selectionItem.count > 0 && this.SelectAll;
+            // Potrebbe cambiare qualora qualcuno inserisse dati a manazza in modalità Array e desse il refresh manuale alla tabella
+            // Comunque costa 0 quindi mi permetto di refreshare
+            if (this.arrayMode) {
+                var prevSelected = this.selectedObjects;
+                this.finalizeSelectionInformations(selectionItem);
+                if (this.selectedObjects != prevSelected)
+                    this.onSelectionChanged.emit(selectionItem);
+            }
+        };
+        /**
+         * Dato un oggetto trova la cella di cache in cui è registrato e aggiorna il contenuto
+         *
+         * @param {any} item Oggetto da aggiornare
+         */
+        EsTableComponent.prototype.rehidrateCache = function (item) {
+            var ctx = item._hash;
+            if (this.itemsCache.has(ctx))
+                this.itemsCache.set(ctx, item);
+            if (this.group_exclusionsCache.has(ctx))
+                this.group_exclusionsCache.set(ctx, item);
+            if (this.groupsCache.has(ctx))
+                this.groupsCache.set(ctx, item);
+            if (this.exclusionsCache.has(ctx))
+                this.exclusionsCache.set(ctx, item);
+        };
+        /**
+         * Dato un gruppo controlla ricorsivamente l'albero di cui fa parte se c'è stata una inclusione o esclusione diretta
+         *
+         * @param {any} grp Gruppo da controllare
+         *
+         * @returns {'none' | 'excluded' | 'included'}
+         * 'none' se non ci sono informazioni su inclusioni o esclusioni
+         * 'included' se il gruppo controllato è stato incluso in maniera esplicita dall'albero dei gruppi padri
+         * 'excluded' se il gruppo controllato è stato escluso in maniera esplicita dall'albero dei gruppi padri
+         */
+        EsTableComponent.prototype.parentTreeStatus = function (grp) {
+            if (!grp)
+                return 'none';
+            var parentGroup = this.rgGroupCache.get(grp._parent);
+            if (!parentGroup)
+                return 'none';
+            if (this.group_exclusionsCache.has(parentGroup._hash))
+                return 'excluded';
+            if (this.groupsCache.has(parentGroup._hash))
+                return 'included';
+            return this.parentTreeStatus(parentGroup);
+        };
         /**
          * Gestisce la selezione globale degli oggetti, sia per pagina che a livello di **SelectAll**
          *
@@ -2308,7 +3626,8 @@
          */
         EsTableComponent.prototype.globalCheckChanged = function (forcedVal) {
             if (forcedVal === void 0) { forcedVal = null; }
-            var items = this.getItemsByMode();
+            // Prendo tutti gli elementi presenti in questa vista. Se ho gruppi prendo solo i gruppi a livello 0, altrimenti prendo tutti gli oggetti per selezionarli
+            var items = this.boundSource.find(function (t) { return t._group; }) ? this.boundSource.filter(function (t) { return t._group && !t._parent; }) : this.boundSource;
             var itemSelection = this.handleItemsSelection(items, forcedVal, this.globalCheck);
             this.changed();
             this.onSelectionChanged.emit(itemSelection);
@@ -2327,14 +3646,14 @@
         EsTableComponent.prototype.handleItemsSelection = function (items, forcedVal, globalCheck) {
             if (forcedVal === void 0) { forcedVal = null; }
             if (globalCheck === void 0) { globalCheck = null; }
-            var _a, _b;
-            var selectionItem = ((_a = this.View) === null || _a === void 0 ? void 0 : _a.selection) || this.arraymodeSelection;
+            var _a, _b, _c;
+            var si = ((_a = this.View) === null || _a === void 0 ? void 0 : _a.selection) || this.arraymodeSelection;
             // Se sono in modalità di selezione singola e devo selezionare un'oggetto, per prima cosa devo deselezionare tutti gli altri
-            if (this.SingleSelection && ((_b = items[0]) === null || _b === void 0 ? void 0 : _b._selected)) {
+            if (this.SingleSelection && ((_b = items[0]) === null || _b === void 0 ? void 0 : _b._selected) && !((_c = items[0]) === null || _c === void 0 ? void 0 : _c._group)) {
                 if (items.length > 1 && forcedVal == null)
                     throw "Tentativo di selezionare o deselezionare più di un elemento con SingleSelection attivo";
                 if (items.length == 1 && forcedVal == null) {
-                    selectionItem = this.handleItemsSelection(this.getItemsByMode(), false, null);
+                    si = this.handleItemsSelection(this.boundSource.filter(function (t) { return !t._group; }), false, null);
                     items[0]._selected = true;
                 }
             }
@@ -2344,59 +3663,385 @@
                 // Se dev'essere overridato il valore di check effettuo l'override o col valore forzato o col valore globale
                 if (toChange && !item.locked)
                     item._selected = forcedVal != null ? forcedVal : this.globalCheck;
-                if (selectionItem.all) {
-                    // In caso di "seleziona tutto"...
-                    // N.B: la selOrDeselCache agisce come cache di DESELEZIONE in questo blocco di codice
-                    if (item._selected && this.selOrDeselCache[item.hash]) {
-                        // Oggetto selezionato: lo rimuovo dalle esclusioni di selezione
-                        selectionItem.exclusions.splice(selectionItem.exclusions.indexOf(this.selOrDeselCache[item.hash]), 1);
-                        delete this.selOrDeselCache[item.hash];
-                    }
-                    else if (!item._selected && !this.selOrDeselCache[item.hash]) {
-                        // Oggetto deselezionato: lo aggiungo alle esclusioni di selezione
-                        this.selOrDeselCache[item.hash] = item;
-                        selectionItem.exclusions.push(item);
-                    }
+                // Se il valore non dev'essere variato e vengo da una selezione globale semplicemente evito di effettuare operaizoni inutili. L'item/gruppo è già nello stato giusto
+                if (!toChange && globalCheck != null)
+                    continue;
+                var allSelection = si.all;
+                var isGroup = item._group;
+                var isSelection = item._selected;
+                var itemGroup = null, allItems = null, selectedItems = null, unselectedItems = null, allGroups = null, selectedGroups = null, unselectedGroups = null, parentGroupSelected = null, parentGroupUnselected = null;
+                if (isGroup) {
+                    var pts = this.parentTreeStatus(item);
+                    parentGroupSelected = pts == 'included';
+                    parentGroupUnselected = pts == 'excluded';
+                    allItems = this.getGroupItems(si, item, null, true);
+                    selectedItems = this.getGroupItems(si, item, 'selected', true, allItems);
+                    unselectedItems = this.getGroupItems(si, item, 'unselected', true, allItems);
+                    allGroups = this.getGroupChildGroups(si, item, null, true);
+                    selectedGroups = this.getGroupChildGroups(si, item, 'selected', true, allGroups);
+                    unselectedGroups = this.getGroupChildGroups(si, item, 'unselected', true, allGroups);
                 }
                 else {
-                    //In caso di non "seleziona tutto"...
-                    // N.B: la selOrDeselCache agisce come cache di SELEZIONE in questo blocco di codice
-                    if (item._selected && !this.selOrDeselCache[item.hash]) {
-                        // Oggetto selezionato: lo aggiungo alla selezione attuale
-                        this.selOrDeselCache[item.hash] = item;
-                        selectionItem.items.push(item);
-                    }
-                    else if (!item._selected && this.selOrDeselCache[item.hash]) {
-                        // Oggetto deselezionato: lo rimuovo dalla selezione attuale
-                        selectionItem.items.splice(selectionItem.items.indexOf(this.selOrDeselCache[item.hash]), 1);
-                        delete this.selOrDeselCache[item.hash];
-                    }
+                    itemGroup = this.getItemGroup(item);
+                    parentGroupSelected = itemGroup == null ? null : itemGroup._selected;
+                    parentGroupUnselected = itemGroup == null ? null : !itemGroup._selected;
                 }
+                if (!this.ArrayGrouping)
+                    this.performSelectionOperations(si, item, allSelection, isGroup, isSelection, selectedItems, selectedGroups, unselectedItems, unselectedGroups, allItems, allGroups, parentGroupSelected, parentGroupUnselected);
+                else
+                    this.performSimpleSelectionOperations(si, item, isGroup, isSelection, itemGroup, selectedItems, unselectedItems, allItems, allGroups);
             }
             // Imposto il check globale in base a se tutti gli elementi sono selezionati o meno.
             // Evito di fare queste operazioni se la selezione deriva proprio dal global Check
-            // Non è ottimizzatissimo mettere 2 some ma scrivere questo codice a for sono tipo 25 righe....
             if (globalCheck == null)
-                this.globalCheck = !items.some(function (t) { return !t._selected; }) && !this.getItemsByMode().some(function (t) { return !t._selected; });
-            this.finalizeSelectionInformations(selectionItem);
-            return selectionItem;
+                this.globalCheck = !this.boundSource.some(function (t) { return !t._selected && !t._sep; });
+            this.finalizeSelectionInformations(si);
+            return si;
+        };
+        /**
+         * Dato L'oggetto di selezione, l'oggetto da selezionare/deselezionare e tutti i parametri del caso effettua le operazioni che servono.
+         *
+         * Logica semplificata rispetto all'originale **performSelectionOperations** per lavorare in una modalità in cui tutti gli elementi sono caricati (**ArrayGrouping** = true)
+         */
+        EsTableComponent.prototype.performSimpleSelectionOperations = function (base, item, group, sel, itm_group, sel_itm, desel_itm, all_itms, all_grps) {
+            var _this = this;
+            var tripticItem = this.getTriptic('item', base);
+            if (group) {
+                if (sel) {
+                    all_grps.forEach(function (gr) { gr._selected = true; });
+                    if (desel_itm)
+                        desel_itm.forEach(function (el) { el._selected = true; _this.addItem(el, tripticItem); });
+                }
+                else {
+                    all_grps.forEach(function (gr) { gr._selected = false; });
+                    if (sel_itm)
+                        sel_itm.forEach(function (el) { el._selected = false; _this.removeItem(el, tripticItem); });
+                }
+            }
+            else {
+                if (sel) {
+                    this.addItem(item, tripticItem);
+                    if (itm_group && all_itms && all_itms.every(function (t) { return t._selected; }))
+                        this.selectGroup(itm_group);
+                }
+                else {
+                    this.removeItem(item, tripticItem);
+                    if (itm_group)
+                        itm_group._selected = false;
+                }
+            }
+        };
+        /**
+         * Helper per selezionare un gruppo e, ricorsivamente, se tutti i gruppi sottostanti al parent sono selezionati, selezionare i gruppi padri
+         *
+         * @param {any} group Gruppo da selezionare
+         */
+        EsTableComponent.prototype.selectGroup = function (group) {
+            group._selected = true;
+            var parent = this.getGroupParent(group);
+            if (parent && this.getGroupChildGroups(null, parent, null, true).every(function (t) { return t._selected; }))
+                this.selectGroup(parent);
+        };
+        /**
+         * Dato L'oggetto di selezione, l'oggetto da selezionare/deselezionare e tutti i parametri del caso effettua le operazioni che servono.
+         *
+         * La logica di questa funzione è nata essenzialmente da spam di trial & error ed è stata testata solo fino a due livelli di raggruppamento,
+         * qualsiasi cosa vada oltre non è 100% detto che funzioni...
+         */
+        EsTableComponent.prototype.performSelectionOperations = function (base, item, all, group, sel, sel_itm, sel_grp, desel_itm, desel_grp, all_itms, all_grps, parent_incl, parent_excl) {
+            var _this = this;
+            var tripticGroup = this.getTriptic('group', base);
+            var tripticItem = this.getTriptic('item', base);
+            var tripticExcl = this.getTriptic('exclusion', base);
+            var tripticgrpExcl = this.getTriptic('group_exclusion', base);
+            if (group) {
+                if (sel) {
+                    if (all || parent_incl)
+                        this.removeItem(item, tripticgrpExcl);
+                    else
+                        this.addItem(item, tripticGroup);
+                    if (sel_itm)
+                        sel_itm.forEach(function (el) { return _this.removeItem(el, tripticItem); });
+                    if (sel_grp)
+                        sel_grp.forEach(function (gr) { return _this.removeItem(gr, tripticGroup); });
+                    if (all_itms)
+                        all_itms.forEach(function (el) { el._selected = true; _this.removeItem(el, tripticExcl); });
+                    if (all_grps)
+                        all_grps.forEach(function (gr) { gr._selected = true; _this.removeItem(gr, tripticgrpExcl); });
+                }
+                else {
+                    if (all || parent_incl)
+                        this.addItem(item, tripticgrpExcl);
+                    else
+                        this.removeItem(item, tripticGroup);
+                    if (desel_itm)
+                        desel_itm.forEach(function (el) { return _this.removeItem(el, tripticExcl); });
+                    if (desel_grp)
+                        desel_grp.forEach(function (gr) { return _this.removeItem(gr, tripticExcl); });
+                    if (all_itms)
+                        all_itms.forEach(function (el) { el._selected = false; _this.removeItem(el, tripticItem); });
+                    if (all_grps)
+                        all_grps.forEach(function (gr) { gr._selected = false; _this.removeItem(gr, tripticGroup); });
+                }
+            }
+            else {
+                if (sel) {
+                    if ((parent_excl == null && all) || parent_incl)
+                        this.removeItem(item, tripticExcl);
+                    else
+                        this.addItem(item, tripticItem);
+                }
+                else {
+                    if (parent_excl || (!all && parent_excl == null))
+                        this.removeItem(item, tripticItem);
+                    else
+                        this.addItem(item, tripticExcl);
+                }
+            }
+        };
+        /**
+         * Helper per evitare di riscrivere ogni santa volta array.splice(array.indexof(item), 1);
+         */
+        EsTableComponent.prototype.removeItem = function (item, triptic) {
+            var index = triptic.index_cache.get(item._hash);
+            if (index != null) {
+                triptic.cache.delete(item._hash);
+                triptic.index_cache.delete(item._hash);
+                triptic.array[index] = null;
+            }
+            return !!index;
+        };
+        /**
+         * Helper per evitare di riscrivere ogni santa volta array.push(item); e la gestione della
+         */
+        EsTableComponent.prototype.addItem = function (item, triptic) {
+            if (triptic.index_cache.get(item._hash) == null) {
+                var i = triptic.array.push(item) - 1;
+                triptic.cache.set(item._hash, item);
+                triptic.index_cache.set(item._hash, i);
+                return true;
+            }
+            return false;
+        };
+        /**
+         * Ottiene il trittico di selezione: L'array degli oggetti e le due cache
+         */
+        EsTableComponent.prototype.getTriptic = function (subject, base) {
+            switch (subject) {
+                case 'group':
+                    return new CacheTriptic(this.groupsCache, this.i_groupsCache, base.groups);
+                case 'item':
+                    return new CacheTriptic(this.itemsCache, this.i_itemsCache, base.items);
+                case 'group_exclusion':
+                    return new CacheTriptic(this.group_exclusionsCache, this.i_group_exclusionsCache, base.group_exclusions);
+                case 'exclusion':
+                    return new CacheTriptic(this.exclusionsCache, this.i_exclusionsCache, base.exclusions);
+            }
+        };
+        /**
+         * Dato un oggetto restituisce il gruppo di cui fa parte, se esiste
+         *
+         * @param {any} item Oggetto di cui trovare il gruppo
+         */
+        EsTableComponent.prototype.getItemGroup = function (item) {
+            var parent = this.rgGroupCache.get(item._thisKey);
+            if (parent)
+                return parent;
+            return null;
+        };
+        /**
+         * Data la chiave di un gruppo restituisce tutti gli oggetti con quella chiave
+         *
+         * @param {any} group Chiave da cercare
+         * @param {'selected' | 'unselected'} status Stato degli elementi, selezionati o no
+         * @param {boolean} recursive Indica se cercare solo gli elementi direttamente collegati o se prendere anche quelli dei gruppi figli
+         *
+         * @returns {any[]} Oggetti di tipo **_item** facenti capo alla chiave **groupKey**
+         */
+        EsTableComponent.prototype.getGroupItems = function (sel, group, status, recursive, allbase) {
+            var e_3, _s;
+            if (recursive === void 0) { recursive = false; }
+            if (allbase === void 0) { allbase = null; }
+            var items = [];
+            if (allbase)
+                items = allbase;
+            else {
+                if (recursive) {
+                    try {
+                        // In modalità ricorsiva prendo gli oggetti di tutte le chiavi simili che trovo
+                        for (var _t = __values(this.rgItemCache.keys()), _u = _t.next(); !_u.done; _u = _t.next()) {
+                            var key = _u.value;
+                            if (key.startsWith(group._thisKey))
+                                items.push.apply(items, __spread(this.rgItemCache.get(key)));
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_u && !_u.done && (_s = _t.return)) _s.call(_t);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                }
+                else
+                    items = this.rgItemCache.get(group._thisKey);
+            }
+            items = items.filter(function (t) { return !status || (t._selected && status == 'selected') || (!t._selected && status == 'unselected'); });
+            // Non trovo nessun oggetto, però magari di oggetti ne ho all'interno dell'oggetto di selezione. 
+            // Questo può essere vero solo se NON sono in modalità array, in caso contrario gli oggetti li devo per forza avere tutti
+            if (items.length != 0 || !sel || this.arrayMode)
+                return items;
+            if (status == 'unselected')
+                items = sel.exclusions.filter(function (t) { return t != null &&
+                    (!recursive && t._thisKey == group._thisKey) ||
+                    (recursive && t._thisKey.startsWith(group._thisKey)); });
+            else if (status == 'selected')
+                items = sel.items.filter(function (t) { return t != null &&
+                    (!recursive && t._thisKey == group._thisKey) ||
+                    (recursive && t._thisKey.startsWith(group._thisKey)); });
+            return items;
+        };
+        /**
+         * Data la chiave di un gruppo restituisce tutti gli oggetti con quella chiave
+         *
+         * @param {any} group Gruppo di cui cercare il parent
+         *
+         * @returns {any} Oggetto di tipo **_group** rappresentante il parent del **group** attuale
+         */
+        EsTableComponent.prototype.getGroupParent = function (group) {
+            var parent = this.rgGroupCache.get(group._parent);
+            if (parent)
+                return parent;
+            return null;
+        };
+        /**
+         * Data la chiave di un gruppo restituisce tutti i gruppi figli
+         *
+         * @param {string} group Gruppo che rappresenta il padre di cui cercare i figli
+         * @param {'selected' | 'unselected'} status Stato dei gruppi, selezionati o no
+         * @param {boolean} recursive Indica se cercare solo i gruppi direttamente collegati o se prendere anche quelli dei gruppi figli
+         *
+         * @returns {any[]} Oggetti di tipo **_group** facenti capo alla chiave **groupKey**
+         */
+        EsTableComponent.prototype.getGroupChildGroups = function (sel, group, status, recursive, allbase) {
+            var e_4, _s;
+            if (recursive === void 0) { recursive = false; }
+            if (allbase === void 0) { allbase = null; }
+            var thisGroup = this.rgGroupCache.get(group._thisKey);
+            var items = [];
+            if (allbase)
+                items = allbase;
+            else {
+                if (recursive) {
+                    try {
+                        // In modalità ricorsiva prendo gli oggetti di tutte le chiavi simili che trovo
+                        for (var _t = __values(this.rgChildGroupsCache.keys()), _u = _t.next(); !_u.done; _u = _t.next()) {
+                            var key = _u.value;
+                            if (key.startsWith(group._thisKey))
+                                items.push.apply(items, __spread(this.rgChildGroupsCache.get(key)));
+                        }
+                    }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                    finally {
+                        try {
+                            if (_u && !_u.done && (_s = _t.return)) _s.call(_t);
+                        }
+                        finally { if (e_4) throw e_4.error; }
+                    }
+                }
+                else
+                    items = this.rgChildGroupsCache.get(group._thisKey);
+            }
+            items = items.filter(function (t) { return !status || (t._selected && status == 'selected') || (!t._selected && status == 'unselected'); });
+            // Non trovo nessun oggetto, però magari di oggetti ne ho all'interno dell'oggetto di selezione
+            if (items.length != 0 || !sel)
+                return items;
+            if (status == 'unselected')
+                items = sel.group_exclusions.filter(function (t) { return t != null && ((!recursive && t._thisRoute.length == thisGroup._thisRoute.length + 1 && t._thisRoute.startsWith(group._thisKey)) ||
+                    (recursive && t._thisKey.startsWith(group._thisKey))); });
+            else
+                items = sel.groups.filter(function (t) { return t != null && ((!recursive && t._thisRoute.length == thisGroup._thisRoute.length + 1 && t._thisRoute.startsWith(group._thisKey)) ||
+                    (recursive && t._thisKey.startsWith(group._thisKey))); });
+            return items;
         };
         /**
          * Finalizza le informazioni di selezione del **ItemsSelection** corrente
          */
         EsTableComponent.prototype.finalizeSelectionInformations = function (selectionItem) {
+            // Dato che le delete sono logiche dato che tengo la cache degli indici devo renderle fisiche
+            var tmpGrp = [], tmpItems = [], tmpExcl = [], tmpGrpExcl = [];
+            var grpRemoved = false, itemsRemoved = false, exclRemoved = false, grpExclRemoved = false;
+            for (var i = 0; i < selectionItem.items.length; i++)
+                if (selectionItem.items[i] != null)
+                    tmpItems.push(selectionItem.items[i]);
+                else
+                    itemsRemoved = true;
+            for (var i = 0; i < selectionItem.groups.length; i++)
+                if (selectionItem.groups[i] != null)
+                    tmpGrp.push(selectionItem.groups[i]);
+                else
+                    grpRemoved = true;
+            for (var i = 0; i < selectionItem.exclusions.length; i++)
+                if (selectionItem.exclusions[i] != null)
+                    tmpExcl.push(selectionItem.exclusions[i]);
+                else
+                    exclRemoved = true;
+            for (var i = 0; i < selectionItem.group_exclusions.length; i++)
+                if (selectionItem.group_exclusions[i] != null)
+                    tmpGrpExcl.push(selectionItem.group_exclusions[i]);
+                else
+                    grpExclRemoved = true;
+            selectionItem.items = tmpItems;
+            selectionItem.group_exclusions = tmpGrpExcl;
+            selectionItem.exclusions = tmpExcl;
+            selectionItem.groups = tmpGrp;
+            // Le cache degli indici potrebbero avere buchi, risolvo
+            if (grpRemoved)
+                this.i_groupsCache = this.compactIndexMap(this.i_groupsCache);
+            if (itemsRemoved)
+                this.i_itemsCache = this.compactIndexMap(this.i_itemsCache);
+            if (exclRemoved)
+                this.i_exclusionsCache = this.compactIndexMap(this.i_exclusionsCache);
+            if (grpExclRemoved)
+                this.i_group_exclusionsCache = this.compactIndexMap(this.i_group_exclusionsCache);
+            // Poi riprendo a fare tutto in normalità
             selectionItem.count = this.evaluateSelected();
             // Se ho fatto selezione "all" ma poi mi sono messo a togliere tutti gli elementi fino a rimanerne 0 resetto l'oggetto di selezione
-            if (selectionItem.count == 0 && selectionItem.all) {
+            if (selectionItem.count == 0) {
+                this.boundSource.forEach(function (t) { return t._selected = false; });
                 selectionItem.all = false;
                 selectionItem.exclusions = [];
                 selectionItem.items = [];
+                selectionItem.groups = [];
+                selectionItem.group_exclusions = [];
                 // Ripulisco la cache altrimenti mi rimane piena di tutte le esclusioni
-                this.selOrDeselCache = {};
+                this.clearSelectionCaches();
             }
             // Se la possibilità di fare "Seleziona tutto" è abilitata allora la considero appena mi viene selezionato qualcosa
             this.canSelectAll = selectionItem.count > 0 && this.SelectAll;
         };
+        /**
+         * Compatta una cache di indici
+         */
+        EsTableComponent.prototype.compactIndexMap = function (map) {
+            var e_5, _s;
+            var index = 0;
+            var ret = new Map();
+            try {
+                for (var _t = __values(map.keys()), _u = _t.next(); !_u.done; _u = _t.next()) {
+                    var key = _u.value;
+                    ret.set(key, index++);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_u && !_u.done && (_s = _t.return)) _s.call(_t);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+            return ret;
+        };
         /**
          * Gestisce i click sulla tabella, gestendo eventualmente anche gli Shift + Click per selezionare un range di oggetti
          *
@@ -2415,7 +4060,7 @@
             var selecteditems = [];
             if (event.shiftKey && this.ShiftClick && !this.SingleSelection) {
                 var startSelecting = false;
-                var items = this.getItemsByMode();
+                var items = this.boundSource.filter(function (t) { return !t._group && !t._sep; });
                 for (var i = 0; i < items.length; i++) {
                     var t = items[i];
                     if (startSelecting) {
@@ -2448,8 +4093,10 @@
          */
         EsTableComponent.prototype.evaluateSelected = function () {
             var _a;
-            var selectionItem = ((_a = this.View) === null || _a === void 0 ? void 0 : _a.selection) || this.arraymodeSelection;
-            this.selectedObjects = selectionItem.all ? (this.View.objectcount || this.View.length) - selectionItem.exclusions.length : selectionItem.items.length;
+            var si = ((_a = this.View) === null || _a === void 0 ? void 0 : _a.selection) || this.arraymodeSelection;
+            var excByGroup = si.group_exclusions.reduce(function (prev, curr) { return prev + curr.count; }, 0);
+            var incByGroup = si.groups.reduce(function (prev, curr) { return prev + curr.count; }, 0);
+            this.selectedObjects = (si.all ? this.BaseItemsCount : incByGroup) - excByGroup + si.items.length - si.exclusions.length;
             return this.selectedObjects;
         };
         /**
@@ -2457,9 +4104,11 @@
          */
         EsTableComponent.prototype.selectAllOrResetSelection = function () {
             var selectionItem = this.View.selection || this.arraymodeSelection;
-            this.selOrDeselCache = {};
+            this.clearSelectionCaches();
             selectionItem.all = !selectionItem.all;
             selectionItem.exclusions = [];
+            selectionItem.groups = [];
+            selectionItem.group_exclusions = [];
             selectionItem.items = [];
             // Ripulisco gli stati UI di selezione globale se l'ho disattivata
             if (!selectionItem.all) {
@@ -2469,7 +4118,7 @@
             this.finalizeSelectionInformations(selectionItem);
             this.onSelectionChanged.emit(selectionItem);
             // Dopo aver resettato direttamente il solo oggetto this.View.selection devo anche riallineare a tutti gli oggetti bindati
-            this.evaluateSelection(this.viewMode ? this.View.items : this.View, selectionItem);
+            this.evaluateSelection(this.boundSource, selectionItem);
         };
         // #endregion
         // #region Gestione Paginazione
@@ -2479,9 +4128,9 @@
          * @param {number} page Numero di pagine da aggiungere (o sottrarre, se negativo) alla pagina attuale
          */
         EsTableComponent.prototype.addToPage = function (page) {
-            if (!(this.View instanceof AppSearch) && !(this.SearchView instanceof AppSearch) && !(this.View instanceof ReportDefinition))
-                return;
-            this.goToPage((this.SearchView || this.View).page + page);
+            var _a;
+            var view = this.MainGroupView ? this.MainGroupView : this.View;
+            this.goToPage((((_a = (this.SearchView || view)) === null || _a === void 0 ? void 0 : _a.page) || 0) + page);
         };
         /**
          * Sposta la ricerca alla pagina specificata
@@ -2489,21 +4138,35 @@
          * @param {number} page Pagina a cui navigare
          */
         EsTableComponent.prototype.goToPage = function (page) {
-            if (!(this.View instanceof AppSearch) && !(this.SearchView instanceof AppSearch) && !(this.View instanceof ReportDefinition))
+            var view = this.MainGroupView ? this.MainGroupView : this.View;
+            if (!view.page || !view.pages)
                 return;
-            var appSearchElement = this.SearchView || this.View;
+            var appSearchElement = this.SearchView || view;
             if (page === 0 || page > appSearchElement.pages)
                 return;
             appSearchElement.page = page;
             this.arrayPulsanti = this.getPagesArray(6, appSearchElement.page, appSearchElement.pages);
-            this.emitSearchRequest(false);
+            var hasGroupings = !!this.MainGroupView;
+            this.emitSearchRequest(false, hasGroupings ? view : null);
         };
         /**
          * Evento richiamato sul cambio della paginazione. Verrà richiamato l'evento **emitSearchRequest**
          * per comunicare al componente che utilizza questa tabella che i dati sono da aggiornare
          */
-        EsTableComponent.prototype.onItemsPerPageChanged = function () {
-            this.emitSearchRequest(true);
+        EsTableComponent.prototype.onItemsPerPageChanged = function (newIpp) {
+            this.PagerOptions.View.itemsperpageoverride = newIpp;
+            this.changed();
+            if (this.MainGroupView)
+                this.emitSearchRequest(true, this.MainGroupView);
+            else
+                this.emitSearchRequest(true);
+        };
+        /**
+         * Evento richiamato sul cambio della paginazione. Verrà richiamato l'evento **emitSearchRequest** con la vista del separatore
+         */
+        EsTableComponent.prototype.onGroupItemsPerPageChanged = function (pager, newIpp) {
+            pager.view.itemsperpageoverride = newIpp;
+            this.emitSearchRequest(true, pager.view);
         };
         // #endregion
         // #region Gestione Export
@@ -2523,6 +4186,10 @@
                     if (cancel === void 0) { cancel = false; }
                     if (cancel)
                         return;
+                    if (data.length == 0) {
+                        _this.msgExts.simpleWarning(_this.lc.loc("Cannot export an empty dataset"));
+                        return;
+                    }
                     _this.setupExport(data);
                     _this.cdr.detectChanges();
                     setTimeout(function () { _this.exportDownloader.nativeElement.click(); });
@@ -2650,12 +4317,12 @@
          * @returns {any} Router link generato in base al parametri
          */
         EsTableComponent.prototype.generateRouterLink = function (path, parameterProps, item) {
-            if (this.DynamicTableRouterLinkCache[item.hash + path]) {
-                return this.DynamicTableRouterLinkCache[item.hash + path];
+            if (this.DynamicTableRouterLinkCache[item._hash + path]) {
+                return this.DynamicTableRouterLinkCache[item._hash + path];
             }
             else {
                 var link = this.getRouterLink(path, parameterProps, item);
-                this.DynamicTableRouterLinkCache[item.hash + path] = link;
+                this.DynamicTableRouterLinkCache[item._hash + path] = link;
                 return link;
             }
         };
@@ -2753,6 +4420,14 @@
         };
         // #endregion
         // #region Metodi di utilità
+        /** Helper che identifica se il td attuale è di tipo **EsTd**. In caso contrario è da considerarsi **EsTdDirective** */
+        EsTableComponent.prototype.isEsTd = function (td) {
+            return !td._directive;
+        };
+        /**  Helper che identifica se il th attuale è di tipo **EsTh**. In caso contrario è da considerarsi **EsThDirective** */
+        EsTableComponent.prototype.isEsTh = function (th) {
+            return !th._directive;
+        };
         /** Impostazione modalità dell'EsTable */
         EsTableComponent.prototype.setMode = function (mode) {
             this.viewMode = mode == 'view';
@@ -2765,7 +4440,8 @@
             }
         };
         /**
-         * Helper per effettuare chiamate interne di allineamento alla funzione **writeValue**, impostando prima **internalWriteCall** in modo da non effettuare operazioni inutili
+         * Helper per effettuare chiamate interne di allineamento alla funzione **writeValue**,
+         * impostando prima **internalWriteCall** in modo da non effettuare operazioni inutili
          */
         EsTableComponent.prototype.internalWriteValue = function () {
             this.internalWriteCall = true;
@@ -2829,11 +4505,13 @@
             for (var i = 0; i < items.length; i++) {
                 var item = items[i];
                 // Prima di calcolare l'hash rimuovo le proprietà interne prima che mi scompensino i calcoli successivi
-                delete item._selected;
-                delete item.hash;
-                var hash = this.hashExts.hashObject(item);
+                var tmp = Object.assign({}, items[i]);
+                delete tmp._selected;
+                delete tmp._visible;
+                delete tmp._hash;
+                var hash = this.hashExts.hashObject(tmp);
                 usedHashesCache[hash] = usedHashesCache[hash] ? usedHashesCache[hash] + 1 : 1;
-                item.hash = hash + (usedHashesCache[hash] > 1 ? "_" + usedHashesCache[hash] : "");
+                item._hash = hash + (usedHashesCache[hash] > 1 ? "_" + usedHashesCache[hash] : "");
             }
         };
         /**
@@ -2862,18 +4540,22 @@
                     viewProviders: [{ provide: localizations.LocalizationService, useClass: EsTableLoc }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.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>\r\n\r\n<!--\r\nI TH sono contenuto statico, questo significa che senza condizione per RowTHs arriverebbero sia qui sia nell ng-container dell'header in fase non inizializzata, duplicando fisicamente le colonne.\r\nPer ovviare al problema, questo pezzo lo faccio apparire solo se ci sono gi\u00E0 dei RowTHs, quindi su valorizzazione della View succeder\u00E0:\r\n1) appaiono i th nell' ng-container dell'header, e NON qui\r\n2) i TH vengono presi, elaborati e trasformati in RowTHs\r\n3) l'ng-container dell'header sparisce (per la condizione !UseCustomCells || !RowTHs) e qui appaiono i nuovi TH (che poi sono gli stessi di prima che girano)\r\n4) Vengono presi i nuovi TH da qui e trasformati a loro volta in RowTHs\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && RowTHs\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Qui invece ci sono tutti i TH-->\r\n        <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<!--\r\nQuesta parte \u00E8 un po' pi\u00F9 semplice del sopra. Infatti i TD vengono s\u00EC bindati in entrambi i punti (qui e nell'ng-container del body), ma avr\u00F2 le TD statiche prima di generare la TMPBoundSource.\r\nQuesto significa che il workflow di binding sar\u00E0:\r\n1) Appaiono i TD statici nel body e NON qui, perch\u00E9 i TMPBoundSource non sono ancora stati emessi\r\n2) Contemporaneamente all'emissione dei TMPBoundSource vengono anche emessi i RowTds\r\n3) Considerando il punto 2, al giro dopo appariranno i TD qui, perch\u00E9 \u00E8 stata generata la TMPBoundSource, e spariranno contemporaneamente dall'ng-container del body (per la condizione !UseCustomCells || !RowTDs)\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && bodyRef\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Tutti i TD che dopo verranno presi ed elaborati internamente-->\r\n        <ng-container *ngFor=\"let item of TMPBoundSource\">\r\n            <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"View\">\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=\"table-responsive datatable {{Class}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }}\" [class.est-high-density]=\"HighCellDensity\">\r\n            <thead [hidden]=\"HeaderHidden || FirstBind\">\r\n\r\n                <!-- Aggiungo il pezzo che gestisce la selezione di tutto se attivo da config -->\r\n                <tr *ngIf=\"SelectAll\">\r\n                    <th colspan=\"42\" [class.est-hidden]=\"!canSelectAll && !(View?.selection || arraymodeSelection).all\">\r\n                        <span>{{ (selectedObjects || 0).toString() + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n                        <span class=\"app-link app-inline\" (click)=\"selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\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\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\">\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                            <ng-container *ngFor=\"let operation of DynamicOperations\">\r\n                                <th class=\"est-col-min est-no-side-padding\"></th>\r\n                            </ng-container>\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 : ' 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 : ' 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                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <ng-container *ngIf=\"rowHeader && rowHeader.Visible\">\r\n                                    <th es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class}}{{rowHeader.Wrap ? '' : ' est-nowrap'}}\" [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\">\r\n                                            <ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container>\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"!rowHeader.Template\">\r\n                                            {{rowHeader.Content}}\r\n                                        </ng-container>\r\n                                    </th>\r\n                                </ng-container>\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=\"app-no-selection app-pointer est-nowrap\" (click)=\"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.app-right-10]=\"Export || HiddenColumns\" class=\"est-col-min app-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=\"app-table-dotted-menu app-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\"></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 app-fs-18 app-pointer app-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right app-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"(HiddenColumns || ColumnsOrdering)\" (click)=\"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)=\"tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"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=\"app-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowPaging && !FirstBind\">\r\n\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-left m-t-min-3\">\r\n            <ng-container *ngIf=\"viewMode\">\r\n                <ng-container *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.objectcount && View.objectcount != -1), ShowPaging: !HidePaging, View: View, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && (!UseArrayModePaging || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.length) || (SearchView && SearchView.objectcount && SearchView.objectcount != -1), ShowPaging: !HidePaging && SearchView, View: SearchView, SecondaryView: View, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && (UseArrayModePaging && !SearchView)\">\r\n                <ng-container  *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount, ShowPaging: !HidePaging && View.length > 10, View: View, UsesView: false }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"reportMode\">\r\n                <ng-container  *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.objectcount && View.objectcount != -1), ShowPaging: View.pagingavailable, MightBeNoPaging: true, View: View, Report: ReportValues, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div class=\"pull-right btn-toolbar\" *ngIf=\"ShowPaging && !HidePagingButtons\">\r\n            <ng-container *ngIf=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { 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: { ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <a class=\"btn app-white-button app-no-margin\" (click)=\"options.ATP(-1)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n    <div *ngIf=\"options.Array\" class=\"app-inline\">\r\n        <a *ngFor=\"let p of options.Array\" class=\"btn {{p.cssClass}} app-no-margin\" (click)=\"options.GTP(p.val)\">{{p.val}}</a>\r\n    </div>\r\n    <a class=\"btn app-white-button app-no-margin\" (click)=\"options.ATP(1)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n</ng-template>\r\n\r\n<!-- Template che mostra le informazioni base di paginazione: conteggio oggetti, paginazione attuale e pulsanti per cambiarla -->\r\n<ng-template #pagerSelector let-options>\r\n    <div *ngIf=\"options.ShowCount\">\r\n        {{ CountLabel }}:&nbsp;\r\n        <strong *ngIf=\"options.UsesView && !options.Report\">\r\n            {{ options.View?.objectcount ? options.View.objectcount : options.SecondaryView && options.SecondaryView.length ? options.SecondaryView.length : \"0\" }}\r\n        </strong>\r\n        <strong *ngIf=\"!options.UsesView && !options.Report\">\r\n            {{ options.View.length ? options.View.length : \"0\" }}\r\n        </strong>\r\n        <strong *ngIf=\"options.Report\">\r\n            {{ options.Report.count && options.Report.count == -1 ? options.Report.rows.length : options.Report.count && options.Report.count > 0 ? options.Report.count : 0 }}\r\n        </strong>\r\n    </div>\r\n    <div *ngIf=\"options.ShowPaging\">\r\n        <app-paging *ngIf=\"!options.UsesView\" [Hidden]=\"!options.View || options.View.length == 0\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"refreshPaging($event)\"></app-paging>\r\n        <app-paging *ngIf=\"options.UsesView\" [AllSearch]=\"AllSearch\" [DefaultAll]=\"defaultAllPageOverride\" [View]=\"options.View\" (pagingSelected)=\"options.View.itemsperpageoverride = $event; changed(); onItemsPerPageChanged();\"></app-paging>\r\n    </div>\r\n    <div *ngIf=\"options.MightBeNoPaging && !options.ShowPaging\">\r\n        <em>{{'Paging options are not available for this report' | localize: lc}}</em>\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;\">\r\n        <tr *ngIf=\"item.visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" [class.est-line-through]=\"item.removed || item.deleted\" [class.est-pointer]=\"!item.locked\" [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"!item.locked && handleClick($event, item)\">\r\n            \r\n            <td *ngIf=\"!item.locked\"><input type=\"checkbox\" [disabled]=\"templateOptions.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{i}}\"></td>\r\n            <td *ngIf=\"item.locked\"></td>\r\n\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 *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n\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\" [class]=\"item._rowClass ? item._rowClass : ''\" [class.est-line-through]=\"item.removed || item.deleted\">\r\n\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 *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n\r\n        </tr>\r\n    </ng-container>\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}} app-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\">\r\n                    <a [routerLink]=\"generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"app-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.propertyName) || defaultEsTd; context: { $implicit: item.properties[rowItem.propertyName], rowItem : rowItem, item : item }\"> </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-value let-rowItem='rowItem' let-item='item'>\r\n    <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\"\r\n        [class.app-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\"\r\n        (click)=\"cellClicked(rowItem.propertyName, item) && !CellActionPropagates && $event.stopPropagation()\"\r\n        [Internal]=\"false\">\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>\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item.hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem\">\r\n\r\n                <ng-container *ngIf=\"!bodyRef && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [Internal]=\"true\">\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                    </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\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 app-no-selection\" (click)=\"collapseParent(item[this.OwnKey])\"></span>\r\n                            <span *ngIf=\"item.parent && !item.expanded\" class=\"fa fa-chevron-up est-pointer app-no-selection\" (click)=\"expandParent(item[this.OwnKey])\"></span>\r\n                            &nbsp;\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"app-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [class.app-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + $any(rowItem).ID + '$') != -1\" (click)=\"cellClicked(rowItem.ID, item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <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 app-no-selection\" (click)=\"collapseParent(item[this.OwnKey])\"></span>\r\n                            <span *ngIf=\"item.parent && !item.expanded\" class=\"fa fa-chevron-up est-pointer app-no-selection\" (click)=\"expandParent(item[this.OwnKey])\"></span>\r\n                            &nbsp;\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<!-- 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=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove app-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning app-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove app-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning app-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove app-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"app-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\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\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 app-padding-10 app-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 app-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)=\"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                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" class=\"est-pointer\" [class.est-white-selected]=\"lastSelectedItemID == item.id\" [class.est-no-selection]=\"!item.visible\" (click)=\"columnClicked(item);\">\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)=\"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\" (click)=\"lastSelectedItemID = item.id; i != 0 && !item.fixed && sendUp(item); $event.stopPropagation();\"></span>\r\n                                    <span class=\"fa fa-arrow-down\" [class.est-hidden-view]=\"item.fixed\" (click)=\"lastSelectedItemID = item.id; !last && !item.fixed && sendDown(item); $event.stopPropagation();\"></span>\r\n                                </td>\r\n                                <td class=\"est-nowrap\">\r\n                                    <ng-container *ngIf=\"item.template\">\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></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 app-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)=\"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-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-nowrap{white-space:nowrap}.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-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-right-10{right:10px}.est-hidden{visibility:hidden}"]
+                    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>\r\n\r\n<!--\r\nI TH sono contenuto statico, questo significa che senza condizione per RowTHs arriverebbero sia qui sia nell ng-container dell'header in fase non inizializzata, duplicando fisicamente le colonne.\r\nPer ovviare al problema, questo pezzo lo faccio apparire solo se ci sono gi\u00E0 dei RowTHs, quindi su valorizzazione della View succeder\u00E0:\r\n1) appaiono i th nell' ng-container dell'header, e NON qui\r\n2) i TH vengono presi, elaborati e trasformati in RowTHs\r\n3) l'ng-container dell'header sparisce (per la condizione !UseCustomCells || !RowTHs) e qui appaiono i nuovi TH (che poi sono gli stessi di prima che girano)\r\n4) Vengono presi i nuovi TH da qui e trasformati a loro volta in RowTHs\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && RowTHs\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Qui invece ci sono tutti i TH-->\r\n        <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<!--\r\nQuesta parte \u00E8 un po' pi\u00F9 semplice del sopra. Infatti i TD vengono s\u00EC bindati in entrambi i punti (qui e nell'ng-container del body), ma avr\u00F2 le TD statiche prima di generare la TMPBoundSource.\r\nQuesto significa che il workflow di binding sar\u00E0:\r\n1) Appaiono i TD statici nel body e NON qui, perch\u00E9 i TMPBoundSource non sono ancora stati emessi\r\n2) Contemporaneamente all'emissione dei TMPBoundSource vengono anche emessi i RowTds\r\n3) Considerando il punto 2, al giro dopo appariranno i TD qui, perch\u00E9 \u00E8 stata generata la TMPBoundSource, e spariranno contemporaneamente dall'ng-container del body (per la condizione !UseCustomCells || !RowTDs)\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && bodyRef\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Tutti i TD che dopo verranno presi ed elaborati internamente-->\r\n        <ng-container *ngFor=\"let item of TMPBoundSource\">\r\n            <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"View\">\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 *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{ContainerClass}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10\"  [class.est-high-density]=\"HighCellDensity\">\r\n            <thead [hidden]=\"HeaderHidden || FirstBind\">\r\n                <!-- Aggiungo il pezzo che gestisce la selezione di tutto se attivo da config -->\r\n                <tr *ngIf=\"SelectAll\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden]=\"!canSelectAll && !(View?.selection || arraymodeSelection).all\">\r\n                        <span>{{ ((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)=\"selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\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=\"headerGroupRef\">\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=\"secondaryHeaderGroupRef\">\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\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\">\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}}\" [class.est-no-border]=\"true\" [class.est-nowrap]=\"!rowHeader.Wrap\" class=\"{{rowHeader.Class || ''}}\" [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                                </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.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" class=\"{{rowHeader.Class || ''}}\" [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)=\"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-10]=\"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\"></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)=\"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)=\"tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"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</ng-container>\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 && !HidePagingButtons\" class=\"pull-right btn-toolbar\">\r\n            <ng-container *ngIf=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { 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: { 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 m-t-min-3 est-margin-right-50\">\r\n            <div *ngIf=\"PagerOptions.ShowPaging && (PagerOptions.PagerCount > 10 || reportMode && View.pagingavailable)\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [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    <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\">\r\n        <span class=\"fa fa-chevron-left\"></span>\r\n    </a>\r\n    <div *ngIf=\"options.Array\" class=\"est-inline\">\r\n        <a *ngFor=\"let p of options.Array\" class=\"est-page-sel\" class=\"btn {{p.cssClass}}\"\r\n            (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a>\r\n    </div>\r\n    <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\">\r\n        <span class=\"fa fa-chevron-right\"></span>\r\n    </a>\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;\">\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 *ngIf=\"HasPinnedColumns\"></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\"><app-paging [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\" [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\"><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]=\"generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"est-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.propertyName) || defaultEsTd; context: { $implicit: item.properties[rowItem.propertyName], rowItem : rowItem, item : item }\"> </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-value let-rowItem='rowItem' let-item='item'>\r\n    <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\"\r\n        [class.est-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\"\r\n        (click)=\"cellClicked(rowItem.propertyName, item) && !CellActionPropagates && $event.stopPropagation()\"\r\n        [Internal]=\"false\" [Context]=\"item._hash\">\r\n        {{value}}\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-item let-opt=\"templateOptions\">\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n\r\n        <td *ngIf=\"HasPinnedColumns\" class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\">\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\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n                    <td *ngIf=\"rowItem && rowItem.Pinned\" [style.width.px]=\"rowItem.PinnedWidth\" es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-no-border]=\"true\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem && !rowItem.Pinned\">\r\n\r\n                <!-- Casistica senza bodyRef, quindi con direttive per i td -->\r\n                <ng-container *ngIf=\"!bodyRef && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-ltab-border]=\"rowItem.LeftBorder\" [class.est-rtab-border]=\"rowItem.RightBorder\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"est-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (NON RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [class.est-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + $any(rowItem).ID + '$') != -1\" (click)=\"cellClicked(rowItem.ID, item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\">\r\n                            <ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\" [innerHTML]=\"rowItem.Content\"></span>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"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-10' : ''}}\" *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-10' : ''}}\" *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-10' : ''}}\" *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-10' : ''}}\" *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-10' : ''}}\" *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\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\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)=\"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 class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" class=\"est-pointer\" [class.est-white-selected]=\"lastSelectedItemID == item.id\" [class.est-no-selection]=\"!item.visible\">\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)=\"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 && 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 && sendDown(item); $event.stopPropagation();\"></span>\r\n                                </td>\r\n                                <td class=\"est-nowrap\" (click)=\"columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\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)=\"columnClicked(item);\"></td>\r\n                                <!-- Pinner -->\r\n                                <td><span *ngIf=\"!item.fixed\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"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)=\"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-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-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-10{right:10px!important}.est-table-dotted-menu{padding:0 0 2px!important;color:#999}.est-fs-18{font-size:18px}.est-fs-14{font-size:14px}.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-right-10{right:10px}.est-hidden{visibility:hidden}.est-padding-10{padding:10px!important}.est-margin-right-50{margin-right:50px}.est-page-sel{color:#000;margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit}.est-page-next,.est-page-prev{color:#000;font-size:inherit;padding:3px 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-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-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}"]
                 },] }
     ];
     EsTableComponent.ctorParameters = function () { return [
         { type: forms.NgControl, decorators: [{ type: core.Self }, { type: core.Optional }] },
         { type: preferences.PreferencesService, decorators: [{ type: core.Optional }] },
+        { type: EsTableDefaultable, decorators: [{ type: core.Optional }, { type: core.Inject, args: [EST_DEFAULTS,] }] },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [EST_LOCALE,] }] },
         { type: localizations.LocalizationService },
         { type: core.ChangeDetectorRef },
         { type: extensions.HashingService },
         { type: extensions.UtilityService },
-        { type: extensions.ExportService }
+        { type: extensions.ExportService },
+        { type: extensions.DateService },
+        { type: extensions.MessageService }
     ]; };
     EsTableComponent.propDecorators = {
         EsTdsDirective: [{ type: core.ContentChildren, args: [EsTdDirective,] }],
@@ -2892,7 +4574,7 @@
         CellActionPropagates: [{ type: core.Input }],
         UseCustomCells: [{ type: core.Input }],
         MaxHeight: [{ type: core.Input }],
-        Class: [{ type: core.Input }],
+        ContainerClass: [{ type: core.Input }],
         XLSXExport: [{ type: core.Input }],
         CSVExport: [{ type: core.Input }],
         AllSearch: [{ type: core.Input }],
@@ -2903,14 +4585,12 @@
         RemovalCondition: [{ type: core.Input }],
         Export: [{ type: core.Input }],
         ShiftClick: [{ type: core.Input }],
-        ShowPaging: [{ type: core.Input }],
         HidePaging: [{ type: core.Input }],
         HidePagingCount: [{ type: core.Input }],
         HidePagingButtons: [{ type: core.Input }],
         ContextMenu: [{ type: core.Input }],
         ExportFileName: [{ type: core.Input }],
         TableClass: [{ type: core.Input }],
-        CountLabel: [{ type: core.Input }],
         ExportFunction: [{ type: core.Input }],
         HasHeaderGroup: [{ type: core.Input }],
         HasSecondaryHeaderGroup: [{ type: core.Input }],
@@ -2936,9 +4616,12 @@
         OwnKey: [{ type: core.Input }],
         StartsExpanded: [{ type: core.Input }],
         SavePreferences: [{ type: core.Input }],
+        PagingStyle: [{ type: core.Input }],
+        RowGroupingPagingStyle: [{ type: core.Input }],
         SecondarySource: [{ type: core.Input }],
         TertiarySource: [{ type: core.Input }],
         UseSelectionCache: [{ type: core.Input }],
+        ShowItemGroupsColumns: [{ type: core.Input }],
         onOrderChanged: [{ type: core.Output }],
         onSearchRequest: [{ type: core.Output }],
         onSelectionChanged: [{ type: core.Output }],
@@ -2952,26 +4635,22 @@
         ArraymodeItemsPerPage: [{ type: core.Input }]
     };
 
-    /**
-     * Modello di configurazione per L'EsTable
-     */
+    /** Modello di configurazione per L'EsTable */
     var EsTableModuleConfig = /** @class */ (function () {
         function EsTableModuleConfig() {
         }
         return EsTableModuleConfig;
     }());
 
-    /**
-     * Classe di localizzazione per il componente **TablePagerComponent**
-     */
+    /** Classe di localizzazione per il componente **TablePagerComponent** */
     var TablePagerLoc = /** @class */ (function (_super) {
         __extends(TablePagerLoc, _super);
-        /**
-         * @ignore
-         */
+        /** @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;
@@ -2986,33 +4665,36 @@
     ]; };
 
     // Angular
-    /**
-     * Componente che si occupa della paginazione di una tabella
-     */
+    /** Componente che si occupa della paginazione di una tabella */
     var TablePagerComponent = /** @class */ (function () {
-        /**
-         * @ignore
-         */
-        function TablePagerComponent(msgExts, lc) {
+        /** @ignore */
+        function TablePagerComponent(msgExts, lc, cdr, locale) {
             this.msgExts = msgExts;
             this.lc = lc;
-            /**
-             * Indica se deve mostrare un warning quando si cercano di solezionare come elementi da visualizzare "Tutti"
-             */
+            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
-             */
+            /** Indica se dare la possibilità o meno di selezionare "Tutti" nelle opzioni di paginazione */
             this.AllSearch = true;
-            /**
-             * Placeholder che identifica il "Tutti"
-             */
+            /** Placeholder che identifica il "Tutti" */
             this.DefaultAll = 999999;
-            /**
-             * Output invocato quando il numero di elementi per pagina viene modificato da un click utente
-             */
+            /** 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 se visualizzare il numero totale di oggeti presenti */
+            this.ShowCount = true;
+            /** Output invocato quando il numero di elementi per pagina viene modificato da un click utente */
             this.pagingSelected = new core.EventEmitter();
+            /** Opzioni di paginazione */
+            this.PagingOptions = [10, 15, 30, 45, 100];
         }
+        TablePagerComponent.prototype.ngOnInit = function () {
+            this.Model = this.View ? this.View.itemsperpageoverride : this.CurrentPageSize;
+            if (this.AllSearch)
+                this.PagingOptions.push(this.DefaultAll);
+        };
         /**
          * Funzione richiamata dal template quando un utente clicca su un numero di paginazione.
          *
@@ -3023,10 +4705,19 @@
         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.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
+            else {
                 this.pagingSelected.emit(pageSize);
+                this.Model = pageSize;
+            }
         };
         return TablePagerComponent;
     }());
@@ -3034,20 +4725,28 @@
         { type: core.Component, args: [{
                     selector: "app-paging",
                     viewProviders: [{ provide: localizations.LocalizationService, useClass: TablePagerLoc }],
-                    template: "<!--Se non ho almeno 10 elementi non ha senso far vedere le opzioni di paginazione-->\r\n<ng-container *ngIf=\"View ? ((View.objectcount && View.objectcount >= 10) || View.pagingavailable) : !Hidden\">\r\n    {{'Paging' | localize : lc}}:&nbsp;\r\n    <span class=\"app-link app-inline\"\r\n          [class.app-bold]=\"View ? View.itemsperpageoverride && View.itemsperpageoverride == 10 : CurrentPageSize == 10\"\r\n          (click)=\"choice(10);\">\r\n        10\r\n    </span>&nbsp;|&nbsp;\r\n\r\n    <span class=\"app-link app-inline\"\r\n          [class.app-bold]=\"View ? View.itemsperpageoverride && View.itemsperpageoverride == 15 : CurrentPageSize == 15\"\r\n          (click)=\"choice(15);\">\r\n        15\r\n    </span>&nbsp;|&nbsp;\r\n\r\n    <span class=\"app-link app-inline\"\r\n          [class.app-bold]=\"View ? View.itemsperpageoverride && View.itemsperpageoverride == 30 : CurrentPageSize == 30\"\r\n          (click)=\"choice(30);\">\r\n        30\r\n    </span>&nbsp;|&nbsp;\r\n\r\n    <span class=\"app-link app-inline\"\r\n          [class.app-bold]=\"View ? View.itemsperpageoverride && View.itemsperpageoverride == 45 : CurrentPageSize == 45\"\r\n          (click)=\"choice(45);\">\r\n        45\r\n    </span>&nbsp;|&nbsp;\r\n\r\n    <span class=\"app-link app-inline\"\r\n          [class.app-bold]=\"View ? View.itemsperpageoverride && View.itemsperpageoverride == 100 : CurrentPageSize == 100\"\r\n          (click)=\"choice(100);\">\r\n        100\r\n    </span><span *ngIf=\"AllSearch\">&nbsp;|&nbsp;</span>\r\n    <span *ngIf=\"AllSearch\" class=\"app-link app-inline\"\r\n          [class.app-bold]=\"View ? View.itemsperpageoverride && View.itemsperpageoverride == DefaultAll : CurrentPageSize == DefaultAll\"\r\n          (click)=\"choice(DefaultAll);\">\r\n        {{'All' | localize : lc}}\r\n    </span>\r\n</ng-container>"
+                    template: "<!--Se non ho almeno 10 elementi non ha senso far vedere le opzioni di paginazione-->\r\n<span class=\"est-fs-14\"> {{(GroupMode ? 'Shown Groups' : 'Shown Elements') | localize : lc}}:&nbsp;</span>\r\n<mat-form-field [appearance]=\"'legacy'\" class=\"mat-paginator-page-size-select est-fs-14 est-ipp-bold\" *ngIf=\"Model\">\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\" [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\">&nbsp;/&nbsp;{{PagerCount | number : '0.0-0' : locale}}\r\n</span>",
+                    encapsulation: core.ViewEncapsulation.None,
+                    changeDetection: core.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: extensions.MessageService },
-        { type: localizations.LocalizationService }
+        { type: localizations.LocalizationService },
+        { type: core.ChangeDetectorRef },
+        { type: String, decorators: [{ type: core.Optional }, { type: core.Inject, args: [EST_LOCALE,] }] }
     ]; };
     TablePagerComponent.propDecorators = {
         CurrentPageSize: [{ type: core.Input }],
         View: [{ type: core.Input }],
-        Hidden: [{ type: core.Input }],
         WarnOnAll: [{ type: core.Input }],
         AllSearch: [{ type: core.Input }],
         DefaultAll: [{ type: core.Input }],
+        GroupMode: [{ type: core.Input }],
+        GroupCount: [{ type: core.Input }],
+        ShowCount: [{ type: core.Input }],
+        PagerCount: [{ type: core.Input }],
         pagingSelected: [{ type: core.Output }]
     };
 
@@ -3058,7 +4757,8 @@
             return {
                 ngModule: EsTableModule,
                 providers: [
-                    { provide: EST_LOCALE, useValue: (config === null || config === void 0 ? void 0 : config.locale) || 'it-IT' }
+                    { 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 }
                 ]
             };
         };
@@ -3074,7 +4774,9 @@
                         modal.ModalModule,
                         dropdown.BsDropdownModule,
                         ngxCsv.CsvModule,
-                        ngxContextmenu.ContextMenuModule
+                        ngxContextmenu.ContextMenuModule,
+                        select.MatSelectModule,
+                        input.MatInputModule
                     ],
                     declarations: [EsTh, EsTd, EsTableComponent, EsTdDirective, EsThDirective, TablePagerComponent],
                     providers: [extensions.UtilityService, extensions.ExportService, extensions.HashingService, extensions.MessageService],
@@ -3093,15 +4795,19 @@
     exports.AppOrdering = AppOrdering;
     exports.AppSearch = AppSearch;
     exports.CornerMenuOption = CornerMenuOption;
-    exports.EsTableColumn = EsTableColumn;
     exports.EsTableColumnsDefinition = EsTableColumnsDefinition;
     exports.EsTableComponent = EsTableComponent;
+    exports.EsTableDefaultable = EsTableDefaultable;
     exports.EsTableModule = EsTableModule;
     exports.EsTableModuleConfig = EsTableModuleConfig;
     exports.EsTableOperationDefinition = EsTableOperationDefinition;
     exports.EsTd = EsTd;
     exports.EsTh = EsTh;
     exports.GenericItem = GenericItem;
+    exports.Group = Group;
+    exports.GroupAggregation = GroupAggregation;
+    exports.GroupFilter = GroupFilter;
+    exports.GroupOrAggregation = GroupOrAggregation;
     exports.ItemsSelection = ItemsSelection;
     exports.ReportColumn = ReportColumn;
     exports.ReportDefinition = ReportDefinition;
@@ -3111,10 +4817,12 @@
     exports.ReportRow = ReportRow;
     exports.ɵa = EsTableLoc;
     exports.ɵb = EST_LOCALE;
-    exports.ɵc = EsTdDirective;
-    exports.ɵd = EsThDirective;
-    exports.ɵe = TablePagerComponent;
-    exports.ɵf = TablePagerLoc;
+    exports.ɵc = EST_DEBUG;
+    exports.ɵd = EST_DEFAULTS;
+    exports.ɵe = EsTdDirective;
+    exports.ɵf = EsThDirective;
+    exports.ɵg = TablePagerComponent;
+    exports.ɵh = TablePagerLoc;
 
     Object.defineProperty(exports, '__esModule', { value: true });