@esfaenza/es-table 11.2.121 → 11.2.123-beta1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@esfaenza/localizations'), require('@esfaenza/extensions'), require('@angular/forms'), require('@esfaenza/preferences'), require('@angular/cdk/drag-drop'), require('rxjs'), require('@angular/common'), require('@angular/router'), require('@angular/material/select'), require('@angular/material/input'), require('@angular/material/tooltip'), require('@esfaenza/forms-and-validations'), require('@angular/platform-browser'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('@esfaenza/ngx-contextmenu')) :
-    typeof define === 'function' && define.amd ? define('@esfaenza/es-table', ['exports', '@angular/core', '@esfaenza/localizations', '@esfaenza/extensions', '@angular/forms', '@esfaenza/preferences', '@angular/cdk/drag-drop', 'rxjs', '@angular/common', '@angular/router', '@angular/material/select', '@angular/material/input', '@angular/material/tooltip', '@esfaenza/forms-and-validations', '@angular/platform-browser', 'ngx-bootstrap/modal', 'ngx-bootstrap/dropdown', '@esfaenza/ngx-contextmenu'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['es-table'] = {}), global.ng.core, global.localizations, global.i1, global.ng.forms, global.preferences, global.ng.cdk.dragDrop, global.rxjs, global.ng.common, global.ng.router, global.ng.material.select, global.ng.material.input, global.ng.material.tooltip, global.formsAndValidations, global.ng.platformBrowser, global.modal, global.dropdown, global.ngxContextmenu));
-}(this, (function (exports, i0, localizations, i1, forms, preferences, dragDrop, rxjs, common, router, select, input, tooltip, formsAndValidations, platformBrowser, modal, dropdown, ngxContextmenu) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@esfaenza/localizations'), require('@esfaenza/extensions'), require('@angular/forms'), require('@esfaenza/preferences'), require('@angular/cdk/drag-drop'), require('rxjs'), require('@angular/common'), require('@angular/router'), require('@angular/material/select'), require('@angular/material/input'), require('@angular/material/tooltip'), require('@esfaenza/forms-and-validations'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/dropdown'), require('@esfaenza/ngx-contextmenu')) :
+    typeof define === 'function' && define.amd ? define('@esfaenza/es-table', ['exports', '@angular/core', '@esfaenza/localizations', '@esfaenza/extensions', '@angular/forms', '@esfaenza/preferences', '@angular/cdk/drag-drop', 'rxjs', '@angular/common', '@angular/router', '@angular/material/select', '@angular/material/input', '@angular/material/tooltip', '@esfaenza/forms-and-validations', 'ngx-bootstrap/modal', 'ngx-bootstrap/dropdown', '@esfaenza/ngx-contextmenu'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.esfaenza = global.esfaenza || {}, global.esfaenza['es-table'] = {}), global.ng.core, global.localizations, global.i1, global.ng.forms, global.preferences, global.ng.cdk.dragDrop, global.rxjs, global.ng.common, global.ng.router, global.ng.material.select, global.ng.material.input, global.ng.material.tooltip, global.formsAndValidations, global.modal, global.dropdown, global.ngxContextmenu));
+}(this, (function (exports, i0, localizations, i1, forms, preferences, dragDrop, rxjs, common, router, select, input, tooltip, formsAndValidations, modal, dropdown, ngxContextmenu) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -667,6 +667,8 @@
             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 = {};
         }
         return EsThDirective;
     }());
@@ -701,7 +703,12 @@
         thStaticContent: [{ type: i0.Input }],
         thBackgroundColor: [{ type: i0.Input }],
         thAlignment: [{ type: i0.Input }],
-        thFormat: [{ type: i0.Input }]
+        thFormat: [{ type: i0.Input }],
+        thEditorName: [{ type: i0.Input }],
+        thEditorOptions: [{ type: i0.Input }],
+        thRendererName: [{ type: i0.Input }],
+        thRoutePath: [{ type: i0.Input }],
+        thRouteParameterProperties: [{ type: i0.Input }]
     };
 
     /** Direttiva che rappresenta il template dell'editor di una cella all'interno della tabella */
