@esfaenza/es-table 19.2.18 → 19.2.20

package/fesm2022/esfaenza-es-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, EventEmitter, signal, computed, effect, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Input, Self, Directive, Optional, ContentChildren, InjectionToken, Inject, HostListener, ViewChild, Pipe, ContentChild, NgModule } from '@angular/core';
+import { Injectable, input, EventEmitter, signal, computed, effect, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Input, Self, Directive, Optional, ContentChildren, InjectionToken, Inject, HostListener, ViewChild, Pipe, model, ContentChild, NgModule } from '@angular/core';
 import * as i2 from '@esfaenza/localizations';
 import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
 import * as i5 from '@esfaenza/extensions';
@@ -9,7 +9,7 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i5$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import { Subject, forkJoin } from 'rxjs';
+import { Subject, forkJoin, fromEvent, takeUntil } from 'rxjs';
 import * as i13 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@esfaenza/preferences';
@@ -576,10 +576,10 @@ class ExportHandler {
                 this.msgExts.simpleWarning(this.est.lc.loc("Cannot export an empty dataset"));
                 return;
             }
-            let drcd = this.est.DynamicRowColumnsDefinition;
-            let columnsFilter = this.est.ExportOnlyVisibleColumns ? this.est.ColumnsList.filter(t => t.visible).map(t => t.id) : null;
+            let drcd = this.est.DynamicRowColumnsDefinition();
+            let columnsFilter = this.est.ExportOnlyVisibleColumns() ? this.est.ColumnsList.filter(t => t.visible).map(t => t.id) : null;
             let csvHeadersOverride = drcd && drcd.length > 0 ? drcd.map(t => { return { label: t.Description, key: t.PropertyName, propKey: t.PropertyName, order: t.ColumnOrder, type: 'string' }; }) : null;
-            this.expExts.export(data, format, this.est.ExportFileName, type, columnsFilter, csvHeadersOverride);
+            this.expExts.export(data, format, this.est.ExportFileName(), type, columnsFilter, csvHeadersOverride);
         }, format);
     }
 }
