@esfaenza/es-table 11.2.21 → 11.2.22-beta4

package/fesm2015/esfaenza-es-table.js

@@ -1,12 +1,14 @@
 import { __awaiter } from 'tslib';
 import { Component, ChangeDetectionStrategy, ElementRef, Renderer2, ViewContainerRef, Input, EventEmitter, Output, ViewChild, HostListener, Directive, TemplateRef, InjectionToken, Injectable, Optional, Inject, ViewEncapsulation, Self, ChangeDetectorRef, ContentChildren, forwardRef, ContentChild, NgModule } from '@angular/core';
 import { NgControl, FormsModule } from '@angular/forms';
-import { HashingService, UtilityService, ExportService, MessageService } from '@esfaenza/extensions';
+import { HashingService, UtilityService, ExportService, DateService, MessageService } from '@esfaenza/extensions';
 import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
 import { PreferencesService } from '@esfaenza/preferences';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { CsvModule } from '@ctrl/ngx-csv';
@@ -63,9 +65,7 @@ class AppSearch {
     }
 }
 
-/**
- * Classe che identifica una colonna. Utilizzata in modalità "Colonne dinamiche"
- */
+/** Classe che identifica una colonna. Utilizzata in modalità "Colonne dinamiche" */
 class EsTableColumnsDefinition {
     /**
      * Costruttore
@@ -80,8 +80,9 @@ class EsTableColumnsDefinition {
      * @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.
      */
-    constructor(description, propertyName, routePath = null, routeParameterProperties = null, dataOrder = null, columnOrder = null, visible = true, clss = null, orderable = true) {
+    constructor(description, propertyName, routePath = null, routeParameterProperties = null, dataOrder = null, columnOrder = null, visible = true, clss = null, orderable = true, headerWraps = false) {
         this.description = description;
         this.propertyName = propertyName;
         this.routePath = routePath;
@@ -91,69 +92,50 @@ class EsTableColumnsDefinition {
         this.visible = visible;
         this.clss = clss;
         this.orderable = orderable;
+        this.headerWraps = headerWraps;
     }
 }
 
-/**
- * Classe che definisce un oggetto generico come lista di proprietà-valore
- */
+/** Classe che definisce un oggetto generico come lista di proprietà-valore */
 class GenericItem {
-    /**
-     * @ignore
-     */
+    /** @ignore */
     constructor() {
         this._selected = false;
         this._rowClass = null;
-        this.hash = null;
+        this._hash = null;
         this.properties = {};
     }
 }
 
-/**
- * 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) */
 class 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 */
 class ReportDefinition {
 }
 
-/**
- * Classe che identifica una direttiva di ordinamento per un report
- */
+/** Classe che identifica una direttiva di ordinamento per un report */
 class ReportOrder {
 }
 
-/**
- * Classe che rappresenta una colonna di un report
- */
+/** Classe che rappresenta una colonna di un report */
 class ReportColumn {
 }
 
-/**
- * Classe che rappresenta una lista di oggetti generati da un report
- */
+/** Classe che rappresenta una lista di oggetti generati da un report */
 class ReportResult {
 }
 
-/**
- * Classe che rappresenta i valori delle proprietà di un oggetto Report
- */
+/** Classe che rappresenta i valori delle proprietà di un oggetto Report */
 class ReportRow {
 }
 
-/**
- * Classe che identifica un parametro generico per un report
- */
+/** Classe che identifica un parametro generico per un report */
 class 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 */
 class EsTableOperationDefinition {
     /**
      * Costruttore
@@ -175,9 +157,109 @@ class EsTableOperationDefinition {
     }
 }
 
-/**
- * Definizione di una colonna
- */
+/** Identifica una selezione applicabile agli oggetti presentati in una tabella */
+class ItemsSelection {
+    /**
+     * Costruttore
+     *
+     * @param {T[]} selected Oggetti da considerare selezionati
+     */
+    constructor(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 = [];
+    }
+}
+
+/** Classe che rappresenta un Gruppo con le proprie aggregazioni */
+class Group {
+    /**
+     * Costruttore
+     *
+     * @param {string} column ID della colonna raggruppata
+     * @param {number} count Numero di elementi raggruppati sotto questa colonna
+     * @param {string} value Valore del Gruppo
+     */
+    constructor(column, count, value) {
+        this.column = column;
+        this.count = count;
+        this.value = value;
+        this.aggregations = [];
+    }
+}
+
+/** Classe che rappresenta un'aggregazione */
+class GroupAggregation {
+    /**
+     * 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
+     */
+    constructor(column, aggregation, value) {
+        this.column = column;
+        this.aggregation = aggregation;
+        this.value = value;
+    }
+}
+
+/** Classe che rappresenta un filtro su un gruppo */
+class GroupFilter {
+    /**
+     * 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
+     */
+    constructor(column, value) {
+        this.column = column;
+        this.value = value;
+    }
+}
+
+/** Classe che rappresenta o un gruppo o una aggregazione su una colonna. Usata solo internamente */
+class GroupOrAggregation {
+    /**
+     * 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
+     */
+    constructor(column, aggregation, datatype) {
+        this.column = column;
+        this.aggregation = aggregation;
+        this.datatype = datatype;
+    }
+}
+
+/** 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 */
+class CacheTriptic {
+    /**
+     * 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
+     */
+    constructor(cache, index_cache, array) {
+        this.cache = cache;
+        this.index_cache = index_cache;
+        this.array = array;
+    }
+}
+
+/** Definizione di una colonna, utilizzato nella dialog che permette di modificare le posizioni e le visibilità */
 class EsTableColumn {
     /**
      * Costruttore
@@ -186,66 +268,89 @@ class EsTableColumn {
      * @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
      */
-    constructor(id, description, visible, fixed, template) {
+    constructor(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;
     }
 }
 
-/**
- * Identifica una selezione applicabile agli oggetti presentati in una tabella
- */
-class ItemsSelection {
+/** Classe che rappresenta un separatore da inserire fra gli oggetti dell'es-table per le operazioni di paginazione dei raggruppamenti per riga */
+class GroupPager {
     /**
      * 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
      */
-    constructor(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 = [];
+    constructor(_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 = [];
     }
 }
 
-//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
  */
-class EsTd {
+class GroupRouteFragment {
     /**
-     * @ignore
+     * Costruttore
+     *
+     * @param {string} column Colonna di raggruppamento
+     * @param {string} value Valore della colonna di raggruppamento
+     */
+    constructor(column, value) {
+        this.column = column;
+        this.value = value;
+    }
+}
+
+/** Classe rappresentante una singola aggregazione effettuata su una colonna */
+class ThAggregation {
+    /**
+     * 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
      */
+    constructor(func, format, match) {
+        this.func = func;
+        this.format = format;
+        this.match = match;
+    }
+}
+
+//Angular
+/** Componente rappresentante una singola cella del body della tabella */
+class EsTd {
+    /** @ignore */
     constructor(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;
     }
     /**
@@ -270,13 +375,18 @@ class EsTd {
             this._Visible = true;
         return this._Visible;
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     ngAfterViewInit() {
         // 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 */
+    getTemplateContext() {
         // 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
         let vc = this._viewContainer;
         let context;
@@ -289,34 +399,23 @@ class EsTd {
             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 (let i = 0; i < array.length; i++) {
-                let 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 (let ii = 0; ii < item.length; ii++) {
-                        let iitem = item[ii];
-                        if (iitem && iitem.$implicit && !iitem.ngIf) {
-                            context = iitem.$implicit;
-                            break;
-                        }
-                    }
+        var array = this._viewContainer._hostLView;
+        for (let i = 0; i < array.length; i++) {
+            let 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 (let ii = 0; ii < item.length; ii++) {
+                    let iitem = item[ii];
+                    if (iitem && iitem.$implicit && !iitem.ngIf)
+                        return iitem.$implicit;
                 }
-                if (context)
-                    break;
             }
         }
-        // Calcolato dalla ES-table in fase di binding
-        let 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", "");
     }
 }
 EsTd.decorators = [
@@ -338,27 +437,20 @@ EsTd.propDecorators = {
     RouterLink: [{ type: Input }],
     Display: [{ type: Input }],
     Template: [{ type: Input }],
+    Context: [{ type: Input }],
     Visible: [{ type: Input }]
 };
 
 //Angular
-/**
- * Componente rappresentante una Colonna della tabella
- */
+/** Componente rappresentante una Colonna della tabella */
 class EsTh {
-    /**
-     * @ignore
-     */
+    /** @ignore */
     constructor(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
@@ -366,21 +458,13 @@ class EsTh {
          * 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
@@ -391,18 +475,12 @@ class EsTh {
         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 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;
     }
     /**
      * Imposta la visibilità o meno della colonna, si traduce nell'applicazione o rimozione della classe **app-display-none**
@@ -426,9 +504,7 @@ class EsTh {
             this._Visible = true;
         return this._Visible;
     }
-    /**
-     * @ignore
-     */
+    /** @ignore */
     ngAfterViewInit() {
         //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;
@@ -437,9 +513,7 @@ class EsTh {
         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 */
     setupNextOrderAndNotify() {
         if (!this.ID) {
             console.log("Attempt to order a column without ID. Operation ignored");
@@ -466,9 +540,7 @@ class EsTh {
         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 */
     onMouseUp() {
         if (!this.Resizable)
             return;
@@ -518,9 +590,7 @@ EsTh.propDecorators = {
     onMouseMove: [{ type: 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 */
 class EsTdDirective {
     /**
      * @ignore
@@ -548,23 +618,31 @@ EsTdDirective.propDecorators = {
     tdClass: [{ type: 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 */
 class EsThDirective {
     /**
      * @ignore
      */
     constructor(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ò */
@@ -573,8 +651,10 @@ class EsThDirective {
         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;
     }
 }
 EsThDirective.decorators = [
@@ -585,30 +665,37 @@ EsThDirective.ctorParameters = () => [
 ];
 EsThDirective.propDecorators = {
     th: [{ type: Input }],
+    thPinned: [{ type: Input }],
+    thPinnedWidth: [{ type: Input }],
     thVisible: [{ type: Input }],
     thFixed: [{ type: Input }],
+    thParent: [{ type: Input }],
     thOrder: [{ type: Input }],
     thOrderable: [{ type: Input }],
     thWrap: [{ type: Input }],
     thResizable: [{ type: Input }],
     thClass: [{ type: Input }],
-    thIf: [{ type: Input }]
+    thGroupClass: [{ type: Input }],
+    thIf: [{ type: Input }],
+    thGroup: [{ type: Input }],
+    thAggregation: [{ type: Input }]
 };
 
-/**
- * Token che indica il locale da utilizzare all'interno del componente. Supportati solo "it-IT" ed "en-US"
- */
-const EST_LOCALE = new InjectionToken('EST_LOCALE');
+/** Token che indica il locale da utilizzare all'interno del componente. Supportati solo "it-IT" ed "en-US" */
+const EST_LOCALE = new InjectionToken('EST_LOCALE');
+/** Token che indica se emettere log a console o meno */
+const EST_DEBUG = new InjectionToken('EST_DEBUG');
+/** Token che indica i default da assegnare agli Input */
+const EST_DEFAULTS = new InjectionToken('EST_DEFAULTS');
 
-/**
- * Classe di localizzazione per il componente **EsTableComponent**
- */
+/** Classe di localizzazione per il componente **EsTableComponent** */
 class EsTableLoc extends LocalizationService {
-    /**
-     * @ignore
-     */
+    /** @ignore */
     constructor(LOC_LOCALE) {
         super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
+        super.set("en->it", "All", ["Tutto"]);
+        super.set("en->it", "Groups", ["Gruppi"]);
+        super.set("en->it", "Cannot export an empty dataset", ["Impossibile esportare un dataset vuoto"]);
         super.set("en->it", "Performing Table bootstrap", ["Sto caricando la Tabella"]);
         super.set("en->it", "Update every", ["Aggiorna ogni"]);
         super.set("en->it", "second/s", ["secondo/i"]);
@@ -633,25 +720,31 @@ EsTableLoc.ctorParameters = () => [
     { type: String, decorators: [{ type: Optional }, { type: Inject, args: [EST_LOCALE,] }] }
 ];
 
+/** Raccolta di tutti gli Input dell'EsTable a cui può essere logicamente sensato assegnare default per progetto */
+class EsTableDefaultable {
+}
+
 /** Componente che permette di rappresentare una griglia di valori */
 class EsTableComponent {
     /** @ignore */
-    constructor(ngControl, prefService, lc, cdr, hashExts, utiExts, expExts) {
+    constructor(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;
@@ -690,6 +783,10 @@ class EsTableComponent {
         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 = {};
         /**
@@ -736,7 +833,11 @@ class EsTableComponent {
          * @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:
@@ -752,14 +853,14 @@ class EsTableComponent {
         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 */
@@ -778,8 +879,6 @@ class EsTableComponent {
         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 */
@@ -791,12 +890,10 @@ class EsTableComponent {
         /** 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;
@@ -828,11 +925,7 @@ class EsTableComponent {
         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;
@@ -852,6 +945,10 @@ class EsTableComponent {
         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
          *
@@ -865,12 +962,19 @@ class EsTableComponent {
          */
         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 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 EventEmitter();
         /** Evento che parte ad ogni modifica di "checkaggio" in forma di comodo array. Espone l'oggetto con lo stato di check attuale */
@@ -893,19 +997,91 @@ class EsTableComponent {
         /** 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 = (_) => { };
         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 */
     ngOnInit() {
         //Per poter cambiare il layout in base al livello gerarchico il componente deva avere il pieno controllo di ogni cella,
@@ -914,6 +1090,9 @@ class EsTableComponent {
             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(t => {
+            // Gruppi va bene, oggetti pure, ma separatori fra gruppi proprio no...
+            if (t.item._sep)
+                return;
             let shouldEmit = !t.item._selected;
             t.item._selected = true;
             var itemSelection = this.handleItemsSelection([t.item]);
@@ -941,6 +1120,26 @@ class EsTableComponent {
                 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
+     */
+    InputOrDefault(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 */
     ngOnDestroy() {
         if (this.ctxMenuSubscription)
@@ -954,6 +1153,7 @@ class EsTableComponent {
                 this.arrayPulsanti = this.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1);
         });
     }
+    // #endregion
     // #region Implementazione ControlValueAccessor ignorabile
     /** @ignore */
     registerOnChange(fn) { this.propagateChange = fn; }
@@ -964,6 +1164,7 @@ class EsTableComponent {
     // #endregion
     /** @ignore */
     writeValue(obj) {
+        var _a;
         this.View = obj ? obj : null;
         // Mi è arrivata l'AppSearch quindi di sicuro non ho una ricerca in progress
         this.researchInProgress = false;
@@ -996,10 +1197,11 @@ class EsTableComponent {
         else if (this.View && this.View instanceof AppSearch) {
             // Se cambia l'oggetto intero significa che ho rimandato la ricerca
             this.setMode('view');
+            let 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);
             }
@@ -1018,55 +1220,136 @@ class EsTableComponent {
                     }
                 }
             }
-            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
-             */
-            let viewCasted = this.View;
-            let isAppSearchWithIppMax = this.viewMode && viewCasted.itemsperpageoverride == this.defaultAllPageOverride;
-            let 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
+     */
+    finalizeContext() {
+        let 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
+         */
+        let isAppSearchWithIppMax = this.viewMode && viewCasted.itemsperpageoverride == this.defaultAllPageOverride;
+        let isAppSearchNoMaxIpp = this.viewMode && viewCasted.itemsperpageoverride != this.defaultAllPageOverride;
+        this.UseEndlessscroll = this.EndlessScroll && (this.arrayMode || isAppSearchWithIppMax || (isAppSearchNoMaxIpp && !this.EndlessScrollOnlyForAll));
+        let hasRowGroups = (viewCasted.groupings && viewCasted.groupings.filter(t => !t.aggregation).length > 0) || (this.arrayMode && this.EsThsDirective.some(t => 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();
+            let 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 (let i = 0; i < this.TMPBoundSource.length; i++) {
+                let 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 (let i = 0; i < this.TMPBoundSource.length; i++) {
-                    let 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 */
+    setupPagingInformations() {
+        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) {
+            let tmpView = this.MainGroupView || this.View;
+            let 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) {
+            let 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
+     */
+    clearSelectionCaches() {
+        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
      *
@@ -1075,6 +1358,8 @@ class EsTableComponent {
      * @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
      */
     getItemsByMode(onlyselected = false, refreshPaging = false, allIfPossible = false) {
         let items = [];
@@ -1082,6 +1367,8 @@ class EsTableComponent {
             items = this.getViewItemsBySource();
         }
         else if (this.arrayMode) {
+            this.View.forEach(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)
@@ -1100,19 +1387,64 @@ class EsTableComponent {
             return items.filter(t => t._selected);
         return items;
     }
-    /** @ignore */
-    getViewItemsBySource() {
-        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
      */
-    getItemSlices() {
-        let items = this.getItemsByMode();
-        if (!items)
-            return [];
+    getViewItemsBySource() {
+        var _a, _b;
+        let castedView = this.View;
+        let groupKeys = castedView.groupings ? castedView.groupings.filter(t => !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) {
+            let ret = castedView.groups;
+            ret.forEach(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 {
+            let 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(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
+     */
+    cacheAggregations(group) {
+        group._aggregationsCache = new Map();
+        let castedAgCache = group._aggregationsCache;
+        for (let i = 0; i < group.aggregations.length; i++) {
+            let agg = group.aggregations[i];
+            if (castedAgCache.has(agg.column))
+                castedAgCache.get(agg.column).set(agg.aggregation, agg.value);
+            else {
+                let 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
+     */
+    getItemSlices() {
+        // Se sono qui di sicuro non ho rowgrouping
+        let items = this.getItemsByMode();
+        if (!items)
+            return [];
         let arrayBy100 = [];
         let slices = Math.ceil(items.length / this.SliceSize);
         for (let i = 0; i < slices; i++) {
@@ -1143,8 +1475,6 @@ class EsTableComponent {
             }
         }
     }
-    // #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
@@ -1154,113 +1484,444 @@ class EsTableComponent {
         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(() => {
-            // 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) {
-                let view = this.View;
-                let ths = this.EsThs && this.EsThs.length > 0 ? this.EsThs.toArray() : this.EsThsDirective && this.EsThsDirective.length > 0 ? this.EsThsDirective.toArray() : [];
-                let 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
-                let 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(() => { 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
      */
-    MoveTemporaryVariablesToRealOnes() {
-        this.RowTDs = this.TMPRowTDs;
-        this.RowTHs = this.TMPRowTHs;
+    internalPostBoundSource() {
+        let View = this.View;
+        let ths = this.EsThs && this.EsThs.length > 0 ? this.EsThs.toArray() : this.EsThsDirective && this.EsThsDirective.length > 0 ? this.EsThsDirective.toArray() : [];
+        let 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) {
+            let view = this.viewMode ? View : null;
+            let itemsAndGroups = this.viewMode ? [...(view.items || []), ...(view.groups || [])] : View;
+            let si = this.viewMode ? view.selection : this.arraymodeSelection;
+            // N.B: Rispettare l'ordine di queste 3 macrocategorie è VITALE
+            // *************************************        Sistemazioni di TH, TD, e visibilità varie      *************************************
+            let 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
+            let items = this.viewMode ? View.items : View;
+            let 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
      */
-    evaluateSelection(items, selectionItem) {
-        if (!selectionItem)
+    arrayModeReviewOrderings() {
+        if (this.arrayOrders.length > 0)
+            this.arrayOrders.forEach(t => {
+                this.boundSource = this.boundSource.sort((a, b) => (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
+     */
+    arrayModeReviewGroupings(ths) {
+        if (ths.length == 0)
             return;
-        this.handleSelectionEvaluation(items, selectionItem);
+        if (this.isEsTh(ths[0]))
+            return;
+        let headerGroups = [];
+        let headerAggregations = [];
+        for (let i = 0; i < ths.length; i++) {
+            let th = ths[i];
+            if (th.thGroup)
+                headerGroups.push(new Group(th.th, 0, ""));
+            else if (th.thAggregation)
+                headerAggregations = [...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 {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
      *
-     * @param {any[]} array Lista di oggetti di cui valutare la selezione in modalità array
+     * @todo: INTERNALDB
      */
-    arrayModeEvaluateSelection(array) {
-        if (array.length == 0)
+    getGroupsRecursive(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(i => i._visible = false);
+        let grp = grps[currentIndex];
+        let ret = [];
+        let last = grps.length == currentIndex + 1;
+        let groups = this.groupBy(items, grp.column);
+        for (let prop in groups) {
+            let itms = groups[prop];
+            let gp = new Group(grp.column, itms.length, prop);
+            gp.aggregations = this.generateAggregations(itms, aggregations);
+            let 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 = [...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.calculateHash([anygp]);
+            this.cacheAggregations(anygp);
+            // Aggiungo il gruppo padre
+            ret.push(anygp);
+            this.rgGroupCache.set(anygp._thisKey, anygp);
+            if (!last) {
+                //Dal gruppo padre, se non è l'ultimo gruppo della catena, calcolo ricorsivamente tutta la catena sotto
+                let subGroupsAndItems = this.getGroupsRecursive(grps, currentIndex + 1, itms, aggregations, anygp);
+                let childgroups = subGroupsAndItems.filter(t => 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(...subGroupsAndItems);
+                this.rgChildGroupsCache.set(anygp._thisKey, childgroups);
+            }
+            else {
+                // Al gruppo padre, se è l'ultimo assegno tutte le foglie assegnandogli anche la chiave del gruppo
+                itms.forEach(i => i._thisKey = anygp._thisKey);
+                ret.push(...itms);
+                this.rgItemCache.set(anygp._thisKey, itms);
+            }
+        }
+        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
+     */
+    generateAggregations(items, aggregations) {
+        let rets = [];
+        let aggregationValue = "", feField = null, stringAgg = null, dateAgg = null, numberAgg = null;
+        for (let i = 0; i < aggregations.length; i++) {
+            let agg = aggregations[i];
+            feField = agg.column;
+            if (!feField)
+                continue;
+            switch (agg.datatype) {
+                case 'string':
+                    stringAgg = items.map(i => i[feField].toString());
+                    break;
+                case 'date':
+                    dateAgg = items.map(i => new Date(i[feField]).getTime());
+                    break;
+                case 'number':
+                    numberAgg = items.map(i => 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(...dateAgg)).toString();
+                            break;
+                        case 'number':
+                            aggregationValue = Math.max(...numberAgg).toString();
+                            break;
+                    }
+                    break;
+                case 'min':
+                    switch (agg.datatype) {
+                        case 'string':
+                            aggregationValue = stringAgg.sort()[0];
+                            break;
+                        case 'date':
+                            aggregationValue = new Date(Math.min(...dateAgg)).toString();
+                            break;
+                        case 'number':
+                            aggregationValue = Math.min(...numberAgg).toString();
+                            break;
+                    }
+                    break;
+                case 'sum':
+                    switch (agg.datatype) {
+                        case 'string':
+                            aggregationValue = stringAgg.join(", ");
+                            break;
+                        case 'date':
+                            aggregationValue = "";
+                            break;
+                        case 'number':
+                            aggregationValue = numberAgg.reduce((pre, curr) => 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
+     */
+    groupBy(array, field) {
+        let ret = {};
+        for (let i = 0; i < array.length; i++) {
+            let 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**
+     */
+    bindDisplayToLoadedItemsOrGroups(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;
+        }
+        let groupingKeys = ((_b = (_a = view.groupings) === null || _a === void 0 ? void 0 : _a.filter(t => !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
      */
-    handleSelectionEvaluation(items, selectionItem) {
-        let allSelected = true;
-        for (let i = 0; i < items.length; i++) {
-            let 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;
+    handleNewDataOnRowGrouping(view, groupingKeys) {
+        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(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"
+            let 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) {
-            let 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
+            */
+            let intermediateGroup = view.requestedgroups.length != groupingKeys;
+            let items = this.boundSource;
+            let insertIndex = 0;
+            let groupKey = "";
+            let groupRoute = [];
+            // 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 (let i = 0; i < view.requestedgroups.length; i++) {
+                let rg = view.requestedgroups[i];
+                groupKey += rg.value;
+                groupRoute.push({ column: rg.column, value: rg.value });
+                insertIndex = items.findIndex((t, i) => i >= insertIndex && t._group && t.column == rg.column && t.value == rg.value);
+            }
+            let itemsCacheReference;
+            let childGroupsCacheReference;
+            // Se non è un gruppo intermedio devo ripulire la cache del gruppo su cui ho attualmente cliccato. Gli oggetti saranno riaggiunti dopo
+            if (!intermediateGroup) {
+                this.rgItemCache.set(groupKey, []);
+                itemsCacheReference = this.rgItemCache.get(groupKey);
+            }
+            else {
+                // Se invece è un gruppo intermedio devo ripulire sia tutti i child group ricorsivamente, sia tutti gli item
+                for (let key of this.rgChildGroupsCache.keys())
+                    if (key.startsWith(groupKey))
+                        this.rgChildGroupsCache.delete(key);
+                for (let key of this.rgItemCache.keys())
+                    if (key.startsWith(groupKey))
+                        this.rgItemCache.delete(key);
+                this.rgChildGroupsCache.set(groupKey, []);
+                childGroupsCacheReference = this.rgChildGroupsCache.get(groupKey);
+            }
+            // 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(itm => {
+                itm._parent = groupKey;
+                itm._parentRoute = groupRoute;
+                itm._thisRoute = itm._group ? [...groupRoute, new GroupRouteFragment(itm.column, itm.value)] : [];
+                itm._thisKey = itm._group ? groupKey + itm.value : groupKey;
+                // Per le ricerca intermedie metto i gruppi nella cache dei gruppi
+                if (intermediateGroup) {
+                    itm._grouplevel = view.requestedgroups.length;
+                    this.rgGroupCache.set(itm._thisKey, itm);
+                    childGroupsCacheReference.push(itm);
+                }
+                else {
+                    // Metto anche gli oggetti nella cache non ricorsiva
+                    itemsCacheReference.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 && view.savedstate) {
+                this.boundSource = this.boundSource.filter(t => !(t._item || t._thisRoute.length > groupRoute.length));
+                this.groupSearchRequestsCache = this.groupSearchRequestsCache.filter(t => !(t.route.length > groupRoute.length));
+            }
+            this.boundSource = this.boundSource.filter(t => !(t._parent == groupKey));
+            let thisGroup = this.boundSource[insertIndex];
+            if (intermediateGroup)
+                thisGroup._groupscount = (_b = this.View) === null || _b === void 0 ? void 0 : _b.groupcount;
+            // Li sostituisco coi nuovi di questa ricerca
+            this.boundSource.splice(insertIndex + 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)
+            let addLast = false;
+            this.boundSource.splice(insertIndex + 1 + (addLast ? this.TMPBoundSource.length : 0), 0, this.getGroupSeparator(view, groupKey, groupRoute, view.requestedgroups.length, intermediateGroup ? 'groups' : 'items'));
+            // Aggiungo la ricerca alla cache di questa "sessione"
+            let toAdd = { path: groupKey, route: groupRoute, view: Object.assign({}, view), group_column: intermediateGroup ? this.TMPBoundSource[0].column : '' };
+            let prev = this.groupSearchRequestsCache.findIndex(t => t.path == toAdd.path && t.group_column == toAdd.group_column);
+            if (prev == -1)
+                this.groupSearchRequestsCache.push(toAdd);
+            else
+                this.groupSearchRequestsCache.splice(prev, 1, toAdd);
         }
     }
+    /**
+     * Metodo richiamato solo quando **TMPRowTDs** e **TMPRowTHs** sono completamente generati ed aggiustati. Serve per collegarli alle variabili usate lato binding HTML
+     */
+    MoveTemporaryVariablesToRealOnes() {
+        this.RowTDs = this.TMPRowTDs;
+        this.RowTHs = this.TMPRowTHs;
+        this.RowThGroups = this.TMPRowThGroups ? this.TMPRowThGroups.reverse() : null;
+        this.Columns.Visibile = this.RowTHs.filter(t => t.Visible).length;
+        this.Columns.VisibleUnpinned = this.RowTHs.filter(t => 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
      */
     setSelectionStatus(items, select) {
         this.handleItemsSelection(items, select);
@@ -1294,7 +1955,7 @@ class EsTableComponent {
      * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
      */
     reviewColumnsList(ths) {
-        this.ColumnsList = [];
+        this.TMPColumnsList = [];
         if (ths.length == 0)
             return;
         // Appena il contentChildren è valorizzato scorro tutti gli header
@@ -1308,18 +1969,99 @@ class EsTableComponent {
                 // 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));
+                    this.TMPColumnsList.push(new EsTableColumn(th.ID, th.Description, th.Visible, th.Fixed, null, null, null));
             }
             else {
+                let column = th.th;
                 // Se non ho un id il th è considerato inerte
-                if (!th.th)
+                if (!column)
                     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.HiddenColumns || th.thVisible) {
+                    let previouslyPinned = !this.ColumnsList || this.ColumnsList.length == 0 || !this.ColumnsList.find(t => t.id == column) ? null : this.ColumnsList.find(t => t.id == column).pinned;
+                    this.TMPColumnsList.push(new EsTableColumn(column, null, th.thVisible, (th.thFixed || th.thGroup), previouslyPinned == null ? th.thPinned : previouslyPinned, th.thPinnedWidth, th.Template));
+                }
             }
         }
+        this.ColumnsList = [];
+        this.TMPColumnsList.forEach(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
+     */
+    moveFixedColumnsAtTheBeginning(ths, tds) {
+        let thsCache = {};
+        let fixeds = 0, pinneds = 0;
+        let columnsCache = {};
+        let columnsIndexCache = {};
+        // Creo la cache delle colonne
+        for (let coli = 0; coli < this.ColumnsList.length; coli++) {
+            let col = this.ColumnsList[coli];
+            columnsCache[col.id] = col;
+        }
+        // Sposto tutti gli header fixed o pinned all'inizio
+        for (let i = 0; i < ths.length; i++) {
+            let 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 (let i = 0; i < ths.length; i++)
+            columnsIndexCache[ths[i].th] = i;
+        // Riordino le celle per fargli mantenere la stessa struttura dei th
+        let newTds = new Array(ths.length);
+        for (let i = 0; i < tds.length; i++) {
+            let item = tds[i];
+            newTds[columnsIndexCache[item.td]] = item;
+        }
+        this.HasPinnedColumns = pinneds > 0;
+    }
+    /**
+     * In base alla configurazione delle colonne calcola le dimenioni delle colonne pinnate
+     */
+    evaluatePinnedColumnsWidth() {
+        if (!this.HasPinnedColumns)
+            return;
+        this.PinnedContainerWidth = 0;
+        for (let i = 0; i < this.ColumnsList.length; i++) {
+            let 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
+     */
+    arrayMove(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
@@ -1328,14 +2070,19 @@ class EsTableComponent {
      * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
      */
     alignColumnsIfLoadedView(view) {
-        let emitChanged = view.savedstate;
+        let emitChanged = this.viewMode && view.savedstate;
         let newColset = [];
         if (!this.ColumnsList || this.ColumnsList.length == 0)
             return;
+        let columns = this.viewMode ? view.columns : this.arrayColumns;
         this.ColumnsList.forEach(c => {
-            let exCl = view.columns.filter(cc => 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
+            let exCl = columns.filter(cc => 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)
@@ -1345,21 +2092,22 @@ class EsTableComponent {
                 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) {
-            let newColList = [];
+        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
-            view.column_ordering.forEach(co => {
-                this.ColumnsList.forEach(c => {
-                    if (c.id == co)
-                        newColList.push(c);
-                });
-            });
+            let newColList = [];
+            view.column_ordering.forEach(co => { this.ColumnsList.forEach(c => { if (c.id == co)
+                newColList.push(c); }); });
             this.ColumnsList = newColList;
         }
         // In ogni caso questo non mi serve più, lo resetto  **
-        view.savedstate = false;
+        if (this.viewMode)
+            view.savedstate = false;
         if (emitChanged)
             this.changed();
     }
@@ -1370,20 +2118,22 @@ class EsTableComponent {
      * @param {'DESC' | 'ASC'} order Nuovo ordine selezionato per la colonna
      */
     thOrderChanged(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;
-        let appSearch = this.View;
+        let orders = this.viewMode ? this.View.orders : this.arrayOrders;
         let orderToAdd = true;
         let orderToRemove = null;
         // Se per qualche motivo il costruttore non è passato (cache tarpate o simila) fixo
-        if (!appSearch.orders)
-            appSearch.orders = [];
-        for (let i = 0; i < appSearch.orders.length; i++) {
-            let t = appSearch.orders[i];
+        if (!orders && this.viewMode)
+            this.View.orders = [];
+        else if (!orders && this.arrayMode)
+            this.arrayOrders = [];
+        for (let i = 0; i < orders.length; i++) {
+            let t = orders[i];
             if (t.id == id) {
                 if (order) {
                     t.order = order;
@@ -1394,27 +2144,46 @@ class EsTableComponent {
             }
         }
         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, 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
      */
-    emitSearchRequest(value) {
-        if (this.viewMode) {
+    emitSearchRequest(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
@@ -1426,16 +2195,19 @@ class EsTableComponent {
      * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
      */
     refreshColumnsVisibility(ths, tds, view) {
-        let columnsCache = {};
         let newColset = [];
         let fixedThs = {};
+        let columnsCache = {};
         for (let coli = 0; coli < this.ColumnsList.length; coli++) {
             let 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
@@ -1448,7 +2220,7 @@ class EsTableComponent {
                 }
                 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;
                 }
             }
@@ -1465,18 +2237,6 @@ class EsTableComponent {
         }
         this.changed();
     }
-    /**
-     *
-     */
-    isEsTd(td) {
-        return !td._directive;
-    }
-    /**
-     *
-     */
-    isEsTh(th) {
-        return !th._directive;
-    }
     /**
      * Allinea gli ordinamenti dati fra le **EsThs** e le informazioni all'interno della View bindata
      *
@@ -1484,30 +2244,28 @@ class EsTableComponent {
      * @param {EsTh[] | EsThDirective[]} ths Colonne della tabella
      */
     alignHeadersOrdering(ths, view) {
-        let researchNeeded = false;
+        let orders = view ? view.orders : this.arrayOrders;
         for (let i = 0; i < ths.length; i++) {
             let 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 (let i = 0; i < view.orders.length; i++) {
-                    let or = view.orders[i];
+                for (let i = 0; i < orders.length; i++) {
+                    let or = orders[i];
                     if (or.id == th.ID)
                         th.Order = or.order;
                 }
             }
             else {
                 th.thOrder = null;
-                for (let i = 0; i < view.orders.length; i++) {
-                    let or = view.orders[i];
+                for (let i = 0; i < orders.length; i++) {
+                    let or = orders[i];
                     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.
@@ -1523,6 +2281,11 @@ class EsTableComponent {
         if (tds.length == 0)
             return;
         let thsCache = {};
+        let columnsCache = {};
+        for (let coli = 0; coli < this.ColumnsList.length; coli++) {
+            let col = this.ColumnsList[coli];
+            columnsCache[col.id] = col;
+        }
         for (let i = 0; i < ths.length; i++) {
             let th = ths[i];
             thsCache[this.isEsTh(th) ? th.ID : th.th] = th;
@@ -1535,11 +2298,11 @@ class EsTableComponent {
             if (this.isEsTd(td)) {
                 let 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;
-                let isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && th.thFixed);
-                let itemToAdd = { ID: td.ID, Visible: td.Visible, Class: td.Class, Content: td.Content, RouterLink: td.RouterLink, Template: td.Template };
+                let isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && (th.thFixed || th.thGroup));
+                let 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 };
                 let ctx = td.Context;
                 if (this.TMPRowTDs[ctx]) {
                     if (isFixed)
@@ -1554,22 +2317,27 @@ class EsTableComponent {
                 }
             }
             else {
-                for (let i = 0; i < this.TMPBoundSource.length; i++) {
-                    let ctx = this.TMPBoundSource[i].hash;
+                for (let i = 0; i < this.boundSource.length; i++) {
+                    let item = this.boundSource[i];
+                    let ctx = item._hash;
                     let key = td.td;
                     let 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) {
-                        let isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && th.thFixed);
-                        let itemToAdd = { ID: key, Visible: td.tdVisible, Class: td.tdClass, Template: td.Template };
+                    if (td.tdIf || (!this.isEsTh(th) && th.thGroup)) {
+                        let thCasted = th;
+                        let isFixed = (this.isEsTh(th) && th.Fixed) || (!this.isEsTh(th) && (th.thFixed || th.thGroup || th.thPinned));
+                        let 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);
@@ -1586,7 +2354,7 @@ class EsTableComponent {
         var errs = [];
         for (let i = 0; i < ths.length; i++) {
             let th = ths[i];
-            if (!th.Referenced)
+            if (!th._referenced)
                 errs.push(this.isEsTh(th) ? th.ID : th.th);
         }
         if (errs.length > 0) {
@@ -1606,78 +2374,444 @@ class EsTableComponent {
     evaluateRowThs(ths) {
         if (ths.length == 0)
             return;
+        let columnsListCache = {};
+        let castedView = this.View;
+        let groupingsUndefined = this.viewMode && (castedView && !castedView.groupings || castedView.groupings.length == 0);
+        for (let i = 0; i < this.ColumnsList.length; i++) {
+            let itm = this.ColumnsList[i];
+            columnsListCache[itm.id] = itm;
+        }
         this.TMPRowTHs = [];
         let fixed = 0;
         for (let i = 0; i < ths.length; i++) {
             let th = ths[i];
             let toAdd;
             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) {
+                let 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)) {
+                    let groupAggregations = this.getGroupAggregations(th);
+                    if (!castedView.groupings)
+                        castedView.groupings = groupAggregations;
+                    else
+                        castedView.groupings.push(...groupAggregations);
+                    this.ResearchNeeded = true;
+                }
+            }
+        }
+    }
+    evaluateHeadersGroupingInfos(ths) {
+        // Pregiro per trovare i parent
+        let parentsCache = {};
+        let thsCache = {};
+        for (let i = 0; i < ths.length; i++) {
+            let 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)
+        let hMaxLevel = 0;
+        let leafs = [];
+        for (let i = 0; i < ths.length; i++) {
+            let 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);
+                let 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**
+     */
+    evaluateHeaderGroups(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
+        let expandedGroups = [];
+        let visibleUnpinnedLeafs = infos.leafs.filter((t) => t.thVisible && !t.thPinned);
+        for (let l = 0; l < infos.groupingLevel; l++) {
+            expandedGroups.push([]);
+            for (let i = 0; i < visibleUnpinnedLeafs.length; i++)
+                expandedGroups[l].push("");
+        }
+        // Ordino le foglie in base agli ordinamenti delle colonne
+        let orderedLeafs = [];
+        for (let i = 0; i < this.OrderDirectives.length; i++) {
+            let 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
+        let currentParent = "";
+        for (let i = 0; i < orderedLeafs.length; i++) {
+            let refTh = orderedLeafs[i];
+            let 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 (let l = 0; l < infos.groupingLevel; l++) {
+                let 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 = "";
+        let currentSpan = 0;
+        this.TMPRowThGroups = [];
+        for (let l = 0; l < expandedGroups.length; l++) {
+            let levelArray = [];
+            this.TMPRowThGroups.push(levelArray);
+            if (this.Selection || this.HasPinnedColumns)
+                levelArray.push({ Span: 1, Template: null, Pinned: this.HasPinnedColumns });
+            for (let h = 0; h < expandedGroups[l].length; h++) {
+                let 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
+     */
+    jumpsToFinalParent(th, thsCache) {
+        let jumps = 0;
+        let 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
+     */
+    getGroupAggregations(th) {
+        let ret = [];
+        // Es: '{min:dd/MM/yyyy} - {max:dd/MM/yyyy}'
+        if (th.thAggregation) {
+            this.getEsThDirectiveListOfAggregations(th).forEach((agg) => {
+                let isdate = agg.format && ['small', 'long', 'verylong'].includes(agg.format);
+                let 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
+     */
+    getEsThDirectiveListOfAggregations(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;
+        let ret = [];
+        let display = th.thAggregation;
+        var matches = display.match(/{[a-zA-Z0-9\/:]*}/gi);
+        if (!matches)
+            return [];
+        matches.forEach(m => {
+            let split = m.split(":");
+            let 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
+     */
+    generateDefaultOrder(ths, view) {
+        if (ths.length == 0)
+            return;
+        let orderings = this.viewMode ? view.column_ordering : this.arrayColumnOrdering;
+        // Genero ordinamento di default da 0 fino a dove deve arrivare. Situazione attuale senza hotpotato
+        if (!orderings || orderings.length == 0) {
+            for (let i = 0; i < ths.length; i++) {
+                let th = ths[i];
+                let order = this.isEsTh(th) ? th.ID : th.th;
+                this.OrderDirectives.push(order);
+            }
+        }
+        else
+            this.OrderDirectives = orderings;
+    }
+    /**
+     * Applica l'ordine specificato alle varie colonne
+     *
+     * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
+     * @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 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
+     */
+    applyOrdering(view, finalize) {
+        // Genero ordinamento per gli header
+        let newHeaders = [];
+        // Se devo finalizzare aggancio tutte le variabili di bind
+        if (finalize) {
+            this.OrderDirectives.forEach(o => {
+                let heaedrItem = this.TMPRowTHs.filter(t => t.ID == o)[0];
+                if (heaedrItem)
+                    newHeaders.push(heaedrItem);
+            });
+            this.TMPRowTHs = newHeaders;
+            // Genero ordinamento per le celle
+            for (let i = 0; i < this.RowContexts.length; i++) {
+                let context = this.TMPRowTDs[this.RowContexts[i]];
+                let newContext = [];
+                this.OrderDirectives.forEach(o => {
+                    let contextItem = context.filter(t => t.ID == o)[0];
+                    newContext.push(contextItem);
+                });
+                this.TMPRowTDs[this.RowContexts[i]] = newContext;
             }
         }
+        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
+     */
+    getGroupSeparator(view, parent, route, level, searches) {
+        let 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
+     */
+    addToPageGroup(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
+     */
+    goToPageGroup(page, pager) {
+        let 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
+     */
+    emitRowGroupingSearches(column, orderings) {
+        // Per tutte le ricerche intermedie che devo rivalutare le re-emitto in modo da aggiornargli i dati
+        var meaningfulAppSearches = this.groupSearchRequestsCache.filter(t => t.group_column == column).map(t => 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(t => !t.group_column).map(t => 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(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**
+     */
+    getGroupCellDisplay(grp, cell, header) {
+        if (grp._sep)
+            return "";
+        let display = header.thAggregation;
+        if (grp.column == cell) {
+            let groupsPart = grp._groupscount ? " - " + grp._groupscount + " " + this.lc.loc("Groups") : "";
+            return grp.value + " (" + grp.count + groupsPart + ")";
+        }
+        else {
+            let agg = grp._aggregationsCache.get(cell);
+            if (!agg)
+                return "";
+            this.getEsThDirectiveListOfAggregations(header).forEach((itm) => {
+                display = display.replace(itm.match, this.formatAggregationValue(agg.get(itm.func), itm.format));
+            });
+            return display;
+        }
     }
     /**
-     * Metodo che genera l'ordine di default delle colonne
+     * Gestisce i click sulla tabella solo per le righe a gruppo.
+     * O rimuove gli elementi attualmente presenti o carica il contenuto del gruppo
      *
-     * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
+     * @param {any} group Gruppo bindato su cui si è effettuato il click
+     *
+     * @returns {boolean} **true** se l'operaizone è andata a buon fine, **false** altrimenti
      */
-    generateDefaultOrder(view) {
-        if (this.TMPRowTHs.length == 0)
+    handleGroupClick(group) {
+        let casted = this.View;
+        let 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) {
+            let allRelatives = this.boundSource.filter(t => (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(t => { t._visible = anyG._expanded; if (t._group)
+                t._expanded = false; });
             return;
-        // 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 (let i = 0; i < this.TMPRowTHs.length; i++)
-                this.OrderDirectives.push(this.TMPRowTHs[i].ID);
         }
-        else
-            this.OrderDirectives = view.column_ordering;
+        if (anyG._expanded) {
+            // Resetto ipp
+            casted.itemsperpageoverride = 15;
+            if (!casted.requestedgroups)
+                casted.requestedgroups = [new GroupFilter(group.column, group.value)];
+            else {
+                let 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((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 {
+            let path = (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(t => !t._parent || !t._parent.startsWith(path));
+            // devo però anche rimuovere eventuali cache relative
+            this.groupSearchRequestsCache = this.groupSearchRequestsCache.filter(t => t.path != path);
+        }
+        return true;
     }
     /**
-     * Applica l'ordine specificato alle varie colonne
+     * Funzione che dato un valore lo formatta in base al tipo
      *
-     * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
-     * @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.
+     * @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
      *
-     * 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
+     * @returns {string} Valore dell'aggregazione formattato come si deve
      */
-    applyOrdering(view, finalize) {
-        // Genero ordinamento per gli header
-        let newHeaders = [];
-        // Se devo finalizzare aggancio tutte le variabili di bind
-        if (finalize) {
-            this.OrderDirectives.forEach(o => {
-                let heaedrItem = this.TMPRowTHs.filter(t => t.ID == o)[0];
-                newHeaders.push(heaedrItem);
-            });
-            this.TMPRowTHs = newHeaders;
-            // Genero ordinamento per le celle
-            for (let i = 0; i < this.RowContexts.length; i++) {
-                let context = this.TMPRowTDs[this.RowContexts[i]];
-                let newContext = [];
-                this.OrderDirectives.forEach(o => {
-                    let contextItem = context.filter(t => t.ID == o)[0];
-                    newContext.push(contextItem);
-                });
-                this.TMPRowTDs[this.RowContexts[i]] = newContext;
-            }
+    formatAggregationValue(value, format) {
+        if (!format)
+            return value;
+        let 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)));
+        let 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
@@ -1688,7 +2822,7 @@ class EsTableComponent {
      */
     sendUp(columnItem) {
         let 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
@@ -1709,6 +2843,25 @@ class EsTableComponent {
         this.TMPColumnsList.forEach(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
+     */
+    pinOrUnpinColumn(columnItem) {
+        let 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 (let 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
      *
@@ -1767,12 +2920,12 @@ class EsTableComponent {
         // Non permetto di non selezionare nulla
         if (this.TMPColumnsList.every(t => !t.visible))
             return false;
-        let castedView = this.View;
+        let castedView = this.viewMode ? this.View : null;
         this.ColumnsList = [];
         this.TMPColumnsList.forEach(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) {
@@ -1784,11 +2937,17 @@ class EsTableComponent {
                 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)) };
+            let columns = this.arrayMode ? this.arrayColumns : castedView.columns;
+            let 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(() => { this.emitSearchRequest(false); });
+        if (this.viewMode)
+            setTimeout(() => { this.emitSearchRequest(false); });
+        else if (this.arrayMode)
+            setTimeout(() => { this.internalWriteValue(); });
         // Lo vorrei mettere lato template ma no
         this.lastSelectedItemID = null;
         return true;
@@ -1797,7 +2956,8 @@ class EsTableComponent {
      * Sul click nella checkbox di selezione globale si scorrono tutte le colonne e si impostano al valore della check globale
      */
     globalColVisCheckChanged() {
-        this.TMPColumnsList.forEach(t => { t.visible = this.globalColVisCheck; });
+        this.TMPColumnsList.forEach(t => { if (!t.fixed)
+            t.visible = this.globalColVisCheck; });
     }
     // #endregion
     // #region Gestione data source gerarchici
@@ -1845,9 +3005,9 @@ class EsTableComponent {
             let 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;
             }
@@ -1857,13 +3017,13 @@ class EsTableComponent {
                 for (let p = 0; p < objs.length; p++) {
                     let 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;
                     }
@@ -1882,12 +3042,12 @@ class EsTableComponent {
             let 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 (let ic = 0; ic < this.boundSource.length; ic++) {
                     let 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;
             }
@@ -1903,7 +3063,7 @@ class EsTableComponent {
             let 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;
@@ -1921,23 +3081,113 @@ class EsTableComponent {
             // 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
+     */
+    evaluateSelection(items, selectionItem) {
+        if (!selectionItem)
+            return;
+        this.handleSelectionEvaluation(items, selectionItem);
+    }
+    /**
+     * 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
+     */
+    handleSelectionEvaluation(items, selectionItem) {
+        for (let i = 0; i < items.length; i++) {
+            let itm = items[i];
+            let hash = itm._hash;
+            let 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(t => t._group || t._item).every(t => 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) {
+            let 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
+     */
+    rehidrateCache(item) {
+        let 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
+     */
+    parentTreeStatus(grp) {
+        if (!grp)
+            return 'none';
+        let 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**
      *
      * @param {boolean} forcedVal Valore forzato di check da assegnare agli oggetti
      */
     globalCheckChanged(forcedVal = null) {
-        let 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
+        let items = this.boundSource.find(t => t._group) ? this.boundSource.filter(t => t._group && !t._parent) : this.boundSource;
         var itemSelection = this.handleItemsSelection(items, forcedVal, this.globalCheck);
         this.changed();
         this.onSelectionChanged.emit(itemSelection);
@@ -1954,14 +3204,14 @@ class EsTableComponent {
      * @returns {ItemsSelection<any>} Oggetto di selezione aggiornato con le informazioni sull'ultima operazione effettuata
      */
     handleItemsSelection(items, forcedVal = null, globalCheck = null) {
-        var _a, _b;
-        let selectionItem = ((_a = this.View) === null || _a === void 0 ? void 0 : _a.selection) || this.arraymodeSelection;
+        var _a, _b, _c;
+        let 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(t => !t._group), false, null);
                 items[0]._selected = true;
             }
         }
@@ -1971,59 +3221,343 @@ class EsTableComponent {
             // 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;
+            let allSelection = si.all;
+            let isGroup = item._group;
+            let isSelection = item._selected;
+            let itemGroup = null, allItems = null, selectedItems = null, unselectedItems = null, allGroups = null, selectedGroups = null, unselectedGroups = null, parentGroupSelected = null, parentGroupUnselected = null;
+            if (isGroup) {
+                let 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(t => !t._selected) && !this.getItemsByMode().some(t => !t._selected);
-        this.finalizeSelectionInformations(selectionItem);
-        return selectionItem;
+            this.globalCheck = !this.boundSource.some(t => !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)
+     */
+    performSimpleSelectionOperations(base, item, group, sel, itm_group, sel_itm, desel_itm, all_itms, all_grps) {
+        let tripticItem = this.getTriptic('item', base);
+        if (group) {
+            if (sel) {
+                all_grps.forEach(gr => { gr._selected = true; });
+                if (desel_itm)
+                    desel_itm.forEach(el => { el._selected = true; this.addItem(el, tripticItem); });
+            }
+            else {
+                all_grps.forEach(gr => { gr._selected = false; });
+                if (sel_itm)
+                    sel_itm.forEach(el => { el._selected = false; this.removeItem(el, tripticItem); });
+            }
+        }
+        else {
+            if (sel) {
+                this.addItem(item, tripticItem);
+                if (itm_group && all_itms && all_itms.every(t => 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
+     */
+    selectGroup(group) {
+        group._selected = true;
+        let parent = this.getGroupParent(group);
+        if (parent && this.getGroupChildGroups(null, parent, null, true).every(t => 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...
+     */
+    performSelectionOperations(base, item, all, group, sel, sel_itm, sel_grp, desel_itm, desel_grp, all_itms, all_grps, parent_incl, parent_excl) {
+        let tripticGroup = this.getTriptic('group', base);
+        let tripticItem = this.getTriptic('item', base);
+        let tripticExcl = this.getTriptic('exclusion', base);
+        let 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(el => this.removeItem(el, tripticItem));
+                if (sel_grp)
+                    sel_grp.forEach(gr => this.removeItem(gr, tripticGroup));
+                if (all_itms)
+                    all_itms.forEach(el => { el._selected = true; this.removeItem(el, tripticExcl); });
+                if (all_grps)
+                    all_grps.forEach(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(el => this.removeItem(el, tripticExcl));
+                if (desel_grp)
+                    desel_grp.forEach(gr => this.removeItem(gr, tripticExcl));
+                if (all_itms)
+                    all_itms.forEach(el => { el._selected = false; this.removeItem(el, tripticItem); });
+                if (all_grps)
+                    all_grps.forEach(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);
+     */
+    removeItem(item, triptic) {
+        let 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
+     */
+    addItem(item, triptic) {
+        if (triptic.index_cache.get(item._hash) == null) {
+            let 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
+     */
+    getTriptic(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
+     */
+    getItemGroup(item) {
+        let 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**
+     */
+    getGroupItems(sel, group, status, recursive = false, allbase = null) {
+        let items = [];
+        if (allbase)
+            items = allbase;
+        else {
+            if (recursive) {
+                // In modalità ricorsiva prendo gli oggetti di tutte le chiavi simili che trovo
+                for (let key of this.rgItemCache.keys())
+                    if (key.startsWith(group._thisKey))
+                        items.push(...this.rgItemCache.get(key));
+            }
+            else
+                items = this.rgItemCache.get(group._thisKey);
+        }
+        items = items.filter(t => !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(t => t != null &&
+                (!recursive && t._thisKey == group._thisKey) ||
+                (recursive && t._thisKey.startsWith(group._thisKey)));
+        else if (status == 'selected')
+            items = sel.items.filter(t => 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
+     */
+    getGroupParent(group) {
+        let 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**
+     */
+    getGroupChildGroups(sel, group, status, recursive = false, allbase = null) {
+        let thisGroup = this.rgGroupCache.get(group._thisKey);
+        let items = [];
+        if (allbase)
+            items = allbase;
+        else {
+            if (recursive) {
+                // In modalità ricorsiva prendo gli oggetti di tutte le chiavi simili che trovo
+                for (let key of this.rgChildGroupsCache.keys())
+                    if (key.startsWith(group._thisKey))
+                        items.push(...this.rgChildGroupsCache.get(key));
+            }
+            else
+                items = this.rgChildGroupsCache.get(group._thisKey);
+        }
+        items = items.filter(t => !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((t) => 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((t) => 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
      */
     finalizeSelectionInformations(selectionItem) {
+        // Dato che le delete sono logiche dato che tengo la cache degli indici devo renderle fisiche
+        let tmpGrp = [], tmpItems = [], tmpExcl = [], tmpGrpExcl = [];
+        let grpRemoved = false, itemsRemoved = false, exclRemoved = false, grpExclRemoved = false;
+        for (let i = 0; i < selectionItem.items.length; i++)
+            if (selectionItem.items[i] != null)
+                tmpItems.push(selectionItem.items[i]);
+            else
+                itemsRemoved = true;
+        for (let i = 0; i < selectionItem.groups.length; i++)
+            if (selectionItem.groups[i] != null)
+                tmpGrp.push(selectionItem.groups[i]);
+            else
+                grpRemoved = true;
+        for (let i = 0; i < selectionItem.exclusions.length; i++)
+            if (selectionItem.exclusions[i] != null)
+                tmpExcl.push(selectionItem.exclusions[i]);
+            else
+                exclRemoved = true;
+        for (let 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(t => 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
+     */
+    compactIndexMap(map) {
+        let index = 0;
+        let ret = new Map();
+        for (let key of map.keys())
+            ret.set(key, index++);
+        return ret;
+    }
     /**
      * Gestisce i click sulla tabella, gestendo eventualmente anche gli Shift + Click per selezionare un range di oggetti
      *
@@ -2042,7 +3576,7 @@ class EsTableComponent {
         let selecteditems = [];
         if (event.shiftKey && this.ShiftClick && !this.SingleSelection) {
             let startSelecting = false;
-            let items = this.getItemsByMode();
+            let items = this.boundSource.filter(t => !t._group && !t._sep);
             for (let i = 0; i < items.length; i++) {
                 let t = items[i];
                 if (startSelecting) {
@@ -2075,8 +3609,10 @@ class EsTableComponent {
      */
     evaluateSelected() {
         var _a;
-        let 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;
+        let si = ((_a = this.View) === null || _a === void 0 ? void 0 : _a.selection) || this.arraymodeSelection;
+        let excByGroup = si.group_exclusions.reduce((prev, curr) => prev + curr.count, 0);
+        let incByGroup = si.groups.reduce((prev, curr) => prev + curr.count, 0);
+        this.selectedObjects = (si.all ? this.BaseItemsCount : incByGroup) - excByGroup + si.items.length - si.exclusions.length;
         return this.selectedObjects;
     }
     /**
@@ -2084,9 +3620,11 @@ class EsTableComponent {
      */
     selectAllOrResetSelection() {
         let 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) {
@@ -2096,7 +3634,7 @@ class EsTableComponent {
         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
@@ -2106,9 +3644,9 @@ class EsTableComponent {
      * @param {number} page Numero di pagine da aggiungere (o sottrarre, se negativo) alla pagina attuale
      */
     addToPage(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;
+        let 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
@@ -2116,21 +3654,35 @@ class EsTableComponent {
      * @param {number} page Pagina a cui navigare
      */
     goToPage(page) {
-        if (!(this.View instanceof AppSearch) && !(this.SearchView instanceof AppSearch) && !(this.View instanceof ReportDefinition))
+        let view = this.MainGroupView ? this.MainGroupView : this.View;
+        if (!view.page || !view.pages)
             return;
-        let appSearchElement = this.SearchView || this.View;
+        let 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);
+        let 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
      */
-    onItemsPerPageChanged() {
-        this.emitSearchRequest(true);
+    onItemsPerPageChanged(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
+     */
+    onGroupItemsPerPageChanged(pager, newIpp) {
+        pager.view.itemsperpageoverride = newIpp;
+        this.emitSearchRequest(true, pager.view);
     }
     // #endregion
     // #region Gestione Export
@@ -2148,6 +3700,10 @@ class EsTableComponent {
             this.ExportFunction((data, 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(() => { this.exportDownloader.nativeElement.click(); });
@@ -2273,12 +3829,12 @@ class EsTableComponent {
      * @returns {any} Router link generato in base al parametri
      */
     generateRouterLink(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 {
             let link = this.getRouterLink(path, parameterProps, item);
-            this.DynamicTableRouterLinkCache[item.hash + path] = link;
+            this.DynamicTableRouterLinkCache[item._hash + path] = link;
             return link;
         }
     }
@@ -2376,6 +3932,14 @@ class EsTableComponent {
     }
     // #endregion
     // #region Metodi di utilità
+    /** Helper che identifica se il td attuale è di tipo **EsTd**. In caso contrario è da considerarsi **EsTdDirective** */
+    isEsTd(td) {
+        return !td._directive;
+    }
+    /**  Helper che identifica se il th attuale è di tipo **EsTh**. In caso contrario è da considerarsi **EsThDirective** */
+    isEsTh(th) {
+        return !th._directive;
+    }
     /** Impostazione modalità dell'EsTable */
     setMode(mode) {
         this.viewMode = mode == 'view';
@@ -2388,7 +3952,8 @@ class EsTableComponent {
         }
     }
     /**
-     * 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
      */
     internalWriteValue() {
         this.internalWriteCall = true;
@@ -2452,11 +4017,13 @@ class EsTableComponent {
         for (let i = 0; i < items.length; i++) {
             let 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;
-            let hash = this.hashExts.hashObject(item);
+            let tmp = Object.assign({}, items[i]);
+            delete tmp._selected;
+            delete tmp._visible;
+            delete tmp._hash;
+            let 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] : "");
         }
     }
     /**
@@ -2484,18 +4051,22 @@ EsTableComponent.decorators = [
                 viewProviders: [{ provide: LocalizationService, useClass: EsTableLoc }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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=\"btn est-page-sel {{p.cssClass}}\" (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;border:none;border-radius:15px}.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 = () => [
     { type: NgControl, decorators: [{ type: Self }, { type: Optional }] },
     { type: PreferencesService, decorators: [{ type: Optional }] },
+    { type: EsTableDefaultable, decorators: [{ type: Optional }, { type: Inject, args: [EST_DEFAULTS,] }] },
+    { type: String, decorators: [{ type: Optional }, { type: Inject, args: [EST_LOCALE,] }] },
     { type: LocalizationService },
     { type: ChangeDetectorRef },
     { type: HashingService },
     { type: UtilityService },
-    { type: ExportService }
+    { type: ExportService },
+    { type: DateService },
+    { type: MessageService }
 ];
 EsTableComponent.propDecorators = {
     EsTdsDirective: [{ type: ContentChildren, args: [EsTdDirective,] }],
@@ -2514,7 +4085,7 @@ EsTableComponent.propDecorators = {
     CellActionPropagates: [{ type: Input }],
     UseCustomCells: [{ type: Input }],
     MaxHeight: [{ type: Input }],
-    Class: [{ type: Input }],
+    ContainerClass: [{ type: Input }],
     XLSXExport: [{ type: Input }],
     CSVExport: [{ type: Input }],
     AllSearch: [{ type: Input }],
@@ -2525,14 +4096,12 @@ EsTableComponent.propDecorators = {
     RemovalCondition: [{ type: Input }],
     Export: [{ type: Input }],
     ShiftClick: [{ type: Input }],
-    ShowPaging: [{ type: Input }],
     HidePaging: [{ type: Input }],
     HidePagingCount: [{ type: Input }],
     HidePagingButtons: [{ type: Input }],
     ContextMenu: [{ type: Input }],
     ExportFileName: [{ type: Input }],
     TableClass: [{ type: Input }],
-    CountLabel: [{ type: Input }],
     ExportFunction: [{ type: Input }],
     HasHeaderGroup: [{ type: Input }],
     HasSecondaryHeaderGroup: [{ type: Input }],
@@ -2558,9 +4127,12 @@ EsTableComponent.propDecorators = {
     OwnKey: [{ type: Input }],
     StartsExpanded: [{ type: Input }],
     SavePreferences: [{ type: Input }],
+    PagingStyle: [{ type: Input }],
+    RowGroupingPagingStyle: [{ type: Input }],
     SecondarySource: [{ type: Input }],
     TertiarySource: [{ type: Input }],
     UseSelectionCache: [{ type: Input }],
+    ShowItemGroupsColumns: [{ type: Input }],
     onOrderChanged: [{ type: Output }],
     onSearchRequest: [{ type: Output }],
     onSelectionChanged: [{ type: Output }],
@@ -2574,22 +4146,18 @@ EsTableComponent.propDecorators = {
     ArraymodeItemsPerPage: [{ type: Input }]
 };
 
-/**
- * Modello di configurazione per L'EsTable
- */
+/** Modello di configurazione per L'EsTable */
 class EsTableModuleConfig {
 }
 
-/**
- * Classe di localizzazione per il componente **TablePagerComponent**
- */
+/** Classe di localizzazione per il componente **TablePagerComponent** */
 class TablePagerLoc extends LocalizationService {
-    /**
-     * @ignore
-     */
+    /** @ignore */
     constructor(LOC_LOCALE) {
         super(LOC_LOCALE !== null && LOC_LOCALE !== void 0 ? LOC_LOCALE : 'it-IT');
         super.set("en->it", "All", ["Tutto"]);
+        super.set("en->it", "Shown Elements", ["Elementi visualizzati"]);
+        super.set("en->it", "Shown Groups", ["Gruppi visualizzati"]);
         super.set("en->it", "Are you sure you want to retrieve all results?", ["Si è sicuri di voler caricare tutti i risultati?"]);
         super.set("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"]);
     }
@@ -2602,32 +4170,35 @@ TablePagerLoc.ctorParameters = () => [
 ];
 
 // Angular
-/**
- * Componente che si occupa della paginazione di una tabella
- */
+/** Componente che si occupa della paginazione di una tabella */
 class TablePagerComponent {
-    /**
-     * @ignore
-     */
-    constructor(msgExts, lc) {
+    /** @ignore */
+    constructor(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 EventEmitter();
+        /** Opzioni di paginazione */
+        this.PagingOptions = [10, 15, 30, 45, 100];
+    }
+    ngOnInit() {
+        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.
@@ -2638,30 +4209,48 @@ class TablePagerComponent {
      */
     choice(pageSize) {
         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"), () => { 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"), () => { this.pagingSelected.emit(pageSize); this.Model = pageSize; }, () => {
+                // Dio solo sa perché mi tocca fare sta roba... qui dentro per qualche motivo la CD non prende
+                let prevModel = this.Model;
+                this.Model = null;
+                this.cdr.detectChanges();
+                this.Model = prevModel;
+                this.cdr.detectChanges();
+            });
         }
-        else
+        else {
             this.pagingSelected.emit(pageSize);
+            this.Model = pageSize;
+        }
     }
 }
 TablePagerComponent.decorators = [
     { type: Component, args: [{
                 selector: "app-paging",
                 viewProviders: [{ provide: 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: "<ng-container *ngIf=\"!Hidden\">\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>\r\n</ng-container>",
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: 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 = () => [
     { type: MessageService },
-    { type: LocalizationService }
+    { type: LocalizationService },
+    { type: ChangeDetectorRef },
+    { type: String, decorators: [{ type: Optional }, { type: Inject, args: [EST_LOCALE,] }] }
 ];
 TablePagerComponent.propDecorators = {
     CurrentPageSize: [{ type: Input }],
     View: [{ type: Input }],
-    Hidden: [{ type: Input }],
     WarnOnAll: [{ type: Input }],
     AllSearch: [{ type: Input }],
     DefaultAll: [{ type: Input }],
+    GroupMode: [{ type: Input }],
+    GroupCount: [{ type: Input }],
+    ShowCount: [{ type: Input }],
+    PagerCount: [{ type: Input }],
+    Hidden: [{ type: Input }],
     pagingSelected: [{ type: Output }]
 };
 
@@ -2670,7 +4259,8 @@ class EsTableModule {
         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 }
             ]
         };
     }
@@ -2685,7 +4275,9 @@ EsTableModule.decorators = [
                     ModalModule,
                     BsDropdownModule,
                     CsvModule,
-                    ContextMenuModule
+                    ContextMenuModule,
+                    MatSelectModule,
+                    MatInputModule
                 ],
                 declarations: [EsTh, EsTd, EsTableComponent, EsTdDirective, EsThDirective, TablePagerComponent],
                 providers: [UtilityService, ExportService, HashingService, MessageService],
@@ -2701,5 +4293,5 @@ EsTableModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AppOrdering, AppSearch, CornerMenuOption, EsTableColumn, EsTableColumnsDefinition, EsTableComponent, EsTableModule, EsTableModuleConfig, EsTableOperationDefinition, EsTd, EsTh, GenericItem, ItemsSelection, ReportColumn, ReportDefinition, ReportOrder, ReportParam, ReportResult, ReportRow, EsTableLoc as ɵa, EST_LOCALE as ɵb, EsTdDirective as ɵc, EsThDirective as ɵd, TablePagerComponent as ɵe, TablePagerLoc as ɵf };
+export { AppOrdering, AppSearch, CornerMenuOption, EsTableColumnsDefinition, EsTableComponent, EsTableDefaultable, EsTableModule, EsTableModuleConfig, EsTableOperationDefinition, EsTd, EsTh, GenericItem, Group, GroupAggregation, GroupFilter, GroupOrAggregation, ItemsSelection, ReportColumn, ReportDefinition, ReportOrder, ReportParam, ReportResult, ReportRow, EsTableLoc as ɵa, EST_LOCALE as ɵb, EST_DEBUG as ɵc, EST_DEFAULTS as ɵd, EsTdDirective as ɵe, EsThDirective as ɵf, TablePagerComponent as ɵg, TablePagerLoc as ɵh };
 //# sourceMappingURL=esfaenza-es-table.js.map