@esfaenza/es-table 11.2.122 → 11.2.123

package/fesm2015/esfaenza-es-table.js

@@ -12,7 +12,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FormsAndValidationsModule } from '@esfaenza/forms-and-validations';
-import { DomSanitizer } from '@angular/platform-browser';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ContextMenuModule } from '@esfaenza/ngx-contextmenu';
@@ -195,6 +194,21 @@ class AppSearch {
     }
 }
 
+/** Classe che rappresenta le informazioni di paginazione della tabella attuale */
+class PagerInfos {
+    constructor() {
+        this.PagerCount = null;
+        this.ShowCount = true;
+        this.ShowPaging = true;
+        this.ShowButtons = true;
+        this.ShowPagingOptions = true;
+        this.UsesView = true;
+        this.View = null;
+        this.Ready = false;
+        this.Searches = 'items';
+    }
+}
+
 /** Identifica una selezione applicabile agli oggetti presentati in una tabella */
 class ItemsSelection {
     /**
@@ -340,6 +354,8 @@ class EsThDirective {
         this.thType = null;
         /** Sorgente dei valori disponibili per questa cella se il **Type** è di tipo 'enum' */
         this.thSource = null;
+        /** Opzioni da applicare all'editor di questa colonna */
+        this.thEditorOptions = {};
     }
 }
 EsThDirective.decorators = [
@@ -373,7 +389,12 @@ EsThDirective.propDecorators = {
     thStaticContent: [{ type: Input }],
     thBackgroundColor: [{ type: Input }],
     thAlignment: [{ type: Input }],
-    thFormat: [{ type: Input }]
+    thFormat: [{ type: Input }],
+    thEditorName: [{ type: Input }],
+    thEditorOptions: [{ type: Input }],
+    thRendererName: [{ type: Input }],
+    thRoutePath: [{ type: Input }],
+    thRouteParameterProperties: [{ type: Input }]
 };
 
 /** Direttiva che rappresenta il template dell'editor di una cella all'interno della tabella */
@@ -600,7 +621,7 @@ class EsTableColumn {
      * @param {boolean} pinned Indica se è una colonna pinnata
      * @param {number} pinnedWidth Indica la dimensione da assegnare a questa colonna quando è pinnata
      * @param {TemplateRef<any>} template Indica il template da usare per mostrare il testo dell'Header
-     * @param {{ tmpl: TemplateRef<any>, content: string }[]} parentTemplates Indica la lista di template padri collegata a questo header, rappresentati come Template o come stringa qualora fosse generato automaticamente (caso **Multi**)
+     * @param {{ id: string, tmpl: TemplateRef<any>, content: string }[]} parentTemplates Indica la lista di template padri collegata a questo header, rappresentati come Template o come stringa qualora fosse generato automaticamente (caso **Multi**)
      * @param {boolean} multi Indica che la colonna deriva da una direttiva **Multi**
      * @param {string} multiContent Indica il contenuto della direttiva **Multi** per questa colonna
      */
@@ -1073,7 +1094,7 @@ class ColumnMetadataHandler {
             return;
         /****** STEP 1: 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);
+        let visibleUnpinnedLeafs = infos.leafs.filter((t) => t.thVisible && t.thIf && !t.thPinned);
         for (let l = 0; l < infos.groupingLevel; l++) {
             expandedGroups.push([]);
             for (let i = 0; i < visibleUnpinnedLeafs.length; i++)
@@ -1083,7 +1104,7 @@ class ColumnMetadataHandler {
         let orderedLeafs = [];
         for (let i = 0; i < this.est.OrderDirectives.length; i++) {
             let leaf = infos.thsCache[this.est.OrderDirectives[i]];
-            if (leaf.thVisible && !leaf.thPinned)
+            if (leaf.thVisible && leaf.thIf && !leaf.thPinned)
                 orderedLeafs.push(leaf);
         }
         /****** STEP 3: Creo l'array group con tutti i riferimenti del caso ******/
@@ -1107,7 +1128,7 @@ class ColumnMetadataHandler {
                 }
             }
         }
-        /****** STEP 4: Compatto nell'elemento finale su cui bindarmi ******/
+        /****** STEP 4: Compatto nell'elemento finale su cui bindarmi. L'ID assegnato è SOLO per ottimizzare gli ngFor ******/
         currentParent = "";
         let currentSpan = 0;
         let finalHeaders = [];
@@ -1115,25 +1136,25 @@ class ColumnMetadataHandler {
             let levelArray = [];
             finalHeaders.push(levelArray);
             if (this.est.Selection || this.est.HasPinnedColumns)
-                levelArray.push({ Span: 1, Template: null, Pinned: this.est.HasPinnedColumns });
+                levelArray.push({ ID: "_base_sel_pinned", Span: 1, Template: null, Pinned: this.est.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, Content: currentParent ? infos.thsCache[currentParent]._multi_content : null, Borders: !!currentParent });
+                        levelArray.push({ ID: `${currentParent ? infos.thsCache[currentParent].th : 'noth'}_${currentSpan}`, Span: currentSpan, Template: currentParent ? infos.thsCache[currentParent].Template : null, Content: currentParent ? infos.thsCache[currentParent]._multi_content : 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, Content: currentParent ? infos.thsCache[currentParent]._multi_content : null, Borders: !!currentParent });
+            levelArray.push({ ID: `${currentParent ? infos.thsCache[currentParent].th : 'noth'}_${currentSpan}`, Span: currentSpan, Template: currentParent ? infos.thsCache[currentParent].Template : null, Content: currentParent ? infos.thsCache[currentParent]._multi_content : null, Borders: !!currentParent });
             // Aggiungo i pezzettini per la rimozione e gli export, se presenti
             if (this.est.Removal)
-                levelArray.push({ Span: 1, Template: null });
+                levelArray.push({ ID: "_base_removal", Span: 1, Template: null });
             if (this.est.Export || this.est.HiddenColumns || this.est.ColumnsOrdering || this.est.CornerMenuOptions)
-                levelArray.push({ Span: 1, Template: null });
+                levelArray.push({ ID: "_base_extra_opts", Span: 1, Template: null });
             currentSpan = 0;
             currentParent = "";
         }
@@ -1169,9 +1190,9 @@ class ColumnMetadataHandler {
             if (parent) {
                 th = thsCache[parent];
                 if (!th.thEmpty && !th._multi_content)
-                    parentsPrepend.unshift({ tmpl: th.Template });
+                    parentsPrepend.unshift({ id: th.th, tmpl: th.Template });
                 else if (!th.thEmpty && th._multi_content)
-                    parentsPrepend.unshift({ content: th._multi_content });
+                    parentsPrepend.unshift({ id: th.th, content: th._multi_content });
                 jumps++;
             }
         } while (parent);
@@ -1232,7 +1253,9 @@ class ColumnMetadataHandler {
                 let newContext = [];
                 this.est.OrderDirectives.forEach(o => {
                     let contextItem = context.filter(t => t.ID == o)[0];
-                    newContext.push(contextItem);
+                    // potrebbe esser undefined nel caso ci fossero colonne sotto thIf
+                    if (contextItem)
+                        newContext.push(contextItem);
                 });
                 this.est.TMPRowTDs[this.est.RowContexts[i]] = newContext;
             }
@@ -1448,7 +1471,7 @@ class EsTableColumnsDefinition {
      * @param {string} EditorName Nome dell'editor da utilizzare per la modifica di questo campo
      * @param {string} RendererName Nome del renderer da utilizzare per visualizzare questo campo
      */
-    constructor(Description, PropertyName, RoutePath = null, RouteParameterProperties = null, DataOrder = null, ColumnOrder = null, Visible = true, Clss = null, Orderable = true, HeaderWraps = false, PropertyType = null, PropertySource = [], EditorName = "", RendererName = "", EditorOptions = {}, Pinned = false, Grouping = "") {
+    constructor(Description, PropertyName, RoutePath = null, RouteParameterProperties = null, DataOrder = null, ColumnOrder = null, Visible = true, Clss = null, Orderable = true, HeaderWraps = false, PropertyType = null, PropertySource = [], EditorName = "", RendererName = "", EditorOptions = {}, Pinned = false, PinnedWidth = 150, Pinnable = true, Grouping = "") {
         this.Description = Description;
         this.PropertyName = PropertyName;
         this.RoutePath = RoutePath;
@@ -1465,8 +1488,9 @@ class EsTableColumnsDefinition {
         this.RendererName = RendererName;
         this.EditorOptions = EditorOptions;
         this.Pinned = Pinned;
+        this.PinnedWidth = PinnedWidth;
+        this.Pinnable = Pinnable;
         this.Grouping = Grouping;
-        this.edits = {};
     }
     static build(parsObj) {
         return new EsTableColumnsDefinition(parsObj.Description, parsObj.PropertyName, parsObj.RoutePath, parsObj.RouteParameterProperties, parsObj.DataOrder, parsObj.ColumnOrder, parsObj.Visible || true, parsObj.Clss, parsObj.Orderable || true, parsObj.HeaderWraps, parsObj.PropertyType, parsObj.PropertySource, parsObj.EditorName, parsObj.RendererName, parsObj.Pinned, parsObj.Grouping);
@@ -1479,42 +1503,6 @@ class DynamicModeHandler {
     constructor(est) {
         this.est = est;
     }
-    /**
-     * Metodo di supporto alla creazione di un router link parametrizzato all'oggetto corrente utilizzato nella modalità dinamica
-     *
-     * @param {string} path Path su cui navigare con eventuali parametri riferiti all'oggetto cotnestuale come {0}, {1}, ecc...
-     * @param {string[]} parameterProps Lista posizionale delle proprietà a cui bindare i riferimenti del parametro **path**
-     * Es. Il valore dela proprietà all'indice 0 di questo array verrà sostituita al valore {0} del parametro **path**
-     * @param {GenericItem} item Oggetto generico collegato a questo contesto
-     *
-     * @returns {any} Router link generato in base al parametri
-     */
-    generateRouterLink(path, parameterProps, item) {
-        if (this.est.DynamicTableRouterLinkCache[item._hash + path]) {
-            return this.est.DynamicTableRouterLinkCache[item._hash + path];
-        }
-        else {
-            let link = this.getRouterLink(path, parameterProps, item);
-            this.est.DynamicTableRouterLinkCache[item._hash + path] = link;
-            return link;
-        }
-    }
-    /**
-     * Crea un router link
-     *
-     * @param {string} path Path su cui navigare con eventuali parametri riferiti all'oggetto cotnestuale come {0}, {1}, ecc...
-     * @param {string[]} pars Lista posizionale delle proprietà a cui bindare i riferimenti del parametro **path**
-     * Es. Il valore dela proprietà all'indice 0 di questo array verrà sostituita al valore {0} del parametro **path**
-     * @param {GenericItem} item Oggetto generico collegato a questo contesto
-     *
-     * @returns {any} Router link generato in base al parametri
-     */
-    getRouterLink(path, pars, item) {
-        for (let i = 0; i < pars.length; i++)
-            path = path.replace('{' + i + '}', item.properties[pars[i]]);
-        path = path.replace(/'/g, '"').replace(/ /g, '');
-        return JSON.parse(path);
-    }
     /** Se non ho l'Input **DynamicRowColumnsDefinition** in modalità dinamica lo riempio con il default nome della colonna = testo della colonna */
     eventuallyReviewDynamicColumns() {
         // Senza oggetti esco
@@ -1533,6 +1521,61 @@ class DynamicModeHandler {
         else
             this.est.UserDefinedDynamicCols = true;
     }
+    /** Genera partendo dalle **DynamicRowColumnsDefinition** la lista di **EsThDirective** e **EsTdDirective** che servono per la tabella */
+    emitThsAndTdsBasedOnDynamicDefinition() {
+        // Senza dynamic columns esco
+        if (!this.est.DynamicRowColumnsDefinition || this.est.DynamicRowColumnsDefinition.length == 0)
+            return null;
+        let ths = [];
+        let tds = [];
+        for (let i = 0; i < this.est.DynamicRowColumnsDefinition.length; i++) {
+            let col = this.est.DynamicRowColumnsDefinition[i];
+            ths.push(this.getTh(col));
+            tds.push(this.getTd(col));
+        }
+        return { ths, tds };
+    }
+    /** @ignore Helper */
+    getTh(col) {
+        var ret = new EsThDirective(null);
+        ret.th = col.PropertyName;
+        ret.thPinned = col.Pinned;
+        ret.thPinnable = col.Pinnable;
+        ret.thPinnedWidth = col.PinnedWidth;
+        ret.thVisible = col.Visible;
+        ret.thOrder = col.DataOrder;
+        ret.thOrderable = col.Orderable;
+        ret.thWrap = col.HeaderWraps;
+        ret.thClass = col.Clss;
+        ret.thProperty = col.PropertyName;
+        ret.thType = col.PropertyType;
+        ret.thSource = col.PropertySource;
+        ret.thEditorName = col.EditorName;
+        ret.thEditorOptions = col.EditorOptions;
+        ret.thRendererName = col.RendererName;
+        ret.thRoutePath = col.RoutePath;
+        ret.thRouteParameterProperties = col.RouteParameterProperties;
+        //ret.thFixed = col.Fixed;
+        //ret.thResizable = col.Resizable;
+        //ret.thGroupClass = col.GroupClass;
+        //ret.thGroup = col.Group;
+        //ret.thAggregation = col.Aggregation;
+        //ret.thMulti = col.Multi;
+        //ret.thStaticContent = col.StaticContent;
+        //ret.thBackgroundColor = col.BackgroundColor;
+        //ret.thAlignment = col.Alignment;
+        //ret.thFormat = col.Format;
+        return ret;
+    }
+    /** @ignore Helper */
+    getTd(col) {
+        var ret = new EsTdDirective(null);
+        ret.td = col.PropertyName;
+        ret.tdClass = col.Clss;
+        //ret.tdAlignment = col.Alignment;
+        //ret.tdFormat = col.Format;
+        return ret;
+    }
 }
 
 /** Classe contenente la gestione della modalità gerarchica */
@@ -3079,65 +3122,61 @@ class SelectionHandler {
      * @param {{ row: number, column: number }} firstSelectionOverride Permette di overridare il primo elemento selezionato
      */
     singleCellSelection(event, row, column, firstSelectionOverride) {
+        // Recupero la selezione precedente se presente come punto di partenza
         var first = firstSelectionOverride || this.lastSingleSelection;
+        //Il punto di arrivo, che diventerà il prossimo punto di partenza, è la selezione corrente
+        this.lastSingleSelection = { row, column };
         this.clearTextSelection(event);
-        // Nella selezione a range chissene frega se c'è o meno lo shift, si ragiona sempre a range
-        if (event.shiftKey && first) {
-            this.clearSelectionStatus({ row, column });
-            let rowAddition = row < first.row ? -1 : +1;
-            let columnAddition = column < first.column ? -1 : +1;
-            for (let ir = first.row; ir != row + rowAddition; ir += rowAddition) {
-                let firstRow = ir == first.row;
-                let lastRow = ir == row;
-                for (let ic = first.column; ic != column + columnAddition; ic += columnAddition) {
-                    let firstCol = ic == first.column;
-                    let lastCol = ic == column;
-                    this.est.selectionStatus[ir][ic].selected = true;
-                    this.est.selectionStatus[ir][ic].lborder = columnAddition > 0 ? firstCol : lastCol;
-                    if (ic > 0)
-                        this.est.selectionStatus[ir][ic - 1].roverlaps = this.est.selectionStatus[ir][ic].lborder;
-                    this.est.selectionStatus[ir][ic].tborder = rowAddition > 0 ? firstRow : lastRow;
-                    this.est.selectionStatus[ir][ic].rborder = columnAddition > 0 ? lastCol : firstCol;
-                    if (this.est.selectionStatus[ir][ic + 1])
-                        this.est.selectionStatus[ir][ic + 1].loverlaps = this.est.selectionStatus[ir][ic].rborder;
-                    this.est.selectionStatus[ir][ic].bborder = rowAddition > 0 ? lastRow : firstRow;
-                }
-            }
-            this.lastSingleSelection = { row, column };
-        }
-        else {
-            // Ripulisco escludendo l'oggetto attuale che eventualmente ci penso io a deseezionare
-            this.clearSelectionStatus({ row, column });
-            let item = this.est.selectionStatus[row][column];
-            item.selected = !item.selected;
-            item.lborder = item.selected;
-            if (column > 0)
-                this.est.selectionStatus[row][column - 1].roverlaps = item.lborder;
-            item.tborder = item.selected;
-            item.rborder = item.selected;
-            if (this.est.selectionStatus[row][column + 1])
-                this.est.selectionStatus[row][column + 1].loverlaps = item.rborder;
-            item.bborder = item.selected;
-            this.lastSingleSelection = { row, column };
-        }
+        this.clearSelectionStatusExcluding(this.lastSingleSelection);
+        this.setSelectionStatusBorders(event.range && first ? first : this.lastSingleSelection, this.lastSingleSelection);
         // Ora che non è attaccato direttamente all'html devo fare un markforcheck finite le operazioni sui grouping
         this.est.cdr.markForCheck();
     }
+    setSelectionStatusBorders(from, to) {
+        let rowAddition = to.row < from.row ? -1 : +1;
+        let columnAddition = to.column < from.column ? -1 : +1;
+        let singleItem = from == to;
+        for (let ir = from.row; ir != to.row + rowAddition; ir += rowAddition) {
+            let firstRow = ir == from.row;
+            let lastRow = ir == to.row;
+            for (let ic = from.column; ic != to.column + columnAddition; ic += columnAddition) {
+                let firstCol = ic == from.column;
+                let lastCol = ic == to.column;
+                let current = this.est.selectionStatus[ir][ic];
+                let prevColumn = ic > 0 ? this.est.selectionStatus[ir][ic - 1] : null;
+                let nextcolumn = this.est.selectionStatus[ir][ic + 1];
+                let prevRow = ir > 0 ? this.est.selectionStatus[ir - 1][ic] : null;
+                let nextRow = this.est.selectionStatus[ir + 1] ? this.est.selectionStatus[ir + 1][ic] : null;
+                current.selected = singleItem ? !current.selected : true;
+                current.lborder = !current.selected ? false : columnAddition > 0 ? firstCol : lastCol;
+                current.tborder = !current.selected ? false : rowAddition > 0 ? firstRow : lastRow;
+                current.rborder = !current.selected ? false : columnAddition > 0 ? lastCol : firstCol;
+                current.bborder = !current.selected ? false : rowAddition > 0 ? lastRow : firstRow;
+                if (prevRow)
+                    prevRow.boverlaps = current.tborder;
+                if (nextRow)
+                    nextRow.toverlaps = current.bborder;
+                if (prevColumn)
+                    prevColumn.roverlaps = current.lborder;
+                if (nextcolumn)
+                    nextcolumn.loverlaps = current.rborder;
+            }
+        }
+    }
     /**
      * Helper per ripulire lo stato di selezione delle singole celle della tabella, ad esclusione di una singola coordinata
      *
      * @param {{row: number, column: number}} exclusion Coordinata da escludere nella pulizia
      */
-    clearSelectionStatus(exclusion) {
+    clearSelectionStatusExcluding(exclusion) {
         for (let row in this.est.selectionStatus) {
             for (let column in this.est.selectionStatus[row]) {
-                if (!exclusion || (exclusion && (row != exclusion.row.toString() || column != exclusion.column.toString()))) {
-                    this.est.selectionStatus[row][column].selected = false;
-                    this.est.selectionStatus[row][column].lborder = false;
-                    this.est.selectionStatus[row][column].tborder = false;
-                    this.est.selectionStatus[row][column].rborder = false;
-                    this.est.selectionStatus[row][column].bborder = false;
-                }
+                // Se è l'elemento che ho escluso dal cleanup, skippo
+                if (exclusion && row == exclusion.row.toString() && column == exclusion.column.toString())
+                    continue;
+                // Altrimenti pulisco
+                let curr = this.est.selectionStatus[row][column];
+                curr.selected = curr.lborder = curr.rborder = curr.tborder = curr.bborder = curr.loverlaps = curr.roverlaps = curr.toverlaps = curr.boverlaps = false;
             }
         }
     }
@@ -3167,10 +3206,10 @@ class SelectionHandler {
      */
     clearTextSelection(event) {
         // Seleziono del testo ma non ho shift premuto -> ignoro la selezione
-        if ((event.view.getSelection().type == 'Range' || event.view.getSelection().toString().length > 0) && !event.shiftKey)
+        if ((event.view.getSelection().type == 'Range' || event.view.getSelection().toString().length > 0) && !event.range)
             return false;
         // Seleziono del testo e ho shift premuto -> annullo la selezione del testo
-        if ((event.view.getSelection().type == 'Range' || event.view.getSelection().toString().length > 0) && event.shiftKey)
+        if ((event.view.getSelection().type == 'Range' || event.view.getSelection().toString().length > 0) && event.range)
             this.est.utiExts.clearTextSelection();
     }
     /**
@@ -3316,10 +3355,7 @@ class UtilitiesHandler {
             for (let i = min; i <= max; i++)
                 if (i !== 1)
                     result.push({ val: i, cssClass: (i === page ? 'btn-main app-white-text' : 'app-white-button') });
-            result.push({
-                val: lastPage,
-                cssClass: (lastPage === page ? 'btn-main app-white-text' : 'app-white-button')
-            });
+            result.push({ val: lastPage, cssClass: (lastPage === page ? 'btn-main app-white-text' : 'app-white-button') });
         }
         return result;
     }
@@ -3394,15 +3430,35 @@ class CopyPasteDetector {
         });
     }
 }
+CopyPasteDetector.ɵprov = ɵɵdefineInjectable({ factory: function CopyPasteDetector_Factory() { return new CopyPasteDetector(); }, token: CopyPasteDetector, providedIn: "root" });
 CopyPasteDetector.decorators = [
-    { type: Injectable }
+    { type: Injectable, args: [{ providedIn: "root" },] }
 ];
 CopyPasteDetector.ctorParameters = () => [];
 
+/** Classe che fornisce dei metodi di estensione in grado di riconoscere e dispatchare l'evento copia e incolla lanciato su una pagina web */
+class Logger {
+    /** @ignore */
+    constructor(debugMode) {
+        this.debugMode = debugMode;
+    }
+    log(text) {
+        if (this.debugMode)
+            console.log("[@esfaenza/es-table @ " + (new Date()).toISOString() + "] " + text);
+    }
+}
+Logger.ɵprov = ɵɵdefineInjectable({ factory: function Logger_Factory() { return new Logger(ɵɵinject(EST_DEBUG, 8)); }, token: Logger, providedIn: "root" });
+Logger.decorators = [
+    { type: Injectable, args: [{ providedIn: "root" },] }
+];
+Logger.ctorParameters = () => [
+    { type: Boolean, decorators: [{ type: Optional }, { type: Inject, args: [EST_DEBUG,] }] }
+];
+
 /** Componente che permette di rappresentare una griglia di valori */
 class EsTableComponent {
     /** @ignore */
-    constructor(ngControl, prefService, deafults, locale, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts, copyPasteDetector, clipboardService) {
+    constructor(ngControl, prefService, deafults, locale, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts, copyPasteDetector, clipboardService, logger) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         this.ngControl = ngControl;
         this.prefService = prefService;
@@ -3417,6 +3473,7 @@ class EsTableComponent {
         this.msgExts = msgExts;
         this.copyPasteDetector = copyPasteDetector;
         this.clipboardService = clipboardService;
+        this.logger = logger;
         /** Subject utilizzato internamente lato EsTable per causare il Focus lato componente di Input */
         this.FocusSubject = new Subject();
         /** Se vengono effettuati 2 click a distanza inferiore a questi Millisecondi viene considerato un doppio click */
@@ -3442,9 +3499,9 @@ class EsTableComponent {
         this.boundSource = [];
         /** Stessa cosa della **boundSource**, utilizzata come appoggio temporaneo interno */
         this.TMPBoundSource = [];
-        /** "Fetta" di oggetti utilizzata nell'endless scroll, ogni elemento di questo array è un blocchetto di 100 elementi */
+        /** @deprecated "Fetta" di oggetti utilizzata nell'endless scroll, ogni elemento di questo array è un blocchetto di 100 elementi */
         this.boundSubSources = [];
-        /** Questa funge da indicatore per gli slice inseriti, la lunghezza dovrebbe essere corrispondente a **boundSubSources** */
+        /** @deprecated Questa funge da indicatore per gli slice inseriti, la lunghezza dovrebbe essere corrispondente a **boundSubSources** */
         this.addedSlices = [];
         /** Variabile che identifica il valore del "seleziona Tutto" nella paginazione */
         this.defaultAllPageOverride = 999999;
@@ -3454,22 +3511,20 @@ class EsTableComponent {
         this.seconds = '10';
         /** Impostata a true ogni volta che viene avviata una ricerca, e a false ogni volta che un nuovo valore viene ricevuto */
         this.researchInProgress = false;
+        /** Modello di appoggio temporaneo per i **RowTDs** */
+        this.TMPRowTDs = null;
         /** Modello rappresentante un dizionario di righe della tabella, con chiave l'hash e valore la lista di celle */
         this.RowTDs = null;
         /** Indica se **RowTDs** è un oggetto vuoto o meno */
         this.EmptyRowTds = true;
-        /** Modello di appoggio temporaneo per i **RowTDs** */
-        this.TMPRowTDs = null;
-        /** Modello rappresentante un singolo th della tabella, generato in base alle configurazioni e agli oggetti ricevuti */
-        this.RowTHs = null;
         /** Modello di appoggio temporaneo per i **RowTHs** */
         this.TMPRowTHs = null;
+        /** Modello rappresentante un singolo th della tabella, generato in base alle configurazioni e agli oggetti ricevuti */
+        this.RowTHs = 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 = {};
         /**
          * Lista dei contesti. Un contesto non è altro che un hash particolare calcolato su un oggetto che identifica univocamente tale oggetto.
          *
@@ -3480,6 +3535,19 @@ class EsTableComponent {
         this.OrderDirectives = [];
         /** Codice dell'ultimo oggetto solezionato */
         this.lastSelectedItemID = null;
+        /**
+         * Decide se utilizzare o meno le CustomCells. Impostandolo a **true** l'es-table diventa in grado di gestire nativamente:
+         *
+         * 1) Ordinamento e visibilità delle colonne
+         *
+         * 2) Ordinamento dei dati
+         *
+         * 3) Modalità Gerarchica
+         *
+         * ecc...
+         * viene dedotto dal sistema in automatico
+         */
+        this.UseCustomCells = null;
         /**
          * Indica se oltre alle colonne dinamiche specifiche di un tipo di oggetto ci sono anche colonne dinamiche aggiunte dall'utente
          *
@@ -3506,24 +3574,8 @@ class EsTableComponent {
         this.Height = null;
         /** Indica il colore di sfondo dello spazio vuoto (non ricoperto da dati). Particolarmente utile da impostare in caso di **Height** diverso da null  */
         this.EmptySpaceBackgroundColor = null;
-        /**
-         * @experimental Indica se dev'essere l'estable a gestire la ricerca, anche la prima.
-         *
-         * **ATTENZIONE: RICHIEDE MODIFICHE NON TRIVIALI ALLA PAGINA DI RICERCA CHE UTILIZZA QUESTO TIPO DI ES-TABLE. NON UTILIZZARE SE NON SI SA CIO' CHE SI STA FACENDO**
-         **/
+        /** Indica se dev'essere l'estable a gestire la ricerca, anche la prima.  **/
         this.EsTableHandledSearch = false;
-        /**
-         * Decide se utilizzare o meno le CustomCells. Impostandolo a **true** l'es-table diventa in grado di gestire nativamente:
-         *
-         * 1) Ordinamento e visibilità delle colonne
-         *
-         * 2) Ordinamento dei dati
-         *
-         * 3) Modalità Gerarchica
-         *
-         * ecc...
-         */
-        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 al contenitore della tabella */
@@ -3568,9 +3620,9 @@ class EsTableComponent {
         this.TableClass = null;
         /** Indica di esportare solo le colonne attualmente visibili della view */
         this.ExportOnlyVisibleColumns = false;
-        /** Indica la presenza di raggruppamenti a livello di header */
+        /** @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;
         /** Indica se nascondere gli Header della tabella */
         this.HeaderHidden = null;
@@ -3596,7 +3648,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 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;
@@ -3718,13 +3770,23 @@ class EsTableComponent {
          **/
         this.useLocalVisibility = false;
         /** Opzioni di paginazione */
-        this.PagerOptions = { PagerCount: null, ShowCount: true, ShowPaging: true, ShowButtons: true, ShowPagingOptions: true, UsesView: true, View: null, Ready: false, Searches: 'items' };
+        this.PagerOptions = new PagerInfos();
         /** @ignore */
         this.propagateChange = (_) => { };
         /** Funzione di trackby per il body che dovrebbe evitare il 90% delle change detection */
-        this.bodyTrackBy = (index, item) => item._hash;
+        this.bodyTrackBy = (_, item) => item._hash;
+        /** Funzione di trackby generica per tutti gli oggetti che hanno il campo id */
+        this.idTrackBy = (_, item) => item.id;
+        /** Funzione di trackby generica per tutti gli oggetti che hanno il campo PropertyName */
+        this.PropertyNameTrackBy = (_, item) => item.PropertyName;
+        /** Funzione di trackby generica per tutti gli oggetti che hanno il campo ID */
+        this.IDTrackBy = (_, item) => item.ID;
+        /** Funzione di trackby generica per tutti gli oggetti che hanno il campo ID */
+        this.valTrackBy = (_, item) => item.val;
         // Range selection Experimentals
         this.mouseIsDown = false;
+        this.rangeSelected = false;
+        this.rangeStartWasIgnored = false;
         this.firstCoordinates = null;
         //* Piango
         this.EsTdsCache = {};
@@ -3771,7 +3833,7 @@ class EsTableComponent {
                 return;
             let shouldEmit = !t.item._selected;
             t.item._selected = true;
-            this.selection_H.clearSelectionStatus();
+            this.selection_H.clearSelectionStatusExcluding(null);
             var itemSelection = this.selection_H.handleItemsSelection([t.item]);
             this.changed();
             if (shouldEmit)
@@ -4070,7 +4132,7 @@ class EsTableComponent {
     }
     /** 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 */
     internalPostBoundSource() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         let View = this.View;
         let tdsD = this.EsTdsDirective.length == 0 ? ((_c = (_b = (_a = this.EsTableTemplate) === null || _a === void 0 ? void 0 : _a.Template) === null || _b === void 0 ? void 0 : _b.EsTdsDirective) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (_e = (_d = this.EsTableTemplate) === null || _d === void 0 ? void 0 : _d.Template) === null || _e === void 0 ? void 0 : _e.EsTdsDirective : this.EsTdsDirective : this.EsTdsDirective;
         let thsD = this.EsThsDirective.length == 0 ? ((_h = (_g = (_f = this.EsTableTemplate) === null || _f === void 0 ? void 0 : _f.Template) === null || _g === void 0 ? void 0 : _g.EsThsDirective) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (_k = (_j = this.EsTableTemplate) === null || _j === void 0 ? void 0 : _j.Template) === null || _k === void 0 ? void 0 : _k.EsThsDirective : this.EsThsDirective : this.EsThsDirective;
@@ -4078,6 +4140,7 @@ class EsTableComponent {
         let tds = tdsD && tdsD.length > 0 ? tdsD.toArray() : [];
         // Se non ho colonne dinamiche ma sono in modalità dinamica (lo capisco perché c'è una view piena di genericitem) metto il default delle colonne
         this.dynamicMode_H.eventuallyReviewDynamicColumns();
+        // Gestisce la richiesta per gruppi o per singoli oggetti
         this.bindDisplayToLoadedItemsOrGroups(View);
         // Questo dev'essere per forza lanciato dopo **bindDisplayToLoadedItemsOrGroups** dato che è lì che alcune cose vengono valorizzate
         this.setupPagingInformations();
@@ -4088,16 +4151,24 @@ class EsTableComponent {
             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      *************************************
-            // Espando i th e i td multipli duplicandoli
-            let ret = this.columnMetadata_H.expandMultiThsAndTds(ths, tds, itemsAndGroups);
-            ths = ret.expThs;
-            tds = ret.expTds;
+            // Se ho definizioni dinamiche, prima di qualsiasi altra cosa devo trasformarle in th/td in modo che poi il codice qui sotto faccia le sue magie
+            if (!this.arrayMode && ((_l = this.DynamicRowColumnsDefinition) === null || _l === void 0 ? void 0 : _l.length) > 0) {
+                this.logger.log("Generating ths and tds from Dynamic definition");
+                let ret = this.dynamicMode_H.emitThsAndTdsBasedOnDynamicDefinition();
+                ths = ret.ths;
+                tds = ret.tds;
+            }
             // Gestione delle view in modalità report, i th e i td vengono rigenerati dalle configurazioni della view
             if (!this.arrayMode && view.report_columns) {
+                this.logger.log("Generating ths and tds from report results");
                 let ret = this.reportMode_H.generateThsAndTdsFromView(view);
                 ths = ret.ths;
                 tds = ret.tds;
             }
+            // Espando i th e i td multipli duplicandoli
+            let ret = this.columnMetadata_H.expandMultiThsAndTds(ths, tds, itemsAndGroups);
+            ths = ret.expThs;
+            tds = ret.expTds;
             // Genero la cache dei th da usare da qui in poi, dopo avergli lasciato fare le sue cose in caso ci siano dei multi o dei report
             for (let i = 0; i < ths.length; i++) {
                 let th = ths[i];
@@ -4261,6 +4332,7 @@ class EsTableComponent {
      * @param {EsTdDirective[]} tds Celle della tabella
      */
     evaluateRowTds(ths, tds) {
+        var _a;
         if (tds.length == 0)
             return;
         let columnsCache = {};
@@ -4293,13 +4365,14 @@ class EsTableComponent {
                             PinnedWidth: thCasted.thPinnedWidth,
                             GroupHeader: false,
                             GroupAggregation: false,
-                            Visible: columnsCache[td.td].visible, Wraps: false,
+                            Visible: columnsCache[td.td].visible,
+                            Wraps: false,
                             Class: td.tdClass,
                             Template: thCasted.thGroup && !this.ShowItemGroupsColumns ? null : td.Template,
                             Multi: td._multi,
                             MultiProp: td._multi ? td.td.split('_')[0] : null,
                             MultiIndex: td._multi ? td.td.split('_')[1] : null,
-                            Alignment: td.tdAlignment || th.thAlignment,
+                            Alignment: (_a = (td.tdAlignment || th.thAlignment)) === null || _a === void 0 ? void 0 : _a.toLowerCase(),
                             Format: td.tdFormat || th.thFormat,
                             PropertyName: th.thProperty,
                             PropertyType: th.thType,
@@ -4369,7 +4442,24 @@ class EsTableComponent {
             let toAdd;
             if (th.thIf || th.thGroup) {
                 let thClass = (th.thClass || '') + (th.thGroup ? " est-col-min" : "");
-                toAdd = { Pinned: columnsListCache[th.th].pinned, Fixed: th.thFixed, PinnedWidth: th.thPinnedWidth, ID: th.th, Visible: th.thVisible, Class: thClass, Order: th.thOrder, Orderable: th.thOrderable, Template: th.Template, Content: th.thStaticContent, Wrap: th.thWrap, LeftBorder: th._lbord, RightBorder: th._rbord, Multi: th._multi, MultiContent: th._multi_content };
+                toAdd = {
+                    Pinned: columnsListCache[th.th].pinned,
+                    Fixed: th.thFixed,
+                    PinnedWidth: th.thPinnedWidth,
+                    ID: th.th,
+                    Visible: th.thVisible,
+                    Class: thClass,
+                    Order: th.thOrder,
+                    Orderable: th.thOrderable,
+                    Template: th.Template,
+                    // Se non è nessun contenuto né nessun template mostro semplicemente l'ID dell'header
+                    Content: th.thStaticContent || th.Template ? '' : th.th,
+                    Wrap: th.thWrap,
+                    LeftBorder: th._lbord,
+                    RightBorder: th._rbord,
+                    Multi: th._multi,
+                    MultiContent: th._multi_content
+                };
                 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
@@ -4466,7 +4556,7 @@ class EsTableComponent {
      * @param {boolean} forcedVal Valore forzato di check da assegnare agli oggetti
      */
     globalCheckChanged(forcedVal = null) {
-        this.selection_H.clearSelectionStatus();
+        this.selection_H.clearSelectionStatusExcluding(null);
         // 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.selection_H.handleItemsSelection(items, forcedVal, this.globalCheck);
@@ -4485,7 +4575,7 @@ class EsTableComponent {
      */
     handleClick(event, item) {
         this.selection_H.clearTextSelection(event);
-        this.selection_H.clearSelectionStatus();
+        this.selection_H.clearSelectionStatusExcluding(null);
         let selecteditems = [];
         if (event.shiftKey && this.ShiftClick && !this.SingleSelection) {
             let startSelecting = false;
@@ -4706,24 +4796,34 @@ class EsTableComponent {
      * @param {any} $event Evento nativo javascript
      * @param {TdElement} rowItem Riferimento a binder della riga
      * @param {any} item Item che rappresenta il contesto su cui è stato effettuato un click
-     * @param {number} rowIndex Indice della riga
      */
-    dbClickEditOrSingleClickRowSelection($event, rowItem, item, rowIndex) {
-        var _a, _b;
+    dbClickEditOrSingleClickRowSelection($event, rowItem, item) {
+        // Prima cosa da fare è controllare se ci sono dei range lasciati da operazioni precedenti (se applicabile) e ripulirli
+        if (this.rangeSelected && !$event.ctrlKey && this.Selection) {
+            this.logger.log("clearing previously selected range");
+            this.selection_H.clearSelectionStatusExcluding(null);
+            this.rangeSelected = false;
+            return;
+        }
         // Modalità Editable, gestisco i doppi click senza però rallentare la modalità di selezione a range
         if (this.Editable) {
             // Secondo click: se il timer non è scaduto è un doppio click ed eseguo il resto
             if (this.cellDbClickTimer) {
+                this.logger.log("handling doubleclick on editable cell: " + (rowItem.PropertyName ? 'edit mode for property ' + rowItem.PropertyName : 'no property set, fallback to simple click'));
                 if (rowItem.PropertyName)
                     this.setupUserEdit(rowItem, item);
+                else
+                    this.handleRowClick($event, item, this.Selection, true);
                 this.clearCellClickTimer();
                 return;
             }
             // Primo click: non fa niente e se il tempo per il secondo click scade resetta tutto
             this.cellDbClickTimer = setTimeout(() => {
                 this.clearCellClickTimer();
-                if (!this.RangeSelection)
+                if (!this.RangeSelection || !this.mouseIsDown) {
+                    this.logger.log("time's up for second click, handling single click");
                     this.handleRowClick($event, item, this.Selection, true);
+                }
             }, this.doubleClickBufferMs);
         }
         // In modalità a range la creazione del range è gestita dai mousedown, move ed up...
@@ -4734,8 +4834,7 @@ class EsTableComponent {
         if ($event.ctrlKey)
             return;
         // Tutti i click su una cella già in edit non devono effettuare la selezione della riga
-        if ((((_a = this.DynamicRowColumnsDefinition) === null || _a === void 0 ? void 0 : _a.length) > 0 && rowItem.edits && ((_b = rowItem.edits[item._hash]) === null || _b === void 0 ? void 0 : _b._editing)) ||
-            rowItem._editing)
+        if (rowItem._editing)
             return;
         // Per evitare di rallentare a prescindere
         if (!this.Editable) {
@@ -4817,14 +4916,12 @@ class EsTableComponent {
         // Stessa cosa se ho custom cell dato che la gestione dei click viene affidata ai singoli TD
         if ($event.ctrlKey || (this.UseCustomCells && !internalCall))
             return true;
-        if (selection && !item.locked && !item._sep && !item._group) {
-            this.selection_H.clearSelectionStatus();
+        if (selection)
+            this.selection_H.clearSelectionStatusExcluding(null);
+        if (selection && !item.locked && !item._sep && !item._group)
             this.handleClick($event, item);
-        }
-        else if (item._group) {
-            this.selection_H.clearSelectionStatus();
+        else if (item._group)
             this.handleGroupClick(item);
-        }
         // Ora che non è attaccato direttamente all'html devo fare un markforcheck finite le operazioni sui grouping
         this.cdr.markForCheck();
     }
@@ -4845,15 +4942,11 @@ class EsTableComponent {
      */
     setupUserEdit(rowItem, item) {
         var _a;
-        this.selection_H.clearSelectionStatus();
+        this.selection_H.clearSelectionStatusExcluding(null);
         if (this.Editable && rowItem.PropertyName) {
-            if (((_a = this.DynamicRowColumnsDefinition) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                rowItem.edits[item._hash] = { _editing: true, old_value: item.properties[rowItem.PropertyName] };
-            }
-            else {
-                rowItem._editing = true;
-                rowItem.old_value = item[rowItem.PropertyName];
-            }
+            let dynMode = ((_a = this.DynamicRowColumnsDefinition) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            rowItem._editing = true;
+            rowItem.old_value = dynMode ? item.properties[rowItem.PropertyName] : item[rowItem.PropertyName];
         }
         this.cdr.detectChanges();
         setTimeout(() => { this.FocusSubject.next(); });
@@ -4868,7 +4961,7 @@ class EsTableComponent {
     finalizeUserEdit(rowItem, item, columnIndex) {
         var _a;
         let dynMode = ((_a = this.DynamicRowColumnsDefinition) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        let rowItm = dynMode ? (rowItem.edits[item._hash]) : rowItem;
+        let rowItm = rowItem;
         rowItm._editing = false;
         let old = rowItm.old_value;
         let niu = dynMode ? item.properties[rowItem.PropertyName] : item[rowItem.PropertyName];
@@ -4879,22 +4972,27 @@ class EsTableComponent {
         this.onModelChange.emit([new EsTableModelChange(item, rowItem.ID, rowItem.PropertyName, old, niu)]);
         this.selectionStatus[item._ordinal][columnIndex].val_setter(niu);
     }
-    mousedown(event, rowItem, item) {
-        var _a, _b;
+    mousedown(event, rowItem, _) {
         // Tasto diverso dal click sinistro -> ciao è stato bello e intenso
         if (event.buttons != 1 || !this.RangeSelection)
             return;
         // Sto lavorando su QUESTA es-table
         this.copyPasteDetector.ActiveEstReference = this;
         // Tutti i click su una cella già in edit non devono effettuare la selezione della riga
-        if ((((_a = this.DynamicRowColumnsDefinition) === null || _a === void 0 ? void 0 : _a.length) > 0 && rowItem.edits && ((_b = rowItem.edits[item._hash]) === null || _b === void 0 ? void 0 : _b._editing)) ||
-            rowItem._editing)
+        if (rowItem._editing)
             return;
-        let id = event.currentTarget.id;
         this.mouseIsDown = true;
-        let coords = id.split('_');
-        this.firstCoordinates = { row: parseInt(coords[coords.length - 2]), column: parseInt(coords[coords.length - 1]) };
-        this.selection_H.singleCellSelection({ view: event.view, shiftKey: false }, this.firstCoordinates.row, this.firstCoordinates.column);
+        let coords = event.currentTarget.id.split('_');
+        let row = parseInt(coords[coords.length - 2]);
+        let column = parseInt(coords[coords.length - 1]);
+        this.firstCoordinates = { row, column };
+        // Se ho già un range di selezione ignoro temporanemaente questa selezione in modo da capire bene cosa devo fare dopo (click sulla riga / altra selezione)
+        // e gestire la grafica in maniera un po' più precisa
+        if (!this.rangeSelected || (event.ctrlKey || !this.Selection))
+            this.selection_H.singleCellSelection({ view: event.view, range: false }, row, column);
+        else
+            this.rangeStartWasIgnored = true;
+        this.logger.log(`mouse down on ${row}:${column}`);
     }
     mouseenter(event) {
         if (!this.RangeSelection)
@@ -4904,14 +5002,34 @@ class EsTableComponent {
         if (this.mouseIsDown && this.firstCoordinates) {
             let id = event.currentTarget.id;
             let coords = id.split('_');
-            let newCoords = { row: parseInt(coords[coords.length - 2]), column: parseInt(coords[coords.length - 1]) };
-            this.selection_H.singleCellSelection({ view: event.view, shiftKey: true }, newCoords.row, newCoords.column, this.firstCoordinates);
+            let row = parseInt(coords[coords.length - 2]);
+            let column = parseInt(coords[coords.length - 1]);
+            // Se ho ignorato l'inizio della selezione nel mousedown lo recupero qui
+            if (this.rangeStartWasIgnored) {
+                this.selection_H.singleCellSelection({ view: event.view, range: false }, this.firstCoordinates.row, this.firstCoordinates.column);
+                this.rangeStartWasIgnored = false;
+            }
+            this.selection_H.singleCellSelection({ view: event.view, range: true }, row, column, this.firstCoordinates);
+            this.logger.log(`mouse move over ${row}:${column}`);
+            this.rangeSelected = true;
         }
     }
     mouseup(event) {
         if (!this.RangeSelection)
             return;
+        let id = event.currentTarget.id;
+        let coords = id.split('_');
+        let row = parseInt(coords[coords.length - 2]);
+        let column = parseInt(coords[coords.length - 1]);
+        // Se il mouseup viene effettuato sulla stessa cella del primo mousedown e siamo in modalità di selezione deseleziono la cella perché è un semplice click
+        if (this.mouseIsDown && this.firstCoordinates) {
+            if (this.firstCoordinates.row == row && this.firstCoordinates.column == column && !event.ctrlKey && !this.rangeStartWasIgnored && this.Selection)
+                this.selection_H.singleCellSelection({ view: event.view, range: false }, row, column);
+            else if (event.ctrlKey || !this.Selection)
+                this.rangeSelected = true;
+        }
         this.mouseIsDown = false;
+        this.logger.log(`mouse lifted up`);
     }
     getCellReference(object, column) {
         let fkThisShitImOut = this.utiExts.deepClone(object);
@@ -4931,8 +5049,8 @@ 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 class=\"clearfix\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\" [style.height]=\"Height\" [style.background-color]=\"EmptySpaceBackgroundColor\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (View?.selection || arraymodeSelection)?.all\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection)?.all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable est-full-height {{ContainerClass}}\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10 est\" style=\"background-color: white;\"  [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 && !SingleSelection) || PagingStyle != 'bottom'\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden-view]=\"!canSelectAll && !(View?.selection || arraymodeSelection)?.all && PagingStyle == 'bottom'\">\r\n                        <p class=\"est-hidden-view app-margin-bottom-0\">\u00A7</p>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <ng-container *ngIf=\"RowThGroups\">\r\n                    <tr *ngFor=\"let level of RowThGroups\">\r\n                        <th *ngFor=\"let cell of level\" [attr.colspan]=\"cell.Span\" \r\n                            [class.est-pinned-header]=\"cell.Pinned\" [class.est-col-min]=\"cell.Pinned\"\r\n                            [class.est-ltab-border]=\"cell.Borders\" [class.est-rtab-border]=\"cell.Borders\"\r\n                            class=\"est-text-center\">\r\n                            <ng-container *ngIf=\"cell.Pinned;\">\r\n                                <div class=\"est-pinned-border est-cell-group-padding\"></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!cell.Pinned && cell.Content; Else: cell.Template\">\r\n                                {{cell.Content}}\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!RowThGroups\">\r\n                    <tr *ngIf=\"HasHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"headerGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n    \r\n                    <!-- Blocco header group secondario -->\r\n                    <tr *ngIf=\"HasSecondaryHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"secondaryHeaderGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection && !HasPinnedColumns\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode -->\r\n                    <ng-container *ngIf=\"arrayMode || viewMode\">\r\n                        <!-- In una tabella base prendo semplicemente i th scritti dall'utente nell'HTML -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs || RowTHs.length == 0) && !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 || RowTHs.length == 0) && 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\"  id=\"esth_{{rowHeader.PropertyName}}\" 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\" id=\"esth_{{rowHeader.PropertyName}}\" 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 && RowTHs.length > 0\">\r\n                            <th *ngIf=\"HasPinnedColumns\" class=\"est-pinned-header est-col-min\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-simple-border-bottom\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\" [style.width.px]=\"20\">\r\n                                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                        <th *ngIf=\"rowHeader && rowHeader.Visible && rowHeader.Pinned\" [style.width.px]=\"rowHeader.PinnedWidth\" es-th=\"{{rowHeader.ID}}\" \r\n                                            class=\"{{rowHeader.Class || ''}}\" \r\n                                            [class.est-pinned-internal-header]=\"true\" \r\n                                            [class.est-no-border]=\"true\" \r\n                                            [class.est-nowrap]=\"!rowHeader.Wrap\" \r\n                                            [Pinned]=\"true\" [Fixed]=\"rowHeader.Fixed\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\" (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n                                            <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template; context: { $implicit: rowHeader.Multi ? rowHeader.MultiContent : null } \"></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\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class || ''}}\" [class.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n                                    <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template; context: { $implicit: rowHeader.Multi ? rowHeader.MultiContent : null }\"></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                    <!--Per l'eliminazione mi serve un header aggiuntivo-->\r\n                    <th *ngIf=\"Removal\" [class.est-right-9]=\"Export || HiddenColumns\" class=\"est-col-min est-sticky-last-column\"><span class=\"fa fa-trash\"></span></th>\r\n\r\n                    <!--Per l'esportazione mi serve l'header extra da cui faccio uscire i 3 pallocchi-->\r\n                    <th *ngIf=\"Export || HiddenColumns || ColumnsOrdering || CornerMenuOptions\" class=\"est-table-dotted-menu est-sticky-last-column est-col-min text-sm-center\">\r\n                        \r\n                        <!-- Blocco con i 3 pallocchi che tira fuori il context menu delle operazioni -->\r\n                        <div class=\"btn-group\" container=\"body\" placement=\"bottom right\" dropdown #dropdown=\"bs-dropdown\" [autoClose]=\"true\">\r\n                            <span dropdownToggle class=\"fa fa-ellipsis-v est-fs-18 est-pointer est-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right est-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"HiddenColumns || ColumnsOrdering\" (click)=\"columnMetadata_H.resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"export_H.tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"export_H.tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n\r\n            <tbody [hidden]=\"BodyHidden || FirstBind\" [class.est-no-selection]=\"RangeSelection\">\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        </table>\r\n    </div>\r\n\r\n    <div *ngIf=\"PagingStyle == 'both' || PagingStyle == 'bottom'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n<!-- Template che contiene tutte le info di paginazione in modo da poterlo replicare anche sopra -->\r\n<ng-template #pagingElement>\r\n    <ng-container *ngIf=\"!FirstBind\">\r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div *ngIf=\"PagerOptions.ShowPaging && PagerOptions.ShowButtons && (PagerOptions.PagerCount > 10 || PagerOptions.PagerCount == -1)\" class=\"pull-right btn-toolbar\">\r\n            <ng-container *ngIf=\"PagerOptions.View?.pagingavailable || viewMode\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-right\" *ngIf=\"PagerOptions.ShowCount || PagerOptions.ShowPagingOptions\">\r\n            <div class=\"est-mt-min-5\" *ngIf=\"PagerOptions.ShowPaging\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [GroupMode]=\"PagerOptions.Searches == 'groups'\" [AllSearch]=\"AllSearch\" [View]=\"PagerOptions.View\" (pagingSelected)=\"onItemsPerPageChanged($event);\"></app-paging>\r\n            </div>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <div class=\"est-flex\" [class.est-margin-left-50]=\"options.Margin\">\r\n        <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n        <div *ngIf=\"options.Array\" class=\"est-inline\"><a *ngFor=\"let p of options.Array\" class=\"btn est-page-sel {{p.cssClass}}\" (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a></div>\r\n        <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index; trackBy: bodyTrackBy\">\r\n        <tr *ngIf=\"item._visible || (!Hierarchy && !ArrayGrouping)\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\" \r\n            [class.est-pointer]=\"!item.locked\" \r\n            [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"!RangeSelection && handleRowClick($event, item, true)\"\r\n            (contextmenu)=\"onRightClick();\">\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)=\"handleRowClick($event, item, false)\">\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #groupPager let-item>\r\n    <td class=\"est-pinned-body \" *ngIf=\"HasPinnedColumns\"><div class=\"est-pinned-border est-cell-group-padding\"></div></td>\r\n    <td *ngIf=\"item._grouplevel > 1\" [attr.colspan]=\"item._grouplevel-1\"></td>\r\n    <td [attr.colspan]=\"Columns.VisibleUnpinned - (item._grouplevel > 0 ? item._grouplevel - 1 : 0)\">\r\n        <div class=\"est-rg-sep-flex-right\" *ngIf=\"RowGroupingPagingStyle == 'right'\">\r\n            <div class=\"est-rg-page\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n            <div class=\"est-rg-ipp\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><app-paging [CountLabel]=\"CountLabel\" [AllSearch]=\"AllSearch\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n        </div>\r\n\r\n        <div class=\"est-rg-sep-flex-left\" *ngIf=\"RowGroupingPagingStyle == 'left'\">\r\n            <div class=\"est-rg-ipp\"><app-paging [AllSearch]=\"AllSearch\" [CountLabel]=\"CountLabel\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n            <div class=\"est-rg-page\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || EmptyRowTds) && !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 || EmptyRowTds) && 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\r\n        <ng-container *ngFor=\"let rowItem of DynamicRowColumnsDefinition; let i = index\">\r\n\r\n            <ng-container *ngIf=\"rowItem.RoutePath && rowItem.Visible\">\r\n                <td es-td=\"{{rowItem.PropertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.Clss : 'est-nowrap'}}\" [Internal]=\"false\" [Context]=\"item._hash\">\r\n                    <a [routerLink]=\"dynamicMode_H.generateRouterLink(rowItem.RoutePath, rowItem.RouteParameterProperties, item)\" class=\"est-link\" [innerHTML]=\"item.properties[rowItem.PropertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!rowItem.RoutePath && rowItem.Visible\">\r\n                <td es-td=\"{{rowItem.PropertyName}}\" \r\n                [class.est-selected-cell]=\"selectionStatus[item._ordinal][i]?.selected\" \r\n                [class.est-cell-lborder]=\"selectionStatus[item._ordinal][i]?.lborder\"\r\n                [class.est-cell-tborder]=\"selectionStatus[item._ordinal][i]?.tborder\"\r\n                [class.est-cell-rborder]=\"selectionStatus[item._ordinal][i]?.rborder\"\r\n                [class.est-cell-bborder]=\"selectionStatus[item._ordinal][i]?.bborder\"\r\n                [class.est-cell-lborder-tmp]=\"!selectionStatus[item._ordinal][i]?.lborder && !selectionStatus[item._ordinal][i]?.loverlaps\"\r\n                [class.est-cell-rborder-tmp]=\"!selectionStatus[item._ordinal][i]?.rborder && !selectionStatus[item._ordinal][i]?.roverlaps\"\r\n                (click)=\"dbClickEditOrSingleClickRowSelection($event, rowItem, item, i)\" \r\n                class=\"{{UserDefinedDynamicCols ? rowItem.Clss : 'est-nowrap'}} est-default-row-height\" \r\n                [Internal]=\"false\" [class.est-no-selection]=\"!!Editable\" [Context]=\"item._hash\"\r\n                id=\"estd_{{rowItem.PropertyName}}_{{item._ordinal}}_{{i}}\" (mousedown)=\"mousedown($event, rowItem, item)\" (mouseenter)=\"mouseenter($event)\" (mouseup)=\"mouseup($event)\">\r\n\r\n                    <div [class.est-edit-hidden]=\"rowItem.edits[item._hash]?._editing\" >\r\n                        <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.PropertyName, rowItem.RendererName) || defaultEsTd; context: { $implicit: { definition: rowItem, value: item.properties[rowItem.PropertyName], type: rowItem.PropertyType} }\"></ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"rowItem.edits[item._hash]?._editing\" class=\"est-mt-min-5\">\r\n                        <ng-container *ngTemplateOutlet=\"findEditor(rowItem.PropertyName, rowItem.EditorName) || defaultEditor; context: { $implicit: { definition: rowItem, columnIndex: i, item: item, finalizer: finalizeUserEdit.bind(this, rowItem, item, i) } }\"></ng-container>\r\n                    </div>\r\n                </td>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEditor let-ctx>\r\n    <ng-container *ngIf=\"ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Options]=\"ctx.definition.EditorOptions\" [FocusSubject]=\"FocusSubject\" [(ngModel)]=\"ctx.item.properties[ctx.definition.PropertyName]\" name=\"{{ ctx.definition.PropertyName + '_' + ctx.item._hash }}\" [Type]=\"ctx.definition.PropertyType\" [Source]=\"ctx.definition.PropertySource\" (inputFinalized)=\"ctx.finalizer()\"></form-adaptive>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Options]=\"ctx.definition.EditorOptions\" [FocusSubject]=\"FocusSubject\" [(ngModel)]=\"ctx.item[ctx.definition.PropertyName]\" name=\"{{ ctx.definition.PropertyName + '_' + ctx.item._hash }}\" [Type]=\"ctx.definition.PropertyType\" [Source]=\"ctx.definition.PropertySource\" (inputFinalized)=\"ctx.finalizer()\"></form-adaptive>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-ctx>\r\n    <!-- Formattare il valore in base a valType.type -->\r\n    <ng-container *ngIf=\"ctx.type == 'enum'\">\r\n        {{ (ctx.value | est_lookup : ctx.definition.PropertySource).description }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"ctx.type != 'enum'\">\r\n        {{ctx.value}}\r\n    </ng-container>\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 && !EmptyRowTds\">\r\n        <td *ngIf=\"HasPinnedColumns\" \r\n            class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\" [style.width.px]=\"20\">\r\n                    <input type=\"checkbox\" [disabled]=\"opt.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{item._hash}}\" (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n                </td>\r\n                <td class=\"est-no-border est-col-min\" *ngIf=\"(item.locked || item._sep) && Selection\" [style.width.px]=\"20\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n                    <td *ngIf=\"rowItem && rowItem.Pinned\" [style.width.px]=\"rowItem.PinnedWidth\" es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-no-selection]=\"Editable &&!!rowItem.PropertyName\" [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\" (click)=\"dbClickEditOrSingleClickRowSelection($event, rowItem, item, i)\">\r\n\r\n                        <div [class.est-edit-hidden]=\"rowItem._editing\" [class.est-pre]=\"!(Hierarchy && i == 0)\"\r\n                             [style.text-align]=\"rowItem.Alignment == 'Center' ? 'center' : rowItem.Alignment == 'Left' ? 'left' : rowItem.Alignment == 'Right' ? 'right' : null\"\r\n                             [style.color]=\"item.forecolors && rowItem.PropAccessor ? item.forecolors[rowItem.PropAccessor] : null\"\r\n                             [style.background-color]=\"item.backcolors && rowItem.PropAccessor ? item.backcolors[rowItem.PropAccessor] : null\">\r\n                            <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: rowItem.Multi ? (item[rowItem.MultiProp] ? item[rowItem.MultiProp][rowItem.MultiIndex] : {}) : item }\"></ng-container></ng-container>\r\n                            <ng-container *ngIf=\"!rowItem.Multi && rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: rowItem.Multi ? (item[rowItem.MultiProp] ? item[rowItem.MultiProp][rowItem.MultiIndex] : {}) : item }\"></ng-container></ng-container>\r\n                            <span *ngIf=\"rowItem.Multi && rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: (item[rowItem.MultiProp] ? item[rowItem.MultiProp][rowItem.MultiIndex] : {}) }\"></ng-container></span>\r\n                            <ng-container *ngIf=\"!rowItem.Template && !rowItem.Multi\">\r\n                                <span *ngIf=\"rowItem.Content && !rowItem.PropAccessor\">{{rowItem.Content}}</span>\r\n                                <span *ngIf=\"!rowItem.Content && rowItem.PropAccessor\">{{(item.values? item.values[rowItem.PropAccessor] : item[rowItem.PropAccessor]) | est_format: rowItem.Format }}</span>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"rowItem._editing\" class=\"est-mt-min-5\">\r\n                            <ng-container *ngTemplateOutlet=\"findEditor(rowItem.PropertyName) || defaultEditor; context: { $implicit: { definition: rowItem, columnIndex: i, item: item, finalizer: finalizeUserEdit.bind(this, rowItem, item, i) } }\"></ng-container>\r\n                        </div>\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}}\" \r\n                        [class.est-selected-cell]=\"selectionStatus[item._ordinal][i]?.selected\" \r\n                        [class.est-cell-lborder]=\"selectionStatus[item._ordinal][i]?.lborder\"\r\n                        [class.est-cell-tborder]=\"selectionStatus[item._ordinal][i]?.tborder\"\r\n                        [class.est-cell-rborder]=\"selectionStatus[item._ordinal][i]?.rborder\"\r\n                        [class.est-cell-bborder]=\"selectionStatus[item._ordinal][i]?.bborder\"\r\n                        [class.est-ltab-border]=\"rowItem.LeftBorder && !selectionStatus[item._ordinal][i]?.lborder\" \r\n                        [class.est-rtab-border]=\"rowItem.RightBorder && !selectionStatus[item._ordinal][i]?.rborder\" \r\n                        [class.est-cell-lborder-tmp]=\"!selectionStatus[item._ordinal][i]?.lborder && !selectionStatus[item._ordinal][i]?.loverlaps && !rowItem.LeftBorder\"\r\n                        [class.est-cell-rborder-tmp]=\"!selectionStatus[item._ordinal][i]?.rborder && !selectionStatus[item._ordinal][i]?.roverlaps && !rowItem.RightBorder\"\r\n                        [class.est-no-selection]=\"Editable && !!rowItem.PropertyName\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\" (click)=\"dbClickEditOrSingleClickRowSelection($event, rowItem, item, i)\"\r\n                        (onCellGeneration)=\"registerCell($event)\" [Context]=\"item._hash\"\r\n                        id=\"{{item._ordinal}}_{{i}}\" (mousedown)=\"mousedown($event, rowItem, item)\" (mouseenter)=\"mouseenter($event)\" (mouseup)=\"mouseup($event)\"\r\n                        [style.text-align]=\"rowItem.Alignment == 'Center' ? 'center' : rowItem.Alignment == 'Left' ? 'left' : rowItem.Alignment == 'Right' ? 'right' : null\"\r\n                        [style.color]=\"item.forecolors && rowItem.PropAccessor ? item.forecolors[rowItem.PropAccessor] : null\"\r\n                        [style.background-color]=\"item.backcolors && rowItem.PropAccessor ? item.backcolors[rowItem.PropAccessor] : null\">\r\n                        \r\n                        <div [class.est-edit-hidden]=\"rowItem._editing\" [class.est-pre]=\"!(Hierarchy && i == 0)\" >\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.Multi && rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                            <span *ngIf=\"rowItem.Multi && rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: (item[rowItem.MultiProp] ? item[rowItem.MultiProp][rowItem.MultiIndex] : {}) }\"></ng-container></span>\r\n                            <ng-container *ngIf=\"!rowItem.Template && !rowItem.Multi\">\r\n                                <span *ngIf=\"rowItem.Content && !rowItem.PropAccessor\">{{rowItem.Content}}</span>\r\n                                <span *ngIf=\"!rowItem.Content && rowItem.PropAccessor\">{{(item.values? item.values[rowItem.PropAccessor] : item[rowItem.PropAccessor]) | est_format: rowItem.Format }}</span>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"rowItem._editing\" class=\"est-mt-min-5\">\r\n                            <ng-container *ngTemplateOutlet=\"findEditor(rowItem.PropertyName) || defaultEditor; context: { $implicit: { definition: rowItem, columnIndex: i, item: item, finalizer: finalizeUserEdit.bind(this, rowItem, item, i) } }\"></ng-container>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"hierarchyMode_H.collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"hierarchyMode_H.expandParent(item[this.OwnKey])\"></span>\r\n    &nbsp;\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove est-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"est-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" cdkDrag>\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header est-pointer\" cdkDragHandle>\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info est-padding-10 est-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm est-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"columnMetadata_H.globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <!-- <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th> -->\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                                <!-- Pinner -->\r\n                                <th *ngIf=\"DirectivesBased\" class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody \r\n                            cdkDropList \r\n                            [cdkDropListData]=\"TMPColumnsList\" \r\n                            (cdkDropListDropped)=\"columnMetadata_H.columnReordered($event)\" \r\n                            [cdkDropListSortPredicate]=\"columnMetadata_H.sortPredicate.bind(this.columnMetadata_H)\"\r\n                            class=\"est-dropbox\">\r\n\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" \r\n                                class=\"est-pointer est-droplist\" \r\n                                [class.est-white-selected]=\"lastSelectedItemID == item.id\" \r\n                                [class.est-no-selection]=\"!item.visible\"\r\n                                cdkDrag\r\n                                [cdkDragData]=\"item\"\r\n                                [cdkDragDisabled]=\"!ColumnsOrdering || item.fixed || item.pinned\">\r\n\r\n                                <td *ngIf=\"HiddenColumns\">\r\n                                    <input type=\"checkbox\" [class.est-hidden-view]=\"item.fixed\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"columnMetadata_H.updateGlobalColVisCheck();\" />\r\n                                </td>\r\n                                <td class=\"est-nowrap drag-visible\" (click)=\"columnMetadata_H.columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\r\n                                        <!-- Padri -->\r\n                                        <span *ngIf=\"item.parentTemplates && item.parentTemplates.length > 0\" class=\"est-fw-bold est-fs-13\">\r\n                                            (&nbsp;\r\n                                            <ng-container *ngFor=\"let parent of item.parentTemplates; let last=last\">\r\n                                                <ng-container *ngIf=\"parent.tmpl\"><ng-container *ngTemplateOutlet=\"parent.tmpl\"></ng-container></ng-container>\r\n                                                <ng-container *ngIf=\"parent.content\">{{parent.content}}</ng-container>\r\n                                                <span *ngIf=\"!last\">&nbsp;-&nbsp;</span>\r\n                                            </ng-container>\r\n                                            &nbsp;)\r\n                                        </span>\r\n                                        <!-- Template header originale -->\r\n                                        <ng-container *ngTemplateOutlet=\"item.template; context: { $implicit: item.multi ? item.multiContent : null }\"></ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"!item.template\">{{item.description}}</ng-container>\r\n                                </td>\r\n                                <!--Filler-->\r\n                                <td (click)=\"columnMetadata_H.columnClicked(item);\"></td>\r\n                                <!-- Pinner -->\r\n                                <td *ngIf=\"DirectivesBased && ColumnsPinnable\"><span *ngIf=\"!item.fixed && item.pinnable\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"columnMetadata_H.pinOrUnpinColumn(item)\"></span></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary est-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
-                styles: [".est-loading-box{height:200px;text-align:center;position:relative;background:#ccc}.est-loading-content{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:35px}.est-scrollable{max-height:600px;overflow:auto}.est-head-resizer{top:0;right:0;bottom:0;width:7px;position:absolute;cursor:col-resize}.est-head-resizer-internal{top:0;right:0;left:6px;bottom:0;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density td,.est-high-density th{padding:0 .2rem}.est-default-row-height{height:31px}.est-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}.est-edit-hidden{height:1px!important}.est-edit-hidden,.est-hidden-view{visibility:hidden}.est-no-border{border:none!important}.est-nowrap{white-space:nowrap}.est-mt-min-5{margin-top:-5px}.est-white-selected{background-color:#ddd!important}.est-line-through{text-decoration:line-through}.est-no-side-padding{padding-left:0;padding-right:0}.est-no-left-padding,.est-no-right-padding{padding-left:0}.est-col-min{width:1px}.est-margin-bottom-0{margin-bottom:0!important}.est-margin-right-10{margin-right:10px!important}.est-right-9{right:9px!important}.est-table-dotted-menu{padding:0 0 2px!important;color:#999}.est-fs-18{font-size:18px}.est-fs-13,.est-fs-14{font-size:14px}.est-fw-bold{font-weight:700}.est-padding-3{padding:3px!important}.est-page-container{position:relative}.est-bring-to-front-strong{z-index:99999999!important}.est-switch{position:relative;display:inline-block;width:30px;height:17px;margin-bottom:0;margin-right:5px;margin-left:5px}.est-switch input{display:none}.est-slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.est-slider,.est-slider:before{position:absolute;transition:.4s}.est-slider:before{content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{transform:translateX(11px)}.est-slider.round{border-radius:10px}.est-slider.round:before{border-radius:50%}.est-custom-input{width:30px;display:inline;padding:1px;height:20px}.est-row-lvl-1 td:first-child{padding-left:5px}.est-row-lvl-2 td:first-child{padding-left:20px}.est-row-lvl-3 td:first-child{padding-left:35px}.est-row-lvl-4 td:first-child{padding-left:50px}.est-row-lvl-5 td:first-child{padding-left:65px}.est-row-lvl-6 td:first-child{padding-left:80px}.est-row-lvl-7 td:first-child{padding-left:95px}.est-row-lvl-8 td:first-child{padding-left:110px}.est-row-lvl-9 td:first-child{padding-left:125px}.est-row-lvl-10 td:first-child{padding-left:140px}.est-row-lvl-11 td:first-child{padding-left:155px}.est-row-lvl-12 td:first-child{padding-left:170px}.est-row-lvl-13 td:first-child{padding-left:185px}.est-row-lvl-14 td:first-child{padding-left:200px}.est-row-lvl-15 td:first-child{padding-left:215px}.est-row-lvl-16 td:first-child{padding-left:230px}.est-row-lvl-17 td:first-child{padding-left:245px}.est-row-lvl-18 td:first-child{padding-left:260px}.est-row-lvl-19 td:first-child{padding-left:275px}.est-row-lvl-20 td:first-child{padding-left:290px}.est-row-lvl-21 td:first-child{padding-left:305px}.est-row-lvl-22 td:first-child{padding-left:320px}.est-row-lvl-23 td:first-child{padding-left:335px}.est-row-lvl-24 td:first-child{padding-left:350px}.est-row-lvl-25 td:first-child{padding-left:365px}.est-row-lvl-26 td:first-child{padding-left:380px}.est-row-lvl-27 td:first-child{padding-left:395px}.est-row-lvl-28 td:first-child{padding-left:410px}.est-row-lvl-29 td:first-child{padding-left:425px}.est-row-lvl-30 td:first-child{padding-left:440px}.est-row-lvl-31 td:first-child{padding-left:455px}.est-row-lvl-32 td:first-child{padding-left:470px}.est-row-lvl-33 td:first-child{padding-left:485px}.est-row-lvl-34 td:first-child{padding-left:500px}.est-row-lvl-35 td:first-child{padding-left:515px}.est-row-lvl-36 td:first-child{padding-left:530px}.est-row-lvl-37 td:first-child{padding-left:545px}.est-row-lvl-38 td:first-child{padding-left:560px}.est-row-lvl-39 td:first-child{padding-left:575px}.est-row-lvl-40 td:first-child{padding-left:590px}.est-row-lvl-41 td:first-child{padding-left:605px}.est-row-lvl-42 td:first-child{padding-left:620px}.est-row-lvl-43 td:first-child{padding-left:635px}.est-row-lvl-44 td:first-child{padding-left:650px}.est-row-lvl-45 td:first-child{padding-left:665px}.est-row-lvl-46 td:first-child{padding-left:680px}.est-row-lvl-47 td:first-child{padding-left:695px}.est-row-lvl-48 td:first-child{padding-left:710px}.est-row-lvl-49 td:first-child{padding-left:725px}.est-row-lvl-50 td:first-child{padding-left:740px}.est-row-lvl-51 td:first-child{padding-left:755px}.est-row-lvl-52 td:first-child{padding-left:770px}.est-row-lvl-53 td:first-child{padding-left:785px}.est-row-lvl-54 td:first-child{padding-left:800px}.est-row-lvl-55 td:first-child{padding-left:815px}.est-row-lvl-56 td:first-child{padding-left:830px}.est-row-lvl-57 td:first-child{padding-left:845px}.est-row-lvl-58 td:first-child{padding-left:860px}.est-row-lvl-59 td:first-child{padding-left:875px}.est-row-lvl-60 td:first-child{padding-left:890px}.est-row-lvl-61 td:first-child{padding-left:905px}.est-row-lvl-62 td:first-child{padding-left:920px}.est-row-lvl-63 td:first-child{padding-left:935px}.est-row-lvl-64 td:first-child{padding-left:950px}.est-row-lvl-65 td:first-child{padding-left:965px}.est-row-lvl-66 td:first-child{padding-left:980px}.est-row-lvl-67 td:first-child{padding-left:995px}.est-row-lvl-68 td:first-child{padding-left:1010px}.est-row-lvl-69 td:first-child{padding-left:1025px}.est-row-lvl-70 td:first-child{padding-left:1040px}.est-row-lvl-71 td:first-child{padding-left:1055px}.est-row-lvl-72 td:first-child{padding-left:1070px}.est-row-lvl-73 td:first-child{padding-left:1085px}.est-row-lvl-74 td:first-child{padding-left:1100px}.est-row-lvl-75 td:first-child{padding-left:1115px}.est-row-lvl-76 td:first-child{padding-left:1130px}.est-row-lvl-77 td:first-child{padding-left:1145px}.est-row-lvl-78 td:first-child{padding-left:1160px}.est-row-lvl-79 td:first-child{padding-left:1175px}.est-row-lvl-80 td:first-child{padding-left:1190px}.est-row-lvl-81 td:first-child{padding-left:1205px}.est-row-lvl-82 td:first-child{padding-left:1220px}.est-row-lvl-83 td:first-child{padding-left:1235px}.est-row-lvl-84 td:first-child{padding-left:1250px}.est-row-lvl-85 td:first-child{padding-left:1265px}.est-row-lvl-86 td:first-child{padding-left:1280px}.est-row-lvl-87 td:first-child{padding-left:1295px}.est-row-lvl-88 td:first-child{padding-left:1310px}.est-row-lvl-89 td:first-child{padding-left:1325px}.est-row-lvl-90 td:first-child{padding-left:1340px}.est-row-lvl-91 td:first-child{padding-left:1355px}.est-row-lvl-92 td:first-child{padding-left:1370px}.est-row-lvl-93 td:first-child{padding-left:1385px}.est-row-lvl-94 td:first-child{padding-left:1400px}.est-row-lvl-95 td:first-child{padding-left:1415px}.est-row-lvl-96 td:first-child{padding-left:1430px}.est-row-lvl-97 td:first-child{padding-left:1445px}.est-row-lvl-98 td:first-child{padding-left:1460px}.est-row-lvl-99 td:first-child{padding-left:1475px}.est-relative{position:relative}.est-top-pager{position:absolute;right:0;top:5px}.est-top-allselect{position:absolute;left:0;top:5px;font-weight:700}.est-padding-10{padding:10px!important}.est-margin-right-50{margin-right:50px}.est-margin-left-50{margin-left:50px}.est-quick-unpin{color:#000;margin-left:8px;font-size:14px;transform:rotate(45deg)}.est-full-height{height:100%}.est-page-sel{color:#000;margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-next,.est-page-prev{color:#000;font-size:inherit;padding:2px 0 0}.est-pinned-header{background-color:#fff;left:0;top:0;position:-webkit-sticky;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0 solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:-webkit-sticky;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:-webkit-sticky;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:-webkit-sticky;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:1px solid #bbb!important}.est-rtab-border{border-right:1px solid #bbb!important}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-selected-cell{background-color:rgba(33,150,243,.2)}.est-cell-lborder{border-left:1.02px solid #2196f3!important}.est-cell-lborder-tmp{border-left:1.02px solid transparent!important}.est-cell-tborder{border-top:1.02px solid #2196f3!important}.est-cell-rborder{border-right:1.02px solid #2196f3!important}.est-cell-rborder-tmp{border-right:1.02px solid transparent!important}.est-cell-bborder{border-bottom:1.02px solid #2196f3!important}.est-margin-bottom-10{margin-bottom:10px}.est-text-center{text-align:center}.est-flex{display:flex}.est-rg-sep-flex-right{display:flex;flex-direction:row-reverse;width:100%;margin:-5px}.est-rg-sep-flex-left{display:flex;flex-direction:row;width:100%;margin:-5px}.est-rg-hdr{font-weight:700}.est-rg-agg{font-style:italic}.est-rg{background-color:hsla(0,0%,46.7%,.4666666666666667)!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:hsla(0,0%,73.3%,.7333333333333333)!important}.est-rg-ipp{text-align:left;display:inline-flex;margin-right:25px}.est-rg-page{text-align:right;display:inline-flex;font-size:inherit;padding-top:5px}.est-droplist.cdk-drag-placeholder{opacity:0}.est-droplist.cdk-drag-preview{z-index:999999999!important;opacity:1;box-sizing:border-box;border-radius:4px;background-color:#fff;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.est-droplist.cdk-drag-preview td:not(.drag-visible){visibility:hidden}.est-droplist.cdk-drag-preview td.drag-visible{padding-top:3px}.est-droplist.cdk-drag-animating,.est-droplist.cdk-drop-list-dragging .est-dropbox:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.est-pre{white-space:pre}.est val-datetime .mat-form-field-appearance-outline .mat-form-field-infix input{margin-bottom:3px!important;min-width:130px!important}.est .mat-form-field-flex{height:29px!important;padding:0!important}.est .mat-form-field-flex .mat-form-field-outline{color:#00f}.est .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start{border-left:none;border-top:none;border-radius:0}.est .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-top:none;border-radius:0;border-right:none}.est .mat-form-field-wrapper{height:20px;min-height:20px!important;margin-top:0!important}.est .mat-form-field-infix{width:100%!important;min-width:50px!important}.est .mat-form-field-infix select.mat-input-element{margin-top:-5px!important}.est .mat-datepicker-input{margin-bottom:3px!important}.est input{height:20px;padding-top:0!important}"]
+                template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\" [style.height]=\"Height\" [style.background-color]=\"EmptySpaceBackgroundColor\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (View?.selection || arraymodeSelection)?.all\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection)?.all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable est-full-height {{ContainerClass}}\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10 est\" style=\"background-color: white;\"  [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 && !SingleSelection) || PagingStyle != 'bottom'\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden-view]=\"!canSelectAll && !(View?.selection || arraymodeSelection)?.all && PagingStyle == 'bottom'\">\r\n                        <p class=\"est-hidden-view app-margin-bottom-0\">\u00A7</p>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <ng-container *ngIf=\"RowThGroups\">\r\n                    <tr *ngFor=\"let level of RowThGroups; trackBy: IDTrackBy\">\r\n                        <th *ngFor=\"let cell of level; trackBy: IDTrackBy\" [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;\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-cell-group-padding\"></div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!cell.Pinned && cell.Content; Else: cell.Template\">\r\n                                {{cell.Content}}\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!RowThGroups\">\r\n                    <tr *ngIf=\"HasHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"headerGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n    \r\n                    <!-- Blocco header group secondario -->\r\n                    <tr *ngIf=\"HasSecondaryHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"secondaryHeaderGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection && !HasPinnedColumns\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode -->\r\n                    <ng-container *ngIf=\"arrayMode || viewMode\">\r\n                        <!-- In una tabella base prendo semplicemente i th scritti dall'utente nell'HTML -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs || RowTHs.length == 0) && !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 || RowTHs.length == 0) && DynamicRowColumnsDefinition\">\r\n                            <th *ngFor=\"let operation of DynamicOperations; trackBy: idTrackBy\" class=\"est-col-min est-no-side-padding\"></th>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition; trackBy: PropertyNameTrackBy\">\r\n                                <ng-container *ngIf=\"rowHeader.Visible\">\r\n                                    <th *ngIf=\"OrderByColumn\"  id=\"esth_{{rowHeader.PropertyName}}\" 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\" id=\"esth_{{rowHeader.PropertyName}}\" 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?.length > 0\">\r\n                            <th *ngIf=\"HasPinnedColumns\" class=\"est-pinned-header est-col-min\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-simple-border-bottom\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\" [style.width.px]=\"20\">\r\n                                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let rowHeader of RowTHs; trackBy: IDTrackBy\">\r\n                                        <th *ngIf=\"rowHeader && rowHeader.Visible && rowHeader.Pinned\" [style.width.px]=\"rowHeader.PinnedWidth\" es-th=\"{{rowHeader.ID}}\" \r\n                                            class=\"{{rowHeader.Class || ''}}\" \r\n                                            [class.est-pinned-internal-header]=\"true\" \r\n                                            [class.est-no-border]=\"true\" \r\n                                            [class.est-nowrap]=\"!rowHeader.Wrap\" \r\n                                            [Pinned]=\"true\" [Fixed]=\"rowHeader.Fixed\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\" (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n                                            <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template; context: { $implicit: rowHeader.Multi ? rowHeader.MultiContent : null } \"></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; trackBy: IDTrackBy\">\r\n\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class || ''}}\" [class.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n                                    <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template; context: { $implicit: rowHeader.Multi ? rowHeader.MultiContent : null }\"></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                    <!--Per l'eliminazione mi serve un header aggiuntivo-->\r\n                    <th *ngIf=\"Removal\" [class.est-right-9]=\"Export || HiddenColumns\" class=\"est-col-min est-sticky-last-column\"><span class=\"fa fa-trash\"></span></th>\r\n\r\n                    <!--Per l'esportazione mi serve l'header extra da cui faccio uscire i 3 pallocchi-->\r\n                    <th *ngIf=\"Export || HiddenColumns || ColumnsOrdering || CornerMenuOptions\" class=\"est-table-dotted-menu est-sticky-last-column est-col-min text-sm-center\">\r\n                        \r\n                        <!-- Blocco con i 3 pallocchi che tira fuori il context menu delle operazioni -->\r\n                        <div class=\"btn-group\" container=\"body\" placement=\"bottom right\" dropdown #dropdown=\"bs-dropdown\" [autoClose]=\"true\">\r\n                            <span dropdownToggle class=\"fa fa-ellipsis-v est-fs-18 est-pointer est-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right est-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"HiddenColumns || ColumnsOrdering\" (click)=\"columnMetadata_H.resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"export_H.tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"export_H.tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions; trackBy: idTrackBy\" (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            <tbody [hidden]=\"BodyHidden || FirstBind\" [class.est-no-selection]=\"RangeSelection\">\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        </table>\r\n    </div>\r\n\r\n    <div *ngIf=\"PagingStyle == 'both' || PagingStyle == 'bottom'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n</div>\r\n\r\n<!-- Template che contiene tutte le info di paginazione in modo da poterlo replicare anche sopra -->\r\n<ng-template #pagingElement>\r\n    <ng-container *ngIf=\"!FirstBind\">\r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div *ngIf=\"PagerOptions.ShowPaging && PagerOptions.ShowButtons && (PagerOptions.PagerCount > 10 || PagerOptions.PagerCount == -1)\" class=\"pull-right btn-toolbar\">\r\n            <ng-container *ngIf=\"PagerOptions.View?.pagingavailable || viewMode\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-right\" *ngIf=\"PagerOptions.ShowCount || PagerOptions.ShowPagingOptions\">\r\n            <div class=\"est-mt-min-5\" *ngIf=\"PagerOptions.ShowPaging\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [GroupMode]=\"PagerOptions.Searches == 'groups'\" [AllSearch]=\"AllSearch\" [View]=\"PagerOptions.View\" (pagingSelected)=\"onItemsPerPageChanged($event);\"></app-paging>\r\n            </div>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <div class=\"est-flex\" [class.est-margin-left-50]=\"options.Margin\">\r\n        <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n        <div *ngIf=\"options.Array\" class=\"est-inline\"><a *ngFor=\"let p of options.Array; trackBy: valTrackBy\" class=\"btn est-page-sel {{p.cssClass}}\" (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a></div>\r\n        <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index; trackBy: bodyTrackBy\">\r\n        <tr *ngIf=\"item._visible || (!Hierarchy && !ArrayGrouping)\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\" \r\n            [class.est-pointer]=\"!item.locked\" \r\n            [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"!RangeSelection && handleRowClick($event, item, true)\"\r\n            (contextmenu)=\"onRightClick();\">\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=\"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; trackBy: bodyTrackBy\">\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)=\"handleRowClick($event, item, false)\">\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=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #groupPager let-item>\r\n    <td class=\"est-pinned-body \" *ngIf=\"HasPinnedColumns\">\r\n        <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-cell-group-padding\"></div>\r\n    </td>\r\n    <td *ngIf=\"item._grouplevel > 1\" [attr.colspan]=\"item._grouplevel-1\"></td>\r\n    <td [attr.colspan]=\"Columns.VisibleUnpinned - (item._grouplevel > 0 ? item._grouplevel - 1 : 0)\">\r\n        <div class=\"est-rg-sep-flex-right\" *ngIf=\"RowGroupingPagingStyle == 'right'\">\r\n            <div class=\"est-rg-page\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n            <div class=\"est-rg-ipp\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><app-paging [CountLabel]=\"CountLabel\" [AllSearch]=\"AllSearch\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n        </div>\r\n\r\n        <div class=\"est-rg-sep-flex-left\" *ngIf=\"RowGroupingPagingStyle == 'left'\">\r\n            <div class=\"est-rg-ipp\"><app-paging [AllSearch]=\"AllSearch\" [CountLabel]=\"CountLabel\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n            <div class=\"est-rg-page\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || EmptyRowTds) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEditor let-ctx>\r\n    <!-- Un po' triste ma questo \u00E8 il metodo pi\u00F9 semplice per gestire il cambio di modello -->\r\n    <ng-container *ngIf=\"ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Options]=\"ctx.definition.EditorOptions\" [FocusSubject]=\"FocusSubject\" [(ngModel)]=\"ctx.item.properties[ctx.definition.PropertyName]\" name=\"{{ ctx.definition.PropertyName + '_' + ctx.item._hash }}\" [Type]=\"ctx.definition.PropertyType\" [Source]=\"ctx.definition.PropertySource\" (inputFinalized)=\"ctx.finalizer()\"></form-adaptive>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Options]=\"ctx.definition.EditorOptions\" [FocusSubject]=\"FocusSubject\" [(ngModel)]=\"ctx.item[ctx.definition.PropertyName]\" name=\"{{ ctx.definition.PropertyName + '_' + ctx.item._hash }}\" [Type]=\"ctx.definition.PropertyType\" [Source]=\"ctx.definition.PropertySource\" (inputFinalized)=\"ctx.finalizer()\"></form-adaptive>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-ctx>\r\n    <!-- TODO: Formattare il valore in base a valType.type -->\r\n    <ng-container *ngIf=\"ctx.type == 'enum'\">\r\n        {{ (ctx.value | est_lookup : ctx.definition.PropertySource).description }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"ctx.type != 'enum'\">\r\n        {{ctx.value}}\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #customCells let-item let-opt=\"templateOptions\">\r\n    <ng-container *ngIf=\"UseCustomCells && !EmptyRowTds\">\r\n        <!-- Cella che aggrega tutte le colonne che devono essere pinnate -->\r\n        <td *ngIf=\"HasPinnedColumns\" class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\" [style.width.px]=\"20\">\r\n                    <input type=\"checkbox\" [disabled]=\"opt.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{item._hash}}\" (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n                </td>\r\n                <td class=\"est-no-border est-col-min\" *ngIf=\"(item.locked || item._sep) && Selection\" [style.width.px]=\"20\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index; trackBy: IDTrackBy\">\r\n                    <ng-container *ngIf=\"rowItem.Pinned\">\r\n                        <ng-container *ngTemplateOutlet=\"customTd; context: { $implicit: { item: item, rowItem : rowItem, i:i, Pinned: true } };\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <!-- Eventuali operazioni custom nelle prime righe... hanno senso solo in modalit\u00E0 dinamica ma non si sa mai -->\r\n        <ng-container *ngTemplateOutlet=\"customOperations; context: {$implicit: item };\"></ng-container>\r\n\r\n        <!-- Body effettivo della riga -->\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index; trackBy: IDTrackBy\">\r\n            <ng-container *ngIf=\"!rowItem.Pinned\">\r\n                <ng-container *ngTemplateOutlet=\"customTd; context: {$implicit: {item: item, rowItem : rowItem, i:i, Pinned: false} };\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Blocco di operazioni custom da far apparire all'inizio della tabella -->\r\n<ng-template #customOperations let-item>\r\n    <ng-container *ngFor=\"let operation of DynamicOperations; let first = first; let last = last; trackBy: idTrackBy\">\r\n        <ng-container *ngIf=\"!operation.conditionField || ((item.properties ? item.properties[operation.conditionField] : item[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 ? item.properties[operation.conditionField] : item[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-template>\r\n\r\n<!-- Cella customizzata, elemento grafico base per la tabella -->\r\n<ng-template #customTd let-ctx>\r\n    <!-----------------------------------------------------------------------------------------------------------------------\r\n    -   ATTENZIONE: Gli spazi fra le propriet\u00E0 di questo mega td sono significativi e dividono la dichiarazione in sezioni: -\r\n    -   . Generiche                                                                                                         -\r\n    -   . Gestione allineamento e colori per la modalit\u00E0 report                                                             -\r\n    -   . Gestioni grafiche particolari per il Pinned                                                                       -\r\n    -   . Gestione della selezione a singola cella in assenza di pinned                                                     -\r\n    -   . Gestione click classico                                                                                           -\r\n    ------------------------------------------------------------------------------------------------------------------------->\r\n\r\n    <!-- class=\"{{ UserDefinedDynamicCols  ? ctx.rowItem.Class : 'est-nowrap'}} est-default-row-height\"  -->\r\n\r\n    <td *ngIf=\"ctx.rowItem?.Visible\" \r\n        es-td=\"{{ctx.rowItem.Property || ctx.rowItem.ID}}\"\r\n        id=\"estd_{{ctx.rowItem.Property || ctx.rowItem.ID}}_{{ctx.item._ordinal}}_{{ctx.i}}\" \r\n        class=\"{{ ctx.rowItem.Class }} est-default-row-height\" \r\n        [Context]=\"ctx.item._hash\" \r\n        [class.est-no-selection]=\"Editable && ctx.rowItem.PropertyName\" \r\n        [class.est-rg-hdr]=\"ctx.rowItem.GroupHeader\" \r\n        [class.est-rg-agg]=\"ctx.rowItem.GroupAggregation\"\r\n        [class.est-nowrap]=\"Hierarchy || !ctx.rowItem.Wraps\"\r\n        \r\n        [style.text-align]=\" (!ctx.Pinned && ctx.rowItem.Alignment) ? ctx.rowItem.Alignment : null\"\r\n        [style.color]=\"(!ctx.Pinned && ctx.item.forecolors && ctx.rowItem.PropAccessor) ? ctx.item.forecolors[ctx.rowItem.PropAccessor] : null\"\r\n        [style.background-color]=\"(!ctx.Pinned && ctx.item.backcolors && ctx.rowItem.PropAccessor) ? ctx.item.backcolors[ctx.rowItem.PropAccessor] : null\"\r\n\r\n        [style.width.px]=\"ctx.Pinned ? ctx.rowItem.PinnedWidth : null\"\r\n        [class.est-no-border]=\"ctx.Pinned\"\r\n\r\n        [class.est-ltab-border]=\"ctx.rowItem.LeftBorder && !selectionStatus[ctx.item._ordinal][ctx.i]?.lborder\" \r\n        [class.est-rtab-border]=\"ctx.rowItem.RightBorder && !selectionStatus[ctx.item._ordinal][ctx.i]?.rborder\" \r\n\r\n        [class.est-selected-cell]=\"selectionStatus[ctx.item._ordinal][ctx.i]?.selected\"\r\n        [class.est-cell-lborder]=\"selectionStatus[ctx.item._ordinal][ctx.i]?.lborder\"\r\n        [class.est-cell-rborder]=\"selectionStatus[ctx.item._ordinal][ctx.i]?.rborder\"\r\n        [class.est-cell-tborder]=\"selectionStatus[ctx.item._ordinal][ctx.i]?.tborder\"\r\n        [class.est-cell-bborder]=\"selectionStatus[ctx.item._ordinal][ctx.i]?.bborder\"\r\n\r\n        [class.est-cell-lborder-tmp]=\"!ctx.rowItem.LeftBorder && !selectionStatus[ctx.item._ordinal][ctx.i]?.lborder && !selectionStatus[ctx.item._ordinal][ctx.i]?.loverlaps\"\r\n        [class.est-cell-rborder-tmp]=\"!ctx.rowItem.RightBorder && !selectionStatus[ctx.item._ordinal][ctx.i]?.rborder && !selectionStatus[ctx.item._ordinal][ctx.i]?.roverlaps\"\r\n        [class.est-cell-tborder-tmp]=\"!selectionStatus[ctx.item._ordinal][ctx.i]?.tborder && !selectionStatus[ctx.item._ordinal][ctx.i]?.toverlaps\"\r\n        [class.est-cell-bborder-tmp]=\"!selectionStatus[ctx.item._ordinal][ctx.i]?.bborder && !selectionStatus[ctx.item._ordinal][ctx.i]?.boverlaps\"\r\n\r\n        (mousedown)=\"mousedown($event, ctx.rowItem, ctx.item)\" \r\n        (mouseenter)=\"mouseenter($event)\" \r\n        (mouseup)=\"mouseup($event)\"\r\n        (onCellGeneration)=\"registerCell($event)\"\r\n        \r\n        (click)=\"dbClickEditOrSingleClickRowSelection($event, ctx.rowItem, ctx.item)\">\r\n\r\n        <div [class.est-edit-hidden]=\"ctx.rowItem._editing\" [class.est-pre]=\"!(Hierarchy && ctx.i == 0)\">\r\n\r\n            <ng-container #DEBUG>\r\n                <!-- Debug box in caso la roba che viene scritta nelle celle non torni. Scirvere qui i propri binding per controllare cose -->\r\n            </ng-container>\r\n\r\n            <!-- 90% Template disponibile, quindi derivante da *td, controllo giusto che non sia un field particolare multi -->\r\n            <ng-container *ngIf=\"ctx.rowItem.Template\">\r\n                <ng-container *ngIf=\"!ctx.rowItem.Multi\"><ng-container *ngTemplateOutlet=\"ctx.rowItem.Template; context: { $implicit: ctx.item }\"></ng-container></ng-container>\r\n                <span *ngIf=\"ctx.rowItem.Multi\"><ng-container *ngTemplateOutlet=\"ctx.rowItem.Template; context: { $implicit: (ctx.item[ctx.rowItem.MultiProp] ? ctx.item[ctx.rowItem.MultiProp][ctx.rowItem.MultiIndex] : {}) }\"></ng-container></span>\r\n            </ng-container>\r\n            \r\n            <!-- 8%\r\n                Template non disponibile, pu\u00F2 venire da \r\n                RoutePath in caso sia un link di una tabella dinamica\r\n                PropAccessor in caso di ReportRow (quindi oggetti con \"values\"  dentro), \r\n                o Renderer se modalit\u00E0 dinamica/standard (in qual caso il renderer \u00E8 il default)\r\n            -->\r\n            <ng-container *ngIf=\"!ctx.rowItem.Template && !ctx.rowItem.Multi && !ctx.rowItem.Content\">\r\n                <a *ngIf=\"ctx.rowItem.RoutePath\" [routerLink]=\"ctx.item | est_routerlink : ctx.rowItem.RoutePath : ctx.rowItem.RouteParameterProperties\" class=\"est-link\" [innerHTML]=\"ctx.item.properties ? ctx.item.properties[ctx.rowItem.PropertyName] : ctx.item[ctx.rowItem.PropertyName]\"></a>\r\n                \r\n                <span *ngIf=\"ctx.rowItem.PropAccessor\">\r\n                    {{(ctx.item.values? ctx.item.values[ctx.rowItem.PropAccessor] : ctx.item[ctx.rowItem.PropAccessor]) | est_format: ctx.rowItem.Format }}\r\n                </span>\r\n\r\n                <ng-container *ngIf=\"!ctx.rowItem.PropAccessor && !ctx.rowItem.RoutePath\">\r\n                    <ng-container *ngTemplateOutlet=\"ctx.rowItem.PropertyName | est_renderer: { name: ctx.rowItem.RendererName, src: EsTdsDirective, fallback: defaultEsTd }; context: { $implicit: { definition: ctx.rowItem, value: ctx.item.properties ? ctx.item.properties[ctx.rowItem.PropertyName] : ctx.item[ctx.rowItem.PropertyName], type: ctx.rowItem.PropertyType} }\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- 1% Se in modalit\u00E0 gerarchica metto il td per navigare la gerarchia -->\r\n            <ng-container *ngIf=\"Hierarchy && ctx.i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: ctx.item }\"></ng-container></ng-container>\r\n\r\n            <!-- 1% Content programmatico per le casistiche di Row Grouping ecc... -->\r\n            <ng-container *ngIf=\"ctx.rowItem.Content\">\r\n                {{ctx.rowItem.Content}}\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"ctx.rowItem._editing\" class=\"est-mt-min-5\">\r\n            <ng-container *ngTemplateOutlet=\"ctx.rowItem.PropertyName | est_editor: { name: ctx.rowItem.EditorName, src: EsTdEditorDirectives, fallback: defaultEditor}; context: { $implicit: { definition: ctx.rowItem, columnIndex: ctx.i, item: ctx.item, finalizer: finalizeUserEdit.bind(this, ctx.rowItem, ctx.item, ctx.i) } }\"></ng-container>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Navigatore della gerarchia di una view gerarchica, con tasto per espandere e collassare -->\r\n<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"hierarchyMode_H.collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"hierarchyMode_H.expandParent(item[this.OwnKey])\"></span>\r\n    &nbsp;\r\n</ng-template>\r\n\r\n<!-- Pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove est-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"est-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem><span><em>{{'No operations available' | localize : lc}}...</em></span></ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" cdkDrag>\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header est-pointer\" cdkDragHandle>\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info est-padding-10 est-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm est-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"columnMetadata_H.globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <!-- <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th> -->\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                                <!-- Pinner -->\r\n                                <th *ngIf=\"DirectivesBased\" class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody \r\n                            cdkDropList \r\n                            [cdkDropListData]=\"TMPColumnsList\" \r\n                            (cdkDropListDropped)=\"columnMetadata_H.columnReordered($event)\" \r\n                            [cdkDropListSortPredicate]=\"columnMetadata_H.sortPredicate.bind(this.columnMetadata_H)\"\r\n                            class=\"est-dropbox\">\r\n\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last; trackBy: idTrackBy\" \r\n                                class=\"est-pointer est-droplist\" \r\n                                [class.est-white-selected]=\"lastSelectedItemID == item.id\" \r\n                                [class.est-no-selection]=\"!item.visible\"\r\n                                cdkDrag\r\n                                [cdkDragData]=\"item\"\r\n                                [cdkDragDisabled]=\"!ColumnsOrdering || item.fixed || item.pinned\">\r\n\r\n                                <td *ngIf=\"HiddenColumns\">\r\n                                    <input type=\"checkbox\" [class.est-hidden-view]=\"item.fixed\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"columnMetadata_H.updateGlobalColVisCheck();\" />\r\n                                </td>\r\n                                <td class=\"est-nowrap drag-visible\" (click)=\"columnMetadata_H.columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\r\n                                        <!-- Padri -->\r\n                                        <span *ngIf=\"item.parentTemplates && item.parentTemplates.length > 0\" class=\"est-fw-bold est-fs-13\">\r\n                                            (&nbsp;\r\n                                            <ng-container *ngFor=\"let parent of item.parentTemplates; let last=last; trackBy: idTrackBy\">\r\n                                                <ng-container *ngIf=\"parent.tmpl\"><ng-container *ngTemplateOutlet=\"parent.tmpl\"></ng-container></ng-container>\r\n                                                <ng-container *ngIf=\"parent.content\">{{parent.content}}</ng-container>\r\n                                                <span *ngIf=\"!last\">&nbsp;-&nbsp;</span>\r\n                                            </ng-container>\r\n                                            &nbsp;)\r\n                                        </span>\r\n                                        <!-- Template header originale -->\r\n                                        <ng-container *ngTemplateOutlet=\"item.template; context: { $implicit: item.multi ? item.multiContent : null }\"></ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"!item.template\">{{item.description}}</ng-container>\r\n                                </td>\r\n                                <!--Filler-->\r\n                                <td (click)=\"columnMetadata_H.columnClicked(item);\"></td>\r\n                                <!-- Pinner -->\r\n                                <td *ngIf=\"DirectivesBased && ColumnsPinnable\"><span *ngIf=\"!item.fixed && item.pinnable\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"columnMetadata_H.pinOrUnpinColumn(item)\"></span></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary est-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
+                styles: [".est-loading-box{height:200px;text-align:center;position:relative;background:#ccc}.est-loading-content{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:35px}.est-scrollable{max-height:600px;overflow:auto}.est-head-resizer{top:0;right:0;bottom:0;width:7px;position:absolute;cursor:col-resize}.est-head-resizer-internal{top:0;right:0;left:6px;bottom:0;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density td,.est-high-density th{padding:0 .2rem}.est-default-row-height{height:31px}.est-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}.est-edit-hidden{height:1px!important}.est-edit-hidden,.est-hidden-view{visibility:hidden}.est-no-border{border:none!important}.est-nowrap{white-space:nowrap}.est-mt-min-5{margin-top:-5px}.est-white-selected{background-color:#ddd!important}.est-line-through{text-decoration:line-through}.est-no-side-padding{padding-left:0;padding-right:0}.est-no-left-padding,.est-no-right-padding{padding-left:0}.est-col-min{width:1px}.est-margin-bottom-0{margin-bottom:0!important}.est-margin-right-10{margin-right:10px!important}.est-right-9{right:9px!important}.est-table-dotted-menu{padding:0 0 2px!important;color:#999}.est-fs-18{font-size:18px}.est-fs-13,.est-fs-14{font-size:14px}.est-fw-bold{font-weight:700}.est-padding-3{padding:3px!important}.est-page-container{position:relative}.est-bring-to-front-strong{z-index:99999999!important}.est-switch{position:relative;display:inline-block;width:30px;height:17px;margin-bottom:0;margin-right:5px;margin-left:5px}.est-switch input{display:none}.est-slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.est-slider,.est-slider:before{position:absolute;transition:.4s}.est-slider:before{content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{transform:translateX(11px)}.est-slider.round{border-radius:10px}.est-slider.round:before{border-radius:50%}.est-custom-input{width:30px;display:inline;padding:1px;height:20px}.est-row-lvl-1 td:first-child{padding-left:5px}.est-row-lvl-2 td:first-child{padding-left:20px}.est-row-lvl-3 td:first-child{padding-left:35px}.est-row-lvl-4 td:first-child{padding-left:50px}.est-row-lvl-5 td:first-child{padding-left:65px}.est-row-lvl-6 td:first-child{padding-left:80px}.est-row-lvl-7 td:first-child{padding-left:95px}.est-row-lvl-8 td:first-child{padding-left:110px}.est-row-lvl-9 td:first-child{padding-left:125px}.est-row-lvl-10 td:first-child{padding-left:140px}.est-row-lvl-11 td:first-child{padding-left:155px}.est-row-lvl-12 td:first-child{padding-left:170px}.est-row-lvl-13 td:first-child{padding-left:185px}.est-row-lvl-14 td:first-child{padding-left:200px}.est-row-lvl-15 td:first-child{padding-left:215px}.est-row-lvl-16 td:first-child{padding-left:230px}.est-row-lvl-17 td:first-child{padding-left:245px}.est-row-lvl-18 td:first-child{padding-left:260px}.est-row-lvl-19 td:first-child{padding-left:275px}.est-row-lvl-20 td:first-child{padding-left:290px}.est-row-lvl-21 td:first-child{padding-left:305px}.est-row-lvl-22 td:first-child{padding-left:320px}.est-row-lvl-23 td:first-child{padding-left:335px}.est-row-lvl-24 td:first-child{padding-left:350px}.est-row-lvl-25 td:first-child{padding-left:365px}.est-row-lvl-26 td:first-child{padding-left:380px}.est-row-lvl-27 td:first-child{padding-left:395px}.est-row-lvl-28 td:first-child{padding-left:410px}.est-row-lvl-29 td:first-child{padding-left:425px}.est-row-lvl-30 td:first-child{padding-left:440px}.est-row-lvl-31 td:first-child{padding-left:455px}.est-row-lvl-32 td:first-child{padding-left:470px}.est-row-lvl-33 td:first-child{padding-left:485px}.est-row-lvl-34 td:first-child{padding-left:500px}.est-row-lvl-35 td:first-child{padding-left:515px}.est-row-lvl-36 td:first-child{padding-left:530px}.est-row-lvl-37 td:first-child{padding-left:545px}.est-row-lvl-38 td:first-child{padding-left:560px}.est-row-lvl-39 td:first-child{padding-left:575px}.est-row-lvl-40 td:first-child{padding-left:590px}.est-row-lvl-41 td:first-child{padding-left:605px}.est-row-lvl-42 td:first-child{padding-left:620px}.est-row-lvl-43 td:first-child{padding-left:635px}.est-row-lvl-44 td:first-child{padding-left:650px}.est-row-lvl-45 td:first-child{padding-left:665px}.est-row-lvl-46 td:first-child{padding-left:680px}.est-row-lvl-47 td:first-child{padding-left:695px}.est-row-lvl-48 td:first-child{padding-left:710px}.est-row-lvl-49 td:first-child{padding-left:725px}.est-row-lvl-50 td:first-child{padding-left:740px}.est-row-lvl-51 td:first-child{padding-left:755px}.est-row-lvl-52 td:first-child{padding-left:770px}.est-row-lvl-53 td:first-child{padding-left:785px}.est-row-lvl-54 td:first-child{padding-left:800px}.est-row-lvl-55 td:first-child{padding-left:815px}.est-row-lvl-56 td:first-child{padding-left:830px}.est-row-lvl-57 td:first-child{padding-left:845px}.est-row-lvl-58 td:first-child{padding-left:860px}.est-row-lvl-59 td:first-child{padding-left:875px}.est-row-lvl-60 td:first-child{padding-left:890px}.est-row-lvl-61 td:first-child{padding-left:905px}.est-row-lvl-62 td:first-child{padding-left:920px}.est-row-lvl-63 td:first-child{padding-left:935px}.est-row-lvl-64 td:first-child{padding-left:950px}.est-row-lvl-65 td:first-child{padding-left:965px}.est-row-lvl-66 td:first-child{padding-left:980px}.est-row-lvl-67 td:first-child{padding-left:995px}.est-row-lvl-68 td:first-child{padding-left:1010px}.est-row-lvl-69 td:first-child{padding-left:1025px}.est-row-lvl-70 td:first-child{padding-left:1040px}.est-row-lvl-71 td:first-child{padding-left:1055px}.est-row-lvl-72 td:first-child{padding-left:1070px}.est-row-lvl-73 td:first-child{padding-left:1085px}.est-row-lvl-74 td:first-child{padding-left:1100px}.est-row-lvl-75 td:first-child{padding-left:1115px}.est-row-lvl-76 td:first-child{padding-left:1130px}.est-row-lvl-77 td:first-child{padding-left:1145px}.est-row-lvl-78 td:first-child{padding-left:1160px}.est-row-lvl-79 td:first-child{padding-left:1175px}.est-row-lvl-80 td:first-child{padding-left:1190px}.est-row-lvl-81 td:first-child{padding-left:1205px}.est-row-lvl-82 td:first-child{padding-left:1220px}.est-row-lvl-83 td:first-child{padding-left:1235px}.est-row-lvl-84 td:first-child{padding-left:1250px}.est-row-lvl-85 td:first-child{padding-left:1265px}.est-row-lvl-86 td:first-child{padding-left:1280px}.est-row-lvl-87 td:first-child{padding-left:1295px}.est-row-lvl-88 td:first-child{padding-left:1310px}.est-row-lvl-89 td:first-child{padding-left:1325px}.est-row-lvl-90 td:first-child{padding-left:1340px}.est-row-lvl-91 td:first-child{padding-left:1355px}.est-row-lvl-92 td:first-child{padding-left:1370px}.est-row-lvl-93 td:first-child{padding-left:1385px}.est-row-lvl-94 td:first-child{padding-left:1400px}.est-row-lvl-95 td:first-child{padding-left:1415px}.est-row-lvl-96 td:first-child{padding-left:1430px}.est-row-lvl-97 td:first-child{padding-left:1445px}.est-row-lvl-98 td:first-child{padding-left:1460px}.est-row-lvl-99 td:first-child{padding-left:1475px}.est-relative{position:relative}.est-top-pager{position:absolute;right:0;top:5px}.est-top-allselect{position:absolute;left:0;top:5px;font-weight:700}.est-padding-10{padding:10px!important}.est-margin-right-50{margin-right:50px}.est-margin-left-50{margin-left:50px}.est-quick-unpin{color:#000;margin-left:8px;font-size:14px;transform:rotate(45deg)}.est-full-height{height:100%}.est-page-sel{color:#000;margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-next,.est-page-prev{color:#000;font-size:inherit;padding:2px 0 0}.est-pinned-header{background-color:#fff;left:0;top:0;position:-webkit-sticky;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0 solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:-webkit-sticky;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:-webkit-sticky;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:-webkit-sticky;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:1px solid #bbb!important}.est-rtab-border{border-right:1px solid #bbb!important}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-selected-cell{background-color:rgba(33,150,243,.2)}.est-cell-lborder{border-left:1.02px solid #2196f3!important}.est-cell-tborder{border-top:1.02px solid #2196f3!important}.est-cell-rborder{border-right:1.02px solid #2196f3!important}.est-cell-bborder{border-bottom:1.02px solid #2196f3!important}.est-cell-lborder-tmp{border-left:1.02px solid transparent!important}.est-cell-tborder-tmp{border-top:1.02px solid transparent!important}.est-cell-rborder-tmp{border-right:1.02px solid transparent!important}.est-cell-bborder-tmp{border-bottom:1.02px solid transparent!important}.est-margin-bottom-10{margin-bottom:10px}.est-text-center{text-align:center}.est-flex{display:flex}.est-rg-sep-flex-right{display:flex;flex-direction:row-reverse;width:100%;margin:-5px}.est-rg-sep-flex-left{display:flex;flex-direction:row;width:100%;margin:-5px}.est-rg-hdr{font-weight:700}.est-rg-agg{font-style:italic}.est-rg{background-color:hsla(0,0%,46.7%,.4666666666666667)!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:hsla(0,0%,73.3%,.7333333333333333)!important}.est-rg-ipp{text-align:left;display:inline-flex;margin-right:25px}.est-rg-page{text-align:right;display:inline-flex;font-size:inherit;padding-top:5px}.est-droplist.cdk-drag-placeholder{opacity:0}.est-droplist.cdk-drag-preview{z-index:999999999!important;opacity:1;box-sizing:border-box;border-radius:4px;background-color:#fff;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.est-droplist.cdk-drag-preview td:not(.drag-visible){visibility:hidden}.est-droplist.cdk-drag-preview td.drag-visible{padding-top:3px}.est-droplist.cdk-drag-animating,.est-droplist.cdk-drop-list-dragging .est-dropbox:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.est-pre{white-space:pre}.est val-datetime .mat-form-field-appearance-outline .mat-form-field-infix input{margin-bottom:3px!important;min-width:130px!important}.est .mat-form-field-flex{height:29px!important;padding:0!important}.est .mat-form-field-flex .mat-form-field-outline{color:#00f}.est .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-start{border-left:none;border-top:none;border-radius:0}.est .mat-form-field-flex .mat-form-field-outline .mat-form-field-outline-end{border-top:none;border-radius:0;border-right:none}.est .mat-form-field-wrapper{height:20px;min-height:20px!important;margin-top:0!important}.est .mat-form-field-infix{width:100%!important;min-width:50px!important}.est .mat-form-field-infix select.mat-input-element{margin-top:-5px!important}.est .mat-datepicker-input{margin-bottom:3px!important}.est input{height:20px;padding-top:0!important}"]
             },] }
 ];
 EsTableComponent.ctorParameters = () => [
@@ -4948,7 +5066,8 @@ EsTableComponent.ctorParameters = () => [
     { type: DateService },
     { type: MessageService },
     { type: CopyPasteDetector },
-    { type: ClipboardService }
+    { type: ClipboardService },
+    { type: Logger }
 ];
 EsTableComponent.propDecorators = {
     EsTdEditorDirectives: [{ type: ContentChildren, args: [EsTdEditorDirective,] }],
@@ -4967,7 +5086,6 @@ EsTableComponent.propDecorators = {
     Height: [{ type: Input }],
     EmptySpaceBackgroundColor: [{ type: Input }],
     EsTableHandledSearch: [{ type: Input }],
-    UseCustomCells: [{ type: Input }],
     MaxHeight: [{ type: Input }],
     ContainerClass: [{ type: Input }],
     XLSXExport: [{ type: Input }],
@@ -5185,7 +5303,7 @@ class EsTh {
 EsTh.decorators = [
     { type: Component, args: [{
                 selector: "[es-th]",
-                template: "<span (click)=\"setupNextOrderAndNotify()\" [class.app-no-selection]=\"!!ID && Orderable\" [class.app-pointer]=\"!!ID && Orderable\">\r\n    <span #content>\r\n        <ng-container *ngIf=\"Template\">\r\n            <ng-container *ngTemplateOutlet=\"Template\"></ng-container>\r\n        </ng-container>\r\n        <ng-content *ngIf=\"!Template\"></ng-content>\r\n    </span>&nbsp;\r\n    <span class=\"fa\" [class.fa-chevron-down]=\"Order == 'DESC'\" [class.fa-chevron-up]=\"Order == 'ASC'\"></span>\r\n</span>\r\n<span *ngIf=\"Pinned && !Fixed\" class=\"app-pointer fa fa-thumb-tack est-quick-unpin\" (click)=\"unpin()\"></span>\r\n<div [hidden]=\"!Resizable || Fixed || Pinned\" class=\"est-head-resizer\" (mousedown)=\"onResizeStart($event)\">\r\n    <div class=\"est-head-resizer-internal\"></div>\r\n</div>",
+                template: "<span (click)=\"setupNextOrderAndNotify()\" [class.app-no-selection]=\"!!ID && Orderable\" [class.app-pointer]=\"!!ID && Orderable\">\r\n    <span #content>\r\n        <ng-container *ngIf=\"!!Template\">\r\n            <ng-container *ngTemplateOutlet=\"Template\"></ng-container>\r\n        </ng-container>\r\n        <ng-content *ngIf=\"!Template\"></ng-content>\r\n    </span>&nbsp;\r\n    <span class=\"fa\" [class.fa-chevron-down]=\"Order == 'DESC'\" [class.fa-chevron-up]=\"Order == 'ASC'\"></span>\r\n</span>\r\n<span *ngIf=\"Pinned && !Fixed\" class=\"app-pointer fa fa-thumb-tack est-quick-unpin\" (click)=\"unpin()\"></span>\r\n<div [hidden]=\"!Resizable || Fixed || Pinned\" class=\"est-head-resizer\" (mousedown)=\"onResizeStart($event)\">\r\n    <div class=\"est-head-resizer-internal\"></div>\r\n</div>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -5213,59 +5331,26 @@ EsTh.propDecorators = {
     onMouseMove: [{ type: HostListener, args: ['window:mousemove.out-zone', ['$event'],] }]
 };
 
-//Angular
+// Angular
 /** Componente rappresentante una singola cella del body della tabella */
 class EsTd {
     /** @ignore */
-    constructor(cdr, myself, renderer, sanitizer) {
+    constructor(cdr) {
         this.cdr = cdr;
-        this.myself = myself;
-        this.renderer = renderer;
-        this.sanitizer = sanitizer;
         /** Id della cella, dev'essere lo stesso della colonna **EsTh** relativa */
         this.ID = "";
-        /** Valore da mostrare all'interno della cella. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
-        this.Display = null;
-        /** Template Angular da istanziare per questo TD */
-        this.Template = null;
         /** Quando questa cella viene generata questo evento permette di dire "ehi, sono nato!"  */
         this.onCellGeneration = new EventEmitter();
-        // Ema commenta grazie
+        /** Errore attualmente presente sulla cella */
         this.ValidationError = "";
     }
-    /**
-     * Imposta la visibilità o meno della cella, si traduce nell'applicazione o rimozione della classe **app-display-none**
-     *
-     * @param {boolean} expression Indicazione della visibilità
-     */
-    set Visible(expression) {
-        this._Visible = expression;
-        if (expression)
-            this.renderer.removeClass(this.myself.nativeElement, "app-display-none");
-        else
-            this.renderer.addClass(this.myself.nativeElement, "app-display-none");
-    }
-    /**
-     * Restituisce lo stato di Visibilità della cella in oggetto
-     *
-     * @returns {boolean} **true** se visibile, **false** altrimenti
-     */
-    get Visible() {
-        if (this._Visible == undefined)
-            this._Visible = true;
-        return this._Visible;
-    }
     /** @ignore */
     ngAfterViewInit() {
         this.onCellGeneration.emit({ id: this.ID, hash: this.Context, self: this });
-        // Se è Internal significa che è gestita internamente da ES-TABLE quindi evito di fare sti due passaggi di lettura del DOM
-        if (this.Internal)
-            return;
-        this.Content = this.Display === null || this.Display === "" ? this.sanitizer.bypassSecurityTrustHtml(this.myself.nativeElement.innerHTML) : this.sanitizer.bypassSecurityTrustHtml(this.Display);
-        this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
     }
-    validationError(isError, error) {
-        this.ValidationError = isError ? error : "";
+    /** Api per impostare un "errore" su questa cella in maniera programmatica */
+    validationError(error) {
+        this.ValidationError = error;
         this.cdr.markForCheck();
     }
 }
@@ -5278,20 +5363,12 @@ EsTd.decorators = [
             },] }
 ];
 EsTd.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: DomSanitizer }
+    { type: ChangeDetectorRef }
 ];
 EsTd.propDecorators = {
     ID: [{ type: Input, args: ['es-td',] }],
-    Internal: [{ type: Input }],
-    RouterLink: [{ type: Input }],
-    Display: [{ type: Input }],
-    Template: [{ type: Input }],
     Context: [{ type: Input }],
-    onCellGeneration: [{ type: Output }],
-    Visible: [{ type: Input }]
+    onCellGeneration: [{ type: Output }]
 };
 
 // Angular
@@ -5349,12 +5426,148 @@ EstLookupPipe.decorators = [
     { type: Pipe, args: [{ name: 'est_lookup' },] }
 ];
 
+class EstRouterLinkPipe {
+    constructor() {
+        /** Cache per i routerLink generati nelle tabelle dinamiche */
+        this.routerLinksCache = {};
+    }
+    transform(item, path, parameters) {
+        if (this.routerLinksCache[item._hash + path]) {
+            return this.routerLinksCache[item._hash + path];
+        }
+        else {
+            let link = this.getRouterLink(path, parameters, item);
+            this.routerLinksCache[item._hash + path] = link;
+            return link;
+        }
+    }
+    /**
+     * Crea un router link
+     *
+     * @param {string} path Path su cui navigare con eventuali parametri riferiti all'oggetto cotnestuale come {0}, {1}, ecc...
+     * @param {string[]} pars Lista posizionale delle proprietà a cui bindare i riferimenti del parametro **path**
+     * Es. Il valore dela proprietà all'indice 0 di questo array verrà sostituita al valore {0} del parametro **path**
+     * @param {any} item Oggetto collegato a questo contesto. Può essere un oggetto generico (con "properties") o un oggetto ben definito
+     *
+     * @returns {any} Router link generato in base al parametri
+     */
+    getRouterLink(path, pars, item) {
+        for (let i = 0; i < pars.length; i++)
+            path = path.replace('{' + i + '}', item.properties ? item.properties[pars[i]] : item[pars[i]]);
+        path = path.replace(/'/g, '"').replace(/ /g, '');
+        return JSON.parse(path);
+    }
+}
+EstRouterLinkPipe.decorators = [
+    { type: Pipe, args: [{ name: 'est_routerlink' },] }
+];
+
+// Angular
+class EstRendererPipe {
+    constructor(logger) {
+        this.logger = logger;
+    }
+    transform(propName, params) {
+        var EsTd = null;
+        // Perf. Version di `params.src.find((item) => params.name ? item.td === params.name : item.tdForProperty === propName);`
+        for (let i = 0; i < params.src.length; i++) {
+            let item = params.src.get(i);
+            if (params.name && item.td === params.name ||
+                !params.name && item.tdForProperty === propName) {
+                EsTd = item;
+                break;
+            }
+        }
+        // Name non trovato, fallback al nome della colonna
+        if (propName && params.name && !EsTd) {
+            this.logger.log(`Renderer retrieved in a non performant way`);
+            EsTd = params.src.find((item) => item.tdForProperty === propName);
+        }
+        this.logger.log(`Renderer ${EsTd ? 'found' : 'NOT found'} for '${propName}${params.name ? '/' + params.name : ''}'${!EsTd ? '. Using fallback renderer' : ''}`);
+        var ret = EsTd ? EsTd.Template : params.fallback;
+        return ret;
+    }
+}
+EstRendererPipe.decorators = [
+    { type: Pipe, args: [{ name: 'est_renderer' },] }
+];
+EstRendererPipe.ctorParameters = () => [
+    { type: Logger }
+];
+
+// Angular
+class EstEditorPipe {
+    constructor(logger) {
+        this.logger = logger;
+    }
+    transform(propName, params) {
+        var Editor = null;
+        // Perf. Version di `params.src.find((item) => params.name ? item.editor === params.name : item.editorForProperty === propName);`
+        for (let i = 0; i < params.src.length; i++) {
+            let item = params.src.get(i);
+            if (params.name && item.editor === params.name ||
+                !params.name && item.editorForProperty === propName) {
+                Editor = item;
+                break;
+            }
+        }
+        // Name non trovato, fallback al nome della colonna
+        if (propName && params.name && !Editor) {
+            this.logger.log(`Editor retrieved in a non performant way`);
+            Editor = params.src.find((item) => item.editorForProperty === propName);
+        }
+        this.logger.log(`Editor ${Editor ? 'found' : 'NOT found'} for '${propName}${params.name ? '/' + params.name : ''}'${!Editor ? '. Using fallback editor' : ''}`);
+        var ret = Editor ? Editor.Template : params.fallback;
+        return ret;
+    }
+}
+EstEditorPipe.decorators = [
+    { type: Pipe, args: [{ name: 'est_editor' },] }
+];
+EstEditorPipe.ctorParameters = () => [
+    { type: Logger }
+];
+
+const MODULES = [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    LocalizationModule,
+    ModalModule,
+    BsDropdownModule,
+    ContextMenuModule,
+    MatSelectModule,
+    MatInputModule,
+    MatTooltipModule,
+    DragDropModule,
+    FormsAndValidationsModule
+];
+const PUBLIC_ELEMENTS = [
+    // Direttive
+    EsTdDirective,
+    EsThDirective,
+    EsTdEditorDirective,
+    // Componenti
+    EsTableComponent,
+    TablePagerComponent,
+    EsTableTemplate
+];
+const PRIVATE_ELEMENTS = [
+    // Componenti
+    EsTh,
+    EsTd,
+    // Pipes
+    EstFormatPipe,
+    EstLookupPipe,
+    EstRouterLinkPipe,
+    EstRendererPipe,
+    EstEditorPipe
+];
 class EsTableModule {
     static forRoot(config) {
         return {
             ngModule: EsTableModule,
             providers: [
-                CopyPasteDetector,
                 { provide: EST_LOCALE, useValue: (config === null || config === void 0 ? void 0 : config.locale) || 'it-IT' },
                 { provide: EST_DEBUG, useValue: (config === null || config === void 0 ? void 0 : config.debugMode) || false },
                 { provide: EST_DEFAULTS, useValue: (config === null || config === void 0 ? void 0 : config.defaults) || null },
@@ -5364,23 +5577,10 @@ class EsTableModule {
 }
 EsTableModule.decorators = [
     { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    RouterModule,
-                    LocalizationModule,
-                    ModalModule,
-                    BsDropdownModule,
-                    ContextMenuModule,
-                    MatSelectModule,
-                    MatInputModule,
-                    MatTooltipModule,
-                    DragDropModule,
-                    FormsAndValidationsModule
-                ],
-                declarations: [EsTh, EsTd, EsTableComponent, EsTdDirective, EsThDirective, EsTdEditorDirective, TablePagerComponent, EsTableTemplate, EstFormatPipe, EstLookupPipe],
+                imports: [MODULES],
+                declarations: [...PUBLIC_ELEMENTS, ...PRIVATE_ELEMENTS],
                 providers: [UtilityService, ExportService, HashingService, MessageService],
-                exports: [EsTableComponent, EsTdDirective, EsThDirective, EsTdEditorDirective, TablePagerComponent, EsTableTemplate]
+                exports: [...PUBLIC_ELEMENTS]
             },] }
 ];
 
@@ -5466,5 +5666,5 @@ class ItemPropEditableReference {
  * Generated bundle index. Do not edit.
  */
 
-export { AppOrdering, AppSearch, CornerMenuOption, EsTableColumnsDefinition, EsTableComponent, EsTableDefaultable, EsTableModelChange, EsTableModule, EsTableModuleConfig, EsTableMultiValue, EsTableOperationDefinition, EsTableTemplate, EsTdDirective, EsTdEditorDirective, EsTdReference, EsThDirective, GenericItem, Group, GroupAggregation, GroupFilter, GroupOrAggregation, ItemPropEditableReference, ItemsSelection, ReportColumn, ReportParam, ReportRow, TablePagerComponent, TablePagerLoc as ɵa, EST_LOCALE as ɵb, EST_DEBUG as ɵc, EST_DEFAULTS as ɵd, EsTableLoc as ɵe, UtilitiesHandler as ɵf, CopyPasteDetector as ɵg, EsTh as ɵh, EsTd as ɵi, EstFormatPipe as ɵj, EstLookupPipe as ɵk };
+export { AppOrdering, AppSearch, CornerMenuOption, EsTableColumnsDefinition, EsTableComponent, EsTableDefaultable, EsTableModelChange, EsTableModule, EsTableModuleConfig, EsTableMultiValue, EsTableOperationDefinition, EsTableTemplate, EsTdDirective, EsTdEditorDirective, EsTdReference, EsThDirective, GenericItem, Group, GroupAggregation, GroupFilter, GroupOrAggregation, ItemPropEditableReference, ItemsSelection, ReportColumn, ReportParam, ReportRow, TablePagerComponent, TablePagerLoc as ɵa, EST_LOCALE as ɵb, EST_DEBUG as ɵc, EST_DEFAULTS as ɵd, EsTableLoc as ɵe, UtilitiesHandler as ɵf, CopyPasteDetector as ɵg, Logger as ɵh, EsTh as ɵi, EsTd as ɵj, EstFormatPipe as ɵk, EstLookupPipe as ɵl, EstRouterLinkPipe as ɵm, EstRendererPipe as ɵn, EstEditorPipe as ɵo };
 //# sourceMappingURL=esfaenza-es-table.js.map