@eternalcodestudio/primeng-table 19.0.5 → 19.1.0
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.
- package/fesm2022/eternalcodestudio-primeng-table.mjs +99 -47
- package/fesm2022/eternalcodestudio-primeng-table.mjs.map +1 -1
- package/lib/components/ecs-primeng-table/ecs-primeng-table.d.ts +1 -0
- package/lib/components/table-button/table-button.d.ts +5 -2
- package/lib/components/table-predefined-filters/table-predefined-filters.d.ts +1 -0
- package/lib/interfaces/columns-metadata.interface.d.ts +2 -0
- package/lib/interfaces/predefined-filter.interface.d.ts +13 -0
- package/lib/interfaces/table-button.interface.d.ts +2 -3
- package/lib/interfaces/table-configuration.interface.d.ts +2 -0
- package/lib/interfaces/table-options.interface.d.ts +61 -20
- package/lib/interfaces/table-query-request.interface.d.ts +2 -0
- package/package.json +1 -1
|
@@ -157,7 +157,7 @@ const DEFAULT_TABLE_OPTIONS = {
|
|
|
157
157
|
content: undefined,
|
|
158
158
|
button: {
|
|
159
159
|
icon: "pi pi-bars",
|
|
160
|
-
|
|
160
|
+
label: "Legend"
|
|
161
161
|
}
|
|
162
162
|
},
|
|
163
163
|
header: {
|
|
@@ -179,19 +179,23 @@ const DEFAULT_TABLE_OPTIONS = {
|
|
|
179
179
|
action: {
|
|
180
180
|
buttons: [],
|
|
181
181
|
header: "Actions",
|
|
182
|
-
|
|
182
|
+
positionRight: true,
|
|
183
183
|
width: 150,
|
|
184
184
|
frozen: true,
|
|
185
|
-
resizable: false
|
|
185
|
+
resizable: false,
|
|
186
|
+
horizontalAlignment: DataAlignHorizontal.Center,
|
|
187
|
+
verticalAlignment: DataAlignVertical.Middle
|
|
186
188
|
},
|
|
187
189
|
checkboxSelector: {
|
|
188
190
|
enabled: false,
|
|
189
191
|
header: "Selected",
|
|
190
|
-
|
|
192
|
+
positionRight: false,
|
|
191
193
|
width: 150,
|
|
192
194
|
frozen: true,
|
|
193
195
|
resizable: false,
|
|
194
|
-
enabledCondition: undefined
|
|
196
|
+
enabledCondition: undefined,
|
|
197
|
+
horizontalAlignment: DataAlignHorizontal.Center,
|
|
198
|
+
verticalAlignment: DataAlignVertical.Middle
|
|
195
199
|
},
|
|
196
200
|
singleSelector: {
|
|
197
201
|
enabled: false,
|
|
@@ -212,7 +216,11 @@ const DEFAULT_TABLE_OPTIONS = {
|
|
|
212
216
|
saveMode: TableViewSaveMode.None,
|
|
213
217
|
saveKey: undefined,
|
|
214
218
|
urlGet: undefined,
|
|
215
|
-
urlSave: undefined
|
|
219
|
+
urlSave: undefined,
|
|
220
|
+
selectViewButtonClass: undefined,
|
|
221
|
+
reloadViewButtonClass: undefined,
|
|
222
|
+
reloadViewButtonIcon: "pi pi-refresh",
|
|
223
|
+
noViewSelectedText: "--- Select a view ---"
|
|
216
224
|
},
|
|
217
225
|
resetTableView: {
|
|
218
226
|
enabled: true,
|
|
@@ -270,10 +278,10 @@ function createTableOptions(overrides = {}) {
|
|
|
270
278
|
* headers, and response processing.
|
|
271
279
|
*/
|
|
272
280
|
class ECSPrimengTableHttpService {
|
|
273
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
274
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
281
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
282
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableHttpService, providedIn: 'root' });
|
|
275
283
|
}
|
|
276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableHttpService, decorators: [{
|
|
277
285
|
type: Injectable,
|
|
278
286
|
args: [{ providedIn: 'root' }]
|
|
279
287
|
}] });
|
|
@@ -285,10 +293,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
285
293
|
* Implementations must define how the notifications are managed.
|
|
286
294
|
*/
|
|
287
295
|
class ECSPrimengTableNotificationService {
|
|
288
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
289
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
296
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
297
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableNotificationService, providedIn: 'root' });
|
|
290
298
|
}
|
|
291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableNotificationService, decorators: [{
|
|
292
300
|
type: Injectable,
|
|
293
301
|
args: [{ providedIn: 'root' }]
|
|
294
302
|
}] });
|
|
@@ -619,10 +627,10 @@ class ECSPrimengTableService {
|
|
|
619
627
|
}
|
|
620
628
|
return tableWidth;
|
|
621
629
|
}
|
|
622
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
623
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
630
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableService, deps: [{ token: ECSPrimengTableHttpService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
631
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableService, providedIn: 'root' });
|
|
624
632
|
}
|
|
625
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTableService, decorators: [{
|
|
626
634
|
type: Injectable,
|
|
627
635
|
args: [{
|
|
628
636
|
providedIn: 'root'
|
|
@@ -675,19 +683,37 @@ class TablePredefinedFilters {
|
|
|
675
683
|
'gap': 0
|
|
676
684
|
};
|
|
677
685
|
}
|
|
686
|
+
getImageSkeletonStyle(width, height, isSkeleton = false) {
|
|
687
|
+
const finalHeight = height && height > 0 ? `${height}px` : '22px'; // Compute final height; use default if invalid
|
|
688
|
+
let finalWidth;
|
|
689
|
+
if (width && width > 0) { // If width is valid, use it
|
|
690
|
+
finalWidth = `${width}px`;
|
|
691
|
+
}
|
|
692
|
+
else if (isSkeleton) { // If it's a skeleton and width is not provided, mirror the height
|
|
693
|
+
finalWidth = finalHeight;
|
|
694
|
+
}
|
|
695
|
+
const style = {
|
|
696
|
+
'vertical-align': 'middle',
|
|
697
|
+
'height': finalHeight
|
|
698
|
+
};
|
|
699
|
+
if (finalWidth) { // Add width if available
|
|
700
|
+
style['width'] = finalWidth;
|
|
701
|
+
}
|
|
702
|
+
return style;
|
|
703
|
+
}
|
|
678
704
|
highlightText(cellValue, colMetadata, globalSearchText) {
|
|
679
705
|
return highlightText(cellValue, colMetadata, globalSearchText ?? null, this.sanitizer);
|
|
680
706
|
}
|
|
681
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
682
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TablePredefinedFilters, deps: [{ token: i1.DomSanitizer }, { token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
708
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TablePredefinedFilters, isStandalone: true, selector: "ecs-table-predefined-filters", inputs: { option: "option", col: "col", selectable: "selectable", rowData: "rowData", globalSearchText: "globalSearchText" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; gap: 0.5rem;\"\r\n [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n (click)=\"handleClick(); $event.stopPropagation();\">\r\n @if (option?.icon) {\r\n <i [class]=\"option.icon\" [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n }\r\n @if (!option?.imageBlob && option?.imageBlobSourceEndpoint) { <!-- If a blob image needs to be loaded from endpoint, while it's still loading, show skeleton -->\r\n <p-skeleton [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight, true)\"/>\r\n }\r\n @if (option?.imageBlob) {\r\n <img alt=\"image\" [src]=\"getBlobIconAsUrl(option.imageBlob)\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n }\r\n @if (option?.imageURL) {\r\n <img alt=\"iconFromURL\" [src]=\"option.imageURL\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n }\r\n @if (option?.displayTag === true) {\r\n <p-tag [innerHtml]=\"highlightText(option.name, col, globalSearchText)\" [style]=\"getTagStyle(option)\" [value]=\"option.name\"/>\r\n }\r\n @if (option?.displayName === true) {\r\n <span style=\"gap: 0;\" [innerHtml]=\"highlightText(option.name, col, globalSearchText)\" [ngStyle]=\"option.nameStyle || {}\">{{ option.name }}</span>\r\n }\r\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
683
709
|
}
|
|
684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TablePredefinedFilters, decorators: [{
|
|
685
711
|
type: Component,
|
|
686
712
|
args: [{ selector: 'ecs-table-predefined-filters', imports: [
|
|
687
713
|
SkeletonModule,
|
|
688
714
|
TagModule,
|
|
689
715
|
CommonModule
|
|
690
|
-
], standalone: true, template: "<div style=\"display: flex; align-items: center; gap: 0.5rem;\"\r\n [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n (click)=\"handleClick(); $event.stopPropagation();\">\r\n @if (option?.icon) {\r\n <i [class]=\"option.icon\"
|
|
716
|
+
], standalone: true, template: "<div style=\"display: flex; align-items: center; gap: 0.5rem;\"\r\n [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n (click)=\"handleClick(); $event.stopPropagation();\">\r\n @if (option?.icon) {\r\n <i [class]=\"option.icon\" [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n }\r\n @if (!option?.imageBlob && option?.imageBlobSourceEndpoint) { <!-- If a blob image needs to be loaded from endpoint, while it's still loading, show skeleton -->\r\n <p-skeleton [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight, true)\"/>\r\n }\r\n @if (option?.imageBlob) {\r\n <img alt=\"image\" [src]=\"getBlobIconAsUrl(option.imageBlob)\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n }\r\n @if (option?.imageURL) {\r\n <img alt=\"iconFromURL\" [src]=\"option.imageURL\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n }\r\n @if (option?.displayTag === true) {\r\n <p-tag [innerHtml]=\"highlightText(option.name, col, globalSearchText)\" [style]=\"getTagStyle(option)\" [value]=\"option.name\"/>\r\n }\r\n @if (option?.displayName === true) {\r\n <span style=\"gap: 0;\" [innerHtml]=\"highlightText(option.name, col, globalSearchText)\" [ngStyle]=\"option.nameStyle || {}\">{{ option.name }}</span>\r\n }\r\n</div>" }]
|
|
691
717
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: ECSPrimengTableService }], propDecorators: { option: [{
|
|
692
718
|
type: Input
|
|
693
719
|
}], col: [{
|
|
@@ -799,16 +825,16 @@ class TableCell {
|
|
|
799
825
|
highlightText(cellValue, colMetadata, globalSearchText) {
|
|
800
826
|
return highlightText(cellValue, colMetadata, globalSearchText, this.sanitizer);
|
|
801
827
|
}
|
|
802
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
803
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
828
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableCell, deps: [{ token: i1$1.DatePipe }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
829
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableCell, isStandalone: true, selector: "ecs-table-cell", inputs: { col: "col", rowData: "rowData", globalSearchText: "globalSearchText", predefinedFiltersCollection: "predefinedFiltersCollection", dateFormat: "dateFormat", dateTimezone: "dateTimezone", dateCulture: "dateCulture" }, ngImport: i0, template: "@if (value !== null && value !== undefined) {\r\n @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n <div [ngStyle]=\"{\r\n 'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n 'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n }\">\r\n @if (col.dataType === DataType.List){\r\n @for (item of getListValues(col, rowData); track item) {\r\n @if (getPredfinedFilterMatch(col, item); as option) {\r\n <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : item\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @if (getPredfinedFilterMatch(col, value); as option) {\r\n <div style=\"display: inline-block;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"/>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (col.dataType) {\r\n @case (DataType.Boolean) {\r\n <i class=\"pi\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [style.color]=\"value ? 'green' : 'red'\"\r\n [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n </i>\r\n }\r\n @case (DataType.Date) {\r\n <div \r\n [innerHtml]=\"highlightText(formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture), col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture)\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture) }}\r\n </div>\r\n }\r\n @default {\r\n <div\r\n [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ value }}\r\n </div>\r\n }\r\n }\r\n }\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData", "globalSearchText"] }] });
|
|
804
830
|
}
|
|
805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
831
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableCell, decorators: [{
|
|
806
832
|
type: Component,
|
|
807
833
|
args: [{ selector: 'ecs-table-cell', imports: [
|
|
808
834
|
CommonModule,
|
|
809
835
|
TooltipModule,
|
|
810
836
|
TablePredefinedFilters
|
|
811
|
-
], standalone: true, template: "@if (value !== null) {\r\n @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n <div [ngStyle]=\"{\r\n 'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n 'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n }\">\r\n @if (col.dataType === DataType.List){\r\n @for (item of getListValues(col, rowData); track item) {\r\n @if (getPredfinedFilterMatch(col, item); as option) {\r\n <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : item\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @if (getPredfinedFilterMatch(col, value); as option) {\r\n <div style=\"display: inline-block;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"/>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (col.dataType) {\r\n @case (DataType.Boolean) {\r\n <i class=\"pi\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [style.color]=\"value ? 'green' : 'red'\"\r\n [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n </i>\r\n }\r\n @case (DataType.Date) {\r\n <div \r\n [innerHtml]=\"highlightText(formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture), col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture)\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture) }}\r\n </div>\r\n }\r\n @default {\r\n <div\r\n [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ value }}\r\n </div>\r\n }\r\n }\r\n }\r\n}" }]
|
|
837
|
+
], standalone: true, template: "@if (value !== null && value !== undefined) {\r\n @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n <div [ngStyle]=\"{\r\n 'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n 'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n }\">\r\n @if (col.dataType === DataType.List){\r\n @for (item of getListValues(col, rowData); track item) {\r\n @if (getPredfinedFilterMatch(col, item); as option) {\r\n <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : item\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @if (getPredfinedFilterMatch(col, value); as option) {\r\n <div style=\"display: inline-block;\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"/>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n @switch (col.dataType) {\r\n @case (DataType.Boolean) {\r\n <i class=\"pi\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [style.color]=\"value ? 'green' : 'red'\"\r\n [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n </i>\r\n }\r\n @case (DataType.Date) {\r\n <div \r\n [innerHtml]=\"highlightText(formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture), col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture)\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture) }}\r\n </div>\r\n }\r\n @default {\r\n <div\r\n [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n ? rowData[col.dataTooltipCustomColumnSource] \r\n : value\"\r\n [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\">\r\n {{ value }}\r\n </div>\r\n }\r\n }\r\n }\r\n}" }]
|
|
812
838
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: i1.DomSanitizer }], propDecorators: { col: [{
|
|
813
839
|
type: Input
|
|
814
840
|
}], rowData: [{
|
|
@@ -834,21 +860,41 @@ class TableButton {
|
|
|
834
860
|
rowData;
|
|
835
861
|
isActionButton = false;
|
|
836
862
|
isLastActionButton = false;
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
863
|
+
overrideAction;
|
|
864
|
+
handleClick(event) {
|
|
865
|
+
if (this.button?.action || this.overrideAction) { // If there is an action or an override, execute logic
|
|
866
|
+
if (this.overrideAction) { // If overrideAction exists, execute it first
|
|
867
|
+
this.overrideAction(event); // Call override action
|
|
868
|
+
}
|
|
869
|
+
else { // Otherwise execute the normal button action through the service
|
|
870
|
+
this.tableService.handleButtonsClick(this.button.action, this.rowData);
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
getButtonStyle(button, isActionButton, isLastActionButton) {
|
|
875
|
+
const styles = {};
|
|
876
|
+
if (button.style) { // Add inline styles from button.style
|
|
877
|
+
button.style.split(';').forEach(part => {
|
|
878
|
+
const [prop, value] = part.split(':').map(x => x.trim());
|
|
879
|
+
if (prop && value)
|
|
880
|
+
styles[prop] = value;
|
|
881
|
+
});
|
|
840
882
|
}
|
|
883
|
+
if (isActionButton && !isLastActionButton) { // Add margin-right for action buttons
|
|
884
|
+
styles['margin-right'] = '10px';
|
|
885
|
+
}
|
|
886
|
+
return styles;
|
|
841
887
|
}
|
|
842
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
888
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableButton, deps: [{ token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
889
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableButton, isStandalone: true, selector: "ecs-table-button", inputs: { button: "button", rowData: "rowData", isActionButton: "isActionButton", isLastActionButton: "isLastActionButton", overrideAction: "overrideAction" }, ngImport: i0, template: "@if(button.visibleCondition?.(rowData) ?? true){ <!--If 'visibleCondition' is true or not defined-->\r\n @if((button.enabledCondition?.(rowData) ?? true) || !button.conditionFailHide){ <!--Render button if 'enabledCondition' is true or undefined, OR if 'conditionFailHide' is false-->\r\n <p-button\r\n [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n [rounded]=\"button.rounded || false\"\r\n [iconPos]=\"button.iconPos || 'left'\"\r\n [raised]=\"button.raised || false\"\r\n [variant]=\"button.variant || null\"\r\n [pTooltip]=\"button.tooltip || ''\"\r\n [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [styleClass]=\"\r\n (isActionButton ? ' custom-small-btn' : '') +\r\n (button.class ? ' ' + button.class : '')\r\n \"\r\n [icon]=\"button.icon || ''\"\r\n [label]=\"button.label || ''\"\r\n [size]=\"isActionButton ? 'small': undefined\"\r\n [ngStyle]=\"getButtonStyle(button, isActionButton, isLastActionButton)\"\r\n (onClick)=\"handleClick($event)\"/>\r\n }\r\n}", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
|
|
844
890
|
}
|
|
845
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableButton, decorators: [{
|
|
846
892
|
type: Component,
|
|
847
893
|
args: [{ selector: 'ecs-table-button', imports: [
|
|
848
894
|
CommonModule,
|
|
849
895
|
ButtonModule,
|
|
850
896
|
TooltipModule
|
|
851
|
-
], standalone: true, template: "@if(button.visibleCondition?.(rowData) ?? true){ <!--If 'visibleCondition' is true or not defined-->\r\n @if((button.enabledCondition?.(rowData) ?? true) || !button.conditionFailHide){ <!--Render button if 'enabledCondition' is true or undefined, OR if 'conditionFailHide' is false-->\r\n <p-button\r\n [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n [rounded]=\"button.rounded || false\"\r\n [iconPos]=\"button.iconPos || 'left'\"\r\n [raised]=\"button.raised || false\"\r\n [variant]=\"button.variant || null\"\r\n [pTooltip]=\"button.tooltip || ''\"\r\n [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [styleClass]=\"(
|
|
897
|
+
], standalone: true, template: "@if(button.visibleCondition?.(rowData) ?? true){ <!--If 'visibleCondition' is true or not defined-->\r\n @if((button.enabledCondition?.(rowData) ?? true) || !button.conditionFailHide){ <!--Render button if 'enabledCondition' is true or undefined, OR if 'conditionFailHide' is false-->\r\n <p-button\r\n [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n [rounded]=\"button.rounded || false\"\r\n [iconPos]=\"button.iconPos || 'left'\"\r\n [raised]=\"button.raised || false\"\r\n [variant]=\"button.variant || null\"\r\n [pTooltip]=\"button.tooltip || ''\"\r\n [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n [showDelay]=\"700\"\r\n tooltipPosition=\"top\"\r\n [styleClass]=\"\r\n (isActionButton ? ' custom-small-btn' : '') +\r\n (button.class ? ' ' + button.class : '')\r\n \"\r\n [icon]=\"button.icon || ''\"\r\n [label]=\"button.label || ''\"\r\n [size]=\"isActionButton ? 'small': undefined\"\r\n [ngStyle]=\"getButtonStyle(button, isActionButton, isLastActionButton)\"\r\n (onClick)=\"handleClick($event)\"/>\r\n }\r\n}", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"] }]
|
|
852
898
|
}], ctorParameters: () => [{ type: ECSPrimengTableService }], propDecorators: { button: [{
|
|
853
899
|
type: Input
|
|
854
900
|
}], rowData: [{
|
|
@@ -857,6 +903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
857
903
|
type: Input
|
|
858
904
|
}], isLastActionButton: [{
|
|
859
905
|
type: Input
|
|
906
|
+
}], overrideAction: [{
|
|
907
|
+
type: Input
|
|
860
908
|
}] } });
|
|
861
909
|
|
|
862
910
|
class ColumnSelector {
|
|
@@ -921,10 +969,10 @@ class ColumnSelector {
|
|
|
921
969
|
this.globalSearchText = null;
|
|
922
970
|
this.visibleChange.emit(false);
|
|
923
971
|
}
|
|
924
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
925
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: 10px;\">\r\n <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n [globalFilterFields]=\"['header']\" scrollHeight=\"calc(80vh - 220px)\" (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;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></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;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></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;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></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\" outlined=\"true\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" [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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], 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", "autofocus", "fluid", "buttonProps"], 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", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.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: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
|
|
972
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
973
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: 10px;\">\r\n <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n [globalFilterFields]=\"['header']\" scrollHeight=\"calc(80vh - 220px)\" (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;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></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;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></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;\" [pTooltip]=\"item.name\" [showDelay]=\"400\" tooltipPosition=\"top\"></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\" outlined=\"true\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" [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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], 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", "autofocus", "fluid", "buttonProps"], 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", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.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: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
|
|
926
974
|
}
|
|
927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnSelector, decorators: [{
|
|
928
976
|
type: Component,
|
|
929
977
|
args: [{ selector: 'ecs-column-selector', imports: [
|
|
930
978
|
DialogModule,
|
|
@@ -965,10 +1013,10 @@ class ExportExcelService {
|
|
|
965
1013
|
const seconds = String(now.getUTCSeconds()).padStart(2, '0');
|
|
966
1014
|
return `_${year}${month}${day}_${hours}${minutes}${seconds}_UTC`;
|
|
967
1015
|
}
|
|
968
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
969
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
1016
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExportExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1017
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExportExcelService, providedIn: 'root' });
|
|
970
1018
|
}
|
|
971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1019
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExportExcelService, decorators: [{
|
|
972
1020
|
type: Injectable,
|
|
973
1021
|
args: [{
|
|
974
1022
|
providedIn: 'root'
|
|
@@ -1065,10 +1113,10 @@ class ExportExcel {
|
|
|
1065
1113
|
closeModal() {
|
|
1066
1114
|
this.visibleChange.emit(false);
|
|
1067
1115
|
}
|
|
1068
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1069
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExportExcel, deps: [{ token: ECSPrimengTableNotificationService }, { token: ExportExcelService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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; margin-top: 10px;\">\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 <b>'_{year}{month}{day}_{hours}{minutes}{seconds}_UTC'</b> at the end of your filename.\" \r\n tooltipPosition=\"top\" \r\n [escape]=\"false\"\r\n class=\"pi pi-info-circle\">\r\n </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 <i pTooltip=\"Activating this option will make boolean values be shown as icons in the Excel report:<br>True \u2192 <span class='bool-icon bool-true'>\u2714</span><br>False \u2192 <span class='bool-icon bool-false'>\u2718</span>\" \r\n tooltipPosition=\"top\" \r\n tooltipStyleClass=\"excel-export-tooltip\"\r\n [escape]=\"false\"\r\n class=\"pi pi-info-circle\">\r\n </i>\r\n Use icons in boolean fields?\r\n </div>\r\n <div style=\"justify-self: stretch; width: 100%;\">\r\n <p-checkbox [binary]=\"true\" [(ngModel)]=\"exportUseIconsInBools\"/>\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\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"/>\r\n <p-button (click)=\"getExcelReport()\" label=\"Export\" [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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.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", "autofocus", "fluid", "buttonProps"], 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", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
1070
1118
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExportExcel, decorators: [{
|
|
1072
1120
|
type: Component,
|
|
1073
1121
|
args: [{ selector: 'ecs-export-excel', imports: [
|
|
1074
1122
|
DialogModule,
|
|
@@ -1153,10 +1201,10 @@ class ViewsManagement {
|
|
|
1153
1201
|
this.createView(this.newViewAlias);
|
|
1154
1202
|
}
|
|
1155
1203
|
}
|
|
1156
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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\" (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\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" [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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
1204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewsManagement, deps: [{ token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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\" (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\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" [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", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
1158
1206
|
}
|
|
1159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ViewsManagement, decorators: [{
|
|
1160
1208
|
type: Component,
|
|
1161
1209
|
args: [{ selector: 'ecs-views-management', imports: [
|
|
1162
1210
|
DialogModule,
|
|
@@ -1226,6 +1274,7 @@ class ECSPrimengTable {
|
|
|
1226
1274
|
dateFormat = "dd-MMM-yyyy HH:mm:ss zzzz";
|
|
1227
1275
|
dateTimezone = "+00:00";
|
|
1228
1276
|
dateCulture = "en-US";
|
|
1277
|
+
exportDateFormat = "dd-MMM-yyyy HH:mm:ss";
|
|
1229
1278
|
columns = [];
|
|
1230
1279
|
columnsCantBeHidden = [];
|
|
1231
1280
|
columnsSelected = [];
|
|
@@ -1325,6 +1374,7 @@ class ECSPrimengTable {
|
|
|
1325
1374
|
this.dateFormat = body.dateFormat;
|
|
1326
1375
|
this.dateTimezone = body.dateTimezone;
|
|
1327
1376
|
this.dateCulture = body.dateCulture;
|
|
1377
|
+
this.exportDateFormat = body.exportDateFormat;
|
|
1328
1378
|
this.currentPage = 0;
|
|
1329
1379
|
this.initialConfigurationFetched = true;
|
|
1330
1380
|
this.maxViews = body.maxViews;
|
|
@@ -1586,7 +1636,8 @@ class ECSPrimengTable {
|
|
|
1586
1636
|
columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
|
|
1587
1637
|
dateFormat: this.dateFormat,
|
|
1588
1638
|
dateTimezone: this.dateTimezone,
|
|
1589
|
-
dateCulture: this.dateCulture
|
|
1639
|
+
dateCulture: this.dateCulture,
|
|
1640
|
+
exportDateFormat: this.exportDateFormat
|
|
1590
1641
|
};
|
|
1591
1642
|
this.tableService.fetchTableData(this.tableOptions.urlTableData, requestData)
|
|
1592
1643
|
.pipe(finalize(() => {
|
|
@@ -1963,6 +2014,7 @@ class ECSPrimengTable {
|
|
|
1963
2014
|
dateFormat: this.dateFormat,
|
|
1964
2015
|
dateTimezone: this.dateTimezone,
|
|
1965
2016
|
dateCulture: this.dateCulture,
|
|
2017
|
+
exportDateFormat: this.exportDateFormat,
|
|
1966
2018
|
allColumns: event.allColumns,
|
|
1967
2019
|
applyFilters: filtersMustBeApplied,
|
|
1968
2020
|
applySorts: event.applySorts,
|
|
@@ -2002,10 +2054,10 @@ class ECSPrimengTable {
|
|
|
2002
2054
|
}
|
|
2003
2055
|
});
|
|
2004
2056
|
}
|
|
2005
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2006
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, 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]=\"scrollHeightValue\"\r\n [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.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]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <th [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ tableOptions.rows?.action?.header ?? ''}}\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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\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': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.alignmentRight ? 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 {{ tableOptions.rows?.checkboxSelector?.header ?? '' }}\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]=\"{'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\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 (tableOptions.columns?.selectorEnabled) {\r\n <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? '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 (tableOptions.header?.clearSortsEnabled) {\r\n <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? '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 }\r\n @if (tableOptions.header?.clearFiltersEnabled) {\r\n <p-button\r\n [icon]=\"tableOptions.header?.clearFiltersIcon ?? '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\r\n <!--TABLE DESCRIPTION-->\r\n @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n <i [class]=\"tableOptions.description!.icon\"></i>\r\n <span [innerHTML]=\"tableOptions.description!.text\"></span>\r\n } @else {\r\n <i [escape]=\"false\" [pTooltip]=\"tableOptions.description!.text\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n }\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-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 (tableOptions.globalFilter?.enabled) {\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]=\"tableOptions.globalFilter?.maxLength ?? null\" placeholder='Search keyword' [(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 (tableOptions.excelReport?.url?.trim()) {\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 <!--RESET TABLE VIEW-->\r\n @if(tableOptions.resetTableView?.enabled){\r\n <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\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 <!-- HEADER ACTION BUTTONS -->\r\n @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center; gap: 5px;\">\r\n @for (button of tableOptions.header?.buttons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"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 (!tableOptions.rows?.action?.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\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.filterPredefinedValuesName || col.filterPredefinedValuesName.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)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #item let-option >\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\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 (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.alignmentRight) {\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\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n @if (!tableOptions.rows?.action?.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\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 [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n </td>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.alignmentRight) {\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\">No data found for the current filter criteria.</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 <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n @if(tableOptions.legend?.content){\r\n <p-button (click)=\"op.toggle($event)\" [icon]=\"tableOptions.legend?.button?.icon || 'pi pi-bars'\" [label]=\"tableOptions.legend?.button?.text || 'Legend'\" />\r\n <p-popover #op>\r\n <div [innerHTML]=\"tableOptions.legend?.content\"></div>\r\n </p-popover>\r\n }\r\n <span>Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records</span>\r\n </div>\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]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (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;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.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;border-radius:0!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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.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", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.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", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: i11.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], 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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predefinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData", "globalSearchText"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"] }, { 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: i13.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"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, 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]=\"scrollHeightValue\"\r\n [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n [paginator]=\"true\" paginatorDropdownAppendTo=\"body\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <th [ngStyle]=\"{\r\n 'text-align': 'center',\r\n 'vertical-align': 'middle',\r\n 'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.action?.width ?? 150) + 'px'\r\n }\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\">\r\n {{ tableOptions.rows?.action?.header ?? ''}}\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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <td \r\n [ngStyle]=\"{\r\n 'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.action?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n 'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.action?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n 'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.action?.width ?? 150) + 'px'\r\n }\"\r\n pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\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]=\"{\r\n 'text-align': 'center',\r\n 'vertical-align': 'middle',\r\n 'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n }\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ tableOptions.rows?.checkboxSelector?.header ?? '' }}\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 'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.checkboxSelector?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n 'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.checkboxSelector?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n 'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n }\"\r\n pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\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 (tableOptions.columns?.selectorEnabled) {\r\n <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? '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 (tableOptions.header?.clearSortsEnabled) {\r\n <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? '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 }\r\n @if (tableOptions.header?.clearFiltersEnabled) {\r\n <p-button\r\n [icon]=\"tableOptions.header?.clearFiltersIcon ?? '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\r\n <!--TABLE DESCRIPTION-->\r\n @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n <i [class]=\"tableOptions.description!.icon\"></i>\r\n <span [innerHTML]=\"tableOptions.description!.text\"></span>\r\n } @else {\r\n <i [escape]=\"false\" [pTooltip]=\"tableOptions.description!.text\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n }\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;\"\r\n [label]=\"tableViewCurrentSelectedAlias \r\n ? tableViewCurrentSelectedAlias \r\n : (tableOptions.views?.noViewSelectedText || '--- Select a view ---')\"\r\n [class]=\"'viewButton' + (tableOptions.views?.selectViewButtonClass ? ' ' + tableOptions.views!.selectViewButtonClass : '')\"/>\r\n <p-button (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"\r\n [icon]=\"tableOptions.views?.reloadViewButtonIcon || 'pi pi-refresh'\"\r\n [class]=\"tableOptions.views?.reloadViewButtonClass || ''\"/>\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 (tableOptions.globalFilter?.enabled) {\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]=\"tableOptions.globalFilter?.maxLength ?? null\" placeholder='Search keyword' [(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 (tableOptions.excelReport?.url?.trim()) {\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 <!--RESET TABLE VIEW-->\r\n @if(tableOptions.resetTableView?.enabled){\r\n <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\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 <!-- HEADER ACTION BUTTONS -->\r\n @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n @for (button of tableOptions.header?.buttons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"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 (!tableOptions.rows?.action?.positionRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\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.filterPredefinedValuesName || col.filterPredefinedValuesName.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)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #item let-option >\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\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 (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.positionRight) {\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\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n @if (!tableOptions.rows?.action?.positionRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\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 [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n </td>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.positionRight) {\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\">No data found for the current filter criteria.</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 <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n @if(tableOptions.legend?.content){\r\n <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"/>\r\n <p-popover #op>\r\n <div [innerHTML]=\"tableOptions.legend?.content\"></div>\r\n </p-popover>\r\n }\r\n <span>Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records</span>\r\n </div>\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]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (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;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.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;border-radius:0!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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.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", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "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.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", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "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", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { 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: i11.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], 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", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predefinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData", "globalSearchText"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton", "overrideAction"] }, { 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: i13.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"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2007
2059
|
}
|
|
2008
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ECSPrimengTable, decorators: [{
|
|
2009
2061
|
type: Component,
|
|
2010
2062
|
args: [{ selector: 'ecs-primeng-table', imports: [
|
|
2011
2063
|
CommonModule,
|
|
@@ -2027,7 +2079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2027
2079
|
ButtonGroupModule,
|
|
2028
2080
|
ViewsManagement,
|
|
2029
2081
|
PopoverModule
|
|
2030
|
-
], 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]=\"scrollHeightValue\"\r\n [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.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]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <th [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n {{ tableOptions.rows?.action?.header ?? ''}}\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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <td \r\n [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\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': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.alignmentRight ? 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 {{ tableOptions.rows?.checkboxSelector?.header ?? '' }}\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]=\"{'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\r\n style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\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 (tableOptions.columns?.selectorEnabled) {\r\n <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? '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 (tableOptions.header?.clearSortsEnabled) {\r\n <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? '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 }\r\n @if (tableOptions.header?.clearFiltersEnabled) {\r\n <p-button\r\n [icon]=\"tableOptions.header?.clearFiltersIcon ?? '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\r\n <!--TABLE DESCRIPTION-->\r\n @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n <i [class]=\"tableOptions.description!.icon\"></i>\r\n <span [innerHTML]=\"tableOptions.description!.text\"></span>\r\n } @else {\r\n <i [escape]=\"false\" [pTooltip]=\"tableOptions.description!.text\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n }\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-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 (tableOptions.globalFilter?.enabled) {\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]=\"tableOptions.globalFilter?.maxLength ?? null\" placeholder='Search keyword' [(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 (tableOptions.excelReport?.url?.trim()) {\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 <!--RESET TABLE VIEW-->\r\n @if(tableOptions.resetTableView?.enabled){\r\n <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\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 <!-- HEADER ACTION BUTTONS -->\r\n @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center; gap: 5px;\">\r\n @for (button of tableOptions.header?.buttons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"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 (!tableOptions.rows?.action?.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\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.filterPredefinedValuesName || col.filterPredefinedValuesName.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)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #item let-option >\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\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 (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.alignmentRight) {\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\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n @if (!tableOptions.rows?.action?.alignmentRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\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 [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n </td>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.alignmentRight) {\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\">No data found for the current filter criteria.</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 <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n @if(tableOptions.legend?.content){\r\n <p-button (click)=\"op.toggle($event)\" [icon]=\"tableOptions.legend?.button?.icon || 'pi pi-bars'\" [label]=\"tableOptions.legend?.button?.text || 'Legend'\" />\r\n <p-popover #op>\r\n <div [innerHTML]=\"tableOptions.legend?.content\"></div>\r\n </p-popover>\r\n }\r\n <span>Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records</span>\r\n </div>\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]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (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;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.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;border-radius:0!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"] }]
|
|
2082
|
+
], 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]=\"scrollHeightValue\"\r\n [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n [paginator]=\"true\" paginatorDropdownAppendTo=\"body\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <th [ngStyle]=\"{\r\n 'text-align': 'center',\r\n 'vertical-align': 'middle',\r\n 'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.action?.width ?? 150) + 'px'\r\n }\"\r\n pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n [attr.scope]=\"'col'\">\r\n {{ tableOptions.rows?.action?.header ?? ''}}\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 ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n <td \r\n [ngStyle]=\"{\r\n 'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.action?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n 'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.action?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n 'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.action?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.action?.width ?? 150) + 'px'\r\n }\"\r\n pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\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]=\"{\r\n 'text-align': 'center',\r\n 'vertical-align': 'middle',\r\n 'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n }\"\r\n id=\"rowSelector-header\" [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n {{ tableOptions.rows?.checkboxSelector?.header ?? '' }}\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 'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.checkboxSelector?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n 'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.checkboxSelector?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n 'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n }\"\r\n pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n <p-checkbox \r\n [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\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 (tableOptions.columns?.selectorEnabled) {\r\n <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? '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 (tableOptions.header?.clearSortsEnabled) {\r\n <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? '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 }\r\n @if (tableOptions.header?.clearFiltersEnabled) {\r\n <p-button\r\n [icon]=\"tableOptions.header?.clearFiltersIcon ?? '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\r\n <!--TABLE DESCRIPTION-->\r\n @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n <i [class]=\"tableOptions.description!.icon\"></i>\r\n <span [innerHTML]=\"tableOptions.description!.text\"></span>\r\n } @else {\r\n <i [escape]=\"false\" [pTooltip]=\"tableOptions.description!.text\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n }\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;\"\r\n [label]=\"tableViewCurrentSelectedAlias \r\n ? tableViewCurrentSelectedAlias \r\n : (tableOptions.views?.noViewSelectedText || '--- Select a view ---')\"\r\n [class]=\"'viewButton' + (tableOptions.views?.selectViewButtonClass ? ' ' + tableOptions.views!.selectViewButtonClass : '')\"/>\r\n <p-button (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"\r\n [icon]=\"tableOptions.views?.reloadViewButtonIcon || 'pi pi-refresh'\"\r\n [class]=\"tableOptions.views?.reloadViewButtonClass || ''\"/>\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 (tableOptions.globalFilter?.enabled) {\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]=\"tableOptions.globalFilter?.maxLength ?? null\" placeholder='Search keyword' [(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 (tableOptions.excelReport?.url?.trim()) {\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 <!--RESET TABLE VIEW-->\r\n @if(tableOptions.resetTableView?.enabled){\r\n <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\"\r\n tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n }\r\n\r\n <!--REFRESH DATA-->\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 <!-- HEADER ACTION BUTTONS -->\r\n @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n @for (button of tableOptions.header?.buttons; track $index) {\r\n <ecs-table-button [button]=\"button\" [rowData]=\"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 (!tableOptions.rows?.action?.positionRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\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.filterPredefinedValuesName || col.filterPredefinedValuesName.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)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n <ng-template #item let-option >\r\n <div style=\"display: inline-block; vertical-align: middle;\">\r\n <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\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 (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.positionRight) {\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\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n @if (!tableOptions.rows?.action?.positionRight) {\r\n <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\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 [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n </td>\r\n }\r\n @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n }\r\n @if (tableOptions.rows?.action?.positionRight) {\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\">No data found for the current filter criteria.</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 <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n @if(tableOptions.legend?.content){\r\n <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"/>\r\n <p-popover #op>\r\n <div [innerHTML]=\"tableOptions.legend?.content\"></div>\r\n </p-popover>\r\n }\r\n <span>Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records</span>\r\n </div>\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]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (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;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.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;border-radius:0!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"] }]
|
|
2031
2083
|
}], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: { tableOptions: [{
|
|
2032
2084
|
type: Input
|
|
2033
2085
|
}], onRowCheckboxChange: [{
|