@onecx/angular-accelerator 9.0.0-rc.4 → 9.0.0-rc.6
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/onecx-angular-accelerator-testing.mjs +10 -1
- package/fesm2022/onecx-angular-accelerator-testing.mjs.map +1 -1
- package/fesm2022/onecx-angular-accelerator.mjs +635 -368
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/package.json +7 -7
- package/src/lib/directives/content.directive.scss +15 -0
- package/types/onecx-angular-accelerator-testing.d.ts +1 -1
- package/types/onecx-angular-accelerator.d.ts +561 -517
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, input, effect, Directive, signal, Renderer2, ViewContainerRef, TemplateRef, DestroyRef, computed, HostListener, EventEmitter, Output, OutputEmitterRef, assertInInjectionContext, NgZone, Injectable, Injector, LOCALE_ID, Pipe, model, output, contentChild, ViewChild, ViewEncapsulation, Component, contentChildren, viewChild, Input, ChangeDetectorRef, viewChildren,
|
|
2
|
+
import { inject, ElementRef, input, effect, Directive, signal, Renderer2, ViewContainerRef, TemplateRef, DestroyRef, computed, HostListener, EventEmitter, Output, OutputEmitterRef, assertInInjectionContext, NgZone, Injectable, Injector, LOCALE_ID, Pipe, model, output, contentChild, ViewChild, ViewEncapsulation, Component, contentChildren, viewChild, untracked, Input, ChangeDetectorRef, viewChildren, Optional, SkipSelf, ChangeDetectionStrategy, Type, NgModule, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, ShellCapabilityService, Capability, AppConfigService } from '@onecx/angular-integration-interface';
|
|
5
|
-
import { HAS_PERMISSION_CHECKER, SKIP_STYLE_SCOPING, getScopeIdentifier, dataStyleIdKey, dataNoPortalLayoutStylesKey, MultiLanguageMissingTranslationHandler, providePermissionChecker, provideTranslationPathFromMeta, provideMultiLanguageIdentifier, provideTranslationConnectionService } from '@onecx/angular-utils';
|
|
6
|
-
import { switchMap, of, from, take, map, BehaviorSubject, filter, concat, tap, combineLatest, mergeMap, startWith, debounceTime, firstValueFrom,
|
|
5
|
+
import { HAS_PERMISSION_CHECKER, SKIP_STYLE_SCOPING, getScopeIdentifier, dataStyleIdKey, dataNoPortalLayoutStylesKey, MultiLanguageMissingTranslationHandler, localeLoaders, DynamicLocaleId, providePermissionChecker, provideTranslationPathFromMeta, provideMultiLanguageIdentifier, provideTranslationConnectionService } from '@onecx/angular-utils';
|
|
6
|
+
import { switchMap, of, from, take, map, BehaviorSubject, filter, concat, tap, combineLatest, mergeMap, startWith, debounceTime, firstValueFrom, isObservable, withLatestFrom, Subject, skip } from 'rxjs';
|
|
7
7
|
import { createLoggerFactory, Topic, getLocation, isValidDate, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
|
|
8
8
|
import { HttpClient } from '@angular/common/http';
|
|
9
9
|
import * as i3 from '@angular/forms';
|
|
@@ -12,7 +12,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
|
12
12
|
import * as i8 from '@ngx-translate/core';
|
|
13
13
|
import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
14
14
|
import * as i1 from '@angular/common';
|
|
15
|
-
import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, CommonModule } from '@angular/common';
|
|
15
|
+
import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, registerLocaleData, CommonModule } from '@angular/common';
|
|
16
16
|
import * as i2$1 from 'primeng/button';
|
|
17
17
|
import { ButtonModule } from 'primeng/button';
|
|
18
18
|
import * as i5 from 'primeng/skeleton';
|
|
@@ -1038,11 +1038,11 @@ class SearchHeaderComponent {
|
|
|
1038
1038
|
this.visibleFormControls = contentChildren(FormControlName, { ...(ngDevMode ? { debugName: "visibleFormControls" } : {}), descendants: true });
|
|
1039
1039
|
this.searchParameterFields = viewChild('searchParameterFields', ...(ngDevMode ? [{ debugName: "searchParameterFields" }] : []));
|
|
1040
1040
|
this.hasAdvanced = signal(false, ...(ngDevMode ? [{ debugName: "hasAdvanced" }] : []));
|
|
1041
|
-
this.simpleAdvancedAction =
|
|
1041
|
+
this.simpleAdvancedAction = {
|
|
1042
1042
|
id: 'simpleAdvancedButton',
|
|
1043
1043
|
actionCallback: () => this.toggleViewMode(),
|
|
1044
1044
|
show: 'always',
|
|
1045
|
-
}
|
|
1045
|
+
};
|
|
1046
1046
|
this.headerActions = signal([], ...(ngDevMode ? [{ debugName: "headerActions" }] : []));
|
|
1047
1047
|
this.searchButtonsReversed$ = of(null);
|
|
1048
1048
|
this.fieldValues$ = combineLatest([
|
|
@@ -1055,12 +1055,22 @@ class SearchHeaderComponent {
|
|
|
1055
1055
|
this.searchConfigChangedSlotEmitter = new EventEmitter();
|
|
1056
1056
|
effect(() => {
|
|
1057
1057
|
const viewMode = this.viewMode();
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1058
|
+
untracked(() => {
|
|
1059
|
+
this.viewModeChanged?.emit(viewMode);
|
|
1060
|
+
this.componentStateChanged.emit({
|
|
1061
|
+
activeViewMode: viewMode,
|
|
1062
|
+
});
|
|
1063
|
+
});
|
|
1064
|
+
});
|
|
1065
|
+
// Update header actions whenever view mode, advanced availability or actions input changes
|
|
1066
|
+
effect(() => {
|
|
1067
|
+
this.viewMode();
|
|
1068
|
+
this.hasAdvanced();
|
|
1069
|
+
this.actions();
|
|
1070
|
+
untracked(() => {
|
|
1071
|
+
this.updateHeaderActions();
|
|
1072
|
+
setTimeout(() => this.addKeyUpEventListener());
|
|
1061
1073
|
});
|
|
1062
|
-
this.updateHeaderActions();
|
|
1063
|
-
setTimeout(() => this.addKeyUpEventListener());
|
|
1064
1074
|
});
|
|
1065
1075
|
this.announceSearchResults();
|
|
1066
1076
|
const configurationService = inject(ConfigurationService);
|
|
@@ -1084,7 +1094,7 @@ class SearchHeaderComponent {
|
|
|
1084
1094
|
updateHeaderActions() {
|
|
1085
1095
|
const headerActions = [];
|
|
1086
1096
|
if (this.hasAdvanced()) {
|
|
1087
|
-
const simpleAdvancedAction = this.simpleAdvancedAction
|
|
1097
|
+
const simpleAdvancedAction = this.simpleAdvancedAction;
|
|
1088
1098
|
simpleAdvancedAction.labelKey =
|
|
1089
1099
|
this.viewMode() === 'basic'
|
|
1090
1100
|
? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.TEXT'
|
|
@@ -1126,7 +1136,9 @@ class SearchHeaderComponent {
|
|
|
1126
1136
|
else {
|
|
1127
1137
|
announmentKey = 'OCX_SEARCH_HEADER.ANNOUNCEMENTS.RESULTS_FOUND';
|
|
1128
1138
|
}
|
|
1129
|
-
firstValueFrom(this.translate.get(announmentKey, {
|
|
1139
|
+
firstValueFrom(this.translate.get(announmentKey, {
|
|
1140
|
+
count: !this.loading() && this.searchResultsCount() ? this.searchResultsCount() : null,
|
|
1141
|
+
})).then((translatedText) => {
|
|
1130
1142
|
this.liveAnnouncer.announce(translatedText, 'polite');
|
|
1131
1143
|
});
|
|
1132
1144
|
});
|
|
@@ -1328,28 +1340,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1328
1340
|
}]
|
|
1329
1341
|
}], ctorParameters: () => [], propDecorators: { ocxLoadingIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocxLoadingIndicator", required: false }] }], overlayFullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayFullPage", required: false }] }], isLoaderSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoaderSmall", required: false }] }] } });
|
|
1330
1342
|
|
|
1343
|
+
class DataViewStateService {
|
|
1344
|
+
constructor() {
|
|
1345
|
+
this.layout = signal('grid', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
1346
|
+
this.activeColumnGroupKey = signal(undefined, ...(ngDevMode ? [{ debugName: "activeColumnGroupKey" }] : []));
|
|
1347
|
+
this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
1348
|
+
this.actionColumnConfigFrozen = signal(false, ...(ngDevMode ? [{ debugName: "actionColumnConfigFrozen" }] : []));
|
|
1349
|
+
this.actionColumnConfigPosition = signal('right', ...(ngDevMode ? [{ debugName: "actionColumnConfigPosition" }] : []));
|
|
1350
|
+
this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
1351
|
+
this.additionalActions = signal([], ...(ngDevMode ? [{ debugName: "additionalActions" }] : []));
|
|
1352
|
+
this.sortColumn = signal('', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
|
|
1353
|
+
this.sortDirection = signal("NONE" /* DataSortDirection.NONE */, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
|
|
1354
|
+
this.filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
1355
|
+
this.selectedRows = signal([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
|
|
1356
|
+
this.expandedRows = signal([], ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
|
|
1357
|
+
this.activePage = signal(0, ...(ngDevMode ? [{ debugName: "activePage" }] : []));
|
|
1358
|
+
this.pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
1359
|
+
this.listGridPaginator = signal(true, ...(ngDevMode ? [{ debugName: "listGridPaginator" }] : []));
|
|
1360
|
+
this.tablePaginator = signal(true, ...(ngDevMode ? [{ debugName: "tablePaginator" }] : []));
|
|
1361
|
+
}
|
|
1362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1363
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewStateService }); }
|
|
1364
|
+
}
|
|
1365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewStateService, decorators: [{
|
|
1366
|
+
type: Injectable
|
|
1367
|
+
}] });
|
|
1368
|
+
|
|
1331
1369
|
class ColumnGroupSelectionComponent {
|
|
1370
|
+
set selectedGroupKey(value) {
|
|
1371
|
+
this.stateService.activeColumnGroupKey.set(value);
|
|
1372
|
+
}
|
|
1373
|
+
set columns(value) {
|
|
1374
|
+
this.stateService.columns.set(value);
|
|
1375
|
+
}
|
|
1332
1376
|
constructor() {
|
|
1333
|
-
this.
|
|
1334
|
-
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
1377
|
+
this.stateService = inject(DataViewStateService);
|
|
1335
1378
|
this.placeholderKey = input('', ...(ngDevMode ? [{ debugName: "placeholderKey" }] : []));
|
|
1336
1379
|
this.defaultGroupKey = input('', ...(ngDevMode ? [{ debugName: "defaultGroupKey" }] : []));
|
|
1337
1380
|
this.customGroupKey = input('', ...(ngDevMode ? [{ debugName: "customGroupKey" }] : []));
|
|
1338
1381
|
this.groupSelectionChanged = output();
|
|
1339
1382
|
this.componentStateChanged = output();
|
|
1340
1383
|
this.allGroupKeys = computed(() => {
|
|
1341
|
-
const columns = this.columns();
|
|
1342
|
-
const selectedGroupKey = this.
|
|
1384
|
+
const columns = this.stateService.columns();
|
|
1385
|
+
const selectedGroupKey = this.stateService.activeColumnGroupKey();
|
|
1343
1386
|
const defaultGroupKey = this.defaultGroupKey();
|
|
1344
1387
|
return columns
|
|
1345
1388
|
.flatMap((c) => c.predefinedGroupKeys || [])
|
|
1346
1389
|
.concat([defaultGroupKey])
|
|
1347
|
-
.concat([selectedGroupKey])
|
|
1390
|
+
.concat(selectedGroupKey ? [selectedGroupKey] : [])
|
|
1348
1391
|
.filter((value) => !!value)
|
|
1349
1392
|
.filter((value, index, self) => self.indexOf(value) === index && value != null);
|
|
1350
1393
|
}, ...(ngDevMode ? [{ debugName: "allGroupKeys" }] : []));
|
|
1351
1394
|
effect(() => {
|
|
1352
|
-
const selected = this.
|
|
1395
|
+
const selected = this.stateService.activeColumnGroupKey();
|
|
1353
1396
|
const custom = this.customGroupKey();
|
|
1354
1397
|
if (selected === custom) {
|
|
1355
1398
|
this.componentStateChanged.emit({
|
|
@@ -1359,14 +1402,14 @@ class ColumnGroupSelectionComponent {
|
|
|
1359
1402
|
});
|
|
1360
1403
|
}
|
|
1361
1404
|
ngOnInit() {
|
|
1362
|
-
const selected = this.
|
|
1405
|
+
const selected = this.stateService.activeColumnGroupKey();
|
|
1363
1406
|
if (selected === this.customGroupKey()) {
|
|
1364
1407
|
this.componentStateChanged.emit({
|
|
1365
1408
|
activeColumnGroupKey: selected,
|
|
1366
1409
|
});
|
|
1367
1410
|
return;
|
|
1368
1411
|
}
|
|
1369
|
-
const activeColumns = this.columns().filter((c) => c.predefinedGroupKeys?.includes(selected ?? this.defaultGroupKey()));
|
|
1412
|
+
const activeColumns = this.stateService.columns().filter((c) => c.predefinedGroupKeys?.includes(selected ?? this.defaultGroupKey()));
|
|
1370
1413
|
this.componentStateChanged.emit({
|
|
1371
1414
|
activeColumnGroupKey: selected,
|
|
1372
1415
|
displayedColumns: activeColumns,
|
|
@@ -1376,9 +1419,8 @@ class ColumnGroupSelectionComponent {
|
|
|
1376
1419
|
if (event.value === this.customGroupKey()) {
|
|
1377
1420
|
return;
|
|
1378
1421
|
}
|
|
1379
|
-
|
|
1380
|
-
this.
|
|
1381
|
-
const activeColumns = this.columns().filter((c) => c.predefinedGroupKeys?.includes(event.value));
|
|
1422
|
+
this.stateService.activeColumnGroupKey.set(event.value);
|
|
1423
|
+
const activeColumns = this.stateService.columns().filter((c) => c.predefinedGroupKeys?.includes(event.value));
|
|
1382
1424
|
this.groupSelectionChanged.emit({ activeColumns, groupKey: event.value });
|
|
1383
1425
|
this.componentStateChanged.emit({
|
|
1384
1426
|
activeColumnGroupKey: event.value,
|
|
@@ -1386,12 +1428,16 @@ class ColumnGroupSelectionComponent {
|
|
|
1386
1428
|
});
|
|
1387
1429
|
}
|
|
1388
1430
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: { classPropertyName: "selectedGroupKey", publicName: "selectedGroupKey", isSignal:
|
|
1431
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: { classPropertyName: "selectedGroupKey", publicName: "selectedGroupKey", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if (allGroupKeys().length) {\n <p-select\n class=\"p-inputwrapper-filled\"\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"allGroupKeys()\"\n [placeholder]=\"placeholderKey() | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n } @if (allGroupKeys().length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1390
1432
|
}
|
|
1391
1433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
1392
1434
|
type: Component,
|
|
1393
1435
|
args: [{ standalone: false, selector: 'ocx-column-group-selection', template: "<p-floatlabel variant=\"on\">\n @if (allGroupKeys().length) {\n <p-select\n class=\"p-inputwrapper-filled\"\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"allGroupKeys()\"\n [placeholder]=\"placeholderKey() | translate\"\n [(ngModel)]=\"selectedGroupKey\"\n [ariaLabel]=\"'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABEL' | translate\"\n >\n <ng-template let-item #item> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem> {{ item ? (item | translate) : ''}} </ng-template>\n </p-select>\n } @if (allGroupKeys().length) {\n <label for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n }\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
1394
|
-
}], ctorParameters: () => [], propDecorators: { selectedGroupKey: [{
|
|
1436
|
+
}], ctorParameters: () => [], propDecorators: { selectedGroupKey: [{
|
|
1437
|
+
type: Input
|
|
1438
|
+
}], columns: [{
|
|
1439
|
+
type: Input
|
|
1440
|
+
}], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], defaultGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGroupKey", required: false }] }], customGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupKey", required: false }] }], groupSelectionChanged: [{ type: i0.Output, args: ["groupSelectionChanged"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }] } });
|
|
1395
1441
|
|
|
1396
1442
|
class OcxContentComponent {
|
|
1397
1443
|
constructor() {
|
|
@@ -1438,8 +1484,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1438
1484
|
}], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
|
|
1439
1485
|
|
|
1440
1486
|
class CustomGroupColumnSelectorComponent {
|
|
1487
|
+
set columns(value) {
|
|
1488
|
+
this.stateService.columns.set(value);
|
|
1489
|
+
}
|
|
1490
|
+
set frozenActionColumn(value) {
|
|
1491
|
+
this.stateService.actionColumnConfigFrozen.set(value);
|
|
1492
|
+
}
|
|
1493
|
+
set actionColumnPosition(value) {
|
|
1494
|
+
this.stateService.actionColumnConfigPosition.set(value);
|
|
1495
|
+
}
|
|
1441
1496
|
constructor() {
|
|
1442
|
-
this.
|
|
1497
|
+
this.stateService = inject(DataViewStateService);
|
|
1443
1498
|
this.displayedColumns = model([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
|
|
1444
1499
|
this.customGroupKey = input('', ...(ngDevMode ? [{ debugName: "customGroupKey" }] : []));
|
|
1445
1500
|
this.dialogTitle = input('', ...(ngDevMode ? [{ debugName: "dialogTitle" }] : []));
|
|
@@ -1460,8 +1515,6 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1460
1515
|
this.activeColumnsLabelKey = input('', ...(ngDevMode ? [{ debugName: "activeColumnsLabelKey" }] : []));
|
|
1461
1516
|
this.inactiveColumnsLabel = input('', ...(ngDevMode ? [{ debugName: "inactiveColumnsLabel" }] : []));
|
|
1462
1517
|
this.inactiveColumnsLabelKey = input('', ...(ngDevMode ? [{ debugName: "inactiveColumnsLabelKey" }] : []));
|
|
1463
|
-
this.frozenActionColumn = input(false, ...(ngDevMode ? [{ debugName: "frozenActionColumn" }] : []));
|
|
1464
|
-
this.actionColumnPosition = input('right', ...(ngDevMode ? [{ debugName: "actionColumnPosition" }] : []));
|
|
1465
1518
|
this.columnSelectionChanged = output();
|
|
1466
1519
|
this.actionColumnConfigChanged = output();
|
|
1467
1520
|
this.componentStateChanged = output();
|
|
@@ -1491,8 +1544,8 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1491
1544
|
},
|
|
1492
1545
|
], ...(ngDevMode ? [{ debugName: "frozenOptions" }] : []));
|
|
1493
1546
|
this._actionColumnState = computed(() => ({
|
|
1494
|
-
frozen: this.
|
|
1495
|
-
position: this.
|
|
1547
|
+
frozen: this.stateService.actionColumnConfigFrozen(),
|
|
1548
|
+
position: this.stateService.actionColumnConfigPosition(),
|
|
1496
1549
|
}), ...(ngDevMode ? [{ debugName: "_actionColumnState" }] : []));
|
|
1497
1550
|
effect(() => {
|
|
1498
1551
|
this.componentStateChanged.emit({
|
|
@@ -1510,9 +1563,9 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1510
1563
|
onOpenCustomGroupColumnSelectionDialogClick() {
|
|
1511
1564
|
this.displayedColumnsModel.set([...this.displayedColumns()]);
|
|
1512
1565
|
const displayedIds = new Set(this.displayedColumnsModel().map((c) => c.id));
|
|
1513
|
-
this.hiddenColumnsModel.set(this.columns().filter((column) => !displayedIds.has(column.id)));
|
|
1514
|
-
this.frozenActionColumnModel.set(this.
|
|
1515
|
-
this.actionColumnPositionModel.set(this.
|
|
1566
|
+
this.hiddenColumnsModel.set(this.stateService.columns().filter((column) => !displayedIds.has(column.id)));
|
|
1567
|
+
this.frozenActionColumnModel.set(this.stateService.actionColumnConfigFrozen());
|
|
1568
|
+
this.actionColumnPositionModel.set(this.stateService.actionColumnConfigPosition());
|
|
1516
1569
|
this.visible.set(true);
|
|
1517
1570
|
}
|
|
1518
1571
|
onSaveClick() {
|
|
@@ -1525,8 +1578,8 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1525
1578
|
displayedColumns: [...this.displayedColumnsModel()],
|
|
1526
1579
|
});
|
|
1527
1580
|
}
|
|
1528
|
-
if (this.
|
|
1529
|
-
this.
|
|
1581
|
+
if (this.stateService.actionColumnConfigFrozen() !== this.frozenActionColumnModel() ||
|
|
1582
|
+
this.stateService.actionColumnConfigPosition() !== this.actionColumnPositionModel()) {
|
|
1530
1583
|
this.actionColumnConfigChanged.emit({
|
|
1531
1584
|
frozenActionColumn: this.frozenActionColumnModel(),
|
|
1532
1585
|
actionColumnPosition: this.actionColumnPositionModel(),
|
|
@@ -1539,18 +1592,27 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1539
1592
|
},
|
|
1540
1593
|
activeColumnGroupKey: this.customGroupKey(),
|
|
1541
1594
|
});
|
|
1595
|
+
this.stateService.actionColumnConfigFrozen.set(this.frozenActionColumnModel());
|
|
1596
|
+
this.stateService.actionColumnConfigPosition.set(this.actionColumnPositionModel());
|
|
1597
|
+
this.stateService.activeColumnGroupKey.set(this.customGroupKey());
|
|
1542
1598
|
}
|
|
1543
1599
|
}
|
|
1544
1600
|
onCancelClick() {
|
|
1545
1601
|
this.visible.set(false);
|
|
1546
1602
|
}
|
|
1547
1603
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogTitleKey: { classPropertyName: "dialogTitleKey", publicName: "dialogTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitle: { classPropertyName: "openButtonTitle", publicName: "openButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitleKey: { classPropertyName: "openButtonTitleKey", publicName: "openButtonTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabel: { classPropertyName: "openButtonAriaLabel", publicName: "openButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabelKey: { classPropertyName: "openButtonAriaLabelKey", publicName: "openButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabel: { classPropertyName: "saveButtonLabel", publicName: "saveButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabelKey: { classPropertyName: "saveButtonLabelKey", publicName: "saveButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabel: { classPropertyName: "saveButtonAriaLabel", publicName: "saveButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabelKey: { classPropertyName: "saveButtonAriaLabelKey", publicName: "saveButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabelKey: { classPropertyName: "cancelButtonLabelKey", publicName: "cancelButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabelKey: { classPropertyName: "cancelButtonAriaLabelKey", publicName: "cancelButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabel: { classPropertyName: "activeColumnsLabel", publicName: "activeColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabelKey: { classPropertyName: "activeColumnsLabelKey", publicName: "activeColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabel: { classPropertyName: "inactiveColumnsLabel", publicName: "inactiveColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabelKey: { classPropertyName: "inactiveColumnsLabelKey", publicName: "inactiveColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayedColumns: "displayedColumnsChange", columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n tooltipPosition=\"top\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n #dialog\n id=\"customGroupColumnSelectorDialog\"\n [(visible)]=\"visible\"\n [style]=\"{ width: '70%' }\"\n [modal]=\"true\"\n [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n <ng-template pTemplate=\"header\">\n <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel()\"\n [target]=\"hiddenColumnsModel()\"\n [sourceHeader]=\"activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n >\n <ng-template let-item #item>\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n </p>\n <p-selectbutton\n [options]=\"frozenOptions()\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"frozenActionColumnLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n </p>\n <p-selectbutton\n [options]=\"alignmentOptions()\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n name=\"action-column-position-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"actionColumnPositionLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogTitleKey: { classPropertyName: "dialogTitleKey", publicName: "dialogTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitle: { classPropertyName: "openButtonTitle", publicName: "openButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitleKey: { classPropertyName: "openButtonTitleKey", publicName: "openButtonTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabel: { classPropertyName: "openButtonAriaLabel", publicName: "openButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabelKey: { classPropertyName: "openButtonAriaLabelKey", publicName: "openButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabel: { classPropertyName: "saveButtonLabel", publicName: "saveButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabelKey: { classPropertyName: "saveButtonLabelKey", publicName: "saveButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabel: { classPropertyName: "saveButtonAriaLabel", publicName: "saveButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabelKey: { classPropertyName: "saveButtonAriaLabelKey", publicName: "saveButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabelKey: { classPropertyName: "cancelButtonLabelKey", publicName: "cancelButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabelKey: { classPropertyName: "cancelButtonAriaLabelKey", publicName: "cancelButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabel: { classPropertyName: "activeColumnsLabel", publicName: "activeColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabelKey: { classPropertyName: "activeColumnsLabelKey", publicName: "activeColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabel: { classPropertyName: "inactiveColumnsLabel", publicName: "inactiveColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabelKey: { classPropertyName: "inactiveColumnsLabelKey", publicName: "inactiveColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { displayedColumns: "displayedColumnsChange", columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n tooltipPosition=\"top\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n #dialog\n id=\"customGroupColumnSelectorDialog\"\n [(visible)]=\"visible\"\n [style]=\"{ width: '70%' }\"\n [modal]=\"true\"\n [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n <ng-template pTemplate=\"header\">\n <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel()\"\n [target]=\"hiddenColumnsModel()\"\n [sourceHeader]=\"activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n >\n <ng-template let-item #item>\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n </p>\n <p-selectbutton\n [options]=\"frozenOptions()\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"frozenActionColumnLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n </p>\n <p-selectbutton\n [options]=\"alignmentOptions()\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n name=\"action-column-position-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"actionColumnPositionLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1549
1605
|
}
|
|
1550
1606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
|
|
1551
1607
|
type: Component,
|
|
1552
1608
|
args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n tooltipPosition=\"top\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n #dialog\n id=\"customGroupColumnSelectorDialog\"\n [(visible)]=\"visible\"\n [style]=\"{ width: '70%' }\"\n [modal]=\"true\"\n [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n <ng-template pTemplate=\"header\">\n <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel()\"\n [target]=\"hiddenColumnsModel()\"\n [sourceHeader]=\"activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n [dragdrop]=\"true\"\n [responsive]=\"false\"\n [sourceStyle]=\"{ height: '300px' }\"\n [targetStyle]=\"{ height: '300px' }\"\n [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n >\n <ng-template let-item #item>\n <div>{{ item.nameKey | translate }}</div>\n </ng-template>\n </p-pickList>\n\n <div class=\"pt-4\">\n <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n <div class=\"flex gap-6 px-3\">\n <div>\n <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n </p>\n <p-selectbutton\n [options]=\"frozenOptions()\"\n [(ngModel)]=\"frozenActionColumnModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"frozenActionColumn\"\n name=\"frozen-action-column-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"frozenActionColumnLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n </p>\n <p-selectbutton\n [options]=\"alignmentOptions()\"\n [(ngModel)]=\"actionColumnPositionModel\"\n optionLabel=\"label\"\n optionValue=\"value\"\n id=\"actionColumnPosition\"\n name=\"action-column-position-select-button\"\n [allowEmpty]=\"false\"\n ariaLabelledBy=\"actionColumnPositionLabel\"\n >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n </div>\n </div>\n\n <ng-template pTemplate=\"footer\">\n <p-button\n id=\"cancelButton\"\n (onClick)=\"onCancelClick()\"\n [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n ></p-button>\n </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"] }]
|
|
1553
|
-
}], ctorParameters: () => [], propDecorators: { columns: [{
|
|
1609
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{
|
|
1610
|
+
type: Input
|
|
1611
|
+
}], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }, { type: i0.Output, args: ["displayedColumnsChange"] }], customGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupKey", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], dialogTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitleKey", required: false }] }], openButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonTitle", required: false }] }], openButtonTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonTitleKey", required: false }] }], openButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonAriaLabel", required: false }] }], openButtonAriaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonAriaLabelKey", required: false }] }], saveButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonLabel", required: false }] }], saveButtonLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonLabelKey", required: false }] }], saveButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonAriaLabel", required: false }] }], saveButtonAriaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonAriaLabelKey", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], cancelButtonLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabelKey", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], cancelButtonAriaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabelKey", required: false }] }], activeColumnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColumnsLabel", required: false }] }], activeColumnsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColumnsLabelKey", required: false }] }], inactiveColumnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactiveColumnsLabel", required: false }] }], inactiveColumnsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactiveColumnsLabelKey", required: false }] }], frozenActionColumn: [{
|
|
1612
|
+
type: Input
|
|
1613
|
+
}], actionColumnPosition: [{
|
|
1614
|
+
type: Input
|
|
1615
|
+
}], columnSelectionChanged: [{ type: i0.Output, args: ["columnSelectionChanged"] }], actionColumnConfigChanged: [{ type: i0.Output, args: ["actionColumnConfigChanged"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }] } });
|
|
1554
1616
|
|
|
1555
1617
|
const ALL_VIEW_LAYOUTS = [
|
|
1556
1618
|
{
|
|
@@ -1577,32 +1639,35 @@ const ALL_VIEW_LAYOUTS = [
|
|
|
1577
1639
|
];
|
|
1578
1640
|
class DataLayoutSelectionComponent {
|
|
1579
1641
|
constructor() {
|
|
1642
|
+
this.stateService = inject(DataViewStateService);
|
|
1580
1643
|
this.supportedViewLayouts = input([], ...(ngDevMode ? [{ debugName: "supportedViewLayouts" }] : []));
|
|
1581
|
-
this.layout = model('table', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
1582
1644
|
this.dataViewLayoutChange = output();
|
|
1583
1645
|
this.componentStateChanged = output();
|
|
1584
1646
|
this.viewingLayouts = computed(() => ALL_VIEW_LAYOUTS.filter((vl) => this.supportedViewLayouts().includes(vl.layout)), ...(ngDevMode ? [{ debugName: "viewingLayouts" }] : []));
|
|
1585
|
-
this.selectedViewLayout = computed(() => ALL_VIEW_LAYOUTS.find((v) => v.layout === this.layout()), ...(ngDevMode ? [{ debugName: "selectedViewLayout" }] : []));
|
|
1647
|
+
this.selectedViewLayout = computed(() => ALL_VIEW_LAYOUTS.find((v) => v.layout === this.stateService.layout()), ...(ngDevMode ? [{ debugName: "selectedViewLayout" }] : []));
|
|
1648
|
+
}
|
|
1649
|
+
set layout(value) {
|
|
1650
|
+
this.stateService.layout.set(value);
|
|
1586
1651
|
}
|
|
1587
1652
|
ngOnInit() {
|
|
1588
1653
|
this.componentStateChanged.emit({
|
|
1589
|
-
layout: this.layout(),
|
|
1654
|
+
layout: this.stateService.layout(),
|
|
1590
1655
|
});
|
|
1591
1656
|
}
|
|
1592
1657
|
onDataViewLayoutChange(event) {
|
|
1593
|
-
this.layout.set(event.layout);
|
|
1658
|
+
this.stateService.layout.set(event.layout);
|
|
1594
1659
|
this.dataViewLayoutChange.emit(event.layout);
|
|
1595
|
-
this.componentStateChanged.emit({
|
|
1596
|
-
layout: event.layout,
|
|
1597
|
-
});
|
|
1660
|
+
this.componentStateChanged.emit({ layout: event.layout });
|
|
1598
1661
|
}
|
|
1599
1662
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal:
|
|
1663
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dataViewLayoutChange: "dataViewLayoutChange", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n @if (viewingLayouts().length > 1) {\n <p-selectbutton\n [options]=\"viewingLayouts()\"\n [ngModel]=\"selectedViewLayout()\"\n optionLabel=\"id\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n [ariaLabel]=\"'OCX_DATA_LAYOUT_SELECTION.SELECT_BUTTON.ARIA_LABEL' | translate\"\n >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [ocxTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\" [attr.id]=\"item.id\">{{ item.labelKey | translate }}</span>\n </ng-template>\n </p-selectbutton>\n }\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1601
1664
|
}
|
|
1602
1665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1603
1666
|
type: Component,
|
|
1604
1667
|
args: [{ standalone: false, selector: 'ocx-data-layout-selection', template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n @if (viewingLayouts().length > 1) {\n <p-selectbutton\n [options]=\"viewingLayouts()\"\n [ngModel]=\"selectedViewLayout()\"\n optionLabel=\"id\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n [ariaLabel]=\"'OCX_DATA_LAYOUT_SELECTION.SELECT_BUTTON.ARIA_LABEL' | translate\"\n >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [ocxTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\" [attr.id]=\"item.id\">{{ item.labelKey | translate }}</span>\n </ng-template>\n </p-selectbutton>\n }\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"] }]
|
|
1605
|
-
}], propDecorators: { supportedViewLayouts: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedViewLayouts", required: false }] }], layout: [{
|
|
1668
|
+
}], propDecorators: { supportedViewLayouts: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedViewLayouts", required: false }] }], layout: [{
|
|
1669
|
+
type: Input
|
|
1670
|
+
}], dataViewLayoutChange: [{ type: i0.Output, args: ["dataViewLayoutChange"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }] } });
|
|
1606
1671
|
|
|
1607
1672
|
var ColumnType;
|
|
1608
1673
|
(function (ColumnType) {
|
|
@@ -1903,6 +1968,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1903
1968
|
}], ctorParameters: () => [] });
|
|
1904
1969
|
|
|
1905
1970
|
class DataListGridComponent extends DataSortBase {
|
|
1971
|
+
set page(value) {
|
|
1972
|
+
this.stateService.activePage.set(value);
|
|
1973
|
+
}
|
|
1974
|
+
set pageSize(value) {
|
|
1975
|
+
this.stateService.pageSize.set(value);
|
|
1976
|
+
}
|
|
1977
|
+
set layout(value) {
|
|
1978
|
+
this.stateService.layout.set(value);
|
|
1979
|
+
}
|
|
1980
|
+
set columns(value) {
|
|
1981
|
+
this.stateService.columns.set(value);
|
|
1982
|
+
}
|
|
1983
|
+
set data(value) {
|
|
1984
|
+
this.stateService.data.set(value);
|
|
1985
|
+
}
|
|
1986
|
+
set filters(value) {
|
|
1987
|
+
this.stateService.filters.set(value);
|
|
1988
|
+
}
|
|
1989
|
+
set sortDirection(value) {
|
|
1990
|
+
this.stateService.sortDirection.set(value);
|
|
1991
|
+
}
|
|
1992
|
+
set sortField(value) {
|
|
1993
|
+
this.stateService.sortColumn.set(value);
|
|
1994
|
+
}
|
|
1906
1995
|
get gridItemSubtitleLines() {
|
|
1907
1996
|
return this.gridItemSubtitleLinesTemplate() || this.gridItemSubtitleLinesChildTemplate();
|
|
1908
1997
|
}
|
|
@@ -1933,6 +2022,9 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1933
2022
|
get dateListValue() {
|
|
1934
2023
|
return this.dateListValueTemplate() || this.dateListValueChildTemplate();
|
|
1935
2024
|
}
|
|
2025
|
+
set additionalActions(value) {
|
|
2026
|
+
this.stateService.additionalActions.set(value);
|
|
2027
|
+
}
|
|
1936
2028
|
get viewItemObserved() {
|
|
1937
2029
|
const dv = this.injector.get('DataViewComponent', null);
|
|
1938
2030
|
return dv?.viewItemObserved || dv?.viewItem.observed() || this.viewItem.observed();
|
|
@@ -1946,9 +2038,9 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1946
2038
|
return dv?.deleteItemObserved || dv?.deleteItem.observed() || this.deleteItem.observed();
|
|
1947
2039
|
}
|
|
1948
2040
|
get sortDirectionNumber() {
|
|
1949
|
-
if (this.sortDirection() === "ASCENDING" /* DataSortDirection.ASCENDING */)
|
|
2041
|
+
if (this.stateService.sortDirection() === "ASCENDING" /* DataSortDirection.ASCENDING */)
|
|
1950
2042
|
return 1;
|
|
1951
|
-
if (this.sortDirection() === "DESCENDING" /* DataSortDirection.DESCENDING */)
|
|
2043
|
+
if (this.stateService.sortDirection() === "DESCENDING" /* DataSortDirection.DESCENDING */)
|
|
1952
2044
|
return -1;
|
|
1953
2045
|
return 0;
|
|
1954
2046
|
}
|
|
@@ -1956,6 +2048,7 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1956
2048
|
const locale = inject(LOCALE_ID);
|
|
1957
2049
|
const translateService = inject(TranslateService);
|
|
1958
2050
|
super(locale, translateService);
|
|
2051
|
+
this.stateService = inject(DataViewStateService);
|
|
1959
2052
|
this.userService = inject(UserService);
|
|
1960
2053
|
this.router = inject(Router);
|
|
1961
2054
|
this.injector = inject(Injector);
|
|
@@ -1967,16 +2060,14 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1967
2060
|
this.clientSideSorting = input(true, ...(ngDevMode ? [{ debugName: "clientSideSorting" }] : []));
|
|
1968
2061
|
this.clientSideFiltering = input(true, ...(ngDevMode ? [{ debugName: "clientSideFiltering" }] : []));
|
|
1969
2062
|
this.sortStates = input([], ...(ngDevMode ? [{ debugName: "sortStates" }] : []));
|
|
1970
|
-
this.pageSize = model(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
1971
2063
|
this.pageSizes = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "pageSizes" }] : []));
|
|
1972
2064
|
this.displayedPageSize = computed(() => {
|
|
1973
|
-
const pageSize = this.pageSize();
|
|
2065
|
+
const pageSize = this.stateService.pageSize();
|
|
1974
2066
|
const pageSizes = this.pageSizes();
|
|
1975
2067
|
return pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50;
|
|
1976
2068
|
}, ...(ngDevMode ? [{ debugName: "displayedPageSize" }] : []));
|
|
1977
2069
|
this.emptyResultsMessage = input(undefined, ...(ngDevMode ? [{ debugName: "emptyResultsMessage" }] : []));
|
|
1978
2070
|
this.fallbackImage = input('placeholder.png', ...(ngDevMode ? [{ debugName: "fallbackImage" }] : []));
|
|
1979
|
-
this.layout = input('grid', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
1980
2071
|
this.viewPermission = input(undefined, ...(ngDevMode ? [{ debugName: "viewPermission" }] : []));
|
|
1981
2072
|
this.editPermission = input(undefined, ...(ngDevMode ? [{ debugName: "editPermission" }] : []));
|
|
1982
2073
|
this.deletePermission = input(undefined, ...(ngDevMode ? [{ debugName: "deletePermission" }] : []));
|
|
@@ -1990,8 +2081,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1990
2081
|
this.editMenuItemKey = input(undefined, ...(ngDevMode ? [{ debugName: "editMenuItemKey" }] : []));
|
|
1991
2082
|
this.deleteMenuItemKey = input(undefined, ...(ngDevMode ? [{ debugName: "deleteMenuItemKey" }] : []));
|
|
1992
2083
|
this.paginator = input(true, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
1993
|
-
this.page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
1994
|
-
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
1995
2084
|
this.filteredColumns = computed(() => {
|
|
1996
2085
|
const subtitleLineIds = this.subtitleLineIds() ?? [];
|
|
1997
2086
|
const ids = [...subtitleLineIds];
|
|
@@ -1999,7 +2088,7 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1999
2088
|
if (titleLineId) {
|
|
2000
2089
|
ids.unshift(titleLineId);
|
|
2001
2090
|
}
|
|
2002
|
-
return this.columns().filter((c) => !ids.includes(c.id));
|
|
2091
|
+
return this.stateService.columns().filter((c) => !ids.includes(c.id));
|
|
2003
2092
|
}, ...(ngDevMode ? [{ debugName: "filteredColumns" }] : []));
|
|
2004
2093
|
this.name = model(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
2005
2094
|
this.totalRecordsOnServer = input(undefined, ...(ngDevMode ? [{ debugName: "totalRecordsOnServer" }] : []));
|
|
@@ -2017,12 +2106,8 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2017
2106
|
totalRecordsOnServer,
|
|
2018
2107
|
};
|
|
2019
2108
|
}, ...(ngDevMode ? [{ debugName: "params" }] : []));
|
|
2020
|
-
this.
|
|
2021
|
-
this.
|
|
2022
|
-
this.filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
2023
|
-
this.previousFilters = computedPrevious(this.filters);
|
|
2024
|
-
this.sortDirection = input("NONE" /* DataSortDirection.NONE */, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
|
|
2025
|
-
this.sortField = input('', ...(ngDevMode ? [{ debugName: "sortField" }] : []));
|
|
2109
|
+
this.previousData = computedPrevious(this.stateService.data);
|
|
2110
|
+
this.previousFilters = computedPrevious(this.stateService.filters);
|
|
2026
2111
|
this.permissions$ = this.getPermissions();
|
|
2027
2112
|
this.gridItemSubtitleLinesTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "gridItemSubtitleLinesTemplate" }] : []));
|
|
2028
2113
|
this.gridItemSubtitleLinesChildTemplate = contentChild('gridItemSubtitleLines', ...(ngDevMode ? [{ debugName: "gridItemSubtitleLinesChildTemplate" }] : []));
|
|
@@ -2044,12 +2129,11 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2044
2129
|
this.stringListValueChildTemplate = contentChild('stringListValue', ...(ngDevMode ? [{ debugName: "stringListValueChildTemplate" }] : []));
|
|
2045
2130
|
this.dateListValueTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "dateListValueTemplate" }] : []));
|
|
2046
2131
|
this.dateListValueChildTemplate = contentChild('dateListValue', ...(ngDevMode ? [{ debugName: "dateListValueChildTemplate" }] : []));
|
|
2047
|
-
this.additionalActions = input([], ...(ngDevMode ? [{ debugName: "additionalActions" }] : []));
|
|
2048
2132
|
this.inlineListActions = computed(() => {
|
|
2049
|
-
return this.additionalActions().filter((action) => !action.showAsOverflow);
|
|
2133
|
+
return this.stateService.additionalActions().filter((action) => !action.showAsOverflow);
|
|
2050
2134
|
}, ...(ngDevMode ? [{ debugName: "inlineListActions" }] : []));
|
|
2051
2135
|
this.overflowListActions = computed(() => {
|
|
2052
|
-
return this.additionalActions().filter((action) => action.showAsOverflow);
|
|
2136
|
+
return this.stateService.additionalActions().filter((action) => action.showAsOverflow);
|
|
2053
2137
|
}, ...(ngDevMode ? [{ debugName: "overflowListActions" }] : []));
|
|
2054
2138
|
this.overflowListActions$ = toObservable(this.overflowListActions);
|
|
2055
2139
|
this.currentMenuRow = signal(null, ...(ngDevMode ? [{ debugName: "currentMenuRow" }] : []));
|
|
@@ -2085,12 +2169,12 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2085
2169
|
return (this.viewItemObserved ? 1 : 0) + (this.deleteItemObserved ? 1 : 0) + (this.editItemObserved ? 1 : 0);
|
|
2086
2170
|
}, ...(ngDevMode ? [{ debugName: "observedOutputs" }] : []));
|
|
2087
2171
|
this.selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
2088
|
-
this.permittedAdditionalActions$ = combineLatest([this.permissions$, toObservable(this.additionalActions)]).pipe(map(([permissions, additionalActions]) => {
|
|
2172
|
+
this.permittedAdditionalActions$ = combineLatest([this.permissions$, toObservable(this.stateService.additionalActions)]).pipe(map(([permissions, additionalActions]) => {
|
|
2089
2173
|
return this.filterActionsBasedOnPermissions(additionalActions, permissions);
|
|
2090
2174
|
}));
|
|
2091
2175
|
this.gridMenuState$ = combineLatest([
|
|
2092
2176
|
// Trigger the whole chain to recalculate when data changes, to update the enabled/visible state of menu items based on the selected row
|
|
2093
|
-
toObservable(this.data),
|
|
2177
|
+
toObservable(this.stateService.data),
|
|
2094
2178
|
this.permissions$,
|
|
2095
2179
|
this.permittedAdditionalActions$,
|
|
2096
2180
|
toObservable(this.selectedItem),
|
|
@@ -2153,11 +2237,11 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2153
2237
|
},
|
|
2154
2238
|
})));
|
|
2155
2239
|
this.displayedItems$ = combineLatest([
|
|
2156
|
-
toObservable(this.data),
|
|
2157
|
-
toObservable(this.filters),
|
|
2158
|
-
toObservable(this.
|
|
2159
|
-
toObservable(this.sortDirection),
|
|
2160
|
-
toObservable(this.columns),
|
|
2240
|
+
toObservable(this.stateService.data),
|
|
2241
|
+
toObservable(this.stateService.filters),
|
|
2242
|
+
toObservable(this.stateService.sortColumn),
|
|
2243
|
+
toObservable(this.stateService.sortDirection),
|
|
2244
|
+
toObservable(this.stateService.columns),
|
|
2161
2245
|
toObservable(this.clientSideFiltering),
|
|
2162
2246
|
toObservable(this.clientSideSorting),
|
|
2163
2247
|
]).pipe(map(([data, filters, sortField, sortDirection, columns, clientSideFiltering, clientSideSorting]) => {
|
|
@@ -2188,12 +2272,12 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2188
2272
|
return this.permissions$.pipe(map((permissions) => permissionArray.every((p) => permissions.includes(p))));
|
|
2189
2273
|
}));
|
|
2190
2274
|
effect(() => {
|
|
2191
|
-
const data = this.data();
|
|
2275
|
+
const data = this.stateService.data();
|
|
2192
2276
|
// Not track previousData change to avoid the trigger
|
|
2193
2277
|
untracked(() => {
|
|
2194
2278
|
const previousData = this.previousData();
|
|
2195
2279
|
if (previousData.length && !equal(data, previousData)) {
|
|
2196
|
-
this.
|
|
2280
|
+
this.stateService.activePage.set(0);
|
|
2197
2281
|
}
|
|
2198
2282
|
});
|
|
2199
2283
|
const currentResults = data.length;
|
|
@@ -2203,17 +2287,17 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2203
2287
|
});
|
|
2204
2288
|
});
|
|
2205
2289
|
effect(() => {
|
|
2206
|
-
const columns = this.columns();
|
|
2290
|
+
const columns = this.stateService.columns();
|
|
2207
2291
|
const obs = columns.map((c) => this.getTemplate(c));
|
|
2208
2292
|
this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(columns.map((c, i) => [c.id, values[i]]))), debounceTime(50));
|
|
2209
2293
|
});
|
|
2210
2294
|
effect(() => {
|
|
2211
|
-
this.filters();
|
|
2295
|
+
this.stateService.filters();
|
|
2212
2296
|
// Not track previousFilters change to avoid the trigger
|
|
2213
2297
|
untracked(() => {
|
|
2214
2298
|
const previousFilters = this.previousFilters();
|
|
2215
|
-
if (previousFilters.length && !equal(this.filters(), previousFilters)) {
|
|
2216
|
-
this.
|
|
2299
|
+
if (previousFilters.length && !equal(this.stateService.filters(), previousFilters)) {
|
|
2300
|
+
this.stateService.activePage.set(0);
|
|
2217
2301
|
}
|
|
2218
2302
|
});
|
|
2219
2303
|
});
|
|
@@ -2222,10 +2306,10 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2222
2306
|
this.emitComponentStateChanged();
|
|
2223
2307
|
});
|
|
2224
2308
|
effect(() => {
|
|
2225
|
-
this.pageChanged.emit(this.
|
|
2309
|
+
this.pageChanged.emit(this.stateService.activePage());
|
|
2226
2310
|
});
|
|
2227
2311
|
effect(() => {
|
|
2228
|
-
const pageSize = this.pageSize();
|
|
2312
|
+
const pageSize = this.stateService.pageSize();
|
|
2229
2313
|
if (pageSize === undefined) {
|
|
2230
2314
|
return;
|
|
2231
2315
|
}
|
|
@@ -2261,13 +2345,13 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2261
2345
|
emitComponentStateChanged() {
|
|
2262
2346
|
this.componentStateChanged.emit({
|
|
2263
2347
|
pageSize: this.displayedPageSize(),
|
|
2264
|
-
activePage: this.
|
|
2348
|
+
activePage: this.stateService.activePage(),
|
|
2265
2349
|
});
|
|
2266
2350
|
}
|
|
2267
2351
|
onPageChange(event) {
|
|
2268
2352
|
const page = event.first / event.rows;
|
|
2269
|
-
this.page
|
|
2270
|
-
this.pageSize
|
|
2353
|
+
this.page = page;
|
|
2354
|
+
this.pageSize = event.rows;
|
|
2271
2355
|
}
|
|
2272
2356
|
fieldIsTruthy(object, key) {
|
|
2273
2357
|
return !!this.resolveFieldData(object, key);
|
|
@@ -2424,12 +2508,42 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2424
2508
|
return () => handleActionSync(this.router, action, row);
|
|
2425
2509
|
}
|
|
2426
2510
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2427
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewMenuItemKey: { classPropertyName: "viewMenuItemKey", publicName: "viewMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, editMenuItemKey: { classPropertyName: "editMenuItemKey", publicName: "editMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, deleteMenuItemKey: { classPropertyName: "deleteMenuItemKey", publicName: "deleteMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", page: "pageChange", name: "nameChange", viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"layout()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4$3.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
|
|
2511
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewMenuItemKey: { classPropertyName: "viewMenuItemKey", publicName: "viewMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, editMenuItemKey: { classPropertyName: "editMenuItemKey", publicName: "editMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, deleteMenuItemKey: { classPropertyName: "deleteMenuItemKey", publicName: "deleteMenuItemKey", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { name: "nameChange", viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", parentTemplates: "parentTemplatesChange" }, providers: [
|
|
2512
|
+
{
|
|
2513
|
+
provide: DataViewStateService,
|
|
2514
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
2515
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
2516
|
+
},
|
|
2517
|
+
], queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"stateService.activePage() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"stateService.layout() === 'grid' ? 'grid' : 'list'\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4$3.DataView, selector: "p-dataView, p-dataview, p-data-view", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet], () => [i1.NgTemplateOutlet]] }); }
|
|
2428
2518
|
}
|
|
2429
2519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
2430
2520
|
type: Component,
|
|
2431
|
-
args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"layout()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
|
|
2432
|
-
|
|
2521
|
+
args: [{ standalone: false, selector: 'ocx-data-list-grid', providers: [
|
|
2522
|
+
{
|
|
2523
|
+
provide: DataViewStateService,
|
|
2524
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
2525
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
2526
|
+
},
|
|
2527
|
+
], template: "@if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-dataView\n [value]=\"(displayedItems$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"stateService.activePage() * displayedPageSize()\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize()\"\n [layout]=\"stateService.layout() === 'grid' ? 'grid' : 'list'\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"(totalRecordsOnServer() !== undefined ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey()) | translate:params()\"\n [rowsPerPageOptions]=\"pageSizes() ?? []\"\n [id]=\"'dataListGrid_' + name()\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 grid-nogutter gap-4 w-full\" role=\"list\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"gridItem ?? defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n }\n </div>\n </ng-template>\n <ng-template #list let-rows>\n <div class=\"p-grid p-nogutter grid grid-nogutter\" role=\"list\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"listItem ?? defaultListItem\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item:item,\n first:first,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n } @placeholder {\n <div style=\"width: 100%; height: 80px\"></div>\n } }\n </div>\n </ng-template>\n <ng-template pTemplate=\"empty\">\n <span>{{ emptyResultsMessage() || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n </ng-template>\n</p-dataView>\n}\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 p-1 flex justify-content-center grid-border-divider\" role=\"listitem\">\n <div class=\"data-grid-item card flex flex-column justify-content-between w-12 lg:w-11 mb-4 mt-4 align-self-stretch\">\n <div class=\"flex justify-content-center mb-3\">\n <img\n class=\"image\"\n src=\"{{ item.imagePath || (fallbackImagePath$ | async) }}\"\n (error)=\"imgError(item)\"\n alt=\"{{ resolveFieldData(item, titleLineId()) || '' }}\"\n />\n </div>\n <div class=\"flex flex-row justify-content-between align-items-center\">\n <div class=\"data-grid-items flex-row\">\n <div class=\"item-name font-medium mr-3 text-2xl\">\n @if (hasViewPermission$ | async; as hasViewPermission) {\n <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n } @else {\n <a [routerLink]=\"\">{{ resolveFieldData(item, titleLineId()) || '' }}</a>\n }\n </div>\n <ng-container\n [ngTemplateOutlet]=\"gridItemSubtitleLines ?? defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n @if ((gridMenuItems$ | async); as gridMenuItems) {\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); menu.toggle($event)\"\n icon=\"pi pi-ellipsis-v\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine edit-time text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-first=\"first\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates) {\n <div class=\"col-12\" role=\"listitem\">\n <div class=\"data-list-items p-1\" [ngClass]=\"{ 'list-border-divider': !first }\">\n <div class=\"item-name-row flex flex-row justify-content-between\">\n <div class=\"item-name mr-3 text-2xl font-medium align-content-center\">\n @if (titleLineId()) {\n <span>{{ resolveFieldData(item, titleLineId()) || '' }}</span>\n }\n </div>\n <div class=\"flex flex-row\">\n @if (viewItemObserved && (!viewActionVisibleField() || fieldIsTruthy(item, viewActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-viewButton\"\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n [ocxTooltip]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\n }\"\n [attr.aria-label]=\"(viewMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate\"\n (click)=\"onViewRow(item)\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(item, viewActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (editItemObserved && (!editActionVisibleField() || fieldIsTruthy(item, editActionVisibleField()))) {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-editButton\"\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n [ocxTooltip]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\n }\"\n [attr.aria-label]=\"(editMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate\"\n (click)=\"onEditRow(item)\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(item, editActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @if (deleteItemObserved && (!deleteActionVisibleField() || fieldIsTruthy(item, deleteActionVisibleField())))\n {\n <button\n id=\"{{resolveFieldData(item, 'id')}}-deleteButton\"\n type=\"button\"\n icon=\"pi pi-trash\"\n class=\"p-button-rounded p-button-text p-button-danger mb-1 mr-2 deleteListItemButton\"\n pButton\n [ocxTooltip]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: !!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\n }\"\n [attr.aria-label]=\"(deleteMenuItemKey() || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate\"\n (click)=\"onDeleteRow(item)\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(item, deleteActionEnabledField())\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } @for (action of inlineListActions(); track action) { @if ((!action.actionVisibleField || fieldIsTruthy(item,\n action.actionVisibleField))) {\n <button\n [id]=\"resolveFieldData(item, 'id') + '-' + (action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, item)\"\n [ocxTooltip]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n tooltipPosition=\"top\"\n [tooltipOptions]=\"{\n disabled: action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\n }\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n [attr.name]=\"'data-list-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(item) | async) {\n <p-menu #menu [model]=\"(overflowListMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [ocxTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n [attr.name]=\"'data-list-overflow-item-menu-button'\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"listItemSubtitleLines ?? defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of filteredColumns(); track col) {\n <div class=\"w-12rem my-2 mr-2\">\n <div class=\"font-bold\" [ocxTooltipOnOverflow]=\"col.nameKey | translate\" tooltipPosition=\"top\">\n {{ col.nameKey | translate }}\n </div>\n <div\n [ocxTooltipOnOverflow]=\"col.columnType === columnType.TRANSLATION_KEY ? (resolveFieldData(item,col.id) | translate) : resolveFieldData(item, col.id)\"\n tooltipPosition=\"top\"\n >\n @defer(on viewport;){\n <ng-container\n [ngTemplateOutlet]=\"listValue ?? defaultListValue\"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n >\n </ng-container>\n } @placeholder {\n <p-skeleton width=\"5rem\" />\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n @for (subtitleLineId of subtitleLineIds() ?? []; track subtitleLineId) {\n <div class=\"subtitleLine text-xl my-3\">{{ resolveFieldData(item, subtitleLineId) }}</div>\n }\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyListValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [".image{width:100%;height:100%}.menu-btn{cursor:pointer;min-width:4rem}.list-border-divider{border-top:.0625rem;border-top-style:solid;border-color:var(--p-surface-200)}.grid-border-divider{border:.0625rem;border-style:solid;border-color:var(--p-surface-200)}\n"] }]
|
|
2528
|
+
}], ctorParameters: () => [], propDecorators: { titleLineId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLineId", required: false }] }], subtitleLineIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleLineIds", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], page: [{
|
|
2529
|
+
type: Input
|
|
2530
|
+
}], pageSize: [{
|
|
2531
|
+
type: Input
|
|
2532
|
+
}], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], fallbackImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackImage", required: false }] }], layout: [{
|
|
2533
|
+
type: Input
|
|
2534
|
+
}], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], viewMenuItemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMenuItemKey", required: false }] }], editMenuItemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMenuItemKey", required: false }] }], deleteMenuItemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteMenuItemKey", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], columns: [{
|
|
2535
|
+
type: Input
|
|
2536
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], data: [{
|
|
2537
|
+
type: Input
|
|
2538
|
+
}], filters: [{
|
|
2539
|
+
type: Input
|
|
2540
|
+
}], sortDirection: [{
|
|
2541
|
+
type: Input
|
|
2542
|
+
}], sortField: [{
|
|
2543
|
+
type: Input
|
|
2544
|
+
}], gridItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemSubtitleLinesTemplate", required: false }] }], gridItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['gridItemSubtitleLines', { isSignal: true }] }], listItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemSubtitleLinesTemplate", required: false }] }], listItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['listItemSubtitleLines', { isSignal: true }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], listItemChildTemplate: [{ type: i0.ContentChild, args: ['listItem', { isSignal: true }] }], gridItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemTemplate", required: false }] }], gridItemChildTemplate: [{ type: i0.ContentChild, args: ['gridItem', { isSignal: true }] }], listValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listValueTemplate", required: false }] }], listValueChildTemplate: [{ type: i0.ContentChild, args: ['listValue', { isSignal: true }] }], translationKeyListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyListValueTemplate", required: false }] }], translationKeyListValueChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyListValue', { isSignal: true }] }], numberListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberListValueTemplate", required: false }] }], numberListValueChildTemplate: [{ type: i0.ContentChild, args: ['numberListValue', { isSignal: true }] }], relativeDateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateListValueTemplate", required: false }] }], relativeDateListValueChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateListValue', { isSignal: true }] }], stringListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringListValueTemplate", required: false }] }], stringListValueChildTemplate: [{ type: i0.ContentChild, args: ['stringListValue', { isSignal: true }] }], dateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateListValueTemplate", required: false }] }], dateListValueChildTemplate: [{ type: i0.ContentChild, args: ['dateListValue', { isSignal: true }] }], additionalActions: [{
|
|
2545
|
+
type: Input
|
|
2546
|
+
}], viewItem: [{
|
|
2433
2547
|
type: Output
|
|
2434
2548
|
}], editItem: [{
|
|
2435
2549
|
type: Output
|
|
@@ -2438,48 +2552,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
2438
2552
|
}], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }], pageSizeChanged: [{ type: i0.Output, args: ["pageSizeChanged"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], viewTemplates: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], parentTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentTemplates", required: false }] }, { type: i0.Output, args: ["parentTemplatesChange"] }] } });
|
|
2439
2553
|
|
|
2440
2554
|
class DataListGridSortingComponent {
|
|
2555
|
+
set columns(value) {
|
|
2556
|
+
this.stateService.columns.set(value);
|
|
2557
|
+
}
|
|
2558
|
+
set sortDirection(value) {
|
|
2559
|
+
this.stateService.sortDirection.set(value);
|
|
2560
|
+
}
|
|
2561
|
+
set sortField(value) {
|
|
2562
|
+
this.stateService.sortColumn.set(value);
|
|
2563
|
+
}
|
|
2441
2564
|
constructor() {
|
|
2442
|
-
this.
|
|
2565
|
+
this.stateService = inject(DataViewStateService);
|
|
2443
2566
|
this.sortStates = input(["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */], ...(ngDevMode ? [{ debugName: "sortStates" }] : []));
|
|
2444
|
-
this.sortDirection = model("NONE" /* DataSortDirection.NONE */, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
|
|
2445
|
-
this.sortField = model('', ...(ngDevMode ? [{ debugName: "sortField" }] : []));
|
|
2446
2567
|
this.sortChange = output();
|
|
2447
2568
|
this.sortDirectionChange = output();
|
|
2448
2569
|
this.componentStateChanged = output();
|
|
2449
2570
|
this.columnsChange = output();
|
|
2450
2571
|
this.dropdownOptions = computed(() => {
|
|
2451
|
-
return this.columns()
|
|
2572
|
+
return this.stateService.columns()
|
|
2452
2573
|
.filter((c) => !!c.sortable)
|
|
2453
2574
|
.map((c) => ({ columnId: c.id, columnName: c.nameKey }));
|
|
2454
2575
|
}, ...(ngDevMode ? [{ debugName: "dropdownOptions" }] : []));
|
|
2455
2576
|
this.selectedSortingOption = computed(() => {
|
|
2456
|
-
const sortField = this.
|
|
2577
|
+
const sortField = this.stateService.sortColumn();
|
|
2457
2578
|
return this.dropdownOptions().find((e) => e.columnId === sortField);
|
|
2458
2579
|
}, ...(ngDevMode ? [{ debugName: "selectedSortingOption" }] : []));
|
|
2459
2580
|
effect(() => {
|
|
2460
2581
|
this.componentStateChanged.emit({
|
|
2461
2582
|
sorting: {
|
|
2462
|
-
sortColumn: this.
|
|
2463
|
-
sortDirection: this.sortDirection(),
|
|
2583
|
+
sortColumn: this.stateService.sortColumn(),
|
|
2584
|
+
sortDirection: this.stateService.sortDirection(),
|
|
2464
2585
|
},
|
|
2465
2586
|
});
|
|
2466
2587
|
});
|
|
2467
2588
|
}
|
|
2468
2589
|
selectSorting(event) {
|
|
2469
|
-
this.
|
|
2590
|
+
this.stateService.sortColumn.set(event.value.columnId);
|
|
2470
2591
|
this.sortChange.emit(event.value.columnId);
|
|
2471
2592
|
}
|
|
2472
2593
|
sortDirectionChanged() {
|
|
2473
2594
|
const newSortDirection = this.nextSortDirection();
|
|
2474
|
-
this.sortDirection.set(newSortDirection);
|
|
2595
|
+
this.stateService.sortDirection.set(newSortDirection);
|
|
2475
2596
|
this.sortDirectionChange.emit(newSortDirection);
|
|
2476
2597
|
}
|
|
2477
2598
|
nextSortDirection() {
|
|
2478
2599
|
const states = this.sortStates();
|
|
2479
|
-
return states[(states.indexOf(this.sortDirection()) + 1) % states.length];
|
|
2600
|
+
return states[(states.indexOf(this.stateService.sortDirection()) + 1) % states.length];
|
|
2480
2601
|
}
|
|
2481
2602
|
sortIcon() {
|
|
2482
|
-
switch (this.sortDirection()) {
|
|
2603
|
+
switch (this.stateService.sortDirection()) {
|
|
2483
2604
|
case "ASCENDING" /* DataSortDirection.ASCENDING */:
|
|
2484
2605
|
return 'pi-sort-amount-up';
|
|
2485
2606
|
case "DESCENDING" /* DataSortDirection.DESCENDING */:
|
|
@@ -2502,12 +2623,18 @@ class DataListGridSortingComponent {
|
|
|
2502
2623
|
}
|
|
2503
2624
|
}
|
|
2504
2625
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2505
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal:
|
|
2626
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", componentStateChanged: "componentStateChanged", columnsChange: "columnsChange" }, ngImport: i0, template: "<div class=\"flex align-items-center gap-2\">\n <p-floatLabel variant=\"on\">\n <p-select\n id=\"dataListGridSortingDropdown\"\n inputId=\"dataListGridSortingDropdownInput\"\n [ngModel]=\"selectedSortingOption()\"\n [options]=\"dropdownOptions()\"\n (onChange)=\"selectSorting($event)\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n optionLabel=\"columnName\"\n >\n <ng-template let-item #item> \n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span> \n </ng-template>\n <ng-template let-item #selectedItem>\n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span>\n </ng-template></p-select\n >\n <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n </p-floatLabel>\n <p-button\n id=\"dataListGridSortingButton\"\n type=\"button\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n (keydown.enter)=\"sortDirectionChanged()\"\n (keydown.space)=\"sortDirectionChanged()\"\n [ocxTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{currentDirection: stateService.sortDirection(), nextDirection: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"], dependencies: [{ kind: "component", type: i1$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
2506
2627
|
}
|
|
2507
2628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
|
|
2508
2629
|
type: Component,
|
|
2509
|
-
args: [{ standalone: false, selector: 'ocx-data-list-grid-sorting', template: "<div class=\"flex align-items-center gap-2\">\n <p-floatLabel variant=\"on\">\n <p-select\n id=\"dataListGridSortingDropdown\"\n inputId=\"dataListGridSortingDropdownInput\"\n [ngModel]=\"selectedSortingOption()\"\n [options]=\"dropdownOptions()\"\n (onChange)=\"selectSorting($event)\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n optionLabel=\"columnName\"\n >\n <ng-template let-item #item> \n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span> \n </ng-template>\n <ng-template let-item #selectedItem>\n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span>\n </ng-template></p-select\n >\n <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n </p-floatLabel>\n <p-button\n id=\"dataListGridSortingButton\"\n type=\"button\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n (keydown.enter)=\"sortDirectionChanged()\"\n (keydown.space)=\"sortDirectionChanged()\"\n [ocxTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{currentDirection: sortDirection(), nextDirection: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
2510
|
-
}], ctorParameters: () => [], propDecorators: { columns: [{
|
|
2630
|
+
args: [{ standalone: false, selector: 'ocx-data-list-grid-sorting', template: "<div class=\"flex align-items-center gap-2\">\n <p-floatLabel variant=\"on\">\n <p-select\n id=\"dataListGridSortingDropdown\"\n inputId=\"dataListGridSortingDropdownInput\"\n [ngModel]=\"selectedSortingOption()\"\n [options]=\"dropdownOptions()\"\n (onChange)=\"selectSorting($event)\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)\"\n optionLabel=\"columnName\"\n >\n <ng-template let-item #item> \n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span> \n </ng-template>\n <ng-template let-item #selectedItem>\n <span [attr.aria-label]=\"item?.columnName ? (item.columnName | translate) : ''\">{{ item?.columnName ? (item.columnName | translate) : ''}}</span>\n </ng-template></p-select\n >\n <label for=\"dataListGridSortingDropdownInput\">{{ (\"OCX_LIST_GRID_SORT.DROPDOWN.LABEL\" | translate) }}</label>\n </p-floatLabel>\n <p-button\n id=\"dataListGridSortingButton\"\n type=\"button\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n (keydown.enter)=\"sortDirectionChanged()\"\n (keydown.space)=\"sortDirectionChanged()\"\n [ocxTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{currentDirection: stateService.sortDirection(), nextDirection: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
2631
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{
|
|
2632
|
+
type: Input
|
|
2633
|
+
}], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], sortDirection: [{
|
|
2634
|
+
type: Input
|
|
2635
|
+
}], sortField: [{
|
|
2636
|
+
type: Input
|
|
2637
|
+
}], sortChange: [{ type: i0.Output, args: ["sortChange"] }], sortDirectionChange: [{ type: i0.Output, args: ["sortDirectionChange"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }] } });
|
|
2511
2638
|
|
|
2512
2639
|
function findTemplate(templates, names) {
|
|
2513
2640
|
for (let index = 0; index < names.length; index++) {
|
|
@@ -2526,6 +2653,39 @@ var TemplateType;
|
|
|
2526
2653
|
TemplateType["FILTERCELL"] = "FILTERCELL";
|
|
2527
2654
|
})(TemplateType || (TemplateType = {}));
|
|
2528
2655
|
class DataTableComponent extends DataSortBase {
|
|
2656
|
+
set selectedRows(value) {
|
|
2657
|
+
this.stateService.selectedRows.set(value);
|
|
2658
|
+
}
|
|
2659
|
+
set filters(value) {
|
|
2660
|
+
this.stateService.filters.set(value);
|
|
2661
|
+
}
|
|
2662
|
+
set sortDirection(value) {
|
|
2663
|
+
this.stateService.sortDirection.set(value);
|
|
2664
|
+
}
|
|
2665
|
+
set sortColumn(value) {
|
|
2666
|
+
this.stateService.sortColumn.set(value);
|
|
2667
|
+
}
|
|
2668
|
+
set columns(value) {
|
|
2669
|
+
this.stateService.columns.set(value);
|
|
2670
|
+
}
|
|
2671
|
+
set pageSize(value) {
|
|
2672
|
+
this.stateService.pageSize.set(value);
|
|
2673
|
+
}
|
|
2674
|
+
set page(value) {
|
|
2675
|
+
this.stateService.activePage.set(value);
|
|
2676
|
+
}
|
|
2677
|
+
set additionalActions(value) {
|
|
2678
|
+
this.stateService.additionalActions.set(value);
|
|
2679
|
+
}
|
|
2680
|
+
set frozenActionColumn(value) {
|
|
2681
|
+
this.stateService.actionColumnConfigFrozen.set(value);
|
|
2682
|
+
}
|
|
2683
|
+
set actionColumnPosition(value) {
|
|
2684
|
+
this.stateService.actionColumnConfigPosition.set(value);
|
|
2685
|
+
}
|
|
2686
|
+
set expandedRows(value) {
|
|
2687
|
+
this.stateService.expandedRows.set(value);
|
|
2688
|
+
}
|
|
2529
2689
|
get viewTableRowObserved() {
|
|
2530
2690
|
const dv = this.injector.get('DataViewComponent', null);
|
|
2531
2691
|
return dv?.viewItemObserved || dv?.viewItem.observed() || this.viewTableRow.observed();
|
|
@@ -2542,10 +2702,10 @@ class DataTableComponent extends DataSortBase {
|
|
|
2542
2702
|
return this.viewTableRowObserved || this.editTableRowObserved || this.deleteTableRowObserved;
|
|
2543
2703
|
}
|
|
2544
2704
|
get actionColumnVisible() {
|
|
2545
|
-
return this.anyRowActionObserved || this.additionalActions().length > 0;
|
|
2705
|
+
return this.anyRowActionObserved || this.stateService.additionalActions().length > 0;
|
|
2546
2706
|
}
|
|
2547
2707
|
getRowColspan(hasExpansionTemplate) {
|
|
2548
|
-
return (this.columns().length +
|
|
2708
|
+
return (this.stateService.columns().length +
|
|
2549
2709
|
(this.selectionChangedObserved ? 1 : 0) +
|
|
2550
2710
|
(this.expandable() && hasExpansionTemplate ? 1 : 0) +
|
|
2551
2711
|
(this.actionColumnVisible ? 1 : 0));
|
|
@@ -2563,27 +2723,22 @@ class DataTableComponent extends DataSortBase {
|
|
|
2563
2723
|
this.userService = inject(UserService);
|
|
2564
2724
|
this.hasPermissionChecker = inject(HAS_PERMISSION_CHECKER, { optional: true });
|
|
2565
2725
|
this.liveAnnouncer = inject(LiveAnnouncer);
|
|
2726
|
+
this.stateService = inject(DataViewStateService);
|
|
2566
2727
|
this.FilterType = FilterType;
|
|
2567
2728
|
this.TemplateType = TemplateType;
|
|
2568
2729
|
this.rows = model([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
2569
2730
|
this.previousRows = computedPrevious(this.rows);
|
|
2570
|
-
this.selectedRows = model([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
|
|
2571
2731
|
this.selectedIds = signal([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
|
|
2572
|
-
this.
|
|
2573
|
-
this.previousFilters = computedPrevious(this.filters);
|
|
2574
|
-
this.sortDirection = model("NONE" /* DataSortDirection.NONE */, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
|
|
2575
|
-
this.sortColumn = model('', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
|
|
2576
|
-
this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
2732
|
+
this.previousFilters = computedPrevious(() => this.stateService.filters());
|
|
2577
2733
|
this.clientSideFiltering = input(true, ...(ngDevMode ? [{ debugName: "clientSideFiltering" }] : []));
|
|
2578
2734
|
this.clientSideSorting = input(true, ...(ngDevMode ? [{ debugName: "clientSideSorting" }] : []));
|
|
2579
2735
|
this.sortStates = model(["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */], ...(ngDevMode ? [{ debugName: "sortStates" }] : []));
|
|
2580
2736
|
this.pageSizes = model([10, 25, 50], ...(ngDevMode ? [{ debugName: "pageSizes" }] : []));
|
|
2581
2737
|
this.displayedPageSize = computed(() => {
|
|
2582
|
-
const pageSize = this.pageSize();
|
|
2738
|
+
const pageSize = this.stateService.pageSize();
|
|
2583
2739
|
const pageSizes = this.pageSizes();
|
|
2584
2740
|
return pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50;
|
|
2585
2741
|
}, ...(ngDevMode ? [{ debugName: "displayedPageSize" }] : []));
|
|
2586
|
-
this.pageSize = model(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
2587
2742
|
this.emptyResultsMessage = input(undefined, ...(ngDevMode ? [{ debugName: "emptyResultsMessage" }] : []));
|
|
2588
2743
|
this.name = model('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
2589
2744
|
this.deletePermission = input(undefined, ...(ngDevMode ? [{ debugName: "deletePermission" }] : []));
|
|
@@ -2598,7 +2753,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2598
2753
|
this.selectionEnabledField = input(undefined, ...(ngDevMode ? [{ debugName: "selectionEnabledField" }] : []));
|
|
2599
2754
|
this.allowSelectAll = input(true, ...(ngDevMode ? [{ debugName: "allowSelectAll" }] : []));
|
|
2600
2755
|
this.paginator = input(true, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
2601
|
-
this.page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
2602
2756
|
this.tableStyle = input(undefined, ...(ngDevMode ? [{ debugName: "tableStyle" }] : []));
|
|
2603
2757
|
this.totalRecordsOnServer = input(undefined, ...(ngDevMode ? [{ debugName: "totalRecordsOnServer" }] : []));
|
|
2604
2758
|
this.currentPageShowingKey = input('OCX_DATA_TABLE.SHOWING', ...(ngDevMode ? [{ debugName: "currentPageShowingKey" }] : []));
|
|
@@ -2676,11 +2830,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2676
2830
|
this.translationKeyFilterCell = computed(() => {
|
|
2677
2831
|
return this.translationKeyFilterCellTemplate() || this.translationKeyFilterCellChildTemplate();
|
|
2678
2832
|
}, ...(ngDevMode ? [{ debugName: "translationKeyFilterCell" }] : []));
|
|
2679
|
-
this.
|
|
2680
|
-
this.frozenActionColumn = input(false, ...(ngDevMode ? [{ debugName: "frozenActionColumn" }] : []));
|
|
2681
|
-
this.actionColumnPosition = input('right', ...(ngDevMode ? [{ debugName: "actionColumnPosition" }] : []));
|
|
2682
|
-
this.expandedRows = model([], ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
|
|
2683
|
-
this.expandedRowIds = computed(() => (this.expandedRows() ?? [])
|
|
2833
|
+
this.expandedRowIds = computed(() => (this.stateService.expandedRows() ?? [])
|
|
2684
2834
|
.filter((row) => row !== null && row !== undefined)
|
|
2685
2835
|
.map((row) => (typeof row === 'object' ? row.id : row)), ...(ngDevMode ? [{ debugName: "expandedRowIds" }] : []));
|
|
2686
2836
|
this.expandedRowKeys = computed(() => Object.fromEntries(this.expandedRowIds().map((id) => [id, true])), ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : []));
|
|
@@ -2699,10 +2849,10 @@ class DataTableComponent extends DataSortBase {
|
|
|
2699
2849
|
this.rowCollapsed = observableOutput();
|
|
2700
2850
|
this.displayedRows$ = combineLatest([
|
|
2701
2851
|
toObservable(this.rows),
|
|
2702
|
-
toObservable(this.filters),
|
|
2703
|
-
toObservable(this.sortColumn),
|
|
2704
|
-
toObservable(this.sortDirection),
|
|
2705
|
-
toObservable(this.columns),
|
|
2852
|
+
toObservable(this.stateService.filters),
|
|
2853
|
+
toObservable(this.stateService.sortColumn),
|
|
2854
|
+
toObservable(this.stateService.sortDirection),
|
|
2855
|
+
toObservable(this.stateService.columns),
|
|
2706
2856
|
toObservable(this.clientSideFiltering),
|
|
2707
2857
|
toObservable(this.clientSideSorting),
|
|
2708
2858
|
]).pipe(map(([rows, filters, sortColumn, sortDirection, columns, clientSideFiltering, clientSideSorting]) => {
|
|
@@ -2719,15 +2869,15 @@ class DataTableComponent extends DataSortBase {
|
|
|
2719
2869
|
const rows = this.rows();
|
|
2720
2870
|
// Include page to force fresh array references on page navigation
|
|
2721
2871
|
// to satisfy PrimeNG DataTable selection tracking, because it needs new object references to detect changes
|
|
2722
|
-
this.
|
|
2872
|
+
this.stateService.activePage();
|
|
2723
2873
|
return selectionIds.map((rowId) => rows.find((r) => r.id === rowId)).filter((row) => row !== undefined);
|
|
2724
2874
|
}, ...(ngDevMode ? [{ debugName: "selectedFilteredRows" }] : []));
|
|
2725
2875
|
this.currentFilterColumn = signal(null, ...(ngDevMode ? [{ debugName: "currentFilterColumn" }] : []));
|
|
2726
2876
|
this.currentEqualFilterOptions$ = combineLatest([
|
|
2727
2877
|
toObservable(this.rows),
|
|
2728
2878
|
toObservable(this.currentFilterColumn),
|
|
2729
|
-
toObservable(this.filters),
|
|
2730
|
-
toObservable(this.columns),
|
|
2879
|
+
toObservable(this.stateService.filters),
|
|
2880
|
+
toObservable(this.stateService.columns),
|
|
2731
2881
|
]).pipe(filter(([_, currentFilterColumn, __, ___]) => !currentFilterColumn?.filterType || currentFilterColumn.filterType === FilterType.EQUALS), mergeMap(([rows, currentFilterColumn, filters, columns]) => {
|
|
2732
2882
|
if (!currentFilterColumn?.id) {
|
|
2733
2883
|
return of({ options: [], column: undefined });
|
|
@@ -2769,7 +2919,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2769
2919
|
}));
|
|
2770
2920
|
}));
|
|
2771
2921
|
this.currentEqualSelectedFilters = computed(() => {
|
|
2772
|
-
const filters = this.filters();
|
|
2922
|
+
const filters = this.stateService.filters();
|
|
2773
2923
|
const currentFilterColumn = this.currentFilterColumn();
|
|
2774
2924
|
return filters
|
|
2775
2925
|
.filter((filter) => filter.columnId === currentFilterColumn?.id &&
|
|
@@ -2777,25 +2927,25 @@ class DataTableComponent extends DataSortBase {
|
|
|
2777
2927
|
.map((filter) => filter.value);
|
|
2778
2928
|
}, ...(ngDevMode ? [{ debugName: "currentEqualSelectedFilters" }] : []));
|
|
2779
2929
|
this.currentTruthySelectedFilters = computed(() => {
|
|
2780
|
-
const filters = this.filters();
|
|
2930
|
+
const filters = this.stateService.filters();
|
|
2781
2931
|
const currentFilterColumn = this.currentFilterColumn();
|
|
2782
2932
|
return filters
|
|
2783
2933
|
.filter((filter) => filter.columnId === currentFilterColumn?.id && currentFilterColumn.filterType === FilterType.IS_NOT_EMPTY)
|
|
2784
2934
|
.map((filter) => filter.value);
|
|
2785
2935
|
}, ...(ngDevMode ? [{ debugName: "currentTruthySelectedFilters" }] : []));
|
|
2786
2936
|
this.filterAmounts = computed(() => {
|
|
2787
|
-
const filters = this.filters();
|
|
2937
|
+
const filters = this.stateService.filters();
|
|
2788
2938
|
return filters
|
|
2789
2939
|
.map((filter) => filter.columnId)
|
|
2790
2940
|
.map((columnId) => ({ [columnId]: filters.filter((filter) => filter.columnId === columnId).length }))
|
|
2791
2941
|
.reduce((acc, curr) => ({ ...acc, ...curr }), {});
|
|
2792
2942
|
}, ...(ngDevMode ? [{ debugName: "filterAmounts" }] : []));
|
|
2793
2943
|
this.overflowActions = computed(() => {
|
|
2794
|
-
return this.additionalActions().filter((action) => action.showAsOverflow);
|
|
2944
|
+
return this.stateService.additionalActions().filter((action) => action.showAsOverflow);
|
|
2795
2945
|
}, ...(ngDevMode ? [{ debugName: "overflowActions" }] : []));
|
|
2796
2946
|
this.overflowActions$ = toObservable(this.overflowActions);
|
|
2797
2947
|
this.inlineActions = computed(() => {
|
|
2798
|
-
return this.additionalActions().filter((action) => !action.showAsOverflow);
|
|
2948
|
+
return this.stateService.additionalActions().filter((action) => !action.showAsOverflow);
|
|
2799
2949
|
}, ...(ngDevMode ? [{ debugName: "inlineActions" }] : []));
|
|
2800
2950
|
this.currentMenuRow = signal(null, ...(ngDevMode ? [{ debugName: "currentMenuRow" }] : []));
|
|
2801
2951
|
this.overflowMenuItems$ = combineLatest([toObservable(this.overflowActions), toObservable(this.currentMenuRow)]).pipe(switchMap(([actions, row]) => this.filterActionsBasedOnPermissions(actions).pipe(map((permittedActions) => ({ actions: permittedActions, row: row })))), mergeMap(({ actions, row }) => {
|
|
@@ -2882,7 +3032,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2882
3032
|
untracked(() => {
|
|
2883
3033
|
const previousRows = this.previousRows();
|
|
2884
3034
|
if (previousRows.length && rows.length < previousRows.length) {
|
|
2885
|
-
this.
|
|
3035
|
+
this.stateService.activePage.set(0);
|
|
2886
3036
|
}
|
|
2887
3037
|
});
|
|
2888
3038
|
const currentResults = rows.length;
|
|
@@ -2892,25 +3042,25 @@ class DataTableComponent extends DataSortBase {
|
|
|
2892
3042
|
});
|
|
2893
3043
|
});
|
|
2894
3044
|
effect(() => {
|
|
2895
|
-
const filters = this.filters();
|
|
3045
|
+
const filters = this.stateService.filters();
|
|
2896
3046
|
// Not track previousFilters change to avoid the trigger
|
|
2897
3047
|
untracked(() => {
|
|
2898
3048
|
const previousFilters = this.previousFilters();
|
|
2899
3049
|
if (previousFilters.length && !equal(filters, previousFilters)) {
|
|
2900
|
-
this.
|
|
3050
|
+
this.stateService.activePage.set(0);
|
|
2901
3051
|
}
|
|
2902
3052
|
});
|
|
2903
3053
|
this.filtered.emit(filters);
|
|
2904
3054
|
});
|
|
2905
3055
|
effect(() => {
|
|
2906
|
-
const columns = this.columns();
|
|
3056
|
+
const columns = this.stateService.columns();
|
|
2907
3057
|
const obs = columns.map((c) => this.getTemplate(c, TemplateType.CELL));
|
|
2908
3058
|
const filterObs = columns.map((c) => this.getTemplate(c, TemplateType.FILTERCELL));
|
|
2909
3059
|
this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(columns.map((c, i) => [c.id, values[i]]))), debounceTime(50));
|
|
2910
3060
|
this.columnFilterTemplates$ = combineLatest(filterObs).pipe(map((values) => Object.fromEntries(columns.map((c, i) => [c.id, values[i]]))));
|
|
2911
3061
|
});
|
|
2912
3062
|
effect(() => {
|
|
2913
|
-
const selectedRows = this.selectedRows();
|
|
3063
|
+
const selectedRows = this.stateService.selectedRows();
|
|
2914
3064
|
const selectedIds = selectedRows.map((row) => {
|
|
2915
3065
|
if (typeof row === 'object') {
|
|
2916
3066
|
return row.id;
|
|
@@ -2923,16 +3073,16 @@ class DataTableComponent extends DataSortBase {
|
|
|
2923
3073
|
this.emitComponentStateChanged();
|
|
2924
3074
|
});
|
|
2925
3075
|
effect(() => {
|
|
2926
|
-
this.sorted.emit({ sortColumn: this.sortColumn(), sortDirection: this.sortDirection() });
|
|
3076
|
+
this.sorted.emit({ sortColumn: this.stateService.sortColumn(), sortDirection: this.stateService.sortDirection() });
|
|
2927
3077
|
});
|
|
2928
3078
|
effect(() => {
|
|
2929
3079
|
this.emitSelectionChanged();
|
|
2930
3080
|
});
|
|
2931
3081
|
effect(() => {
|
|
2932
|
-
this.pageChanged.emit(this.
|
|
3082
|
+
this.pageChanged.emit(this.stateService.activePage());
|
|
2933
3083
|
});
|
|
2934
3084
|
effect(() => {
|
|
2935
|
-
const pageSize = this.pageSize();
|
|
3085
|
+
const pageSize = this.stateService.pageSize();
|
|
2936
3086
|
if (pageSize === undefined) {
|
|
2937
3087
|
return;
|
|
2938
3088
|
}
|
|
@@ -2948,13 +3098,13 @@ class DataTableComponent extends DataSortBase {
|
|
|
2948
3098
|
}
|
|
2949
3099
|
emitComponentStateChanged() {
|
|
2950
3100
|
this.componentStateChanged.emit({
|
|
2951
|
-
filters: this.filters(),
|
|
3101
|
+
filters: this.stateService.filters(),
|
|
2952
3102
|
sorting: {
|
|
2953
|
-
sortColumn: this.sortColumn(),
|
|
2954
|
-
sortDirection: this.sortDirection(),
|
|
3103
|
+
sortColumn: this.stateService.sortColumn(),
|
|
3104
|
+
sortDirection: this.stateService.sortDirection(),
|
|
2955
3105
|
},
|
|
2956
3106
|
pageSize: this.displayedPageSize(),
|
|
2957
|
-
activePage: this.
|
|
3107
|
+
activePage: this.stateService.activePage(),
|
|
2958
3108
|
selectedRows: this.rows().filter((row) => this.selectedIds().includes(row.id)),
|
|
2959
3109
|
expandedRows: this.rows().filter((row) => this.expandedRowIds().includes(row.id)),
|
|
2960
3110
|
});
|
|
@@ -2964,12 +3114,12 @@ class DataTableComponent extends DataSortBase {
|
|
|
2964
3114
|
}
|
|
2965
3115
|
onRowExpand(event) {
|
|
2966
3116
|
if (!this.expandedRowIds().includes(event.data.id)) {
|
|
2967
|
-
this.expandedRows.update((rows) => [...(rows ?? []), event.data]);
|
|
3117
|
+
this.stateService.expandedRows.update((rows) => [...(rows ?? []), event.data]);
|
|
2968
3118
|
}
|
|
2969
3119
|
this.rowExpanded.emit(event.data);
|
|
2970
3120
|
}
|
|
2971
3121
|
onRowCollapse(event) {
|
|
2972
|
-
this.expandedRows.update((rows) => (rows ?? []).filter((r) => typeof r === 'object' ? r.id !== event.data.id : r !== event.data.id));
|
|
3122
|
+
this.stateService.expandedRows.update((rows) => (rows ?? []).filter((r) => typeof r === 'object' ? r.id !== event.data.id : r !== event.data.id));
|
|
2973
3123
|
this.rowCollapsed.emit(event.data);
|
|
2974
3124
|
}
|
|
2975
3125
|
isRowExpanded(row) {
|
|
@@ -2985,13 +3135,13 @@ class DataTableComponent extends DataSortBase {
|
|
|
2985
3135
|
}
|
|
2986
3136
|
onSortColumnClick(sortColumn) {
|
|
2987
3137
|
const newSortDirection = this.columnNextSortDirection(sortColumn);
|
|
2988
|
-
this.sortColumn.set(sortColumn);
|
|
2989
|
-
this.sortDirection.set(newSortDirection);
|
|
3138
|
+
this.stateService.sortColumn.set(sortColumn);
|
|
3139
|
+
this.stateService.sortDirection.set(newSortDirection);
|
|
2990
3140
|
}
|
|
2991
3141
|
columnNextSortDirection(sortColumn) {
|
|
2992
3142
|
const sortStates = this.sortStates();
|
|
2993
|
-
return sortColumn === this.sortColumn()
|
|
2994
|
-
? sortStates[(sortStates.indexOf(this.sortDirection()) + 1) % sortStates.length]
|
|
3143
|
+
return sortColumn === this.stateService.sortColumn()
|
|
3144
|
+
? sortStates[(sortStates.indexOf(this.stateService.sortDirection()) + 1) % sortStates.length]
|
|
2995
3145
|
: sortStates[0];
|
|
2996
3146
|
}
|
|
2997
3147
|
onDeleteRow(selectedTableRow) {
|
|
@@ -3007,7 +3157,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
3007
3157
|
this.currentFilterColumn.set(column);
|
|
3008
3158
|
}
|
|
3009
3159
|
onMultiselectFilterChange(column, event) {
|
|
3010
|
-
const filters = this.filters()
|
|
3160
|
+
const filters = this.stateService.filters()
|
|
3011
3161
|
.filter((filter) => filter.columnId !== column.id)
|
|
3012
3162
|
.concat(event.value.map((value) => ({
|
|
3013
3163
|
columnId: column.id,
|
|
@@ -3015,7 +3165,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
3015
3165
|
filterType: column.filterType,
|
|
3016
3166
|
})));
|
|
3017
3167
|
if (this.clientSideFiltering()) {
|
|
3018
|
-
this.filters.set(filters);
|
|
3168
|
+
this.stateService.filters.set(filters);
|
|
3019
3169
|
}
|
|
3020
3170
|
}
|
|
3021
3171
|
sortIconTitle(sortColumn) {
|
|
@@ -3073,8 +3223,8 @@ class DataTableComponent extends DataSortBase {
|
|
|
3073
3223
|
}
|
|
3074
3224
|
onPageChange(event) {
|
|
3075
3225
|
const page = event.first / event.rows;
|
|
3076
|
-
this.page
|
|
3077
|
-
this.pageSize
|
|
3226
|
+
this.page = page;
|
|
3227
|
+
this.pageSize = event.rows;
|
|
3078
3228
|
}
|
|
3079
3229
|
fieldIsTruthy(object, key) {
|
|
3080
3230
|
return !!ObjectUtils.resolveFieldData(object, key);
|
|
@@ -3188,12 +3338,46 @@ class DataTableComponent extends DataSortBase {
|
|
|
3188
3338
|
return summary.trim();
|
|
3189
3339
|
}
|
|
3190
3340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", selectedRows: "selectedRowsChange", filters: "filtersChange", sortDirection: "sortDirectionChange", sortColumn: "sortColumnChange", columns: "columnsChange", sortStates: "sortStatesChange", pageSizes: "pageSizesChange", pageSize: "pageSizeChange", name: "nameChange", page: "pageChange", additionalActions: "additionalActionsChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true, isSignal: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true, isSignal: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true, isSignal: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true, isSignal: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true, isSignal: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true, isSignal: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true, isSignal: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true, isSignal: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of columns(); track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
|
|
3341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", sortStates: "sortStatesChange", pageSizes: "pageSizesChange", name: "nameChange", filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", parentTemplates: "parentTemplatesChange" }, providers: [
|
|
3342
|
+
{
|
|
3343
|
+
provide: DataViewStateService,
|
|
3344
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
3345
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
3346
|
+
},
|
|
3347
|
+
], queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true, isSignal: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true, isSignal: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true, isSignal: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true, isSignal: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true, isSignal: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true, isSignal: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true, isSignal: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true, isSignal: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"stateService.actionColumnConfigFrozen()\"\n [alignFrozen]=\"stateService.actionColumnConfigPosition()\"\n [attr.name]=\"stateService.actionColumnConfigPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'left') ? 'border-right-1' : (stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"stateService.actionColumnConfigFrozen()\"\n [alignFrozen]=\"stateService.actionColumnConfigPosition()\"\n [ngClass]=\"(stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'left') ? 'border-right-1' : (stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"stateService.actionColumnConfigPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"stateService.activePage() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (stateService.actionColumnConfigPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of stateService.columns(); track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === stateService.sortColumn() && stateService.sortDirection() === 'NONE') || column?.id !== stateService.sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === stateService.sortColumn() && stateService.sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === stateService.sortColumn() && stateService.sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (stateService.actionColumnConfigPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (stateService.actionColumnConfigPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of stateService.columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (stateService.actionColumnConfigPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
|
|
3192
3348
|
}
|
|
3193
3349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3194
3350
|
type: Component,
|
|
3195
|
-
args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"frozenActionColumn()\"\n [alignFrozen]=\"actionColumnPosition()\"\n [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"page() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of columns(); track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (actionColumnPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (actionColumnPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
|
|
3196
|
-
|
|
3351
|
+
args: [{ standalone: false, selector: 'ocx-data-table', providers: [
|
|
3352
|
+
{
|
|
3353
|
+
provide: DataViewStateService,
|
|
3354
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
3355
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
3356
|
+
},
|
|
3357
|
+
], template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (actionColumnVisible) {\n <td\n class=\"actions\"\n pFrozenColumn\n [frozen]=\"stateService.actionColumnConfigFrozen()\"\n [alignFrozen]=\"stateService.actionColumnConfigPosition()\"\n [attr.name]=\"stateService.actionColumnConfigPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n [ngClass]=\"(stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'left') ? 'border-right-1' : (stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'right') ? 'border-left-1' : ''\"\n >\n <div class=\"icon-button-row-wrapper\">\n @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n <button\n id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n *ocxIfPermission=\"viewPermission()\"\n [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text viewTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n icon=\"pi pi-eye\"\n (click)=\"onViewRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n *ocxIfPermission=\"editPermission()\"\n [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text editTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n icon=\"pi pi-pencil\"\n (click)=\"onEditRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n deleteActionVisibleField())) ) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n *ocxIfPermission=\"deletePermission()\"\n [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n pButton\n class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onDeleteRow(rowObject)\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n action.actionVisibleField)) {\n <button\n [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n *ocxIfPermission=\"action.permission\"\n pButton\n class=\"p-button-rounded p-button-text\"\n [ngClass]=\"action.classes\"\n [icon]=\"action.icon || ''\"\n (click)=\"onActionClick(action, rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"\n action.disabled ||\n (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n \"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n class=\"p-button-rounded p-button-text\"\n [icon]=\"'pi pi-ellipsis-v'\"\n (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [name]=\"'data-table-overflow-action-button'\"\n ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n @if (expandable() && expansionTemplate()) {\n <th\n pFrozenColumn\n [frozen]=\"frozenExpandColumn()\"\n alignFrozen=\"left\"\n [attr.name]=\"'expansion-column-header'\"\n style=\"width: 4rem\"\n scope=\"col\"\n >\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (actionColumnVisible) {\n <th\n pFrozenColumn\n [frozen]=\"stateService.actionColumnConfigFrozen()\"\n [alignFrozen]=\"stateService.actionColumnConfigPosition()\"\n [ngClass]=\"(stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'left') ? 'border-right-1' : (stateService.actionColumnConfigFrozen() && stateService.actionColumnConfigPosition() === 'right') ? 'border-left-1' : ''\"\n [attr.name]=\"stateService.actionColumnConfigPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n scope=\"col\"\n >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n [paginator]=\"paginator()\"\n [first]=\"stateService.activePage() * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"\n (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n | translate : params()\n \"\n [rowsPerPageOptions]=\"pageSizes()\"\n [id]=\"'dataTable_' + name()\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"selectedFilteredRows()\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle()\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onRowExpand)=\"onRowExpand($event)\"\n (onRowCollapse)=\"onRowCollapse($event)\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll()) {\n <p-tableHeaderCheckbox\n [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n ></p-tableHeaderCheckbox>\n }\n <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n </th>\n } @if (stateService.actionColumnConfigPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n } @for (column of stateService.columns(); track column) { @if (column.sortable || column.filterable) {\n <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n <div\n class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n style=\"height: 100%\"\n >\n <span class=\"flex\" [id]=\"column.id + '-header-name'\">{{ column.nameKey | translate }}</span>\n <span class=\"flex icon-button-header-wrapper\">\n @if (column.sortable) {\n <button\n class=\"pi sortButton pl-0\"\n [class.pi-sort-alt]=\"(column?.id === stateService.sortColumn() && stateService.sortDirection() === 'NONE') || column?.id !== stateService.sortColumn()\"\n [class.pi-sort-amount-up]=\"column?.id === stateService.sortColumn() && stateService.sortDirection() === 'ASCENDING'\"\n [class.pi-sort-amount-down]=\"column?.id === stateService.sortColumn() && stateService.sortDirection() === 'DESCENDING'\"\n (click)=\"onSortColumnClick(column.id)\"\n [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n tooltipPosition=\"bottom\"\n [attr.aria-label]=\"\n 'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n | translate : {\n column: (column.nameKey | translate),\n direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n }\n \"\n ></button>\n } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"currentEqualSelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n filterBy=\"toFilterBy\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value>\n @if (columnFilterTemplates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n }\n </ng-template>\n </p-multiselect>\n } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"[\n { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n ]\"\n [ngModel]=\"currentTruthySelectedFilters() || []\"\n [showToggleAll]=\"true\"\n [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onMultiselectFilterChange(column, $event)\"\n placeholder=\" \"\n appendTo=\"body\"\n (onFocus)=\"onFilterChosen(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n [ariaFilterLabel]=\"\n 'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n \"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!filterAmounts()[column.id]\"\n [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n ></div>\n </ng-template>\n <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n </p-multiselect>\n }\n </span>\n </div>\n </th>\n } @else {\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n } } @if (stateService.actionColumnConfigPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"caption\">\n @if (captionTemplate()) {\n <ng-container>\n <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n </ng-container>\n }\n </ng-template>\n\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [value]=\"true\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-checkbox>\n } @else {\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"isRowSelectionDisabled(rowObject)\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n ></p-tableCheckbox>\n }\n </td>\n } @if (stateService.actionColumnConfigPosition() === 'left') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n } @for (column of stateService.columns(); track column) {\n <td>\n @defer (on viewport) { @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n >\n </ng-container>\n } } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n } @if (stateService.actionColumnConfigPosition() === 'right') {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n\n <ng-template #expandedrow let-rowObject>\n @if (expansionTemplate(); as expansionTemplate) {\n <tr>\n <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n <ng-container\n [ngTemplateOutlet]=\"expansionTemplate.template\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject\n }\"\n >\n </ng-container>\n </td>\n </tr>\n }\n </ng-template>\n\n <ng-template #emptymessage>\n <tr>\n <td\n [colSpan]=\"\n getRowColspan(!!expansionTemplate())\n \"\n >\n {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n @if (expandable() && expansionTemplate()) {\n <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n <button\n type=\"button\"\n pButton\n pRipple\n [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n class=\"p-button-rounded p-button-text\"\n (click)=\"toggleRowExpansion(rowObject)\"\n [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n ></button>\n </td>\n }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
|
|
3358
|
+
}], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], selectedRows: [{
|
|
3359
|
+
type: Input
|
|
3360
|
+
}], filters: [{
|
|
3361
|
+
type: Input
|
|
3362
|
+
}], sortDirection: [{
|
|
3363
|
+
type: Input
|
|
3364
|
+
}], sortColumn: [{
|
|
3365
|
+
type: Input
|
|
3366
|
+
}], columns: [{
|
|
3367
|
+
type: Input
|
|
3368
|
+
}], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }, { type: i0.Output, args: ["sortStatesChange"] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }, { type: i0.Output, args: ["pageSizesChange"] }], pageSize: [{
|
|
3369
|
+
type: Input
|
|
3370
|
+
}], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], selectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabledField", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], page: [{
|
|
3371
|
+
type: Input
|
|
3372
|
+
}], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], captionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplate", required: false }] }], stringCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringCellTemplate", required: false }] }], stringCellChildTemplate: [{ type: i0.ContentChild, args: ['stringCell', { isSignal: true }] }], numberCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberCellTemplate", required: false }] }], numberCellChildTemplate: [{ type: i0.ContentChild, args: ['numberCell', { isSignal: true }] }], dateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateCellTemplate", required: false }] }], dateCellChildTemplate: [{ type: i0.ContentChild, args: ['dateCell', { isSignal: true }] }], relativeDateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateCellTemplate", required: false }] }], relativeDateCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateCell', { isSignal: true }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], cellChildTemplate: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], translationKeyCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyCellTemplate", required: false }] }], translationKeyCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyCell', { isSignal: true }] }], stringFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringFilterCellTemplate", required: false }] }], stringFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringFilterCell', { isSignal: true }] }], numberFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFilterCellTemplate", required: false }] }], numberFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberFilterCell', { isSignal: true }] }], dateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilterCellTemplate", required: false }] }], dateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateFilterCell', { isSignal: true }] }], relativeDateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateFilterCellTemplate", required: false }] }], relativeDateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateFilterCell', { isSignal: true }] }], filterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCellTemplate", required: false }] }], filterCellChildTemplate: [{ type: i0.ContentChild, args: ['filterCell', { isSignal: true }] }], translationKeyFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyFilterCellTemplate", required: false }] }], translationKeyFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyFilterCell', { isSignal: true }] }], additionalActions: [{
|
|
3373
|
+
type: Input
|
|
3374
|
+
}], frozenActionColumn: [{
|
|
3375
|
+
type: Input
|
|
3376
|
+
}], actionColumnPosition: [{
|
|
3377
|
+
type: Input
|
|
3378
|
+
}], expandedRows: [{
|
|
3379
|
+
type: Input
|
|
3380
|
+
}], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], viewTableRow: [{
|
|
3197
3381
|
type: Output
|
|
3198
3382
|
}], editTableRow: [{
|
|
3199
3383
|
type: Output
|
|
@@ -3207,26 +3391,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
3207
3391
|
type: Output
|
|
3208
3392
|
}], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], viewTemplates: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], parentTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentTemplates", required: false }] }, { type: i0.Output, args: ["parentTemplatesChange"] }] } });
|
|
3209
3393
|
|
|
3210
|
-
function orderValuesByTimestamp(valuesWithTimestamp) {
|
|
3211
|
-
return valuesWithTimestamp.sort((a, b) => b.timestamp - a.timestamp).map((obj) => obj.value);
|
|
3212
|
-
}
|
|
3213
|
-
function mergeValues(values) {
|
|
3214
|
-
return values.reduce((acc, curr) => {
|
|
3215
|
-
return { ...acc, ...curr };
|
|
3216
|
-
});
|
|
3217
|
-
}
|
|
3218
|
-
function orderAndMergeValuesByTimestamp(valuesWithTimestamp) {
|
|
3219
|
-
const sortedValues = valuesWithTimestamp.sort((a, b) => a.timestamp - b.timestamp).map((obj) => obj.value);
|
|
3220
|
-
return mergeValues(sortedValues);
|
|
3221
|
-
}
|
|
3222
|
-
|
|
3223
3394
|
class DataViewComponent {
|
|
3224
|
-
|
|
3225
|
-
|
|
3395
|
+
set data(value) {
|
|
3396
|
+
this.stateService.data.set(value);
|
|
3397
|
+
}
|
|
3398
|
+
set page(value) {
|
|
3399
|
+
this.stateService.activePage.set(value);
|
|
3400
|
+
}
|
|
3401
|
+
set pageSize(value) {
|
|
3402
|
+
this.stateService.pageSize.set(value);
|
|
3403
|
+
}
|
|
3404
|
+
set selectedRow(value) {
|
|
3405
|
+
this.stateService.selectedRows.set(value);
|
|
3406
|
+
}
|
|
3407
|
+
set expandedRows(value) {
|
|
3408
|
+
this.stateService.expandedRows.set(value);
|
|
3409
|
+
}
|
|
3410
|
+
set frozenActionColumn(value) {
|
|
3411
|
+
this.stateService.actionColumnConfigFrozen.set(value);
|
|
3412
|
+
}
|
|
3413
|
+
set actionColumnPosition(value) {
|
|
3414
|
+
this.stateService.actionColumnConfigPosition.set(value);
|
|
3415
|
+
}
|
|
3416
|
+
set layout(value) {
|
|
3417
|
+
this.stateService.layout.set(value);
|
|
3418
|
+
}
|
|
3419
|
+
set columns(value) {
|
|
3420
|
+
this.stateService.columns.set(value);
|
|
3421
|
+
}
|
|
3422
|
+
set filters(value) {
|
|
3423
|
+
this.stateService.filters.set(value);
|
|
3424
|
+
}
|
|
3425
|
+
set sortField(value) {
|
|
3426
|
+
this.stateService.sortColumn.set(value);
|
|
3427
|
+
}
|
|
3428
|
+
set sortDirection(value) {
|
|
3429
|
+
this.stateService.sortDirection.set(value);
|
|
3226
3430
|
}
|
|
3227
3431
|
set paginator(value) {
|
|
3228
|
-
this.listGridPaginator.set(value);
|
|
3229
|
-
this.tablePaginator.set(value);
|
|
3432
|
+
this.stateService.listGridPaginator.set(value);
|
|
3433
|
+
this.stateService.tablePaginator.set(value);
|
|
3434
|
+
}
|
|
3435
|
+
set listGridPaginator(value) {
|
|
3436
|
+
this.stateService.listGridPaginator.set(value);
|
|
3437
|
+
}
|
|
3438
|
+
set tablePaginator(value) {
|
|
3439
|
+
this.stateService.tablePaginator.set(value);
|
|
3230
3440
|
}
|
|
3231
3441
|
get stringTableCell() {
|
|
3232
3442
|
return this.stringTableCellTemplate() || this.stringTableCellChildTemplate();
|
|
@@ -3294,6 +3504,9 @@ class DataViewComponent {
|
|
|
3294
3504
|
get numberTableFilterCell() {
|
|
3295
3505
|
return this.numberTableFilterCellTemplate() || this.numberTableFilterCellChildTemplate();
|
|
3296
3506
|
}
|
|
3507
|
+
set additionalActions(value) {
|
|
3508
|
+
this.stateService.additionalActions.set(value);
|
|
3509
|
+
}
|
|
3297
3510
|
get viewItemObserved() {
|
|
3298
3511
|
return this.injector.get('InteractiveDataViewComponent', null)?.viewItem.observed() || this.viewItem.observed();
|
|
3299
3512
|
}
|
|
@@ -3309,10 +3522,9 @@ class DataViewComponent {
|
|
|
3309
3522
|
}
|
|
3310
3523
|
constructor() {
|
|
3311
3524
|
this.injector = inject(Injector);
|
|
3525
|
+
this.stateService = inject(DataViewStateService);
|
|
3312
3526
|
this.dataListGridComponent = viewChild(DataListGridComponent, ...(ngDevMode ? [{ debugName: "dataListGridComponent" }] : []));
|
|
3313
3527
|
this.dataTableComponent = viewChild(DataTableComponent, ...(ngDevMode ? [{ debugName: "dataTableComponent" }] : []));
|
|
3314
|
-
this.dataTableComponentState$ = new ReplaySubject(1);
|
|
3315
|
-
this.dataListGridComponentState$ = new ReplaySubject(1);
|
|
3316
3528
|
this.deletePermission = input(...(ngDevMode ? [undefined, { debugName: "deletePermission" }] : []));
|
|
3317
3529
|
this.editPermission = input(...(ngDevMode ? [undefined, { debugName: "editPermission" }] : []));
|
|
3318
3530
|
this.viewPermission = input(...(ngDevMode ? [undefined, { debugName: "viewPermission" }] : []));
|
|
@@ -3324,34 +3536,20 @@ class DataViewComponent {
|
|
|
3324
3536
|
this.editActionEnabledField = input(...(ngDevMode ? [undefined, { debugName: "editActionEnabledField" }] : []));
|
|
3325
3537
|
this.tableSelectionEnabledField = input(...(ngDevMode ? [undefined, { debugName: "tableSelectionEnabledField" }] : []));
|
|
3326
3538
|
this.tableAllowSelectAll = input(true, ...(ngDevMode ? [{ debugName: "tableAllowSelectAll" }] : []));
|
|
3327
|
-
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
3328
3539
|
this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
3329
3540
|
this.titleLineId = input(...(ngDevMode ? [undefined, { debugName: "titleLineId" }] : []));
|
|
3330
3541
|
this.subtitleLineIds = input(...(ngDevMode ? [undefined, { debugName: "subtitleLineIds" }] : []));
|
|
3331
|
-
this.layout = input(...(ngDevMode ? [undefined, { debugName: "layout" }] : []));
|
|
3332
|
-
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
3333
3542
|
this.emptyResultsMessage = input(...(ngDevMode ? [undefined, { debugName: "emptyResultsMessage" }] : []));
|
|
3334
3543
|
this.clientSideSorting = input(true, ...(ngDevMode ? [{ debugName: "clientSideSorting" }] : []));
|
|
3335
3544
|
this.clientSideFiltering = input(true, ...(ngDevMode ? [{ debugName: "clientSideFiltering" }] : []));
|
|
3336
3545
|
this.fallbackImage = input(...(ngDevMode ? [undefined, { debugName: "fallbackImage" }] : []));
|
|
3337
|
-
this.filters = model([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
3338
|
-
this.sortField = model(...(ngDevMode ? [undefined, { debugName: "sortField" }] : []));
|
|
3339
|
-
this.sortDirection = model("NONE" /* DataSortDirection.NONE */, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
|
|
3340
|
-
this.listGridPaginator = model(true, ...(ngDevMode ? [{ debugName: "listGridPaginator" }] : []));
|
|
3341
|
-
this.tablePaginator = model(true, ...(ngDevMode ? [{ debugName: "tablePaginator" }] : []));
|
|
3342
|
-
this.page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
3343
3546
|
this.totalRecordsOnServer = input(...(ngDevMode ? [undefined, { debugName: "totalRecordsOnServer" }] : []));
|
|
3344
3547
|
this.currentPageShowingKey = input('OCX_DATA_TABLE.SHOWING', ...(ngDevMode ? [{ debugName: "currentPageShowingKey" }] : []));
|
|
3345
3548
|
this.currentPageShowingWithTotalOnServerKey = input('OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER', ...(ngDevMode ? [{ debugName: "currentPageShowingWithTotalOnServerKey" }] : []));
|
|
3346
|
-
this.selectedRows = input([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
|
|
3347
|
-
this.frozenActionColumn = input(false, ...(ngDevMode ? [{ debugName: "frozenActionColumn" }] : []));
|
|
3348
|
-
this.actionColumnPosition = input('right', ...(ngDevMode ? [{ debugName: "actionColumnPosition" }] : []));
|
|
3349
3549
|
this.expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
|
|
3350
3550
|
this.frozenExpandColumn = input(false, ...(ngDevMode ? [{ debugName: "frozenExpandColumn" }] : []));
|
|
3351
|
-
this.expandedRows = model([], ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
|
|
3352
3551
|
this.sortStates = input([], ...(ngDevMode ? [{ debugName: "sortStates" }] : []));
|
|
3353
3552
|
this.pageSizes = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "pageSizes" }] : []));
|
|
3354
|
-
this.pageSize = model(...(ngDevMode ? [undefined, { debugName: "pageSize" }] : []));
|
|
3355
3553
|
this.stringTableCellTemplate = input(...(ngDevMode ? [undefined, { debugName: "stringTableCellTemplate" }] : []));
|
|
3356
3554
|
this.stringTableCellChildTemplate = contentChild('stringTableCellTemplate', ...(ngDevMode ? [{ debugName: "stringTableCellChildTemplate" }] : []));
|
|
3357
3555
|
this.numberTableCellTemplate = input(...(ngDevMode ? [undefined, { debugName: "numberTableCellTemplate" }] : []));
|
|
@@ -3396,7 +3594,6 @@ class DataViewComponent {
|
|
|
3396
3594
|
this.stringTableFilterCellChildTemplate = contentChild('stringTableFilterCellTemplate', ...(ngDevMode ? [{ debugName: "stringTableFilterCellChildTemplate" }] : []));
|
|
3397
3595
|
this.numberTableFilterCellTemplate = input(...(ngDevMode ? [undefined, { debugName: "numberTableFilterCellTemplate" }] : []));
|
|
3398
3596
|
this.numberTableFilterCellChildTemplate = contentChild('numberTableFilterCellTemplate', ...(ngDevMode ? [{ debugName: "numberTableFilterCellChildTemplate" }] : []));
|
|
3399
|
-
this.additionalActions = input([], ...(ngDevMode ? [{ debugName: "additionalActions" }] : []));
|
|
3400
3597
|
this.filtered = output();
|
|
3401
3598
|
this.sorted = output();
|
|
3402
3599
|
this.deleteItem = observableOutput();
|
|
@@ -3423,54 +3620,51 @@ class DataViewComponent {
|
|
|
3423
3620
|
this.registerEventListenerForDataTable();
|
|
3424
3621
|
});
|
|
3425
3622
|
effect(() => {
|
|
3426
|
-
const filters = this.filters();
|
|
3623
|
+
const filters = this.stateService.filters();
|
|
3427
3624
|
if (filters) {
|
|
3428
3625
|
this.filtered.emit(filters);
|
|
3429
3626
|
}
|
|
3430
3627
|
});
|
|
3431
3628
|
effect(() => {
|
|
3432
|
-
const sortField = this.
|
|
3433
|
-
const sortDirection = this.sortDirection();
|
|
3629
|
+
const sortField = this.stateService.sortColumn();
|
|
3630
|
+
const sortDirection = this.stateService.sortDirection();
|
|
3434
3631
|
if (sortField && sortDirection) {
|
|
3435
3632
|
this.sorted.emit({ sortColumn: sortField, sortDirection: sortDirection });
|
|
3436
3633
|
}
|
|
3437
3634
|
});
|
|
3438
3635
|
effect(() => {
|
|
3439
|
-
const page = this.
|
|
3636
|
+
const page = this.stateService.activePage();
|
|
3440
3637
|
if (page !== undefined) {
|
|
3441
3638
|
this.pageChanged.emit(page);
|
|
3442
3639
|
}
|
|
3443
3640
|
});
|
|
3444
3641
|
effect(() => {
|
|
3445
|
-
const pageSize = this.pageSize();
|
|
3642
|
+
const pageSize = this.stateService.pageSize();
|
|
3446
3643
|
if (pageSize !== undefined) {
|
|
3447
3644
|
this.pageSizeChanged.emit(pageSize);
|
|
3448
3645
|
}
|
|
3449
3646
|
});
|
|
3647
|
+
effect(() => {
|
|
3648
|
+
this.componentStateChanged.emit({
|
|
3649
|
+
filters: this.stateService.filters(),
|
|
3650
|
+
sorting: {
|
|
3651
|
+
sortColumn: this.stateService.sortColumn(),
|
|
3652
|
+
sortDirection: this.stateService.sortDirection(),
|
|
3653
|
+
},
|
|
3654
|
+
selectedRows: this.stateService.selectedRows(),
|
|
3655
|
+
activePage: this.stateService.activePage(),
|
|
3656
|
+
pageSize: this.stateService.pageSize(),
|
|
3657
|
+
});
|
|
3658
|
+
});
|
|
3450
3659
|
}
|
|
3451
3660
|
ngOnInit() {
|
|
3452
|
-
const columns = this.columns();
|
|
3661
|
+
const columns = this.stateService.columns();
|
|
3453
3662
|
if (columns && columns.length > 0) {
|
|
3454
3663
|
this.firstColumnId.set(columns[0]?.id);
|
|
3455
3664
|
}
|
|
3456
|
-
let dataTableComponentState$ = this.dataTableComponentState$;
|
|
3457
|
-
let dataListGridComponentState$ = this.dataListGridComponentState$;
|
|
3458
|
-
if (this.layout() === 'table') {
|
|
3459
|
-
dataListGridComponentState$ = dataListGridComponentState$.pipe(startWith({}));
|
|
3460
|
-
}
|
|
3461
|
-
else {
|
|
3462
|
-
dataTableComponentState$ = dataTableComponentState$.pipe(startWith({}));
|
|
3463
|
-
}
|
|
3464
|
-
combineLatest([dataTableComponentState$.pipe(timestamp()), dataListGridComponentState$.pipe(timestamp())])
|
|
3465
|
-
.pipe(map((componentStates) => {
|
|
3466
|
-
return orderAndMergeValuesByTimestamp(componentStates);
|
|
3467
|
-
}))
|
|
3468
|
-
.subscribe((val) => {
|
|
3469
|
-
this.componentStateChanged.emit(val);
|
|
3470
|
-
});
|
|
3471
3665
|
}
|
|
3472
3666
|
registerEventListenerForListGrid() {
|
|
3473
|
-
if (this.layout() !== 'table') {
|
|
3667
|
+
if (this.stateService.layout() !== 'table') {
|
|
3474
3668
|
if (this.deleteItem.observed()) {
|
|
3475
3669
|
if (!this.dataListGridComponent()?.deleteItem.observed()) {
|
|
3476
3670
|
this.dataListGridComponent()?.deleteItem.subscribe((event) => {
|
|
@@ -3495,7 +3689,7 @@ class DataViewComponent {
|
|
|
3495
3689
|
}
|
|
3496
3690
|
}
|
|
3497
3691
|
registerEventListenerForDataTable() {
|
|
3498
|
-
if (this.layout() === 'table') {
|
|
3692
|
+
if (this.stateService.layout() === 'table') {
|
|
3499
3693
|
if (this.deleteItem.observed()) {
|
|
3500
3694
|
if (!this.dataTableComponent()?.deleteTableRow.observed()) {
|
|
3501
3695
|
this.dataTableComponent()?.deleteTableRow.subscribe((event) => {
|
|
@@ -3527,11 +3721,11 @@ class DataViewComponent {
|
|
|
3527
3721
|
}
|
|
3528
3722
|
}
|
|
3529
3723
|
filtering(event) {
|
|
3530
|
-
this.filters.set(event);
|
|
3724
|
+
this.stateService.filters.set(event.filters);
|
|
3531
3725
|
}
|
|
3532
3726
|
sorting(event) {
|
|
3533
|
-
this.sortDirection.set(event.sortDirection);
|
|
3534
|
-
this.
|
|
3727
|
+
this.stateService.sortDirection.set(event.sortDirection);
|
|
3728
|
+
this.stateService.sortColumn.set(event.sortColumn);
|
|
3535
3729
|
}
|
|
3536
3730
|
deletingElement(event) {
|
|
3537
3731
|
if (this.deleteItemObserved) {
|
|
@@ -3554,20 +3748,64 @@ class DataViewComponent {
|
|
|
3554
3748
|
}
|
|
3555
3749
|
}
|
|
3556
3750
|
onPageChange(event) {
|
|
3557
|
-
this.
|
|
3751
|
+
this.stateService.activePage.set(event);
|
|
3558
3752
|
}
|
|
3559
3753
|
onPageSizeChange(event) {
|
|
3560
|
-
this.pageSize.set(event);
|
|
3754
|
+
this.stateService.pageSize.set(event);
|
|
3561
3755
|
}
|
|
3562
3756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, stringTableCellTemplate: { classPropertyName: "stringTableCellTemplate", publicName: "stringTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableCellTemplate: { classPropertyName: "numberTableCellTemplate", publicName: "numberTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableCellTemplate: { classPropertyName: "dateTableCellTemplate", publicName: "dateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableCellTemplate: { classPropertyName: "tableCellTemplate", publicName: "tableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableCellTemplate: { classPropertyName: "translationKeyTableCellTemplate", publicName: "translationKeyTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableCellTemplate: { classPropertyName: "relativeDateTableCellTemplate", publicName: "relativeDateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableFilterCellTemplate: { classPropertyName: "tableFilterCellTemplate", publicName: "tableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableFilterCellTemplate: { classPropertyName: "dateTableFilterCellTemplate", publicName: "dateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableFilterCellTemplate: { classPropertyName: "relativeDateTableFilterCellTemplate", publicName: "relativeDateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableFilterCellTemplate: { classPropertyName: "translationKeyTableFilterCellTemplate", publicName: "translationKeyTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringTableFilterCellTemplate: { classPropertyName: "stringTableFilterCellTemplate", publicName: "stringTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableFilterCellTemplate: { classPropertyName: "numberTableFilterCellTemplate", publicName: "numberTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortField: "sortFieldChange", sortDirection: "sortDirectionChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", expandedRows: "expandedRowsChange", pageSize: "pageSizeChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItemTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItemTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValueTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataListGridComponent", first: true, predicate: DataListGridComponent, descendants: true, isSignal: true }, { propertyName: "dataTableComponent", first: true, predicate: DataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (layout() !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name()\"\n [data]=\"data()\"\n [columns]=\"columns()\"\n [filters]=\"filters()\"\n [sortDirection]=\"sortDirection()\"\n [sortField]=\"sortField()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [paginator]=\"listGridPaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"layout()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n [listItemTemplate]=\"listItem\"\n [gridItemTemplate]=\"gridItem\"\n [listValueTemplate]=\"listValue\"\n [translationKeyListValueTemplate]=\"translationKeyListValue\"\n [numberListValueTemplate]=\"numberListValue\"\n [relativeDateListValueTemplate]=\"relativeDateListValue\"\n [stringListValueTemplate]=\"stringListValue\"\n [dateListValueTemplate]=\"dateListValue\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [parentTemplates]=\"templatesForChildren()\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLinesTemplate let-item>\n @if (listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLinesTemplate let-item>\n @if (gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemTemplate let-item>\n @if (gridItem) {\n <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItemTemplate let-item>\n @if (listItem) {\n <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (listValue) {\n <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateListValue) {\n <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (layout() === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"data()\"\n [columns]=\"columns()\"\n [filters]=\"filters()\"\n [sortDirection]=\"sortDirection()\"\n [sortColumn]=\"sortField()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [paginator]=\"tablePaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n [selectedRows]=\"selectedRows()\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [stringCellTemplate]=\"stringTableCell\"\n [numberCellTemplate]=\"numberTableCell\"\n [dateCellTemplate]=\"dateTableCell\"\n [relativeDateCellTemplate]=\"relativeDateTableCell\"\n [cellTemplate]=\"tableCell\"\n [translationKeyCellTemplate]=\"translationKeyTableCell\"\n [filterCellTemplate]=\"tableFilterCell\"\n [dateFilterCellTemplate]=\"dateTableFilterCell\"\n [numberFilterCellTemplate]=\"numberTableFilterCell\"\n [stringFilterCellTemplate]=\"stringTableFilterCell\"\n [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n [parentTemplates]=\"templatesForChildren()\"\n [allowSelectAll]=\"tableAllowSelectAll()\"\n [selectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [(expandedRows)]=\"expandedRows\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-table>\n <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableCell) {\n <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableFilterCell) {\n <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSize", "pageSizes", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["pageSizeChange", "pageChange", "nameChange", "viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged", "parentTemplatesChange"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }] }); }
|
|
3757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: false, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: false, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, stringTableCellTemplate: { classPropertyName: "stringTableCellTemplate", publicName: "stringTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableCellTemplate: { classPropertyName: "numberTableCellTemplate", publicName: "numberTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableCellTemplate: { classPropertyName: "dateTableCellTemplate", publicName: "dateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableCellTemplate: { classPropertyName: "tableCellTemplate", publicName: "tableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableCellTemplate: { classPropertyName: "translationKeyTableCellTemplate", publicName: "translationKeyTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableCellTemplate: { classPropertyName: "relativeDateTableCellTemplate", publicName: "relativeDateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableFilterCellTemplate: { classPropertyName: "tableFilterCellTemplate", publicName: "tableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableFilterCellTemplate: { classPropertyName: "dateTableFilterCellTemplate", publicName: "dateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableFilterCellTemplate: { classPropertyName: "relativeDateTableFilterCellTemplate", publicName: "relativeDateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableFilterCellTemplate: { classPropertyName: "translationKeyTableFilterCellTemplate", publicName: "translationKeyTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringTableFilterCellTemplate: { classPropertyName: "stringTableFilterCellTemplate", publicName: "stringTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableFilterCellTemplate: { classPropertyName: "numberTableFilterCellTemplate", publicName: "numberTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [
|
|
3758
|
+
{ provide: 'DataViewComponent', useExisting: DataViewComponent },
|
|
3759
|
+
{
|
|
3760
|
+
provide: DataViewStateService,
|
|
3761
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
3762
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
3763
|
+
}
|
|
3764
|
+
], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItemTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItemTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValueTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataListGridComponent", first: true, predicate: DataListGridComponent, descendants: true, isSignal: true }, { propertyName: "dataTableComponent", first: true, predicate: DataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (stateService.layout() !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name()\"\n [data]=\"stateService.data()\"\n [columns]=\"stateService.columns()\"\n [filters]=\"stateService.filters()\"\n [sortDirection]=\"stateService.sortDirection()\"\n [sortField]=\"stateService.sortColumn()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes()\"\n [paginator]=\"stateService.listGridPaginator()\"\n [page]=\"stateService.activePage()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"stateService.layout() === 'grid' ? 'grid' : 'list'\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"stateService.additionalActions()\"\n [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n [listItemTemplate]=\"listItem\"\n [gridItemTemplate]=\"gridItem\"\n [listValueTemplate]=\"listValue\"\n [translationKeyListValueTemplate]=\"translationKeyListValue\"\n [numberListValueTemplate]=\"numberListValue\"\n [relativeDateListValueTemplate]=\"relativeDateListValue\"\n [stringListValueTemplate]=\"stringListValue\"\n [dateListValueTemplate]=\"dateListValue\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [parentTemplates]=\"templatesForChildren()\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLinesTemplate let-item>\n @if (listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLinesTemplate let-item>\n @if (gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemTemplate let-item>\n @if (gridItem) {\n <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItemTemplate let-item>\n @if (listItem) {\n <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (listValue) {\n <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateListValue) {\n <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (stateService.layout() === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"stateService.data()\"\n [columns]=\"stateService.columns()\"\n [filters]=\"stateService.filters()\"\n [sortDirection]=\"stateService.sortDirection()\"\n [sortColumn]=\"stateService.sortColumn()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"stateService.pageSize()\"\n [paginator]=\"stateService.tablePaginator()\"\n [page]=\"stateService.activePage()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [selectedRows]=\"stateService.selectedRows()\"\n [frozenActionColumn]=\"stateService.actionColumnConfigFrozen()\"\n [actionColumnPosition]=\"stateService.actionColumnConfigPosition()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"stateService.additionalActions()\"\n [stringCellTemplate]=\"stringTableCell\"\n [numberCellTemplate]=\"numberTableCell\"\n [dateCellTemplate]=\"dateTableCell\"\n [relativeDateCellTemplate]=\"relativeDateTableCell\"\n [cellTemplate]=\"tableCell\"\n [translationKeyCellTemplate]=\"translationKeyTableCell\"\n [filterCellTemplate]=\"tableFilterCell\"\n [dateFilterCellTemplate]=\"dateTableFilterCell\"\n [numberFilterCellTemplate]=\"numberTableFilterCell\"\n [stringFilterCellTemplate]=\"stringTableFilterCell\"\n [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n [parentTemplates]=\"templatesForChildren()\"\n [allowSelectAll]=\"tableAllowSelectAll()\"\n [selectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [expandedRows]=\"stateService.expandedRows()\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-table>\n <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableCell) {\n <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableFilterCell) {\n <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "page", "pageSize", "pageSizes", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["nameChange", "viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged", "parentTemplatesChange"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "sortStatesChange", "pageSizesChange", "nameChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }] }); }
|
|
3564
3765
|
}
|
|
3565
3766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewComponent, decorators: [{
|
|
3566
3767
|
type: Component,
|
|
3567
|
-
args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout() !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name()\"\n [data]=\"data()\"\n [columns]=\"columns()\"\n [filters]=\"filters()\"\n [sortDirection]=\"sortDirection()\"\n [sortField]=\"sortField()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [paginator]=\"listGridPaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"layout()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n [listItemTemplate]=\"listItem\"\n [gridItemTemplate]=\"gridItem\"\n [listValueTemplate]=\"listValue\"\n [translationKeyListValueTemplate]=\"translationKeyListValue\"\n [numberListValueTemplate]=\"numberListValue\"\n [relativeDateListValueTemplate]=\"relativeDateListValue\"\n [stringListValueTemplate]=\"stringListValue\"\n [dateListValueTemplate]=\"dateListValue\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [parentTemplates]=\"templatesForChildren()\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLinesTemplate let-item>\n @if (listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLinesTemplate let-item>\n @if (gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemTemplate let-item>\n @if (gridItem) {\n <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItemTemplate let-item>\n @if (listItem) {\n <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (listValue) {\n <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateListValue) {\n <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (layout() === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"data()\"\n [columns]=\"columns()\"\n [filters]=\"filters()\"\n [sortDirection]=\"sortDirection()\"\n [sortColumn]=\"sortField()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [paginator]=\"tablePaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n [selectedRows]=\"selectedRows()\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [stringCellTemplate]=\"stringTableCell\"\n [numberCellTemplate]=\"numberTableCell\"\n [dateCellTemplate]=\"dateTableCell\"\n [relativeDateCellTemplate]=\"relativeDateTableCell\"\n [cellTemplate]=\"tableCell\"\n [translationKeyCellTemplate]=\"translationKeyTableCell\"\n [filterCellTemplate]=\"tableFilterCell\"\n [dateFilterCellTemplate]=\"dateTableFilterCell\"\n [numberFilterCellTemplate]=\"numberTableFilterCell\"\n [stringFilterCellTemplate]=\"stringTableFilterCell\"\n [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n [parentTemplates]=\"templatesForChildren()\"\n [allowSelectAll]=\"tableAllowSelectAll()\"\n [selectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [(expandedRows)]=\"expandedRows\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-table>\n <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableCell) {\n <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableFilterCell) {\n <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n" }]
|
|
3568
|
-
|
|
3768
|
+
args: [{ standalone: false, selector: 'ocx-data-view', providers: [
|
|
3769
|
+
{ provide: 'DataViewComponent', useExisting: DataViewComponent },
|
|
3770
|
+
{
|
|
3771
|
+
provide: DataViewStateService,
|
|
3772
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
3773
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
3774
|
+
}
|
|
3775
|
+
], template: "@if (stateService.layout() !== 'table') {\n<div>\n <ocx-data-list-grid\n #ocxdatalistgrid\n [name]=\"name()\"\n [data]=\"stateService.data()\"\n [columns]=\"stateService.columns()\"\n [filters]=\"stateService.filters()\"\n [sortDirection]=\"stateService.sortDirection()\"\n [sortField]=\"stateService.sortColumn()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"true\"\n [pageSizes]=\"pageSizes()\"\n [paginator]=\"stateService.listGridPaginator()\"\n [page]=\"stateService.activePage()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"stateService.layout() === 'grid' ? 'grid' : 'list'\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"stateService.additionalActions()\"\n [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n [listItemTemplate]=\"listItem\"\n [gridItemTemplate]=\"gridItem\"\n [listValueTemplate]=\"listValue\"\n [translationKeyListValueTemplate]=\"translationKeyListValue\"\n [numberListValueTemplate]=\"numberListValue\"\n [relativeDateListValueTemplate]=\"relativeDateListValue\"\n [stringListValueTemplate]=\"stringListValue\"\n [dateListValueTemplate]=\"dateListValue\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [parentTemplates]=\"templatesForChildren()\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLinesTemplate let-item>\n @if (listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLinesTemplate let-item>\n @if (gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemTemplate let-item>\n @if (gridItem) {\n <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItemTemplate let-item>\n @if (listItem) {\n <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (listValue) {\n <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyListValue) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberListValue) {\n <ng-container\n [ngTemplateOutlet]=\"numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringListValue) {\n <ng-container\n [ngTemplateOutlet]=\"stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateListValue) {\n <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n</div>\n} @if (stateService.layout() === 'table') {\n<div>\n <ocx-data-table\n #ocxdatatable\n [rows]=\"stateService.data()\"\n [columns]=\"stateService.columns()\"\n [filters]=\"stateService.filters()\"\n [sortDirection]=\"stateService.sortDirection()\"\n [sortColumn]=\"stateService.sortColumn()\"\n [sortStates]=\"sortStates()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"stateService.pageSize()\"\n [paginator]=\"stateService.tablePaginator()\"\n [page]=\"stateService.activePage()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [selectedRows]=\"stateService.selectedRows()\"\n [frozenActionColumn]=\"stateService.actionColumnConfigFrozen()\"\n [actionColumnPosition]=\"stateService.actionColumnConfigPosition()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"stateService.additionalActions()\"\n [stringCellTemplate]=\"stringTableCell\"\n [numberCellTemplate]=\"numberTableCell\"\n [dateCellTemplate]=\"dateTableCell\"\n [relativeDateCellTemplate]=\"relativeDateTableCell\"\n [cellTemplate]=\"tableCell\"\n [translationKeyCellTemplate]=\"translationKeyTableCell\"\n [filterCellTemplate]=\"tableFilterCell\"\n [dateFilterCellTemplate]=\"dateTableFilterCell\"\n [numberFilterCellTemplate]=\"numberTableFilterCell\"\n [stringFilterCellTemplate]=\"stringTableFilterCell\"\n [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n [parentTemplates]=\"templatesForChildren()\"\n [allowSelectAll]=\"tableAllowSelectAll()\"\n [selectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [expandedRows]=\"stateService.expandedRows()\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-table>\n <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableCell) {\n <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableCell) {\n <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (stringTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n >\n <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (tableFilterCell) {\n <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (dateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (numberTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (relativeDateTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n @if (translationKeyTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n</div>\n}\n" }]
|
|
3776
|
+
}], ctorParameters: () => [], propDecorators: { dataListGridComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataListGridComponent), { isSignal: true }] }], dataTableComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataTableComponent), { isSignal: true }] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], tableSelectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSelectionEnabledField", required: false }] }], tableAllowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAllowSelectAll", required: false }] }], data: [{
|
|
3777
|
+
type: Input
|
|
3778
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], titleLineId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLineId", required: false }] }], subtitleLineIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleLineIds", required: false }] }], page: [{
|
|
3779
|
+
type: Input
|
|
3780
|
+
}], pageSize: [{
|
|
3781
|
+
type: Input
|
|
3782
|
+
}], selectedRow: [{
|
|
3783
|
+
type: Input
|
|
3784
|
+
}], expandedRows: [{
|
|
3569
3785
|
type: Input
|
|
3570
|
-
}],
|
|
3786
|
+
}], frozenActionColumn: [{
|
|
3787
|
+
type: Input
|
|
3788
|
+
}], actionColumnPosition: [{
|
|
3789
|
+
type: Input
|
|
3790
|
+
}], layout: [{
|
|
3791
|
+
type: Input
|
|
3792
|
+
}], columns: [{
|
|
3793
|
+
type: Input
|
|
3794
|
+
}], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], fallbackImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackImage", required: false }] }], filters: [{
|
|
3795
|
+
type: Input
|
|
3796
|
+
}], sortField: [{
|
|
3797
|
+
type: Input
|
|
3798
|
+
}], sortDirection: [{
|
|
3799
|
+
type: Input
|
|
3800
|
+
}], paginator: [{
|
|
3801
|
+
type: Input
|
|
3802
|
+
}], listGridPaginator: [{
|
|
3803
|
+
type: Input
|
|
3804
|
+
}], tablePaginator: [{
|
|
3805
|
+
type: Input
|
|
3806
|
+
}], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], stringTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringTableCellTemplate", required: false }] }], stringTableCellChildTemplate: [{ type: i0.ContentChild, args: ['stringTableCellTemplate', { isSignal: true }] }], numberTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberTableCellTemplate", required: false }] }], numberTableCellChildTemplate: [{ type: i0.ContentChild, args: ['numberTableCellTemplate', { isSignal: true }] }], dateTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTableCellTemplate", required: false }] }], dateTableCellChildTemplate: [{ type: i0.ContentChild, args: ['dateTableCellTemplate', { isSignal: true }] }], tableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCellTemplate", required: false }] }], tableCellChildTemplate: [{ type: i0.ContentChild, args: ['tableCellTemplate', { isSignal: true }] }], translationKeyTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyTableCellTemplate", required: false }] }], translationKeyTableCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyTableCellTemplate', { isSignal: true }] }], gridItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemSubtitleLinesTemplate", required: false }] }], gridItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['gridItemSubtitleLinesTemplate', { isSignal: true }] }], listItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemSubtitleLinesTemplate", required: false }] }], listItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['listItemSubtitleLinesTemplate', { isSignal: true }] }], gridItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemTemplate", required: false }] }], gridItemChildTemplate: [{ type: i0.ContentChild, args: ['gridItemTemplate', { isSignal: true }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], listItemChildTemplate: [{ type: i0.ContentChild, args: ['listItemTemplate', { isSignal: true }] }], relativeDateTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateTableCellTemplate", required: false }] }], relativeDateTableCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateTableCellTemplate', { isSignal: true }] }], listValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listValueTemplate", required: false }] }], listValueChildTemplate: [{ type: i0.ContentChild, args: ['listValueTemplate', { isSignal: true }] }], translationKeyListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyListValueTemplate", required: false }] }], translationKeyListValueChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyListValueTemplate', { isSignal: true }] }], numberListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberListValueTemplate", required: false }] }], numberListValueChildTemplate: [{ type: i0.ContentChild, args: ['numberListValueTemplate', { isSignal: true }] }], relativeDateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateListValueTemplate", required: false }] }], relativeDateListValueChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateListValueTemplate', { isSignal: true }] }], stringListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringListValueTemplate", required: false }] }], stringListValueChildTemplate: [{ type: i0.ContentChild, args: ['stringListValueTemplate', { isSignal: true }] }], dateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateListValueTemplate", required: false }] }], dateListValueChildTemplate: [{ type: i0.ContentChild, args: ['dateListValueTemplate', { isSignal: true }] }], tableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableFilterCellTemplate", required: false }] }], tableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['tableFilterCellTemplate', { isSignal: true }] }], dateTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTableFilterCellTemplate", required: false }] }], dateTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateTableFilterCellTemplate', { isSignal: true }] }], relativeDateTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateTableFilterCellTemplate", required: false }] }], relativeDateTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateTableFilterCellTemplate', { isSignal: true }] }], translationKeyTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyTableFilterCellTemplate", required: false }] }], translationKeyTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyTableFilterCellTemplate', { isSignal: true }] }], stringTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringTableFilterCellTemplate", required: false }] }], stringTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringTableFilterCellTemplate', { isSignal: true }] }], numberTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberTableFilterCellTemplate", required: false }] }], numberTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberTableFilterCellTemplate', { isSignal: true }] }], additionalActions: [{
|
|
3807
|
+
type: Input
|
|
3808
|
+
}], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], deleteItem: [{
|
|
3571
3809
|
type: Output
|
|
3572
3810
|
}], viewItem: [{
|
|
3573
3811
|
type: Output
|
|
@@ -3754,11 +3992,16 @@ function limit(columnFilterData, amount, options) {
|
|
|
3754
3992
|
}
|
|
3755
3993
|
|
|
3756
3994
|
class FilterViewComponent {
|
|
3995
|
+
set filters(value) {
|
|
3996
|
+
this.stateService.filters.set(value);
|
|
3997
|
+
}
|
|
3998
|
+
set columns(value) {
|
|
3999
|
+
this.stateService.columns.set(value);
|
|
4000
|
+
}
|
|
3757
4001
|
constructor() {
|
|
3758
4002
|
this.ColumnType = ColumnType;
|
|
3759
4003
|
this.FilterType = FilterType;
|
|
3760
|
-
this.
|
|
3761
|
-
this.columns = model([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
4004
|
+
this.stateService = inject(DataViewStateService);
|
|
3762
4005
|
this.displayMode = input('button', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
|
|
3763
4006
|
this.selectDisplayedChips = input((filters) => limit(filters, 3, { reverse: true }), ...(ngDevMode ? [{ debugName: "selectDisplayedChips" }] : []));
|
|
3764
4007
|
this.chipStyleClass = input('', ...(ngDevMode ? [{ debugName: "chipStyleClass" }] : []));
|
|
@@ -3790,8 +4033,8 @@ class FilterViewComponent {
|
|
|
3790
4033
|
this.templates = input(undefined, ...(ngDevMode ? [{ debugName: "templates" }] : []));
|
|
3791
4034
|
this.templates$ = toObservable(this.templates);
|
|
3792
4035
|
this.columnFilterDataRows = computed(() => {
|
|
3793
|
-
const filters = this.filters();
|
|
3794
|
-
const columns = this.columns();
|
|
4036
|
+
const filters = this.stateService.filters();
|
|
4037
|
+
const columns = this.stateService.columns();
|
|
3795
4038
|
const columnIds = columns.map((c) => c.id);
|
|
3796
4039
|
return filters
|
|
3797
4040
|
.map((f) => {
|
|
@@ -3864,7 +4107,7 @@ class FilterViewComponent {
|
|
|
3864
4107
|
});
|
|
3865
4108
|
});
|
|
3866
4109
|
effect(() => {
|
|
3867
|
-
const cols = this.columns();
|
|
4110
|
+
const cols = this.stateService.columns();
|
|
3868
4111
|
const columnFilterTableColumns = this.columnFilterTableColumns();
|
|
3869
4112
|
const chipObs = cols.map((c) => this.getTemplate(c, this.chipTemplateNames, this.chipTemplates, this.chipIdSuffix));
|
|
3870
4113
|
this.chipTemplates$ = chipObs.length
|
|
@@ -3877,7 +4120,7 @@ class FilterViewComponent {
|
|
|
3877
4120
|
: undefined;
|
|
3878
4121
|
});
|
|
3879
4122
|
effect(() => {
|
|
3880
|
-
const filters = this.filters();
|
|
4123
|
+
const filters = this.stateService.filters();
|
|
3881
4124
|
this.filtered.emit(filters);
|
|
3882
4125
|
this.componentStateChanged.emit({ filters });
|
|
3883
4126
|
});
|
|
@@ -3896,15 +4139,15 @@ class FilterViewComponent {
|
|
|
3896
4139
|
return templates[column.id];
|
|
3897
4140
|
}
|
|
3898
4141
|
onResetFilersClick() {
|
|
3899
|
-
this.filters.set([]);
|
|
4142
|
+
this.stateService.filters.set([]);
|
|
3900
4143
|
}
|
|
3901
4144
|
onChipRemove(filter) {
|
|
3902
|
-
const filters = this.filters().filter((f) => f.value !== filter.value);
|
|
3903
|
-
this.filters.set(filters);
|
|
4145
|
+
const filters = this.stateService.filters().filter((f) => f.value !== filter.value);
|
|
4146
|
+
this.stateService.filters.set(filters);
|
|
3904
4147
|
}
|
|
3905
4148
|
onFilterDelete(row) {
|
|
3906
|
-
const filters = this.filters().filter((f) => !(f.columnId === row['valueColumnId'] && f.value === row['value']));
|
|
3907
|
-
this.filters.set(filters);
|
|
4149
|
+
const filters = this.stateService.filters().filter((f) => !(f.columnId === row['valueColumnId'] && f.value === row['value']));
|
|
4150
|
+
this.stateService.filters.set(filters);
|
|
3908
4151
|
}
|
|
3909
4152
|
focusTrigger() {
|
|
3910
4153
|
const trigger = this.trigger();
|
|
@@ -3940,12 +4183,16 @@ class FilterViewComponent {
|
|
|
3940
4183
|
};
|
|
3941
4184
|
}
|
|
3942
4185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3943
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, chipStyleClass: { classPropertyName: "chipStyleClass", publicName: "chipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", columns: "columnsChange", filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true, isSignal: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n @if (displayMode() === 'chips') {\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n } @else {\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n (getColumnForFilter(filter, columns); as column) {\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n @if (filterViewChipContent()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewChipContent()\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n } @else {\n <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n <ng-container\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n }\n </span>\n }\n </p-chip>\n } } @if (selectedFilters.length < filters.length) {\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n @if (filterViewShowMoreChip()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n } @else {\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n }\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n } } }\n </ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n }\n <ng-template #noChipsContent>\n <p-button\n tabindex=\"0\"\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n [disabled]=\"filters.length === 0\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n [ocxTooltip]=\"\n filters.length === 0\n ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n \"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n aria-describedby=\"ocx-manage-filters-tooltip\"\n [tooltipOptions]=\"{ id: 'ocx-manage-filters-tooltip' }\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n <ng-template #filterTablePanel>\n @if (tableTemplates$ | async; as templates) {\n <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"columnFilterDataRows()\"\n [columns]=\"columnFilterTableColumns()\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle()\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n valueColumn.filterType === FilterType.EQUALS) {\n <ng-container\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n } }\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-popover>\n }\n </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n @if (templates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
4186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, chipStyleClass: { classPropertyName: "chipStyleClass", publicName: "chipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true, isSignal: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (stateService.columns(); as columns) { @if (stateService.filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n @if (displayMode() === 'chips') {\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n } @else {\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n (getColumnForFilter(filter, columns); as column) {\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n @if (filterViewChipContent()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewChipContent()\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n } @else {\n <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n <ng-container\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n }\n </span>\n }\n </p-chip>\n } } @if (selectedFilters.length < filters.length) {\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n @if (filterViewShowMoreChip()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n } @else {\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n }\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n } } }\n </ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n }\n <ng-template #noChipsContent>\n <p-button\n tabindex=\"0\"\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n [disabled]=\"filters.length === 0\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n [ocxTooltip]=\"\n filters.length === 0\n ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n \"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n aria-describedby=\"ocx-manage-filters-tooltip\"\n [tooltipOptions]=\"{ id: 'ocx-manage-filters-tooltip' }\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n <ng-template #filterTablePanel>\n @if (tableTemplates$ | async; as templates) {\n <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"columnFilterDataRows()\"\n [columns]=\"columnFilterTableColumns()\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle()\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n valueColumn.filterType === FilterType.EQUALS) {\n <ng-container\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n } }\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-popover>\n }\n </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n @if (templates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "sortStatesChange", "pageSizesChange", "nameChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
3944
4187
|
}
|
|
3945
4188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterViewComponent, decorators: [{
|
|
3946
4189
|
type: Component,
|
|
3947
|
-
args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n @if (displayMode() === 'chips') {\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n } @else {\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n (getColumnForFilter(filter, columns); as column) {\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n @if (filterViewChipContent()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewChipContent()\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n } @else {\n <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n <ng-container\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n }\n </span>\n }\n </p-chip>\n } } @if (selectedFilters.length < filters.length) {\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n @if (filterViewShowMoreChip()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n } @else {\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n }\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n } } }\n </ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n }\n <ng-template #noChipsContent>\n <p-button\n tabindex=\"0\"\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n [disabled]=\"filters.length === 0\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n [ocxTooltip]=\"\n filters.length === 0\n ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n \"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n aria-describedby=\"ocx-manage-filters-tooltip\"\n [tooltipOptions]=\"{ id: 'ocx-manage-filters-tooltip' }\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n <ng-template #filterTablePanel>\n @if (tableTemplates$ | async; as templates) {\n <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"columnFilterDataRows()\"\n [columns]=\"columnFilterTableColumns()\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle()\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n valueColumn.filterType === FilterType.EQUALS) {\n <ng-container\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n } }\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-popover>\n }\n </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n @if (templates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
|
|
3948
|
-
}], ctorParameters: () => [], propDecorators: { filters: [{
|
|
4190
|
+
args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (stateService.columns(); as columns) { @if (stateService.filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n @if (displayMode() === 'chips') {\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n } @else {\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n (getColumnForFilter(filter, columns); as column) {\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n @if (filterViewChipContent()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewChipContent()\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n } @else {\n <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n <ng-container\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n }\n </span>\n }\n </p-chip>\n } } @if (selectedFilters.length < filters.length) {\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n @if (filterViewShowMoreChip()) {\n <ng-container\n [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n } @else {\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n }\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n } } }\n </ng-container>\n } @else {\n <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n }\n <ng-template #noChipsContent>\n <p-button\n tabindex=\"0\"\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n [disabled]=\"filters.length === 0\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n [ocxTooltip]=\"\n filters.length === 0\n ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n \"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n aria-describedby=\"ocx-manage-filters-tooltip\"\n [tooltipOptions]=\"{ id: 'ocx-manage-filters-tooltip' }\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n <ng-template #filterTablePanel>\n @if (tableTemplates$ | async; as templates) {\n <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"columnFilterDataRows()\"\n [columns]=\"columnFilterTableColumns()\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle()\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n valueColumn.filterType === FilterType.EQUALS) {\n <ng-container\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n } }\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-popover>\n }\n </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n @if (templates[column.id]; as template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
|
|
4191
|
+
}], ctorParameters: () => [], propDecorators: { filters: [{
|
|
4192
|
+
type: Input
|
|
4193
|
+
}], columns: [{
|
|
4194
|
+
type: Input
|
|
4195
|
+
}], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], selectDisplayedChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDisplayedChips", required: false }] }], chipStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipStyleClass", required: false }] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Popover), { isSignal: true }] }], manageButton: [{ type: i0.ViewChild, args: ['manageButton', { isSignal: true }] }], defaultTemplates: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }] } });
|
|
3949
4196
|
|
|
3950
4197
|
class GroupByCountDiagramComponent {
|
|
3951
4198
|
constructor() {
|
|
@@ -4042,23 +4289,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
4042
4289
|
}], ctorParameters: () => [], propDecorators: { sumKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sumKey", required: false }] }], diagramType: [{ type: i0.Input, args: [{ isSignal: true, alias: "diagramType", required: false }] }, { type: i0.Output, args: ["diagramTypeChange"] }], chartTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartTitleKey", required: false }] }], chartDescriptionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDescriptionKey", required: false }] }], fillMissingColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMissingColors", required: false }] }], supportedDiagramTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedDiagramTypes", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], allLabelKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allLabelKeys", required: false }] }], showAllLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllLabels", required: false }] }], columnType: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnType", required: false }] }, { type: i0.Output, args: ["columnTypeChange"] }], columnField: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnField", required: false }] }, { type: i0.Output, args: ["columnFieldChange"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }, { type: i0.Output, args: ["colorsChange"] }], dataSelected: [{ type: i0.Output, args: ["dataSelected"] }], diagramTypeChanged: [{ type: i0.Output, args: ["diagramTypeChanged"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }] } });
|
|
4043
4290
|
|
|
4044
4291
|
class InteractiveDataViewComponent {
|
|
4045
|
-
|
|
4046
|
-
|
|
4292
|
+
set columns(value) {
|
|
4293
|
+
this.stateService.columns.set(value);
|
|
4294
|
+
}
|
|
4295
|
+
set filters(value) {
|
|
4296
|
+
this.stateService.filters.set(value);
|
|
4297
|
+
}
|
|
4298
|
+
set sortField(value) {
|
|
4299
|
+
this.stateService.sortColumn.set(value);
|
|
4300
|
+
}
|
|
4301
|
+
set sortDirection(value) {
|
|
4302
|
+
this.stateService.sortDirection.set(value);
|
|
4303
|
+
}
|
|
4304
|
+
set page(value) {
|
|
4305
|
+
this.stateService.activePage.set(value);
|
|
4306
|
+
}
|
|
4307
|
+
set pageSize(value) {
|
|
4308
|
+
this.stateService.pageSize.set(value);
|
|
4309
|
+
}
|
|
4310
|
+
set layout(value) {
|
|
4311
|
+
this.stateService.layout.set(value);
|
|
4312
|
+
}
|
|
4313
|
+
set additionalActions(value) {
|
|
4314
|
+
this.stateService.additionalActions.set(value);
|
|
4315
|
+
}
|
|
4316
|
+
set listGridPaginator(value) {
|
|
4317
|
+
this.stateService.listGridPaginator.set(value);
|
|
4318
|
+
}
|
|
4319
|
+
set tablePaginator(value) {
|
|
4320
|
+
this.stateService.tablePaginator.set(value);
|
|
4047
4321
|
}
|
|
4048
4322
|
set paginator(value) {
|
|
4049
|
-
this.listGridPaginator.set(value);
|
|
4050
|
-
this.tablePaginator.set(value);
|
|
4323
|
+
this.stateService.listGridPaginator.set(value);
|
|
4324
|
+
this.stateService.tablePaginator.set(value);
|
|
4325
|
+
}
|
|
4326
|
+
set selectedRows(value) {
|
|
4327
|
+
this.stateService.selectedRows.set(value);
|
|
4328
|
+
}
|
|
4329
|
+
set frozenActionColumn(value) {
|
|
4330
|
+
this.stateService.actionColumnConfigFrozen.set(value);
|
|
4331
|
+
}
|
|
4332
|
+
set actionColumnPosition(value) {
|
|
4333
|
+
this.stateService.actionColumnConfigPosition.set(value);
|
|
4334
|
+
}
|
|
4335
|
+
set expandedRows(value) {
|
|
4336
|
+
this.stateService.expandedRows.set(value);
|
|
4337
|
+
}
|
|
4338
|
+
set selectedGroupKey(value) {
|
|
4339
|
+
this.stateService.activeColumnGroupKey.set(value);
|
|
4340
|
+
}
|
|
4341
|
+
set data(value) {
|
|
4342
|
+
this.stateService.data.set(value);
|
|
4051
4343
|
}
|
|
4052
4344
|
constructor() {
|
|
4053
4345
|
this.slotService = inject(SlotService);
|
|
4054
4346
|
this.destroyRef = inject(DestroyRef);
|
|
4347
|
+
this.stateService = inject(DataViewStateService);
|
|
4055
4348
|
this.dataViewComponent = viewChild(DataViewComponent, ...(ngDevMode ? [{ debugName: "dataViewComponent" }] : []));
|
|
4056
|
-
this.columnGroupSelectionComponentState$ = new ReplaySubject(1);
|
|
4057
|
-
this.customGroupColumnSelectorComponentState$ = new ReplaySubject(1);
|
|
4058
|
-
this.dataLayoutComponentState$ = new ReplaySubject(1);
|
|
4059
|
-
this.dataListGridSortingComponentState$ = new ReplaySubject(1);
|
|
4060
|
-
this.dataViewComponentState$ = new ReplaySubject(1);
|
|
4061
|
-
this.filterViewComponentState$ = new ReplaySubject(1);
|
|
4062
4349
|
this.searchConfigPermission = input(undefined, ...(ngDevMode ? [{ debugName: "searchConfigPermission" }] : []));
|
|
4063
4350
|
this.deletePermission = input(undefined, ...(ngDevMode ? [{ debugName: "deletePermission" }] : []));
|
|
4064
4351
|
this.editPermission = input(undefined, ...(ngDevMode ? [{ debugName: "editPermission" }] : []));
|
|
@@ -4075,52 +4362,37 @@ class InteractiveDataViewComponent {
|
|
|
4075
4362
|
this.titleLineId = input(undefined, ...(ngDevMode ? [{ debugName: "titleLineId" }] : []));
|
|
4076
4363
|
this.subtitleLineIds = input(undefined, ...(ngDevMode ? [{ debugName: "subtitleLineIds" }] : []));
|
|
4077
4364
|
this.supportedViewLayouts = input(['grid', 'list', 'table'], ...(ngDevMode ? [{ debugName: "supportedViewLayouts" }] : []));
|
|
4078
|
-
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
4079
4365
|
this.emptyResultsMessage = input(undefined, ...(ngDevMode ? [{ debugName: "emptyResultsMessage" }] : []));
|
|
4080
4366
|
this.clientSideSorting = input(true, ...(ngDevMode ? [{ debugName: "clientSideSorting" }] : []));
|
|
4081
4367
|
this.clientSideFiltering = input(true, ...(ngDevMode ? [{ debugName: "clientSideFiltering" }] : []));
|
|
4082
4368
|
this.fallbackImage = input('placeholder.png', ...(ngDevMode ? [{ debugName: "fallbackImage" }] : []));
|
|
4083
|
-
this.filters = model([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
4084
|
-
this.sortDirection = model("NONE" /* DataSortDirection.NONE */, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
|
|
4085
|
-
this.sortField = model('', ...(ngDevMode ? [{ debugName: "sortField" }] : []));
|
|
4086
4369
|
this.sortStates = input([
|
|
4087
4370
|
"ASCENDING" /* DataSortDirection.ASCENDING */,
|
|
4088
4371
|
"DESCENDING" /* DataSortDirection.DESCENDING */,
|
|
4089
4372
|
"NONE" /* DataSortDirection.NONE */,
|
|
4090
4373
|
], ...(ngDevMode ? [{ debugName: "sortStates" }] : []));
|
|
4091
4374
|
this.pageSizes = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "pageSizes" }] : []));
|
|
4092
|
-
this.pageSize = model(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
4093
4375
|
this.totalRecordsOnServer = input(undefined, ...(ngDevMode ? [{ debugName: "totalRecordsOnServer" }] : []));
|
|
4094
|
-
this.layout = model('table', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
4095
4376
|
this.defaultGroupKey = input('', ...(ngDevMode ? [{ debugName: "defaultGroupKey" }] : []));
|
|
4096
4377
|
this.customGroupKey = input('OCX_INTERACTIVE_DATA_VIEW.CUSTOM_GROUP', ...(ngDevMode ? [{ debugName: "customGroupKey" }] : []));
|
|
4097
4378
|
this.groupSelectionNoGroupSelectedKey = input('OCX_INTERACTIVE_DATA_VIEW.NO_GROUP_SELECTED', ...(ngDevMode ? [{ debugName: "groupSelectionNoGroupSelectedKey" }] : []));
|
|
4098
4379
|
this.currentPageShowingKey = input('OCX_DATA_TABLE.SHOWING', ...(ngDevMode ? [{ debugName: "currentPageShowingKey" }] : []));
|
|
4099
4380
|
this.currentPageShowingWithTotalOnServerKey = input('OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER', ...(ngDevMode ? [{ debugName: "currentPageShowingWithTotalOnServerKey" }] : []));
|
|
4100
|
-
this.additionalActions = input([], ...(ngDevMode ? [{ debugName: "additionalActions" }] : []));
|
|
4101
|
-
this.listGridPaginator = model(true, ...(ngDevMode ? [{ debugName: "listGridPaginator" }] : []));
|
|
4102
|
-
this.tablePaginator = model(true, ...(ngDevMode ? [{ debugName: "tablePaginator" }] : []));
|
|
4103
4381
|
this.disableFilterView = input(true, ...(ngDevMode ? [{ debugName: "disableFilterView" }] : []));
|
|
4104
4382
|
this.filterViewDisplayMode = input('button', ...(ngDevMode ? [{ debugName: "filterViewDisplayMode" }] : []));
|
|
4105
4383
|
this.filterViewChipStyleClass = input('', ...(ngDevMode ? [{ debugName: "filterViewChipStyleClass" }] : []));
|
|
4106
4384
|
this.filterViewTableStyle = input({ 'max-height': '50vh' }, ...(ngDevMode ? [{ debugName: "filterViewTableStyle" }] : []));
|
|
4107
4385
|
this.filterViewPanelStyle = input({ 'max-width': '90%' }, ...(ngDevMode ? [{ debugName: "filterViewPanelStyle" }] : []));
|
|
4108
4386
|
this.selectDisplayedChips = input((filters) => limit(filters, 3, { reverse: true }), ...(ngDevMode ? [{ debugName: "selectDisplayedChips" }] : []));
|
|
4109
|
-
this.page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
4110
|
-
this.selectedRows = input([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
|
|
4111
4387
|
this.displayedColumnKeys = model([], ...(ngDevMode ? [{ debugName: "displayedColumnKeys" }] : []));
|
|
4112
4388
|
this.displayedColumns = computed(() => {
|
|
4113
4389
|
const columnKeys = this.displayedColumnKeys();
|
|
4114
|
-
return
|
|
4115
|
-
[]);
|
|
4390
|
+
return columnKeys.map((key) => this.stateService.columns().find((col) => col.id === key)).filter(Boolean);
|
|
4116
4391
|
}, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
|
|
4117
|
-
this.frozenActionColumn = model(false, ...(ngDevMode ? [{ debugName: "frozenActionColumn" }] : []));
|
|
4118
|
-
this.actionColumnPosition = model('right', ...(ngDevMode ? [{ debugName: "actionColumnPosition" }] : []));
|
|
4119
4392
|
this.headerStyleClass = input(undefined, ...(ngDevMode ? [{ debugName: "headerStyleClass" }] : []));
|
|
4120
4393
|
this.contentStyleClass = input(undefined, ...(ngDevMode ? [{ debugName: "contentStyleClass" }] : []));
|
|
4121
4394
|
this.expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
|
|
4122
4395
|
this.frozenExpandColumn = input(false, ...(ngDevMode ? [{ debugName: "frozenExpandColumn" }] : []));
|
|
4123
|
-
this.expandedRows = model([], ...(ngDevMode ? [{ debugName: "expandedRows" }] : []));
|
|
4124
4396
|
this.childTableCell = contentChild('tableCell', ...(ngDevMode ? [{ debugName: "childTableCell" }] : []));
|
|
4125
4397
|
this.primeNgTableCell = computed(() => {
|
|
4126
4398
|
const templates = this.templates();
|
|
@@ -4388,8 +4660,6 @@ class InteractiveDataViewComponent {
|
|
|
4388
4660
|
this.rowExpanded = observableOutput();
|
|
4389
4661
|
this.rowCollapsed = observableOutput();
|
|
4390
4662
|
this.componentStateChanged = output();
|
|
4391
|
-
this.selectedGroupKey = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedGroupKey" }] : []));
|
|
4392
|
-
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
4393
4663
|
this.columnGroupSlotName = 'onecx-column-group-selection';
|
|
4394
4664
|
this.groupSelectionChangedSlotEmitter = output();
|
|
4395
4665
|
// Internal EventEmitter for handling slot's groupSelectionChanged output
|
|
@@ -4407,24 +4677,24 @@ class InteractiveDataViewComponent {
|
|
|
4407
4677
|
this.registerEventListenerForDataView();
|
|
4408
4678
|
});
|
|
4409
4679
|
effect(() => {
|
|
4410
|
-
const filters = this.filters();
|
|
4680
|
+
const filters = this.stateService.filters();
|
|
4411
4681
|
this.filtered.emit(filters);
|
|
4412
4682
|
});
|
|
4413
4683
|
effect(() => {
|
|
4414
|
-
const sortField = this.
|
|
4415
|
-
const sortDirection = this.sortDirection();
|
|
4684
|
+
const sortField = this.stateService.sortColumn();
|
|
4685
|
+
const sortDirection = this.stateService.sortDirection();
|
|
4416
4686
|
this.sorted.emit({ sortColumn: sortField, sortDirection });
|
|
4417
4687
|
});
|
|
4418
4688
|
effect(() => {
|
|
4419
|
-
const layout = this.layout();
|
|
4689
|
+
const layout = this.stateService.layout();
|
|
4420
4690
|
this.dataViewLayoutChange.emit(layout);
|
|
4421
4691
|
});
|
|
4422
4692
|
effect(() => {
|
|
4423
|
-
const page = this.
|
|
4693
|
+
const page = this.stateService.activePage();
|
|
4424
4694
|
this.pageChanged.emit(page);
|
|
4425
4695
|
});
|
|
4426
4696
|
effect(() => {
|
|
4427
|
-
const pageSize = this.pageSize();
|
|
4697
|
+
const pageSize = this.stateService.pageSize();
|
|
4428
4698
|
if (!pageSize) {
|
|
4429
4699
|
return;
|
|
4430
4700
|
}
|
|
@@ -4435,13 +4705,32 @@ class InteractiveDataViewComponent {
|
|
|
4435
4705
|
this.displayedColumnKeysChange.emit(displayedColumnKeys);
|
|
4436
4706
|
});
|
|
4437
4707
|
effect(() => {
|
|
4438
|
-
this.
|
|
4708
|
+
this.componentStateChanged.emit({
|
|
4709
|
+
activeColumnGroupKey: this.stateService.activeColumnGroupKey(),
|
|
4710
|
+
displayedColumns: this.displayedColumns(),
|
|
4711
|
+
actionColumnConfig: {
|
|
4712
|
+
frozen: this.stateService.actionColumnConfigFrozen(),
|
|
4713
|
+
position: this.stateService.actionColumnConfigPosition(),
|
|
4714
|
+
},
|
|
4715
|
+
layout: this.stateService.layout(),
|
|
4716
|
+
sorting: {
|
|
4717
|
+
sortColumn: this.stateService.sortColumn(),
|
|
4718
|
+
sortDirection: this.stateService.sortDirection(),
|
|
4719
|
+
},
|
|
4720
|
+
filters: this.stateService.filters(),
|
|
4721
|
+
activePage: this.stateService.activePage(),
|
|
4722
|
+
pageSize: this.stateService.pageSize(),
|
|
4723
|
+
selectedRows: this.stateService.selectedRows(),
|
|
4724
|
+
});
|
|
4725
|
+
});
|
|
4726
|
+
effect(() => {
|
|
4727
|
+
this.stateService.layout();
|
|
4439
4728
|
untracked(() => {
|
|
4440
4729
|
const columnGroupComponentDefined = this.isColumnGroupSelectionComponentDefined();
|
|
4441
4730
|
if (columnGroupComponentDefined) {
|
|
4442
|
-
if (!(this.columns().some((c) => c.nameKey === this.
|
|
4443
|
-
this.
|
|
4444
|
-
this.
|
|
4731
|
+
if (!(this.stateService.columns().some((c) => c.nameKey === this.stateService.activeColumnGroupKey()) ||
|
|
4732
|
+
this.stateService.activeColumnGroupKey() === this.customGroupKey())) {
|
|
4733
|
+
this.stateService.activeColumnGroupKey.set(undefined);
|
|
4445
4734
|
}
|
|
4446
4735
|
}
|
|
4447
4736
|
});
|
|
@@ -4457,71 +4746,27 @@ class InteractiveDataViewComponent {
|
|
|
4457
4746
|
triggerGroupSelectionChanged(event) {
|
|
4458
4747
|
event ??= {
|
|
4459
4748
|
activeColumns: this.displayedColumns(),
|
|
4460
|
-
groupKey: this.
|
|
4749
|
+
groupKey: this.stateService.activeColumnGroupKey() ?? this.defaultGroupKey(),
|
|
4461
4750
|
};
|
|
4462
4751
|
const displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
4463
4752
|
this.displayedColumnKeys.set(displayedColumnKeys);
|
|
4464
|
-
this.
|
|
4465
|
-
this.columnGroupSelectionComponentState$.next({
|
|
4466
|
-
activeColumnGroupKey: event.groupKey,
|
|
4467
|
-
displayedColumns: event.activeColumns,
|
|
4468
|
-
});
|
|
4753
|
+
this.stateService.activeColumnGroupKey.set(event.groupKey);
|
|
4469
4754
|
this.groupSelectionChangedSlotEmitter.emit(event);
|
|
4470
4755
|
}
|
|
4471
4756
|
ngOnInit() {
|
|
4472
|
-
this.
|
|
4757
|
+
this.stateService.activeColumnGroupKey.set(this.defaultGroupKey());
|
|
4473
4758
|
if (this.defaultGroupKey() && this.defaultGroupKey() !== this.customGroupKey()) {
|
|
4474
|
-
this.displayedColumnKeys.set(this.columns()
|
|
4759
|
+
this.displayedColumnKeys.set(this.stateService.columns()
|
|
4475
4760
|
.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey()))
|
|
4476
4761
|
.map((column) => column.id));
|
|
4477
4762
|
}
|
|
4478
|
-
let dataListGridSortingComponentState$ = this.dataListGridSortingComponentState$;
|
|
4479
|
-
let columnGroupSelectionComponentState$ = this.columnGroupSelectionComponentState$;
|
|
4480
|
-
let customGroupColumnSelectorComponentState$ = this.customGroupColumnSelectorComponentState$;
|
|
4481
|
-
if (this.layout() === 'table') {
|
|
4482
|
-
dataListGridSortingComponentState$ = dataListGridSortingComponentState$.pipe(startWith({}));
|
|
4483
|
-
}
|
|
4484
|
-
else {
|
|
4485
|
-
columnGroupSelectionComponentState$ = columnGroupSelectionComponentState$.pipe(startWith({
|
|
4486
|
-
activeColumnGroupKey: this.selectedGroupKey(),
|
|
4487
|
-
displayedColumns: this.displayedColumns(),
|
|
4488
|
-
}));
|
|
4489
|
-
customGroupColumnSelectorComponentState$ = customGroupColumnSelectorComponentState$.pipe(startWith({
|
|
4490
|
-
actionColumnConfig: {
|
|
4491
|
-
frozen: this.frozenActionColumn(),
|
|
4492
|
-
position: this.actionColumnPosition(),
|
|
4493
|
-
},
|
|
4494
|
-
displayedColumns: this.displayedColumns(),
|
|
4495
|
-
activeColumnGroupKey: this.selectedGroupKey(),
|
|
4496
|
-
}));
|
|
4497
|
-
}
|
|
4498
|
-
let filterViewComponentState$ = this.filterViewComponentState$;
|
|
4499
|
-
if (this.disableFilterView()) {
|
|
4500
|
-
filterViewComponentState$ = filterViewComponentState$.pipe(startWith({
|
|
4501
|
-
filters: this.filters(),
|
|
4502
|
-
}));
|
|
4503
|
-
}
|
|
4504
|
-
combineLatest([
|
|
4505
|
-
columnGroupSelectionComponentState$.pipe(timestamp()),
|
|
4506
|
-
customGroupColumnSelectorComponentState$.pipe(timestamp()),
|
|
4507
|
-
this.dataLayoutComponentState$.pipe(timestamp()),
|
|
4508
|
-
dataListGridSortingComponentState$.pipe(timestamp()),
|
|
4509
|
-
this.dataViewComponentState$.pipe(timestamp()),
|
|
4510
|
-
filterViewComponentState$.pipe(timestamp()),
|
|
4511
|
-
])
|
|
4512
|
-
.pipe(map((componentStates) => {
|
|
4513
|
-
return orderAndMergeValuesByTimestamp(componentStates);
|
|
4514
|
-
}))
|
|
4515
|
-
.subscribe((val) => {
|
|
4516
|
-
this.componentStateChanged.emit(val);
|
|
4517
|
-
});
|
|
4518
4763
|
}
|
|
4519
4764
|
filtering(event) {
|
|
4520
|
-
this.filters.set(event);
|
|
4765
|
+
this.stateService.filters.set(event);
|
|
4521
4766
|
}
|
|
4522
4767
|
sorting(event) {
|
|
4523
|
-
this.sortDirection.set(event.sortDirection);
|
|
4524
|
-
this.
|
|
4768
|
+
this.stateService.sortDirection.set(event.sortDirection);
|
|
4769
|
+
this.stateService.sortColumn.set(event.sortColumn);
|
|
4525
4770
|
}
|
|
4526
4771
|
onDeleteElement(element) {
|
|
4527
4772
|
if (this.deleteItem.observed()) {
|
|
@@ -4539,18 +4784,18 @@ class InteractiveDataViewComponent {
|
|
|
4539
4784
|
}
|
|
4540
4785
|
}
|
|
4541
4786
|
onDataViewLayoutChange(layout) {
|
|
4542
|
-
this.layout.set(layout);
|
|
4787
|
+
this.stateService.layout.set(layout);
|
|
4543
4788
|
}
|
|
4544
4789
|
onSortChange($event) {
|
|
4545
|
-
this.
|
|
4790
|
+
this.stateService.sortColumn.set($event);
|
|
4546
4791
|
}
|
|
4547
4792
|
onSortDirectionChange($event) {
|
|
4548
|
-
this.sortDirection.set($event);
|
|
4793
|
+
this.stateService.sortDirection.set($event);
|
|
4549
4794
|
}
|
|
4550
4795
|
onColumnGroupSelectionChange(event) {
|
|
4551
4796
|
const displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
4552
4797
|
this.displayedColumnKeys.set(displayedColumnKeys);
|
|
4553
|
-
this.
|
|
4798
|
+
this.stateService.activeColumnGroupKey.set(event.groupKey);
|
|
4554
4799
|
}
|
|
4555
4800
|
registerEventListenerForDataView() {
|
|
4556
4801
|
if (this.deleteItem.observed()) {
|
|
@@ -4585,11 +4830,11 @@ class InteractiveDataViewComponent {
|
|
|
4585
4830
|
onColumnSelectionChange(event) {
|
|
4586
4831
|
const displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
4587
4832
|
this.displayedColumnKeys.set(displayedColumnKeys);
|
|
4588
|
-
this.
|
|
4833
|
+
this.stateService.activeColumnGroupKey.set(this.customGroupKey());
|
|
4589
4834
|
}
|
|
4590
4835
|
onActionColumnConfigChange(event) {
|
|
4591
|
-
this.
|
|
4592
|
-
this.
|
|
4836
|
+
this.stateService.actionColumnConfigFrozen.set(event.frozenActionColumn);
|
|
4837
|
+
this.stateService.actionColumnConfigPosition.set(event.actionColumnPosition);
|
|
4593
4838
|
}
|
|
4594
4839
|
onRowSelectionChange(event) {
|
|
4595
4840
|
if (this.selectionChanged.observed()) {
|
|
@@ -4597,20 +4842,62 @@ class InteractiveDataViewComponent {
|
|
|
4597
4842
|
}
|
|
4598
4843
|
}
|
|
4599
4844
|
onPageChange(event) {
|
|
4600
|
-
this.
|
|
4845
|
+
this.stateService.activePage.set(event);
|
|
4601
4846
|
}
|
|
4602
4847
|
onPageSizeChange(event) {
|
|
4603
|
-
this.pageSize.set(event);
|
|
4848
|
+
this.stateService.pageSize.set(event);
|
|
4604
4849
|
}
|
|
4605
4850
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4606
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, groupSelectionNoGroupSelectedKey: { classPropertyName: "groupSelectionNoGroupSelectedKey", publicName: "groupSelectionNoGroupSelectedKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, disableFilterView: { classPropertyName: "disableFilterView", publicName: "disableFilterView", isSignal: true, isRequired: false, transformFunction: null }, filterViewDisplayMode: { classPropertyName: "filterViewDisplayMode", publicName: "filterViewDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, filterViewChipStyleClass: { classPropertyName: "filterViewChipStyleClass", publicName: "filterViewChipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, filterViewTableStyle: { classPropertyName: "filterViewTableStyle", publicName: "filterViewTableStyle", isSignal: true, isRequired: false, transformFunction: null }, filterViewPanelStyle: { classPropertyName: "filterViewPanelStyle", publicName: "filterViewPanelStyle", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnKeys: { classPropertyName: "displayedColumnKeys", publicName: "displayedColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, headerStyleClass: { classPropertyName: "headerStyleClass", publicName: "headerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortDirection: "sortDirectionChange", sortField: "sortFieldChange", pageSize: "pageSizeChange", layout: "layoutChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", displayedColumnKeys: "displayedColumnKeysChange", frozenActionColumn: "frozenActionColumnChange", actionColumnPosition: "actionColumnPositionChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged", groupSelectionChangedSlotEmitter: "groupSelectionChangedSlotEmitter" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "childTableCell", first: true, predicate: ["tableCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableCell", first: true, predicate: ["dateTableCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childListItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childStringTableCell", first: true, predicate: ["stringTableCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableCell", first: true, predicate: ["numberTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItem", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "childListItem", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "childTopCenter", first: true, predicate: ["topCenter"], descendants: true, isSignal: true }, { propertyName: "childListValue", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "childNumberListValue", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "childStringListValue", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "childDateListValue", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "childTableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childStringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataViewComponent", first: true, predicate: DataViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts()\"\n [layout]=\"layout()\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n ></ocx-data-layout-selection>\n @if (!disableFilterView()) {\n <ocx-filter-view\n [filters]=\"filters()\"\n [columns]=\"columns()\"\n [templates]=\"templates()\"\n [displayMode]=\"filterViewDisplayMode()\"\n [selectDisplayedChips]=\"selectDisplayedChips()\"\n [chipStyleClass]=\"filterViewChipStyleClass()\"\n [tableStyle]=\"filterViewTableStyle()\"\n (filtered)=\"filtering($event)\"\n (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n ></ocx-filter-view>\n }\n </div>\n\n @if (_topCenter(); as topCenterTemplate) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n </div>\n } @if (layout() !== 'table') {\n <div class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"sortDirection()\"\n [sortField]=\"sortField()\"\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n }\n\n <div\n [ngStyle]=\"layout() !== 'table' ? {\n 'position': 'absolute'\n } : {}\"\n class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n >\n @if (isColumnGroupSelectionComponentDefined() ?? true) {\n <ocx-slot\n [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'} : {}\"\n *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n name=\"{{columnGroupSlotName}}\"\n [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @else {\n <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n } @if (layout() === 'table') {\n <ocx-custom-group-column-selector\n [columns]=\"columns()\"\n [displayedColumns]=\"displayedColumns()\"\n [customGroupKey]=\"customGroupKey()\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n ></ocx-custom-group-column-selector>\n }\n </div>\n </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n <ocx-data-view\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n [sortField]=\"sortField()\"\n [filters]=\"filters()\"\n [data]=\"data()\"\n [sortDirection]=\"sortDirection()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"pageSize()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [layout]=\"layout()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"additionalActions()\"\n [listGridPaginator]=\"listGridPaginator()\"\n [tablePaginator]=\"tablePaginator()\"\n [page]=\"page()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [selectedRows]=\"selectedRows()\"\n [frozenActionColumn]=\"frozenActionColumn()\"\n [actionColumnPosition]=\"actionColumnPosition()\"\n [stringTableCellTemplate]=\"_stringTableCell()\"\n [numberTableCellTemplate]=\"_numberTableCell()\"\n [dateTableCellTemplate]=\"_dateTableCell()\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n [tableCellTemplate]=\"_tableCell()\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n [listItemTemplate]=\"_listItem()\"\n [listValueTemplate]=\"_listValue()\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n [numberListValueTemplate]=\"_numberListValue()\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n [stringListValueTemplate]=\"_stringListValue()\"\n [dateListValueTemplate]=\"_dateListValue()\"\n [gridItemTemplate]=\"_gridItem()\"\n [tableFilterCellTemplate]=\"_tableFilterCell()\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n [parentTemplates]=\"templates()\"\n [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [(expandedRows)]=\"expandedRows\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n @if (layout() === 'table') {\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n [columns]=\"columns()\"\n [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n [customGroupKey]=\"customGroupKey()\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["selectedGroupKeyChange", "groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["displayedColumnsChange", "columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["layoutChange", "dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortDirectionChange", "sortFieldChange", "sortChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtersChange", "sortFieldChange", "sortDirectionChange", "listGridPaginatorChange", "tablePaginatorChange", "pageChange", "expandedRowsChange", "pageSizeChange", "filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtersChange", "columnsChange", "filtered", "componentStateChanged"] }] }); }
|
|
4851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, groupSelectionNoGroupSelectedKey: { classPropertyName: "groupSelectionNoGroupSelectedKey", publicName: "groupSelectionNoGroupSelectedKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: false, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: false, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, disableFilterView: { classPropertyName: "disableFilterView", publicName: "disableFilterView", isSignal: true, isRequired: false, transformFunction: null }, filterViewDisplayMode: { classPropertyName: "filterViewDisplayMode", publicName: "filterViewDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, filterViewChipStyleClass: { classPropertyName: "filterViewChipStyleClass", publicName: "filterViewChipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, filterViewTableStyle: { classPropertyName: "filterViewTableStyle", publicName: "filterViewTableStyle", isSignal: true, isRequired: false, transformFunction: null }, filterViewPanelStyle: { classPropertyName: "filterViewPanelStyle", publicName: "filterViewPanelStyle", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: false, isRequired: false, transformFunction: null }, displayedColumnKeys: { classPropertyName: "displayedColumnKeys", publicName: "displayedColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: false, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: false, isRequired: false, transformFunction: null }, headerStyleClass: { classPropertyName: "headerStyleClass", publicName: "headerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: false, isRequired: false, transformFunction: null }, selectedGroupKey: { classPropertyName: "selectedGroupKey", publicName: "selectedGroupKey", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { displayedColumnKeys: "displayedColumnKeysChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged", groupSelectionChangedSlotEmitter: "groupSelectionChangedSlotEmitter" }, providers: [
|
|
4852
|
+
{
|
|
4853
|
+
provide: DataViewStateService,
|
|
4854
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
4855
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
4856
|
+
},
|
|
4857
|
+
{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }
|
|
4858
|
+
], queries: [{ propertyName: "childTableCell", first: true, predicate: ["tableCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableCell", first: true, predicate: ["dateTableCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childListItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childStringTableCell", first: true, predicate: ["stringTableCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableCell", first: true, predicate: ["numberTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItem", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "childListItem", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "childTopCenter", first: true, predicate: ["topCenter"], descendants: true, isSignal: true }, { propertyName: "childListValue", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "childNumberListValue", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "childStringListValue", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "childDateListValue", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "childTableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childStringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataViewComponent", first: true, predicate: DataViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts()\"\n [layout]=\"stateService.layout()\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n ></ocx-data-layout-selection>\n @if (!disableFilterView()) {\n <ocx-filter-view\n [filters]=\"stateService.filters()\"\n [columns]=\"stateService.columns()\"\n [templates]=\"templates()\"\n [displayMode]=\"filterViewDisplayMode()\"\n [selectDisplayedChips]=\"selectDisplayedChips()\"\n [chipStyleClass]=\"filterViewChipStyleClass()\"\n [tableStyle]=\"filterViewTableStyle()\"\n [panelStyle]=\"filterViewPanelStyle()\"\n ></ocx-filter-view>\n }\n </div>\n\n @if (_topCenter(); as topCenterTemplate) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n </div>\n } @if (stateService.layout() !== 'table') {\n <div class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"stateService.sortDirection()\"\n [sortField]=\"stateService.sortColumn()\"\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n }\n\n <div\n [ngStyle]=\"stateService.layout() !== 'table' ? {\n 'position': 'absolute'\n } : {}\"\n class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n >\n @if (isColumnGroupSelectionComponentDefined() ?? true) {\n <ocx-slot\n [ngStyle]=\"stateService.layout() !== 'table' ? {'display' : 'none'} : {}\"\n *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n name=\"{{columnGroupSlotName}}\"\n [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: stateService.columns(), selectedGroupKey: selectedGroupKey, layout: stateService.layout(), displayedColumnsIds: displayedColumnKeys() }\"\n [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @else {\n <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n } @if (stateService.layout() === 'table') {\n <ocx-custom-group-column-selector\n [columns]=\"stateService.columns()\"\n [displayedColumns]=\"displayedColumns()\"\n [customGroupKey]=\"customGroupKey()\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"stateService.actionColumnConfigFrozen()\"\n [actionColumnPosition]=\"stateService.actionColumnConfigPosition()\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n ></ocx-custom-group-column-selector>\n }\n </div>\n </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n <ocx-data-view\n [columns]=\"displayedColumns()\"\n [layout]=\"stateService.layout()\"\n [sortStates]=\"sortStates()\"\n [sortField]=\"stateService.sortColumn()\"\n [filters]=\"stateService.filters()\"\n [data]=\"stateService.data()\"\n [sortDirection]=\"stateService.sortDirection()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"stateService.pageSize()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"stateService.additionalActions()\"\n [listGridPaginator]=\"stateService.listGridPaginator()\"\n [tablePaginator]=\"stateService.tablePaginator()\"\n [page]=\"stateService.activePage()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [frozenActionColumn]=\"stateService.actionColumnConfigFrozen()\"\n [actionColumnPosition]=\"stateService.actionColumnConfigPosition()\"\n [stringTableCellTemplate]=\"_stringTableCell()\"\n [numberTableCellTemplate]=\"_numberTableCell()\"\n [dateTableCellTemplate]=\"_dateTableCell()\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n [tableCellTemplate]=\"_tableCell()\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n [listItemTemplate]=\"_listItem()\"\n [listValueTemplate]=\"_listValue()\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n [numberListValueTemplate]=\"_numberListValue()\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n [stringListValueTemplate]=\"_stringListValue()\"\n [dateListValueTemplate]=\"_dateListValue()\"\n [gridItemTemplate]=\"_gridItem()\"\n [tableFilterCellTemplate]=\"_tableFilterCell()\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n [parentTemplates]=\"templates()\"\n [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [expandedRows]=\"stateService.expandedRows()\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n @if (stateService.layout() === 'table') {\n <ocx-column-group-selection\n [selectedGroupKey]=\"stateService.activeColumnGroupKey() ?? defaultGroupKey()\"\n [columns]=\"stateService.columns()\"\n [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n [customGroupKey]=\"customGroupKey()\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n ></ocx-column-group-selection>\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["displayedColumnsChange", "columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "page", "pageSize", "selectedRow", "expandedRows", "frozenActionColumn", "actionColumnPosition", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "paginator", "listGridPaginator", "tablePaginator", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "expandable", "frozenExpandColumn", "sortStates", "pageSizes", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }] }); }
|
|
4607
4859
|
}
|
|
4608
4860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
4609
4861
|
type: Component,
|
|
4610
|
-
args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [
|
|
4611
|
-
|
|
4862
|
+
args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [
|
|
4863
|
+
{
|
|
4864
|
+
provide: DataViewStateService,
|
|
4865
|
+
useFactory: (parentService) => parentService ?? new DataViewStateService(),
|
|
4866
|
+
deps: [[new Optional(), new SkipSelf(), DataViewStateService]],
|
|
4867
|
+
},
|
|
4868
|
+
{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }
|
|
4869
|
+
], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n <ocx-data-layout-selection\n [supportedViewLayouts]=\"supportedViewLayouts()\"\n [layout]=\"stateService.layout()\"\n (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n ></ocx-data-layout-selection>\n @if (!disableFilterView()) {\n <ocx-filter-view\n [filters]=\"stateService.filters()\"\n [columns]=\"stateService.columns()\"\n [templates]=\"templates()\"\n [displayMode]=\"filterViewDisplayMode()\"\n [selectDisplayedChips]=\"selectDisplayedChips()\"\n [chipStyleClass]=\"filterViewChipStyleClass()\"\n [tableStyle]=\"filterViewTableStyle()\"\n [panelStyle]=\"filterViewPanelStyle()\"\n ></ocx-filter-view>\n }\n </div>\n\n @if (_topCenter(); as topCenterTemplate) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n </div>\n } @if (stateService.layout() !== 'table') {\n <div class=\"flex align-items-center gap-2\">\n <ocx-data-list-grid-sorting\n [sortDirection]=\"stateService.sortDirection()\"\n [sortField]=\"stateService.sortColumn()\"\n [columns]=\"displayedColumns()\"\n [sortStates]=\"sortStates()\"\n (sortChange)=\"onSortChange($event)\"\n (sortDirectionChange)=\"onSortDirectionChange($event)\"\n ></ocx-data-list-grid-sorting>\n </div>\n }\n\n <div\n [ngStyle]=\"stateService.layout() !== 'table' ? {\n 'position': 'absolute'\n } : {}\"\n class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n >\n @if (isColumnGroupSelectionComponentDefined() ?? true) {\n <ocx-slot\n [ngStyle]=\"stateService.layout() !== 'table' ? {'display' : 'none'} : {}\"\n *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n name=\"{{columnGroupSlotName}}\"\n [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: stateService.columns(), selectedGroupKey: selectedGroupKey, layout: stateService.layout(), displayedColumnsIds: displayedColumnKeys() }\"\n [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n >\n <ng-template #skeleton>\n <div class=\"flex\">\n <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n </div>\n </ng-template>\n </ocx-slot>\n } @else {\n <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n } @if (stateService.layout() === 'table') {\n <ocx-custom-group-column-selector\n [columns]=\"stateService.columns()\"\n [displayedColumns]=\"displayedColumns()\"\n [customGroupKey]=\"customGroupKey()\"\n (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n [frozenActionColumn]=\"stateService.actionColumnConfigFrozen()\"\n [actionColumnPosition]=\"stateService.actionColumnConfigPosition()\"\n (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n ></ocx-custom-group-column-selector>\n }\n </div>\n </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n <ocx-data-view\n [columns]=\"displayedColumns()\"\n [layout]=\"stateService.layout()\"\n [sortStates]=\"sortStates()\"\n [sortField]=\"stateService.sortColumn()\"\n [filters]=\"stateService.filters()\"\n [data]=\"stateService.data()\"\n [sortDirection]=\"stateService.sortDirection()\"\n [titleLineId]=\"titleLineId()\"\n [subtitleLineIds]=\"subtitleLineIds()\"\n [clientSideSorting]=\"clientSideSorting()\"\n [clientSideFiltering]=\"clientSideFiltering()\"\n [pageSizes]=\"pageSizes()\"\n [pageSize]=\"stateService.pageSize()\"\n [emptyResultsMessage]=\"emptyResultsMessage()\"\n [name]=\"name()\"\n [deletePermission]=\"deletePermission()\"\n [editPermission]=\"editPermission()\"\n [viewPermission]=\"viewPermission()\"\n [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n [editActionEnabledField]=\"editActionEnabledField()\"\n [editActionVisibleField]=\"editActionVisibleField()\"\n [viewActionEnabledField]=\"viewActionEnabledField()\"\n [viewActionVisibleField]=\"viewActionVisibleField()\"\n [additionalActions]=\"stateService.additionalActions()\"\n [listGridPaginator]=\"stateService.listGridPaginator()\"\n [tablePaginator]=\"stateService.tablePaginator()\"\n [page]=\"stateService.activePage()\"\n (pageChanged)=\"onPageChange($event)\"\n (pageSizeChanged)=\"onPageSizeChange($event)\"\n [frozenActionColumn]=\"stateService.actionColumnConfigFrozen()\"\n [actionColumnPosition]=\"stateService.actionColumnConfigPosition()\"\n [stringTableCellTemplate]=\"_stringTableCell()\"\n [numberTableCellTemplate]=\"_numberTableCell()\"\n [dateTableCellTemplate]=\"_dateTableCell()\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n [tableCellTemplate]=\"_tableCell()\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n [listItemTemplate]=\"_listItem()\"\n [listValueTemplate]=\"_listValue()\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n [numberListValueTemplate]=\"_numberListValue()\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n [stringListValueTemplate]=\"_stringListValue()\"\n [dateListValueTemplate]=\"_dateListValue()\"\n [gridItemTemplate]=\"_gridItem()\"\n [tableFilterCellTemplate]=\"_tableFilterCell()\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n [currentPageShowingKey]=\"currentPageShowingKey()\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n [parentTemplates]=\"templates()\"\n [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n [expandable]=\"expandable()\"\n [frozenExpandColumn]=\"frozenExpandColumn()\"\n [expandedRows]=\"stateService.expandedRows()\"\n (rowExpanded)=\"rowExpanded.emit($event)\"\n (rowCollapsed)=\"rowCollapsed.emit($event)\"\n >\n </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n @if (stateService.layout() === 'table') {\n <ocx-column-group-selection\n [selectedGroupKey]=\"stateService.activeColumnGroupKey() ?? defaultGroupKey()\"\n [columns]=\"stateService.columns()\"\n [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n [customGroupKey]=\"customGroupKey()\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n ></ocx-column-group-selection>\n }\n</ng-template>\n" }]
|
|
4870
|
+
}], ctorParameters: () => [], propDecorators: { dataViewComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataViewComponent), { isSignal: true }] }], searchConfigPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfigPermission", required: false }] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], tableSelectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSelectionEnabledField", required: false }] }], tableAllowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAllowSelectAll", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], titleLineId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLineId", required: false }] }], subtitleLineIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleLineIds", required: false }] }], supportedViewLayouts: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedViewLayouts", required: false }] }], columns: [{
|
|
4871
|
+
type: Input
|
|
4872
|
+
}], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], fallbackImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackImage", required: false }] }], filters: [{
|
|
4873
|
+
type: Input
|
|
4874
|
+
}], sortField: [{
|
|
4875
|
+
type: Input
|
|
4876
|
+
}], sortDirection: [{
|
|
4877
|
+
type: Input
|
|
4878
|
+
}], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], page: [{
|
|
4879
|
+
type: Input
|
|
4880
|
+
}], pageSize: [{
|
|
4881
|
+
type: Input
|
|
4882
|
+
}], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], layout: [{
|
|
4883
|
+
type: Input
|
|
4884
|
+
}], defaultGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGroupKey", required: false }] }], customGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupKey", required: false }] }], groupSelectionNoGroupSelectedKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelectionNoGroupSelectedKey", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], additionalActions: [{
|
|
4885
|
+
type: Input
|
|
4886
|
+
}], listGridPaginator: [{
|
|
4887
|
+
type: Input
|
|
4888
|
+
}], tablePaginator: [{
|
|
4612
4889
|
type: Input
|
|
4613
|
-
}],
|
|
4890
|
+
}], paginator: [{
|
|
4891
|
+
type: Input
|
|
4892
|
+
}], disableFilterView: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFilterView", required: false }] }], filterViewDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewDisplayMode", required: false }] }], filterViewChipStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewChipStyleClass", required: false }] }], filterViewTableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewTableStyle", required: false }] }], filterViewPanelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewPanelStyle", required: false }] }], selectDisplayedChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDisplayedChips", required: false }] }], selectedRows: [{
|
|
4893
|
+
type: Input
|
|
4894
|
+
}], displayedColumnKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumnKeys", required: false }] }, { type: i0.Output, args: ["displayedColumnKeysChange"] }], frozenActionColumn: [{
|
|
4895
|
+
type: Input
|
|
4896
|
+
}], actionColumnPosition: [{
|
|
4897
|
+
type: Input
|
|
4898
|
+
}], headerStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyleClass", required: false }] }], contentStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyleClass", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], expandedRows: [{
|
|
4899
|
+
type: Input
|
|
4900
|
+
}], childTableCell: [{ type: i0.ContentChild, args: ['tableCell', { isSignal: true }] }], childDateTableCell: [{ type: i0.ContentChild, args: ['dateTableCell', { isSignal: true }] }], childRelativeDateTableCell: [{ type: i0.ContentChild, args: ['relativeDateTableCell', { isSignal: true }] }], childTranslationKeyTableCell: [{ type: i0.ContentChild, args: ['translationKeyTableCell', { isSignal: true }] }], childGridItemSubtitleLines: [{ type: i0.ContentChild, args: ['gridItemSubtitleLines', { isSignal: true }] }], childListItemSubtitleLines: [{ type: i0.ContentChild, args: ['listItemSubtitleLines', { isSignal: true }] }], childStringTableCell: [{ type: i0.ContentChild, args: ['stringTableCell', { isSignal: true }] }], childNumberTableCell: [{ type: i0.ContentChild, args: ['numberTableCell', { isSignal: true }] }], childGridItem: [{ type: i0.ContentChild, args: ['gridItem', { isSignal: true }] }], childListItem: [{ type: i0.ContentChild, args: ['listItem', { isSignal: true }] }], childTopCenter: [{ type: i0.ContentChild, args: ['topCenter', { isSignal: true }] }], childListValue: [{ type: i0.ContentChild, args: ['listValue', { isSignal: true }] }], childTranslationKeyListValue: [{ type: i0.ContentChild, args: ['translationKeyListValue', { isSignal: true }] }], childNumberListValue: [{ type: i0.ContentChild, args: ['numberListValue', { isSignal: true }] }], childRelativeDateListValue: [{ type: i0.ContentChild, args: ['relativeDateListValue', { isSignal: true }] }], childStringListValue: [{ type: i0.ContentChild, args: ['stringListValue', { isSignal: true }] }], childDateListValue: [{ type: i0.ContentChild, args: ['dateListValue', { isSignal: true }] }], childTableFilterCell: [{ type: i0.ContentChild, args: ['tableFilterCell', { isSignal: true }] }], childDateTableFilterCell: [{ type: i0.ContentChild, args: ['dateTableFilterCell', { isSignal: true }] }], childRelativeDateTableFilterCell: [{ type: i0.ContentChild, args: ['relativeDateTableFilterCell', { isSignal: true }] }], childTranslationKeyTableFilterCell: [{ type: i0.ContentChild, args: ['translationKeyTableFilterCell', { isSignal: true }] }], childStringTableFilterCell: [{ type: i0.ContentChild, args: ['stringTableFilterCell', { isSignal: true }] }], childNumberTableFilterCell: [{ type: i0.ContentChild, args: ['numberTableFilterCell', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], deleteItem: [{
|
|
4614
4901
|
type: Output
|
|
4615
4902
|
}], viewItem: [{
|
|
4616
4903
|
type: Output
|
|
@@ -4622,7 +4909,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
4622
4909
|
type: Output
|
|
4623
4910
|
}], rowCollapsed: [{
|
|
4624
4911
|
type: Output
|
|
4625
|
-
}], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }],
|
|
4912
|
+
}], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }], selectedGroupKey: [{
|
|
4913
|
+
type: Input
|
|
4914
|
+
}], data: [{
|
|
4915
|
+
type: Input
|
|
4916
|
+
}], groupSelectionChangedSlotEmitter: [{ type: i0.Output, args: ["groupSelectionChangedSlotEmitter"] }] } });
|
|
4626
4917
|
|
|
4627
4918
|
class LifecycleComponent {
|
|
4628
4919
|
constructor() {
|
|
@@ -5636,7 +5927,6 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5636
5927
|
TooltipModule,
|
|
5637
5928
|
TimelineModule,
|
|
5638
5929
|
RippleModule,
|
|
5639
|
-
SelectButtonModule,
|
|
5640
5930
|
SharedModule], exports: [BreadcrumbModule,
|
|
5641
5931
|
ChipModule,
|
|
5642
5932
|
CheckboxModule,
|
|
@@ -5658,7 +5948,6 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5658
5948
|
TooltipModule,
|
|
5659
5949
|
TimelineModule,
|
|
5660
5950
|
RippleModule,
|
|
5661
|
-
SelectButtonModule,
|
|
5662
5951
|
SharedModule] }); }
|
|
5663
5952
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AngularAcceleratorPrimeNgModule, providers: [providePrimeNG()], imports: [BreadcrumbModule,
|
|
5664
5953
|
ChipModule,
|
|
@@ -5681,7 +5970,6 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5681
5970
|
TooltipModule,
|
|
5682
5971
|
TimelineModule,
|
|
5683
5972
|
RippleModule,
|
|
5684
|
-
SelectButtonModule,
|
|
5685
5973
|
SharedModule, BreadcrumbModule,
|
|
5686
5974
|
ChipModule,
|
|
5687
5975
|
CheckboxModule,
|
|
@@ -5703,7 +5991,6 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5703
5991
|
TooltipModule,
|
|
5704
5992
|
TimelineModule,
|
|
5705
5993
|
RippleModule,
|
|
5706
|
-
SelectButtonModule,
|
|
5707
5994
|
SharedModule] }); }
|
|
5708
5995
|
}
|
|
5709
5996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
|
|
@@ -5731,7 +6018,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
5731
6018
|
TooltipModule,
|
|
5732
6019
|
TimelineModule,
|
|
5733
6020
|
RippleModule,
|
|
5734
|
-
SelectButtonModule,
|
|
5735
6021
|
SharedModule,
|
|
5736
6022
|
],
|
|
5737
6023
|
exports: [
|
|
@@ -5756,45 +6042,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
5756
6042
|
TooltipModule,
|
|
5757
6043
|
TimelineModule,
|
|
5758
6044
|
RippleModule,
|
|
5759
|
-
SelectButtonModule,
|
|
5760
6045
|
SharedModule,
|
|
5761
6046
|
],
|
|
5762
6047
|
providers: [providePrimeNG()],
|
|
5763
6048
|
}]
|
|
5764
6049
|
}] });
|
|
5765
6050
|
|
|
5766
|
-
/**
|
|
5767
|
-
* @deprecated Use DynamicLocaleId from @onecx/angular-utils instead
|
|
5768
|
-
*/
|
|
5769
|
-
class DynamicLocaleId {
|
|
5770
|
-
constructor(userService) {
|
|
5771
|
-
this.userService = userService;
|
|
5772
|
-
Object.getOwnPropertyNames(String.prototype).forEach((k) => {
|
|
5773
|
-
if (k != 'valueOf' && k != 'length') {
|
|
5774
|
-
;
|
|
5775
|
-
this[k] = function (...args) {
|
|
5776
|
-
const str = this.valueOf();
|
|
5777
|
-
return str[k](...args);
|
|
5778
|
-
};
|
|
5779
|
-
}
|
|
5780
|
-
});
|
|
5781
|
-
}
|
|
5782
|
-
valueOf() {
|
|
5783
|
-
return this.userService.lang$.getValue();
|
|
5784
|
-
}
|
|
5785
|
-
get length() {
|
|
5786
|
-
return this.valueOf().length;
|
|
5787
|
-
}
|
|
5788
|
-
}
|
|
5789
|
-
|
|
5790
6051
|
const LIB_NAME = '@onecx/angular-accelerator';
|
|
5791
|
-
const LIB_VERSION = '9.0.0-rc.
|
|
6052
|
+
const LIB_VERSION = '9.0.0-rc.6';
|
|
5792
6053
|
|
|
5793
6054
|
class AngularAcceleratorMissingTranslationHandler extends MultiLanguageMissingTranslationHandler {
|
|
5794
6055
|
}
|
|
5795
6056
|
function appInitializer(userService) {
|
|
5796
6057
|
return async () => {
|
|
5797
|
-
await firstValueFrom(userService.lang$.pipe(skip(1)));
|
|
6058
|
+
const lang = await firstValueFrom(userService.lang$.pipe(skip(1)));
|
|
6059
|
+
try {
|
|
6060
|
+
await localeLoaders[lang]?.().then(data => registerLocaleData(data.default ?? data));
|
|
6061
|
+
}
|
|
6062
|
+
catch (error) {
|
|
6063
|
+
console.warn(`Could not load locale data for '${lang}'. Angular pipes may not format correctly.`, error);
|
|
6064
|
+
}
|
|
5798
6065
|
};
|
|
5799
6066
|
}
|
|
5800
6067
|
class AngularAcceleratorModule {
|
|
@@ -6182,5 +6449,5 @@ class ImageLogoUrlUtils {
|
|
|
6182
6449
|
* Generated bundle index. Do not edit.
|
|
6183
6450
|
*/
|
|
6184
6451
|
|
|
6185
|
-
export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, BasicDirective, BreadcrumbService, ColorUtils, ColumnGroupSelectionComponent, ColumnType, ConsentComponent, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataOperationStrategy, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DialogContentComponent, DialogFooterComponent, DialogInlineComponent, DialogMessageContentComponent, DynamicPipe, ExportDataService, FilterType, FilterViewComponent, GlobalErrorComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, ImageLogoUrlUtils, InteractiveDataViewComponent, LifecycleComponent, LoadingIndicatorComponent, LoadingIndicatorDirective, ObjectUtils, ObservableOutputEmitterRef, OcxContentComponent, OcxContentContainerComponent, OcxContentContainerDirective, OcxContentDirective, OcxTimeAgoPipe, OcxTooltipDirective, PageHeaderComponent, PortalDialogService, RelativeDatePipe, SearchHeaderComponent, SrcDirective, TemplateDirective, TemplateType, TooltipOnOverflowDirective, atLeastOneFieldFilledValidator, buildSearchCriteria, defaultDialogData, defaultPrimaryButtonDetails, defaultSecondaryButtonDetails, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, handleAction, handleActionSync, limit, observableOutput, providePortalDialogService, removeKeyword, resolveRouterLink, searchPrefixWithSpecialChars };
|
|
6452
|
+
export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, BasicDirective, BreadcrumbService, ColorUtils, ColumnGroupSelectionComponent, ColumnType, ConsentComponent, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataOperationStrategy, DataTableComponent, DataViewComponent, DataViewStateService, DateUtils, DiagramComponent, DialogContentComponent, DialogFooterComponent, DialogInlineComponent, DialogMessageContentComponent, DynamicPipe, ExportDataService, FilterType, FilterViewComponent, GlobalErrorComponent, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, ImageLogoUrlUtils, InteractiveDataViewComponent, LifecycleComponent, LoadingIndicatorComponent, LoadingIndicatorDirective, ObjectUtils, ObservableOutputEmitterRef, OcxContentComponent, OcxContentContainerComponent, OcxContentContainerDirective, OcxContentDirective, OcxTimeAgoPipe, OcxTooltipDirective, PageHeaderComponent, PortalDialogService, RelativeDatePipe, SearchHeaderComponent, SrcDirective, TemplateDirective, TemplateType, TooltipOnOverflowDirective, atLeastOneFieldFilledValidator, buildSearchCriteria, defaultDialogData, defaultPrimaryButtonDetails, defaultSecondaryButtonDetails, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, handleAction, handleActionSync, limit, observableOutput, providePortalDialogService, removeKeyword, resolveRouterLink, searchPrefixWithSpecialChars };
|
|
6186
6453
|
//# sourceMappingURL=onecx-angular-accelerator.mjs.map
|