@esfaenza/es-table 19.2.19 → 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';
@@ -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];
@@ -676,20 +676,20 @@ class ColumnMetadataHandler {
             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;
+            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),
@@ -930,16 +931,15 @@ class ColumnMetadataHandler {
      * 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())
@@ -968,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 => {
@@ -990,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)
@@ -1216,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++) {
@@ -1272,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;
@@ -1378,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
@@ -1411,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();
@@ -1419,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++) {
@@ -1436,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;
@@ -1456,7 +1456,7 @@ class ColumnMetadataHandler {
     globalColVisCheckChanged() {
         this.est.TMPColumnsList.forEach(t => {
             if (!t.fixed)
-                t.visible = this.est.globalColVisCheck;
+                t.visible = this.est.globalColVisCheck();
         });
     }
 }
@@ -1631,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.set('parentid');
             if (objs[0]['id'] !== undefined)
                 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;
         }
@@ -1698,13 +1698,14 @@ 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) {
                 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)
                         child._visible = true;
@@ -1719,8 +1720,9 @@ 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) {
                 obj._expanded = false;
@@ -1736,8 +1738,9 @@ 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)
@@ -1770,18 +1773,19 @@ 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.set(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)
@@ -1843,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
@@ -1892,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.
@@ -2044,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();
@@ -2088,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 = "";
@@ -2146,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);
@@ -2200,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));
         }
     }
     /**
@@ -2695,11 +2701,11 @@ 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.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) {
+        if (this.est.arrayMode()) {
             let prevSelected = this.est.selectedObjects();
             this.finalizeSelectionInformations(selectionItem);
             if (this.est.selectedObjects() != prevSelected)
@@ -2762,16 +2768,16 @@ class SelectionHandler {
             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;
@@ -2795,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);
@@ -2803,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);
@@ -2983,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 &&
@@ -3091,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 = [];
@@ -3136,12 +3142,12 @@ class SelectionHandler {
         // Ripulisco gli stati UI di selezione globale se l'ho disattivata
         if (!selectionItem.all) {
             this.est.canSelectAll.set(false);
-            this.est.globalCheck = 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
@@ -3904,25 +3910,27 @@ class EsTableComponent {
         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 = signal(0);
         /** Indica se è possibile effettuare una selezione massiva */
         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 */
@@ -3932,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 */
@@ -3987,7 +3995,7 @@ class EsTableComponent {
         /** 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 = input(null);
         /** Indica se dev'essere possibile effettuare il resize delle colonne */
@@ -4212,7 +4220,7 @@ class EsTableComponent {
         /** 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 = signal(false);
         /** Indica lo stato di selezione per singola cella */
@@ -4253,8 +4261,17 @@ class EsTableComponent {
         this.EsTdsCache = {};
         effect(() => {
             if (this.SearchView())
-                this.arrayPulsanti = this.utilities_H.getPagesArray(6, this.SearchView().page, this.SearchView().pages || 1, this.SearchView().objectcount || this.SearchView().items.length, this.SearchView().itemsperpageoverride);
+                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(); });
@@ -4312,6 +4329,7 @@ class EsTableComponent {
         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 */
@@ -4367,7 +4385,7 @@ class EsTableComponent {
     registerOnTouched(fn) { }
     /** @ignore */
     changed(clearItems = false) {
-        if (clearItems && this.viewMode) {
+        if (clearItems && this.viewMode()) {
             if (!this.ItemSourceProperty)
                 this.View.items = [];
             else
@@ -4385,10 +4403,10 @@ class EsTableComponent {
             return;
         }
         // Mi è arrivata l'AppSearch quindi di sicuro non ho una ricerca in progress
-        this.researchInProgress = false;
+        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;
@@ -4464,9 +4482,8 @@ 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');
@@ -4532,9 +4549,9 @@ 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)
+        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);
@@ -4560,14 +4577,14 @@ class EsTableComponent {
         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())) {
+        else if (this.arrayMode() && (!this.UseArrayModePaging() || this.SearchView())) {
             if (this.SearchView()) {
                 this.PagerOptions.View = this.SearchView();
                 this.PagerOptions.PagerCount = this.SearchView().objectcount || 0;
@@ -4579,7 +4596,7 @@ class EsTableComponent {
             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';
@@ -4614,10 +4631,10 @@ 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
@@ -4628,7 +4645,7 @@ class EsTableComponent {
                 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;
@@ -4648,7 +4665,7 @@ class EsTableComponent {
             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...
+            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.
@@ -4671,10 +4688,10 @@ 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
@@ -4689,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;
         }
@@ -4710,7 +4727,7 @@ 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.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);
@@ -4758,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);
@@ -4776,7 +4793,7 @@ 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;
         }
@@ -4791,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();
         }
@@ -4800,7 +4817,7 @@ class EsTableComponent {
                 viewOverride.page = 1;
             viewOverride.internalsearchrequest = true;
         }
-        this.researchInProgress = true;
+        this.researchInProgress.set(true);
         if (this.View && !this.View.selfsearch && this.EsTableHandledSearch()) {
             this.View.selfsearch = true;
             this.changed(true);
@@ -4832,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];
@@ -4926,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;
@@ -5008,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; });
@@ -5040,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);
         }
@@ -5052,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);
     }
@@ -5075,7 +5094,7 @@ class EsTableComponent {
         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) {
@@ -5116,7 +5135,7 @@ 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;
@@ -5125,7 +5144,7 @@ class EsTableComponent {
         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() || null));
     }
@@ -5153,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
@@ -5234,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**,
@@ -5251,15 +5270,15 @@ 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();
         }
-        if (!relaunchSearch && this.viewMode)
+        if (!relaunchSearch && this.viewMode())
             this.View.selfsearch = true;
         this.writeValue(this.View);
         this.cdr.detectChanges();
-        if (this.arrayMode) {
+        if (this.arrayMode()) {
             this.ArraymodeItemsPerPage.set(arrayIpp);
             this.arrayGoToPage(arrayPage);
         }
@@ -5454,17 +5473,20 @@ class EsTableComponent {
      * @param {number} columnIndex Indice della colonna su cui è avvenuta la modifica
      */
     finalizeUserEdit(rowItem, item, columnIndex) {
-        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);
+        // 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
@@ -5577,11 +5599,11 @@ class EsTableComponent {
         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: 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: { 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: { 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 }); }
+    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        #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"] }]
+            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
                 }, {