@@ -650,13 +650,13 @@ class ColumnMetadataHandler {
      * @param {'DESC' | 'ASC'} order Nuovo ordine selezionato per la colonna
      */
     handleTHOrderChange(id, order) {
-        let orders = this.est.viewMode ? this.est.View.orders : this.est.arrayOrders;
+        let orders = this.est.viewMode() ? this.est.View.orders : this.est.arrayOrders;
         let orderToAdd = true;
         let orderToRemove = null;
         // Se per qualche motivo il costruttore non è passato (cache tarpate o simila) fixo
-        if (!orders && this.est.viewMode)
+        if (!orders && this.est.viewMode())
             this.est.View.orders = [];
-        else if (!orders && this.est.arrayMode)
+        else if (!orders && this.est.arrayMode())
             this.est.arrayOrders = [];
         for (let i = 0; i < orders.length; i++) {
             let t = orders[i];
@@ -673,23 +673,23 @@ class ColumnMetadataHandler {
             orders.splice(orderToRemove, 1);
         }
         else if (orderToAdd) {
-            if (this.est.MultipleOrderingDirectives)
+            if (this.est.MultipleOrderingDirectives())
                 orders.push(new AppOrdering(id, order));
             else {
-                if (this.est.viewMode)
+                if (this.est.viewMode())
                     this.est.View.orders = [new AppOrdering(id, order)];
-                else if (this.est.arrayMode)
+                else if (this.est.arrayMode())
                     this.est.arrayOrders = [new AppOrdering(id, order)];
             }
         }
         //Salvo le preferences di questa view
         //Di default registro ordinamento e visibilità delle colonne nella vista. Solo le cose di UI
-        if (this.est.SavePreferences) {
-            let castedView = this.est.viewMode ? (this.est.MainGroupView || this.est.View) : null;
+        if (this.est.SavePreferences()) {
+            let castedView = this.est.viewMode() ? (this.est.MainGroupView || this.est.View) : null;
             this.registerViewPreferences(castedView);
         }
         this.est.onOrderChanged.emit({ id, order });
-        if (this.est.viewMode) {
+        if (this.est.viewMode()) {
             if (this.est.groupSearchRequestsCache.length > 0)
                 this.rgH.emitRowGroupingSearches(id, orders);
             else
@@ -712,9 +712,10 @@ class ColumnMetadataHandler {
             console.error("Non posso utilizzare le preference senza che il pacchetto @esfaenza/preferences sia installato");
             return false;
         }
-        let columns = this.est.arrayMode ? this.est.arrayColumns : castedView.columns;
-        let columnsOrderings = this.est.arrayMode ? this.est.arrayColumnOrdering : castedView.column_ordering;
-        let columnOrders = this.est.arrayMode ? [] : castedView.orders;
+        let arrMode = this.est.arrayMode();
+        let columns = arrMode ? this.est.arrayColumns : castedView.columns;
+        let columnsOrderings = arrMode ? this.est.arrayColumnOrdering : castedView.column_ordering;
+        let columnOrders = arrMode ? [] : castedView.orders;
         var toStore = {
             columns: this.utiExts.deepClone(columns),
             column_ordering: this.utiExts.deepClone(columnsOrderings),
@@ -742,7 +743,7 @@ class ColumnMetadataHandler {
                 continue;
             // Salvo le informazioni dell'header per far parte della lista da cui scegliere quali colonne visualizzare/nascondere
             // Di default la visibilità è quella impostata nel componente
-            if ((this.est.HiddenColumns || th.thVisible) && th.thIf) {
+            if ((this.est.HiddenColumns() || th.thVisible) && th.thIf) {
                 let previouslyPinned = !this.est.ColumnsList || this.est.ColumnsList.length == 0 ? null : this.est.ColumnsList.find(t => t.id == column) || null;
                 let toAdd = new EsTableColumn(column, th.thStaticContent, th.thVisible, (th.thFixed || th.thGroup), previouslyPinned == null ? th.thPinned : previouslyPinned.pinned, th.thPinnable, th.thPinnedWidth, th.Template, th._thParents, th._multi, th._multi_content);
                 if (previouslyPinned)
@@ -910,39 +911,39 @@ class ColumnMetadataHandler {
             let item = tds[i];
             newTds[columnsIndexCache[item.td]] = item;
         }
-        this.est.HasPinnedColumns = pinneds > 0;
+        this.est.HasPinnedColumns.set(pinneds > 0);
     }
     /** In base alla configurazione delle colonne calcola le dimenioni delle colonne pinnate */
     evaluatePinnedColumnsWidth() {
-        if (!this.est.HasPinnedColumns)
+        if (!this.est.HasPinnedColumns())
             return;
-        this.est.PinnedContainerWidth = 0;
+        let pcw = 0;
         for (let i = 0; i < this.est.ColumnsList.length; i++) {
             let col = this.est.ColumnsList[i];
             if (col.pinned && col.visible)
-                this.est.PinnedContainerWidth += col.pinnedWidth;
+                pcw += col.pinnedWidth;
         }
-        this.est.PinnedContainerWidth += this.est.Selection ? 25 : 0;
+        pcw += this.est.Selection() ? 25 : 0;
+        this.est.PinnedContainerWidth.set(pcw);
     }
     /**
      * Terminato il binding delle colonne da **reviewColumnsList** e della **View** dal **writeValue** questo metodo si occupa
      * dell'allineamento delle informazioni fra le colonne calcolate internamente e le informazioni sulle colonne che arrivano dall'AppSearch
      *
      * @param {AppSearch<any>} view AppSearch da utilizzare per questa operazione
-     * @param {boolean} useLocalVisibility Indica di utilizzare le impostazioni di visibilità locali senza allinearle alla view
      */
     alignColumnsIfLoadedView(view) {
-        let emitChanged = this.est.viewMode && view.savedstate;
+        let emitChanged = this.est.viewMode() && view.savedstate;
         let newColset = [];
         if (!this.est.ColumnsList || this.est.ColumnsList.length == 0)
             return;
         let columns = [];
         // Modlaità view ->
-        if (this.est.viewMode) {
+        if (this.est.viewMode()) {
             // colonne dinamiche -> prendo l'insieme delle colonne e operazioni dinamiche definite
             // standard -> prendo le colonne della view
-            if (this.est.DynamicRowColumnsDefinition)
-                columns = [...(this.est.DynamicRowColumnsDefinition?.map(t => t.PropertyName) || []), ...(this.est.DynamicOperations?.map(t => t.id) || [])];
+            if (this.est.DynamicRowColumnsDefinition())
+                columns = [...(this.est.DynamicRowColumnsDefinition()?.map(t => t.PropertyName) || []), ...(this.est.DynamicOperations()?.map(t => t.id) || [])];
             else
                 columns = view.columns;
         }
@@ -967,12 +968,12 @@ class ColumnMetadataHandler {
         });
         // Non ho colonne nella appsearch, vuol dire che sono al primo binding
         if (columns.length == 0) {
-            if (this.est.viewMode)
+            if (this.est.viewMode())
                 view.columns = newColset;
             else
                 this.est.arrayColumns = newColset;
         }
-        if ((this.est.viewMode && view.savedstate) && this.est.ColumnsOrdering && view.column_ordering.length > 0) {
+        if ((this.est.viewMode() && view.savedstate) && this.est.ColumnsOrdering() && view.column_ordering.length > 0) {
             // Scorro gli ordinamenti che avevo salvato e ricreo la ColumnsList in base a loro
             let newColList = [];
             view.column_ordering.forEach(co => {
@@ -989,7 +990,7 @@ class ColumnMetadataHandler {
             this.est.ColumnsList = newColList;
         }
         // In ogni caso questo non mi serve più, lo resetto  **
-        if (this.est.viewMode)
+        if (this.est.viewMode())
             view.savedstate = false;
         // Reset di questa variabile usata one-bind
         if (this.est.useLocalVisibility)
@@ -1141,8 +1142,8 @@ class ColumnMetadataHandler {
         for (let l = 0; l < expandedGroups.length; l++) {
             let levelArray = [];
             finalHeaders.push(levelArray);
-            if (this.est.Selection || this.est.HasPinnedColumns)
-                levelArray.push({ ID: "_base_sel_pinned", Span: 1, Template: null, Pinned: this.est.HasPinnedColumns });
+            if (this.est.Selection() || this.est.HasPinnedColumns())
+                levelArray.push({ ID: "_base_sel_pinned", Span: 1, Template: null, Pinned: this.est.HasPinnedColumns() });
             for (let h = 0; h < expandedGroups[l].length; h++) {
                 let item = expandedGroups[l][h];
                 if (item == currentParent)
@@ -1157,9 +1158,9 @@ class ColumnMetadataHandler {
             // Ultima aggiunta che altrimenti mi rimarrebbe in cache
             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)
+            if (this.est.Removal())
                 levelArray.push({ ID: "_base_removal", Span: 1, Template: null });
-            if (this.est.Export || this.est.HiddenColumns || this.est.ColumnsOrdering || this.est.CornerMenuOptions)
+            if (this.est.Export() || this.est.HiddenColumns() || this.est.ColumnsOrdering() || this.est.CornerMenuOptions())
                 levelArray.push({ ID: "_base_extra_opts", Span: 1, Template: null });
             currentSpan = 0;
             currentParent = "";
@@ -1215,10 +1216,10 @@ class ColumnMetadataHandler {
             return;
         //*********************************************** Fix ordinamenti per colonne sparite ****************************** */
         // Considero solo gli ordinamenti per colonne effettivamente presenti all'interno della tabella
-        if (this.est.viewMode)
+        if (this.est.viewMode())
             view.column_ordering = view.column_ordering.filter(ord => ths.find(t => t.th == ord));
         //*********************************************** Fix ordinamenti per colonne sparite ****************************** */
-        let orderings = this.est.viewMode ? view.column_ordering : this.est.arrayColumnOrdering;
+        let orderings = this.est.viewMode() ? view.column_ordering : this.est.arrayColumnOrdering;
         // Genero ordinamento di default da 0 fino a dove deve arrivare. Situazione attuale senza hotpotato
         if (!orderings || orderings.length == 0) {
             for (let i = 0; i < ths.length; i++) {
@@ -1263,7 +1264,7 @@ class ColumnMetadataHandler {
                 let context = this.est.TMPRowTDs[this.est.RowContexts[i]];
                 let newContext = [];
                 this.est.OrderDirectives.forEach(o => {
-                    let contextItem = context.filter(t => t.ID == o)[0];
+                    let contextItem = context.filter(t => t().ID == o)[0];
                     // potrebbe esser undefined nel caso ci fossero colonne sotto thIf
                     if (contextItem)
                         newContext.push(contextItem);
@@ -1271,7 +1272,7 @@ class ColumnMetadataHandler {
                 this.est.TMPRowTDs[this.est.RowContexts[i]] = newContext;
             }
         }
-        if (this.est.viewMode)
+        if (this.est.viewMode())
             view.column_ordering = this.est.OrderDirectives;
         else
             this.est.arrayColumnOrdering = this.est.OrderDirectives;
@@ -1377,7 +1378,7 @@ class ColumnMetadataHandler {
     /** Effettua la selezione o meno del check globale (**globalColVisCheck**) di visibilità in base a se tutte le **TMPColumnsList** sono visibili o no */
     updateGlobalColVisCheck() {
         // TMPColList viene riempita di undefined nel caso in cui sia disattivata la selezione delle colonne nascoste
-        this.est.globalColVisCheck = this.est.TMPColumnsList.every(t => t.visible);
+        this.est.globalColVisCheck.set(this.est.TMPColumnsList.every(t => t.visible));
     }
     /**
      * Chiamato quando una colonna viene riordinata all'interno della lista delle visibilità/posizioni colonne
@@ -1410,7 +1411,7 @@ class ColumnMetadataHandler {
         // Non permetto di non selezionare nulla
         if (this.est.TMPColumnsList.every(t => !t.visible))
             return false;
-        let castedView = this.est.viewMode ? (this.est.MainGroupView || this.est.View) : null;
+        let castedView = this.est.viewMode() ? (this.est.MainGroupView || this.est.View) : null;
         this.est.ColumnsList = [];
         this.est.TMPColumnsList.forEach(c => { this.est.ColumnsList.push(Object.assign({}, c)); });
         this.refreshColumnOrdering();
@@ -1418,11 +1419,11 @@ class ColumnMetadataHandler {
         this.refreshColumnsVisibility(null, null, castedView);
         //Salvo le preferences di questa view
         //Di default registro ordinamento e visibilità delle colonne nella vista. Solo le cose di UI
-        if (this.est.SavePreferences)
+        if (this.est.SavePreferences())
             this.registerViewPreferences(castedView);
         // Rieseguo l'ultima ricerca bindata alla tabella
         // Mi assicuro di farlo dopo l'espansione del changed o rischio che la ricerca mi ridia colonne che in realtà non esistono
-        if (this.est.viewMode)
+        if (this.est.viewMode())
             setTimeout(() => {
                 if (this.est.MainGroupView) {
                     for (let i = 0; i < this.est.groupSearchRequestsCache.length; i++) {
@@ -1435,7 +1436,7 @@ class ColumnMetadataHandler {
                 else
                     this.est.emitSearchRequest(true);
             });
-        else if (this.est.arrayMode)
+        else if (this.est.arrayMode())
             setTimeout(() => { this.est.internalWriteValue(); });
         // Lo vorrei mettere lato template ma no
         this.est.lastSelectedItemID = null;
@@ -1455,7 +1456,7 @@ class ColumnMetadataHandler {
     globalColVisCheckChanged() {
         this.est.TMPColumnsList.forEach(t => {
             if (!t.fixed)
-                t.visible = this.est.globalColVisCheck;
+                t.visible = this.est.globalColVisCheck();
         });
     }
 }
@@ -1520,32 +1521,33 @@ class DynamicModeHandler {
         if (!this.est.TMPBoundSource || this.est.TMPBoundSource.length == 0)
             return;
         var useGenericItems = !!this.est.TMPBoundSource[0]["properties"];
-        if (!useGenericItems || (!this.est.FirstBind && this.est.DynamicRowColumnsDefinition && this.est.DynamicRowColumnsDefinition.length > 0))
+        if (!useGenericItems || (!this.est.FirstBind() && this.est.DynamicRowColumnsDefinition()?.length > 0))
             return;
-        if ((!this.est.DynamicRowColumnsDefinition || this.est.DynamicRowColumnsDefinition.length == 0)) {
+        if ((this.est.DynamicRowColumnsDefinition()?.length || 0) == 0) {
             var props = this.est.TMPBoundSource[0]["properties"];
-            this.est.DynamicRowColumnsDefinition = [];
+            let drcd = [];
             for (let key in props)
-                this.est.DynamicRowColumnsDefinition.push(new EsTableColumnsDefinition(key, key));
-            this.est.UserDefinedDynamicCols = false;
+                drcd.push(new EsTableColumnsDefinition(key, key));
+            this.est.DynamicRowColumnsDefinition.set(drcd);
+            this.est.UserDefinedDynamicCols.set(false);
         }
         else
-            this.est.UserDefinedDynamicCols = true;
+            this.est.UserDefinedDynamicCols.set(true);
     }
     /** Genera partendo dalle **DynamicRowColumnsDefinition** la lista di **EsThDirective** e **EsTdDirective** che servono per la tabella */
     emitThsAndTdsBasedOnDynamicDefinition() {
         // Senza dynamic columns esco
-        if (!this.est.DynamicRowColumnsDefinition || this.est.DynamicRowColumnsDefinition.length == 0)
+        if ((this.est.DynamicRowColumnsDefinition()?.length || 0) == 0)
             return null;
         let ths = [];
         let tds = [];
-        for (let i = 0; i < this.est.DynamicOperations.length; i++) {
-            let op = this.est.DynamicOperations[i];
+        for (let i = 0; i < this.est.DynamicOperations().length; i++) {
+            let op = this.est.DynamicOperations()[i];
             ths.push(this.getThFromOperation(op));
             tds.push(this.getTdFromOperation(op));
         }
-        for (let i = 0; i < this.est.DynamicRowColumnsDefinition.length; i++) {
-            let col = this.est.DynamicRowColumnsDefinition[i];
+        for (let i = 0; i < this.est.DynamicRowColumnsDefinition().length; i++) {
+            let col = this.est.DynamicRowColumnsDefinition()[i];
             ths.push(this.getThFromColumnDef(col));
             tds.push(this.getTdFromColumnDef(col));
         }
@@ -1629,14 +1631,14 @@ class HierarchyModeHandler {
         if (!objs || !objs.length)
             return;
         //Se mancano entrambe le info le cerco di valorizzare in automatico coi default "parentid" e "id" (posto che le props esistano nell'oggetto)
-        if (!this.est.ParentKey && !this.est.OwnKey) {
+        if (!this.est.ParentKey() && !this.est.OwnKey()) {
             if (objs[0]['parentid'] !== undefined)
-                this.est.ParentKey = 'parentid';
+                this.est.ParentKey.set('parentid');
             if (objs[0]['id'] !== undefined)
-                this.est.OwnKey = 'id';
+                this.est.OwnKey.set('id');
         }
         //Check finale per assicurarmi che le props ci siano
-        if (!this.est.ParentKey || !this.est.OwnKey) {
+        if (!this.est.ParentKey() || !this.est.OwnKey()) {
             console.error('Per utilizzare il sistema in modalità gerarchica è obbligatorio specificare sia ParentKey che OwnKey. Fallback a sistema non gerarchico');
             return;
         }
@@ -1662,7 +1664,7 @@ class HierarchyModeHandler {
         for (let i = 0; i < objs.length; i++) {
             let obj = objs[i];
             // Se la parentKey non è valorizzata, questo è il livello 0 (1... perché gli 0 son perciolosi)
-            if (!obj[this.est.ParentKey] && levelToAssign == 1) {
+            if (!obj[this.est.ParentKey()] && levelToAssign == 1) {
                 obj._level = 1;
                 obj._visible = true;
                 obj._expanded = this.est.StartsExpanded;
@@ -1670,12 +1672,12 @@ class HierarchyModeHandler {
                 continue;
             }
             // Per i livelli superiore al primo
-            if (obj[this.est.ParentKey] && levelToAssign > 1) {
+            if (obj[this.est.ParentKey()] && levelToAssign > 1) {
                 // trovo il parent
                 for (let p = 0; p < objs.length; p++) {
                     let possibleParent = objs[p];
                     // Trovato il parent dell'item, assegno all'item il livello giusto
-                    if (possibleParent[this.est.OwnKey] == obj[this.est.ParentKey] && possibleParent._level == levelToAssign - 1) {
+                    if (possibleParent[this.est.OwnKey()] == obj[this.est.ParentKey()] && possibleParent._level == levelToAssign - 1) {
                         obj._level = levelToAssign;
                         // So che questo item ha un parent. Ribadisco che il parent è espanso in base alle impostazione e stessa logica
                         // per la visibilità del figlio
@@ -1696,15 +1698,16 @@ class HierarchyModeHandler {
      * @param {string} key Chiave del parent da espandere
      */
     expandParent(key) {
-        for (let i = 0; i < this.est.boundSource.length; i++) {
-            let obj = this.est.boundSource[i];
+        let bs = this.est.boundSource();
+        for (let i = 0; i < bs.length; i++) {
+            let obj = bs[i];
             // Trovo il parent con quell'id e lo espando
-            if (obj[this.est.OwnKey] == key) {
+            if (obj[this.est.OwnKey()] == key) {
                 obj._expanded = true;
-                for (let ic = 0; ic < this.est.boundSource.length; ic++) {
-                    let child = this.est.boundSource[ic];
+                for (let ic = 0; ic < bs.length; ic++) {
+                    let child = bs[ic];
                     // Trovo tutti i child di quel parent e li rendo visibili
-                    if (child[this.est.ParentKey] == key)
+                    if (child[this.est.ParentKey()] == key)
                         child._visible = true;
                 }
                 return;
@@ -1717,10 +1720,11 @@ class HierarchyModeHandler {
      * @param {string} key Chiave del parent da collassare
      */
     collapseParent(key) {
-        for (let i = 0; i < this.est.boundSource.length; i++) {
-            let obj = this.est.boundSource[i];
+        let bs = this.est.boundSource();
+        for (let i = 0; i < bs.length; i++) {
+            let obj = bs[i];
             // Trovo il parent con quell'id e lo collasso
-            if (obj[this.est.OwnKey] == key) {
+            if (obj[this.est.OwnKey()] == key) {
                 obj._expanded = false;
                 // Collasso/nascondo tutti i child del parent
                 this.collapseChildOfParent(key);
@@ -1734,16 +1738,17 @@ class HierarchyModeHandler {
      * @param {string} parentKey Chiave del parent di cui collassare i figli
      */
     collapseChildOfParent(parentKey) {
-        for (let ic = 0; ic < this.est.boundSource.length; ic++) {
-            let child = this.est.boundSource[ic];
+        let bs = this.est.boundSource();
+        for (let ic = 0; ic < bs.length; ic++) {
+            let child = bs[ic];
             // Trovo tutti i child di quel parent e li rendo invisibili. Se il child trovato è a sua volta un parent,
             // lo collasso e vado in ricorsione sui figli
-            if (child[this.est.ParentKey] == parentKey && !child.parent)
+            if (child[this.est.ParentKey()] == parentKey && !child.parent)
                 child._visible = false;
-            else if (child[this.est.ParentKey] == parentKey && child.parent) {
+            else if (child[this.est.ParentKey()] == parentKey && child.parent) {
                 child._expanded = false;
                 child._visible = false;
-                this.collapseChildOfParent(child[this.est.OwnKey]);
+                this.collapseChildOfParent(child[this.est.OwnKey()]);
             }
         }
     }
@@ -1768,22 +1773,23 @@ class ItemsHandler {
      */
     getItemsByMode(onlyselected = false, refreshPaging = false, allIfPossible = false) {
         let items = [];
-        if ((this.est.viewMode && this.est.View instanceof AppSearch)) {
+        if ((this.est.viewMode() && this.est.View instanceof AppSearch)) {
             items = this.getViewItemsBySource();
         }
-        else if (this.est.arrayMode) {
+        else if (this.est.arrayMode()) {
             this.est.View.forEach(itm => { itm._item = true; });
             // Se faccio dei raggruppamenti ignoro la paginazione
-            if (this.est.UseArrayModePaging && !allIfPossible) {
+            if (this.est.UseArrayModePaging() && !allIfPossible) {
                 // Se sono in modalità array ma la ricerca dipende da una view devo riallineare gli itemperpage
-                if (this.est.SearchView) {
-                    this.est.ArraymodeItemsPerPage = this.est.SearchView.itemsperpageoverride;
-                    this.est.arraymodePage = this.est.SearchView.page;
-                    this.est.arraymodePages = this.est.SearchView.pages;
+                let fakeView = this.est.SearchView();
+                if (fakeView) {
+                    this.est.ArraymodeItemsPerPage.set(fakeView.itemsperpageoverride);
+                    this.est.arraymodePage = fakeView.page;
+                    this.est.arraymodePages = fakeView.pages;
                 }
                 // Devo chiamare il refresh page solo se vengo richiamato da un binding esterno
                 else if (refreshPaging)
-                    this.refreshPaging(this.est.ArraymodeItemsPerPage);
+                    this.refreshPaging(this.est.ArraymodeItemsPerPage());
                 items = this.adaptViewToPaging();
             }
             else {
@@ -1803,8 +1809,8 @@ class ItemsHandler {
      * @param {number} pageSize Dimensione della pagina
      */
     refreshPaging(pageSize) {
-        this.est.ArraymodeItemsPerPage = pageSize;
-        this.est.arraymodePages = Math.ceil(this.est.View.length / this.est.ArraymodeItemsPerPage);
+        this.est.ArraymodeItemsPerPage.set(pageSize);
+        this.est.arraymodePages = Math.ceil(this.est.View.length / pageSize);
         this.est.arraymodePage = 1;
         // Riforzo il writevalue in modo che il codice passi dalla gestione come se fosse fatta ripartire una ricerca
         this.est.internalWriteValue();
@@ -1827,7 +1833,7 @@ class ItemsHandler {
             return ret;
         }
         else {
-            let ret = this.est.ItemSourceProperty ? this.est.View[this.est.ItemSourceProperty] : this.est.View.items;
+            let ret = this.est.ItemSourceProperty() ? this.est.View[this.est.ItemSourceProperty()] : this.est.View.items;
             if (!ret)
                 ret = [];
             // Setto variabile interna per specificare che questo è un elemento normale, non un gruppo o altro
@@ -1841,8 +1847,8 @@ class ItemsHandler {
         // Se ho una search view l'array pulsanti viene calcolato da lei, non devo prendere quello della modalità array,
         // inoltre non ho bisogno di fare ragionamenti su quanti elementi ci sono e sulla pagina, dato che viene tutto gestito esternamente, 
         // unendo al risultato della view tutti gli oggetti addizionali
-        if (!this.est.SearchView)
-            this.est.arrayPulsanti = this.utilities.getPagesArray(6, this.est.arraymodePage, this.est.arraymodePages);
+        if (!this.est.SearchView())
+            this.est.arrayPulsanti.set(this.utilities.getPagesArray(6, this.est.arraymodePage, this.est.arraymodePages));
         else
             return this.est.View;
         // Applico eventuali oridnamenti lato Array prima di tirare fuori la pagina selezionata
@@ -1850,7 +1856,7 @@ class ItemsHandler {
         if (this.est)
             items = this.arrayModeReviewOrderings(items);
         // Poi per tutti i valori dopo compresi fra la pagina - 1 e la pagina
-        for (let i = ((this.est.arraymodePage - 1) * this.est.ArraymodeItemsPerPage); i < this.est.arraymodePage * this.est.ArraymodeItemsPerPage; i++) {
+        for (let i = ((this.est.arraymodePage - 1) * this.est.ArraymodeItemsPerPage()); i < this.est.arraymodePage * this.est.ArraymodeItemsPerPage(); i++) {
             if (i <= items.length - 1)
                 tmpItems.push(items[i]);
         }
@@ -1890,7 +1896,7 @@ class ReportModeHandler {
             count = this.est.previousCount;
         let ipp = (this.est.View.itemsperpageoverride || 15);
         this.est.View.pages = Math.ceil(count / ipp);
-        this.est.arrayPulsanti = this.utilities.getPagesArray(6, this.est.View.page, this.est.View.pages);
+        this.est.arrayPulsanti.set(this.utilities.getPagesArray(6, this.est.View.page, this.est.View.pages));
     }
     /**
      * Data una AppSearch questo metodo genera la lista di th e td che si possono collegare al giro standard.
@@ -2042,7 +2048,7 @@ class RowGroupingHandler {
         // 1) Se non viene richiesto il dettaglio di alcun gruppo significa che la chiamata restituisce la lista paginata dei gruppi principali.
         //    Li tratto come se fosse una qualsiasi altra query paginata su N elementi
         if ((view.requestedgroups?.length || 0) == 0) {
-            this.est.boundSource = this.est.TMPBoundSource;
+            this.est.boundSource.set(this.est.TMPBoundSource);
             this.rgGroupCache = new Map();
             this.rgItemCache = new Map();
             this.rgChildGroupsCache = new Map();
@@ -2086,7 +2092,7 @@ class RowGroupingHandler {
             *   GruppoE                         GruppoE
             */
             let intermediateGroup = view.requestedgroups.length != groupingKeys;
-            let items = this.est.boundSource;
+            let items = this.est.boundSource();
             let insertIndex = 0;
             let insertGroup = null;
             let groupKey = "";
@@ -2144,29 +2150,31 @@ class RowGroupingHandler {
                     itemsCacheReference.push(itm);
                 }
             });
+            let bs = this.est.boundSource();
             // Elimino gli oggetti vecchi
             // 1) Ricerca intermedia, stato salvato - Elimino tutti gli item e tutti i gruppi la cui route è più lunga della corrente, tutti gli item relativi alla path corrente, e tutte
             //    le cache di ricerca effettuate su una path più profonda dell'attuale
             // 2) Ricerca finale o ricerca intermedia senza stato salvato - Elimino tutti gli item relativi alla path corrente
             // Per "stato salvato" si intendono ricerche vecchie salvate per poter essere rieffettuate in caso di ordinamenti su colonne di interesse
             if (intermediateGroup && view.savedstate) {
-                this.est.boundSource = this.est.boundSource.filter(t => !(t._item || t._thisRoute.length > groupRoute.length));
+                bs = bs.filter(t => !(t._item || t._thisRoute.length > groupRoute.length));
                 this.est.groupSearchRequestsCache = this.est.groupSearchRequestsCache.filter(t => !(t.route.length > groupRoute.length));
             }
             else if (intermediateGroup) {
                 // Se invece lo stato non è salvato vuol dire che c'è stato un cambio di pagina interno ad un gruppo già aperto:
                 // - Elimino tutti gli elementi riconducibili a questo gruppo che erano già presenti
-                this.est.boundSource = this.est.boundSource.filter(t => !(t._item || (t._thisKey.startsWith(groupKey) && t._thisKey != groupKey)));
+                bs = bs.filter(t => !(t._item || (t._thisKey.startsWith(groupKey) && t._thisKey != groupKey)));
             }
-            this.est.boundSource = this.est.boundSource.filter(t => !(t._parent == groupKey));
-            let thisGroup = this.est.boundSource[insertIndex];
+            bs = bs.filter(t => !(t._parent == groupKey));
+            let thisGroup = bs[insertIndex];
             if (intermediateGroup)
                 thisGroup._groupscount = this.est.View?.groupcount;
             // Li sostituisco coi nuovi di questa ricerca
-            this.est.boundSource.splice(insertIndex + 1, 0, ...this.est.TMPBoundSource);
+            bs.splice(insertIndex + 1, 0, ...this.est.TMPBoundSource);
             // Aggiungo un separatore alla fine o all'inizio di questi gruppi che dovrà occuparsi di caricare ALTRI gruppi o oggetti (se sono all'ultimo gruppo)
             let addLast = false;
-            this.est.boundSource.splice(insertIndex + 1 + (addLast ? this.est.TMPBoundSource.length : 0), 0, this.getGroupSeparator(view, groupKey, groupRoute, view.requestedgroups.length, intermediateGroup ? 'groups' : 'items'));
+            bs.splice(insertIndex + 1 + (addLast ? this.est.TMPBoundSource.length : 0), 0, this.getGroupSeparator(view, groupKey, groupRoute, view.requestedgroups.length, intermediateGroup ? 'groups' : 'items'));
+            this.est.boundSource.set(bs);
             // Aggiungo la ricerca alla cache di questa "sessione"
             let toAdd = { path: groupKey, route: groupRoute, view: Object.assign({}, view), group_column: intermediateGroup ? this.est.TMPBoundSource[0].column : '' };
             let prev = this.est.groupSearchRequestsCache.findIndex(t => t.path == toAdd.path && t.group_column == toAdd.group_column);
@@ -2198,8 +2206,8 @@ class RowGroupingHandler {
             this.rgGroupCache.clear();
             this.rgItemCache.clear();
             this.rgChildGroupsCache.clear();
-            this.est.ArrayGrouping = true;
-            this.est.boundSource = this.getGroupsRecursive(headerGroups, 0, this.est.boundSource, headerAggregations, null);
+            this.est.ArrayGrouping.set(true);
+            this.est.boundSource.set(this.getGroupsRecursive(headerGroups, 0, this.est.boundSource(), headerAggregations, null));
         }
     }
     /**
@@ -2693,14 +2701,14 @@ class SelectionHandler {
         }
         // Se tutti gli oggetti di questa pagina sono solezionati allora posso mettere il global check a true
         // Se sono in situazione di all-select anche metto la global checkbox, nonostante ci possano essere delle esclusioni
-        this.est.globalCheck = this.est.boundSource.length > 0 && this.est.boundSource.filter(t => t._group || t._item).every(t => t._selected);
-        this.est.canSelectAll = selectionItem.count > 0 && this.est.SelectAll && !this.est.SingleSelection;
+        this.est.globalCheck.set(this.est.boundSource().length > 0 && this.est.boundSource().filter(t => t._group || t._item).every(t => t._selected));
+        this.est.canSelectAll.set(selectionItem.count > 0 && this.est.SelectAll() && !this.est.SingleSelection());
         // Potrebbe cambiare qualora qualcuno inserisse dati a manazza in modalità Array e desse il refresh manuale alla tabella
         // Comunque costa 0 quindi mi permetto di refreshare
-        if (this.est.arrayMode) {
-            let prevSelected = this.est.selectedObjects;
+        if (this.est.arrayMode()) {
+            let prevSelected = this.est.selectedObjects();
             this.finalizeSelectionInformations(selectionItem);
-            if (this.est.selectedObjects != prevSelected)
+            if (this.est.selectedObjects() != prevSelected)
                 this.est.onSelectionChanged.emit(selectionItem);
         }
     }
@@ -2756,20 +2764,20 @@ class SelectionHandler {
     handleItemsSelection(items, forcedVal = null, globalCheck = null) {
         let si = this.est.View?.selection || this.est.arraymodeSelection;
         // Se sono in modalità di selezione singola e devo selezionare un'oggetto, per prima cosa devo deselezionare tutti gli altri
-        if (this.est.SingleSelection && items[0]?._selected && !items[0]?._group) {
+        if (this.est.SingleSelection() && items[0]?._selected && !items[0]?._group) {
             if (items.length > 1 && forcedVal == null)
                 throw "Tentativo di selezionare o deselezionare più di un elemento con SingleSelection attivo";
             if (items.length == 1 && forcedVal == null) {
-                si = this.handleItemsSelection(this.est.boundSource.filter(t => !t._group), false, null);
+                si = this.handleItemsSelection(this.est.boundSource().filter(t => !t._group), false, null);
                 items[0]._selected = true;
             }
         }
         for (let i = 0; i < items.length; i++) {
             let item = items[i];
-            let toChange = forcedVal != null ? item._selected != forcedVal : globalCheck != null ? item._selected != this.est.globalCheck : false;
+            let toChange = forcedVal != null ? item._selected != forcedVal : globalCheck != null ? item._selected != this.est.globalCheck() : false;
             // Se dev'essere overridato il valore di check effettuo l'override o col valore forzato o col valore globale
             if (toChange && !item.locked)
-                item._selected = forcedVal != null ? forcedVal : this.est.globalCheck;
+                item._selected = forcedVal != null ? forcedVal : this.est.globalCheck();
             // Se il valore non dev'essere variato e vengo da una selezione globale semplicemente evito di effettuare operaizoni inutili. L'item/gruppo è già nello stato giusto
             if (!toChange && globalCheck != null)
                 continue;
@@ -2793,7 +2801,7 @@ class SelectionHandler {
                 parentGroupSelected = itemGroup == null ? null : itemGroup._selected;
                 parentGroupUnselected = itemGroup == null ? null : !itemGroup._selected;
             }
-            if (!this.est.ArrayGrouping)
+            if (!this.est.ArrayGrouping())
                 this.performSelectionOperations(si, item, allSelection, isGroup, isSelection, selectedItems, selectedGroups, unselectedItems, unselectedGroups, allItems, allGroups, parentGroupSelected, parentGroupUnselected);
             else
                 this.performSimpleSelectionOperations(si, item, isGroup, isSelection, itemGroup, selectedItems, unselectedItems, allItems, allGroups);
@@ -2801,14 +2809,14 @@ class SelectionHandler {
         // Imposto il check globale in base a se tutti gli elementi sono selezionati o meno.
         // Evito di fare queste operazioni se la selezione deriva proprio dal global Check
         if (globalCheck == null)
-            this.est.globalCheck = !this.est.boundSource.some(t => !t._selected && !t._sep);
+            this.est.globalCheck.set(!this.est.boundSource().some(t => !t._selected && !t._sep));
         this.finalizeSelectionInformations(si);
         return si;
     }
     /**
      * Dato L'oggetto di selezione, l'oggetto da selezionare/deselezionare e tutti i parametri del caso effettua le operazioni che servono.
      *
-     * Logica semplificata rispetto all'originale **performSelectionOperations** per lavorare in una modalità in cui tutti gli elementi sono caricati (**ArrayGrouping** = true)
+     * Logica semplificata rispetto all'originale **performSelectionOperations** per lavorare in una modalità in cui tutti gli elementi sono caricati (**ArrayGrouping()** = true)
      */
     performSimpleSelectionOperations(base, item, group, sel, itm_group, sel_itm, desel_itm, all_itms, all_grps) {
         let tripticItem = this.getTriptic('item', base);
@@ -2981,7 +2989,7 @@ class SelectionHandler {
         items = items.filter(t => !status || (t._selected && status == 'selected') || (!t._selected && status == 'unselected'));
         // Non trovo nessun oggetto, però magari di oggetti ne ho all'interno dell'oggetto di selezione. 
         // Questo può essere vero solo se NON sono in modalità array, in caso contrario gli oggetti li devo per forza avere tutti
-        if (items.length != 0 || !sel || this.est.arrayMode)
+        if (items.length != 0 || !sel || this.est.arrayMode())
             return items;
         if (status == 'unselected')
             items = sel.exclusions.filter(t => t != null &&
@@ -3089,7 +3097,7 @@ class SelectionHandler {
         selectionItem.count = this.evaluateSelected();
         // Se ho fatto selezione "all" ma poi mi sono messo a togliere tutti gli elementi fino a rimanerne 0 resetto l'oggetto di selezione
         if (selectionItem.count == 0) {
-            this.est.boundSource.forEach(t => t._selected = false);
+            this.est.boundSource().forEach(t => t._selected = false);
             selectionItem.all = false;
             selectionItem.exclusions = [];
             selectionItem.items = [];
@@ -3099,7 +3107,7 @@ class SelectionHandler {
             this.clearSelectionCaches();
         }
         // Se la possibilità di fare "Seleziona tutto" è abilitata allora la considero appena mi viene selezionato qualcosa
-        this.est.canSelectAll = selectionItem.count > 0 && this.est.SelectAll && !this.est.SingleSelection;
+        this.est.canSelectAll.set(selectionItem.count > 0 && this.est.SelectAll() && !this.est.SingleSelection());
     }
     /** Compatta una cache di indici */
     compactIndexMap(map) {
@@ -3118,8 +3126,9 @@ class SelectionHandler {
         let si = this.est.View?.selection || this.est.arraymodeSelection;
         let excByGroup = si.group_exclusions.reduce((prev, curr) => prev + curr.count, 0);
         let incByGroup = si.groups.reduce((prev, curr) => prev + curr.count, 0);
-        this.est.selectedObjects = (si.all ? this.est.BaseItemsCount : incByGroup) - excByGroup + si.items.length - si.exclusions.length;
-        return this.est.selectedObjects;
+        let count = (si.all ? this.est.BaseItemsCount : incByGroup) - excByGroup + si.items.length - si.exclusions.length;
+        this.est.selectedObjects.set(count);
+        return count;
     }
     /** Gestisce il comando di "Seleziona tutto in tutte le pagine" o il suo contrario, cioè "Reimposta selezione" */
     selectAllOrResetSelection() {
@@ -3132,13 +3141,13 @@ class SelectionHandler {
         selectionItem.items = [];
         // Ripulisco gli stati UI di selezione globale se l'ho disattivata
         if (!selectionItem.all) {
-            this.est.canSelectAll = false;
-            this.est.globalCheck = false;
+            this.est.canSelectAll.set(false);
+            this.est.globalCheck.set(false);
         }
         this.finalizeSelectionInformations(selectionItem);
         this.est.onSelectionChanged.emit(selectionItem);
         // Dopo aver resettato direttamente il solo oggetto this.View.selection devo anche riallineare a tutti gli oggetti bindati
-        this.evaluateSelection(this.est.boundSource, selectionItem);
+        this.evaluateSelection(this.est.boundSource(), selectionItem);
     }
     /**
      * @TODO Spostare in SelectionHandler
@@ -3496,32 +3505,43 @@ class EsTh {
          */
         this.startOffset = null;
         /** Id della colonna, dev'essere lo stesso per tutti gli **EsTd** relativi */
-        this.ID = "";
+        this.ID = input("", { alias: "es-th" });
+        /** Ordinamento attuale della colonna */
+        this._Order = input(null, { alias: 'Order' });
+        this.Order = signal(null);
         /** Indica se questa colonna è ordinabile o meno */
-        this.Orderable = true;
+        this.Orderable = input(true);
         /** Valore da mostrare all'interno della colonna. Se omesso verrà proiettato il contenuto dal template in cui è stata usata */
-        this.Display = "";
+        this.Display = input("");
         /** Indica se le dimnsioni di questa colonna sono modificabili o meno */
-        this.Resizable = false;
+        this.Resizable = input(false);
         /** Indica se questo header è pinnato. In caso lo fosse presenta il tastino per effettuare lo spinning */
-        this.Pinned = false;
+        this.Pinned = input(false);
         /**
          * Indica se sta venendo eseguita una operazione di ricerca o meno, serve per evitare l'esecuzione di eventuale codice che potrebbe dare fastidio
          * come ad esempio l'escuzione di un ordinamento durante il caricamento di dati nuovi
          */
-        this.SearchInProgress = false;
+        this.SearchInProgress = input(false);
+        /** Impostato dall'**EsTable**, serve per permettere o meno di effettuare ordinamenti dati su questa colonna */
+        this.OrderBy = input(null);
         /** Indica se il testo presente in questo Header può andare a capo o meno, di default non può */
-        this.Wrap = false;
+        this.Wrap = input(false);
         /** Indica se la colonna è fixed, cioè se non può né essere nascosta, né riposizionata. Solo le prime colonne possono essere Fixed */
-        this.Fixed = false;
+        this.Fixed = input(false);
         /** Template Angular da istanziare per questo TH */
         this.Template = null;
         /** Evento emesso al cambio di ordinamento effettuato su questa colonna */
         this.onOrderChange = new EventEmitter();
         /** Evento emesso all'unpinning della colonna */
         this.onUnpinning = new EventEmitter();
+        /** Classi da applicare alla colonna */
+        this.Class = signal("");
         /** Impostato dall'**EsTable**, per controllare che ci sia almeno un TD che utilizzi quest'header */
-        this._referenced = false;
+        this._referenced = signal(false);
+        /** Variabile finale su cui è bindato il contenuto della cella. Sarà valorizzato a **Display** se specificato, all'**innerHTML** dell'elemento proiettato altrimenti */
+        this.Description = computed(() => {
+            return this.Display() === null || this.Display() === "" ? this.content.nativeElement.innerText : this.Display();
+        });
     }
     /**
      * Imposta la visibilità o meno della colonna, si traduce nell'applicazione o rimozione della classe **app-display-none**
@@ -3548,31 +3568,30 @@ class EsTh {
     /** @ignore */
     ngAfterViewInit() {
         //Assegnare direttamente il content è più veloce che passare dal native element per qualche motivo
-        this.Description = this.Display === null || this.Display === "" ? this.content.nativeElement.innerText : this.Display;
-        this.Class = this.myself.nativeElement.className.replace("app-display-none", "");
+        this.Class.set(this.myself.nativeElement.className.replace("app-display-none", ""));
         //Resize
-        if (this.Resizable)
+        if (this.Resizable())
             this.renderer.addClass(this.myself.nativeElement, "app-relative");
     }
     /** Emette l'evento di unpinning */
     unpin() {
-        this.onUnpinning.emit(this.ID);
+        this.onUnpinning.emit(this.ID());
     }
     /** Gestisce la modifica dell'ordinamento qualora venisse cliccato su questa colonna */
     setupNextOrderAndNotify() {
-        if (!this.ID) {
+        if (!this.ID()) {
             console.log("Attempt to order a column without ID. Operation ignored");
             return;
         }
-        if (this.SearchInProgress) {
+        if (this.SearchInProgress()) {
             console.log("Attempt to order a column during a search. Operation ignored");
             return;
         }
-        if (!this.OrderBy || !this.Orderable)
+        if (!this.OrderBy() || !this.Orderable())
             return;
-        var nextOrder = this.orderNext[this.Order || "NONE"];
-        this.Order = nextOrder;
-        this.onOrderChange.emit(this.Order);
+        var nextOrder = this.orderNext[this._Order() || "NONE"];
+        this.Order.set(nextOrder);
+        this.onOrderChange.emit(nextOrder);
     }
     /**
      * Evento di inizio resize della colonna
@@ -3580,14 +3599,14 @@ class EsTh {
      * @param {any} ev Evento MouseDown
      */
     onResizeStart(ev) {
-        if (!this.Resizable)
+        if (!this.Resizable())
             return;
         this.resizingThis = true;
         this.startOffset = this.myself.nativeElement.offsetWidth - ev.pageX;
     }
     /** Listener per la fine dell'operazione di resize */
     onMouseUp() {
-        if (!this.Resizable)
+        if (!this.Resizable())
             return;
         this.resizingThis = false;
     }
@@ -3597,7 +3616,7 @@ class EsTh {
      * @param {$event} ev Evento MouseMove
      */
     onMouseMove($event) {
-        if (!this.Resizable || !this.resizingThis)
+        if (!this.Resizable() || !this.resizingThis)
             return;
         //Uso jquery per non dover far partire un intero ciclo di change detection solo per fare un resize del cazzo
         //(anche perché viene lanciato ogni 0.1 secondo quindi not a good idea)
@@ -3606,33 +3625,12 @@ class EsTh {
         $event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTh, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EsTh, isStandalone: false, selector: "[es-th]", inputs: { ID: ["es-th", "ID"], Order: "Order", Orderable: "Orderable", Display: "Display", Resizable: "Resizable", Pinned: "Pinned", SearchInProgress: "SearchInProgress", OrderBy: "OrderBy", Wrap: "Wrap", Fixed: "Fixed", Template: "Template", Visible: "Visible" }, outputs: { onOrderChange: "onOrderChange", onUnpinning: "onUnpinning" }, host: { listeners: { "window:mouseup.out-zone": "onMouseUp()", "window:mousemove.out-zone": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, 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>", dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: EsTh, isStandalone: false, selector: "[es-th]", inputs: { ID: { classPropertyName: "ID", publicName: "es-th", isSignal: true, isRequired: false, transformFunction: null }, _Order: { classPropertyName: "_Order", publicName: "Order", isSignal: true, isRequired: false, transformFunction: null }, Orderable: { classPropertyName: "Orderable", publicName: "Orderable", isSignal: true, isRequired: false, transformFunction: null }, Display: { classPropertyName: "Display", publicName: "Display", isSignal: true, isRequired: false, transformFunction: null }, Resizable: { classPropertyName: "Resizable", publicName: "Resizable", isSignal: true, isRequired: false, transformFunction: null }, Pinned: { classPropertyName: "Pinned", publicName: "Pinned", isSignal: true, isRequired: false, transformFunction: null }, SearchInProgress: { classPropertyName: "SearchInProgress", publicName: "SearchInProgress", isSignal: true, isRequired: false, transformFunction: null }, OrderBy: { classPropertyName: "OrderBy", publicName: "OrderBy", isSignal: true, isRequired: false, transformFunction: null }, Wrap: { classPropertyName: "Wrap", publicName: "Wrap", isSignal: true, isRequired: false, transformFunction: null }, Fixed: { classPropertyName: "Fixed", publicName: "Fixed", isSignal: true, isRequired: false, transformFunction: null }, Template: { classPropertyName: "Template", publicName: "Template", isSignal: false, isRequired: false, transformFunction: null }, Visible: { classPropertyName: "Visible", publicName: "Visible", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onOrderChange: "onOrderChange", onUnpinning: "onUnpinning" }, host: { listeners: { "window:mouseup.out-zone": "onMouseUp()", "window:mousemove.out-zone": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, 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>", dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTh, decorators: [{
             type: Component,
-            args: [{ selector: "[es-th]", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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>" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { ID: [{
-                type: Input,
-                args: ['es-th']
-            }], Order: [{
-                type: Input
-            }], Orderable: [{
-                type: Input
-            }], Display: [{
-                type: Input
-            }], Resizable: [{
-                type: Input
-            }], Pinned: [{
-                type: Input
-            }], SearchInProgress: [{
-                type: Input
-            }], OrderBy: [{
-                type: Input
-            }], Wrap: [{
-                type: Input
-            }], Fixed: [{
-                type: Input
-            }], Template: [{
+            args: [{ selector: "[es-th]", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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>" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { Template: [{
                 type: Input
             }], onOrderChange: [{
                 type: Output
@@ -3655,36 +3653,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 /** Componente rappresentante una singola cella del body della tabella */
 class EsTd {
     /** @ignore */
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor(el) {
+        this.el = el;
         /** Id della cella, dev'essere lo stesso della colonna **EsTh** relativa */
-        this.ID = "";
+        this.ID = input("", { alias: "es-td" });
+        /** Contesto dell'oggetto a cui si riferisce il dato visualizzato. Contiene l'hash dell'oggetto in questione */
+        this.Context = input();
         /** Quando questa cella viene generata questo evento permette di dire "ehi, sono nato!"  */
         this.onCellGeneration = new EventEmitter();
         /** Errore attualmente presente sulla cella */
-        this.ValidationError = "";
+        this.ValidationError = signal("");
     }
     /** @ignore */
     ngAfterViewInit() {
-        this.onCellGeneration.emit({ id: this.ID, hash: this.Context, self: this });
+        this.onCellGeneration.emit({ id: this.ID(), hash: this.Context(), self: this });
     }
     /** Api per impostare un "errore" su questa cella in maniera programmatica */
     validationError(error) {
-        this.ValidationError = error;
-        this.cdr.markForCheck();
+        this.ValidationError.set(error);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTd, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EsTd, isStandalone: false, selector: "[es-td]", inputs: { ID: ["es-td", "ID"], Context: "Context" }, outputs: { onCellGeneration: "onCellGeneration" }, ngImport: i0, template: "<div class=\"td-content\" [class.td-error]=\"!!ValidationError\" [pTooltip]=\"ValidationError\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".td-error{background-color:#f003;-webkit-box-shadow:inset 0px 0px 0px 1px #f00;-moz-box-shadow:inset 0px 0px 0px 1px #f00;box-shadow:inset 0 0 0 1px red}.td-content{padding:.3rem;margin:-.3rem;box-sizing:border-box!important}\n"], dependencies: [{ kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTd, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: EsTd, isStandalone: false, selector: "[es-td]", inputs: { ID: { classPropertyName: "ID", publicName: "es-td", isSignal: true, isRequired: false, transformFunction: null }, Context: { classPropertyName: "Context", publicName: "Context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCellGeneration: "onCellGeneration" }, ngImport: i0, template: "<div class=\"td-content\" [class.td-error]=\"!!ValidationError()\" [pTooltip]=\"ValidationError()\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".td-error{background-color:#f003;-webkit-box-shadow:inset 0px 0px 0px 1px #f00;-moz-box-shadow:inset 0px 0px 0px 1px #f00;box-shadow:inset 0 0 0 1px red}.td-content{padding:.3rem;margin:-.3rem;box-sizing:border-box!important}\n"], dependencies: [{ kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTd, decorators: [{
             type: Component,
-            args: [{ selector: "[es-td]", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"td-content\" [class.td-error]=\"!!ValidationError\" [pTooltip]=\"ValidationError\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".td-error{background-color:#f003;-webkit-box-shadow:inset 0px 0px 0px 1px #f00;-moz-box-shadow:inset 0px 0px 0px 1px #f00;box-shadow:inset 0 0 0 1px red}.td-content{padding:.3rem;margin:-.3rem;box-sizing:border-box!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ID: [{
-                type: Input,
-                args: ['es-td']
-            }], Context: [{
-                type: Input
-            }], onCellGeneration: [{
+            args: [{ selector: "[es-td]", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"td-content\" [class.td-error]=\"!!ValidationError()\" [pTooltip]=\"ValidationError()\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".td-error{background-color:#f003;-webkit-box-shadow:inset 0px 0px 0px 1px #f00;-moz-box-shadow:inset 0px 0px 0px 1px #f00;box-shadow:inset 0 0 0 1px red}.td-content{padding:.3rem;margin:-.3rem;box-sizing:border-box!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onCellGeneration: [{
                 type: Output
             }] } });
 
@@ -3894,7 +3888,8 @@ class EsTableDefaultable {
 /** Componente che permette di rappresentare una griglia di valori */
 class EsTableComponent {
     /** @ignore */
-    constructor(ngControl, prefService, deafults, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts, copyPasteDetector, clipboardService, logger, emb, rendererRef) {
+    constructor(_zone, ngControl, prefService, deafults, lc, cdr, utilities_H, utiExts, expExts, dateExts, msgExts, copyPasteDetector, clipboardService, logger, emb, rendererRef) {
+        this._zone = _zone;
         this.ngControl = ngControl;
         this.prefService = prefService;
         this.deafults = deafults;
@@ -3910,29 +3905,32 @@ class EsTableComponent {
         this.logger = logger;
         this.emb = emb;
         this.rendererRef = rendererRef;
+        this._destroyed$ = new Subject();
         /** Subject utilizzato internamente lato EsTable per causare il Focus lato componente di Input */
         this.FocusSubject = new Subject();
         /** Se vengono effettuati 2 click a distanza inferiore a questi Millisecondi viene considerato un doppio click */
         this.doubleClickBufferMs = 200;
-        /** View finale su cui bindarsi lato Frontend, il tipo può essere IAppSearch<any> (per la **viewMode**), any[] (per l'**arrayMode**) */
-        this.View = null;
-        /** Indica se l'es-table deve mostrare il check globale nell'header per fare il "seleziona tutto" */
-        this.globalCheck = false;
         /** Tiene da conto l'ultimo elemento selezionato in modo da poter effettuare il SHIFT+CLICK */
         this.lastSelected = null;
+        /** View finale su cui bindarsi lato Frontend, il tipo può essere IAppSearch<any> (per la **viewMode**), any[] (per l'**arrayMode**) */
+        this.View = null; // TODO: signal
+        /** Modello da cui l'es-table mostra i pulsanti di paginazione in basso a destra */
+        this.arrayPulsanti = signal(null);
+        /** Indica se l'es-table deve mostrare il check globale nell'header per fare il "seleziona tutto" */
+        this.globalCheck = model(false);
         /** Conteggio interno per il numero di elementi selezionati */
-        this.selectedObjects = 0;
+        this.selectedObjects = signal(0);
         /** Indica se è possibile effettuare una selezione massiva */
-        this.canSelectAll = false;
+        this.canSelectAll = signal(false);
         /** Indica se il componente sta gestendo un IAppSearch<any> */
-        this.viewMode = false;
+        this.viewMode = signal(false);
         /** Indica se il componente sta gestendo un any[] */
-        this.arrayMode = false;
+        this.arrayMode = signal(false);
         /**
          * Contenitore degli elementi da listare lato interfaccia dopo tutte le elaborazioni del caso,
          * generalmente non sono altro che tutti gli oggetti da presentare con in più l'hash calcolato per identificare 1 oggetto con la propria riga
          */
-        this.boundSource = [];
+        this.boundSource = signal([]);
         /** Stessa cosa della **boundSource**, utilizzata come appoggio temporaneo interno */
         this.TMPBoundSource = [];
         /** @deprecated "Fetta" di oggetti utilizzata nell'endless scroll, ogni elemento di questo array è un blocchetto di 100 elementi */
@@ -3942,17 +3940,17 @@ class EsTableComponent {
         /** Variabile che identifica il valore del "seleziona Tutto" nella paginazione */
         this.defaultAllPageOverride = 999999;
         /** Indica se utilizzare il sistema di autoupdate, cioè un trigger time-izzato in alto a destra della tabella che ripete le ricerche ogni X **seconds** */
-        this.autoUpdate = false;
+        this.autoUpdate = model(false);
         /** Numero di secondi da fare trascorrere fra una ricerca e l'altra */
-        this.seconds = '10';
+        this.seconds = model("10");
         /** Impostata a true ogni volta che viene avviata una ricerca, e a false ogni volta che un nuovo valore viene ricevuto */
-        this.researchInProgress = false;
+        this.researchInProgress = model(false);
         /** Modello di appoggio temporaneo per i **RowTDs** */
         this.TMPRowTDs = null;
         /** Modello rappresentante un dizionario di righe della tabella, con chiave l'hash e valore la lista di celle */
         this.RowTDs = null;
         /** Indica se **RowTDs** è un oggetto vuoto o meno */
-        this.EmptyRowTds = true;
+        this.EmptyRowTds = signal(true);
         /** Modello di appoggio temporaneo per i **RowTHs** */
         this.TMPRowTHs = null;
         /** Modello rappresentante un singolo th della tabella, generato in base alle configurazioni e agli oggetti ricevuti */
@@ -3983,145 +3981,171 @@ class EsTableComponent {
          * ecc...
          * viene dedotto dal sistema in automatico
          */
-        this.UseCustomCells = null;
+        this.UseCustomCells = signal(null);
         /**
          * Indica se oltre alle colonne dinamiche specifiche di un tipo di oggetto ci sono anche colonne dinamiche aggiunte dall'utente
          *
          * Es. una colonna in cui mostrare sempre un iconcina
          */
-        this.UserDefinedDynamicCols = false;
+        this.UserDefinedDynamicCols = signal(false);
         /** Indica che questo è il primo Bind della tabella, viene settato a false non appena il primo bind viene terminato con successo */
-        this.FirstBind = true;
+        this.FirstBind = signal(true);
         /** Lista di colonne che si possono visualizzare/ordinare fra di loro */
         this.ColumnsList = [];
         /** Variabile d'appoggio usata dalla dialog di selezione/nascondimento, per evitare di danneggiare **ColumnsList** in caso di modifiche poi annullate */
         this.TMPColumnsList = [];
         /** Valore del check globale di visibilità valido per tutte le colonne in **ColumnsList** */
-        this.globalColVisCheck = false;
+        this.globalColVisCheck = model(false);
         /** Opzioni extra che devono apparire nel Menù contestuale in alto a destra, richiamato dai 3 pallini verticali */
-        this.CornerMenuOptions = null;
+        this.CornerMenuOptions = input(null);
         /** Indica se dev'essere possibile effettuare il resize delle colonne */
-        this.ColumnsResizable = null;
+        this._ColumnsResizable = input(null, { alias: "ColumnsResizable" });
+        this.ColumnsResizable = signal(null);
         /** Indica se dev'essere possibile effettuare il pinning delle colonne */
-        this.ColumnsPinnable = null;
+        this._ColumnsPinnable = input(null, { alias: "ColumnsPinnable" });
+        this.ColumnsPinnable = signal(null);
         /** Indica se dev'essere disponibile il sistema di aggiornamento automatico */
-        this.AutoUpdate = null;
+        this._AutoUpdate = input(null, { alias: "AutoUpdate" });
+        this.AutoUpdate = signal(null);
         /** Indica l'altezza cablata che deve assumere la tabella. Es: "100px" | "100%" ...  */
-        this.Height = null;
+        this.Height = input(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;
+        this.EmptySpaceBackgroundColor = input(null);
         /** Indica se dev'essere l'estable a gestire la ricerca, anche la prima.  **/
-        this.EsTableHandledSearch = false;
+        this.EsTableHandledSearch = input(false);
         /** Permette di impostare l'altezza massima della tabella. Se null la dimensione si adatta al numero di elementi attualmente in visualizzazione */
-        this.MaxHeight = null;
+        this.MaxHeight = input(null);
         /** Classi da applicare al contenitore della tabella */
-        this.ContainerClass = null;
+        this._ContainerClass = input(null, { alias: "ContainerClass" });
+        this.ContainerClass = signal(null);
         /** Permette o meno l'export in formato XLSX */
-        this.XLSXExport = null;
+        this.XLSXExport = input(null);
         /** Permette o meno l'export in formato CSV */
-        this.CSVExport = true;
+        this.CSVExport = input(true);
         /** Permette di visualizzare o meno l'opzione di paginazione "Tutti" */
-        this.AllSearch = null;
+        this._AllSearch = input(null, { alias: "AllSearch" });
+        this.AllSearch = signal(null);
         /** Diminuisce gli spazi fra una cella e l'altra, e internamente il padding del font in modo da presentare molti più dati in un'unica pagina */
-        this.HighCellDensity = null;
+        this.HighCellDensity = input(null);
         /** Abilita o meno la possibilità di selezionare oggetti */
-        this.Selection = null;
+        this._Selection = input(null, { alias: "Selection" });
+        this.Selection = signal(null);
         /** Mostra o meno un messaggio di Loading al primo caricamento della tabella */
-        this.ShowLoadingOnBootstrap = null;
+        this.ShowLoadingOnBootstrap = input(null);
         /** Se impostato a **true** aggiunge una colonna con pulsante di eliminazione per effettuare l'elimina dell'oggetto relativo */
-        this.Removal = null;
+        this.Removal = input(null);
         /**
          * Condizione che nasconde l'icona di eliminazione inserita impostando **Removal** a true qualora la condizione non venisse rispettata
          *
          * Come condizione si considera un semplice campo su cui effettuare un controllo booleano, come ad esempio "canremove"
          */
-        this.RemovalCondition = '';
+        this.RemovalCondition = input('');
         /** Indica se abilitare la possibilità di esportare la vista dati attuale */
-        this.Export = null;
+        this._Export = input(null, { alias: "Export" });
+        this.Export = signal(null);
         /** Indica se permettere la selezione multipla Windows-like cliccando un oggetto e facendo poi Shift + click su un oggetto successivo */
-        this.ShiftClick = null;
+        this._ShiftClick = input(null, { alias: "ShiftClick" });
+        this.ShiftClick = signal(null);
         /** Indica il testo che va a sostituire "Oggetti Visualizzati" in caso si stia facendo qualcosa di custom */
-        this.CountLabel = null;
+        this.CountLabel = input(null);
         /** Indica se nascondere o mostrare il componente di paginazione */
-        this.HidePaging = null;
+        this._HidePaging = input(null, { alias: "HidePaging" });
+        this.HidePaging = signal(null);
         /** Indica se nascondere o mostrare il conteggio degli elementi trovati */
-        this.HidePagingCount = null;
+        this._HidePagingCount = input(null, { alias: "HidePagingCount" });
+        this.HidePagingCount = signal(null);
         /** Indica se nascondere o mostrare i pulsanti di paginazione */
-        this.HidePagingButtons = null;
+        this._HidePagingButtons = input(null, { alias: "HidePagingButtons" });
+        this.HidePagingButtons = signal(null);
         /** Riferimento al ContextMenu (ngx-contextmenu) associato al click destro di uno o più elementi selezionati nella tabella */
         this.ContextMenu = null;
         /** Nome dell'esportazione generata da questa tabella */
-        this.ExportFileName = 'Export.csv';
+        this.ExportFileName = input("Export.csv");
         /** Classe (HTML) di default della tabella */
-        this.TableClass = null;
+        this._TableClass = input(null, { alias: "TableClass" });
+        this.TableClass = signal(null);
         /** Indica di esportare solo le colonne attualmente visibili della view */
-        this.ExportOnlyVisibleColumns = false;
+        this.ExportOnlyVisibleColumns = input(false);
         /** @deprecated Indica la presenza di raggruppamenti a livello di header */
-        this.HasHeaderGroup = null;
+        this.HasHeaderGroup = input(null);
         /** @deprecated Indica la presenza di raggruppamenti a livello del raggruppamento precedentemente esistente, chiaramente è insensata senza **HasHeaderGroup** */
-        this.HasSecondaryHeaderGroup = null;
+        this.HasSecondaryHeaderGroup = input(null);
         /** Indica se nascondere gli Header della tabella */
-        this.HeaderHidden = null;
+        this.HeaderHidden = input(null);
         /** Indica se nascondere il Body della tabella */
-        this.BodyHidden = null;
+        this.BodyHidden = input(null);
         /**
          * Indica se la selezione è temporaneamente disabilitata. Rispetto all'Input **Selection** che visivamente gestisce se ci sono o no gli input di selezione,
          * questo Input gestisce se questi input sono abilitati o meno
          */
-        this.SelectionDisabled = null;
+        this.SelectionDisabled = input(null);
         /**
          * Indica se forzare il sistema di selezione a gestire un elemento per volta.
          * Selezionare un'altra riga con una già selezionata applicherà la selezione alla nuova riga, rimuovendola dall'attuale
          */
-        this.SingleSelection = null;
+        this.SingleSelection = input(null);
         /** Callback che dato un oggetto resituisce l'eventuale classe da applicare alla riga collegata all'oggetto */
         this.RowClassAssigner = null;
         /** Permette di ordinare i dati in maniera discendente o ascendente */
-        this.OrderByColumn = null;
+        this._OrderByColumn = input(null, { alias: "OrderByColumn" });
+        this.OrderByColumn = signal(null);
         /** Permette di avere più direttive di ordinamento dei dati */
-        this.MultipleOrderingDirectives = true;
+        this.MultipleOrderingDirectives = input(true);
         /** Permette di nascondere le colonne in base alle selezioni effettuate dal Menù contestuale in alto a destra */
-        this.HiddenColumns = null;
+        this._HiddenColumns = input(null, { alias: "HiddenColumns" });
+        this.HiddenColumns = signal(null);
         /** Permette di riordinare le colonne in base alle impostazioni effettuate dal Menù contestuale in alto a destra */
-        this.ColumnsOrdering = null;
+        this._ColumnsOrdering = input(null, { alias: "ColumnsOrdering" });
+        this.ColumnsOrdering = signal(null);
         /** @deprecated Eventuale supporto alle ricerche applicate alla modalità Array */
-        this.SearchView = null;
+        this.SearchView = input(null);
         /** Abilita o disabilita il sistema che permette di selezionare tutti gli elementi nella vista */
-        this.SelectAll = null;
+        this._SelectAll = input(null, { alias: "SelectAll" });
+        this.SelectAll = signal(null);
         /** Simula la paginazione anche per le tabelle che funzionano in modalità Array */
-        this.UseArrayModePaging = true;
+        this._UseArrayModePaging = input(true, { alias: "UseArrayModePaging" });
+        this.UseArrayModePaging = signal(true);
         /** Definizione di colonne dinamche per la modalità, appunto, dinamica */
-        this.DynamicRowColumnsDefinition = null;
+        this._DynamicRowColumnsDefinition = input(null, { alias: 'DynamicRowColumnsDefinition' });
+        this.DynamicRowColumnsDefinition = signal(null);
         /** Indica operazioni dinamiche generiche che possono essere effettuate per riga. Appaiono come colonne extra sul lato sinistro della tabella */
-        this.DynamicOperations = [];
+        this.DynamicOperations = input([]);
         /** Indica se visualizzare i dati in maniera gerarchica */
-        this.Hierarchy = null;
+        this.Hierarchy = input(null);
         /** Nome della proprietà che contiene l'ID del padre. Da utilizzare se **Hierarchy** è impostato */
-        this.ParentKey = '';
+        this._ParentKey = input('', { alias: "ParentKey" });
+        this.ParentKey = signal('');
         /** Nome della proprietà che contiene l'ID dell'oggetto attuale. Da utilizzare se **Hierarchy** è impostato */
-        this.OwnKey = '';
+        this._OwnKey = input('', { alias: "OwnKey" });
+        this.OwnKey = signal('');
         /** Indica se partire con un albero espanso. Da utilizzare se **Hierarchy** è impostato */
-        this.StartsExpanded = true;
+        this.StartsExpanded = input(true);
         /** Indica se effettuare il salvataggio delle preferenze di ricerca */
-        this.SavePreferences = null;
+        this._SavePreferences = input(null, { alias: "SavePreferences" });
+        this.SavePreferences = signal(null);
         /** Allineamento di default per celle e headers */
-        this.DefaultAlignment = null;
+        this._DefaultAlignment = input(null, { alias: "DefaultAlignment" });
+        this.DefaultAlignment = signal(null);
         /** Indica dove visualizzare le informazioni di paginazione, se sopra, sotto o in entrambi */
-        this.PagingStyle = null;
+        this._PagingStyle = input(null, { alias: "PagingStyle" });
+        this.PagingStyle = signal(null);
         /** Indica dove visualizzare le informazioni di paginazione, se sopra, sotto o in entrambi */
-        this.RowGroupingPagingStyle = null;
+        this._RowGroupingPagingStyle = input(null, { alias: "RowGroupingPagingStyle" });
+        this.RowGroupingPagingStyle = signal(null);
         /** Qualora per qualsiasi motivo non venisse usato **items** dell'AppSearch questo Input indica qual è il nome della proprietà da utilizzare */
-        this.ItemSourceProperty = "";
+        this.ItemSourceProperty = input('');
         /** Indica se utilizzare la cache di selezione che permette di mantenere gli stati di selezione dei vari oggetti navigando da una pagina all'altra */
-        this.UseSelectionCache = null;
+        this._UseSelectionCache = input(null, { alias: "UseSelectionCache" });
+        this.UseSelectionCache = signal(null);
         /** Permette di decidere se, in modalità raggruppamento, mostrare o meno il valore delle colonne di gruppo negli oggetti finali. Di default sono nascosti */
-        this.ShowItemGroupsColumns = null;
+        this._ShowItemGroupsColumns = input(null, { alias: "ShowItemGroupsColumns" });
+        this.ShowItemGroupsColumns = signal(null);
         /** Indica che tutti i campi che definiscono le modalità di modifica campo possono essere modificati in base alle impostazioni */
-        this.Editable = false;
+        this.Editable = input(false);
         /** Indica se è possibile effettuare selezioni a range per poi farci eventualmente copia incolla */
-        this.RangeSelection = false;
+        this.RangeSelection = input(false);
         /** Indica il numero di millisecondi per cui debouncare il writeValue per la modalità **EsTableHandledSearch** */
-        this.SearchThrottle = 50;
+        this.SearchThrottle = input(50);
         /** Evento che viene richiamato al cambio di oridnamento di una colonna */
         this.onOrderChanged = new EventEmitter();
         /**
@@ -4153,7 +4177,8 @@ class EsTableComponent {
         /** Numero di pagine (durante la paginazione in modalità Array) */
         this.arraymodePages = 1;
         /** Oggetti per ogni pagina (durante la paginazione in modalità Array) */
-        this.ArraymodeItemsPerPage = null;
+        this._ArraymodeItemsPerPage = input(null, { alias: "ArraymodeItemsPerPage" });
+        this.ArraymodeItemsPerPage = signal(null);
         /** Colonne da visualizzare in modalità array */
         this.arrayColumns = [];
         /** Ordine delle colonne da visualizzare in modalità array */
@@ -4185,15 +4210,19 @@ class EsTableComponent {
         /** Variabile d'appoggio per capire se c'è bisogno di ri-effettuare una ricerca o meno */
         this.ResearchNeeded = false;
         /** Colonne visibili della vista attuale. Valorizzato di default al numero massimo di colonne supportate dalla tabella per le casistiche in assenza di custom cells */
-        this.Columns = { Visibile: 100, VisibleUnpinned: 100, Global: 100 };
+        this.Columns = signal({ Visibile: 100, VisibleUnpinned: 100, Global: 100 });
         /** In caso di Row Grouping qui viene salvata la vista principale dei gruppi base */
         this.MainGroupView = null;
         /** Conteggio base degli oggetti. In modalità normale viene resettato ad ogni nuova View inserita, in modalità RowGrouping viene resettato solo ad una nuova View di livello "0" */
         this.BaseItemsCount = null;
+        /** Indica se ci sono delle colonne pinnate e visibili. Serve per poter settare tutte le colonne prima che arrivino dati a pinned*/
+        this.HasPinnedColumns = signal(null);
+        /** Larghezza calcolata del container delle colonne pinnate */
+        this.PinnedContainerWidth = signal(null);
         /** Indica se nonostante siamo in modalità array sono stati individuati dei gruppi. In tal caso es-table si comporta da pseudo backend ed effettua le aggregazioni e raggruppamenti completamente lato client */
-        this.ArrayGrouping = false;
+        this.ArrayGrouping = signal(false);
         /** Indica che l'es-table è basata sulle direttive (nuova modalità) */
-        this.DirectivesBased = false;
+        this.DirectivesBased = signal(false);
         /** Indica lo stato di selezione per singola cella */
         this.selectionStatus = {};
         /** Chiamata reale al writeValue dopo il passaggio di **SearchThrottle** millisecondi. Solo modalità EsTableHandledSearch */
@@ -4230,6 +4259,19 @@ class EsTableComponent {
         this.firstCoordinates = null;
         //* Piango
         this.EsTdsCache = {};
+        effect(() => {
+            if (this.SearchView())
+                this.arrayPulsanti.set(this.utilities_H.getPagesArray(6, this.SearchView().page, this.SearchView().pages || 1, this.SearchView().objectcount || this.SearchView().items.length, this.SearchView().itemsperpageoverride));
+        });
+        // Sarebbe bello... per quando View diventa signal
+        /*effect(() => {
+            
+            if (this.View) {
+                let firstItemGroupOrNoGrouping = (this.View.requestedgroups?.length || 0) == 0;
+                if (firstItemGroupOrNoGrouping)
+                    this.arrayPulsanti.set(this.utilities_H.getPagesArray(6, this.View.page, this.View.pages || 1, (this.ItemSourceProperty() ? this.View[this.ItemSourceProperty()] : this.View.items).length, this.View.itemsperpageoverride));
+            }
+        })*/
         // Copia e incolla si effettuano solo se la tabella attuale è univocamente selezionata
         this.copySubscription = this.copyPasteDetector.OnCopy.subscribe(() => { if (this.copyPasteDetector.ActiveEstReference == this)
             this.handleCopy(); });
@@ -4262,24 +4304,33 @@ class EsTableComponent {
                 this.onSelectionChanged.emit(itemSelection);
         });
         // Assegnazione per tutti gli Input di default
-        this.ColumnsResizable = this.utilities_H.InputOrDefault(this.ColumnsResizable, this.deafults?.ColumnsResizable);
-        this.AutoUpdate = this.utilities_H.InputOrDefault(this.AutoUpdate, this.deafults?.AutoUpdate);
-        this.AllSearch = this.utilities_H.InputOrDefault(this.AllSearch, this.deafults?.AllSearch, true);
-        this.Export = this.utilities_H.InputOrDefault(this.Export, this.deafults?.Export);
-        this.HidePaging = this.utilities_H.InputOrDefault(this.HidePaging, this.deafults?.HidePaging, false);
-        this.HidePagingCount = this.utilities_H.InputOrDefault(this.HidePagingCount, this.deafults?.HidePagingCount);
-        this.HidePagingButtons = this.utilities_H.InputOrDefault(this.HidePagingButtons, this.deafults?.HidePagingButtons);
-        this.ContainerClass = this.utilities_H.InputOrDefault(this.ContainerClass, this.deafults?.ContainerClass, '');
-        this.TableClass = this.utilities_H.InputOrDefault(this.TableClass, this.deafults?.TableClass, 'table table-striped table-hover table-sm');
-        this.Selection = this.utilities_H.InputOrDefault(this.Selection, this.deafults?.Selection);
-        this.SavePreferences = this.utilities_H.InputOrDefault(this.SavePreferences, this.deafults?.SavePreferences);
-        this.PagingStyle = this.utilities_H.InputOrDefault(this.PagingStyle, this.deafults?.PagingStyle, 'bottom');
-        this.RowGroupingPagingStyle = this.utilities_H.InputOrDefault(this.RowGroupingPagingStyle, this.deafults?.RowGroupingPagingStyle, 'left');
-        this.UseSelectionCache = this.utilities_H.InputOrDefault(this.UseSelectionCache, this.deafults?.UseSelectionCache, true);
-        this.ShowItemGroupsColumns = this.utilities_H.InputOrDefault(this.ShowItemGroupsColumns, this.deafults?.ShowItemGroupsColumns, false);
-        this.ArraymodeItemsPerPage = this.utilities_H.InputOrDefault(this.ArraymodeItemsPerPage, this.deafults?.ArraymodeItemsPerPage, 15);
-        this.ColumnsPinnable = this.utilities_H.InputOrDefault(this.ColumnsPinnable, this.deafults?.ColumnsPinnable, true);
-        this.DefaultAlignment = this.utilities_H.InputOrDefault(this.DefaultAlignment, this.deafults?.DefaultAlignment, 'Left');
+        this.ColumnsResizable.set(this.utilities_H.InputOrDefault(this._ColumnsResizable(), this.deafults?.ColumnsResizable));
+        this.AutoUpdate.set(this.utilities_H.InputOrDefault(this._AutoUpdate(), this.deafults?.AutoUpdate));
+        this.AllSearch.set(this.utilities_H.InputOrDefault(this._AllSearch(), this.deafults?.AllSearch, true));
+        this.Export.set(this.utilities_H.InputOrDefault(this._Export(), this.deafults?.Export));
+        this.HidePaging.set(this.utilities_H.InputOrDefault(this._HidePaging(), this.deafults?.HidePaging, false));
+        this.HidePagingCount.set(this.utilities_H.InputOrDefault(this._HidePagingCount(), this.deafults?.HidePagingCount));
+        this.HidePagingButtons.set(this.utilities_H.InputOrDefault(this._HidePagingButtons(), this.deafults?.HidePagingButtons));
+        this.ContainerClass.set(this.utilities_H.InputOrDefault(this._ContainerClass(), this.deafults?.ContainerClass, ''));
+        this.TableClass.set(this.utilities_H.InputOrDefault(this._TableClass(), this.deafults?.TableClass, 'table table-striped table-hover table-sm'));
+        this.Selection.set(this.utilities_H.InputOrDefault(this._Selection(), this.deafults?.Selection));
+        this.SavePreferences.set(this.utilities_H.InputOrDefault(this._SavePreferences(), this.deafults?.SavePreferences));
+        this.PagingStyle.set(this.utilities_H.InputOrDefault(this._PagingStyle(), this.deafults?.PagingStyle, 'bottom'));
+        this.RowGroupingPagingStyle.set(this.utilities_H.InputOrDefault(this._RowGroupingPagingStyle(), this.deafults?.RowGroupingPagingStyle, 'left'));
+        this.UseSelectionCache.set(this.utilities_H.InputOrDefault(this._UseSelectionCache(), this.deafults?.UseSelectionCache, true));
+        this.ShowItemGroupsColumns.set(this.utilities_H.InputOrDefault(this._ShowItemGroupsColumns(), this.deafults?.ShowItemGroupsColumns, false));
+        this.ArraymodeItemsPerPage.set(this.utilities_H.InputOrDefault(this._ArraymodeItemsPerPage(), this.deafults?.ArraymodeItemsPerPage, 15));
+        this.ColumnsPinnable.set(this.utilities_H.InputOrDefault(this._ColumnsPinnable(), this.deafults?.ColumnsPinnable, true));
+        this.DefaultAlignment.set(this.utilities_H.InputOrDefault(this._DefaultAlignment(), this.deafults?.DefaultAlignment, 'Left'));
+        this.HiddenColumns.set(this.utilities_H.InputOrDefault(this._HiddenColumns(), null));
+        this.ColumnsOrdering.set(this.utilities_H.InputOrDefault(this._ColumnsOrdering(), null));
+        this.OrderByColumn.set(this.utilities_H.InputOrDefault(this._OrderByColumn(), null));
+        this.SelectAll.set(this.utilities_H.InputOrDefault(this._SelectAll(), null));
+        this.ShiftClick.set(this.utilities_H.InputOrDefault(this._ShiftClick(), null));
+        this.UseArrayModePaging.set(this.utilities_H.InputOrDefault(this._UseArrayModePaging(), true));
+        this.OwnKey.set(this.utilities_H.InputOrDefault(this._OwnKey(), ''));
+        this.ParentKey.set(this.utilities_H.InputOrDefault(this._ParentKey(), ''));
+        this.DynamicRowColumnsDefinition.set(this.utilities_H.InputOrDefault(this._DynamicRowColumnsDefinition(), null));
     }
     /** @ignore */
     async ngAfterViewInit() {
@@ -4296,23 +4347,23 @@ class EsTableComponent {
         let usesThsAndTdsDirectives = this.EsTds?.length > 0 && this.EsThs?.length > 0;
         let hasNoContentProjection = !this.bodyRef && !this.headerRef && !this.headerGroupRef && !this.secondaryHeaderGroupRef;
         if (usesThsAndTdsDirectives || hasNoContentProjection) {
-            if (this.UseCustomCells == null)
-                this.UseCustomCells = true;
-            if (this.HiddenColumns == null && this.UseCustomCells)
-                this.HiddenColumns = true;
-            if (this.ColumnsOrdering == null && this.UseCustomCells)
-                this.ColumnsOrdering = true;
-            if (this.OrderByColumn == null && this.UseCustomCells)
-                this.OrderByColumn = true;
-            if (this.SelectAll == null && this.Selection)
-                this.SelectAll = true;
-            if (this.ShiftClick == null && this.Selection)
-                this.ShiftClick = true;
-            this.DirectivesBased = true;
+            if (this.UseCustomCells() == null)
+                this.UseCustomCells.set(true);
+            if (this.HiddenColumns() == null && this.UseCustomCells)
+                this.HiddenColumns.set(true);
+            if (this.ColumnsOrdering() == null && this.UseCustomCells)
+                this.ColumnsOrdering.set(true);
+            if (this.OrderByColumn() == null && this.UseCustomCells)
+                this.OrderByColumn.set(true);
+            if (this.SelectAll() == null && this.Selection)
+                this.SelectAll.set(true);
+            if (this.ShiftClick() == null && this.Selection)
+                this.ShiftClick.set(true);
+            this.DirectivesBased.set(true);
         }
         //Per poter cambiare il layout in base al livello gerarchico il componente deva avere il pieno controllo di ogni cella,
         //che con solo la proiezione (senza celle cusotm) non è disponibile
-        if (this.Hierarchy && !this.UseCustomCells)
+        if (this.Hierarchy() && !this.UseCustomCells())
             throw "Es-table error: Per poter utilizzare l'es-table con [Hierarchy]=\"true\" è richiesto anche [UseCustomCells]=\"true\"";
     }
     /** @ignore */
@@ -4325,12 +4376,8 @@ class EsTableComponent {
             this.ctxMenuSubscription.unsubscribe();
         if (this.copyPasteDetector.ActiveEstReference == this)
             this.copyPasteDetector.ActiveEstReference = null;
-    }
-    /** @ignore */
-    async ngOnChanges(changes) {
-        let newSearchView = changes['SearchView'];
-        if (newSearchView && this.SearchView)
-            this.arrayPulsanti = this.utilities_H.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1, this.SearchView.objectcount, this.SearchView.itemsperpageoverride);
+        this._destroyed$.next();
+        this._destroyed$.complete();
     }
     /** @ignore */
     registerOnChange(fn) { this.propagateChange = fn; }
@@ -4338,28 +4385,28 @@ class EsTableComponent {
     registerOnTouched(fn) { }
     /** @ignore */
     changed(clearItems = false) {
-        if (clearItems && this.viewMode) {
+        if (clearItems && this.viewMode()) {
             if (!this.ItemSourceProperty)
                 this.View.items = [];
             else
-                this.View[this.ItemSourceProperty] = [];
+                this.View[this.ItemSourceProperty()] = [];
         }
         this.propagateChange(this.View);
     }
     /** @ignore */
     async writeValue(obj, throttle = true) {
         this.View = obj ? obj : null;
-        if (this.EsTableHandledSearch && throttle) {
+        if (this.EsTableHandledSearch() && throttle) {
             if (this.callTimeout)
                 clearTimeout(this.callTimeout);
-            this.callTimeout = setTimeout(() => { this.writeValue(obj, false); }, this.SearchThrottle);
+            this.callTimeout = setTimeout(() => { this.writeValue(obj, false); }, this.SearchThrottle());
             return;
         }
         // Mi è arrivata l'AppSearch quindi di sicuro non ho una ricerca in progress
-        this.researchInProgress = false;
-        if (!this.View && !this.SearchView) {
+        this.researchInProgress.set(false);
+        if (!this.View && !this.SearchView()) {
             // Su view nulla evito di fare pressoché qualsiasi cosa. Se arriva un null devo anche assicurarmi di non mostrare nulla
-            this.boundSource = this.TMPBoundSource || [];
+            this.boundSource.set(this.TMPBoundSource || []);
             // Per essere sicuro che dopo un bind di oggetti la es-table aggiorni la grafica
             this.cdr.markForCheck();
             return;
@@ -4368,23 +4415,23 @@ class EsTableComponent {
         // lo correggo--------------------------------------------------------------------------------------------------------------
         if (this.View && typeof this.View.itemsperpageoverride != 'undefined' && !(this.View instanceof AppSearch))
             this.View.__proto__ = new AppSearch();
-        else if (this.SearchView && typeof this.SearchView.itemsperpageoverride != 'undefined' && !(this.SearchView instanceof AppSearch))
-            this.SearchView.__proto__ = new AppSearch();
+        else if (this.SearchView() && typeof this.SearchView().itemsperpageoverride != 'undefined' && !(this.SearchView() instanceof AppSearch))
+            this.SearchView().__proto__ = new AppSearch();
         // -------------------------------------------------------------------------------------------------------------------------
         if (this.View && this.View instanceof AppSearch) {
             // Se cambia l'oggetto intero significa che ho rimandato la ricerca
             this.setMode('view');
             let firstItemGroupOrNoGrouping = (this.View.requestedgroups?.length || 0) == 0;
             // Queste sono item source custom. Le valorizzo al default se non esistono
-            if (this.ItemSourceProperty && !this.View[this.ItemSourceProperty])
-                this.View[this.ItemSourceProperty] = [];
+            if (this.ItemSourceProperty() && !this.View[this.ItemSourceProperty()])
+                this.View[this.ItemSourceProperty()] = [];
             // Se vengo da una ricerca interna mantengo lo stato di selezione precedente (quindi su cambio pagina, cambio ipp, ecc...)
             // se invece l'utente ha fatto una ricerca lui (quindi cambiando filtri), secco le info di selezione
-            if (!this.View.selection || (!this.View.internalsearchrequest && firstItemGroupOrNoGrouping) || !this.UseSelectionCache)
+            if (!this.View.selection || (!this.View.internalsearchrequest && firstItemGroupOrNoGrouping) || !this.UseSelectionCache())
                 this.resetSelection(true);
             this.View.internalsearchrequest = false;
             // Recupero Preference
-            if (this.SavePreferences) {
+            if (this.SavePreferences()) {
                 if (!this.ngControl.name)
                     console.error("Non posso utilizzare le preference senza avere un 'name' per questa tabella");
                 else if (!this.prefService)
@@ -4435,16 +4482,15 @@ class EsTableComponent {
                     }
                 }
             }
-            // La paginazione devo farla solamente quando richiedo o un gruppo principale (se sono in row grouping) o se non richiedo gruppi (in tutti lgi altri casi)
             if (firstItemGroupOrNoGrouping)
-                this.arrayPulsanti = this.utilities_H.getPagesArray(6, this.View.page, this.View.pages || 1, (this.ItemSourceProperty ? this.View[this.ItemSourceProperty] : this.View.items).length, this.View.itemsperpageoverride);
+                this.arrayPulsanti.set(this.utilities_H.getPagesArray(6, this.View.page, this.View.pages || 1, (this.ItemSourceProperty() ? this.View[this.ItemSourceProperty()] : this.View.items).length, this.View.itemsperpageoverride));
         }
         else if (this.View && (this.View.length != null && this.View.length != undefined)) {
             this.setMode('array');
-            if (!this.UseSelectionCache || !this.arraymodeSelection)
+            if (!this.UseSelectionCache() || !this.arraymodeSelection)
                 this.resetSelection(true);
             // Recupero Preference
-            if (this.SavePreferences) {
+            if (this.SavePreferences()) {
                 if (!this.ngControl.name)
                     console.error("Non posso utilizzare le preference senza avere un 'name' per questa tabella");
                 else if (!this.prefService)
@@ -4484,17 +4530,15 @@ class EsTableComponent {
                     }
                 }
             }
-            if (this.SearchView)
-                this.arrayPulsanti = this.utilities_H.getPagesArray(6, this.SearchView.page, this.SearchView.pages || 1, this.SearchView.items.length, this.SearchView.itemsperpageoverride);
         }
         this.finalizeContext();
         this.postBoundSourceCalculation();
-        if (this.View && !this.View.selfsearch && this.EsTableHandledSearch && !this.View.firstsearch) {
+        if (this.View && !this.View.selfsearch && this.EsTableHandledSearch() && !this.View.firstsearch) {
             this.View.selfsearch = true;
             this.changed(true);
             this.onSearchRequest.emit(false);
         }
-        else if (this.View && this.View.selfsearch && this.EsTableHandledSearch) {
+        else if (this.View && this.View.selfsearch && this.EsTableHandledSearch()) {
             this.View.selfsearch = false;
             this.changed();
         }
@@ -4505,54 +4549,54 @@ class EsTableComponent {
      */
     finalizeContext() {
         let viewCasted = this.View;
-        let hasRowGroups = viewCasted && (viewCasted.groupings && viewCasted.groupings.filter(t => !t.aggregation).length > 0) || (this.arrayMode && this.EsThsDirective.some(t => t.thGroup));
+        let hasRowGroups = viewCasted && (viewCasted.groupings && viewCasted.groupings.filter(t => !t.aggregation).length > 0) || (this.arrayMode() && this.EsThsDirective.some(t => t.thGroup));
         // Se ho dei gruppi in modalità array devo sistemare un po' di variabili che diventano insensate
-        if (this.arrayMode && hasRowGroups)
-            this.UseArrayModePaging = false;
+        if (this.arrayMode() && hasRowGroups)
+            this.UseArrayModePaging.set(false);
         // Riempimento della TMPBoundSource con gli oggetti che verranno poi mostrati ad interfaccia
         this.TMPBoundSource = this.items_H.getItemsByMode(false, !this.internalWriteCall);
         // Se ho una gerarchia, assegno i livelli gerarchici alla TMPBoundSource
-        if (this.Hierarchy && !hasRowGroups)
+        if (this.Hierarchy() && !hasRowGroups)
             this.hierarchyMode_H.assignHierarchyLevels(this.TMPBoundSource);
         // L'hashing degli oggetti lo faccio a prescindere
         this.utilities_H.calculateHash(this.TMPBoundSource);
         // Assegno a una variabile mia l'eventuale override per la classe della riga
         // Se poi sono in modalità gerarchica inietto anche la classe per la configurazione del livello della riga
-        if ((this.TMPBoundSource && this.RowClassAssigner) || this.Hierarchy) {
+        if ((this.TMPBoundSource && this.RowClassAssigner) || this.Hierarchy()) {
             for (let i = 0; i < this.TMPBoundSource.length; i++) {
                 let item = this.TMPBoundSource[i];
-                item._rowClass = this.RowClassAssigner ? this.RowClassAssigner(item) : "";
-                item._rowClass += this.Hierarchy ? " est-row-lvl-" + item._level : "";
+                item._rowClass = this.RowClassAssigner?.(item) || "";
+                item._rowClass += this.Hierarchy() ? " est-row-lvl-" + item._level : "";
             }
         }
     }
     /** Genera le informzioni di paginazione per la vista globale dell'es-table */
     setupPagingInformations() {
         // Default che valgono di base, poi eventualmente moddati dalle funzioni sotto
-        this.PagerOptions.ShowCount = !this.HidePagingCount;
-        this.PagerOptions.ShowButtons = !this.HidePagingButtons;
-        this.PagerOptions.ShowPaging = !this.HidePaging;
+        this.PagerOptions.ShowCount = !this.HidePagingCount();
+        this.PagerOptions.ShowButtons = !this.HidePagingButtons();
+        this.PagerOptions.ShowPaging = !this.HidePaging();
         this.PagerOptions.UsesView = true;
-        if (this.arrayMode && this.UseArrayModePaging && !this.SearchView) {
+        if (this.arrayMode() && this.UseArrayModePaging() && !this.SearchView()) {
             this.PagerOptions.PagerCount = this.View.length || 0;
             this.PagerOptions.ShowButtons = this.PagerOptions.ShowButtons && this.View.length > 10;
             this.PagerOptions.View = this.View;
             this.PagerOptions.UsesView = false;
             this.PagerOptions.ShowPagingOptions = this.PagerOptions.ShowButtons;
         }
-        else if (this.arrayMode && (!this.UseArrayModePaging || this.SearchView)) {
-            if (this.SearchView) {
-                this.PagerOptions.View = this.SearchView;
-                this.PagerOptions.PagerCount = this.SearchView.objectcount || 0;
+        else if (this.arrayMode() && (!this.UseArrayModePaging() || this.SearchView())) {
+            if (this.SearchView()) {
+                this.PagerOptions.View = this.SearchView();
+                this.PagerOptions.PagerCount = this.SearchView().objectcount || 0;
             }
             else
                 this.PagerOptions.PagerCount = this.View.length || 0;
-            this.PagerOptions.ShowButtons = this.PagerOptions.ShowButtons && (this.View.length > 10 || (this.SearchView?.objectcount || 0) > 10);
-            this.PagerOptions.ShowCount = this.PagerOptions.ShowCount || (this.View && this.View.length) || (this.SearchView && this.SearchView.objectcount && this.SearchView.objectcount != -1);
+            this.PagerOptions.ShowButtons = this.PagerOptions.ShowButtons && (this.View.length > 10 || (this.SearchView()?.objectcount || 0) > 10);
+            this.PagerOptions.ShowCount = this.PagerOptions.ShowCount || (this.View && this.View.length) || (this.SearchView() && this.SearchView().objectcount && this.SearchView().objectcount != -1);
             this.PagerOptions.ShowPaging = this.PagerOptions.ShowPaging && (this.PagerOptions.ShowButtons || this.PagerOptions.ShowCount);
             this.PagerOptions.ShowPagingOptions = this.PagerOptions.ShowButtons;
         }
-        else if (this.viewMode) {
+        else if (this.viewMode()) {
             let tmpView = this.MainGroupView || this.View;
             let count = tmpView?.groupcount || tmpView?.objectcount;
             this.PagerOptions.Searches = tmpView?.groupcount != null && tmpView?.groupcount != undefined ? 'groups' : 'items';
@@ -4587,21 +4631,21 @@ class EsTableComponent {
         // Questo dev'essere per forza lanciato dopo **bindDisplayToLoadedItemsOrGroups** dato che è lì che alcune cose vengono valorizzate
         this.setupPagingInformations();
         // Molte cose sono ovviamente disponibili solo in modalità View
-        if ((this.viewMode || this.arrayMode) && this.UseCustomCells) {
-            let view = this.viewMode ? View : null;
-            let itemsAndGroups = this.viewMode ? [...((this.ItemSourceProperty ? view[this.ItemSourceProperty] : view.items) || []), ...(view.groups || [])] : View;
-            let si = this.viewMode ? view.selection : this.arraymodeSelection;
+        if ((this.viewMode() || this.arrayMode()) && this.UseCustomCells()) {
+            let view = this.viewMode() ? View : null;
+            let itemsAndGroups = this.viewMode() ? [...((this.ItemSourceProperty() ? view[this.ItemSourceProperty()] : view.items) || []), ...(view.groups || [])] : View;
+            let si = this.viewMode() ? view.selection : this.arraymodeSelection;
             // N.B: Rispettare l'ordine di queste 3 macrocategorie è VITALE
             // *************************************        Sistemazioni di TH, TD, e visibilità varie      *************************************
             // 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.DynamicRowColumnsDefinition?.length > 0) {
+            if ((this.DynamicRowColumnsDefinition()?.length || 0) > 0) {
                 this.logger.log("Generating ths and tds from Dynamic definition");
                 let ret = this.dynamicMode_H.emitThsAndTdsBasedOnDynamicDefinition();
                 this.EsThs = ret.ths;
                 this.EsTds = ret.tds;
             }
             // Gestione delle view in modalità report, i th e i td vengono rigenerati dalle configurazioni della view
-            if (!this.arrayMode && view.report_columns) {
+            if (!this.arrayMode() && view.report_columns) {
                 this.logger.log("Generating ths and tds from report results");
                 let ret = this.reportMode_H.generateThsAndTdsFromView(view);
                 this.EsThs = ret.ths;
@@ -4620,8 +4664,8 @@ class EsTableComponent {
             // Prepassaggio per tirare fuori tutte le info utili sugli headers in modo da non ricacolarseli sempre dopo
             let hI = this.columnMetadata_H.evaluateHeadersGroupingInfos(this.EsThs);
             // Valuta lo stato iniziale di selezione a range
-            this.selection_H.evaluateSingleCellSelection(itemsAndGroups, hI.leafs, this.DynamicRowColumnsDefinition);
-            if (this.arrayMode) // In modalità array non ho un backend...
+            this.selection_H.evaluateSingleCellSelection(itemsAndGroups, hI.leafs, this.DynamicRowColumnsDefinition());
+            if (this.arrayMode()) // In modalità array non ho un backend...
                 this.rowGrouping_H.arrayModeReviewGroupings(hI.leafs); // ... i raggruppamenti li devo fare lato client
             this.columnMetadata_H.reviewColumnsList(hI.leafs); // Aggiorna la lista delle colonne da mostrare nella dialog per ordinamento ecc
             this.columnMetadata_H.alignColumnsIfLoadedView(view); // Se sto caricando una View da hotpotato (quindi con savedstate = true) riallineo la visibilità delle colonne e il loro ordine.
@@ -4644,15 +4688,15 @@ class EsTableComponent {
                 this.ResearchNeeded = false;
             }
         }
-        else if ((this.viewMode || this.arrayMode) && !this.UseCustomCells) {
+        else if ((this.viewMode() || this.arrayMode()) && !this.UseCustomCells()) {
             // Riallineo le info di selezione degli elementi della View
-            let items = this.viewMode ? (this.ItemSourceProperty ? View[this.ItemSourceProperty] : View.items) : View;
-            let si = this.viewMode ? View.selection : this.arraymodeSelection;
+            let items = this.viewMode() ? (this.ItemSourceProperty() ? View[this.ItemSourceProperty()] : View.items) : View;
+            let si = this.viewMode() ? View.selection : this.arraymodeSelection;
             this.selection_H.evaluateSelection(items, si);
         }
         // Per essere sicuro che dopo un bind di oggetti la es-table aggiorni la grafica
         this.cdr.markForCheck();
-        this.FirstBind = false;
+        this.FirstBind.set(false);
     }
     /**
      * Effettua il binding degli oggetti pervenuti da questa chiamata con gli oggetti effettivamente da graficare
@@ -4662,17 +4706,17 @@ class EsTableComponent {
     bindDisplayToLoadedItemsOrGroups(view) {
         if (!this.TMPBoundSource || this.TMPBoundSource.length == 0) {
             this.BaseItemsCount = 0;
-            this.boundSource = [];
+            this.boundSource.set([]);
             return;
         }
-        if (this.arrayMode || !this.UseCustomCells) {
-            this.boundSource = this.TMPBoundSource;
+        if (this.arrayMode() || !this.UseCustomCells()) {
+            this.boundSource.set(this.TMPBoundSource);
             this.BaseItemsCount = view?.objectcount || view?.length || 0;
             return;
         }
         let groupingKeys = view?.groupings?.filter(t => !t.aggregation)?.length || 0;
         if (groupingKeys == 0) {
-            this.boundSource = this.TMPBoundSource;
+            this.boundSource.set(this.TMPBoundSource);
             this.BaseItemsCount = view?.objectcount || 0;
             return;
         }
@@ -4683,10 +4727,12 @@ class EsTableComponent {
         this.RowTDs = this.TMPRowTDs;
         this.RowTHs = this.TMPRowTHs;
         this.RowThGroups = this.TMPRowThGroups ? this.TMPRowThGroups.reverse() : null;
-        this.EmptyRowTds = this.isEmpty(this.RowTDs);
-        this.Columns.Visibile = this.RowTHs.filter(t => t.Visible).length;
-        this.Columns.VisibleUnpinned = this.RowTHs.filter(t => t.Visible && !t.Pinned).length;
-        this.Columns.Global = this.Columns.VisibleUnpinned + (this.HasPinnedColumns ? 1 : 0) + (this.Selection ? 1 : 0) + (this.Removal ? 1 : 0) + (this.Export || this.HiddenColumns || this.ColumnsOrdering || this.CornerMenuOptions ? 1 : 0);
+        this.EmptyRowTds.set(this.isEmpty(this.RowTDs));
+        let vis = this.RowTHs.filter(t => t.Visible).length;
+        let visUnpinned = this.RowTHs.filter(t => t.Visible && !t.Pinned).length;
+        let global = visUnpinned + (this.HasPinnedColumns() ? 1 : 0) + (this.Selection() ? 1 : 0) + (this.Removal() ? 1 : 0) + (this.Export() || this.HiddenColumns() || this.ColumnsOrdering() || this.CornerMenuOptions() ? 1 : 0);
+        let newValue = { Visibile: vis, VisibleUnpinned: visUnpinned, Global: global };
+        this.Columns.set(newValue);
     }
     /**
      * Metodo per capire se un oggetto è completamente vuoto
@@ -4709,7 +4755,7 @@ class EsTableComponent {
      */
     setSelectionStatus(items, all, select, emit = false) {
         if (all) {
-            if (!this.SelectAll) {
+            if (!this.SelectAll()) {
                 console.error("Impossibile impostare la selezione con l'all selection quando l'Input SelectAll è false");
                 return;
             }
@@ -4729,12 +4775,12 @@ class EsTableComponent {
      */
     resetSelection(emit = false) {
         this.selection_H.clearSelectionCaches();
-        if (this.viewMode && this.View) {
+        if (this.viewMode() && this.View) {
             this.View.selection = new ItemsSelection([]);
             if (emit)
                 this.onSelectionChanged.emit(this.View.selection);
         }
-        else if (this.arrayMode) {
+        else if (this.arrayMode()) {
             this.arraymodeSelection = new ItemsSelection([]);
             if (emit)
                 this.onSelectionChanged.emit(this.arraymodeSelection);
@@ -4747,11 +4793,11 @@ class EsTableComponent {
      * @param {'DESC' | 'ASC'} order Nuovo ordine selezionato per la colonna
      */
     thOrderChanged(id, order) {
-        if (!this.viewMode && !this.arrayMode) {
+        if (!this.viewMode() && !this.arrayMode()) {
             console.warn('Order changed on a table not in viewMode or Array mode. Operation not supported');
             return;
         }
-        if (!this.OrderByColumn)
+        if (!this.OrderByColumn())
             return;
         this.columnMetadata_H.handleTHOrderChange(id, order);
     }
@@ -4762,7 +4808,7 @@ class EsTableComponent {
      * @param {AppSearch<any>} viewOverride Override della view da emettere per questa ricerca
      */
     emitSearchRequest(resetsPage, viewOverride) {
-        if (this.viewMode && !viewOverride) {
+        if (this.viewMode() && !viewOverride) {
             this.View.internalsearchrequest = true;
             this.changed();
         }
@@ -4771,8 +4817,8 @@ class EsTableComponent {
                 viewOverride.page = 1;
             viewOverride.internalsearchrequest = true;
         }
-        this.researchInProgress = true;
-        if (this.View && !this.View.selfsearch && this.EsTableHandledSearch) {
+        this.researchInProgress.set(true);
+        if (this.View && !this.View.selfsearch && this.EsTableHandledSearch()) {
             this.View.selfsearch = true;
             this.changed(true);
             this.onSearchRequest.emit(false);
@@ -4803,8 +4849,9 @@ class EsTableComponent {
         let contextFixeds = {};
         for (let i = 0; i < tds.length; i++) {
             let td = tds[i];
-            for (let i = 0; i < this.boundSource.length; i++) {
-                let item = this.boundSource[i];
+            let bs = this.boundSource();
+            for (let i = 0; i < bs.length; i++) {
+                let item = bs[i];
                 let ctx = item._hash;
                 let key = td.td;
                 let th = this.thsCache[td.td];
@@ -4835,7 +4882,7 @@ class EsTableComponent {
                             Multi: td._multi,
                             MultiProp: td._multi ? td.td.split('_')[0] : null,
                             MultiIndex: td._multi ? td.td.split('_')[1] : null,
-                            Alignment: (td.tdAlignment || th.thAlignment || this.DefaultAlignment).toLowerCase(),
+                            Alignment: (td.tdAlignment || th.thAlignment || this.DefaultAlignment()).toLowerCase(),
                             Format: td.tdFormat || th.thFormat,
                             PropertyName: th.thProperty,
                             PropertyType: th.thType,
@@ -4843,7 +4890,7 @@ class EsTableComponent {
                             EditorOptions: th.thEditorOptions,
                             PropAccessor: td.tdPropertyAccessor,
                             RoutePath: thCasted.thRoutePath,
-                            RouteParameterProperties: thCasted.thRouteParameterProperties,
+                            RouteParameterProperties: thCasted.thRouteParameterProperties
                         } :
                         {
                             LeftBorder: thCasted._lbord,
@@ -4859,11 +4906,11 @@ class EsTableComponent {
                             Content: this.rowGrouping_H.getGroupCellDisplay(item, key, th)
                         };
                     if (this.TMPRowTDs[ctx]) {
-                        this.TMPRowTDs[ctx].push(itemToAdd);
+                        this.TMPRowTDs[ctx].push(signal(itemToAdd));
                     }
                     else {
                         this.RowContexts.push(ctx);
-                        this.TMPRowTDs[ctx] = [itemToAdd];
+                        this.TMPRowTDs[ctx] = [signal(itemToAdd)];
                         contextFixeds[ctx] = isFixed ? 1 : 0;
                     }
                 }
@@ -4897,7 +4944,7 @@ class EsTableComponent {
             return;
         let columnsListCache = {};
         let castedView = this.View;
-        let groupingsUndefined = this.viewMode && (castedView && !castedView.groupings || castedView.groupings.length == 0);
+        let groupingsUndefined = this.viewMode() && (castedView && !castedView.groupings || castedView.groupings.length == 0);
         for (let i = 0; i < this.ColumnsList.length; i++) {
             let itm = this.ColumnsList[i];
             columnsListCache[itm.id] = itm;
@@ -4918,7 +4965,7 @@ class EsTableComponent {
                     Order: th.thOrder,
                     Orderable: th.thOrderable,
                     Template: th.Template,
-                    Alignment: (th.thAlignment || this.DefaultAlignment).toLowerCase(),
+                    Alignment: (th.thAlignment || this.DefaultAlignment()).toLowerCase(),
                     // Se non è nessun contenuto né nessun template mostro semplicemente l'ID dell'header
                     Content: th.thStaticContent != null ? th.thStaticContent : th.Template ? '' : th.th,
                     Wrap: th.thWrap,
@@ -4979,8 +5026,8 @@ class EsTableComponent {
         let anyG = group;
         anyG._expanded = !anyG._expanded;
         // Sono in modalità raggruppamento virtuale da array: Espandere significa rendere visibili tutti gli oggetti relativi a questo gruppo, viceversa il contrarre
-        if (this.ArrayGrouping) {
-            let allRelatives = this.boundSource.filter(t => (t._group && ((anyG._expanded && t._parent == anyG._thisKey) || (!anyG._expanded && t._parent && t._parent.startsWith(anyG._thisKey)))) ||
+        if (this.ArrayGrouping()) {
+            let allRelatives = this.boundSource().filter(t => (t._group && ((anyG._expanded && t._parent == anyG._thisKey) || (!anyG._expanded && t._parent && t._parent.startsWith(anyG._thisKey)))) ||
                 (t._item && ((anyG._expanded && t._thisKey == anyG._thisKey) || (!anyG._expanded && t._thisKey.startsWith(anyG._thisKey)))));
             allRelatives.forEach(t => { t._visible = anyG._expanded; if (t._group)
                 t._expanded = false; });
@@ -5011,7 +5058,7 @@ class EsTableComponent {
         else {
             let path = (anyG._parent || '') + group.value;
             // Se ho chiuso un gruppo non mi serve rieffettuare ricerce, mi basta eliminare dagli oggetti bindati tutti gli elementi sottostanti a quel gruppo
-            this.boundSource = this.boundSource.filter(t => !t._parent || !t._parent.startsWith(path));
+            this.boundSource.set(this.boundSource().filter(t => !t._parent || !t._parent.startsWith(path)));
             // devo però anche rimuovere eventuali cache relative
             this.groupSearchRequestsCache = this.groupSearchRequestsCache.filter(t => t.path != path);
         }
@@ -5023,10 +5070,11 @@ class EsTableComponent {
      * @param {boolean} forcedVal Valore forzato di check da assegnare agli oggetti
      */
     globalCheckChanged(forcedVal = null) {
+        debugger;
         this.selection_H.clearSelectionStatusExcluding(null);
         // Prendo tutti gli elementi presenti in questa vista. Se ho gruppi prendo solo i gruppi a livello 0, altrimenti prendo tutti gli oggetti per selezionarli
-        let items = this.boundSource.find(t => t._group) ? this.boundSource.filter(t => t._group && !t._parent) : this.boundSource;
-        var itemSelection = this.selection_H.handleItemsSelection(items, forcedVal, this.globalCheck);
+        let items = this.boundSource().find(t => t._group) ? this.boundSource().filter(t => t._group && !t._parent) : this.boundSource();
+        var itemSelection = this.selection_H.handleItemsSelection(items, forcedVal, this.globalCheck());
         this.changed();
         this.onSelectionChanged.emit(itemSelection);
     }
@@ -5043,10 +5091,10 @@ class EsTableComponent {
     handleClick(event, item) {
         this.selection_H.clearSelectionStatusExcluding(null);
         let selecteditems = [];
-        if (event.shiftKey && this.ShiftClick && !this.SingleSelection) {
+        if (event.shiftKey && this.ShiftClick() && !this.SingleSelection()) {
             this.utiExts.clearTextSelection();
             let startSelecting = false;
-            let items = this.boundSource.filter(t => !t._group && !t._sep);
+            let items = this.boundSource().filter(t => !t._group && !t._sep);
             for (let i = 0; i < items.length; i++) {
                 let t = items[i];
                 if (startSelecting) {
@@ -5079,7 +5127,7 @@ class EsTableComponent {
      */
     addToPage(page) {
         let view = this.MainGroupView ? this.MainGroupView : this.View;
-        this.goToPage(((this.SearchView || view)?.page || 0) + page);
+        this.goToPage(((this.SearchView() || view)?.page || 0) + page);
     }
     /**
      * Sposta la ricerca alla pagina specificata
@@ -5087,18 +5135,18 @@ class EsTableComponent {
      * @param {number} page Pagina a cui navigare
      */
     goToPage(page) {
-        let view = this.MainGroupView ? this.MainGroupView : (this.arrayMode ? this.SearchView : this.View);
+        let view = this.MainGroupView ? this.MainGroupView : (this.arrayMode() ? this.SearchView() : this.View);
         if (!view.page || !view.pages)
             return;
-        let appSearchElement = this.SearchView || view;
+        let appSearchElement = this.SearchView() || view;
         if (page === 0 || (page > appSearchElement.pages && appSearchElement.pages > 0))
             return;
         appSearchElement.page = page;
         let count = (view.items.length || view.groups?.length || 0);
         let ipp = view.itemsperpageoverride || 15;
-        this.arrayPulsanti = this.utilities_H.getPagesArray(6, appSearchElement.page, appSearchElement.pages, count, ipp);
+        this.arrayPulsanti.set(this.utilities_H.getPagesArray(6, appSearchElement.page, appSearchElement.pages, count, ipp));
         let hasGroupings = !!this.MainGroupView;
-        this.emitSearchRequest(false, hasGroupings ? view : this.SearchView ? this.SearchView : null);
+        this.emitSearchRequest(false, hasGroupings ? view : (this.SearchView() || null));
     }
     /**
      * Evento richiamato sul cambio della paginazione. Verrà richiamato l'evento **emitSearchRequest**
@@ -5109,10 +5157,10 @@ class EsTableComponent {
         this.changed();
         if (this.MainGroupView)
             this.emitSearchRequest(true, this.MainGroupView);
-        else if (this.SearchView) {
+        else if (this.SearchView()) {
             // Questo secondo me si può portare a livello un po' più alto
-            this.SearchView.page = 1;
-            this.emitSearchRequest(true, this.SearchView);
+            this.SearchView().page = 1;
+            this.emitSearchRequest(true, this.SearchView());
         }
         else
             this.emitSearchRequest(true);
@@ -5124,9 +5172,9 @@ class EsTableComponent {
     }
     /** Metodo che gestisce la modifica del tempo specificato per l'aggiornamento automatico */
     autoUpdateChanged() {
-        if (!/^[1-9]\d*$/.test(this.seconds))
-            this.seconds = '10';
-        let secondsInMs = parseInt(this.seconds, null) * 1000;
+        if (!/^[1-9]\d*$/.test(this.seconds()))
+            this.seconds.set('10');
+        let secondsInMs = parseInt(this.seconds(), null) * 1000;
         if (this.autoUpdate)
             this.updateTimer = setInterval(() => { this.emitSearchRequest(false); }, secondsInMs);
         else
@@ -5205,8 +5253,8 @@ class EsTableComponent {
      * @param {'array' | 'view' | 'report'} mode Modalità da impostare
      **/
     setMode(mode) {
-        this.viewMode = mode == 'view';
-        this.arrayMode = mode == 'array';
+        this.viewMode.set(mode == 'view');
+        this.arrayMode.set(mode == 'array');
     }
     /**
      * Helper per effettuare chiamate interne di allineamento alla funzione **writeValue**,
@@ -5222,16 +5270,16 @@ class EsTableComponent {
         // Se sono in modalità View viene mantenuto in automatico il numero di pagina, ma per la modalità array devo prendere le info di paginazione prima e riapplicarle dopo
         let arrayPage;
         let arrayIpp;
-        if (this.arrayMode) {
+        if (this.arrayMode()) {
             arrayPage = this.arraymodePage;
-            arrayIpp = this.ArraymodeItemsPerPage;
+            arrayIpp = this.ArraymodeItemsPerPage();
         }
-        if (!relaunchSearch && this.viewMode)
+        if (!relaunchSearch && this.viewMode())
             this.View.selfsearch = true;
         this.writeValue(this.View);
         this.cdr.detectChanges();
-        if (this.arrayMode) {
-            this.ArraymodeItemsPerPage = arrayIpp;
+        if (this.arrayMode()) {
+            this.ArraymodeItemsPerPage.set(arrayIpp);
             this.arrayGoToPage(arrayPage);
         }
     }
@@ -5266,52 +5314,52 @@ class EsTableComponent {
      */
     dbClickEditOrSingleClickRowSelection($event, rowItem, item) {
         // Prima cosa da fare è controllare se ci sono dei range lasciati da operazioni precedenti (se applicabile) e ripulirli
-        if (this.rangeSelected && !$event.ctrlKey && this.Selection) {
+        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) {
+        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.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.handleRowClick($event, item, this.Selection(), true);
                 this.clearCellClickTimer();
                 return;
             }
             // Primo click: non fa niente e se il tempo per il secondo click scade resetta tutto
             this.cellDbClickTimer = setTimeout(() => {
                 this.clearCellClickTimer();
-                if (!this.RangeSelection || !this.mouseIsDown) {
+                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.handleRowClick($event, item, this.Selection(), true);
                 }
             }, this.doubleClickBufferMs);
         }
         // In modalità a range la creazione del range è gestita dai mousedown, move ed up...
         // La selezione delle righe invece è gestita dalle caselline a sinistra
-        if (this.RangeSelection)
+        if (this.RangeSelection())
             return;
         // Se ho fatto click col control attaccato esco subito dato che deve solo permettere la navigazione dei link
         if ($event.ctrlKey)
             return;
         // Tutti i click su una cella già in edit non devono effettuare la selezione della riga
-        if (rowItem._editing)
+        if (rowItem()._editing)
             return;
         // Per evitare di rallentare a prescindere
-        if (!this.Editable) {
-            this.handleRowClick($event, item, this.Selection, true);
+        if (!this.Editable()) {
+            this.handleRowClick($event, item, this.Selection(), true);
             return;
         }
     }
     /** Evento che gestisce il comando "Copia" buttando i valori selezionati nella clipboard in base al loro tipo */
     handleCopy() {
-        if (!this.RangeSelection)
+        if (!this.RangeSelection())
             return;
         let sel = this.selection_H.getSelectionStatusSelection();
         if (sel.length > 0 && sel[0].length > 0) {
@@ -5322,7 +5370,7 @@ class EsTableComponent {
     }
     /** Evento che gestisce il comando "Incolla" prendendo i dati della clipboard e applicandoli al range di selezione attuale in base al tipo delle celle sotto */
     handlePaste() {
-        if (!this.RangeSelection)
+        if (!this.RangeSelection())
             return;
         let sel = this.selection_H.getSelectionStatusSelection();
         if (sel.length > 0 && sel[0].length > 0) {
@@ -5332,7 +5380,7 @@ class EsTableComponent {
                     values.splice(values.length - 1, 1);
                 if (values.length > 0 && values[0].length > 0) {
                     // Check se la modifica è abilitata
-                    if (!this.Editable) {
+                    if (!this.Editable()) {
                         this.msgExts.simpleWarning(this.lc.loc("Data for this table cannot be edited"));
                         return;
                     }
@@ -5381,7 +5429,7 @@ class EsTableComponent {
     handleRowClick($event, item, selection, internalCall = false) {
         // Se ho un ctrl premuto esco con true in modo da fare bubbling dell'evento e lasciarlo gestire al browser (link ecc...)
         // Stessa cosa se ho custom cell dato che la gestione dei click viene affidata ai singoli TD
-        if ($event.ctrlKey || (this.UseCustomCells && !internalCall))
+        if ($event.ctrlKey || (this.UseCustomCells() && !internalCall))
             return true;
         if (selection)
             this.selection_H.clearSelectionStatusExcluding(null);
@@ -5396,7 +5444,7 @@ class EsTableComponent {
      * Gestione del click destro sull'es-table
      */
     onRightClick() {
-        if (this.Selection)
+        if (this.Selection())
             this.onOpenContextMenu.emit();
     }
     /**
@@ -5409,13 +5457,13 @@ class EsTableComponent {
      */
     setupUserEdit(rowItem, item) {
         this.selection_H.clearSelectionStatusExcluding(null);
-        if (this.Editable && rowItem.PropertyName) {
-            let dynMode = this.DynamicRowColumnsDefinition?.length > 0;
-            rowItem._editing = true;
-            rowItem.old_value = dynMode ? item.properties[rowItem.PropertyName] : item[rowItem.PropertyName];
+        if (this.Editable() && rowItem().PropertyName) {
+            let dynMode = (this.DynamicRowColumnsDefinition()?.length || 0) > 0;
+            let newValues = { _editing: true, old_value: dynMode ? item.properties[rowItem().PropertyName] : item[rowItem().PropertyName] };
+            rowItem.set(Object.assign(rowItem(), newValues));
         }
         this.cdr.detectChanges();
-        setTimeout(() => { this.FocusSubject.next(); });
+        requestAnimationFrame(() => { this.FocusSubject.next(); });
     }
     /**
      * La modifica dell'utente è terminata. Si reimposta la variabile relativa a "false" in modo da nascondere l'input di testo e si emette la modifica del valore
@@ -5425,21 +5473,24 @@ class EsTableComponent {
      * @param {number} columnIndex Indice della colonna su cui è avvenuta la modifica
      */
     finalizeUserEdit(rowItem, item, columnIndex) {
-        let dynMode = this.DynamicRowColumnsDefinition?.length > 0;
-        let rowItm = rowItem;
-        rowItm._editing = false;
-        let old = rowItm.old_value;
-        let niu = dynMode ? item.properties[rowItem.PropertyName] : item[rowItem.PropertyName];
-        let olddate = this.dateExts.getDateConvertion(old);
-        let niudate = this.dateExts.getDateConvertion(niu);
-        if ((olddate && niudate && olddate.isSame && olddate.isSame(niudate)) || old === niu)
-            return;
-        this.onModelChange.emit([new EsTableModelChange(item, rowItem.ID, rowItem.PropertyName, old, niu)]);
-        this.selectionStatus[item._ordinal][columnIndex].val_setter(niu);
+        // Qualche componente di ngprime qui ha bisogno di un po' di tempo per appiccicare il valore nuovo
+        requestAnimationFrame(() => {
+            let dynMode = (this.DynamicRowColumnsDefinition()?.length || 0) > 0;
+            let newValues = { _editing: false };
+            rowItem.set(Object.assign(rowItem(), newValues));
+            let old = rowItem().old_value;
+            let niu = dynMode ? item.properties[rowItem().PropertyName] : item[rowItem().PropertyName];
+            let olddate = this.dateExts.getDateConvertion(old);
+            let niudate = this.dateExts.getDateConvertion(niu);
+            if ((olddate && niudate && olddate.isSame && olddate.isSame(niudate)) || old === niu)
+                return;
+            this.onModelChange.emit([new EsTableModelChange(item, rowItem().ID, rowItem().PropertyName, old, niu)]);
+            this.selectionStatus[item._ordinal][columnIndex].val_setter(niu);
+        });
     }
     mousedown(event, rowItem, _) {
         // Tasto diverso dal click sinistro -> ciao è stato bello e intenso
-        if (event.buttons != 1 || !this.RangeSelection)
+        if (event.buttons != 1 || !this.RangeSelection())
             return;
         // Sto lavorando su QUESTA es-table
         this.copyPasteDetector.ActiveEstReference = this;
@@ -5453,14 +5504,16 @@ class EsTableComponent {
         this.firstCoordinates = { row, column };
         // Se ho già un range di selezione ignoro temporanemaente questa selezione in modo da capire bene cosa devo fare dopo (click sulla riga / altra selezione)
         // e gestire la grafica in maniera un po' più precisa
-        if (!this.rangeSelected || (event.ctrlKey || !this.Selection))
+        if (!this.rangeSelected || (event.ctrlKey || !this.Selection())) {
             this.selection_H.singleCellSelection({ view: event.view, range: false }, row, column);
+            this.cdr.markForCheck();
+        }
         else
             this.rangeStartWasIgnored = true;
         this.logger.log(`mouse down on ${row}:${column}`);
     }
     mouseenter(event) {
-        if (!this.RangeSelection)
+        if (!this.RangeSelection())
             return;
         if (event.buttons == 0)
             this.mouseIsDown = false;
@@ -5478,9 +5531,10 @@ class EsTableComponent {
             this.logger.log(`mouse move over ${row}:${column}`);
             this.rangeSelected = true;
         }
+        this.cdr.markForCheck();
     }
     mouseup(event) {
-        if (!this.RangeSelection)
+        if (!this.RangeSelection())
             return;
         let id = event.currentTarget.id;
         let coords = id.split('_');
@@ -5488,10 +5542,11 @@ class EsTableComponent {
         let column = parseInt(coords[coords.length - 1]);
         // Se il mouseup viene effettuato sulla stessa cella del primo mousedown e siamo in modalità di selezione deseleziono la cella perché è un semplice click
         if (this.mouseIsDown && this.firstCoordinates) {
-            if (this.firstCoordinates.row == row && this.firstCoordinates.column == column && !event.ctrlKey && !this.rangeStartWasIgnored && this.Selection)
+            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)
+            else if (event.ctrlKey || !this.Selection())
                 this.rangeSelected = true;
+            this.cdr.markForCheck();
         }
         this.mouseIsDown = false;
         this.logger.log(`mouse lifted up`);
@@ -5504,8 +5559,13 @@ class EsTableComponent {
         let toRet = this.EsTdsCache[`${prop}_${hash}`];
         return toRet;
     }
-    registerCell(event) {
+    registerCell(event, rowItem, _, cellRef) {
         this.EsTdsCache[`${event.id}_${event.hash}`] = event.self;
+        this._zone.runOutsideAngular(() => {
+            fromEvent(cellRef.nativeElement, 'mousedown').pipe(takeUntil(this._destroyed$)).subscribe((e) => { this.mousedown(e, rowItem, _); });
+            fromEvent(cellRef.nativeElement, 'mouseenter').pipe(takeUntil(this._destroyed$)).subscribe((e) => { this.mouseenter(e); });
+            fromEvent(cellRef.nativeElement, 'mouseup').pipe(takeUntil(this._destroyed$)).subscribe((e) => { this.mouseup(e); });
+        });
     }
     //* Piango ancora
     //* Gestione Embedding
@@ -5538,13 +5598,13 @@ class EsTableComponent {
             return;
         this.emb.MainWindow.postMessage({ type: "modal-close" }, "*");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTableComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i2$1.PreferencesService, optional: true }, { token: EST_DEFAULTS, optional: true }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: UtilitiesHandler }, { token: i5.UtilityService }, { token: i5.ExportService }, { token: i5.DateService }, { token: i5.MessageService }, { token: CopyPasteDetector }, { token: i5.ClipboardService }, { token: Logger }, { token: i5.AppEmbeddingExtensions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EsTableComponent, isStandalone: false, selector: "es-table", inputs: { EsThTdProvider: "EsThTdProvider", CornerMenuOptions: "CornerMenuOptions", ColumnsResizable: "ColumnsResizable", ColumnsPinnable: "ColumnsPinnable", AutoUpdate: "AutoUpdate", Height: "Height", EmptySpaceBackgroundColor: "EmptySpaceBackgroundColor", EsTableHandledSearch: "EsTableHandledSearch", MaxHeight: "MaxHeight", ContainerClass: "ContainerClass", XLSXExport: "XLSXExport", CSVExport: "CSVExport", AllSearch: "AllSearch", HighCellDensity: "HighCellDensity", Selection: "Selection", ShowLoadingOnBootstrap: "ShowLoadingOnBootstrap", Removal: "Removal", RemovalCondition: "RemovalCondition", Export: "Export", ShiftClick: "ShiftClick", CountLabel: "CountLabel", HidePaging: "HidePaging", HidePagingCount: "HidePagingCount", HidePagingButtons: "HidePagingButtons", ContextMenu: "ContextMenu", ExportFileName: "ExportFileName", TableClass: "TableClass", ExportFunction: "ExportFunction", ExportOnlyVisibleColumns: "ExportOnlyVisibleColumns", HasHeaderGroup: "HasHeaderGroup", HasSecondaryHeaderGroup: "HasSecondaryHeaderGroup", HeaderHidden: "HeaderHidden", BodyHidden: "BodyHidden", SelectionDisabled: "SelectionDisabled", SingleSelection: "SingleSelection", RowClassAssigner: "RowClassAssigner", OrderByColumn: "OrderByColumn", MultipleOrderingDirectives: "MultipleOrderingDirectives", HiddenColumns: "HiddenColumns", ColumnsOrdering: "ColumnsOrdering", SearchView: "SearchView", SelectAll: "SelectAll", UseArrayModePaging: "UseArrayModePaging", DynamicRowColumnsDefinition: "DynamicRowColumnsDefinition", DynamicOperations: "DynamicOperations", Hierarchy: "Hierarchy", ParentKey: "ParentKey", OwnKey: "OwnKey", StartsExpanded: "StartsExpanded", SavePreferences: "SavePreferences", DefaultAlignment: "DefaultAlignment", PagingStyle: "PagingStyle", RowGroupingPagingStyle: "RowGroupingPagingStyle", ItemSourceProperty: "ItemSourceProperty", UseSelectionCache: "UseSelectionCache", ShowItemGroupsColumns: "ShowItemGroupsColumns", Editable: "Editable", RangeSelection: "RangeSelection", SearchThrottle: "SearchThrottle", ArraymodeItemsPerPage: "ArraymodeItemsPerPage" }, outputs: { onOrderChanged: "onOrderChanged", onSearchRequest: "onSearchRequest", onSelectionChanged: "onSelectionChanged", onRemoval: "onRemoval", onAbortRemoval: "onAbortRemoval", onModelChange: "onModelChange", onOpenContextMenu: "onOpenContextMenu", onCornerAction: "onCornerAction", onDynamicOperation: "onDynamicOperation" }, queries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerGroupRef", first: true, predicate: ["headerGroup"], descendants: true }, { propertyName: "secondaryHeaderGroupRef", first: true, predicate: ["secondaryHeaderGroup"], descendants: true }, { propertyName: "EsTdEditorDirectives", predicate: EsTdEditorDirective }, { propertyName: "EsTdsDirective", predicate: EsTdDirective }, { propertyName: "EsThsDirective", predicate: EsThDirective }, { propertyName: "ThTdProvider", predicate: ThTdProvider }], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "exportDownloader", first: true, predicate: ["exportDownloader"], descendants: true }, { propertyName: "tableEmptyMenu", first: true, predicate: ["emptyMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, 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\" [ngModelOptions]=\"{'standalone': true}\" />&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\" [ngModelOptions]=\"{'standalone': true}\" (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' : lc.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                    <div id=\"thead->tr->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                        Selection: {{Selection}}\r\n                        HasPinnedColumns: {{HasPinnedColumns}}\r\n                        arrayMode: {{arrayMode}}\r\n                        viewMode: {{viewMode}}\r\n                        UseCustomCells: {{UseCustomCells}}\r\n                        RowTHs: {{!!RowTHs}}\r\n                        RowTHs.length: {{RowTHs?.length}}\r\n                        DynamicRowColumnsDefinition: {{!!DynamicRowColumnsDefinition}}\r\n                    </div>\r\n\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\"\r\n                                            [style.width.px]=\"rowHeader.PinnedWidth\"\r\n                                            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\"\r\n                                            [Fixed]=\"rowHeader.Fixed\"\r\n                                            [Order]=\"rowHeader.Order\"\r\n                                            [Resizable]=\"ColumnsResizable\"\r\n                                            [Orderable]=\"rowHeader.Orderable\"\r\n                                            [OrderBy]=\"OrderByColumn\"\r\n                                            [SearchInProgress]=\"!!researchInProgress\"\r\n                                            (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\"\r\n                                            (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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                                <div id=\"thead->tr->th->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                                    rowHeader: {{!!rowHeader}}\r\n                                    rowHeader.Visible: {{rowHeader?.Visible}}\r\n                                    rowHeader.Pinned: {{rowHeader?.Pinned}}\r\n                                    rowHeader.Template: {{!!rowHeader.Template}}\r\n                                </div>\r\n\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\"\r\n                                    es-th=\"{{rowHeader.ID}}\"\r\n                                    class=\"{{rowHeader.Class || ''}}\"\r\n                                    [style.text-align]=\" rowHeader.Alignment || null\"\r\n                                    [class.est-ltab-border]=\"rowHeader.LeftBorder\"\r\n                                    [class.est-rtab-border]=\"rowHeader.RightBorder\"\r\n                                    [class.est-nowrap]=\"!rowHeader.Wrap\"\r\n                                    [Order]=\"rowHeader.Order\"\r\n                                    [Resizable]=\"ColumnsResizable\"\r\n                                    [Orderable]=\"rowHeader.Orderable\"\r\n                                    [OrderBy]=\"OrderByColumn\"\r\n                                    [SearchInProgress]=\"!!researchInProgress\"\r\n                                    (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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(); showDialog(changeColumnVisibilityModal, columnsDialog)\">\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                <es-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></es-paging>\r\n                <es-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);\"></es-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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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 i = index, 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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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\"><es-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);\"></es-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\"><es-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);\"></es-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 let-index=\"index\">\r\n    <ng-container *ngIf=\"(!UseCustomCells || EmptyRowTds) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item, index: index}\"></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     <!-- Manca da reimplementare il  [FocusSubject]=\"FocusSubject\" -->\r\n    <ng-container *ngIf=\"ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Configuration]=\"ctx.definition.EditorOptions\" [(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\" [Configuration]=\"ctx.definition.EditorOptions\" [(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 cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n                    <ng-container *ngIf=\"cell.Pinned\">\r\n                        <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                                $implicit: item, \r\n                                index: index, \r\n                                cell: cell, \r\n                                pinned: true, \r\n                                selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                                selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                                selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                                selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                                selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                            };\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <!-- Body effettivo della riga -->\r\n        <ng-container *ngFor=\"let cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n            <ng-container *ngIf=\"!cell.Pinned;\">\r\n                <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                        $implicit: item, \r\n                        index: index, \r\n                        cell: cell, \r\n                        pinned: false, \r\n                        selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                        selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                        selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                        selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                        selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                    };\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\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-item let-cell=\"cell\" let-index=\"index\" let-pinned=\"pinned\" let-selStatus=\"selectionStatus\" let-selStatusUp=\"selectionStatusUp\" let-selStatusDown=\"selectionStatusDown\" let-selStatusLeft=\"selectionStatusLeft\" let-selStatusRight=\"selectionStatusRight\">\r\n\r\n    <!-- Customizzazione per celle con icona (sono essenzialmente operazioni semplici e basta) -->\r\n    <ng-container *ngIf=\"cell.IconClass && cell.Visible\">\r\n        <ng-container *ngIf=\"!cell.ConditionField || (((item.properties || item) | est_propinsensitive : cell.ConditionField) == cell.ConditionValue)\">\r\n            <td [class.est-no-right-padding]=\"index != DynamicOperations.length -1\" [class.est-no-left-padding]=\"index != 0\" class=\"est-col-min\"><span title=\"{{cell.Title}}\" class=\"{{cell.IconClass}} est-pointer\" (click)=\"dynamicOperation(item, cell.ID)\">{{cell.Content}}</span></td>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"cell.ConditionField && (((item.properties || item) | est_propinsensitive : cell.ConditionField) != cell.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    <!-----------------------------------------------------------------------------------------------------------------------\r\n    -   ATTENZIONE: Gli spazi fra gli Input 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 e selezione multicella                                                                                          -\r\n    ------------------------------------------------------------------------------------------------------------------------->\r\n\r\n    <td *ngIf=\"!cell.IconClass && cell.Visible\"\r\n        es-td=\"{{cell.Property || cell.ID}}\"\r\n        id=\"estd_{{cell.Property || cell.ID}}_{{item._ordinal}}_{{index}}\"\r\n        class=\"{{ cell.Class }}\"\r\n\r\n        [Context]=\"item._hash\"\r\n        [class.est-default-row-height]=\"!HighCellDensity\"\r\n        [class.est-white-selected]=\"item._selected\"\r\n        [class.est-no-selection]=\"Editable && cell.PropertyName\"\r\n        [class.est-rg-hdr]=\"cell.GroupHeader\"\r\n        [class.est-rg-agg]=\"cell.GroupAggregation\"\r\n        [class.est-nowrap]=\"Hierarchy || !cell.Wraps\"\r\n\r\n        [style.text-align]=\" (!pinned && cell.Alignment) ? cell.Alignment : null\"\r\n        [style.color]=\"(!pinned && item.forecolors && cell.PropAccessor) ? item.forecolors[cell.PropAccessor] : null\"\r\n        [style.background-color]=\"(!pinned && item.backcolors && cell.PropAccessor) ? item.backcolors[cell.PropAccessor] : null\"\r\n        \r\n        [style.width.px]=\"pinned ? cell.PinnedWidth : null\"\r\n        [class.est-no-border]=\"pinned\"\r\n\r\n        [class.est-no-border-bottom]=\"selStatusDown?.tborder\"\r\n        [class.est-no-border-top]=\"selStatusUp?.bborder\"\r\n        [class.est-ltab-border]=\"cell.LeftBorder && !selStatus?.lborder && !selStatusLeft?.rborder\"\r\n        [class.est-rtab-border]=\"cell.RightBorder && !selStatus?.rborder && !selStatusRight?.lborder\"\r\n        \r\n        [class.est-selected-cell]=\"selStatus?.selected\"\r\n        [class.est-cell-lborder]=\" selStatus?.lborder\"\r\n        [class.est-cell-rborder]=\" selStatus?.rborder\"\r\n        [class.est-cell-tborder]=\" selStatus?.tborder\"\r\n        [class.est-cell-bborder]=\" selStatus?.bborder\"\r\n        [class.est-cell-lborder-tmp]=\"!cell.LeftBorder && !selStatus?.lborder && !selStatus?.loverlaps\"\r\n        [class.est-cell-rborder-tmp]=\"!cell.RightBorder && !selStatus?.rborder && !selStatus?.roverlaps\"\r\n        [class.est-cell-tborder-tmp]=\"!selStatus?.tborder && !selStatus?.toverlaps\"\r\n        [class.est-cell-bborder-tmp]=\"!selStatus?.bborder && !selStatus?.boverlaps\"\r\n\r\n        (mousedown)=\"mousedown($event, cell, item)\"\r\n        (mouseenter)=\"mouseenter($event)\"\r\n        (mouseup)=\"mouseup($event)\"\r\n        (onCellGeneration)=\"registerCell($event)\"\r\n        (click)=\"dbClickEditOrSingleClickRowSelection($event, cell, item)\">\r\n\r\n        <div [class.est-edit-hidden]=\"cell._editing\" [class.est-pre]=\"!(Hierarchy && index == 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=\"cell.Template\">\r\n                <ng-container *ngIf=\"!cell.Multi\"><ng-container *ngTemplateOutlet=\"cell.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                <span *ngIf=\"cell.Multi\"><ng-container *ngTemplateOutlet=\"cell.Template; context: { $implicit: (item[cell.MultiProp] ? item[cell.MultiProp][cell.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=\"!cell.Template && !cell.Multi && !cell.Content\">\r\n                <a *ngIf=\"cell.RoutePath\" [routerLink]=\"item | est_routerlink : cell.RoutePath : cell.RouteParameterProperties\" class=\"est-link\" [innerHTML]=\"item.properties ? item.properties[cell.PropertyName] : item[cell.PropertyName]\"></a>\r\n\r\n                <span *ngIf=\"cell.PropAccessor\">\r\n                    {{(item.values? item.values[cell.PropAccessor] : item[cell.PropAccessor]) | est_format: cell.Format }}\r\n                </span>\r\n\r\n                <ng-container *ngIf=\"!cell.PropAccessor && !cell.RoutePath\">\r\n                    <ng-container *ngTemplateOutlet=\"cell.PropertyName | est_renderer: { name: cell.RendererName, src: EsTdsDirective, fallback: defaultEsTd }; context: { $implicit: { definition: cell, value: item.properties ? item.properties[cell.PropertyName] : item[cell.PropertyName], type: cell.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 && index == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <!-- 1% Content programmatico per le casistiche di Row Grouping ecc... -->\r\n            <ng-container *ngIf=\"cell.Content\">\r\n                {{cell.Content}}\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"cell._editing\" class=\"est-mt-min-5\">\r\n            <ng-container *ngTemplateOutlet=\"cell.PropertyName | est_editor: { name: cell.EditorName, src: EsTdEditorDirectives, fallback: defaultEditor}; context: { $implicit: { definition: cell, columnIndex: index, item: item, finalizer: finalizeUserEdit.bind(this, cell, item, index) } }\"></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\" #columnsDialog 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)=\"hideDialog(changeColumnVisibilityModal);\" 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; hideDialog(changeColumnVisibilityModal);\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && hideDialog(changeColumnVisibilityModal)\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@charset \"UTF-8\";.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{inset:0 0 0 6px;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density th,.est-high-density td{padding:0;padding-left:.2rem;padding-right:.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{visibility:hidden;height:1px!important}.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-14,.est-fs-13{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{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.est-slider:before{position:absolute;content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{-webkit-transform:translateX(11px);-ms-transform:translateX(11px);transform:translate(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{margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-sel:not(.app-white-text){color:#000!important}.est-page-prev,.est-page-next{color:#000;padding:2px 0 0;font-size:inherit}.est-pinned-header{background-color:#fff;left:0;top:0;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0px solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:sticky;z-index:1;border-top:1px solid #dee2e6!important;padding:0!important}.est-inline{display:inline!important}.est-inline-block{display:inline-block!important}.est-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.est-link:hover{color:#23527c!important;cursor:pointer;text-decoration:underline!important}.est-sticky-last-column{right:-1px;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:1px solid #bbb!important}.est-rtab-border{border-right:1px solid #bbb!important}.est-no-border-bottom{border-bottom:none!important}.est-no-border-top{border-top:none!important}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-selected-cell{background-color:#2196f333!important}.est-cell-lborder{border-left:1.02px solid rgb(33,150,243)!important}.est-cell-tborder{border-top:1.02px solid rgb(33,150,243)!important}.est-cell-rborder{border-right:1.02px solid rgb(33,150,243)!important}.est-cell-bborder{border-bottom:1.02px solid rgb(33,150,243)!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:#7777!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:#bbbb!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 #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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{transition:transform .25s cubic-bezier(0,0,.2,1)}.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}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i11.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i11.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i11.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i12.ContextMenuAttachDirective, selector: "[contextMenu]", inputs: ["contextMenuSubject", "contextMenu"] }, { kind: "component", type: i12.ContextMenuComponent, selector: "context-menu", inputs: ["menuClass", "autoFocus", "useBootstrap4", "disabled"], outputs: ["close", "open"] }, { kind: "directive", type: i12.ContextMenuItemDirective, selector: "[contextMenuItem]", inputs: ["subMenu", "divider", "enabled", "passive", "visible"], outputs: ["execute"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i14.EsFormAdaptiveComponent, selector: "form-adaptive", inputs: ["Type", "TypeMissingMessage", "SearchFunction", "Precision", "TypePattern"] }, { kind: "component", type: EsTablePagerComponent, selector: "es-paging", inputs: ["CurrentPageSize", "View", "WarnOnAll", "AllSearch", "DefaultAll", "GroupMode", "GroupCount", "CountLabel", "ShowCount", "ShowPaging", "PagerCount", "Hidden"], outputs: ["pagingSelected"] }, { kind: "component", type: EsTh, selector: "[es-th]", inputs: ["es-th", "Order", "Orderable", "Display", "Resizable", "Pinned", "SearchInProgress", "OrderBy", "Wrap", "Fixed", "Template", "Visible"], outputs: ["onOrderChange", "onUnpinning"] }, { kind: "component", type: EsTd, selector: "[es-td]", inputs: ["es-td", "Context"], outputs: ["onCellGeneration"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.LocalizePipe, name: "localize" }, { kind: "pipe", type: EstFormatPipe, name: "est_format" }, { kind: "pipe", type: EstLookupPipe, name: "est_lookup" }, { kind: "pipe", type: EstRouterLinkPipe, name: "est_routerlink" }, { kind: "pipe", type: EstRendererPipe, name: "est_renderer" }, { kind: "pipe", type: EstEditorPipe, name: "est_editor" }, { kind: "pipe", type: EstPropInsensitivePipe, name: "est_propinsensitive" }], viewProviders: [{ provide: LocalizationService, useClass: EsTableLoc }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTableComponent, deps: [{ token: i0.NgZone }, { token: i1.NgControl, optional: true, self: true }, { token: i2$1.PreferencesService, optional: true }, { token: EST_DEFAULTS, optional: true }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: UtilitiesHandler }, { token: i5.UtilityService }, { token: i5.ExportService }, { token: i5.DateService }, { token: i5.MessageService }, { token: CopyPasteDetector }, { token: i5.ClipboardService }, { token: Logger }, { token: i5.AppEmbeddingExtensions }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: EsTableComponent, isStandalone: false, selector: "es-table", inputs: { globalCheck: { classPropertyName: "globalCheck", publicName: "globalCheck", isSignal: true, isRequired: false, transformFunction: null }, autoUpdate: { classPropertyName: "autoUpdate", publicName: "autoUpdate", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, researchInProgress: { classPropertyName: "researchInProgress", publicName: "researchInProgress", isSignal: true, isRequired: false, transformFunction: null }, globalColVisCheck: { classPropertyName: "globalColVisCheck", publicName: "globalColVisCheck", isSignal: true, isRequired: false, transformFunction: null }, EsThTdProvider: { classPropertyName: "EsThTdProvider", publicName: "EsThTdProvider", isSignal: false, isRequired: false, transformFunction: null }, CornerMenuOptions: { classPropertyName: "CornerMenuOptions", publicName: "CornerMenuOptions", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsResizable: { classPropertyName: "_ColumnsResizable", publicName: "ColumnsResizable", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsPinnable: { classPropertyName: "_ColumnsPinnable", publicName: "ColumnsPinnable", isSignal: true, isRequired: false, transformFunction: null }, _AutoUpdate: { classPropertyName: "_AutoUpdate", publicName: "AutoUpdate", isSignal: true, isRequired: false, transformFunction: null }, Height: { classPropertyName: "Height", publicName: "Height", isSignal: true, isRequired: false, transformFunction: null }, EmptySpaceBackgroundColor: { classPropertyName: "EmptySpaceBackgroundColor", publicName: "EmptySpaceBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, EsTableHandledSearch: { classPropertyName: "EsTableHandledSearch", publicName: "EsTableHandledSearch", isSignal: true, isRequired: false, transformFunction: null }, MaxHeight: { classPropertyName: "MaxHeight", publicName: "MaxHeight", isSignal: true, isRequired: false, transformFunction: null }, _ContainerClass: { classPropertyName: "_ContainerClass", publicName: "ContainerClass", isSignal: true, isRequired: false, transformFunction: null }, XLSXExport: { classPropertyName: "XLSXExport", publicName: "XLSXExport", isSignal: true, isRequired: false, transformFunction: null }, CSVExport: { classPropertyName: "CSVExport", publicName: "CSVExport", isSignal: true, isRequired: false, transformFunction: null }, _AllSearch: { classPropertyName: "_AllSearch", publicName: "AllSearch", isSignal: true, isRequired: false, transformFunction: null }, HighCellDensity: { classPropertyName: "HighCellDensity", publicName: "HighCellDensity", isSignal: true, isRequired: false, transformFunction: null }, _Selection: { classPropertyName: "_Selection", publicName: "Selection", isSignal: true, isRequired: false, transformFunction: null }, ShowLoadingOnBootstrap: { classPropertyName: "ShowLoadingOnBootstrap", publicName: "ShowLoadingOnBootstrap", isSignal: true, isRequired: false, transformFunction: null }, Removal: { classPropertyName: "Removal", publicName: "Removal", isSignal: true, isRequired: false, transformFunction: null }, RemovalCondition: { classPropertyName: "RemovalCondition", publicName: "RemovalCondition", isSignal: true, isRequired: false, transformFunction: null }, _Export: { classPropertyName: "_Export", publicName: "Export", isSignal: true, isRequired: false, transformFunction: null }, _ShiftClick: { classPropertyName: "_ShiftClick", publicName: "ShiftClick", isSignal: true, isRequired: false, transformFunction: null }, CountLabel: { classPropertyName: "CountLabel", publicName: "CountLabel", isSignal: true, isRequired: false, transformFunction: null }, _HidePaging: { classPropertyName: "_HidePaging", publicName: "HidePaging", isSignal: true, isRequired: false, transformFunction: null }, _HidePagingCount: { classPropertyName: "_HidePagingCount", publicName: "HidePagingCount", isSignal: true, isRequired: false, transformFunction: null }, _HidePagingButtons: { classPropertyName: "_HidePagingButtons", publicName: "HidePagingButtons", isSignal: true, isRequired: false, transformFunction: null }, ContextMenu: { classPropertyName: "ContextMenu", publicName: "ContextMenu", isSignal: false, isRequired: false, transformFunction: null }, ExportFileName: { classPropertyName: "ExportFileName", publicName: "ExportFileName", isSignal: true, isRequired: false, transformFunction: null }, _TableClass: { classPropertyName: "_TableClass", publicName: "TableClass", isSignal: true, isRequired: false, transformFunction: null }, ExportFunction: { classPropertyName: "ExportFunction", publicName: "ExportFunction", isSignal: false, isRequired: false, transformFunction: null }, ExportOnlyVisibleColumns: { classPropertyName: "ExportOnlyVisibleColumns", publicName: "ExportOnlyVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, HasHeaderGroup: { classPropertyName: "HasHeaderGroup", publicName: "HasHeaderGroup", isSignal: true, isRequired: false, transformFunction: null }, HasSecondaryHeaderGroup: { classPropertyName: "HasSecondaryHeaderGroup", publicName: "HasSecondaryHeaderGroup", isSignal: true, isRequired: false, transformFunction: null }, HeaderHidden: { classPropertyName: "HeaderHidden", publicName: "HeaderHidden", isSignal: true, isRequired: false, transformFunction: null }, BodyHidden: { classPropertyName: "BodyHidden", publicName: "BodyHidden", isSignal: true, isRequired: false, transformFunction: null }, SelectionDisabled: { classPropertyName: "SelectionDisabled", publicName: "SelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, SingleSelection: { classPropertyName: "SingleSelection", publicName: "SingleSelection", isSignal: true, isRequired: false, transformFunction: null }, RowClassAssigner: { classPropertyName: "RowClassAssigner", publicName: "RowClassAssigner", isSignal: false, isRequired: false, transformFunction: null }, _OrderByColumn: { classPropertyName: "_OrderByColumn", publicName: "OrderByColumn", isSignal: true, isRequired: false, transformFunction: null }, MultipleOrderingDirectives: { classPropertyName: "MultipleOrderingDirectives", publicName: "MultipleOrderingDirectives", isSignal: true, isRequired: false, transformFunction: null }, _HiddenColumns: { classPropertyName: "_HiddenColumns", publicName: "HiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsOrdering: { classPropertyName: "_ColumnsOrdering", publicName: "ColumnsOrdering", isSignal: true, isRequired: false, transformFunction: null }, SearchView: { classPropertyName: "SearchView", publicName: "SearchView", isSignal: true, isRequired: false, transformFunction: null }, _SelectAll: { classPropertyName: "_SelectAll", publicName: "SelectAll", isSignal: true, isRequired: false, transformFunction: null }, _UseArrayModePaging: { classPropertyName: "_UseArrayModePaging", publicName: "UseArrayModePaging", isSignal: true, isRequired: false, transformFunction: null }, _DynamicRowColumnsDefinition: { classPropertyName: "_DynamicRowColumnsDefinition", publicName: "DynamicRowColumnsDefinition", isSignal: true, isRequired: false, transformFunction: null }, DynamicOperations: { classPropertyName: "DynamicOperations", publicName: "DynamicOperations", isSignal: true, isRequired: false, transformFunction: null }, Hierarchy: { classPropertyName: "Hierarchy", publicName: "Hierarchy", isSignal: true, isRequired: false, transformFunction: null }, _ParentKey: { classPropertyName: "_ParentKey", publicName: "ParentKey", isSignal: true, isRequired: false, transformFunction: null }, _OwnKey: { classPropertyName: "_OwnKey", publicName: "OwnKey", isSignal: true, isRequired: false, transformFunction: null }, StartsExpanded: { classPropertyName: "StartsExpanded", publicName: "StartsExpanded", isSignal: true, isRequired: false, transformFunction: null }, _SavePreferences: { classPropertyName: "_SavePreferences", publicName: "SavePreferences", isSignal: true, isRequired: false, transformFunction: null }, _DefaultAlignment: { classPropertyName: "_DefaultAlignment", publicName: "DefaultAlignment", isSignal: true, isRequired: false, transformFunction: null }, _PagingStyle: { classPropertyName: "_PagingStyle", publicName: "PagingStyle", isSignal: true, isRequired: false, transformFunction: null }, _RowGroupingPagingStyle: { classPropertyName: "_RowGroupingPagingStyle", publicName: "RowGroupingPagingStyle", isSignal: true, isRequired: false, transformFunction: null }, ItemSourceProperty: { classPropertyName: "ItemSourceProperty", publicName: "ItemSourceProperty", isSignal: true, isRequired: false, transformFunction: null }, _UseSelectionCache: { classPropertyName: "_UseSelectionCache", publicName: "UseSelectionCache", isSignal: true, isRequired: false, transformFunction: null }, _ShowItemGroupsColumns: { classPropertyName: "_ShowItemGroupsColumns", publicName: "ShowItemGroupsColumns", isSignal: true, isRequired: false, transformFunction: null }, Editable: { classPropertyName: "Editable", publicName: "Editable", isSignal: true, isRequired: false, transformFunction: null }, RangeSelection: { classPropertyName: "RangeSelection", publicName: "RangeSelection", isSignal: true, isRequired: false, transformFunction: null }, SearchThrottle: { classPropertyName: "SearchThrottle", publicName: "SearchThrottle", isSignal: true, isRequired: false, transformFunction: null }, _ArraymodeItemsPerPage: { classPropertyName: "_ArraymodeItemsPerPage", publicName: "ArraymodeItemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { globalCheck: "globalCheckChange", autoUpdate: "autoUpdateChange", seconds: "secondsChange", researchInProgress: "researchInProgressChange", globalColVisCheck: "globalColVisCheckChange", onOrderChanged: "onOrderChanged", onSearchRequest: "onSearchRequest", onSelectionChanged: "onSelectionChanged", onRemoval: "onRemoval", onAbortRemoval: "onAbortRemoval", onModelChange: "onModelChange", onOpenContextMenu: "onOpenContextMenu", onCornerAction: "onCornerAction", onDynamicOperation: "onDynamicOperation" }, queries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerGroupRef", first: true, predicate: ["headerGroup"], descendants: true }, { propertyName: "secondaryHeaderGroupRef", first: true, predicate: ["secondaryHeaderGroup"], descendants: true }, { propertyName: "EsTdEditorDirectives", predicate: EsTdEditorDirective }, { propertyName: "EsTdsDirective", predicate: EsTdDirective }, { propertyName: "EsThsDirective", predicate: EsThDirective }, { propertyName: "ThTdProvider", predicate: ThTdProvider }], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "exportDownloader", first: true, predicate: ["exportDownloader"], descendants: true }, { propertyName: "tableEmptyMenu", first: true, predicate: ["emptyMenu"], descendants: true, static: true }], ngImport: i0, 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\" [ngModelOptions]=\"{'standalone': true}\" />&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\" [ngModelOptions]=\"{'standalone': true}\" (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' : lc.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                    <div id=\"thead->tr->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                        Selection: {{Selection()}}\r\n                        HasPinnedColumns: {{HasPinnedColumns()}}\r\n                        arrayMode: {{arrayMode()}}\r\n                        viewMode: {{viewMode()}}\r\n                        UseCustomCells: {{UseCustomCells()}}\r\n                        RowTHs: {{!!RowTHs}}\r\n                        RowTHs.length: {{RowTHs?.length}}\r\n                        DynamicRowColumnsDefinition: {{!!DynamicRowColumnsDefinition()}}\r\n                    </div>\r\n\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\"\r\n                                            [style.width.px]=\"rowHeader.PinnedWidth\"\r\n                                            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\"\r\n                                            [Fixed]=\"rowHeader.Fixed\"\r\n                                            [Order]=\"rowHeader.Order\"\r\n                                            [Resizable]=\"ColumnsResizable()\"\r\n                                            [Orderable]=\"rowHeader.Orderable\"\r\n                                            [OrderBy]=\"OrderByColumn()\"\r\n                                            [SearchInProgress]=\"researchInProgress()\"\r\n                                            (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\"\r\n                                            (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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                                <div id=\"thead->tr->th->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                                    rowHeader: {{!!rowHeader}}\r\n                                    rowHeader.Visible: {{rowHeader?.Visible}}\r\n                                    rowHeader.Pinned: {{rowHeader?.Pinned}}\r\n                                    rowHeader.Template: {{!!rowHeader.Template}}\r\n                                </div>\r\n\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\"\r\n                                    es-th=\"{{rowHeader.ID}}\"\r\n                                    class=\"{{rowHeader.Class || ''}}\"\r\n                                    [style.text-align]=\" rowHeader.Alignment || null\"\r\n                                    [class.est-ltab-border]=\"rowHeader.LeftBorder\"\r\n                                    [class.est-rtab-border]=\"rowHeader.RightBorder\"\r\n                                    [class.est-nowrap]=\"!rowHeader.Wrap\"\r\n                                    [Order]=\"rowHeader.Order\"\r\n                                    [Resizable]=\"ColumnsResizable()\"\r\n                                    [Orderable]=\"rowHeader.Orderable\"\r\n                                    [OrderBy]=\"OrderByColumn()\"\r\n                                    [SearchInProgress]=\"researchInProgress()\"\r\n                                    (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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(); showDialog(changeColumnVisibilityModal, columnsDialog)\">\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                <es-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel()\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage()\" (pagingSelected)=\"items_H.refreshPaging($event)\"></es-paging>\r\n                <es-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);\"></es-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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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 i = index, 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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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\"><es-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);\"></es-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\"><es-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);\"></es-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 let-index=\"index\">\r\n    <ng-container *ngIf=\"(!UseCustomCells() || EmptyRowTds()) && !DynamicRowColumnsDefinition()\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item, index: index}\"></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     <!-- Manca da reimplementare il  [FocusSubject]=\"FocusSubject\" -->\r\n    <ng-container *ngIf=\"ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Configuration]=\"ctx.definition.EditorOptions\" [(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\" [Configuration]=\"ctx.definition.EditorOptions\" [(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 cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n                    <ng-container *ngIf=\"cell().Pinned\">\r\n                        <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                                $implicit: item, \r\n                                index: index, \r\n                                cell: cell, \r\n                                pinned: true, \r\n                                selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                                selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                                selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                                selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                                selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                            };\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <!-- Body effettivo della riga -->\r\n        <ng-container *ngFor=\"let cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n            <ng-container *ngIf=\"!cell().Pinned;\">\r\n                <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                        $implicit: item, \r\n                        index: index, \r\n                        cell: cell, \r\n                        pinned: false, \r\n                        selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                        selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                        selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                        selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                        selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                    };\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\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-item let-cell=\"cell\" let-index=\"index\" let-pinned=\"pinned\" let-selStatus=\"selectionStatus\" let-selStatusUp=\"selectionStatusUp\" let-selStatusDown=\"selectionStatusDown\" let-selStatusLeft=\"selectionStatusLeft\" let-selStatusRight=\"selectionStatusRight\">\r\n\r\n    <!-- Customizzazione per celle con icona (sono essenzialmente operazioni semplici e basta) -->\r\n    <ng-container *ngIf=\"cell().IconClass && cell().Visible\">\r\n        <ng-container *ngIf=\"!cell().ConditionField || (((item.properties || item) | est_propinsensitive : cell().ConditionField) == cell().ConditionValue)\">\r\n            <td [class.est-no-right-padding]=\"index != DynamicOperations().length -1\" [class.est-no-left-padding]=\"index != 0\" class=\"est-col-min\"><span title=\"{{cell().Title}}\" class=\"{{cell().IconClass}} est-pointer\" (click)=\"dynamicOperation(item, cell().ID)\">{{cell().Content}}</span></td>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"cell().ConditionField && (((item.properties || item) | est_propinsensitive : cell().ConditionField) != cell().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    <!-----------------------------------------------------------------------------------------------------------------------\r\n    -   ATTENZIONE: Gli spazi fra gli Input 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 e selezione multicella                                                                                          -\r\n    ------------------------------------------------------------------------------------------------------------------------->\r\n\r\n    <td *ngIf=\"!cell().IconClass && cell().Visible\"\r\n        es-td=\"{{cell().Property || cell().ID}}\"\r\n        id=\"estd_{{cell().Property || cell().ID}}_{{item._ordinal}}_{{index}}\"\r\n        class=\"{{ cell().Class }}\"\r\n\r\n        [Context]=\"item._hash\"\r\n        [class.est-default-row-height]=\"!HighCellDensity()\"\r\n        [class.est-white-selected]=\"item._selected\"\r\n        [class.est-no-selection]=\"Editable() && cell().PropertyName\"\r\n        [class.est-rg-hdr]=\"cell().GroupHeader\"\r\n        [class.est-rg-agg]=\"cell().GroupAggregation\"\r\n        [class.est-nowrap]=\"Hierarchy() || !cell().Wraps\"\r\n\r\n        [style.text-align]=\"(!pinned && cell().Alignment) ? cell().Alignment : null\"\r\n        [style.color]=\"(!pinned && item.forecolors && cell().PropAccessor) ? item.forecolors[cell().PropAccessor] : null\"\r\n        [style.background-color]=\"(!pinned && item.backcolors && cell().PropAccessor) ? item.backcolors[cell().PropAccessor] : null\"\r\n        \r\n        [style.width.px]=\"pinned ? cell().PinnedWidth : null\"\r\n        [class.est-no-border]=\"pinned\"\r\n\r\n        [class.est-no-border-bottom]=\"selStatusDown?.tborder\"\r\n        [class.est-no-border-top]=\"selStatusUp?.bborder\"\r\n        [class.est-ltab-border]=\"cell().LeftBorder && !selStatus?.lborder && !selStatusLeft?.rborder\"\r\n        [class.est-rtab-border]=\"cell().RightBorder && !selStatus?.rborder && !selStatusRight?.lborder\"\r\n        \r\n        [class.est-selected-cell]=\"selStatus?.selected\"\r\n        [class.est-cell-lborder]=\" selStatus?.lborder\"\r\n        [class.est-cell-rborder]=\" selStatus?.rborder\"\r\n        [class.est-cell-tborder]=\" selStatus?.tborder\"\r\n        [class.est-cell-bborder]=\" selStatus?.bborder\"\r\n        [class.est-cell-lborder-tmp]=\"!cell().LeftBorder && !selStatus?.lborder && !selStatus?.loverlaps\"\r\n        [class.est-cell-rborder-tmp]=\"!cell().RightBorder && !selStatus?.rborder && !selStatus?.roverlaps\"\r\n        [class.est-cell-tborder-tmp]=\"!selStatus?.tborder && !selStatus?.toverlaps\"\r\n        [class.est-cell-bborder-tmp]=\"!selStatus?.bborder && !selStatus?.boverlaps\"\r\n\r\n        #cellRef\r\n\r\n        (click)=\"dbClickEditOrSingleClickRowSelection($event, cell, item)\"\r\n\r\n        (onCellGeneration)=\"registerCell($event, cell(), item, cellRef.el)\">\r\n\r\n        <!-- \r\n            @@@ Queste registrazioni le lascio fare all'interno di registerCell per evitare di attaccare la change detection automatica agli eventi, che rallenta di diosanto\r\n\r\n            (mousedown)=\"mousedown($event, cell, item)\"\r\n            (mouseenter)=\"mouseenter($event)\"\r\n            (mouseup)=\"mouseup($event)\"\r\n        -->\r\n\r\n        <div [class.est-edit-hidden]=\"cell()._editing\" [class.est-pre]=\"!(Hierarchy() && index == 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=\"cell().Template\">\r\n                <ng-container *ngIf=\"!cell().Multi\"><ng-container *ngTemplateOutlet=\"cell().Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                <span *ngIf=\"cell().Multi\"><ng-container *ngTemplateOutlet=\"cell().Template; context: { $implicit: (item[cell().MultiProp] ? item[cell().MultiProp][cell().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=\"!cell().Template && !cell().Multi && !cell().Content\">\r\n                <a *ngIf=\"cell().RoutePath\" [routerLink]=\"item | est_routerlink : cell().RoutePath : cell().RouteParameterProperties\" class=\"est-link\" [innerHTML]=\"item.properties ? item.properties[cell().PropertyName] : item[cell().PropertyName]\"></a>\r\n\r\n                <span *ngIf=\"cell().PropAccessor\">\r\n                    {{(item.values? item.values[cell().PropAccessor] : item[cell().PropAccessor]) | est_format: cell().Format }}\r\n                </span>\r\n\r\n                <ng-container *ngIf=\"!cell().PropAccessor && !cell().RoutePath\">\r\n                    <ng-container *ngTemplateOutlet=\"cell().PropertyName | est_renderer: { name: cell().RendererName, src: EsTdsDirective, fallback: defaultEsTd }; context: { $implicit: { definition: cell(), value: item.properties ? item.properties[cell().PropertyName] : item[cell().PropertyName], type: cell().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() && index == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <!-- 1% Content programmatico per le casistiche di Row Grouping ecc... -->\r\n            <ng-container *ngIf=\"cell().Content\">\r\n                {{cell().Content}}\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"cell()._editing\" class=\"est-mt-min-5\">\r\n            <ng-container *ngTemplateOutlet=\"cell().PropertyName | est_editor: { name: cell().EditorName, src: EsTdEditorDirectives, fallback: defaultEditor}; context: { $implicit: { definition: cell(), columnIndex: index, item: item, finalizer: finalizeUserEdit.bind(this, cell, item, index) } }\"></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\" #columnsDialog 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)=\"hideDialog(changeColumnVisibilityModal);\" 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; hideDialog(changeColumnVisibilityModal);\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && hideDialog(changeColumnVisibilityModal)\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@charset \"UTF-8\";.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{inset:0 0 0 6px;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density th,.est-high-density td{padding:0;padding-left:.2rem;padding-right:.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{visibility:hidden;height:1px!important}.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-14,.est-fs-13{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{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.est-slider:before{position:absolute;content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{-webkit-transform:translateX(11px);-ms-transform:translateX(11px);transform:translate(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{margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-sel:not(.app-white-text){color:#000!important}.est-page-prev,.est-page-next{color:#000;padding:2px 0 0;font-size:inherit}.est-pinned-header{background-color:#fff;left:0;top:0;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0px solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:sticky;z-index:1;border-top:1px solid #dee2e6!important;padding:0!important}.est-inline{display:inline!important}.est-inline-block{display:inline-block!important}.est-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.est-link:hover{color:#23527c!important;cursor:pointer;text-decoration:underline!important}.est-sticky-last-column{right:-1px;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:1px solid #bbb!important}.est-rtab-border{border-right:1px solid #bbb!important}.est-no-border-bottom{border-bottom:none!important}.est-no-border-top{border-top:none!important}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-selected-cell{background-color:#2196f333!important}.est-cell-lborder{border-left:1.02px solid rgb(33,150,243)!important}.est-cell-tborder{border-top:1.02px solid rgb(33,150,243)!important}.est-cell-rborder{border-right:1.02px solid rgb(33,150,243)!important}.est-cell-bborder{border-bottom:1.02px solid rgb(33,150,243)!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:#7777!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:#bbbb!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 #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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{transition:transform .25s cubic-bezier(0,0,.2,1)}.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}\n"], dependencies: [{ kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.ModalDirective, selector: "[bsModal]", inputs: ["config", "closeInterceptor"], outputs: ["onShow", "onShown", "onHide", "onHidden"], exportAs: ["bs-modal"] }, { kind: "directive", type: i11.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i11.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i11.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i12.ContextMenuAttachDirective, selector: "[contextMenu]", inputs: ["contextMenuSubject", "contextMenu"] }, { kind: "component", type: i12.ContextMenuComponent, selector: "context-menu", inputs: ["menuClass", "autoFocus", "useBootstrap4", "disabled"], outputs: ["close", "open"] }, { kind: "directive", type: i12.ContextMenuItemDirective, selector: "[contextMenuItem]", inputs: ["subMenu", "divider", "enabled", "passive", "visible"], outputs: ["execute"] }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i14.EsFormAdaptiveComponent, selector: "form-adaptive", inputs: ["Type", "TypeMissingMessage", "SearchFunction", "Precision", "TypePattern"] }, { kind: "component", type: EsTablePagerComponent, selector: "es-paging", inputs: ["CurrentPageSize", "View", "WarnOnAll", "AllSearch", "DefaultAll", "GroupMode", "GroupCount", "CountLabel", "ShowCount", "ShowPaging", "PagerCount", "Hidden"], outputs: ["pagingSelected"] }, { kind: "component", type: EsTh, selector: "[es-th]", inputs: ["es-th", "Order", "Orderable", "Display", "Resizable", "Pinned", "SearchInProgress", "OrderBy", "Wrap", "Fixed", "Template", "Visible"], outputs: ["onOrderChange", "onUnpinning"] }, { kind: "component", type: EsTd, selector: "[es-td]", inputs: ["es-td", "Context"], outputs: ["onCellGeneration"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.LocalizePipe, name: "localize" }, { kind: "pipe", type: EstFormatPipe, name: "est_format" }, { kind: "pipe", type: EstLookupPipe, name: "est_lookup" }, { kind: "pipe", type: EstRouterLinkPipe, name: "est_routerlink" }, { kind: "pipe", type: EstRendererPipe, name: "est_renderer" }, { kind: "pipe", type: EstEditorPipe, name: "est_editor" }, { kind: "pipe", type: EstPropInsensitivePipe, name: "est_propinsensitive" }], viewProviders: [{ provide: LocalizationService, useClass: EsTableLoc }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EsTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'es-table', viewProviders: [{ provide: LocalizationService, useClass: EsTableLoc }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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\" [ngModelOptions]=\"{'standalone': true}\" />&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\" [ngModelOptions]=\"{'standalone': true}\" (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' : lc.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                    <div id=\"thead->tr->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                        Selection: {{Selection}}\r\n                        HasPinnedColumns: {{HasPinnedColumns}}\r\n                        arrayMode: {{arrayMode}}\r\n                        viewMode: {{viewMode}}\r\n                        UseCustomCells: {{UseCustomCells}}\r\n                        RowTHs: {{!!RowTHs}}\r\n                        RowTHs.length: {{RowTHs?.length}}\r\n                        DynamicRowColumnsDefinition: {{!!DynamicRowColumnsDefinition}}\r\n                    </div>\r\n\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\"\r\n                                            [style.width.px]=\"rowHeader.PinnedWidth\"\r\n                                            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\"\r\n                                            [Fixed]=\"rowHeader.Fixed\"\r\n                                            [Order]=\"rowHeader.Order\"\r\n                                            [Resizable]=\"ColumnsResizable\"\r\n                                            [Orderable]=\"rowHeader.Orderable\"\r\n                                            [OrderBy]=\"OrderByColumn\"\r\n                                            [SearchInProgress]=\"!!researchInProgress\"\r\n                                            (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\"\r\n                                            (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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                                <div id=\"thead->tr->th->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                                    rowHeader: {{!!rowHeader}}\r\n                                    rowHeader.Visible: {{rowHeader?.Visible}}\r\n                                    rowHeader.Pinned: {{rowHeader?.Pinned}}\r\n                                    rowHeader.Template: {{!!rowHeader.Template}}\r\n                                </div>\r\n\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\"\r\n                                    es-th=\"{{rowHeader.ID}}\"\r\n                                    class=\"{{rowHeader.Class || ''}}\"\r\n                                    [style.text-align]=\" rowHeader.Alignment || null\"\r\n                                    [class.est-ltab-border]=\"rowHeader.LeftBorder\"\r\n                                    [class.est-rtab-border]=\"rowHeader.RightBorder\"\r\n                                    [class.est-nowrap]=\"!rowHeader.Wrap\"\r\n                                    [Order]=\"rowHeader.Order\"\r\n                                    [Resizable]=\"ColumnsResizable\"\r\n                                    [Orderable]=\"rowHeader.Orderable\"\r\n                                    [OrderBy]=\"OrderByColumn\"\r\n                                    [SearchInProgress]=\"!!researchInProgress\"\r\n                                    (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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(); showDialog(changeColumnVisibilityModal, columnsDialog)\">\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                <es-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></es-paging>\r\n                <es-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);\"></es-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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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 i = index, 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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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\"><es-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);\"></es-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\"><es-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);\"></es-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 let-index=\"index\">\r\n    <ng-container *ngIf=\"(!UseCustomCells || EmptyRowTds) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item, index: index}\"></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     <!-- Manca da reimplementare il  [FocusSubject]=\"FocusSubject\" -->\r\n    <ng-container *ngIf=\"ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Configuration]=\"ctx.definition.EditorOptions\" [(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\" [Configuration]=\"ctx.definition.EditorOptions\" [(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 cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n                    <ng-container *ngIf=\"cell.Pinned\">\r\n                        <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                                $implicit: item, \r\n                                index: index, \r\n                                cell: cell, \r\n                                pinned: true, \r\n                                selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                                selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                                selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                                selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                                selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                            };\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <!-- Body effettivo della riga -->\r\n        <ng-container *ngFor=\"let cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n            <ng-container *ngIf=\"!cell.Pinned;\">\r\n                <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                        $implicit: item, \r\n                        index: index, \r\n                        cell: cell, \r\n                        pinned: false, \r\n                        selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                        selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                        selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                        selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                        selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                    };\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\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-item let-cell=\"cell\" let-index=\"index\" let-pinned=\"pinned\" let-selStatus=\"selectionStatus\" let-selStatusUp=\"selectionStatusUp\" let-selStatusDown=\"selectionStatusDown\" let-selStatusLeft=\"selectionStatusLeft\" let-selStatusRight=\"selectionStatusRight\">\r\n\r\n    <!-- Customizzazione per celle con icona (sono essenzialmente operazioni semplici e basta) -->\r\n    <ng-container *ngIf=\"cell.IconClass && cell.Visible\">\r\n        <ng-container *ngIf=\"!cell.ConditionField || (((item.properties || item) | est_propinsensitive : cell.ConditionField) == cell.ConditionValue)\">\r\n            <td [class.est-no-right-padding]=\"index != DynamicOperations.length -1\" [class.est-no-left-padding]=\"index != 0\" class=\"est-col-min\"><span title=\"{{cell.Title}}\" class=\"{{cell.IconClass}} est-pointer\" (click)=\"dynamicOperation(item, cell.ID)\">{{cell.Content}}</span></td>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"cell.ConditionField && (((item.properties || item) | est_propinsensitive : cell.ConditionField) != cell.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    <!-----------------------------------------------------------------------------------------------------------------------\r\n    -   ATTENZIONE: Gli spazi fra gli Input 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 e selezione multicella                                                                                          -\r\n    ------------------------------------------------------------------------------------------------------------------------->\r\n\r\n    <td *ngIf=\"!cell.IconClass && cell.Visible\"\r\n        es-td=\"{{cell.Property || cell.ID}}\"\r\n        id=\"estd_{{cell.Property || cell.ID}}_{{item._ordinal}}_{{index}}\"\r\n        class=\"{{ cell.Class }}\"\r\n\r\n        [Context]=\"item._hash\"\r\n        [class.est-default-row-height]=\"!HighCellDensity\"\r\n        [class.est-white-selected]=\"item._selected\"\r\n        [class.est-no-selection]=\"Editable && cell.PropertyName\"\r\n        [class.est-rg-hdr]=\"cell.GroupHeader\"\r\n        [class.est-rg-agg]=\"cell.GroupAggregation\"\r\n        [class.est-nowrap]=\"Hierarchy || !cell.Wraps\"\r\n\r\n        [style.text-align]=\" (!pinned && cell.Alignment) ? cell.Alignment : null\"\r\n        [style.color]=\"(!pinned && item.forecolors && cell.PropAccessor) ? item.forecolors[cell.PropAccessor] : null\"\r\n        [style.background-color]=\"(!pinned && item.backcolors && cell.PropAccessor) ? item.backcolors[cell.PropAccessor] : null\"\r\n        \r\n        [style.width.px]=\"pinned ? cell.PinnedWidth : null\"\r\n        [class.est-no-border]=\"pinned\"\r\n\r\n        [class.est-no-border-bottom]=\"selStatusDown?.tborder\"\r\n        [class.est-no-border-top]=\"selStatusUp?.bborder\"\r\n        [class.est-ltab-border]=\"cell.LeftBorder && !selStatus?.lborder && !selStatusLeft?.rborder\"\r\n        [class.est-rtab-border]=\"cell.RightBorder && !selStatus?.rborder && !selStatusRight?.lborder\"\r\n        \r\n        [class.est-selected-cell]=\"selStatus?.selected\"\r\n        [class.est-cell-lborder]=\" selStatus?.lborder\"\r\n        [class.est-cell-rborder]=\" selStatus?.rborder\"\r\n        [class.est-cell-tborder]=\" selStatus?.tborder\"\r\n        [class.est-cell-bborder]=\" selStatus?.bborder\"\r\n        [class.est-cell-lborder-tmp]=\"!cell.LeftBorder && !selStatus?.lborder && !selStatus?.loverlaps\"\r\n        [class.est-cell-rborder-tmp]=\"!cell.RightBorder && !selStatus?.rborder && !selStatus?.roverlaps\"\r\n        [class.est-cell-tborder-tmp]=\"!selStatus?.tborder && !selStatus?.toverlaps\"\r\n        [class.est-cell-bborder-tmp]=\"!selStatus?.bborder && !selStatus?.boverlaps\"\r\n\r\n        (mousedown)=\"mousedown($event, cell, item)\"\r\n        (mouseenter)=\"mouseenter($event)\"\r\n        (mouseup)=\"mouseup($event)\"\r\n        (onCellGeneration)=\"registerCell($event)\"\r\n        (click)=\"dbClickEditOrSingleClickRowSelection($event, cell, item)\">\r\n\r\n        <div [class.est-edit-hidden]=\"cell._editing\" [class.est-pre]=\"!(Hierarchy && index == 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=\"cell.Template\">\r\n                <ng-container *ngIf=\"!cell.Multi\"><ng-container *ngTemplateOutlet=\"cell.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                <span *ngIf=\"cell.Multi\"><ng-container *ngTemplateOutlet=\"cell.Template; context: { $implicit: (item[cell.MultiProp] ? item[cell.MultiProp][cell.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=\"!cell.Template && !cell.Multi && !cell.Content\">\r\n                <a *ngIf=\"cell.RoutePath\" [routerLink]=\"item | est_routerlink : cell.RoutePath : cell.RouteParameterProperties\" class=\"est-link\" [innerHTML]=\"item.properties ? item.properties[cell.PropertyName] : item[cell.PropertyName]\"></a>\r\n\r\n                <span *ngIf=\"cell.PropAccessor\">\r\n                    {{(item.values? item.values[cell.PropAccessor] : item[cell.PropAccessor]) | est_format: cell.Format }}\r\n                </span>\r\n\r\n                <ng-container *ngIf=\"!cell.PropAccessor && !cell.RoutePath\">\r\n                    <ng-container *ngTemplateOutlet=\"cell.PropertyName | est_renderer: { name: cell.RendererName, src: EsTdsDirective, fallback: defaultEsTd }; context: { $implicit: { definition: cell, value: item.properties ? item.properties[cell.PropertyName] : item[cell.PropertyName], type: cell.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 && index == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <!-- 1% Content programmatico per le casistiche di Row Grouping ecc... -->\r\n            <ng-container *ngIf=\"cell.Content\">\r\n                {{cell.Content}}\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"cell._editing\" class=\"est-mt-min-5\">\r\n            <ng-container *ngTemplateOutlet=\"cell.PropertyName | est_editor: { name: cell.EditorName, src: EsTdEditorDirectives, fallback: defaultEditor}; context: { $implicit: { definition: cell, columnIndex: index, item: item, finalizer: finalizeUserEdit.bind(this, cell, item, index) } }\"></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\" #columnsDialog 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)=\"hideDialog(changeColumnVisibilityModal);\" 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; hideDialog(changeColumnVisibilityModal);\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && hideDialog(changeColumnVisibilityModal)\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@charset \"UTF-8\";.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{inset:0 0 0 6px;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density th,.est-high-density td{padding:0;padding-left:.2rem;padding-right:.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{visibility:hidden;height:1px!important}.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-14,.est-fs-13{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{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.est-slider:before{position:absolute;content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{-webkit-transform:translateX(11px);-ms-transform:translateX(11px);transform:translate(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{margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-sel:not(.app-white-text){color:#000!important}.est-page-prev,.est-page-next{color:#000;padding:2px 0 0;font-size:inherit}.est-pinned-header{background-color:#fff;left:0;top:0;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0px solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:sticky;z-index:1;border-top:1px solid #dee2e6!important;padding:0!important}.est-inline{display:inline!important}.est-inline-block{display:inline-block!important}.est-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.est-link:hover{color:#23527c!important;cursor:pointer;text-decoration:underline!important}.est-sticky-last-column{right:-1px;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:1px solid #bbb!important}.est-rtab-border{border-right:1px solid #bbb!important}.est-no-border-bottom{border-bottom:none!important}.est-no-border-top{border-top:none!important}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-selected-cell{background-color:#2196f333!important}.est-cell-lborder{border-left:1.02px solid rgb(33,150,243)!important}.est-cell-tborder{border-top:1.02px solid rgb(33,150,243)!important}.est-cell-rborder{border-right:1.02px solid rgb(33,150,243)!important}.est-cell-bborder{border-bottom:1.02px solid rgb(33,150,243)!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:#7777!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:#bbbb!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 #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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{transition:transform .25s cubic-bezier(0,0,.2,1)}.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}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+            args: [{ selector: 'es-table', viewProviders: [{ provide: LocalizationService, useClass: EsTableLoc }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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\" [ngModelOptions]=\"{'standalone': true}\" />&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\" [ngModelOptions]=\"{'standalone': true}\" (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' : lc.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                    <div id=\"thead->tr->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                        Selection: {{Selection()}}\r\n                        HasPinnedColumns: {{HasPinnedColumns()}}\r\n                        arrayMode: {{arrayMode()}}\r\n                        viewMode: {{viewMode()}}\r\n                        UseCustomCells: {{UseCustomCells()}}\r\n                        RowTHs: {{!!RowTHs}}\r\n                        RowTHs.length: {{RowTHs?.length}}\r\n                        DynamicRowColumnsDefinition: {{!!DynamicRowColumnsDefinition()}}\r\n                    </div>\r\n\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\"\r\n                                            [style.width.px]=\"rowHeader.PinnedWidth\"\r\n                                            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\"\r\n                                            [Fixed]=\"rowHeader.Fixed\"\r\n                                            [Order]=\"rowHeader.Order\"\r\n                                            [Resizable]=\"ColumnsResizable()\"\r\n                                            [Orderable]=\"rowHeader.Orderable\"\r\n                                            [OrderBy]=\"OrderByColumn()\"\r\n                                            [SearchInProgress]=\"researchInProgress()\"\r\n                                            (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\"\r\n                                            (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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                                <div id=\"thead->tr->th->debug_block\" style=\"display: none; white-space: pre-wrap;\">\r\n                                    rowHeader: {{!!rowHeader}}\r\n                                    rowHeader.Visible: {{rowHeader?.Visible}}\r\n                                    rowHeader.Pinned: {{rowHeader?.Pinned}}\r\n                                    rowHeader.Template: {{!!rowHeader.Template}}\r\n                                </div>\r\n\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\"\r\n                                    es-th=\"{{rowHeader.ID}}\"\r\n                                    class=\"{{rowHeader.Class || ''}}\"\r\n                                    [style.text-align]=\" rowHeader.Alignment || null\"\r\n                                    [class.est-ltab-border]=\"rowHeader.LeftBorder\"\r\n                                    [class.est-rtab-border]=\"rowHeader.RightBorder\"\r\n                                    [class.est-nowrap]=\"!rowHeader.Wrap\"\r\n                                    [Order]=\"rowHeader.Order\"\r\n                                    [Resizable]=\"ColumnsResizable()\"\r\n                                    [Orderable]=\"rowHeader.Orderable\"\r\n                                    [OrderBy]=\"OrderByColumn()\"\r\n                                    [SearchInProgress]=\"researchInProgress()\"\r\n                                    (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">\r\n\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(); showDialog(changeColumnVisibilityModal, columnsDialog)\">\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                <es-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel()\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage()\" (pagingSelected)=\"items_H.refreshPaging($event)\"></es-paging>\r\n                <es-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);\"></es-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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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 i = index, 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, index: i }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, index: i }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item, index: i }}\"></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\"><es-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);\"></es-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\"><es-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);\"></es-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 let-index=\"index\">\r\n    <ng-container *ngIf=\"(!UseCustomCells() || EmptyRowTds()) && !DynamicRowColumnsDefinition()\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item, index: index}\"></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     <!-- Manca da reimplementare il  [FocusSubject]=\"FocusSubject\" -->\r\n    <ng-container *ngIf=\"ctx.item.properties\">\r\n        <form-adaptive [FormLayout]=\"false\" [Validation]=\"false\" [Configuration]=\"ctx.definition.EditorOptions\" [(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\" [Configuration]=\"ctx.definition.EditorOptions\" [(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 cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n                    <ng-container *ngIf=\"cell().Pinned\">\r\n                        <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                                $implicit: item, \r\n                                index: index, \r\n                                cell: cell, \r\n                                pinned: true, \r\n                                selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                                selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                                selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                                selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                                selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                            };\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <!-- Body effettivo della riga -->\r\n        <ng-container *ngFor=\"let cell of RowTDs[item._hash]; let index = index; trackBy: IDTrackBy\">\r\n            <ng-container *ngIf=\"!cell().Pinned;\">\r\n                <ng-container *ngTemplateOutlet=\"customTd; context: { \r\n                        $implicit: item, \r\n                        index: index, \r\n                        cell: cell, \r\n                        pinned: false, \r\n                        selectionStatus: selectionStatus[item._ordinal]?.[index],\r\n                        selectionStatusUp: selectionStatus[item._ordinal - 1]?.[index],\r\n                        selectionStatusDown: selectionStatus[item._ordinal + 1]?.[index],\r\n                        selectionStatusLeft: selectionStatus[item._ordinal]?.[index - 1],\r\n                        selectionStatusRight: selectionStatus[item._ordinal]?.[index + 1] \r\n                    };\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n\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-item let-cell=\"cell\" let-index=\"index\" let-pinned=\"pinned\" let-selStatus=\"selectionStatus\" let-selStatusUp=\"selectionStatusUp\" let-selStatusDown=\"selectionStatusDown\" let-selStatusLeft=\"selectionStatusLeft\" let-selStatusRight=\"selectionStatusRight\">\r\n\r\n    <!-- Customizzazione per celle con icona (sono essenzialmente operazioni semplici e basta) -->\r\n    <ng-container *ngIf=\"cell().IconClass && cell().Visible\">\r\n        <ng-container *ngIf=\"!cell().ConditionField || (((item.properties || item) | est_propinsensitive : cell().ConditionField) == cell().ConditionValue)\">\r\n            <td [class.est-no-right-padding]=\"index != DynamicOperations().length -1\" [class.est-no-left-padding]=\"index != 0\" class=\"est-col-min\"><span title=\"{{cell().Title}}\" class=\"{{cell().IconClass}} est-pointer\" (click)=\"dynamicOperation(item, cell().ID)\">{{cell().Content}}</span></td>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"cell().ConditionField && (((item.properties || item) | est_propinsensitive : cell().ConditionField) != cell().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    <!-----------------------------------------------------------------------------------------------------------------------\r\n    -   ATTENZIONE: Gli spazi fra gli Input 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 e selezione multicella                                                                                          -\r\n    ------------------------------------------------------------------------------------------------------------------------->\r\n\r\n    <td *ngIf=\"!cell().IconClass && cell().Visible\"\r\n        es-td=\"{{cell().Property || cell().ID}}\"\r\n        id=\"estd_{{cell().Property || cell().ID}}_{{item._ordinal}}_{{index}}\"\r\n        class=\"{{ cell().Class }}\"\r\n\r\n        [Context]=\"item._hash\"\r\n        [class.est-default-row-height]=\"!HighCellDensity()\"\r\n        [class.est-white-selected]=\"item._selected\"\r\n        [class.est-no-selection]=\"Editable() && cell().PropertyName\"\r\n        [class.est-rg-hdr]=\"cell().GroupHeader\"\r\n        [class.est-rg-agg]=\"cell().GroupAggregation\"\r\n        [class.est-nowrap]=\"Hierarchy() || !cell().Wraps\"\r\n\r\n        [style.text-align]=\"(!pinned && cell().Alignment) ? cell().Alignment : null\"\r\n        [style.color]=\"(!pinned && item.forecolors && cell().PropAccessor) ? item.forecolors[cell().PropAccessor] : null\"\r\n        [style.background-color]=\"(!pinned && item.backcolors && cell().PropAccessor) ? item.backcolors[cell().PropAccessor] : null\"\r\n        \r\n        [style.width.px]=\"pinned ? cell().PinnedWidth : null\"\r\n        [class.est-no-border]=\"pinned\"\r\n\r\n        [class.est-no-border-bottom]=\"selStatusDown?.tborder\"\r\n        [class.est-no-border-top]=\"selStatusUp?.bborder\"\r\n        [class.est-ltab-border]=\"cell().LeftBorder && !selStatus?.lborder && !selStatusLeft?.rborder\"\r\n        [class.est-rtab-border]=\"cell().RightBorder && !selStatus?.rborder && !selStatusRight?.lborder\"\r\n        \r\n        [class.est-selected-cell]=\"selStatus?.selected\"\r\n        [class.est-cell-lborder]=\" selStatus?.lborder\"\r\n        [class.est-cell-rborder]=\" selStatus?.rborder\"\r\n        [class.est-cell-tborder]=\" selStatus?.tborder\"\r\n        [class.est-cell-bborder]=\" selStatus?.bborder\"\r\n        [class.est-cell-lborder-tmp]=\"!cell().LeftBorder && !selStatus?.lborder && !selStatus?.loverlaps\"\r\n        [class.est-cell-rborder-tmp]=\"!cell().RightBorder && !selStatus?.rborder && !selStatus?.roverlaps\"\r\n        [class.est-cell-tborder-tmp]=\"!selStatus?.tborder && !selStatus?.toverlaps\"\r\n        [class.est-cell-bborder-tmp]=\"!selStatus?.bborder && !selStatus?.boverlaps\"\r\n\r\n        #cellRef\r\n\r\n        (click)=\"dbClickEditOrSingleClickRowSelection($event, cell, item)\"\r\n\r\n        (onCellGeneration)=\"registerCell($event, cell(), item, cellRef.el)\">\r\n\r\n        <!-- \r\n            @@@ Queste registrazioni le lascio fare all'interno di registerCell per evitare di attaccare la change detection automatica agli eventi, che rallenta di diosanto\r\n\r\n            (mousedown)=\"mousedown($event, cell, item)\"\r\n            (mouseenter)=\"mouseenter($event)\"\r\n            (mouseup)=\"mouseup($event)\"\r\n        -->\r\n\r\n        <div [class.est-edit-hidden]=\"cell()._editing\" [class.est-pre]=\"!(Hierarchy() && index == 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=\"cell().Template\">\r\n                <ng-container *ngIf=\"!cell().Multi\"><ng-container *ngTemplateOutlet=\"cell().Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                <span *ngIf=\"cell().Multi\"><ng-container *ngTemplateOutlet=\"cell().Template; context: { $implicit: (item[cell().MultiProp] ? item[cell().MultiProp][cell().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=\"!cell().Template && !cell().Multi && !cell().Content\">\r\n                <a *ngIf=\"cell().RoutePath\" [routerLink]=\"item | est_routerlink : cell().RoutePath : cell().RouteParameterProperties\" class=\"est-link\" [innerHTML]=\"item.properties ? item.properties[cell().PropertyName] : item[cell().PropertyName]\"></a>\r\n\r\n                <span *ngIf=\"cell().PropAccessor\">\r\n                    {{(item.values? item.values[cell().PropAccessor] : item[cell().PropAccessor]) | est_format: cell().Format }}\r\n                </span>\r\n\r\n                <ng-container *ngIf=\"!cell().PropAccessor && !cell().RoutePath\">\r\n                    <ng-container *ngTemplateOutlet=\"cell().PropertyName | est_renderer: { name: cell().RendererName, src: EsTdsDirective, fallback: defaultEsTd }; context: { $implicit: { definition: cell(), value: item.properties ? item.properties[cell().PropertyName] : item[cell().PropertyName], type: cell().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() && index == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <!-- 1% Content programmatico per le casistiche di Row Grouping ecc... -->\r\n            <ng-container *ngIf=\"cell().Content\">\r\n                {{cell().Content}}\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"cell()._editing\" class=\"est-mt-min-5\">\r\n            <ng-container *ngTemplateOutlet=\"cell().PropertyName | est_editor: { name: cell().EditorName, src: EsTdEditorDirectives, fallback: defaultEditor}; context: { $implicit: { definition: cell(), columnIndex: index, item: item, finalizer: finalizeUserEdit.bind(this, cell, item, index) } }\"></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\" #columnsDialog 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)=\"hideDialog(changeColumnVisibilityModal);\" 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; hideDialog(changeColumnVisibilityModal);\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && hideDialog(changeColumnVisibilityModal)\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["@charset \"UTF-8\";.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{inset:0 0 0 6px;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density th,.est-high-density td{padding:0;padding-left:.2rem;padding-right:.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{visibility:hidden;height:1px!important}.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-14,.est-fs-13{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{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.est-slider:before{position:absolute;content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{-webkit-transform:translateX(11px);-ms-transform:translateX(11px);transform:translate(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{margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-sel:not(.app-white-text){color:#000!important}.est-page-prev,.est-page-next{color:#000;padding:2px 0 0;font-size:inherit}.est-pinned-header{background-color:#fff;left:0;top:0;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0px solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position:sticky;z-index:1;border-top:1px solid #dee2e6!important;padding:0!important}.est-inline{display:inline!important}.est-inline-block{display:inline-block!important}.est-link{color:#0275d8!important;cursor:pointer;text-decoration:none;display:block}.est-link:hover{color:#23527c!important;cursor:pointer;text-decoration:underline!important}.est-sticky-last-column{right:-1px;position:sticky;z-index:0;background-color:#fff}.est-sticky-last-column-alt{right:-1px;position:sticky;z-index:0;background-color:#f2f2f2}.est-ltab-border{border-left:1px solid #bbb!important}.est-rtab-border{border-right:1px solid #bbb!important}.est-no-border-bottom{border-bottom:none!important}.est-no-border-top{border-top:none!important}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-selected-cell{background-color:#2196f333!important}.est-cell-lborder{border-left:1.02px solid rgb(33,150,243)!important}.est-cell-tborder{border-top:1.02px solid rgb(33,150,243)!important}.est-cell-rborder{border-right:1.02px solid rgb(33,150,243)!important}.est-cell-bborder{border-bottom:1.02px solid rgb(33,150,243)!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:#7777!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:#bbbb!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 #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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{transition:transform .25s cubic-bezier(0,0,.2,1)}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
@@ -5584,122 +5644,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], inputField: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
-            }], CornerMenuOptions: [{
-                type: Input
-            }], ColumnsResizable: [{
-                type: Input
-            }], ColumnsPinnable: [{
-                type: Input
-            }], AutoUpdate: [{
-                type: Input
-            }], Height: [{
-                type: Input
-            }], EmptySpaceBackgroundColor: [{
-                type: Input
-            }], EsTableHandledSearch: [{
-                type: Input
-            }], MaxHeight: [{
-                type: Input
-            }], ContainerClass: [{
-                type: Input
-            }], XLSXExport: [{
-                type: Input
-            }], CSVExport: [{
-                type: Input
-            }], AllSearch: [{
-                type: Input
-            }], HighCellDensity: [{
-                type: Input
-            }], Selection: [{
-                type: Input
-            }], ShowLoadingOnBootstrap: [{
-                type: Input
-            }], Removal: [{
-                type: Input
-            }], RemovalCondition: [{
-                type: Input
-            }], Export: [{
-                type: Input
-            }], ShiftClick: [{
-                type: Input
-            }], CountLabel: [{
-                type: Input
-            }], HidePaging: [{
-                type: Input
-            }], HidePagingCount: [{
-                type: Input
-            }], HidePagingButtons: [{
-                type: Input
             }], ContextMenu: [{
                 type: Input
-            }], ExportFileName: [{
-                type: Input
-            }], TableClass: [{
-                type: Input
             }], ExportFunction: [{
                 type: Input
-            }], ExportOnlyVisibleColumns: [{
-                type: Input
-            }], HasHeaderGroup: [{
-                type: Input
-            }], HasSecondaryHeaderGroup: [{
-                type: Input
-            }], HeaderHidden: [{
-                type: Input
-            }], BodyHidden: [{
-                type: Input
-            }], SelectionDisabled: [{
-                type: Input
-            }], SingleSelection: [{
-                type: Input
             }], RowClassAssigner: [{
                 type: Input
-            }], OrderByColumn: [{
-                type: Input
-            }], MultipleOrderingDirectives: [{
-                type: Input
-            }], HiddenColumns: [{
-                type: Input
-            }], ColumnsOrdering: [{
-                type: Input
-            }], SearchView: [{
-                type: Input
-            }], SelectAll: [{
-                type: Input
-            }], UseArrayModePaging: [{
-                type: Input
-            }], DynamicRowColumnsDefinition: [{
-                type: Input
-            }], DynamicOperations: [{
-                type: Input
-            }], Hierarchy: [{
-                type: Input
-            }], ParentKey: [{
-                type: Input
-            }], OwnKey: [{
-                type: Input
-            }], StartsExpanded: [{
-                type: Input
-            }], SavePreferences: [{
-                type: Input
-            }], DefaultAlignment: [{
-                type: Input
-            }], PagingStyle: [{
-                type: Input
-            }], RowGroupingPagingStyle: [{
-                type: Input
-            }], ItemSourceProperty: [{
-                type: Input
-            }], UseSelectionCache: [{
-                type: Input
-            }], ShowItemGroupsColumns: [{
-                type: Input
-            }], Editable: [{
-                type: Input
-            }], RangeSelection: [{
-                type: Input
-            }], SearchThrottle: [{
-                type: Input
             }], onOrderChanged: [{
                 type: Output
             }], onSearchRequest: [{
@@ -5724,8 +5674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], tableEmptyMenu: [{
                 type: ViewChild,
                 args: ['emptyMenu', { static: true }]
-            }], ArraymodeItemsPerPage: [{
-                type: Input
             }] } });
 class EsTdReference {
 }