@@ -920,7 +927,7 @@
         ExportHandler.prototype.setupExport = function (items) {
             var drcd = this.est.DynamicRowColumnsDefinition;
             this.est.headers = drcd && drcd.length > 0 ?
-                this.expExts.setupForGenericExport(items, drcd.map(function (t) { return { label: t.Description, key: t.PropertyName, order: t.ColumnOrder, type: 'string' }; })) :
+                this.expExts.setupForGenericExport(items, drcd.map(function (t) { return { label: t.Description, key: t.PropertyName, propKey: t.PropertyName, order: t.ColumnOrder, type: 'string' }; })) :
                 this.expExts.setupForExport(items, this.est.ExportOnlyVisibleColumns ? this.est.ColumnsList.filter(function (t) { return t.visible; }).map(function (t) { return t.id; }) : null);
             this.est.data = items;
         };
@@ -957,7 +964,7 @@
          * @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
          */
@@ -1436,7 +1443,7 @@
                 return;
             /****** STEP 1: Creo l'output dei raggruppamenti per header in modo da non dovermi preoccupare di celle non inizializzate ******/
             var expandedGroups = [];
-            var visibleUnpinnedLeafs = infos.leafs.filter(function (t) { return t.thVisible && !t.thPinned; });
+            var visibleUnpinnedLeafs = infos.leafs.filter(function (t) { return t.thVisible && t.thIf && !t.thPinned; });
             for (var l = 0; l < infos.groupingLevel; l++) {
                 expandedGroups.push([]);
                 for (var i = 0; i < visibleUnpinnedLeafs.length; i++)
@@ -1446,7 +1453,7 @@
             var orderedLeafs = [];
             for (var i = 0; i < this.est.OrderDirectives.length; i++) {
                 var 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 ******/
@@ -1470,7 +1477,7 @@
                     }
                 }
             }
-            /****** 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 = "";
             var currentSpan = 0;
             var finalHeaders = [];
@@ -1478,25 +1485,25 @@
                 var 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 (var h = 0; h < expandedGroups[l].length; h++) {
                     var item = expandedGroups[l][h];
                     if (item == currentParent)
                         currentSpan++;
                     else {
                         if (currentSpan > 0)
-                            levelArray.push({ Span: currentSpan, Template: currentParent ? infos.thsCache[currentParent].Template : null, 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 = "";
             }
@@ -1532,9 +1539,9 @@
                 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);
@@ -1599,7 +1606,9 @@
                     var newContext = [];
                     this_3.est.OrderDirectives.forEach(function (o) {
                         var contextItem = context.filter(function (t) { return t.ID == o; })[0];
-                        newContext.push(contextItem);
+                        // potrebbe esser undefined nel caso ci fossero colonne sotto thIf
+                        if (contextItem)
+                            newContext.push(contextItem);
                     });
                     this_3.est.TMPRowTDs[this_3.est.RowContexts[i]] = newContext;
                 };
@@ -1824,7 +1833,7 @@
          * @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
          */
-        function EsTableColumnsDefinition(Description, PropertyName, RoutePath, RouteParameterProperties, DataOrder, ColumnOrder, Visible, Clss, Orderable, HeaderWraps, PropertyType, PropertySource, EditorName, RendererName, EditorOptions) {
+        function EsTableColumnsDefinition(Description, PropertyName, RoutePath, RouteParameterProperties, DataOrder, ColumnOrder, Visible, Clss, Orderable, HeaderWraps, PropertyType, PropertySource, EditorName, RendererName, EditorOptions, Pinned, PinnedWidth, Pinnable, Grouping) {
             if (RoutePath === void 0) { RoutePath = null; }
             if (RouteParameterProperties === void 0) { RouteParameterProperties = null; }
             if (DataOrder === void 0) { DataOrder = null; }
@@ -1838,6 +1847,10 @@
             if (EditorName === void 0) { EditorName = ""; }
             if (RendererName === void 0) { RendererName = ""; }
             if (EditorOptions === void 0) { EditorOptions = {}; }
+            if (Pinned === void 0) { Pinned = false; }
+            if (PinnedWidth === void 0) { PinnedWidth = 150; }
+            if (Pinnable === void 0) { Pinnable = true; }
+            if (Grouping === void 0) { Grouping = ""; }
             this.Description = Description;
             this.PropertyName = PropertyName;
             this.RoutePath = RoutePath;
@@ -1853,10 +1866,13 @@
             this.EditorName = EditorName;
             this.RendererName = RendererName;
             this.EditorOptions = EditorOptions;
-            this.edits = {};
+            this.Pinned = Pinned;
+            this.PinnedWidth = PinnedWidth;
+            this.Pinnable = Pinnable;
+            this.Grouping = Grouping;
         }
         EsTableColumnsDefinition.build = function (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);
+            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);
         };
         return EsTableColumnsDefinition;
     }());
