@esfaenza/es-table 11.2.6 → 11.2.7

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

@@ -575,6 +575,10 @@
              * Valore da mostrare all'interno della cella. Se omesso verrà proiettato il contenuto dal template in cui è stata usata
              */
             this.Display = null;
+            /**
+             * Template Angular da istanziare per questo TD
+             */
+            this.Template = null;
         }
         Object.defineProperty(EsTd.prototype, "Visible", {
             /**
@@ -670,6 +674,7 @@
         Internal: [{ type: core.Input }],
         RouterLink: [{ type: core.Input }],
         Display: [{ type: core.Input }],
+        Template: [{ type: core.Input }],
         Visible: [{ type: core.Input }]
     };
 
@@ -977,13 +982,18 @@
             this.ColumnsResizable = false;
             /** Indica se dev'essere disponibile il sistema di aggiornamento automatico */
             this.AutoUpdate = false;
-            /** Indica se la tabella (configurata con **UseCustomCells**) deve mettersi in ascolto per i click sulle celle desiderate */
+            /** Indica se la tabella (configurata con **UseCustomCells**) deve mettersi in ascolto per i click sulle celle desiderate
+             *
+             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
+             */
             this.UseCustomCellActions = false;
             /**
              * Indica le celle desiderate su cui intercettare i click. Attiva solo quando **UseCustomCellActions** è true.
              * Ogni cella dev'essere separata dalla successiva dal carattere del Simoleon:
              *
              * Es, "MiaCella1§MiaCella2"
+             *
+             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
              */
             this.CustomCellActionsOn = '';
             /** Serve per decidere di lanciare o meno il **event.stopPropagation()** al termine della gestione dell'evento */
@@ -1129,7 +1139,10 @@
             this.onRemoval = new core.EventEmitter();
             /** Evento richiamato all'annullamento di un'eliminazione */
             this.onAbortRemoval = new core.EventEmitter();
-            /** Evento richiamato al click su una cella quando **UseCustomCellActions** è attivo */
+            /** Evento richiamato al click su una cella quando **UseCustomCellActions** è attivo
+             *
+             * @deprecated Utilizzare l'Input **Template** delle es-td e assegnare un template con tutti i binding che si vuole ai click
+             */
             this.onCellClick = new core.EventEmitter();
             /** Evento richiamato quando si clicca su un opzione definita nelle **CornerMenuOptions** */
             this.onCornerAction = new core.EventEmitter();
@@ -1734,7 +1747,7 @@
                     thsCache[td.ID].Referenced = true;
                 else
                     throw "ID dell'oggeto EsTd non compatibile con gli ID dicharati negli EsTh: " + td.ID;
-                var itemToAdd = { ID: td.ID, Visible: td.Visible, Class: td.Class, Content: td.Content, RouterLink: td.RouterLink };
+                var itemToAdd = { ID: td.ID, Visible: td.Visible, Class: td.Class, Content: td.Content, RouterLink: td.RouterLink, Template: td.Template };
                 if (this.TMPRowTDs[td.Context])
                     this.TMPRowTDs[td.Context].push(itemToAdd);
                 else {
@@ -2620,7 +2633,7 @@
                     viewProviders: [{ provide: localizations.LocalizationService, useClass: EsTableLoc }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None,
-                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n</div>\r\n\r\n<!--\r\nI TH sono contenuto statico, questo significa che senza condizione per RowTHs arriverebbero sia qui sia nell ng-container dell'header in fase non inizializzata, duplicando fisicamente le colonne.\r\nPer ovviare al problema, questo pezzo lo faccio apparire solo se ci sono gi\u00E0 dei RowTHs, quindi su valorizzazione della View succeder\u00E0:\r\n1) appaiono i th nell' ng-container dell'header, e NON qui\r\n2) i TH vengono presi, elaborati e trasformati in RowTHs\r\n3) l'ng-container dell'header sparisce (per la condizione !UseCustomCells || !RowTHs) e qui appaiono i nuovi TH (che poi sono gli stessi di prima che girano)\r\n4) Vengono presi i nuovi TH da qui e trasformati a loro volta in RowTHs\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && RowTHs\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Qui invece ci sono tutti i TH-->\r\n        <ng-container *ngTemplateOutlet=\"templateRefHeader\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<!--\r\nQuesta parte \u00E8 un po' pi\u00F9 semplice del sopra. Infatti i TD vengono s\u00EC bindati in entrambi i punti (qui e nell'ng-container del body), ma avr\u00F2 le TD statiche prima di generare la TMPBoundSource.\r\nQuesto significa che il workflow di binding sar\u00E0:\r\n1) Appaiono i TD statici nel body e NON qui, perch\u00E9 i TMPBoundSource non sono ancora stati emessi\r\n2) Contemporaneamente all'emissione dei TMPBoundSource vengono anche emessi i RowTds\r\n3) Considerando il punto 2, al giro dopo appariranno i TD qui, perch\u00E9 \u00E8 stata generata la TMPBoundSource, e spariranno contemporaneamente dall'ng-container del body (per la condizione !UseCustomCells || !RowTDs)\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Tutti i TD che dopo verranno presi ed elaborati internamente-->\r\n        <ng-container *ngFor=\"let item of TMPBoundSource\">\r\n            <ng-container *ngTemplateOutlet=\"templateRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"View\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{Class}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }}\" [class.est-high-density]=\"HighCellDensity\">\r\n            <thead [hidden]=\"HeaderHidden || FirstBind\">\r\n\r\n                <!-- Aggiungo il pezzo che gestisce la selezione di tutto se attivo da config -->\r\n                <tr *ngIf=\"SelectAll\">\r\n                    <th colspan=\"42\" [class.est-hidden]=\"!canSelectAll && !(View?.selection || arraymodeSelection).all\">\r\n                        <span>{{ (selectedObjects || 0).toString() + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n                        <span class=\"app-link app-inline\" (click)=\"selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <tr *ngIf=\"HasHeaderGroup\">\r\n                    <ng-container *ngTemplateOutlet=\"templateRefHeaderGroup\"></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=\"templateRefSecondaryHeaderGroup\"></ng-container>\r\n                    <th *ngIf=\"Export\"></th>\r\n                </tr>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode, mostro solo su DisplayReady per evitare di far flashare in modo brutto -->\r\n                    <ng-container *ngIf=\"(viewMode || arrayMode)\">\r\n\r\n                        <!-- In una tabella base prendo semplicemente i th scritti dall'utente nell'HTML -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && !DynamicRowColumnsDefinition\">\r\n                            <ng-container *ngTemplateOutlet=\"templateRefHeader\"></ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se ho un modello dinamico dell'oggetto creo le colonne in base alle propriet\u00E0 -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && DynamicRowColumnsDefinition\">\r\n                            <ng-container *ngFor=\"let operation of DynamicOperations\">\r\n                                <th class=\"est-col-min est-no-side-padding\"></th>\r\n                            </ng-container>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition\">\r\n                                <ng-container *ngIf=\"rowHeader.visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowHeader.clss : 'est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [Internal]=\"false\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.propertyName, $event)\">{{rowHeader.description}}</th>\r\n                                    <th *ngIf=\"!OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowHeader.clss : 'est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [Internal]=\"false\" [OrderBy]=\"OrderByColumn\">{{rowHeader.description}}</th>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se non ho un modello dinamico ma invece delle celle custom, genero gli header in base ai row th -->\r\n                        <ng-container *ngIf=\"UseCustomCells && RowTHs\">\r\n                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <ng-container *ngIf=\"rowHeader && rowHeader.Visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class}}\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [Internal]=\"true\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">{{rowHeader.Content}}</th>\r\n                                    <th *ngIf=\"!OrderByColumn\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class}}\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [Internal]=\"true\" [OrderBy]=\"OrderByColumn\">{{rowHeader.Content}}</th>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n\r\n                    <!--Casistica in cui ho il setup proveniente da un report. Gli header sono definiti da come \u00E8 fatto il report-->\r\n                    <ng-container *ngIf=\"reportMode\">\r\n                        <th [style.color]=\"clm.color\" *ngFor=\"let clm of ReportValues.columns\" class=\"app-no-selection app-pointer est-nowrap\" (click)=\"setupNextOrderAndSearch(clm)\">\r\n                            {{clm.description}}\r\n                            <span class=\"fa\" [class.fa-chevron-down]=\"clm.order == 'DESC'\" [class.fa-chevron-up]=\"clm.order == 'ASC'\"></span>\r\n                        </th>\r\n                    </ng-container>\r\n\r\n                    <!--Per l'eliminazione mi serve un header aggiuntivo-->\r\n                    <th *ngIf=\"Removal\" [class.app-right-10]=\"Export || HiddenColumns\" class=\"est-col-min app-sticky-last-column\"><span class=\"fa fa-trash\"></span></th>\r\n\r\n                    <!--Per l'esportazione mi serve l'header extra da cui faccio uscire i 3 pallocchi-->\r\n                    <th *ngIf=\"Export || HiddenColumns || ColumnsOrdering || CornerMenuOptions\" class=\"app-table-dotted-menu app-sticky-last-column est-col-min text-sm-center\">\r\n                        \r\n                        <!-- Link nascosto che serve a scaricare il file -->\r\n                        <a *ngIf=\"headers\" hidden #exportDownloader csvLink [data]=\"data\" [headers]=\"headers\" [delimiter]=\"';'\" [filename]=\"ExportFileName\"></a>\r\n\r\n                        <!-- Blocco con i 3 pallocchi che tira fuori il context menu delle operazioni -->\r\n                        <div class=\"btn-group\" container=\"body\" placement=\"bottom right\" dropdown #dropdown=\"bs-dropdown\" [autoClose]=\"true\">\r\n                            <span dropdownToggle class=\"fa fa-ellipsis-v app-fs-18 app-pointer app-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right app-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"(HiddenColumns || ColumnsOrdering)\" (click)=\"resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            \r\n            <!-- Valido per modalit\u00E0 View o Array. Se sono in report mode il body \u00E8 creato in altro modo, mostro solo su DisplayReady per evitare di far flashare in modo brutto -->\r\n            <tbody [hidden]=\"BodyHidden || FirstBind\" *ngIf=\"(arrayMode || viewMode)\">\r\n                <!--Con selection attiva richiamo il template che gestisce il context menu-->\r\n                <ng-container *ngIf=\"Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBodySelection; context: { $implicit: { selDisabled: arrayMode ? false : SelectionDisabled, sel: Selection }}\"></ng-container>\r\n                </ng-container>\r\n\r\n                <!--Senza selection richiamo il template che NON gestisce il context menu-->\r\n                <ng-container *ngIf=\"!Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBody; context: { $implicit: { sel: Selection }}\"></ng-container>\r\n                </ng-container>\r\n            </tbody>\r\n\r\n            <!-- Per la modalit\u00E0 a report c'\u00E8 un body particolare semi-dinamico -->\r\n            <tbody [hidden]=\"BodyHidden\" *ngIf=\"reportMode\">\r\n                <tr *ngFor=\"let row of ReportValues.rows; let even = even;\">\r\n                    <td class=\"est-nowrap\" *ngFor=\"let val of row.values\">{{val}}</td>\r\n                    <td class=\"app-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowPaging && !FirstBind\">\r\n\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-left m-t-min-3\">\r\n            <ng-container *ngIf=\"viewMode\">\r\n                <ng-container *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.objectcount && View.objectcount != -1), ShowPaging: !HidePaging, View: View, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && (!UseArrayModePaging || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.length) || (SearchView && SearchView.objectcount && SearchView.objectcount != -1), ShowPaging: !HidePaging && SearchView, View: SearchView, SecondaryView: View, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && (UseArrayModePaging && !SearchView)\">\r\n                <ng-container  *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount, ShowPaging: !HidePaging && View.length > 10, View: View, UsesView: false }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"reportMode\">\r\n                <ng-container  *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.objectcount && View.objectcount != -1), ShowPaging: View.pagingavailable, MightBeNoPaging: true, View: View, Report: ReportValues, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div class=\"pull-right btn-toolbar\" *ngIf=\"ShowPaging && !HidePagingButtons\">\r\n            <ng-container *ngIf=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <a class=\"btn app-white-button app-no-margin\" (click)=\"options.ATP(-1)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n    <div *ngIf=\"options.Array\" class=\"app-inline\">\r\n        <a *ngFor=\"let p of options.Array\" class=\"btn {{p.cssClass}} app-no-margin\" (click)=\"options.GTP(p.val)\">{{p.val}}</a>\r\n    </div>\r\n    <a class=\"btn app-white-button app-no-margin\" (click)=\"options.ATP(1)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n</ng-template>\r\n\r\n<!-- Template che mostra le informazioni base di paginazione: conteggio oggetti, paginazione attuale e pulsanti per cambiarla -->\r\n<ng-template #pagerSelector let-options>\r\n    <div *ngIf=\"options.ShowCount\">\r\n        {{ CountLabel }}:&nbsp;\r\n        <strong *ngIf=\"options.UsesView && !options.Report\">\r\n            {{ options.View?.objectcount ? options.View.objectcount : options.SecondaryView && options.SecondaryView.length ? options.SecondaryView.length : \"0\" }}\r\n        </strong>\r\n        <strong *ngIf=\"!options.UsesView && !options.Report\">\r\n            {{ options.View.length ? options.View.length : \"0\" }}\r\n        </strong>\r\n        <strong *ngIf=\"options.Report\">\r\n            {{ options.Report.count && options.Report.count == -1 ? options.Report.rows.length : options.Report.count && options.Report.count > 0 ? options.Report.count : 0 }}\r\n        </strong>\r\n    </div>\r\n    <div *ngIf=\"options.ShowPaging\">\r\n        <app-paging *ngIf=\"!options.UsesView\" [Hidden]=\"!options.View || options.View.length == 0\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"refreshPaging($event)\"></app-paging>\r\n        <app-paging *ngIf=\"options.UsesView\" [AllSearch]=\"AllSearch\" [DefaultAll]=\"defaultAllPageOverride\" [View]=\"options.View\" (pagingSelected)=\"options.View.itemsperpageoverride = $event; changed(); onItemsPerPageChanged();\"></app-paging>\r\n    </div>\r\n    <div *ngIf=\"options.MightBeNoPaging && !options.ShowPaging\">\r\n        <em>{{'Paging options are not available for this report' | localize: lc}}</em>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index;\">\r\n        <tr *ngIf=\"item.visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" [class.est-line-through]=\"item.removed || item.deleted\" [class.est-pointer]=\"!item.locked\" [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"!item.locked && handleClick($event, item)\">\r\n            \r\n            <td *ngIf=\"!item.locked\"><input type=\"checkbox\" [disabled]=\"templateOptions.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{i}}\"></td>\r\n            <td *ngIf=\"item.locked\"></td>\r\n\r\n            <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: { item: item }}\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: { item: item }}\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: { item: item }}\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>      \r\n\r\n<ng-template #TBody let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even;\">\r\n        <tr *ngIf=\"item.visible || !Hierarchy\" [class]=\"item._rowClass ? item._rowClass : ''\" [class.est-line-through]=\"item.removed || item.deleted\">\r\n\r\n            <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: { item: item }}\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: { item: item }}\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: { item: item }}\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-options>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"templateRef; context : {$implicit: options.item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle definite in maniera dinamica dal modello -->\r\n<ng-template #dynamicColumns let-options>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && DynamicRowColumnsDefinition\">\r\n        <ng-container *ngFor=\"let operation of DynamicOperations; let first = first; let last = last;\">\r\n            <ng-container *ngIf=\"!operation.conditionField || (options.item.properties[operation.conditionField] == operation.conditionValue)\">\r\n                <td [class.est-no-right-padding]=\"last\" [class.est-no-left-padding]=\"!first\" class=\"est-col-min\"><span title=\"{{operation.title}}\" class=\"{{operation.iconClass}} app-pointer\" (click)=\"dynamicOperation(options.item, operation.id)\">{{operation.text}}</span></td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"operation.conditionField && (options.item.properties[operation.conditionField] != operation.conditionValue)\">\r\n                <td class=\"est-col-min est-no-side-padding\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let rowItem of DynamicRowColumnsDefinition\">\r\n            <ng-container *ngIf=\"rowItem.routePath && rowItem.visible\">\r\n                <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [Internal]=\"false\">\r\n                    <a [routerLink]=\"generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, options.item)\" class=\"app-link\" [innerHTML]=\"options.item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [class.app-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\" (click)=\"cellClicked(rowItem.propertyName, options.item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"false\" [innerHTML]=\"options.item.properties[rowItem.propertyName]\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-options>\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[options.item.hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem\">\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <span *ngIf=\"!options.item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n                            <span *ngIf=\"options.item.parent && options.item.expanded\" class=\"fa fa-chevron-down est-pointer app-no-selection\" (click)=\"collapseParent(options.item[this.OwnKey])\"></span>\r\n                            <span *ngIf=\"options.item.parent && !options.item.expanded\" class=\"fa fa-chevron-up est-pointer app-no-selection\" (click)=\"expandParent(options.item[this.OwnKey])\"></span>\r\n                            &nbsp;\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"app-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [class.app-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + $any(rowItem).ID + '$') != -1\" (click)=\"cellClicked(rowItem.ID, options.item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <span *ngIf=\"!options.item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n                            <span *ngIf=\"options.item.parent && options.item.expanded\" class=\"fa fa-chevron-down est-pointer app-no-selection\" (click)=\"collapseParent(options.item[this.OwnKey])\"></span>\r\n                            <span *ngIf=\"options.item.parent && !options.item.expanded\" class=\"fa fa-chevron-up est-pointer app-no-selection\" (click)=\"expandParent(options.item[this.OwnKey])\"></span>\r\n                            &nbsp;\r\n                        </ng-container>\r\n                        <span [innerHTML]=\"rowItem.Content\"></span>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove app-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning app-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove app-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning app-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove app-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"app-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" app-draggable=\".modal-header\">\r\n        <div class=\"modal-content\" app-draggable=\".modal-header\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info app-padding-10 app-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm app-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th>\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" class=\"est-pointer\" [class.est-white-selected]=\"lastSelectedItemID == item.id\" [class.est-no-selection]=\"!item.visible\" (click)=\"columnClicked(item);\">\r\n                                <td *ngIf=\"HiddenColumns\"><input type=\"checkbox\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"updateGlobalColVisCheck();\" /></td>\r\n                                <td class=\"est-nowrap\" *ngIf=\"ColumnsOrdering\">\r\n                                    <span class=\"fa fa-arrow-up\" (click)=\"lastSelectedItemID = item.id; i != 0 && sendUp(item)\"></span>\r\n                                    <span class=\"fa fa-arrow-down\" (click)=\"lastSelectedItemID = item.id; !last && sendDown(item)\"></span>\r\n                                </td>\r\n                                <td class=\"est-nowrap\">{{item.description}}</td>\r\n                                <!--Filler-->\r\n                                <td></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary app-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
+                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n</div>\r\n\r\n<!--\r\nI TH sono contenuto statico, questo significa che senza condizione per RowTHs arriverebbero sia qui sia nell ng-container dell'header in fase non inizializzata, duplicando fisicamente le colonne.\r\nPer ovviare al problema, questo pezzo lo faccio apparire solo se ci sono gi\u00E0 dei RowTHs, quindi su valorizzazione della View succeder\u00E0:\r\n1) appaiono i th nell' ng-container dell'header, e NON qui\r\n2) i TH vengono presi, elaborati e trasformati in RowTHs\r\n3) l'ng-container dell'header sparisce (per la condizione !UseCustomCells || !RowTHs) e qui appaiono i nuovi TH (che poi sono gli stessi di prima che girano)\r\n4) Vengono presi i nuovi TH da qui e trasformati a loro volta in RowTHs\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells && RowTHs\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Qui invece ci sono tutti i TH-->\r\n        <ng-container *ngTemplateOutlet=\"templateRefHeader\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<!--\r\nQuesta parte \u00E8 un po' pi\u00F9 semplice del sopra. Infatti i TD vengono s\u00EC bindati in entrambi i punti (qui e nell'ng-container del body), ma avr\u00F2 le TD statiche prima di generare la TMPBoundSource.\r\nQuesto significa che il workflow di binding sar\u00E0:\r\n1) Appaiono i TD statici nel body e NON qui, perch\u00E9 i TMPBoundSource non sono ancora stati emessi\r\n2) Contemporaneamente all'emissione dei TMPBoundSource vengono anche emessi i RowTds\r\n3) Considerando il punto 2, al giro dopo appariranno i TD qui, perch\u00E9 \u00E8 stata generata la TMPBoundSource, e spariranno contemporaneamente dall'ng-container del body (per la condizione !UseCustomCells || !RowTDs)\r\n-->\r\n<div hidden *ngIf=\"UseCustomCells\">\r\n    <ng-container *ngIf=\"View\">\r\n        <!--Tutti i TD che dopo verranno presi ed elaborati internamente-->\r\n        <ng-container *ngFor=\"let item of TMPBoundSource\">\r\n            <ng-container *ngTemplateOutlet=\"templateRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"View\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{Class}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }}\" [class.est-high-density]=\"HighCellDensity\">\r\n            <thead [hidden]=\"HeaderHidden || FirstBind\">\r\n\r\n                <!-- Aggiungo il pezzo che gestisce la selezione di tutto se attivo da config -->\r\n                <tr *ngIf=\"SelectAll\">\r\n                    <th colspan=\"42\" [class.est-hidden]=\"!canSelectAll && !(View?.selection || arraymodeSelection).all\">\r\n                        <span>{{ (selectedObjects || 0).toString() + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n                        <span class=\"app-link app-inline\" (click)=\"selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <tr *ngIf=\"HasHeaderGroup\">\r\n                    <ng-container *ngTemplateOutlet=\"templateRefHeaderGroup\"></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=\"templateRefSecondaryHeaderGroup\"></ng-container>\r\n                    <th *ngIf=\"Export\"></th>\r\n                </tr>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode, mostro solo su DisplayReady per evitare di far flashare in modo brutto -->\r\n                    <ng-container *ngIf=\"(viewMode || arrayMode)\">\r\n\r\n                        <!-- In una tabella base prendo semplicemente i th scritti dall'utente nell'HTML -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && !DynamicRowColumnsDefinition\">\r\n                            <ng-container *ngTemplateOutlet=\"templateRefHeader\"></ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se ho un modello dinamico dell'oggetto creo le colonne in base alle propriet\u00E0 -->\r\n                        <ng-container *ngIf=\"(!UseCustomCells || !RowTHs) && DynamicRowColumnsDefinition\">\r\n                            <ng-container *ngFor=\"let operation of DynamicOperations\">\r\n                                <th class=\"est-col-min est-no-side-padding\"></th>\r\n                            </ng-container>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition\">\r\n                                <ng-container *ngIf=\"rowHeader.visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowHeader.clss : 'est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [Internal]=\"false\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.propertyName, $event)\">{{rowHeader.description}}</th>\r\n                                    <th *ngIf=\"!OrderByColumn\" es-th=\"{{rowHeader.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowHeader.clss : 'est-nowrap'}}\" [Order]=\"rowHeader.dataOrder\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.orderable\" [Internal]=\"false\" [OrderBy]=\"OrderByColumn\">{{rowHeader.description}}</th>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n\r\n                        <!-- Se non ho un modello dinamico ma invece delle celle custom, genero gli header in base ai row th -->\r\n                        <ng-container *ngIf=\"UseCustomCells && RowTHs\">\r\n                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <ng-container *ngIf=\"rowHeader && rowHeader.Visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class}}\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [Internal]=\"true\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"thOrderChanged(rowHeader.ID, $event)\">{{rowHeader.Content}}</th>\r\n                                    <th *ngIf=\"!OrderByColumn\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class}}\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [Internal]=\"true\" [OrderBy]=\"OrderByColumn\">{{rowHeader.Content}}</th>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n\r\n                    <!--Casistica in cui ho il setup proveniente da un report. Gli header sono definiti da come \u00E8 fatto il report-->\r\n                    <ng-container *ngIf=\"reportMode\">\r\n                        <th [style.color]=\"clm.color\" *ngFor=\"let clm of ReportValues.columns\" class=\"app-no-selection app-pointer est-nowrap\" (click)=\"setupNextOrderAndSearch(clm)\">\r\n                            {{clm.description}}\r\n                            <span class=\"fa\" [class.fa-chevron-down]=\"clm.order == 'DESC'\" [class.fa-chevron-up]=\"clm.order == 'ASC'\"></span>\r\n                        </th>\r\n                    </ng-container>\r\n\r\n                    <!--Per l'eliminazione mi serve un header aggiuntivo-->\r\n                    <th *ngIf=\"Removal\" [class.app-right-10]=\"Export || HiddenColumns\" class=\"est-col-min app-sticky-last-column\"><span class=\"fa fa-trash\"></span></th>\r\n\r\n                    <!--Per l'esportazione mi serve l'header extra da cui faccio uscire i 3 pallocchi-->\r\n                    <th *ngIf=\"Export || HiddenColumns || ColumnsOrdering || CornerMenuOptions\" class=\"app-table-dotted-menu app-sticky-last-column est-col-min text-sm-center\">\r\n                        \r\n                        <!-- Link nascosto che serve a scaricare il file -->\r\n                        <a *ngIf=\"headers\" hidden #exportDownloader csvLink [data]=\"data\" [headers]=\"headers\" [delimiter]=\"';'\" [filename]=\"ExportFileName\"></a>\r\n\r\n                        <!-- Blocco con i 3 pallocchi che tira fuori il context menu delle operazioni -->\r\n                        <div class=\"btn-group\" container=\"body\" placement=\"bottom right\" dropdown #dropdown=\"bs-dropdown\" [autoClose]=\"true\">\r\n                            <span dropdownToggle class=\"fa fa-ellipsis-v app-fs-18 app-pointer app-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right app-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"(HiddenColumns || ColumnsOrdering)\" (click)=\"resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            \r\n            <!-- Valido per modalit\u00E0 View o Array. Se sono in report mode il body \u00E8 creato in altro modo, mostro solo su DisplayReady per evitare di far flashare in modo brutto -->\r\n            <tbody [hidden]=\"BodyHidden || FirstBind\" *ngIf=\"(arrayMode || viewMode)\">\r\n                <!--Con selection attiva richiamo il template che gestisce il context menu-->\r\n                <ng-container *ngIf=\"Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBodySelection; context: { $implicit: { selDisabled: arrayMode ? false : SelectionDisabled, sel: Selection }}\"></ng-container>\r\n                </ng-container>\r\n\r\n                <!--Senza selection richiamo il template che NON gestisce il context menu-->\r\n                <ng-container *ngIf=\"!Selection\">\r\n                    <ng-container *ngTemplateOutlet=\"TBody\"></ng-container>\r\n                </ng-container>\r\n            </tbody>\r\n\r\n            <!-- Per la modalit\u00E0 a report c'\u00E8 un body particolare semi-dinamico -->\r\n            <tbody [hidden]=\"BodyHidden\" *ngIf=\"reportMode\">\r\n                <tr *ngFor=\"let row of ReportValues.rows; let even = even;\">\r\n                    <td class=\"est-nowrap\" *ngFor=\"let val of row.values\">{{val}}</td>\r\n                    <td class=\"app-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowPaging && !FirstBind\">\r\n\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-left m-t-min-3\">\r\n            <ng-container *ngIf=\"viewMode\">\r\n                <ng-container *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.objectcount && View.objectcount != -1), ShowPaging: !HidePaging, View: View, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && (!UseArrayModePaging || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.length) || (SearchView && SearchView.objectcount && SearchView.objectcount != -1), ShowPaging: !HidePaging && SearchView, View: SearchView, SecondaryView: View, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && (UseArrayModePaging && !SearchView)\">\r\n                <ng-container  *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount, ShowPaging: !HidePaging && View.length > 10, View: View, UsesView: false }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"reportMode\">\r\n                <ng-container  *ngTemplateOutlet=\"pagerSelector; context: { $implicit: { ShowCount: !HidePagingCount || (View && View.objectcount && View.objectcount != -1), ShowPaging: View.pagingavailable, MightBeNoPaging: true, View: View, Report: ReportValues, UsesView: true }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <!-- Pulsanti avanti-indietro di paginazione -->\r\n        <div class=\"pull-right btn-toolbar\" *ngIf=\"ShowPaging && !HidePagingButtons\">\r\n            <ng-container *ngIf=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <a class=\"btn app-white-button app-no-margin\" (click)=\"options.ATP(-1)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n    <div *ngIf=\"options.Array\" class=\"app-inline\">\r\n        <a *ngFor=\"let p of options.Array\" class=\"btn {{p.cssClass}} app-no-margin\" (click)=\"options.GTP(p.val)\">{{p.val}}</a>\r\n    </div>\r\n    <a class=\"btn app-white-button app-no-margin\" (click)=\"options.ATP(1)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n</ng-template>\r\n\r\n<!-- Template che mostra le informazioni base di paginazione: conteggio oggetti, paginazione attuale e pulsanti per cambiarla -->\r\n<ng-template #pagerSelector let-options>\r\n    <div *ngIf=\"options.ShowCount\">\r\n        {{ CountLabel }}:&nbsp;\r\n        <strong *ngIf=\"options.UsesView && !options.Report\">\r\n            {{ options.View?.objectcount ? options.View.objectcount : options.SecondaryView && options.SecondaryView.length ? options.SecondaryView.length : \"0\" }}\r\n        </strong>\r\n        <strong *ngIf=\"!options.UsesView && !options.Report\">\r\n            {{ options.View.length ? options.View.length : \"0\" }}\r\n        </strong>\r\n        <strong *ngIf=\"options.Report\">\r\n            {{ options.Report.count && options.Report.count == -1 ? options.Report.rows.length : options.Report.count && options.Report.count > 0 ? options.Report.count : 0 }}\r\n        </strong>\r\n    </div>\r\n    <div *ngIf=\"options.ShowPaging\">\r\n        <app-paging *ngIf=\"!options.UsesView\" [Hidden]=\"!options.View || options.View.length == 0\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"refreshPaging($event)\"></app-paging>\r\n        <app-paging *ngIf=\"options.UsesView\" [AllSearch]=\"AllSearch\" [DefaultAll]=\"defaultAllPageOverride\" [View]=\"options.View\" (pagingSelected)=\"options.View.itemsperpageoverride = $event; changed(); onItemsPerPageChanged();\"></app-paging>\r\n    </div>\r\n    <div *ngIf=\"options.MightBeNoPaging && !options.ShowPaging\">\r\n        <em>{{'Paging options are not available for this report' | localize: lc}}</em>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index;\">\r\n        <tr *ngIf=\"item.visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" [class.est-line-through]=\"item.removed || item.deleted\" [class.est-pointer]=\"!item.locked\" [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"!item.locked && handleClick($event, item)\">\r\n            \r\n            <td *ngIf=\"!item.locked\"><input type=\"checkbox\" [disabled]=\"templateOptions.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{i}}\"></td>\r\n            <td *ngIf=\"item.locked\"></td>\r\n\r\n            <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>      \r\n\r\n<ng-template #TBody>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even;\">\r\n        <tr *ngIf=\"item.visible || !Hierarchy\" [class]=\"item._rowClass ? item._rowClass : ''\" [class.est-line-through]=\"item.removed || item.deleted\">\r\n\r\n            <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"templateRef; context : {$implicit: item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle definite in maniera dinamica dal modello -->\r\n<ng-template #dynamicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && DynamicRowColumnsDefinition\">\r\n        <ng-container *ngFor=\"let operation of DynamicOperations; let first = first; let last = last;\">\r\n            <ng-container *ngIf=\"!operation.conditionField || (item.properties[operation.conditionField] == operation.conditionValue)\">\r\n                <td [class.est-no-right-padding]=\"last\" [class.est-no-left-padding]=\"!first\" class=\"est-col-min\"><span title=\"{{operation.title}}\" class=\"{{operation.iconClass}} app-pointer\" (click)=\"dynamicOperation(item, operation.id)\">{{operation.text}}</span></td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"operation.conditionField && (item.properties[operation.conditionField] != operation.conditionValue)\">\r\n                <td class=\"est-col-min est-no-side-padding\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let rowItem of DynamicRowColumnsDefinition\">\r\n            <ng-container *ngIf=\"rowItem.routePath && rowItem.visible\">\r\n                <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [Internal]=\"false\">\r\n                    <a [routerLink]=\"generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"app-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\" [class.app-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\" (click)=\"cellClicked(rowItem.propertyName, item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"false\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-item>\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item.hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem\">\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n                            <span *ngIf=\"item.parent && item.expanded\" class=\"fa fa-chevron-down est-pointer app-no-selection\" (click)=\"collapseParent(item[this.OwnKey])\"></span>\r\n                            <span *ngIf=\"item.parent && !item.expanded\" class=\"fa fa-chevron-up est-pointer app-no-selection\" (click)=\"expandParent(item[this.OwnKey])\"></span>\r\n                            &nbsp;\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"app-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy\" [class.app-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + $any(rowItem).ID + '$') != -1\" (click)=\"cellClicked(rowItem.ID, item) && !CellActionPropagates && $event.stopPropagation()\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n                            <span *ngIf=\"item.parent && item.expanded\" class=\"fa fa-chevron-down est-pointer app-no-selection\" (click)=\"collapseParent(item[this.OwnKey])\"></span>\r\n                            <span *ngIf=\"item.parent && !item.expanded\" class=\"fa fa-chevron-up est-pointer app-no-selection\" (click)=\"expandParent(item[this.OwnKey])\"></span>\r\n                            &nbsp;\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\">\r\n                            <ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\" [innerHTML]=\"rowItem.Content\"></span>\r\n                    </td>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove app-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning app-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove app-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning app-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"app-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-10' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove app-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"app-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" app-draggable=\".modal-header\">\r\n        <div class=\"modal-content\" app-draggable=\".modal-header\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info app-padding-10 app-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm app-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th>\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" class=\"est-pointer\" [class.est-white-selected]=\"lastSelectedItemID == item.id\" [class.est-no-selection]=\"!item.visible\" (click)=\"columnClicked(item);\">\r\n                                <td *ngIf=\"HiddenColumns\"><input type=\"checkbox\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"updateGlobalColVisCheck();\" /></td>\r\n                                <td class=\"est-nowrap\" *ngIf=\"ColumnsOrdering\">\r\n                                    <span class=\"fa fa-arrow-up\" (click)=\"lastSelectedItemID = item.id; i != 0 && sendUp(item)\"></span>\r\n                                    <span class=\"fa fa-arrow-down\" (click)=\"lastSelectedItemID = item.id; !last && sendDown(item)\"></span>\r\n                                </td>\r\n                                <td class=\"est-nowrap\">{{item.description}}</td>\r\n                                <!--Filler-->\r\n                                <td></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary app-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
                     styles: [".est-loading-box{height:200px;text-align:center;position:relative;background:#ccc}.est-loading-content{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:35px}.est-scrollable{max-height:600px;overflow:auto}.est-pointer{cursor:pointer}.est-high-density td,.est-high-density th{padding:0 .2rem}.est-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}.est-nowrap{white-space:nowrap}.est-white-selected{background-color:#ddd!important}.est-line-through{text-decoration:line-through}.est-no-side-padding{padding-left:0;padding-right:0}.est-no-left-padding,.est-no-right-padding{padding-left:0}.est-col-min{width:1px}.est-switch{position:relative;display:inline-block;width:30px;height:17px;margin-bottom:0;margin-right:5px;margin-left:5px}.est-switch input{display:none}.est-slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.est-slider,.est-slider:before{position:absolute;transition:.4s}.est-slider:before{content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{transform:translateX(11px)}.est-slider.round{border-radius:10px}.est-slider.round:before{border-radius:50%}.est-custom-input{width:30px;display:inline;padding:1px;height:20px}.est-row-lvl-1 td:first-child{padding-left:5px}.est-row-lvl-2 td:first-child{padding-left:20px}.est-row-lvl-3 td:first-child{padding-left:35px}.est-row-lvl-4 td:first-child{padding-left:50px}.est-row-lvl-5 td:first-child{padding-left:65px}.est-row-lvl-6 td:first-child{padding-left:80px}.est-row-lvl-7 td:first-child{padding-left:95px}.est-row-lvl-8 td:first-child{padding-left:110px}.est-row-lvl-9 td:first-child{padding-left:125px}.est-row-lvl-10 td:first-child{padding-left:140px}.est-row-lvl-11 td:first-child{padding-left:155px}.est-row-lvl-12 td:first-child{padding-left:170px}.est-row-lvl-13 td:first-child{padding-left:185px}.est-row-lvl-14 td:first-child{padding-left:200px}.est-row-lvl-15 td:first-child{padding-left:215px}.est-row-lvl-16 td:first-child{padding-left:230px}.est-row-lvl-17 td:first-child{padding-left:245px}.est-row-lvl-18 td:first-child{padding-left:260px}.est-row-lvl-19 td:first-child{padding-left:275px}.est-row-lvl-20 td:first-child{padding-left:290px}.est-row-lvl-21 td:first-child{padding-left:305px}.est-row-lvl-22 td:first-child{padding-left:320px}.est-row-lvl-23 td:first-child{padding-left:335px}.est-row-lvl-24 td:first-child{padding-left:350px}.est-row-lvl-25 td:first-child{padding-left:365px}.est-row-lvl-26 td:first-child{padding-left:380px}.est-row-lvl-27 td:first-child{padding-left:395px}.est-row-lvl-28 td:first-child{padding-left:410px}.est-row-lvl-29 td:first-child{padding-left:425px}.est-row-lvl-30 td:first-child{padding-left:440px}.est-row-lvl-31 td:first-child{padding-left:455px}.est-row-lvl-32 td:first-child{padding-left:470px}.est-row-lvl-33 td:first-child{padding-left:485px}.est-row-lvl-34 td:first-child{padding-left:500px}.est-row-lvl-35 td:first-child{padding-left:515px}.est-row-lvl-36 td:first-child{padding-left:530px}.est-row-lvl-37 td:first-child{padding-left:545px}.est-row-lvl-38 td:first-child{padding-left:560px}.est-row-lvl-39 td:first-child{padding-left:575px}.est-row-lvl-40 td:first-child{padding-left:590px}.est-row-lvl-41 td:first-child{padding-left:605px}.est-row-lvl-42 td:first-child{padding-left:620px}.est-row-lvl-43 td:first-child{padding-left:635px}.est-row-lvl-44 td:first-child{padding-left:650px}.est-row-lvl-45 td:first-child{padding-left:665px}.est-row-lvl-46 td:first-child{padding-left:680px}.est-row-lvl-47 td:first-child{padding-left:695px}.est-row-lvl-48 td:first-child{padding-left:710px}.est-row-lvl-49 td:first-child{padding-left:725px}.est-row-lvl-50 td:first-child{padding-left:740px}.est-row-lvl-51 td:first-child{padding-left:755px}.est-row-lvl-52 td:first-child{padding-left:770px}.est-row-lvl-53 td:first-child{padding-left:785px}.est-row-lvl-54 td:first-child{padding-left:800px}.est-row-lvl-55 td:first-child{padding-left:815px}.est-row-lvl-56 td:first-child{padding-left:830px}.est-row-lvl-57 td:first-child{padding-left:845px}.est-row-lvl-58 td:first-child{padding-left:860px}.est-row-lvl-59 td:first-child{padding-left:875px}.est-row-lvl-60 td:first-child{padding-left:890px}.est-row-lvl-61 td:first-child{padding-left:905px}.est-row-lvl-62 td:first-child{padding-left:920px}.est-row-lvl-63 td:first-child{padding-left:935px}.est-row-lvl-64 td:first-child{padding-left:950px}.est-row-lvl-65 td:first-child{padding-left:965px}.est-row-lvl-66 td:first-child{padding-left:980px}.est-row-lvl-67 td:first-child{padding-left:995px}.est-row-lvl-68 td:first-child{padding-left:1010px}.est-row-lvl-69 td:first-child{padding-left:1025px}.est-row-lvl-70 td:first-child{padding-left:1040px}.est-row-lvl-71 td:first-child{padding-left:1055px}.est-row-lvl-72 td:first-child{padding-left:1070px}.est-row-lvl-73 td:first-child{padding-left:1085px}.est-row-lvl-74 td:first-child{padding-left:1100px}.est-row-lvl-75 td:first-child{padding-left:1115px}.est-row-lvl-76 td:first-child{padding-left:1130px}.est-row-lvl-77 td:first-child{padding-left:1145px}.est-row-lvl-78 td:first-child{padding-left:1160px}.est-row-lvl-79 td:first-child{padding-left:1175px}.est-row-lvl-80 td:first-child{padding-left:1190px}.est-row-lvl-81 td:first-child{padding-left:1205px}.est-row-lvl-82 td:first-child{padding-left:1220px}.est-row-lvl-83 td:first-child{padding-left:1235px}.est-row-lvl-84 td:first-child{padding-left:1250px}.est-row-lvl-85 td:first-child{padding-left:1265px}.est-row-lvl-86 td:first-child{padding-left:1280px}.est-row-lvl-87 td:first-child{padding-left:1295px}.est-row-lvl-88 td:first-child{padding-left:1310px}.est-row-lvl-89 td:first-child{padding-left:1325px}.est-row-lvl-90 td:first-child{padding-left:1340px}.est-row-lvl-91 td:first-child{padding-left:1355px}.est-row-lvl-92 td:first-child{padding-left:1370px}.est-row-lvl-93 td:first-child{padding-left:1385px}.est-row-lvl-94 td:first-child{padding-left:1400px}.est-row-lvl-95 td:first-child{padding-left:1415px}.est-row-lvl-96 td:first-child{padding-left:1430px}.est-row-lvl-97 td:first-child{padding-left:1445px}.est-row-lvl-98 td:first-child{padding-left:1460px}.est-row-lvl-99 td:first-child{padding-left:1475px}.est-right-10{right:10px}.est-hidden{visibility:hidden}"]
                 },] }
     ];