@eternalcodestudio/primeng-table 20.0.0 → 20.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, Injectable, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import { Input, Component, Injectable, EventEmitter, Output, ViewChild, HostListener, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i8$1 from '@angular/forms';
|
|
@@ -14,11 +14,11 @@ import * as i11 from 'primeng/inputtext';
|
|
|
14
14
|
import { InputTextModule } from 'primeng/inputtext';
|
|
15
15
|
import * as i10 from 'primeng/iconfield';
|
|
16
16
|
import { IconFieldModule } from 'primeng/iconfield';
|
|
17
|
-
import * as i9 from 'primeng/inputicon';
|
|
17
|
+
import * as i9$1 from 'primeng/inputicon';
|
|
18
18
|
import { InputIconModule } from 'primeng/inputicon';
|
|
19
19
|
import * as i12 from 'primeng/multiselect';
|
|
20
20
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i9 from 'primeng/checkbox';
|
|
22
22
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
23
23
|
import { PaginatorModule } from 'primeng/paginator';
|
|
24
24
|
import * as i14 from 'primeng/buttongroup';
|
|
@@ -40,8 +40,8 @@ import { Observable } from 'rxjs';
|
|
|
40
40
|
var CellOverflowBehaviour;
|
|
41
41
|
(function (CellOverflowBehaviour) {
|
|
42
42
|
CellOverflowBehaviour[CellOverflowBehaviour["Hidden"] = 0] = "Hidden";
|
|
43
|
-
CellOverflowBehaviour[CellOverflowBehaviour["Wrap"] = 1] = "Wrap";
|
|
44
|
-
Ellipsis
|
|
43
|
+
CellOverflowBehaviour[CellOverflowBehaviour["Wrap"] = 1] = "Wrap";
|
|
44
|
+
CellOverflowBehaviour[CellOverflowBehaviour["Ellipsis"] = 2] = "Ellipsis";
|
|
45
45
|
})(CellOverflowBehaviour || (CellOverflowBehaviour = {}));
|
|
46
46
|
|
|
47
47
|
var DataAlignHorizontal;
|
|
@@ -398,18 +398,53 @@ class ECSPrimengTableService {
|
|
|
398
398
|
getColumnStyle(col, headerCols = false) {
|
|
399
399
|
let styles = {};
|
|
400
400
|
if (!headerCols) {
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
401
|
+
switch (col.cellOverflowBehaviour) {
|
|
402
|
+
case CellOverflowBehaviour.Wrap:
|
|
403
|
+
styles['white-space'] = 'normal';
|
|
404
|
+
styles['word-wrap'] = 'break-word';
|
|
405
|
+
styles['word-break'] = 'break-all';
|
|
406
|
+
styles['overflow'] = 'hidden';
|
|
407
|
+
break;
|
|
408
|
+
case CellOverflowBehaviour.Ellipsis:
|
|
409
|
+
styles['white-space'] = 'nowrap';
|
|
410
|
+
styles['overflow'] = 'hidden';
|
|
411
|
+
styles['text-overflow'] = 'ellipsis';
|
|
412
|
+
styles['width'] = '100%';
|
|
413
|
+
styles['min-width'] = '100%';
|
|
414
|
+
styles['max-width'] = '100%';
|
|
415
|
+
break;
|
|
416
|
+
/*
|
|
417
|
+
display: block;
|
|
418
|
+
width: 100%;
|
|
419
|
+
text-align: center;
|
|
420
|
+
*/
|
|
421
|
+
case CellOverflowBehaviour.Hidden:
|
|
422
|
+
default:
|
|
423
|
+
styles['white-space'] = 'nowrap';
|
|
424
|
+
break;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
if (col.initialWidth > 0) {
|
|
428
|
+
const width = `${col.initialWidth}px`;
|
|
429
|
+
styles['width'] = width;
|
|
430
|
+
styles['min-width'] = width;
|
|
431
|
+
styles['max-width'] = width;
|
|
432
|
+
}
|
|
433
|
+
return styles;
|
|
434
|
+
/*let styles: Record<string, string> = {};
|
|
435
|
+
if(!headerCols){
|
|
436
|
+
styles = {
|
|
437
|
+
'white-space': col.cellOverflowBehaviour === CellOverflowBehaviour.Wrap ? 'normal' : 'nowrap',
|
|
438
|
+
'word-wrap': col.cellOverflowBehaviour === CellOverflowBehaviour.Wrap ? 'break-word' : 'normal',
|
|
439
|
+
'word-break': col.cellOverflowBehaviour === CellOverflowBehaviour.Wrap ? 'break-all' : 'normal'
|
|
440
|
+
};
|
|
406
441
|
}
|
|
407
442
|
if (col.initialWidth > 0) {
|
|
408
443
|
styles['max-width'] = col.initialWidth + 'px';
|
|
409
444
|
styles['min-width'] = col.initialWidth + 'px';
|
|
410
445
|
styles['width'] = col.initialWidth + 'px';
|
|
411
446
|
}
|
|
412
|
-
return styles
|
|
447
|
+
return styles;*/
|
|
413
448
|
}
|
|
414
449
|
fetchTableViews(tableViewSaveAs, recoverListEndpoint, tableViewSaveKey) {
|
|
415
450
|
let tableViewList = [];
|
|
@@ -443,7 +478,8 @@ class ECSPrimengTableService {
|
|
|
443
478
|
}
|
|
444
479
|
updateViewsMenuItems(tableSaveViewList) {
|
|
445
480
|
return tableSaveViewList.map(item => ({
|
|
446
|
-
label: item.viewAlias
|
|
481
|
+
label: item.viewAlias,
|
|
482
|
+
lastActive: item.lastActive
|
|
447
483
|
}));
|
|
448
484
|
}
|
|
449
485
|
viewsSaveToDatabase(tableSaveViewList, setListEndpoint, tableViewSaveKey) {
|
|
@@ -606,7 +642,7 @@ class ColumnSelector {
|
|
|
606
642
|
this.visibleChange.emit(false);
|
|
607
643
|
}
|
|
608
644
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColumnSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
609
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: true }], ngImport: i0, template: "<!--COLUMN MODAL DIALOG-->\r\n<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '65vw', 'max-width': '65vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <span class=\"white-space-nowrap\"><b>MODIFY COLUMNS</b></span>\r\n </ng-template>\r\n <div style=\"padding: 20px;\">\r\n <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px\">\r\n <p-checkbox inputId=\"selectAll\" [binary]=\"true\" [ngModel]=\"allColumnsCheckboxActive()\" (onChange)=\"allColumnsCheckboxClick($event)\"></p-checkbox>\r\n <label for=\"selectAll\">Select all columns</label>\r\n </div>\r\n <div style=\"display: flex; align-items: center;\">\r\n <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">\r\n <p-checkbox \r\n [(ngModel)]=\"rowData.selected\" \r\n [binary]=\"true\"\r\n [disabled]=\"rowData.selectDisabled\"/>\r\n </td>\r\n <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignHorizontal\" [options]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignVertical\" [options]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no columns</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\r\n </div>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel changes\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i6.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] });
|
|
645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: true }], ngImport: i0, template: "<!--COLUMN MODAL DIALOG-->\r\n<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '65vw', 'max-width': '65vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <span class=\"white-space-nowrap\"><b>MODIFY COLUMNS</b></span>\r\n </ng-template>\r\n <div style=\"padding: 20px;\">\r\n <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px\">\r\n <p-checkbox inputId=\"selectAll\" [binary]=\"true\" [ngModel]=\"allColumnsCheckboxActive()\" (onChange)=\"allColumnsCheckboxClick($event)\"></p-checkbox>\r\n <label for=\"selectAll\">Select all columns</label>\r\n </div>\r\n <div style=\"display: flex; align-items: center;\">\r\n <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">\r\n <p-checkbox \r\n [(ngModel)]=\"rowData.selected\" \r\n [binary]=\"true\"\r\n [disabled]=\"rowData.selectDisabled\"/>\r\n </td>\r\n <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignHorizontal\" [options]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n <p-selectButton [(ngModel)]=\"rowData.dataAlignVertical\" [options]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n <ng-template #item let-item>\r\n <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n </ng-template>\r\n </p-selectButton>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no columns</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\r\n </div>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel changes\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i6.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] });
|
|
610
646
|
}
|
|
611
647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ColumnSelector, decorators: [{
|
|
612
648
|
type: Component,
|
|
@@ -746,7 +782,7 @@ class ExportExcel {
|
|
|
746
782
|
this.visibleChange.emit(false);
|
|
747
783
|
}
|
|
748
784
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExportExcel, deps: [{ token: ECSPrimengTableNotificationService }, { token: ExportExcelService }], target: i0.ɵɵFactoryTarget.Component });
|
|
749
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ExportExcel, isStandalone: true, selector: "ecs-export-excel", inputs: { visible: "visible", rowCheckboxSelectorActive: "rowCheckboxSelectorActive", excelReportTitle: "excelReportTitle", allowTitleUserEdit: "allowTitleUserEdit" }, outputs: { exportToExcel: "exportToExcel", visibleChange: "visibleChange" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"false\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Export data to Excel</span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center;\">\r\n <div style=\"justify-self: end;\">\r\n Report filename\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <input pInputText id=\"reportTitle\" [(ngModel)]=\"excelReportTitle\" autocomplete=\"off\" style=\"width: 100%;\" [disabled]=\"!allowTitleUserEdit\" maxlength=\"100\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n <i pTooltip=\"Activating this option will add the current '_{year}{month}{day}_{hours}{minutes}{seconds}_UTC' at the end of your filename\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n Include time in report filename\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"/>\r\n </div>\r\n \r\n <div style=\"justify-self: end;\">\r\n Export columns\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"option_exportColumns\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n @if(filterSelectorDisabled()){\r\n <i pTooltip=\"Sorts are active because you want to export selected rows following a filter criteria\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n Filters to apply\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"option_applyCurrentFilters\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n Sorts to apply\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"option_applyCurrentSorts\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n </div>\r\n\r\n @if(rowCheckboxSelectorActive){\r\n <div style=\"justify-self: end;\">\r\n Selected rows\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"option_selectedRowsExport\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"/>\r\n </div>\r\n }\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel export\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"/>\r\n <p-button (click)=\"getExcelReport()\" label=\"Export\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"/>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type:
|
|
785
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ExportExcel, isStandalone: true, selector: "ecs-export-excel", inputs: { visible: "visible", rowCheckboxSelectorActive: "rowCheckboxSelectorActive", excelReportTitle: "excelReportTitle", allowTitleUserEdit: "allowTitleUserEdit" }, outputs: { exportToExcel: "exportToExcel", visibleChange: "visibleChange" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"false\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Export data to Excel</span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center;\">\r\n <div style=\"justify-self: end;\">\r\n Report filename\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <input pInputText id=\"reportTitle\" [(ngModel)]=\"excelReportTitle\" autocomplete=\"off\" style=\"width: 100%;\" [disabled]=\"!allowTitleUserEdit\" maxlength=\"100\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n <i pTooltip=\"Activating this option will add the current '_{year}{month}{day}_{hours}{minutes}{seconds}_UTC' at the end of your filename\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n Include time in report filename\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"/>\r\n </div>\r\n \r\n <div style=\"justify-self: end;\">\r\n Export columns\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"option_exportColumns\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n @if(filterSelectorDisabled()){\r\n <i pTooltip=\"Sorts are active because you want to export selected rows following a filter criteria\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n Filters to apply\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"option_applyCurrentFilters\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"/>\r\n </div>\r\n\r\n <div style=\"justify-self: end;\">\r\n Sorts to apply\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"option_applyCurrentSorts\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n </div>\r\n\r\n @if(rowCheckboxSelectorActive){\r\n <div style=\"justify-self: end;\">\r\n Selected rows\r\n </div>\r\n <div style=\"justify-self: start;\">\r\n <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"option_selectedRowsExport\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"/>\r\n </div>\r\n }\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"closeModal()\" label=\"Cancel export\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"/>\r\n <p-button (click)=\"getExcelReport()\" label=\"Export\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"/>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
750
786
|
}
|
|
751
787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExportExcel, decorators: [{
|
|
752
788
|
type: Component,
|
|
@@ -783,6 +819,7 @@ class ViewsManagement {
|
|
|
783
819
|
onViewSelect = new EventEmitter();
|
|
784
820
|
onViewDelete = new EventEmitter();
|
|
785
821
|
onViewUpdateData = new EventEmitter();
|
|
822
|
+
onViewUpdateActiveStartup = new EventEmitter();
|
|
786
823
|
onViewEditAlias = new EventEmitter();
|
|
787
824
|
onViewCreate = new EventEmitter();
|
|
788
825
|
visibleChange = new EventEmitter();
|
|
@@ -798,6 +835,9 @@ class ViewsManagement {
|
|
|
798
835
|
updateView(viewAlias) {
|
|
799
836
|
this.onViewUpdateData.emit(viewAlias);
|
|
800
837
|
}
|
|
838
|
+
updateViewActiveStartup(viewAlias) {
|
|
839
|
+
this.onViewUpdateActiveStartup.emit(viewAlias);
|
|
840
|
+
}
|
|
801
841
|
createView(viewAlias) {
|
|
802
842
|
const exists = this.tableViews_menuItems.some(item => item.label === viewAlias);
|
|
803
843
|
if (exists) {
|
|
@@ -830,7 +870,7 @@ class ViewsManagement {
|
|
|
830
870
|
}
|
|
831
871
|
}
|
|
832
872
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewsManagement, deps: [{ token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: ViewsManagement, isStandalone: true, selector: "ecs-views-management", inputs: { visible: "visible", tableViews_menuItems: "tableViews_menuItems" }, outputs: { onViewSelect: "onViewSelect", onViewDelete: "onViewDelete", onViewUpdateData: "onViewUpdateData", onViewEditAlias: "onViewEditAlias", onViewCreate: "onViewCreate", visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Table views</span>\r\n </div>\r\n </ng-template>\r\n <div class=\"p-4 pt-0\">\r\n <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n <p-button icon=\"pi pi-plus\" label=\"New view\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th style=\"text-align: center;\">View name</th>\r\n <th style=\"text-align: center; max-width: 300px; min-width: 300px; width: 300px;\">Actions</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td>\r\n {{rowData.label}}\r\n </td>\r\n <td style=\"max-width: 300px; min-width: 300px; width: 300px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Restore\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Save\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Edit\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Delete\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no views</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\r\n </div>\r\n </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n <span class=\"white-space-nowrap\"><b>{{ editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW' }}</b></span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <label for=\"newtableviewname\"><strong>View alias<span style=\"color: red;\">*</span></strong></label>\r\n <input \r\n pInputText \r\n id=\"newtableviewname\" \r\n aria-describedby=\"newtableviewname-help\" \r\n style=\"width: 400px;\"\r\n maxlength=\"30\"\r\n [(ngModel)]=\"newViewAlias\"/>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"viewEditorShow = false\" label=\"Cancel\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }] });
|
|
873
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: ViewsManagement, isStandalone: true, selector: "ecs-views-management", inputs: { visible: "visible", tableViews_menuItems: "tableViews_menuItems" }, outputs: { onViewSelect: "onViewSelect", onViewDelete: "onViewDelete", onViewUpdateData: "onViewUpdateData", onViewUpdateActiveStartup: "onViewUpdateActiveStartup", onViewEditAlias: "onViewEditAlias", onViewCreate: "onViewCreate", visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Table views</span>\r\n </div>\r\n </ng-template>\r\n <div class=\"p-4 pt-0\">\r\n <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n <p-button icon=\"pi pi-plus\" label=\"New view\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th style=\"text-align: center;\">View name</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Load on startup</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Actions</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td>\r\n {{rowData.label}}\r\n </td>\r\n <td style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">\r\n <p-checkbox [ngModel]=\"rowData.lastActive\" [binary]=\"true\" (onChange)=\"updateViewActiveStartup(rowData.label)\"/>\r\n </td>\r\n <td style=\"max-width: 220px; min-width: 220px; width: 220px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Restore\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Save\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Edit\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Delete\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no views</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\r\n </div>\r\n </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n <span class=\"white-space-nowrap\"><b>{{ editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW' }}</b></span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <label for=\"newtableviewname\"><strong>View alias<span style=\"color: red;\">*</span></strong></label>\r\n <input \r\n pInputText \r\n id=\"newtableviewname\" \r\n aria-describedby=\"newtableviewname-help\" \r\n style=\"width: 400px;\"\r\n maxlength=\"30\"\r\n [(ngModel)]=\"newViewAlias\"/>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"viewEditorShow = false\" label=\"Cancel\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
834
874
|
}
|
|
835
875
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ViewsManagement, decorators: [{
|
|
836
876
|
type: Component,
|
|
@@ -841,8 +881,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
841
881
|
CommonModule,
|
|
842
882
|
FormsModule,
|
|
843
883
|
TooltipModule,
|
|
844
|
-
InputTextModule
|
|
845
|
-
|
|
884
|
+
InputTextModule,
|
|
885
|
+
CheckboxModule
|
|
886
|
+
], standalone: true, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n <ng-template pTemplate=\"header\">\r\n <div>\r\n <span class=\"p-dialog-title\">Table views</span>\r\n </div>\r\n </ng-template>\r\n <div class=\"p-4 pt-0\">\r\n <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n <ng-template #caption>\r\n <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n <p-button icon=\"pi pi-plus\" label=\"New view\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n </div>\r\n </ng-template>\r\n <ng-template #header>\r\n <tr>\r\n <th style=\"text-align: center;\">View name</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Load on startup</th>\r\n <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Actions</th>\r\n </tr>\r\n </ng-template>\r\n <ng-template #body let-rowData>\r\n <tr>\r\n <td>\r\n {{rowData.label}}\r\n </td>\r\n <td style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">\r\n <p-checkbox [ngModel]=\"rowData.lastActive\" [binary]=\"true\" (onChange)=\"updateViewActiveStartup(rowData.label)\"/>\r\n </td>\r\n <td style=\"max-width: 220px; min-width: 220px; width: 220px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Restore\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Save\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Edit\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" pTooltip=\"Delete\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">There are no views</td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n Showing {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\r\n </div>\r\n </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n <ng-template pTemplate=\"header\">\r\n <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n <span class=\"white-space-nowrap\"><b>{{ editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW' }}</b></span>\r\n </div>\r\n </ng-template>\r\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n <label for=\"newtableviewname\"><strong>View alias<span style=\"color: red;\">*</span></strong></label>\r\n <input \r\n pInputText \r\n id=\"newtableviewname\" \r\n aria-describedby=\"newtableviewname-help\" \r\n style=\"width: 400px;\"\r\n maxlength=\"30\"\r\n [(ngModel)]=\"newViewAlias\"/>\r\n </div>\r\n <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <p-button (click)=\"viewEditorShow = false\" label=\"Cancel\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n </ng-template>\r\n</p-dialog>" }]
|
|
846
887
|
}], ctorParameters: () => [{ type: ECSPrimengTableNotificationService }], propDecorators: { visible: [{
|
|
847
888
|
type: Input
|
|
848
889
|
}], tableViews_menuItems: [{
|
|
@@ -853,6 +894,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
853
894
|
type: Output
|
|
854
895
|
}], onViewUpdateData: [{
|
|
855
896
|
type: Output
|
|
897
|
+
}], onViewUpdateActiveStartup: [{
|
|
898
|
+
type: Output
|
|
856
899
|
}], onViewEditAlias: [{
|
|
857
900
|
type: Output
|
|
858
901
|
}], onViewCreate: [{
|
|
@@ -864,7 +907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
864
907
|
class ECSPrimengTable {
|
|
865
908
|
tableService;
|
|
866
909
|
notification;
|
|
867
|
-
resizeObserver;
|
|
868
910
|
constructor(tableService, notification) {
|
|
869
911
|
this.tableService = tableService;
|
|
870
912
|
this.notification = notification;
|
|
@@ -942,6 +984,8 @@ class ECSPrimengTable {
|
|
|
942
984
|
columnsSelected = [];
|
|
943
985
|
columnModalData = [];
|
|
944
986
|
filteredColumnData = [];
|
|
987
|
+
initialColumnWidths;
|
|
988
|
+
initialTableWidth;
|
|
945
989
|
predifinedFiltersSelectedValuesCollection = {}; // Contains a collection of the predifined column filters selection (possible values come from 'predifinedFiltersCollection')
|
|
946
990
|
copyCellDataTimer; // A timer that handles the amount of time left to copy the cell data to the clipboard
|
|
947
991
|
tableLazyLoadEventInformation = {}; // Data of the last lazy load event of the table
|
|
@@ -953,40 +997,31 @@ class ECSPrimengTable {
|
|
|
953
997
|
headerContainer;
|
|
954
998
|
paginatorContainer;
|
|
955
999
|
ngAfterViewInit() {
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
this.resizeObserver.observe(this.tableContainer.nativeElement);
|
|
961
|
-
window.addEventListener('resize', this.onWindowResize);
|
|
962
|
-
this.calculateScrollHeight();
|
|
963
|
-
}
|
|
1000
|
+
this.calculateScrollHeight();
|
|
1001
|
+
}
|
|
1002
|
+
onResize() {
|
|
1003
|
+
this.calculateScrollHeight();
|
|
964
1004
|
}
|
|
965
|
-
onWindowResize = () => {
|
|
966
|
-
clearTimeout(this._resizeTimeout);
|
|
967
|
-
this._resizeTimeout = setTimeout(() => {
|
|
968
|
-
this.calculateScrollHeight();
|
|
969
|
-
}, 100);
|
|
970
|
-
};
|
|
971
1005
|
calculateScrollHeight() {
|
|
972
|
-
if (this.tableContainer && this.paginatorContainer && this.headerContainer) {
|
|
1006
|
+
if (this.computeScrollHeight && this.tableContainer && this.paginatorContainer && this.headerContainer) {
|
|
1007
|
+
/*const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
|
|
1008
|
+
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
|
|
1009
|
+
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
1010
|
+
|
|
1011
|
+
this.scrollHeight = `${containerRect.height - paginatorHeight - headerHeight}px`;*/
|
|
973
1012
|
const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
|
|
974
1013
|
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
|
|
975
1014
|
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
976
1015
|
const viewportHeight = window.innerHeight;
|
|
977
1016
|
const topOffset = containerRect.top + window.scrollY;
|
|
978
|
-
this.scrollHeight = `${(viewportHeight - topOffset - paginatorHeight - headerHeight) -
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
1017
|
+
this.scrollHeight = `${(viewportHeight - topOffset - paginatorHeight - headerHeight) - 60}px`;
|
|
1018
|
+
/*const containerHeight = this.tableContainer.nativeElement.offsetHeight;
|
|
1019
|
+
const headerHeight = this.headerContainer.nativeElement.offsetHeight;
|
|
1020
|
+
const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight || 50; // fallback
|
|
1021
|
+
|
|
1022
|
+
this.scrollHeight = `${containerHeight - headerHeight - paginatorHeight}px`;*/
|
|
984
1023
|
}
|
|
985
1024
|
}
|
|
986
|
-
ngOnDestroy() {
|
|
987
|
-
this.resizeObserver?.disconnect();
|
|
988
|
-
window.removeEventListener('resize', this.onWindowResize);
|
|
989
|
-
}
|
|
990
1025
|
/**
|
|
991
1026
|
* Used to update the data of a table externally outside the component. Use this method instead of 'updateData' to force the data updata of a table
|
|
992
1027
|
*
|
|
@@ -1002,19 +1037,18 @@ class ECSPrimengTable {
|
|
|
1002
1037
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
1003
1038
|
}
|
|
1004
1039
|
}
|
|
1005
|
-
fetchTableConfiguration() {
|
|
1040
|
+
fetchTableConfiguration(resetTableView = false) {
|
|
1006
1041
|
if (!this.isActive) {
|
|
1007
1042
|
return;
|
|
1008
1043
|
}
|
|
1009
1044
|
this.tableService.fetchTableConfiguration(this.urlColumnsSource).subscribe({
|
|
1010
1045
|
next: (response) => {
|
|
1011
|
-
this.handleTableConfigurationResponse(response.body);
|
|
1012
|
-
this.fetchTableViews();
|
|
1046
|
+
this.handleTableConfigurationResponse(response.body, resetTableView);
|
|
1013
1047
|
},
|
|
1014
1048
|
error: (err) => this.tableService.handleTableError(err, 'Columns Error')
|
|
1015
1049
|
});
|
|
1016
1050
|
}
|
|
1017
|
-
handleTableConfigurationResponse(body) {
|
|
1051
|
+
handleTableConfigurationResponse(body, resetTableView = false) {
|
|
1018
1052
|
this.allowedRowsPerPage = body.allowedItemsPerPage; // Update the number of rows allowed per page
|
|
1019
1053
|
this.currentRowsPerPage = Math.min(...this.allowedRowsPerPage); // Update the current rows per page to use the minimum value of allowed rows per page by default
|
|
1020
1054
|
this.columns = body.columnsInfo; // Update columns with fetched data
|
|
@@ -1026,6 +1060,23 @@ class ECSPrimengTable {
|
|
|
1026
1060
|
this.dateCulture = body.dateCulture;
|
|
1027
1061
|
this.currentPage = 0;
|
|
1028
1062
|
this.initialConfigurationFetched = true;
|
|
1063
|
+
if (resetTableView) {
|
|
1064
|
+
this.isActive = false;
|
|
1065
|
+
this.clearFilters(this.dt, true);
|
|
1066
|
+
this.clearSorts(this.dt, true);
|
|
1067
|
+
this.dt.tableWidthState = this.initialTableWidth;
|
|
1068
|
+
this.dt.columnWidthsState = this.initialColumnWidths;
|
|
1069
|
+
this.dt.restoreColumnWidths();
|
|
1070
|
+
this.tableLazyLoadEventInformation.multiSortMeta = [];
|
|
1071
|
+
this.isActive = true;
|
|
1072
|
+
}
|
|
1073
|
+
else {
|
|
1074
|
+
setTimeout(() => {
|
|
1075
|
+
this.initialColumnWidths = this.tableService.computeColumnWidths(this.dt);
|
|
1076
|
+
this.initialTableWidth = this.tableService.computeTableWidth(this.dt);
|
|
1077
|
+
}, 0);
|
|
1078
|
+
this.fetchTableViews();
|
|
1079
|
+
}
|
|
1029
1080
|
}
|
|
1030
1081
|
refreshData(event) {
|
|
1031
1082
|
this.fetchTableData(this.tableLazyLoadEventInformation);
|
|
@@ -1110,36 +1161,57 @@ class ECSPrimengTable {
|
|
|
1110
1161
|
this.tableViewsList.push(newView);
|
|
1111
1162
|
this.tableService.sortViews(this.tableViewsList);
|
|
1112
1163
|
this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
|
|
1164
|
+
this.tableViewCurrentSelectedAlias = viewAlias;
|
|
1113
1165
|
this.viewsSave(0);
|
|
1114
1166
|
}
|
|
1115
1167
|
viewDelete(viewAlias) {
|
|
1116
1168
|
const index = this.tableViewsList.findIndex(v => v.viewAlias === viewAlias);
|
|
1117
1169
|
if (index === -1) {
|
|
1118
1170
|
this.notification.showToast("error", "Table view delete failed", `The table view could not be deleted since it was not found.`);
|
|
1171
|
+
return;
|
|
1119
1172
|
}
|
|
1120
1173
|
this.tableViewsList.splice(index, 1);
|
|
1121
1174
|
this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
|
|
1175
|
+
if (this.tableViewCurrentSelectedAlias === viewAlias) {
|
|
1176
|
+
this.tableViewCurrentSelectedAlias = null;
|
|
1177
|
+
}
|
|
1122
1178
|
this.viewsSave(3);
|
|
1123
1179
|
}
|
|
1124
1180
|
viewEditAlias(event) {
|
|
1125
1181
|
const index = this.tableViewsList.findIndex(v => v.viewAlias === event.viewAliasOld);
|
|
1126
1182
|
if (index === -1) {
|
|
1127
1183
|
this.notification.showToast("error", "Table view alias change failed", `The table view alias could not be changed since it was not found.`);
|
|
1184
|
+
return;
|
|
1128
1185
|
}
|
|
1129
1186
|
this.tableViewsList[index].viewAlias = event.viewAliasNew;
|
|
1130
1187
|
this.tableService.sortViews(this.tableViewsList);
|
|
1131
1188
|
this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
|
|
1189
|
+
if (this.tableViewCurrentSelectedAlias === event.viewAliasOld) {
|
|
1190
|
+
this.tableViewCurrentSelectedAlias = event.viewAliasNew;
|
|
1191
|
+
}
|
|
1132
1192
|
this.viewsSave(2);
|
|
1133
1193
|
}
|
|
1134
1194
|
viewUpdateData(viewAlias) {
|
|
1135
1195
|
const index = this.tableViewsList.findIndex(v => v.viewAlias === viewAlias);
|
|
1136
1196
|
if (index === -1) {
|
|
1137
1197
|
this.notification.showToast("error", "Table view not found", `The table view to update data from was not found.`);
|
|
1198
|
+
return;
|
|
1138
1199
|
}
|
|
1139
1200
|
let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
|
|
1140
1201
|
this.tableViewsList[index].viewData = viewData;
|
|
1141
1202
|
this.viewsSave(1);
|
|
1142
1203
|
}
|
|
1204
|
+
viewUpdateActiveStartup(viewAlias) {
|
|
1205
|
+
const index = this.tableViewsList.findIndex(v => v.viewAlias === viewAlias);
|
|
1206
|
+
if (index === -1) {
|
|
1207
|
+
this.notification.showToast("error", "Table view not found", `The table view to update data from was not found.`);
|
|
1208
|
+
return;
|
|
1209
|
+
}
|
|
1210
|
+
let newStatus = !this.tableViewsList[index].lastActive;
|
|
1211
|
+
this.tableViewsList.forEach(v => v.lastActive = false);
|
|
1212
|
+
this.tableViewsList[index].lastActive = newStatus;
|
|
1213
|
+
this.viewsSave(4);
|
|
1214
|
+
}
|
|
1143
1215
|
viewsSave(endMessage) {
|
|
1144
1216
|
let tableView = JSON.stringify(this.tableViewsList);
|
|
1145
1217
|
switch (this.tableViewSaveAs) {
|
|
@@ -1179,6 +1251,9 @@ class ECSPrimengTable {
|
|
|
1179
1251
|
case 3: // DELETE VIEW
|
|
1180
1252
|
this.notification.showToast("info", "Table view delete", `The table view was deleted.`);
|
|
1181
1253
|
break;
|
|
1254
|
+
case 4: // DELETE VIEW
|
|
1255
|
+
this.notification.showToast("info", "Table view active on startup", `Changed the view that will be active on startup.`);
|
|
1256
|
+
break;
|
|
1182
1257
|
}
|
|
1183
1258
|
}
|
|
1184
1259
|
fetchTableData(event) {
|
|
@@ -1224,6 +1299,10 @@ class ECSPrimengTable {
|
|
|
1224
1299
|
this.selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption);
|
|
1225
1300
|
return filtersWithoutGlobalAndSelectedRows; // Return the filters without global array
|
|
1226
1301
|
}
|
|
1302
|
+
resetTableView() {
|
|
1303
|
+
this.tableViewCurrentSelectedAlias = null;
|
|
1304
|
+
this.fetchTableConfiguration(true);
|
|
1305
|
+
}
|
|
1227
1306
|
selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption = -1) {
|
|
1228
1307
|
if (filtersWithoutGlobalAndSelectedRows.hasOwnProperty('selector')) {
|
|
1229
1308
|
const selectorFilter = filtersWithoutGlobalAndSelectedRows['selector'][0];
|
|
@@ -1605,7 +1684,7 @@ class ECSPrimengTable {
|
|
|
1605
1684
|
});
|
|
1606
1685
|
}
|
|
1607
1686
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { isActive: "isActive", data: "data", columnsToShow: "columnsToShow", computeScrollHeight: "computeScrollHeight", globalSearchEnabled: "globalSearchEnabled", globalSearchMaxLength: "globalSearchMaxLength", globalSearchPlaceholder: "globalSearchPlaceholder", columnEditorEnabled: "columnEditorEnabled", urlColumnsSource: "urlColumnsSource", urlDataSource: "urlDataSource", urlExcelReport: "urlExcelReport", predifinedFiltersCollection: "predifinedFiltersCollection", predifinedFiltersNoSelectionPlaceholder: "predifinedFiltersNoSelectionPlaceholder", predifinedFiltersCollectionSelectedValuesText: "predifinedFiltersCollectionSelectedValuesText", rowActionButtons: "rowActionButtons", headerActionButtons: "headerActionButtons", copyCellDataToClipboardTimeSecs: "copyCellDataToClipboardTimeSecs", actionsColumnAligmentRight: "actionsColumnAligmentRight", actionsColumnWidth: "actionsColumnWidth", actionsColumnFrozen: "actionsColumnFrozen", rowSelectorColumnActive: "rowSelectorColumnActive", rowSelectorColumName: "rowSelectorColumName", rowSelectorColumnAligmentRight: "rowSelectorColumnAligmentRight", rowSelectorColumnWidth: "rowSelectorColumnWidth", rowSelectorColumnFrozen: "rowSelectorColumnFrozen", actionsColumnResizable: "actionsColumnResizable", actionColumnName: "actionColumnName", rowselectorColumnResizable: "rowselectorColumnResizable", noDataFoundText: "noDataFoundText", showClearSortAndFilters: "showClearSortAndFilters", excelReportTitleDefault: "excelReportTitleDefault", excelReportTitleAllowUserEdit: "excelReportTitleAllowUserEdit", tableViewSaveAs: "tableViewSaveAs", tableViewSaveKey: "tableViewSaveKey", viewsGetSourceURL: "viewsGetSourceURL", viewsSaveSourceURL: "viewsSaveSourceURL", maxTableViews: "maxTableViews" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (rowActionButtons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ actionColumnName }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (rowActionButtons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of rowActionButtons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ rowSelectorColumName }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{\r\n 'max-width': rowSelectorColumnWidth + 'px', \r\n 'min-width': rowSelectorColumnWidth + 'px', \r\n 'width': rowSelectorColumnWidth + 'px'\r\n }\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (columnEditorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (showClearSortAndFilters) {\r\n <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n <p-button\r\n icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/><!--resetTableView()-->\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (globalSearchEnabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (headerActionButtons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of headerActionButtons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\">\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n </td>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">{{noDataFoundText}}</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5$1.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predifinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredifinedFilters, selector: "ecs-table-predifined-filters", inputs: ["option", "col"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"], outputs: ["clicked"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1687
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { isActive: "isActive", data: "data", columnsToShow: "columnsToShow", computeScrollHeight: "computeScrollHeight", globalSearchEnabled: "globalSearchEnabled", globalSearchMaxLength: "globalSearchMaxLength", globalSearchPlaceholder: "globalSearchPlaceholder", columnEditorEnabled: "columnEditorEnabled", urlColumnsSource: "urlColumnsSource", urlDataSource: "urlDataSource", urlExcelReport: "urlExcelReport", predifinedFiltersCollection: "predifinedFiltersCollection", predifinedFiltersNoSelectionPlaceholder: "predifinedFiltersNoSelectionPlaceholder", predifinedFiltersCollectionSelectedValuesText: "predifinedFiltersCollectionSelectedValuesText", rowActionButtons: "rowActionButtons", headerActionButtons: "headerActionButtons", copyCellDataToClipboardTimeSecs: "copyCellDataToClipboardTimeSecs", actionsColumnAligmentRight: "actionsColumnAligmentRight", actionsColumnWidth: "actionsColumnWidth", actionsColumnFrozen: "actionsColumnFrozen", rowSelectorColumnActive: "rowSelectorColumnActive", rowSelectorColumName: "rowSelectorColumName", rowSelectorColumnAligmentRight: "rowSelectorColumnAligmentRight", rowSelectorColumnWidth: "rowSelectorColumnWidth", rowSelectorColumnFrozen: "rowSelectorColumnFrozen", actionsColumnResizable: "actionsColumnResizable", actionColumnName: "actionColumnName", rowselectorColumnResizable: "rowselectorColumnResizable", noDataFoundText: "noDataFoundText", showClearSortAndFilters: "showClearSortAndFilters", excelReportTitleDefault: "excelReportTitleDefault", excelReportTitleAllowUserEdit: "excelReportTitleAllowUserEdit", tableViewSaveAs: "tableViewSaveAs", tableViewSaveKey: "tableViewSaveKey", viewsGetSourceURL: "viewsGetSourceURL", viewsSaveSourceURL: "viewsSaveSourceURL", maxTableViews: "maxTableViews" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (rowActionButtons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ actionColumnName }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (rowActionButtons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of rowActionButtons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ rowSelectorColumName }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{\r\n 'max-width': rowSelectorColumnWidth + 'px', \r\n 'min-width': rowSelectorColumnWidth + 'px', \r\n 'width': rowSelectorColumnWidth + 'px'\r\n }\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (columnEditorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (showClearSortAndFilters) {\r\n <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n <p-button\r\n icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (globalSearchEnabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (headerActionButtons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of headerActionButtons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\">\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n </td>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">{{noDataFoundText}}</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5$1.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predifinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredifinedFilters, selector: "ecs-table-predifined-filters", inputs: ["option", "col"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"], outputs: ["clicked"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1609
1688
|
}
|
|
1610
1689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ECSPrimengTable, decorators: [{
|
|
1611
1690
|
type: Component,
|
|
@@ -1628,7 +1707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1628
1707
|
ExportExcel,
|
|
1629
1708
|
ButtonGroupModule,
|
|
1630
1709
|
ViewsManagement
|
|
1631
|
-
], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (rowActionButtons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ actionColumnName }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (rowActionButtons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of rowActionButtons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ rowSelectorColumName }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{\r\n 'max-width': rowSelectorColumnWidth + 'px', \r\n 'min-width': rowSelectorColumnWidth + 'px', \r\n 'width': rowSelectorColumnWidth + 'px'\r\n }\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (columnEditorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (showClearSortAndFilters) {\r\n <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n <p-button\r\n icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/><!--resetTableView()-->\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (globalSearchEnabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (headerActionButtons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of headerActionButtons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\">\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n </td>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">{{noDataFoundText}}</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
|
|
1710
|
+
], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n <p-table #dt\r\n size=\"small\" showGridlines stripedRows \r\n sortMode=\"multiple\"\r\n [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n [reorderableColumns]=\"true\"\r\n [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n <ng-template #actionColumnHeaderTemplate>\r\n @if (rowActionButtons.length > 0) {\r\n <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ actionColumnName }}\r\n </th>\r\n }\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n @if (rowActionButtons.length > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of rowActionButtons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n }\r\n </td>\r\n }\r\n </ng-template>\r\n\r\n <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n <ng-template #rowSelectorColumnHeaderTemplate>\r\n <th \r\n [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n style=\"text-align: center; vertical-align: middle;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ rowSelectorColumName }}\r\n <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n </div>\r\n </th>\r\n </ng-template>\r\n\r\n <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n <td \r\n [ngStyle]=\"{\r\n 'max-width': rowSelectorColumnWidth + 'px', \r\n 'min-width': rowSelectorColumnWidth + 'px', \r\n 'width': rowSelectorColumnWidth + 'px'\r\n }\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [binary]=\"true\"\r\n [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n </td>\r\n </ng-template>\r\n\r\n\r\n <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n <ng-template #caption>\r\n <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--CHOOSE COLUMNS TO SHOW-->\r\n @if (columnEditorEnabled) {\r\n <p-button icon=\"pi pi-pen-to-square\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n <!--CLEAR SORTS AND FILTERS-->\r\n @if (showClearSortAndFilters) {\r\n <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n <p-button\r\n icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n </div>\r\n\r\n <!--TABLE VIEWS-->\r\n @if(tableViewsEnabled()){\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <p-buttongroup>\r\n <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n </p-buttongroup>\r\n </div>\r\n }\r\n\r\n <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n <!--GLOBAL FILTER-->\r\n @if (globalSearchEnabled) {\r\n <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n <p-inputIcon>\r\n <i class=\"pi pi-search\"></i>\r\n </p-inputIcon>\r\n <input pInputText type=\"text\" \r\n (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\" autocomplete=\"off\" \r\n [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n style=\"width: 220px;\"/>\r\n <!-- Right icon (only if there is text) -->\r\n @if (globalSearchText) {\r\n <p-inputIcon position=\"right\">\r\n <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n </p-inputIcon>\r\n }\r\n </p-iconField>\r\n }\r\n\r\n <!--EXPORT DATA-->\r\n @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\r\n @if (showRefreshData) {\r\n <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n \r\n <!-- HEADER ACTION BUTTONS -->\r\n @if (headerActionButtons.length > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n @for (button of headerActionButtons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n }\r\n </td>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n <ng-template #header let-columns>\r\n <tr>\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @for (col of columns; track col.header) {\r\n <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n style=\"text-align: center;\"\r\n [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n <div style=\"margin-right: 15px;\">\r\n <span>{{ col.header }}</span>\r\n </div>\r\n <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n @if (col.canBeSorted) {\r\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n }\r\n @if(col.canBeFiltered){\r\n @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n } @else {\r\n <p-columnFilter\r\n type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n <ng-template #filter>\r\n <p-multiSelect\r\n [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #selectedItems>\r\n @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <div>\r\n {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n </div>\r\n </div>\r\n } @else {\r\n <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n }\r\n </ng-template>\r\n <ng-template let-option pTemplate=\"item\">\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n </ng-template>\r\n </p-columnFilter>\r\n }\r\n }\r\n @if (col.columnDescription && col.columnDescription.length > 0) {\r\n <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n }\r\n </div>\r\n </div>\r\n </th>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n <ng-template #body let-rowData let-columns=\"columns\"> \r\n <tr [pSelectableRow]=\"rowData\">\r\n @if (!actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @for (col of columns; track col.field) {\r\n <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n </td>\r\n }\r\n @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (actionsColumnAligmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n <ng-template #emptymessage>\r\n <tr>\r\n <td colspan=\"999\">{{noDataFoundText}}</td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- SHOW CUSTOM RECORDS REPORT -->\r\n <ng-template #paginatorleft>\r\n <div #paginatorContainer>\r\n Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n </div>\r\n </ng-template>\r\n </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
|
|
1632
1711
|
}], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: { isActive: [{
|
|
1633
1712
|
type: Input
|
|
1634
1713
|
}], data: [{
|
|
@@ -1721,6 +1800,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1721
1800
|
}], paginatorContainer: [{
|
|
1722
1801
|
type: ViewChild,
|
|
1723
1802
|
args: ['paginatorContainer', { static: false }]
|
|
1803
|
+
}], onResize: [{
|
|
1804
|
+
type: HostListener,
|
|
1805
|
+
args: ['window:resize']
|
|
1724
1806
|
}] } });
|
|
1725
1807
|
|
|
1726
1808
|
/*
|