@@ -1867,42 +1883,6 @@
         function DynamicModeHandler(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
-         */
-        DynamicModeHandler.prototype.generateRouterLink = function (path, parameterProps, item) {
-            if (this.est.DynamicTableRouterLinkCache[item._hash + path]) {
-                return this.est.DynamicTableRouterLinkCache[item._hash + path];
-            }
-            else {
-                var 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
-         */
-        DynamicModeHandler.prototype.getRouterLink = function (path, pars, item) {
-            for (var 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 */
         DynamicModeHandler.prototype.eventuallyReviewDynamicColumns = function () {
             // Senza oggetti esco
@@ -1921,6 +1901,61 @@
             else
                 this.est.UserDefinedDynamicCols = true;
         };
+        /** Genera partendo dalle **DynamicRowColumnsDefinition** la lista di **EsThDirective** e **EsTdDirective** che servono per la tabella */
+        DynamicModeHandler.prototype.emitThsAndTdsBasedOnDynamicDefinition = function () {
+            // Senza dynamic columns esco
+            if (!this.est.DynamicRowColumnsDefinition || this.est.DynamicRowColumnsDefinition.length == 0)
+                return null;
+            var ths = [];
+            var tds = [];
+            for (var i = 0; i < this.est.DynamicRowColumnsDefinition.length; i++) {
+                var col = this.est.DynamicRowColumnsDefinition[i];
+                ths.push(this.getTh(col));
+                tds.push(this.getTd(col));
+            }
+            return { ths: ths, tds: tds };
+        };
+        /** @ignore Helper */
+        DynamicModeHandler.prototype.getTh = function (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 */
+        DynamicModeHandler.prototype.getTd = function (col) {
+            var ret = new EsTdDirective(null);
+            ret.td = col.PropertyName;
+            ret.tdClass = col.Clss;
+            //ret.tdAlignment = col.Alignment;
+            //ret.tdFormat = col.Format;
+            return ret;
+        };
         return DynamicModeHandler;
     }());
 
@@ -3567,65 +3602,61 @@
          * @param {{ row: number, column: number }} firstSelectionOverride Permette di overridare il primo elemento selezionato
          */
         SelectionHandler.prototype.singleCellSelection = function (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: row, column: 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: row, column: column });
-                var rowAddition = row < first.row ? -1 : +1;
-                var columnAddition = column < first.column ? -1 : +1;
-                for (var ir = first.row; ir != row + rowAddition; ir += rowAddition) {
-                    var firstRow = ir == first.row;
-                    var lastRow = ir == row;
-                    for (var ic = first.column; ic != column + columnAddition; ic += columnAddition) {
-                        var firstCol = ic == first.column;
-                        var 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: row, column: column };
-            }
-            else {
-                // Ripulisco escludendo l'oggetto attuale che eventualmente ci penso io a deseezionare
-                this.clearSelectionStatus({ row: row, column: column });
-                var 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: row, column: 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();
         };
+        SelectionHandler.prototype.setSelectionStatusBorders = function (from, to) {
+            var rowAddition = to.row < from.row ? -1 : +1;
+            var columnAddition = to.column < from.column ? -1 : +1;
+            var singleItem = from == to;
+            for (var ir = from.row; ir != to.row + rowAddition; ir += rowAddition) {
+                var firstRow = ir == from.row;
+                var lastRow = ir == to.row;
+                for (var ic = from.column; ic != to.column + columnAddition; ic += columnAddition) {
+                    var firstCol = ic == from.column;
+                    var lastCol = ic == to.column;
+                    var current = this.est.selectionStatus[ir][ic];
+                    var prevColumn = ic > 0 ? this.est.selectionStatus[ir][ic - 1] : null;
+                    var nextcolumn = this.est.selectionStatus[ir][ic + 1];
+                    var prevRow = ir > 0 ? this.est.selectionStatus[ir - 1][ic] : null;
+                    var 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
          */
-        SelectionHandler.prototype.clearSelectionStatus = function (exclusion) {
+        SelectionHandler.prototype.clearSelectionStatusExcluding = function (exclusion) {
             for (var row in this.est.selectionStatus) {
                 for (var 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
+                    var 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;
                 }
             }
         };
@@ -3655,10 +3686,10 @@
          */
         SelectionHandler.prototype.clearTextSelection = function (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();
         };
         /**
@@ -3807,10 +3838,7 @@
                 for (var 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;
         };
@@ -3888,15 +3916,36 @@
         }
         return CopyPasteDetector;
     }());
+    CopyPasteDetector.ɵprov = i0.ɵɵdefineInjectable({ factory: function CopyPasteDetector_Factory() { return new CopyPasteDetector(); }, token: CopyPasteDetector, providedIn: "root" });
     CopyPasteDetector.decorators = [
-        { type: i0.Injectable }
+        { type: i0.Injectable, args: [{ providedIn: "root" },] }
     ];
     CopyPasteDetector.ctorParameters = function () { return []; };
 
+    /** Classe che fornisce dei metodi di estensione in grado di riconoscere e dispatchare l'evento copia e incolla lanciato su una pagina web */
+    var Logger = /** @class */ (function () {
+        /** @ignore */
+        function Logger(debugMode) {
+            this.debugMode = debugMode;
+        }
+        Logger.prototype.log = function (text) {
+            if (this.debugMode)
+                console.log("[@esfaenza/es-table @ " + (new Date()).toISOString() + "] " + text);
+        };
+        return Logger;
+    }());
+    Logger.ɵprov = i0.ɵɵdefineInjectable({ factory: function Logger_Factory() { return new Logger(i0.ɵɵinject(EST_DEBUG, 8)); }, token: Logger, providedIn: "root" });
+    Logger.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: "root" },] }
+    ];
+    Logger.ctorParameters = function () { return [
+        { type: Boolean, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [EST_DEBUG,] }] }
+    ]; };
+
     /** Componente che permette di rappresentare una griglia di valori */
     var EsTableComponent = /** @class */ (function () {
         /** @ignore */
-        function EsTableComponent(ngControl, prefService, deafults, locale, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts, copyPasteDetector, clipboardService) {
+        function EsTableComponent(ngControl, prefService, deafults, locale, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts, copyPasteDetector, clipboardService, logger) {
             var _this = this;
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             this.ngControl = ngControl;
@@ -3912,6 +3961,7 @@
             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 rxjs.Subject();
             /** Se vengono effettuati 2 click a distanza inferiore a questi Millisecondi viene considerato un doppio click */
@@ -3997,6 +4047,10 @@
             this.ColumnsPinnable = null;
             /** Indica se dev'essere disponibile il sistema di aggiornamento automatico */
             this.AutoUpdate = null;
+            /** Indica l'altezza cablata che deve assumere la tabella. Es: "100px" | "100%" ...  */
+            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.
              *
@@ -4213,9 +4267,19 @@
             /** @ignore */
             this.propagateChange = function (_) { };
             /** Funzione di trackby per il body che dovrebbe evitare il 90% delle change detection */
-            this.bodyTrackBy = function (index, item) { return item._hash; };
+            this.bodyTrackBy = function (_, item) { return item._hash; };
+            /** Funzione di trackby generica per tutti gli oggetti che hanno il campo id */
+            this.idTrackBy = function (_, item) { return item.id; };
+            /** Funzione di trackby generica per tutti gli oggetti che hanno il campo PropertyName */
+            this.PropertyNameTrackBy = function (_, item) { return item.PropertyName; };
+            /** Funzione di trackby generica per tutti gli oggetti che hanno il campo ID */
+            this.IDTrackBy = function (_, item) { return item.ID; };
+            /** Funzione di trackby generica per tutti gli oggetti che hanno il campo ID */
+            this.valTrackBy = function (_, item) { return item.val; };
             // Range selection Experimentals
             this.mouseIsDown = false;
+            this.rangeSelected = false;
+            this.rangeStartWasIgnored = false;
             this.firstCoordinates = null;
             //* Piango
             this.EsTdsCache = {};
@@ -4267,7 +4331,7 @@
                     return;
                 var 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)
@@ -4587,7 +4651,7 @@
         };
         /** Per poter distinguere le chiamate a questo metodo: Dopo il setTimeout se uso gli EsTd/EsTh vecchi, senza il setTimeout se uso le nuove direttive */
         EsTableComponent.prototype.internalPostBoundSource = function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             var View = this.View;
             var 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;
             var 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;
@@ -4595,6 +4659,7 @@
             var 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();
@@ -4605,16 +4670,24 @@
                 var si = this.viewMode ? view.selection : this.arraymodeSelection;
                 // N.B: Rispettare l'ordine di queste 3 macrocategorie è VITALE
                 // *************************************        Sistemazioni di TH, TD, e visibilità varie      *************************************
+                // 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");
+                    var ret_1 = this.dynamicMode_H.emitThsAndTdsBasedOnDynamicDefinition();
+                    ths = ret_1.ths;
+                    tds = ret_1.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");
+                    var ret_2 = this.reportMode_H.generateThsAndTdsFromView(view);
+                    ths = ret_2.ths;
+                    tds = ret_2.tds;
+                }
                 // Espando i th e i td multipli duplicandoli
                 var ret = this.columnMetadata_H.expandMultiThsAndTds(ths, tds, itemsAndGroups);
                 ths = ret.expThs;
                 tds = ret.expTds;
-                // Gestione delle view in modalità report, i th e i td vengono rigenerati dalle configurazioni della view
-                if (!this.arrayMode && view.report_columns) {
-                    var ret_1 = this.reportMode_H.generateThsAndTdsFromView(view);
-                    ths = ret_1.ths;
-                    tds = ret_1.tds;
-                }
                 // 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 (var i = 0; i < ths.length; i++) {
                     var th = ths[i];
@@ -4778,6 +4851,7 @@
          * @param {EsTdDirective[]} tds Celle della tabella
          */
         EsTableComponent.prototype.evaluateRowTds = function (ths, tds) {
+            var _a;
             if (tds.length == 0)
                 return;
             var columnsCache = {};
@@ -4810,13 +4884,14 @@
                                 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,
@@ -4887,7 +4962,24 @@
                 var toAdd = void 0;
                 if (th.thIf || th.thGroup) {
                     var thClass = (th.thClass || '') + (th.thGroup ? " est-col-min" : "");
-                    toAdd = { Pinned: columnsListCache[th.th].pinned, Fixed: th.thFixed, PinnedWidth: th.thPinnedWidth, ID: th.th, Visible: th.thVisible, Class: thClass, Order: th.thOrder, Orderable: th.thOrderable, Template: th.Template, Content: 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
@@ -4988,7 +5080,7 @@
          */
         EsTableComponent.prototype.globalCheckChanged = function (forcedVal) {
             if (forcedVal === void 0) { 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
             var items = this.boundSource.find(function (t) { return t._group; }) ? this.boundSource.filter(function (t) { return t._group && !t._parent; }) : this.boundSource;
             var itemSelection = this.selection_H.handleItemsSelection(items, forcedVal, this.globalCheck);
@@ -5007,7 +5099,7 @@
          */
         EsTableComponent.prototype.handleClick = function (event, item) {
             this.selection_H.clearTextSelection(event);
-            this.selection_H.clearSelectionStatus();
+            this.selection_H.clearSelectionStatusExcluding(null);
             var selecteditems = [];
             if (event.shiftKey && this.ShiftClick && !this.SingleSelection) {
                 var startSelecting = false;
@@ -5232,25 +5324,35 @@
          * @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
          */
-        EsTableComponent.prototype.dbClickEditOrSingleClickRowSelection = function ($event, rowItem, item, rowIndex) {
+        EsTableComponent.prototype.dbClickEditOrSingleClickRowSelection = function ($event, rowItem, item) {
             var _this = this;
-            var _a, _b;
+            // 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(function () {
                     _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...
@@ -5261,8 +5363,7 @@
             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) {
@@ -5346,14 +5447,12 @@
             // 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();
         };
@@ -5375,15 +5474,11 @@
         EsTableComponent.prototype.setupUserEdit = function (rowItem, item) {
             var _this = this;
             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];
-                }
+                var 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(function () { _this.FocusSubject.next(); });
@@ -5398,7 +5493,7 @@
         EsTableComponent.prototype.finalizeUserEdit = function (rowItem, item, columnIndex) {
             var _a;
             var dynMode = ((_a = this.DynamicRowColumnsDefinition) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            var rowItm = dynMode ? (rowItem.edits[item._hash]) : rowItem;
+            var rowItm = rowItem;
             rowItm._editing = false;
             var old = rowItm.old_value;
             var niu = dynMode ? item.properties[rowItem.PropertyName] : item[rowItem.PropertyName];
@@ -5409,22 +5504,27 @@
             this.onModelChange.emit([new EsTableModelChange(item, rowItem.ID, rowItem.PropertyName, old, niu)]);
             this.selectionStatus[item._ordinal][columnIndex].val_setter(niu);
         };
-        EsTableComponent.prototype.mousedown = function (event, rowItem, item) {
-            var _a, _b;
+        EsTableComponent.prototype.mousedown = function (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;
-            var id = event.currentTarget.id;
             this.mouseIsDown = true;
-            var 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);
+            var coords = event.currentTarget.id.split('_');
+            var row = parseInt(coords[coords.length - 2]);
+            var column = parseInt(coords[coords.length - 1]);
+            this.firstCoordinates = { row: row, column: 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);
         };
         EsTableComponent.prototype.mouseenter = function (event) {
             if (!this.RangeSelection)
@@ -5434,14 +5534,34 @@
             if (this.mouseIsDown && this.firstCoordinates) {
                 var id = event.currentTarget.id;
                 var coords = id.split('_');
-                var 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);
+                var row = parseInt(coords[coords.length - 2]);
+                var 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;
             }
         };
         EsTableComponent.prototype.mouseup = function (event) {
             if (!this.RangeSelection)
                 return;
+            var id = event.currentTarget.id;
+            var coords = id.split('_');
+            var row = parseInt(coords[coords.length - 2]);
+            var 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");
         };
         EsTableComponent.prototype.getCellReference = function (object, column) {
             var fkThisShitImOut = this.utiExts.deepClone(object);
@@ -5462,8 +5582,8 @@
                     viewProviders: [{ provide: localizations.LocalizationService, useClass: EsTableLoc }],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (View?.selection || arraymodeSelection)?.all\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection)?.all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{ContainerClass}}\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10 est\"  [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-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 = function () { return [
@@ -5479,7 +5599,8 @@
         { type: i1.DateService },
         { type: i1.MessageService },
         { type: CopyPasteDetector },
-        { type: i1.ClipboardService }
+        { type: i1.ClipboardService },
+        { type: Logger }
     ]; };
     EsTableComponent.propDecorators = {
         EsTdEditorDirectives: [{ type: i0.ContentChildren, args: [EsTdEditorDirective,] }],
@@ -5495,6 +5616,8 @@
         ColumnsResizable: [{ type: i0.Input }],
         ColumnsPinnable: [{ type: i0.Input }],
         AutoUpdate: [{ type: i0.Input }],
+        Height: [{ type: i0.Input }],
+        EmptySpaceBackgroundColor: [{ type: i0.Input }],
         EsTableHandledSearch: [{ type: i0.Input }],
         UseCustomCells: [{ type: i0.Input }],
         MaxHeight: [{ type: i0.Input }],
@@ -5728,7 +5851,7 @@
     EsTh.decorators = [
         { type: i0.Component, args: [{
                     selector: "[es-th]",
-                    template: "<span (click)=\"setupNextOrderAndNotify()\" [class.app-no-selection]=\"!!ID && Orderable\" [class.app-pointer]=\"!!ID && Orderable\">\r\n    <span #content>\r\n        <ng-container *ngIf=\"Template\">\r\n            <ng-container *ngTemplateOutlet=\"Template\"></ng-container>\r\n        </ng-container>\r\n        <ng-content *ngIf=\"!Template\"></ng-content>\r\n    </span>&nbsp;\r\n    <span class=\"fa\" [class.fa-chevron-down]=\"Order == 'DESC'\" [class.fa-chevron-up]=\"Order == 'ASC'\"></span>\r\n</span>\r\n<span *ngIf=\"Pinned && !Fixed\" class=\"app-pointer fa fa-thumb-tack est-quick-unpin\" (click)=\"unpin()\"></span>\r\n<div [hidden]=\"!Resizable || Fixed || Pinned\" class=\"est-head-resizer\" (mousedown)=\"onResizeStart($event)\">\r\n    <div class=\"est-head-resizer-internal\"></div>\r\n</div>",
+                    template: "<span (click)=\"setupNextOrderAndNotify()\" [class.app-no-selection]=\"!!ID && Orderable\" [class.app-pointer]=\"!!ID && Orderable\">\r\n    <span #content>\r\n        <ng-container *ngIf=\"!!Template\">\r\n            <ng-container *ngTemplateOutlet=\"Template\"></ng-container>\r\n        </ng-container>\r\n        <ng-content *ngIf=\"!Template\"></ng-content>\r\n    </span>&nbsp;\r\n    <span class=\"fa\" [class.fa-chevron-down]=\"Order == 'DESC'\" [class.fa-chevron-up]=\"Order == 'ASC'\"></span>\r\n</span>\r\n<span *ngIf=\"Pinned && !Fixed\" class=\"app-pointer fa fa-thumb-tack est-quick-unpin\" (click)=\"unpin()\"></span>\r\n<div [hidden]=\"!Resizable || Fixed || Pinned\" class=\"est-head-resizer\" (mousedown)=\"onResizeStart($event)\">\r\n    <div class=\"est-head-resizer-internal\"></div>\r\n</div>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -5756,63 +5879,26 @@
         onMouseMove: [{ type: i0.HostListener, args: ['window:mousemove.out-zone', ['$event'],] }]
     };
 
-    //Angular
+    // Angular
     /** Componente rappresentante una singola cella del body della tabella */
     var EsTd = /** @class */ (function () {
         /** @ignore */
-        function EsTd(cdr, myself, renderer, sanitizer) {
+        function EsTd(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 i0.EventEmitter();
-            // Ema commenta grazie
+            /** Errore attualmente presente sulla cella */
             this.ValidationError = "";
         }
-        Object.defineProperty(EsTd.prototype, "Visible", {
-            /**
-             * Restituisce lo stato di Visibilità della cella in oggetto
-             *
-             * @returns {boolean} **true** se visibile, **false** altrimenti
-             */
-            get: function () {
-                if (this._Visible == undefined)
-                    this._Visible = true;
-                return this._Visible;
-            },
-            /**
-             * Imposta la visibilità o meno della cella, si traduce nell'applicazione o rimozione della classe **app-display-none**
-             *
-             * @param {boolean} expression Indicazione della visibilità
-             */
-            set: function (expression) {
-                this._Visible = expression;
-                if (expression)
-                    this.renderer.removeClass(this.myself.nativeElement, "app-display-none");
-                else
-                    this.renderer.addClass(this.myself.nativeElement, "app-display-none");
-            },
-            enumerable: false,
-            configurable: true
-        });
         /** @ignore */
         EsTd.prototype.ngAfterViewInit = function () {
             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", "");
         };
-        EsTd.prototype.validationError = function (isError, error) {
-            this.ValidationError = isError ? error : "";
+        /** Api per impostare un "errore" su questa cella in maniera programmatica */
+        EsTd.prototype.validationError = function (error) {
+            this.ValidationError = error;
             this.cdr.markForCheck();
         };
         return EsTd;
@@ -5826,20 +5912,12 @@
                 },] }
     ];
     EsTd.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 },
-        { type: platformBrowser.DomSanitizer }
+        { type: i0.ChangeDetectorRef }
     ]; };
     EsTd.propDecorators = {
         ID: [{ type: i0.Input, args: ['es-td',] }],
-        Internal: [{ type: i0.Input }],
-        RouterLink: [{ type: i0.Input }],
-        Display: [{ type: i0.Input }],
-        Template: [{ type: i0.Input }],
         Context: [{ type: i0.Input }],
-        onCellGeneration: [{ type: i0.Output }],
-        Visible: [{ type: i0.Input }]
+        onCellGeneration: [{ type: i0.Output }]
     };
 
     // Angular
@@ -5901,6 +5979,146 @@
         { type: i0.Pipe, args: [{ name: 'est_lookup' },] }
     ];
 
+    var EstRouterLinkPipe = /** @class */ (function () {
+        function EstRouterLinkPipe() {
+            /** Cache per i routerLink generati nelle tabelle dinamiche */
+            this.routerLinksCache = {};
+        }
+        EstRouterLinkPipe.prototype.transform = function (item, path, parameters) {
+            if (this.routerLinksCache[item._hash + path]) {
+                return this.routerLinksCache[item._hash + path];
+            }
+            else {
+                var 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
+         */
+        EstRouterLinkPipe.prototype.getRouterLink = function (path, pars, item) {
+            for (var 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);
+        };
+        return EstRouterLinkPipe;
+    }());
+    EstRouterLinkPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'est_routerlink' },] }
+    ];
+
+    // Angular
+    var EstRendererPipe = /** @class */ (function () {
+        function EstRendererPipe(logger) {
+            this.logger = logger;
+        }
+        EstRendererPipe.prototype.transform = function (propName, params) {
+            var EsTd = null;
+            // Perf. Version di `params.src.find((item) => params.name ? item.td === params.name : item.tdForProperty === propName);`
+            for (var i = 0; i < params.src.length; i++) {
+                var 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(function (item) { return 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;
+        };
+        return EstRendererPipe;
+    }());
+    EstRendererPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'est_renderer' },] }
+    ];
+    EstRendererPipe.ctorParameters = function () { return [
+        { type: Logger }
+    ]; };
+
+    // Angular
+    var EstEditorPipe = /** @class */ (function () {
+        function EstEditorPipe(logger) {
+            this.logger = logger;
+        }
+        EstEditorPipe.prototype.transform = function (propName, params) {
+            var Editor = null;
+            // Perf. Version di `params.src.find((item) => params.name ? item.editor === params.name : item.editorForProperty === propName);`
+            for (var i = 0; i < params.src.length; i++) {
+                var 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(function (item) { return 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;
+        };
+        return EstEditorPipe;
+    }());
+    EstEditorPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'est_editor' },] }
+    ];
+    EstEditorPipe.ctorParameters = function () { return [
+        { type: Logger }
+    ]; };
+
+    var MODULES = [
+        common.CommonModule,
+        forms.FormsModule,
+        router.RouterModule,
+        localizations.LocalizationModule,
+        modal.ModalModule,
+        dropdown.BsDropdownModule,
+        ngxContextmenu.ContextMenuModule,
+        select.MatSelectModule,
+        input.MatInputModule,
+        tooltip.MatTooltipModule,
+        dragDrop.DragDropModule,
+        formsAndValidations.FormsAndValidationsModule
+    ];
+    var PUBLIC_ELEMENTS = [
+        // Direttive
+        EsTdDirective,
+        EsThDirective,
+        EsTdEditorDirective,
+        // Componenti
+        EsTableComponent,
+        TablePagerComponent,
+        EsTableTemplate
+    ];
+    var PRIVATE_ELEMENTS = [
+        // Componenti
+        EsTh,
+        EsTd,
+        // Pipes
+        EstFormatPipe,
+        EstLookupPipe,
+        EstRouterLinkPipe,
+        EstRendererPipe,
+        EstEditorPipe
+    ];
     var EsTableModule = /** @class */ (function () {
         function EsTableModule() {
         }
@@ -5908,7 +6126,6 @@
             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 },
@@ -5919,23 +6136,10 @@
     }());
     EsTableModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        router.RouterModule,
-                        localizations.LocalizationModule,
-                        modal.ModalModule,
-                        dropdown.BsDropdownModule,
-                        ngxContextmenu.ContextMenuModule,
-                        select.MatSelectModule,
-                        input.MatInputModule,
-                        tooltip.MatTooltipModule,
-                        dragDrop.DragDropModule,
-                        formsAndValidations.FormsAndValidationsModule
-                    ],
-                    declarations: [EsTh, EsTd, EsTableComponent, EsTdDirective, EsThDirective, EsTdEditorDirective, TablePagerComponent, EsTableTemplate, EstFormatPipe, EstLookupPipe],
+                    imports: [MODULES],
+                    declarations: __spread(PUBLIC_ELEMENTS, PRIVATE_ELEMENTS),
                     providers: [i1.UtilityService, i1.ExportService, i1.HashingService, i1.MessageService],
-                    exports: [EsTableComponent, EsTdDirective, EsThDirective, EsTdEditorDirective, TablePagerComponent, EsTableTemplate]
+                    exports: __spread(PUBLIC_ELEMENTS)
                 },] }
     ];
 
@@ -6075,10 +6279,14 @@
     exports.ɵe = EsTableLoc;
     exports.ɵf = UtilitiesHandler;
     exports.ɵg = CopyPasteDetector;
-    exports.ɵh = EsTh;
-    exports.ɵi = EsTd;
-    exports.ɵj = EstFormatPipe;
-    exports.ɵk = EstLookupPipe;
+    exports.ɵh = Logger;
+    exports.ɵi = EsTh;
+    exports.ɵj = EsTd;
+    exports.ɵk = EstFormatPipe;
+    exports.ɵl = EstLookupPipe;
+    exports.ɵm = EstRouterLinkPipe;
+    exports.ɵn = EstRendererPipe;
+    exports.ɵo = EstEditorPipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });