@esfaenza/es-table 11.2.30 → 11.2.31

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

@@ -1918,10 +1918,12 @@
     /** Classe contenente la gestione delle importazioni */
     var ExportHandler = /** @class */ (function () {
         /** @ignore Costruttore*/
-        function ExportHandler(est, expExts, msgExts) {
+        function ExportHandler(est, expExts, msgExts, utiExts, dateExts) {
             this.est = est;
             this.expExts = expExts;
             this.msgExts = msgExts;
+            this.utiExts = utiExts;
+            this.dateExts = dateExts;
         }
         /**
          * Effettua l'esportazione dei dati
@@ -1937,16 +1939,94 @@
             else
                 this.est.ExportFunction(function (data, cancel) {
                     if (cancel === void 0) { cancel = false; }
-                    if (cancel)
-                        return;
-                    if (data.length == 0) {
-                        _this.msgExts.simpleWarning(_this.est.lc.loc("Cannot export an empty dataset"));
-                        return;
+                    return __awaiter(_this, void 0, void 0, function () {
+                        var _b, _a_1;
+                        var _this = this;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    if (cancel)
+                                        return [2 /*return*/];
+                                    if (data.length == 0) {
+                                        this.msgExts.simpleWarning(this.est.lc.loc("Cannot export an empty dataset"));
+                                        return [2 /*return*/];
+                                    }
+                                    this.setupExport(data);
+                                    if (!(format == "CSV")) return [3 /*break*/, 1];
+                                    this.est.cdr.detectChanges();
+                                    setTimeout(function () { _this.est.exportDownloader.nativeElement.click(); });
+                                    return [3 /*break*/, 7];
+                                case 1:
+                                    if (!(format == "XLSX")) return [3 /*break*/, 6];
+                                    if (this.ExcelJS != null) {
+                                        this.exportExcel();
+                                        return [2 /*return*/];
+                                    }
+                                    _c.label = 2;
+                                case 2:
+                                    _c.trys.push([2, 4, , 5]);
+                                    _b = this;
+                                    return [4 /*yield*/, import('exceljs')];
+                                case 3:
+                                    _b.ExcelJS = _c.sent();
+                                    this.exportExcel();
+                                    return [3 /*break*/, 5];
+                                case 4:
+                                    _a_1 = _c.sent();
+                                    throw "Impossibile caricare la libreria per l'esportazione in Excel";
+                                case 5: return [3 /*break*/, 7];
+                                case 6: throw "Formato di esportazione non riconosciuto";
+                                case 7: return [2 /*return*/];
+                            }
+                        });
+                    });
+                });
+        };
+        /** Effettua l'esportazione del file Excel basandosi sul modulo **ExcelJS**, sugli header **this.est.headers** e sui dati **this.est.data** */
+        ExportHandler.prototype.exportExcel = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var iFix, workbook, sheet, header, i, h, i, row, item, i_1, h, cell, val, buffer, blob, objectUrl, fn;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            iFix = 1;
+                            workbook = new this.ExcelJS.Workbook();
+                            workbook.creator = "Ema's big Es-Table";
+                            workbook.created = new Date();
+                            sheet = workbook.addWorksheet('Data');
+                            header = sheet.getRow(1);
+                            header.font = { bold: true };
+                            this.est.headers = this.est.headers.sort(function (a, b) { return a.order - b.order; });
+                            for (i = 0; i < this.est.headers.length; i++) {
+                                h = this.est.headers[i];
+                                header.getCell(i + iFix).value = h.label;
+                            }
+                            for (i = 0; i < this.est.data.length; i++) {
+                                row = sheet.getRow(i + iFix + 1);
+                                item = this.est.data[i];
+                                for (i_1 = 0; i_1 < this.est.headers.length; i_1++) {
+                                    h = this.est.headers[i_1];
+                                    cell = row.getCell(i_1 + 1);
+                                    val = item[h.key];
+                                    if (h.type == 'date')
+                                        cell.value = this.dateExts.getDateConvertion(val).toDate();
+                                    else if (h.type == 'number')
+                                        cell.value = parseFloat(val.replace(',', '.'));
+                                    else
+                                        cell.value = val;
+                                }
+                            }
+                            return [4 /*yield*/, workbook.xlsx.writeBuffer()];
+                        case 1:
+                            buffer = _b.sent();
+                            blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;" });
+                            objectUrl = window.URL.createObjectURL(blob);
+                            fn = this.est.ExportFileName;
+                            this.utiExts.fileDownload(objectUrl, fn.endsWith('.csv') ? fn.replace('.csv', '.xlsx') : fn.endsWith('.xlsx') ? fn : fn + ".xlsx");
+                            return [2 /*return*/];
                     }
-                    _this.setupExport(data);
-                    _this.est.cdr.detectChanges();
-                    setTimeout(function () { _this.est.exportDownloader.nativeElement.click(); });
                 });
+            });
         };
         /**
          * Metodo che effettivamente genera gli header e i dati per l'esportazione con **ngx-csv**
@@ -1955,7 +2035,7 @@
          */
         ExportHandler.prototype.setupExport = function (items) {
             var drcd = this.est.DynamicRowColumnsDefinition;
-            this.est.headers = drcd && drcd.length > 0 ? this.expExts.setupForGenericExport(items, drcd.map(function (t) { return { label: t.description, key: t.propertyName, order: t.columnOrder }; })) : this.expExts.setupForExport(items);
+            this.est.headers = drcd && drcd.length > 0 ? this.expExts.setupForGenericExport(items, drcd.map(function (t) { return { label: t.description, key: t.propertyName, order: t.columnOrder, type: 'string' }; })) : this.expExts.setupForExport(items);
             this.est.data = items;
         };
         return ExportHandler;
@@ -3867,7 +3947,7 @@
             this.propagateChange = function (_) { };
             /** Funzione di trackby per il body che dovrebbe evitare il 90% delle change detection */
             this.bodyTrackBy = function (index, item) { return item._hash; };
-            this.export_H = new ExportHandler(this, this.expExts, this.msgExts);
+            this.export_H = new ExportHandler(this, this.expExts, this.msgExts, this.utiExts, this.dateExts);
             this.rowGrouping_H = new RowGroupingHandler(this, this.utilities_H, this.dateExts);
             this.columnMetadata_H = new ColumnMetadataHandler(this, this.utilities_H, this.utiExts, this.prefService, this.rowGrouping_H);
             this.dynamicMode_H = new DynamicModeHandler(this);
@@ -4769,7 +4849,7 @@
                     viewProviders: [{ provide: localizations.LocalizationService, useClass: EsTableLoc }],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<!--\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=\"headerRef\"></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 && bodyRef\">\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=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (!reportMode && (View?.selection || arraymodeSelection).all)\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{ContainerClass}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10\"  [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 || PagingStyle != 'bottom'\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden-view]=\"!canSelectAll && (reportMode || !(View?.selection || arraymodeSelection).all) && PagingStyle == 'bottom'\">\r\n                        <p class=\"est-hidden-view app-margin-bottom-0\">\u00A7</p>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <ng-container *ngIf=\"RowThGroups\">\r\n                    <tr *ngFor=\"let level of RowThGroups\">\r\n                        <th *ngFor=\"let cell of level\" [attr.colspan]=\"cell.Span\" \r\n                            [class.est-pinned-header]=\"cell.Pinned\" [class.est-col-min]=\"cell.Pinned\"\r\n                            [class.est-ltab-border]=\"cell.Borders\" [class.est-rtab-border]=\"cell.Borders\"\r\n                            class=\"est-text-center\">\r\n                            <ng-container *ngIf=\"cell.Pinned; Else: cell.Template\">\r\n                                <div class=\"est-pinned-border est-cell-group-padding\"></div>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!RowThGroups\">\r\n                    <tr *ngIf=\"HasHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"headerGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n    \r\n                    <!-- Blocco header group secondario -->\r\n                    <tr *ngIf=\"HasSecondaryHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"secondaryHeaderGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection && !HasPinnedColumns\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode -->\r\n                    <ng-container *ngIf=\"(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=\"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) && DynamicRowColumnsDefinition\">\r\n                            <th *ngFor=\"let operation of DynamicOperations\" class=\"est-col-min est-no-side-padding\"></th>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition\">\r\n                                <ng-container *ngIf=\"rowHeader.visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" 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\" 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\">\r\n                            <th *ngIf=\"HasPinnedColumns\" class=\"est-pinned-header est-col-min\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-simple-border-bottom\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\" [style.width.px]=\"20\">\r\n                                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                        <th *ngIf=\"rowHeader && rowHeader.Visible && rowHeader.Pinned\" [style.width.px]=\"rowHeader.PinnedWidth\" es-th=\"{{rowHeader.ID}}\" \r\n                                            class=\"{{rowHeader.Class || ''}}\" \r\n                                            [class.est-pinned-internal-header]=\"true\" \r\n                                            [class.est-no-border]=\"true\" \r\n                                            [class.est-nowrap]=\"!rowHeader.Wrap\" \r\n                                            [Pinned]=\"true\" [Fixed]=\"rowHeader.Fixed\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                            <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container></ng-container>\r\n                                            <span *ngIf=\"!rowHeader.Template\">{{rowHeader.Content}}</span>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </th>\r\n                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class || ''}}\" [class.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                    <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></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                    <!--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=\"est-no-selection est-pointer est-nowrap\" (click)=\"reportMode_H.setupNextOrderAndSearch(clm)\">\r\n                            {{clm.description}}<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.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                        <!-- 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 est-fs-18 est-pointer est-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right est-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"HiddenColumns || ColumnsOrdering\" (click)=\"columnMetadata_H.resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"export_H.tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"export_H.tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            \r\n            <!-- Valido per modalit\u00E0 View o Array. Se sono in report mode il body \u00E8 creato in altro modo -->\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=\"est-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\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=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-right\" *ngIf=\"PagerOptions.ShowCount || PagerOptions.ShowPagingOptions\">\r\n            <div class=\"est-mt-min-5\" *ngIf=\"PagerOptions.ShowPaging\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [GroupMode]=\"PagerOptions.Searches == 'groups'\" [AllSearch]=\"AllSearch\" [View]=\"PagerOptions.View\" (pagingSelected)=\"onItemsPerPageChanged($event);\"></app-paging>\r\n            </div>\r\n            <div *ngIf=\"reportMode && !PagerOptions.ShowPaging\"><em>{{'Paging options are not available for this report' | localize: lc}}</em></div>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <div class=\"est-flex\" [class.est-margin-left-50]=\"options.Margin\">\r\n        <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n        <div *ngIf=\"options.Array\" class=\"est-inline\"><a *ngFor=\"let p of options.Array\" class=\"btn est-page-sel {{p.cssClass}}\" (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a></div>\r\n        <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index; trackBy: bodyTrackBy\">\r\n        <tr *ngIf=\"item._visible || (!Hierarchy && !ArrayGrouping)\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\" \r\n            [class.est-pointer]=\"!item.locked\" \r\n            [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"(!item.locked && !item._sep && !item._group && handleClick($event, item)) || item._group && handleGroupClick(item)\">\r\n\r\n            <td *ngIf=\"!item.locked && !item._sep && !HasPinnedColumns\">\r\n                <input  type=\"checkbox\" \r\n                        [disabled]=\"templateOptions.selDisabled\" \r\n                        [class.est-pointer]=\"!item.locked\"\r\n                        [(ngModel)]=\"item._selected\" name=\"check{{i}}\" \r\n                        (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n            </td>\r\n            <td *ngIf=\"(item.locked || item._sep) && !HasPinnedColumns\"></td>\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container> </ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #TBody>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even;\">\r\n        <tr *ngIf=\"item._visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            (click)=\"item._group && handleGroupClick(item)\">\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #groupPager let-item>\r\n    <td class=\"est-pinned-body \" *ngIf=\"HasPinnedColumns\"><div class=\"est-pinned-border est-cell-group-padding\"></div></td>\r\n    <td *ngIf=\"item._grouplevel > 1\" [attr.colspan]=\"item._grouplevel-1\"></td>\r\n    <td [attr.colspan]=\"Columns.VisibleUnpinned - (item._grouplevel > 0 ? item._grouplevel - 1 : 0)\">\r\n        <div class=\"est-rg-sep-flex-right\" *ngIf=\"RowGroupingPagingStyle == 'right'\">\r\n            <div class=\"est-rg-page\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n            <div class=\"est-rg-ipp\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><app-paging [CountLabel]=\"CountLabel\" [AllSearch]=\"AllSearch\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n        </div>\r\n\r\n        <div class=\"est-rg-sep-flex-left\" *ngIf=\"RowGroupingPagingStyle == 'left'\">\r\n            <div class=\"est-rg-ipp\"><app-paging [AllSearch]=\"AllSearch\" [CountLabel]=\"CountLabel\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n            <div class=\"est-rg-page\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle definite in maniera dinamica dal modello -->\r\n<ng-template #dynamicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !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}} est-pointer\" (click)=\"dynamicOperation(item, operation.id)\">{{operation.text}}</span></td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"operation.conditionField && (item.properties[operation.conditionField] != operation.conditionValue)\">\r\n                <td class=\"est-col-min est-no-side-padding\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        <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\" [Context]=\"item._hash\">\r\n                    <a [routerLink]=\"dynamicMode_H.generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"est-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.propertyName) || defaultEsTd; context: { $implicit: item.properties[rowItem.propertyName], rowItem : rowItem, item : item }\"> </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-value let-rowItem='rowItem' let-item='item'>\r\n    <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\"\r\n        [class.est-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\"\r\n        (click)=\"cellClicked(rowItem.propertyName, item) && !CellActionPropagates && $event.stopPropagation()\"\r\n        [Internal]=\"false\" [Context]=\"item._hash\">\r\n        {{value}}\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-item let-opt=\"templateOptions\">\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n\r\n        <td *ngIf=\"HasPinnedColumns\" class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\" [style.width.px]=\"20\">\r\n                    <input type=\"checkbox\" [disabled]=\"opt.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{item._hash}}\" (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n                </td>\r\n                <td class=\"est-no-border est-col-min\" *ngIf=\"(item.locked || item._sep) && Selection\" [style.width.px]=\"20\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n                    <td *ngIf=\"rowItem && rowItem.Pinned\" [style.width.px]=\"rowItem.PinnedWidth\" es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-no-border]=\"true\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem && !rowItem.Pinned\">\r\n\r\n                <!-- Casistica senza bodyRef, quindi con direttive per i td -->\r\n                <ng-container *ngIf=\"!bodyRef && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-ltab-border]=\"rowItem.LeftBorder\" [class.est-rtab-border]=\"rowItem.RightBorder\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"est-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (NON RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [class.est-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                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\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<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"hierarchyMode_H.collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"hierarchyMode_H.expandParent(item[this.OwnKey])\"></span>\r\n    &nbsp;\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove est-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"est-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" cdkDrag>\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header est-pointer\" cdkDragHandle>\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info est-padding-10 est-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm est-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"columnMetadata_H.globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <!-- <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th> -->\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                                <!-- Pinner -->\r\n                                <th *ngIf=\"DirectivesBased\" class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody \r\n                            cdkDropList \r\n                            [cdkDropListData]=\"TMPColumnsList\" \r\n                            (cdkDropListDropped)=\"columnMetadata_H.columnReordered($event)\" \r\n                            [cdkDropListSortPredicate]=\"columnMetadata_H.sortPredicate.bind(this.columnMetadata_H)\"\r\n                            class=\"est-dropbox\">\r\n\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" \r\n                                class=\"est-pointer est-droplist\" \r\n                                [class.est-white-selected]=\"lastSelectedItemID == item.id\" \r\n                                [class.est-no-selection]=\"!item.visible\"\r\n                                cdkDrag\r\n                                [cdkDragData]=\"item\"\r\n                                [cdkDragDisabled]=\"!ColumnsOrdering || item.fixed || item.pinned\">\r\n\r\n                                <td *ngIf=\"HiddenColumns\">\r\n                                    <input type=\"checkbox\" [class.est-hidden-view]=\"item.fixed\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"columnMetadata_H.updateGlobalColVisCheck();\" />\r\n                                </td>\r\n                                <!-- <td class=\"est-nowrap\" *ngIf=\"ColumnsOrdering\">\r\n                                    <span class=\"fa fa-arrow-up\" [class.est-hidden-view]=\"item.fixed || item.pinned\" (click)=\"lastSelectedItemID = item.id; i != 0 && !item.fixed && columnMetadata_H.sendUp(item); $event.stopPropagation();\"></span>\r\n                                    <span class=\"fa fa-arrow-down\" [class.est-hidden-view]=\"item.fixed || item.pinned\" (click)=\"lastSelectedItemID = item.id; !last && !item.fixed && columnMetadata_H.sendDown(item); $event.stopPropagation();\"></span>\r\n                                </td> -->\r\n                                <td class=\"est-nowrap drag-visible\" (click)=\"columnMetadata_H.columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\r\n                                        <!-- Padri -->\r\n                                        <span *ngIf=\"item.parentTemplates && item.parentTemplates.length > 0\" class=\"est-fw-bold est-fs-13\">\r\n                                            (&nbsp;\r\n                                            <ng-container *ngFor=\"let parent of item.parentTemplates; let last=last\">\r\n                                                <ng-container *ngTemplateOutlet=\"parent\"></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\"></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\"><span *ngIf=\"!item.fixed\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"columnMetadata_H.pinOrUnpinColumn(item)\"></span></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary est-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
+                    template: "<!-- Patacchino di autoaggiornamento -->\r\n<div class=\"w-100\" *ngIf=\"AutoUpdate\">\r\n    <div class=\"pull-right\">\r\n        {{'Update every' | localize : lc}}&nbsp;<input [readonly]=\"autoUpdate\" maxlength=\"3\" class=\"form-control est-custom-input\" type=\"text\" [(ngModel)]=\"seconds\" />&nbsp;{{'second/s' | localize : lc}}\r\n    </div>\r\n    <div class=\"pull-right m-t-2\">\r\n        <label class=\"est-switch\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"autoUpdate\" (ngModelChange)=\"autoUpdateChanged();\" />\r\n            <div class=\"est-slider round\"></div>\r\n        </label>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<!--\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=\"headerRef\"></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 && bodyRef\">\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=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</div>\r\n\r\n<div *ngIf=\"View\" class=\"est-relative\">\r\n    <div *ngIf=\"FirstBind && ShowLoadingOnBootstrap\" class=\"est-loading-box\">\r\n        <div class=\"est-loading-content\">\r\n            <span class=\"fa fa-spinner fa-spin\"></span>&nbsp;{{'Performing Table bootstrap' | localize: lc}}...\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"est-top-pager\" *ngIf=\"PagingStyle == 'both' || PagingStyle == 'top'\">\r\n        <ng-container *ngTemplateOutlet=\"pagingElement\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"est-top-allselect\" *ngIf=\"canSelectAll || (!reportMode && (View?.selection || arraymodeSelection).all)\">\r\n        <span>{{ (selectedObjects == -1 ? ('All the' | localize : lc) : ((selectedObjects || 0) | number : '0.0-0' : locale)) + ' ' + ((selectedObjects == 1 ? 'Object Selected' : 'Objects Selected') | localize : lc) }}</span>&nbsp;\r\n        <span class=\"est-link est-inline\" (click)=\"selection_H.selectAllOrResetSelection()\">{{ (View?.selection || arraymodeSelection).all ? ('Reset Selection' | localize : lc) : ('Select Everything' | localize : lc)}}</span>\r\n    </div>\r\n\r\n    <div class=\"table-responsive datatable {{ContainerClass}}\" [class.est-scrollable]=\"UseEndlessscroll\" (scroll)=\"UseEndlessscroll && onScroll($event)\" [style.max-height.px]=\"MaxHeight\">\r\n        <table class=\"{{ TableClass }} est-margin-bottom-10\"  [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 || PagingStyle != 'bottom'\">\r\n                    <th class=\"est-no-selection\" [attr.colspan]=\"Columns.Global\" [class.est-hidden-view]=\"!canSelectAll && (reportMode || !(View?.selection || arraymodeSelection).all) && PagingStyle == 'bottom'\">\r\n                        <p class=\"est-hidden-view app-margin-bottom-0\">\u00A7</p>\r\n                    </th>\r\n                </tr>\r\n\r\n                <!-- Blocco header group -->\r\n                <ng-container *ngIf=\"RowThGroups\">\r\n                    <tr *ngFor=\"let level of RowThGroups\">\r\n                        <th *ngFor=\"let cell of level\" [attr.colspan]=\"cell.Span\" \r\n                            [class.est-pinned-header]=\"cell.Pinned\" [class.est-col-min]=\"cell.Pinned\"\r\n                            [class.est-ltab-border]=\"cell.Borders\" [class.est-rtab-border]=\"cell.Borders\"\r\n                            class=\"est-text-center\">\r\n                            <ng-container *ngIf=\"cell.Pinned; Else: cell.Template\">\r\n                                <div class=\"est-pinned-border est-cell-group-padding\"></div>\r\n                            </ng-container>\r\n                        </th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!RowThGroups\">\r\n                    <tr *ngIf=\"HasHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"headerGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n    \r\n                    <!-- Blocco header group secondario -->\r\n                    <tr *ngIf=\"HasSecondaryHeaderGroup\">\r\n                        <ng-container *ngTemplateOutlet=\"secondaryHeaderGroupRef\"></ng-container>\r\n                        <th *ngIf=\"Export\"></th>\r\n                    </tr>\r\n                </ng-container>\r\n\r\n                <!-- Blocco effettivo degli header -->\r\n                <tr>\r\n                    <!-- Aggiungo una checkbox se la selezione \u00E8 attiva -->\r\n                    <th class=\"est-col-min\" *ngIf=\"Selection && !HasPinnedColumns\">\r\n                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                    </th>\r\n\r\n                    <!-- Header che valgono per view mode e array mode -->\r\n                    <ng-container *ngIf=\"(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=\"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) && DynamicRowColumnsDefinition\">\r\n                            <th *ngFor=\"let operation of DynamicOperations\" class=\"est-col-min est-no-side-padding\"></th>\r\n                            \r\n                            <ng-container *ngFor=\"let rowHeader of DynamicRowColumnsDefinition\">\r\n                                <ng-container *ngIf=\"rowHeader.visible\">\r\n                                    <th *ngIf=\"OrderByColumn\" 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\" 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\">\r\n                            <th *ngIf=\"HasPinnedColumns\" class=\"est-pinned-header est-col-min\">\r\n                                <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border est-simple-border-bottom\">\r\n                                    <th class=\"est-col-min est-no-border\" *ngIf=\"Selection\" [style.width.px]=\"20\">\r\n                                        <input *ngIf=\"!SingleSelection\" class=\"est-pointer\" type=\"checkbox\" [disabled]=\"SelectionDisabled\" [(ngModel)]=\"globalCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"globalCheckChanged();\">\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                        <th *ngIf=\"rowHeader && rowHeader.Visible && rowHeader.Pinned\" [style.width.px]=\"rowHeader.PinnedWidth\" es-th=\"{{rowHeader.ID}}\" \r\n                                            class=\"{{rowHeader.Class || ''}}\" \r\n                                            [class.est-pinned-internal-header]=\"true\" \r\n                                            [class.est-no-border]=\"true\" \r\n                                            [class.est-nowrap]=\"!rowHeader.Wrap\" \r\n                                            [Pinned]=\"true\" [Fixed]=\"rowHeader.Fixed\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onUnpinning)=\"columnMetadata_H.unpinColumn($event)\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                            <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></ng-container></ng-container>\r\n                                            <span *ngIf=\"!rowHeader.Template\">{{rowHeader.Content}}</span>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </th>\r\n                            <ng-container *ngFor=\"let rowHeader of RowTHs\">\r\n                                <th *ngIf=\"rowHeader && rowHeader.Visible && !rowHeader.Pinned\" es-th=\"{{rowHeader.ID}}\" class=\"{{rowHeader.Class || ''}}\" [class.est-ltab-border]=\"rowHeader.LeftBorder\" [class.est-rtab-border]=\"rowHeader.RightBorder\" [class.est-nowrap]=\"!rowHeader.Wrap\" [Order]=\"rowHeader.Order\" [Resizable]=\"ColumnsResizable\" [Orderable]=\"rowHeader.Orderable\" [OrderBy]=\"OrderByColumn\" [SearchInProgress]=\"!!researchInProgress\" (onOrderChange)=\"OrderByColumn && thOrderChanged(rowHeader.ID, $event)\">\r\n                                    <ng-container *ngIf=\"rowHeader.Template\"><ng-container *ngTemplateOutlet=\"rowHeader.Template;\"></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                    <!--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=\"est-no-selection est-pointer est-nowrap\" (click)=\"reportMode_H.setupNextOrderAndSearch(clm)\">\r\n                            {{clm.description}}<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.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                        <!-- Link nascosto che serve a scaricare il file -->\r\n                        <a *ngIf=\"headers\" hidden #exportDownloader csvLink [data]=\"data\" [headers]=\"headers\" [delimiter]=\"';'\" [filename]=\"ExportFileName.endsWith('.xlsx') ? ExportFileName.replace('.xlsx', '.csv') : ExportFileName.endsWith('.csv') ? ExportFileName : ExportFileName + '.csv'\"></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 est-fs-18 est-pointer est-padding-3\"></span>\r\n\r\n                            <div *dropdownMenu class=\"dropdown-menu dropdown-menu-right est-bring-to-front-strong\">\r\n                                <div class=\"est-pointer\">\r\n                                    <a class=\"dropdown-item\" *ngIf=\"HiddenColumns || ColumnsOrdering\" (click)=\"columnMetadata_H.resetColumnVisSelection(); changeColumnVisibilityModal.show();\">\r\n                                        <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                                            {{'Columns Visibility' | localize : lc}}\r\n                                        </ng-container>\r\n                                        <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                                            {{'Columns Visibility and Order' | localize : lc}}\r\n                                        </ng-container>\r\n                                    </a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && CSVExport\" (click)=\"export_H.tryExport('CSV')\">{{'Export View' | localize : lc}} (CSV)</a>\r\n                                    <a class=\"dropdown-item\" *ngIf=\"Export && XLSXExport\" (click)=\"export_H.tryExport('XLSX')\">{{'Export View' | localize : lc}} (XLSX)</a>\r\n                                    <a class=\"dropdown-item\" *ngFor=\"let option of CornerMenuOptions\" (click)=\"cornerActionClicked(option.id)\">{{option.description}}</a>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </tr>\r\n            </thead>\r\n            \r\n            <!-- Valido per modalit\u00E0 View o Array. Se sono in report mode il body \u00E8 creato in altro modo -->\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=\"est-sticky-last-column{{even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n                </tr>\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=\"(!reportMode || View?.pagingavailable) && (!arrayMode || SearchView)\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: addToPage.bind(this), GTP: goToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"arrayMode && UseArrayModePaging && !SearchView\">\r\n                <ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { Margin: true, ATP: arrayAddToPage.bind(this), GTP: arrayGoToPage.bind(this), Array: arrayPulsanti }}\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n        <!-- Paginatore dove appare la count e le opzioni di paginazione -->\r\n        <div class=\"pull-right\" *ngIf=\"PagerOptions.ShowCount || PagerOptions.ShowPagingOptions\">\r\n            <div class=\"est-mt-min-5\" *ngIf=\"PagerOptions.ShowPaging\">\r\n                <app-paging *ngIf=\"!PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [WarnOnAll]=\"false\" [CurrentPageSize]=\"ArraymodeItemsPerPage\" (pagingSelected)=\"items_H.refreshPaging($event)\"></app-paging>\r\n                <app-paging *ngIf=\"PagerOptions.UsesView\" [CountLabel]=\"CountLabel\" [ShowPaging]=\"PagerOptions.ShowPagingOptions\" [ShowCount]=\"PagerOptions.ShowCount\" [PagerCount]=\"PagerOptions.PagerCount\" [GroupMode]=\"PagerOptions.Searches == 'groups'\" [AllSearch]=\"AllSearch\" [View]=\"PagerOptions.View\" (pagingSelected)=\"onItemsPerPageChanged($event);\"></app-paging>\r\n            </div>\r\n            <div *ngIf=\"reportMode && !PagerOptions.ShowPaging\"><em>{{'Paging options are not available for this report' | localize: lc}}</em></div>\r\n        </div>\r\n        <div class=\"clearfix\"></div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Template che contiene i pulsanti per cambiare pagina -->\r\n<ng-template #pagingButtons let-options>\r\n    <div class=\"est-flex\" [class.est-margin-left-50]=\"options.Margin\">\r\n        <a class=\"btn\" class=\"est-page-prev app-pointer\" (click)=\"options.ATP(-1, options.separator)\"><span class=\"fa fa-chevron-left\"></span></a>\r\n        <div *ngIf=\"options.Array\" class=\"est-inline\"><a *ngFor=\"let p of options.Array\" class=\"btn est-page-sel {{p.cssClass}}\" (click)=\"options.GTP(p.val, options.separator)\">{{p.val}}</a></div>\r\n        <a class=\"btn\" class=\"est-page-next app-pointer\" (click)=\"options.ATP(1, options.separator)\"><span class=\"fa fa-chevron-right\"></span></a>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Questi due template rappresentano effettivamente il body della tabella. essendo il tr l'unica cosa che davvero cambia, il resto \u00E8 templatizzato -->\r\n<ng-template #TBodySelection let-templateOptions>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even; let i=index; trackBy: bodyTrackBy\">\r\n        <tr *ngIf=\"item._visible || (!Hierarchy && !ArrayGrouping)\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\" \r\n            [class.est-pointer]=\"!item.locked\" \r\n            [class.est-white-selected]=\"item._selected && !item.locked\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            [contextMenu]=\"!item.locked ? (ContextMenu || emptyMenu) : emptyMenu\" [contextMenuSubject]=\"item\"\r\n            (click)=\"(!item.locked && !item._sep && !item._group && handleClick($event, item)) || item._group && handleGroupClick(item)\">\r\n\r\n            <td *ngIf=\"!item.locked && !item._sep && !HasPinnedColumns\">\r\n                <input  type=\"checkbox\" \r\n                        [disabled]=\"templateOptions.selDisabled\" \r\n                        [class.est-pointer]=\"!item.locked\"\r\n                        [(ngModel)]=\"item._selected\" name=\"check{{i}}\" \r\n                        (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n            </td>\r\n            <td *ngIf=\"(item.locked || item._sep) && !HasPinnedColumns\"></td>\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container> </ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item, templateOptions: templateOptions }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #TBody>\r\n    <ng-container *ngFor=\"let item of boundSource; let even = even;\">\r\n        <tr *ngIf=\"item._visible || !Hierarchy\" \r\n            [class]=\"item._rowClass ? item._rowClass : ''\" \r\n            [class.est-line-through]=\"item.removed || item.deleted\"\r\n            [class.est-rg]=\"item._group\"\r\n            [class.est-rg-sep]=\"item._sep\"\r\n            (click)=\"item._group && handleGroupClick(item)\">\r\n\r\n            <ng-container *ngIf=\"item._sep\"><ng-container *ngTemplateOutlet=\"groupPager; context: { $implicit: item }\"></ng-container></ng-container>\r\n\r\n            <ng-container *ngIf=\"!item._sep\">\r\n                <ng-container *ngTemplateOutlet=\"basicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"dynamicColumns; context: { $implicit: item }\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"customCells; context: { $implicit: item }\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"bodyDeleteAndExport; context: { $implicit: { even: even, item: item }}\"></ng-container>\r\n        </tr>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #groupPager let-item>\r\n    <td class=\"est-pinned-body \" *ngIf=\"HasPinnedColumns\"><div class=\"est-pinned-border est-cell-group-padding\"></div></td>\r\n    <td *ngIf=\"item._grouplevel > 1\" [attr.colspan]=\"item._grouplevel-1\"></td>\r\n    <td [attr.colspan]=\"Columns.VisibleUnpinned - (item._grouplevel > 0 ? item._grouplevel - 1 : 0)\">\r\n        <div class=\"est-rg-sep-flex-right\" *ngIf=\"RowGroupingPagingStyle == 'right'\">\r\n            <div class=\"est-rg-page\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n            <div class=\"est-rg-ipp\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><app-paging [CountLabel]=\"CountLabel\" [AllSearch]=\"AllSearch\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n        </div>\r\n\r\n        <div class=\"est-rg-sep-flex-left\" *ngIf=\"RowGroupingPagingStyle == 'left'\">\r\n            <div class=\"est-rg-ipp\"><app-paging [AllSearch]=\"AllSearch\" [CountLabel]=\"CountLabel\" [GroupMode]=\"item.searches == 'groups'\" [PagerCount]=\"item.searches == 'groups' ? item.view.groupcount : item.view.objectcount\" [View]=\"item.view\" (pagingSelected)=\"onGroupItemsPerPageChanged(item, $event);\"></app-paging></div>\r\n            <div class=\"est-rg-page\" *ngIf=\"(item.searches == 'groups' ? item.view.groupcount : item.view.objectcount) > 10\"><ng-container *ngTemplateOutlet=\"pagingButtons; context: { $implicit: { separator: item, ATP: addToPageGroup.bind(this), GTP: goToPageGroup.bind(this), Array: item.buttons }}\"></ng-container></div>\r\n        </div>\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle semplici, con header e body scritti a manazza -->\r\n<ng-template #basicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !RowTDs) && !DynamicRowColumnsDefinition\">\r\n        <ng-container *ngTemplateOutlet=\"bodyRef; context : {$implicit: item}\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale su tabelle definite in maniera dinamica dal modello -->\r\n<ng-template #dynamicColumns let-item>\r\n    <ng-container *ngIf=\"(!UseCustomCells || !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}} est-pointer\" (click)=\"dynamicOperation(item, operation.id)\">{{operation.text}}</span></td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"operation.conditionField && (item.properties[operation.conditionField] != operation.conditionValue)\">\r\n                <td class=\"est-col-min est-no-side-padding\"></td>\r\n            </ng-container>\r\n        </ng-container>\r\n        <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\" [Context]=\"item._hash\">\r\n                    <a [routerLink]=\"dynamicMode_H.generateRouterLink(rowItem.routePath, rowItem.routeParameterProperties, item)\" class=\"est-link\" [innerHTML]=\"item.properties[rowItem.propertyName]\"></a>\r\n                </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!rowItem.routePath && rowItem.visible\">\r\n                <ng-container *ngTemplateOutlet=\"findEsTd(rowItem.propertyName) || defaultEsTd; context: { $implicit: item.properties[rowItem.propertyName], rowItem : rowItem, item : item }\"> </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultEsTd let-value let-rowItem='rowItem' let-item='item'>\r\n    <td es-td=\"{{rowItem.propertyName}}\" class=\"{{UserDefinedDynamicCols ? rowItem.clss : 'est-nowrap'}}\"\r\n        [class.est-pointer]=\"UseCustomCellActions && CustomCellActionsOn.indexOf('$' + rowItem.propertyName + '$') != -1\"\r\n        (click)=\"cellClicked(rowItem.propertyName, item) && !CellActionPropagates && $event.stopPropagation()\"\r\n        [Internal]=\"false\" [Context]=\"item._hash\">\r\n        {{value}}\r\n    </td>\r\n</ng-template>\r\n\r\n<!-- Questo template contiene la print condizionale delle celle custom se configurate -->\r\n<ng-template #customCells let-item let-opt=\"templateOptions\">\r\n    <ng-container *ngIf=\"UseCustomCells && RowTDs\">\r\n\r\n        <td *ngIf=\"HasPinnedColumns\" class=\"est-pinned-body est-col-min\" [class.est-white-selected]=\"item._selected\">\r\n            <div [style.width.px]=\"PinnedContainerWidth\" class=\"est-pinned-border\">\r\n                <td *ngIf=\"!item.locked && !item._sep && Selection\" class=\"est-no-border est-col-min\" [style.width.px]=\"20\">\r\n                    <input type=\"checkbox\" [disabled]=\"opt.selDisabled\" [class.est-pointer]=\"!item.locked\" [(ngModel)]=\"item._selected\" name=\"check{{item._hash}}\" (click)=\"$event.stopPropagation(); handleClick($event, item);\">\r\n                </td>\r\n                <td class=\"est-no-border est-col-min\" *ngIf=\"(item.locked || item._sep) && Selection\" [style.width.px]=\"20\"></td>\r\n\r\n                <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n                    <td *ngIf=\"rowItem && rowItem.Pinned\" [style.width.px]=\"rowItem.PinnedWidth\" es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-no-border]=\"true\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n            </div>\r\n        </td>\r\n\r\n        <ng-container *ngFor=\"let rowItem of RowTDs[item._hash]; let i = index\">\r\n            <ng-container *ngIf=\"rowItem && !rowItem.Pinned\">\r\n\r\n                <!-- Casistica senza bodyRef, quindi con direttive per i td -->\r\n                <ng-container *ngIf=\"!bodyRef && rowItem.Visible\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-ltab-border]=\"rowItem.LeftBorder\" [class.est-rtab-border]=\"rowItem.RightBorder\" [class.est-rg-hdr]=\"rowItem.GroupHeader\" [class.est-rg-agg]=\"rowItem.GroupAggregation\" \r\n                        [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\"><ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <ng-container *ngIf=\"rowItem.Template\"><ng-container *ngTemplateOutlet=\"rowItem.Template; context: { $implicit: item }\"></ng-container></ng-container>\r\n                        <span *ngIf=\"!rowItem.Template\">{{rowItem.Content}}</span>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [Internal]=\"true\">\r\n                        <ng-container *ngIf=\"Hierarchy && i == 0\">\r\n                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\r\n                        </ng-container>\r\n                        <a [routerLink]='rowItem.RouterLink' class=\"est-link\" [innerHTML]=\"rowItem.Content\"></a>\r\n                    </td>\r\n                </ng-container>\r\n\r\n                <!-- Casistica bodyRef, quindi con componenti per i td (NON RouterLink) DEPRECATO -->\r\n                <ng-container *ngIf=\"!rowItem.RouterLink && rowItem.Visible && bodyRef\">\r\n                    <td es-td=\"{{rowItem.ID}}\" class=\"{{rowItem.Class}}\" [class.est-nowrap]=\"Hierarchy || !rowItem.Wraps\" [class.est-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                            <ng-container *ngTemplateOutlet=\"HierarchyNavigator; context: { $implicit: item }\"></ng-container>\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<ng-template #HierarchyNavigator let-item>\r\n    <span *ngIf=\"!item.parent\" class=\"fa fa-chevron-down\" style=\"visibility:hidden\"></span>\r\n    <span *ngIf=\"item.parent && item._expanded\" class=\"fa fa-chevron-down est-pointer est-no-selection\" (click)=\"hierarchyMode_H.collapseParent(item[this.OwnKey])\"></span>\r\n    <span *ngIf=\"item.parent && !item._expanded\" class=\"fa fa-chevron-up est-pointer est-no-selection\" (click)=\"hierarchyMode_H.expandParent(item[this.OwnKey])\"></span>\r\n    &nbsp;\r\n</ng-template>\r\n\r\n<!-- Questo template contiene i pulsanti di eliminazione/undo eliminazione ed esportazione che vanno in fondo ad un record edlla tabella -->\r\n<ng-template #bodyDeleteAndExport let-options>\r\n    <ng-container *ngIf=\"Removal && !RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted)\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted)\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"Removal && RemovalCondition\">\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-remove est-pointer text-danger\" [hidden]=\"options.item.removable != undefined && !options.item.removable\" (click)=\"onRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"(options.item.removed || options.item.deleted) && options.item[RemovalCondition]\"><span class=\"fa fa-undo  text-warning est-pointer\" (click)=\"onAbortRemoval.emit(options.item)\"></span></td>\r\n        <td class=\"est-sticky-last-column{{options.even? '-alt' : ''}} {{Export || HiddenColumns || CornerMenuOptions ? 'est-right-9' : ''}}\" *ngIf=\"!options.item[RemovalCondition]\"><span class=\"fa fa-remove est-hidden-view\"></span></td>\r\n    </ng-container>\r\n    <td *ngIf=\"Export || HiddenColumns || CornerMenuOptions\" class=\"est-sticky-last-column{{options.even && !Hierarchy ? '-alt' : ''}}\"></td>\r\n</ng-template>\r\n\r\n<!-- Context menu vuoto default per tutte le tabella che non ce l'hanno, in modo che al click destro appaia \"nessuna op disponibile\" -->\r\n<context-menu #emptyMenu>\r\n    <ng-template contextMenuItem>\r\n        <span>\r\n            <em>{{'No operations available' | localize : lc}}...</em>\r\n        </span>\r\n    </ng-template>\r\n</context-menu>\r\n\r\n<!-- Modal per cambiare posizione e visibilit\u00E0 delle colonne dell'es-table -->\r\n<div bsModal #changeColumnVisibilityModal=\"bs-modal\" class=\"modal fade\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" cdkDrag>\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header est-pointer\" cdkDragHandle>\r\n                <h5 class=\"modal-title pull-left\">\r\n                    <ng-container *ngIf=\"!HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Order' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && !ColumnsOrdering\">\r\n                        {{'Columns Visibility' | localize : lc}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"HiddenColumns && ColumnsOrdering\">\r\n                        {{'Columns Visibility and Order' | localize : lc}}\r\n                    </ng-container>\r\n                </h5>\r\n                <button type=\"button\" class=\"close pull-right\" (click)=\"changeColumnVisibilityModal.hide();\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div *ngIf=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"card card-info est-padding-10 est-margin-bottom-0\">\r\n                    {{'There are no columns configured to be hidden/shown in this view' | localize : lc}}\r\n                </div>\r\n                <div *ngIf=\"TMPColumnsList && TMPColumnsList.length > 0\" style=\"max-height:500px; overflow-y:auto\">\r\n                    <!--Aaaaaaah la tristezza... qui mi servirebbe l'es-table per facilitare la selezione multipla ecc... peccato che se la linko qui entro in un loop impressionante-->\r\n                    <table class=\"table table-striped table-sm est-margin-bottom-0\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th class=\"est-col-min\" *ngIf=\"HiddenColumns\">\r\n                                    <input class=\"est-pointer\" type=\"checkbox\" [(ngModel)]=\"globalColVisCheck\" [ngModelOptions]=\"{'standalone': true}\" (ngModelChange)=\"columnMetadata_H.globalColVisCheckChanged();\">\r\n                                </th>\r\n                                <!-- <th class=\"est-col-min\" *ngIf=\"ColumnsOrdering\"></th> -->\r\n                                <th class=\"est-col-min est-nowrap\">{{'Column Name' | localize : lc}}</th>\r\n                                <!--Filler-->\r\n                                <th></th>\r\n                                <!-- Pinner -->\r\n                                <th *ngIf=\"DirectivesBased\" class=\"est-col-min\"></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody \r\n                            cdkDropList \r\n                            [cdkDropListData]=\"TMPColumnsList\" \r\n                            (cdkDropListDropped)=\"columnMetadata_H.columnReordered($event)\" \r\n                            [cdkDropListSortPredicate]=\"columnMetadata_H.sortPredicate.bind(this.columnMetadata_H)\"\r\n                            class=\"est-dropbox\">\r\n\r\n                            <tr *ngFor=\"let item of TMPColumnsList; let i = index; let last = last\" \r\n                                class=\"est-pointer est-droplist\" \r\n                                [class.est-white-selected]=\"lastSelectedItemID == item.id\" \r\n                                [class.est-no-selection]=\"!item.visible\"\r\n                                cdkDrag\r\n                                [cdkDragData]=\"item\"\r\n                                [cdkDragDisabled]=\"!ColumnsOrdering || item.fixed || item.pinned\">\r\n\r\n                                <td *ngIf=\"HiddenColumns\">\r\n                                    <input type=\"checkbox\" [class.est-hidden-view]=\"item.fixed\" class=\"est-pointer\" [(ngModel)]=\"item.visible\" name=\"visible{{i}}\" (ngModelChange)=\"columnMetadata_H.updateGlobalColVisCheck();\" />\r\n                                </td>\r\n                                <!-- <td class=\"est-nowrap\" *ngIf=\"ColumnsOrdering\">\r\n                                    <span class=\"fa fa-arrow-up\" [class.est-hidden-view]=\"item.fixed || item.pinned\" (click)=\"lastSelectedItemID = item.id; i != 0 && !item.fixed && columnMetadata_H.sendUp(item); $event.stopPropagation();\"></span>\r\n                                    <span class=\"fa fa-arrow-down\" [class.est-hidden-view]=\"item.fixed || item.pinned\" (click)=\"lastSelectedItemID = item.id; !last && !item.fixed && columnMetadata_H.sendDown(item); $event.stopPropagation();\"></span>\r\n                                </td> -->\r\n                                <td class=\"est-nowrap drag-visible\" (click)=\"columnMetadata_H.columnClicked(item);\">\r\n                                    <ng-container *ngIf=\"item.template\">\r\n                                        <!-- Padri -->\r\n                                        <span *ngIf=\"item.parentTemplates && item.parentTemplates.length > 0\" class=\"est-fw-bold est-fs-13\">\r\n                                            (&nbsp;\r\n                                            <ng-container *ngFor=\"let parent of item.parentTemplates; let last=last\">\r\n                                                <ng-container *ngTemplateOutlet=\"parent\"></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\"></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\"><span *ngIf=\"!item.fixed\" class=\"fa fa-thumb-tack\" [class.text-success]=\"item.pinned\" (click)=\"columnMetadata_H.pinOrUnpinColumn(item)\"></span></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary est-margin-right-10\" (click)=\"lastSelectedItemID = null; changeColumnVisibilityModal.hide();\">{{'Close' | localize : lc}}</button>\r\n                <button type=\"button\" [disabled]=\"!TMPColumnsList || TMPColumnsList.length == 0\" class=\"btn btn-primary\" (click)=\"columnMetadata_H.confirmColumnVisibilitySelection() && changeColumnVisibilityModal.hide()\">{{'Confirm' | localize : lc}}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
                     styles: [".est-loading-box{height:200px;text-align:center;position:relative;background:#ccc}.est-loading-content{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:35px}.est-scrollable{max-height:600px;overflow:auto}.est-head-resizer{top:0;right:0;bottom:0;width:7px;position:absolute;cursor:col-resize}.est-head-resizer-internal{top:0;right:0;left:6px;bottom:0;width:1px;position:absolute;background-color:#ccc;height:100%}.est-pointer{cursor:pointer}.est-high-density td,.est-high-density th{padding:0 .2rem}.est-no-selection{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}.est-hidden-view{visibility:hidden}.est-no-border{border:none!important}.est-nowrap{white-space:nowrap}.est-mt-min-5{margin-top:-5px}.est-white-selected{background-color:#ddd!important}.est-line-through{text-decoration:line-through}.est-no-side-padding{padding-left:0;padding-right:0}.est-no-left-padding,.est-no-right-padding{padding-left:0}.est-col-min{width:1px}.est-margin-bottom-0{margin-bottom:0!important}.est-margin-right-10{margin-right:10px!important}.est-right-9{right:9px!important}.est-table-dotted-menu{padding:0 0 2px!important;color:#999}.est-fs-18{font-size:18px}.est-fs-13,.est-fs-14{font-size:14px}.est-fw-bold{font-weight:700}.est-padding-3{padding:3px!important}.est-page-container{position:relative}.est-bring-to-front-strong{z-index:99999999!important}.est-switch{position:relative;display:inline-block;width:30px;height:17px;margin-bottom:0;margin-right:5px;margin-left:5px}.est-switch input{display:none}.est-slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.est-slider,.est-slider:before{position:absolute;transition:.4s}.est-slider:before{content:\"\";height:13px;width:13px;left:3px;bottom:2px;background-color:#fff}input:checked+.est-slider{background-color:#2196f3}input:focus+.est-slider{box-shadow:0 0 1px #2196f3}input:checked+.est-slider:before{transform:translateX(11px)}.est-slider.round{border-radius:10px}.est-slider.round:before{border-radius:50%}.est-custom-input{width:30px;display:inline;padding:1px;height:20px}.est-row-lvl-1 td:first-child{padding-left:5px}.est-row-lvl-2 td:first-child{padding-left:20px}.est-row-lvl-3 td:first-child{padding-left:35px}.est-row-lvl-4 td:first-child{padding-left:50px}.est-row-lvl-5 td:first-child{padding-left:65px}.est-row-lvl-6 td:first-child{padding-left:80px}.est-row-lvl-7 td:first-child{padding-left:95px}.est-row-lvl-8 td:first-child{padding-left:110px}.est-row-lvl-9 td:first-child{padding-left:125px}.est-row-lvl-10 td:first-child{padding-left:140px}.est-row-lvl-11 td:first-child{padding-left:155px}.est-row-lvl-12 td:first-child{padding-left:170px}.est-row-lvl-13 td:first-child{padding-left:185px}.est-row-lvl-14 td:first-child{padding-left:200px}.est-row-lvl-15 td:first-child{padding-left:215px}.est-row-lvl-16 td:first-child{padding-left:230px}.est-row-lvl-17 td:first-child{padding-left:245px}.est-row-lvl-18 td:first-child{padding-left:260px}.est-row-lvl-19 td:first-child{padding-left:275px}.est-row-lvl-20 td:first-child{padding-left:290px}.est-row-lvl-21 td:first-child{padding-left:305px}.est-row-lvl-22 td:first-child{padding-left:320px}.est-row-lvl-23 td:first-child{padding-left:335px}.est-row-lvl-24 td:first-child{padding-left:350px}.est-row-lvl-25 td:first-child{padding-left:365px}.est-row-lvl-26 td:first-child{padding-left:380px}.est-row-lvl-27 td:first-child{padding-left:395px}.est-row-lvl-28 td:first-child{padding-left:410px}.est-row-lvl-29 td:first-child{padding-left:425px}.est-row-lvl-30 td:first-child{padding-left:440px}.est-row-lvl-31 td:first-child{padding-left:455px}.est-row-lvl-32 td:first-child{padding-left:470px}.est-row-lvl-33 td:first-child{padding-left:485px}.est-row-lvl-34 td:first-child{padding-left:500px}.est-row-lvl-35 td:first-child{padding-left:515px}.est-row-lvl-36 td:first-child{padding-left:530px}.est-row-lvl-37 td:first-child{padding-left:545px}.est-row-lvl-38 td:first-child{padding-left:560px}.est-row-lvl-39 td:first-child{padding-left:575px}.est-row-lvl-40 td:first-child{padding-left:590px}.est-row-lvl-41 td:first-child{padding-left:605px}.est-row-lvl-42 td:first-child{padding-left:620px}.est-row-lvl-43 td:first-child{padding-left:635px}.est-row-lvl-44 td:first-child{padding-left:650px}.est-row-lvl-45 td:first-child{padding-left:665px}.est-row-lvl-46 td:first-child{padding-left:680px}.est-row-lvl-47 td:first-child{padding-left:695px}.est-row-lvl-48 td:first-child{padding-left:710px}.est-row-lvl-49 td:first-child{padding-left:725px}.est-row-lvl-50 td:first-child{padding-left:740px}.est-row-lvl-51 td:first-child{padding-left:755px}.est-row-lvl-52 td:first-child{padding-left:770px}.est-row-lvl-53 td:first-child{padding-left:785px}.est-row-lvl-54 td:first-child{padding-left:800px}.est-row-lvl-55 td:first-child{padding-left:815px}.est-row-lvl-56 td:first-child{padding-left:830px}.est-row-lvl-57 td:first-child{padding-left:845px}.est-row-lvl-58 td:first-child{padding-left:860px}.est-row-lvl-59 td:first-child{padding-left:875px}.est-row-lvl-60 td:first-child{padding-left:890px}.est-row-lvl-61 td:first-child{padding-left:905px}.est-row-lvl-62 td:first-child{padding-left:920px}.est-row-lvl-63 td:first-child{padding-left:935px}.est-row-lvl-64 td:first-child{padding-left:950px}.est-row-lvl-65 td:first-child{padding-left:965px}.est-row-lvl-66 td:first-child{padding-left:980px}.est-row-lvl-67 td:first-child{padding-left:995px}.est-row-lvl-68 td:first-child{padding-left:1010px}.est-row-lvl-69 td:first-child{padding-left:1025px}.est-row-lvl-70 td:first-child{padding-left:1040px}.est-row-lvl-71 td:first-child{padding-left:1055px}.est-row-lvl-72 td:first-child{padding-left:1070px}.est-row-lvl-73 td:first-child{padding-left:1085px}.est-row-lvl-74 td:first-child{padding-left:1100px}.est-row-lvl-75 td:first-child{padding-left:1115px}.est-row-lvl-76 td:first-child{padding-left:1130px}.est-row-lvl-77 td:first-child{padding-left:1145px}.est-row-lvl-78 td:first-child{padding-left:1160px}.est-row-lvl-79 td:first-child{padding-left:1175px}.est-row-lvl-80 td:first-child{padding-left:1190px}.est-row-lvl-81 td:first-child{padding-left:1205px}.est-row-lvl-82 td:first-child{padding-left:1220px}.est-row-lvl-83 td:first-child{padding-left:1235px}.est-row-lvl-84 td:first-child{padding-left:1250px}.est-row-lvl-85 td:first-child{padding-left:1265px}.est-row-lvl-86 td:first-child{padding-left:1280px}.est-row-lvl-87 td:first-child{padding-left:1295px}.est-row-lvl-88 td:first-child{padding-left:1310px}.est-row-lvl-89 td:first-child{padding-left:1325px}.est-row-lvl-90 td:first-child{padding-left:1340px}.est-row-lvl-91 td:first-child{padding-left:1355px}.est-row-lvl-92 td:first-child{padding-left:1370px}.est-row-lvl-93 td:first-child{padding-left:1385px}.est-row-lvl-94 td:first-child{padding-left:1400px}.est-row-lvl-95 td:first-child{padding-left:1415px}.est-row-lvl-96 td:first-child{padding-left:1430px}.est-row-lvl-97 td:first-child{padding-left:1445px}.est-row-lvl-98 td:first-child{padding-left:1460px}.est-row-lvl-99 td:first-child{padding-left:1475px}.est-relative{position:relative}.est-top-pager{position:absolute;right:0;top:5px}.est-top-allselect{position:absolute;left:0;top:5px;font-weight:700}.est-padding-10{padding:10px!important}.est-margin-right-50{margin-right:50px}.est-margin-left-50{margin-left:50px}.est-quick-unpin{color:#000;margin-left:8px;font-size:14px;transform:rotate(45deg)}.est-page-sel{color:#000;margin-left:3px;margin-right:3px;padding:0 5px;font-size:inherit;border:none;border-radius:15px}.est-page-next,.est-page-prev{color:#000;font-size:inherit;padding:2px 0 0}.est-pinned-header{background-color:#fff;left:0;top:0;position:sticky;z-index:1;border-bottom:1px solid #dee2e6!important;padding:0!important}.est-simple-border-bottom{border-bottom:1px solid #dee2e6}.est-pinned-internal-header{border-top:0;border-bottom:0 solid #dee2e6}.est-pinned-border{border-right:2px solid #dee2e6!important}.est-cell-padding{padding:.3rem}.est-pinned-body{background-color:#fff;left:0;position: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:2px solid #bbb}.est-rtab-border{border-right:2px solid #bbb}.est-cell-group-padding{padding:calc(.3rem + 1px);position:absolute;top:0;left:0;height:100%;width:100%}.est-margin-bottom-10{margin-bottom:10px}.est-text-center{text-align:center}.est-flex{display:flex}.est-rg-sep-flex-right{display:flex;flex-direction:row-reverse;width:100%;margin:-5px}.est-rg-sep-flex-left{display:flex;flex-direction:row;width:100%;margin:-5px}.est-rg-hdr{font-weight:700}.est-rg-agg{font-style:italic}.est-rg{background-color:hsla(0,0%,46.7%,.4666666666666667)!important}.est-rg-sep{font-size:12px;padding-right:20px!important;background-color:hsla(0,0%,73.3%,.7333333333333333)!important}.est-rg-ipp{text-align:left;display:inline-flex;margin-right:25px}.est-rg-page{text-align:right;display:inline-flex;font-size:inherit;padding-top:5px}.est-droplist.cdk-drag-placeholder{opacity:0}.est-droplist.cdk-drag-preview{z-index:999999999!important;opacity:1;box-sizing:border-box;border-radius:4px;background-color:#fff;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.est-droplist.cdk-drag-preview td:not(.drag-visible){visibility:hidden}.est-droplist.cdk-drag-preview td.drag-visible{padding-top:3px}.est-droplist.cdk-drag-animating,.est-droplist.cdk-drop-list-dragging .est-dropbox:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]
                 },] }
     ];