@onecx/angular-accelerator 6.0.0-rc.9 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/i18n/primeng/de.json +1 -1
- package/assets/i18n/primeng/en.json +1 -1
- package/fesm2022/onecx-angular-accelerator-testing.mjs +71 -6
- package/fesm2022/onecx-angular-accelerator-testing.mjs.map +1 -1
- package/fesm2022/onecx-angular-accelerator.mjs +1184 -802
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/index.d.ts +13 -10
- package/lib/angular-accelerator-primeng.module.d.ts +1 -1
- package/lib/angular-accelerator.module.d.ts +27 -20
- package/lib/components/data-list-grid/data-list-grid.component.d.ts +2 -19
- package/lib/components/data-table/data-table.component.d.ts +9 -38
- package/lib/components/data-view/data-view.component.d.ts +2 -72
- package/lib/components/dialog/dialog-content/dialog-content.component.d.ts +29 -0
- package/lib/components/dialog/dialog-footer/dialog-footer.component.d.ts +39 -0
- package/lib/components/dialog/dialog-inline/dialog-inline.component.d.ts +11 -0
- package/lib/components/dialog/dialog-message-content/dialog-message-content.component.d.ts +8 -0
- package/lib/components/error-component/global-error.component.d.ts +12 -0
- package/lib/components/filter-view/filter-view.component.d.ts +1 -3
- package/lib/components/group-by-count-diagram/group-by-count-diagram.component.d.ts +1 -6
- package/lib/components/interactive-data-view/interactive-data-view.component.d.ts +27 -49
- package/lib/components/loading-indicator/loading-indicator.component.d.ts +5 -0
- package/lib/components/page-header/page-header.component.d.ts +0 -4
- package/lib/components/search-header/search-header.component.d.ts +1 -6
- package/lib/directives/basic.directive.d.ts +11 -0
- package/lib/directives/if-permission.directive.d.ts +1 -1
- package/lib/directives/loading-indicator.directive.d.ts +16 -0
- package/lib/model/breadcrumb-menu-item.model.d.ts +0 -4
- package/lib/model/button-dialog.d.ts +47 -0
- package/lib/model/column-type.model.d.ts +1 -8
- package/lib/pipes/relative-date.pipe.d.ts +10 -0
- package/lib/services/export-data.service.d.ts +18 -0
- package/lib/services/portal-dialog.service.d.ts +427 -0
- package/lib/utils/dateutils.d.ts +0 -4
- package/lib/utils/image-logo-url.utils.d.ts +3 -0
- package/migrations.json +9 -1
- package/package.json +9 -8
- package/testing/column-group-selection.harness.d.ts +1 -1
- package/testing/custom-group-column-selector.harness.d.ts +6 -6
- package/testing/data-layout-selection.harness.d.ts +3 -3
- package/testing/data-list-grid.harness.d.ts +3 -3
- package/testing/data-table.harness.d.ts +3 -3
- package/testing/data-view.harness.d.ts +2 -2
- package/testing/default-grid-item.harness.d.ts +1 -1
- package/testing/default-list-item.harness.d.ts +4 -4
- package/testing/diagram.harness.d.ts +1 -1
- package/testing/dialog-content.harness.d.ts +6 -0
- package/testing/dialog-footer.harness.d.ts +14 -0
- package/testing/dialog-inline.harness.d.ts +8 -0
- package/testing/dialog-message-content.harness.d.ts +8 -0
- package/testing/filter-view.harness.d.ts +6 -6
- package/testing/group-by-count-diagram.harness.d.ts +1 -1
- package/testing/index.d.ts +4 -0
- package/testing/interactive-data-view.harness.d.ts +8 -8
- package/testing/lifecycle.harness.d.ts +2 -2
- package/testing/page-header.harness.d.ts +6 -6
- package/testing/search-header.harness.d.ts +5 -5
- package/lib/components/data-loading-error/data-loading-error.component.d.ts +0 -8
- package/lib/injection-tokens/has-permission-checker.d.ts +0 -13
- package/lib/services/translation-cache.service.d.ts +0 -19
- package/lib/services/translation-connection.service.d.ts +0 -10
- package/lib/utils/async-translate-loader.utils.d.ts +0 -12
- package/lib/utils/caching-translate-loader.utils.d.ts +0 -16
- package/lib/utils/create-remote-component-and-mfe-translate-loader.utils.d.ts +0 -6
- package/lib/utils/create-remote-component-translate-loader.utils.d.ts +0 -5
- package/lib/utils/create-translate-loader.utils.d.ts +0 -8
- package/lib/utils/provide-connection-service.d.ts +0 -6
- package/lib/utils/translate.combined.loader.d.ts +0 -12
|
@@ -1,30 +1,29 @@
|
|
|
1
|
-
import { HAS_PERMISSION_CHECKER, providePermissionChecker, TRANSLATION_PATH } from '@onecx/angular-utils';
|
|
2
|
-
export { AlwaysGrantPermissionChecker, HAS_PERMISSION_CHECKER } from '@onecx/angular-utils';
|
|
3
1
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, ElementRef,
|
|
5
|
-
import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, AppConfigService } from '@onecx/angular-integration-interface';
|
|
2
|
+
import { inject, ElementRef, Input, Directive, Renderer2, ViewContainerRef, TemplateRef, HostListener, EventEmitter, Output, Injectable, Injector, LOCALE_ID, Pipe, ContentChild, ViewEncapsulation, Component, ViewChild, ContentChildren, NgZone, ChangeDetectorRef, ViewChildren, QueryList, Type, NgModule, APP_INITIALIZER } from '@angular/core';
|
|
3
|
+
import { UserService, AppStateService, ConfigurationService, CONFIG_KEY, ShellCapabilityService, Capability, AppConfigService } from '@onecx/angular-integration-interface';
|
|
4
|
+
import { HAS_PERMISSION_CHECKER, SKIP_STYLE_SCOPING, getScopeIdentifier, dataStyleIdKey, dataNoPortalLayoutStylesKey, providePermissionChecker, TRANSLATION_PATH, provideTranslationConnectionService } from '@onecx/angular-utils';
|
|
6
5
|
import { HttpClient } from '@angular/common/http';
|
|
7
|
-
import * as i3
|
|
6
|
+
import * as i3 from '@angular/forms';
|
|
8
7
|
import { FormGroupDirective, FormControlName, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
9
|
-
import { BehaviorSubject, map, filter, concat, of, from, combineLatest, startWith, debounceTime, mergeMap, first, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged,
|
|
10
|
-
import { SyncableTopic, getLocation, isValidDate
|
|
8
|
+
import { BehaviorSubject, map, filter, concat, of, from, combineLatest, startWith, debounceTime, mergeMap, first, forkJoin, shareReplay, switchMap, toArray, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, isObservable, firstValueFrom, skip } from 'rxjs';
|
|
9
|
+
import { SyncableTopic, getLocation, isValidDate, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
|
|
11
10
|
import * as i1 from '@angular/common';
|
|
12
|
-
import {
|
|
13
|
-
import * as
|
|
11
|
+
import { DatePipe, DecimalPipe, CurrencyPipe, formatDate, CommonModule } from '@angular/common';
|
|
12
|
+
import * as i2$1 from 'primeng/button';
|
|
14
13
|
import { ButtonModule } from 'primeng/button';
|
|
15
14
|
import * as i5 from 'primeng/skeleton';
|
|
16
15
|
import { SkeletonModule } from 'primeng/skeleton';
|
|
17
16
|
import * as i4$1 from 'primeng/tooltip';
|
|
18
|
-
import { Tooltip } from 'primeng/tooltip';
|
|
17
|
+
import { Tooltip, TooltipStyle, TooltipModule } from 'primeng/tooltip';
|
|
19
18
|
import * as i5$1 from '@onecx/angular-remote-components';
|
|
20
|
-
import { SlotService, AngularRemoteComponentsModule } from '@onecx/angular-remote-components';
|
|
19
|
+
import { SlotService, REMOTE_COMPONENT_CONFIG, AngularRemoteComponentsModule } from '@onecx/angular-remote-components';
|
|
21
20
|
import * as i8 from '@ngx-translate/core';
|
|
22
21
|
import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
23
|
-
import * as i2$
|
|
24
|
-
import { PrimeIcons, PrimeTemplate, SharedModule } from 'primeng/api';
|
|
22
|
+
import * as i2$3 from 'primeng/api';
|
|
23
|
+
import { PrimeIcons, PrimeTemplate, SharedModule, MessageService } from 'primeng/api';
|
|
25
24
|
import { __decorate, __metadata } from 'tslib';
|
|
26
25
|
import * as i8$1 from '@angular/router';
|
|
27
|
-
import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
|
|
26
|
+
import { Router, ActivatedRoute, NavigationEnd, NavigationStart, RouterModule } from '@angular/router';
|
|
28
27
|
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
|
29
28
|
import * as i2 from 'primeng/breadcrumb';
|
|
30
29
|
import { BreadcrumbModule } from 'primeng/breadcrumb';
|
|
@@ -32,9 +31,9 @@ import * as i4 from 'primeng/menu';
|
|
|
32
31
|
import { MenuModule } from 'primeng/menu';
|
|
33
32
|
import * as i1$1 from 'primeng/select';
|
|
34
33
|
import { SelectModule } from 'primeng/select';
|
|
35
|
-
import * as i2$
|
|
34
|
+
import * as i2$2 from 'primeng/floatlabel';
|
|
36
35
|
import { FloatLabelModule } from 'primeng/floatlabel';
|
|
37
|
-
import * as i3$
|
|
36
|
+
import * as i3$1 from 'primeng/dialog';
|
|
38
37
|
import { DialogModule } from 'primeng/dialog';
|
|
39
38
|
import * as i4$2 from 'primeng/picklist';
|
|
40
39
|
import { PickListModule } from 'primeng/picklist';
|
|
@@ -42,32 +41,28 @@ import * as i1$2 from 'primeng/selectbutton';
|
|
|
42
41
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
43
42
|
import * as i4$3 from 'primeng/dataview';
|
|
44
43
|
import { DataViewModule } from 'primeng/dataview';
|
|
45
|
-
import * as i3$
|
|
44
|
+
import * as i3$2 from 'primeng/checkbox';
|
|
46
45
|
import { CheckboxModule } from 'primeng/checkbox';
|
|
47
46
|
import * as i5$2 from 'primeng/table';
|
|
48
47
|
import { TableModule } from 'primeng/table';
|
|
49
48
|
import * as i7 from 'primeng/multiselect';
|
|
50
49
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
51
50
|
import * as d3 from 'd3-scale-chromatic';
|
|
52
|
-
import * as i2$
|
|
51
|
+
import * as i2$4 from 'primeng/chart';
|
|
53
52
|
import { ChartModule } from 'primeng/chart';
|
|
54
|
-
import * as i3$
|
|
53
|
+
import * as i3$3 from 'primeng/message';
|
|
55
54
|
import { MessageModule } from 'primeng/message';
|
|
56
55
|
import * as i5$3 from 'primeng/popover';
|
|
57
56
|
import { Popover, PopoverModule } from 'primeng/popover';
|
|
58
|
-
import * as i3$
|
|
57
|
+
import * as i3$4 from 'primeng/chip';
|
|
59
58
|
import { ChipModule } from 'primeng/chip';
|
|
60
59
|
import * as i6 from 'primeng/focustrap';
|
|
61
60
|
import { FocusTrapModule } from 'primeng/focustrap';
|
|
62
|
-
import * as i3$
|
|
61
|
+
import * as i3$5 from 'primeng/timeline';
|
|
63
62
|
import { TimelineModule } from 'primeng/timeline';
|
|
63
|
+
import { DynamicDialogConfig, DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
|
|
64
|
+
import { EventsTopic } from '@onecx/integration-interface';
|
|
64
65
|
import { providePrimeNG } from 'primeng/config';
|
|
65
|
-
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* This checker always returns true, basically disabling the permission system on the UI side
|
|
69
|
-
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
70
|
-
*/
|
|
71
66
|
|
|
72
67
|
class OcxContentContainerDirective {
|
|
73
68
|
constructor() {
|
|
@@ -128,10 +123,10 @@ class OcxContentContainerDirective {
|
|
|
128
123
|
removeResponsiveLayoutClasses();
|
|
129
124
|
addSharedClasses();
|
|
130
125
|
}
|
|
131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
132
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
127
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: OcxContentContainerDirective, isStandalone: false, selector: "[ocxContentContainer]", inputs: { layout: "layout", breakpoint: "breakpoint" }, usesOnChanges: true, ngImport: i0 }); }
|
|
133
128
|
}
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentContainerDirective, decorators: [{
|
|
135
130
|
type: Directive,
|
|
136
131
|
args: [{ selector: '[ocxContentContainer]', standalone: false }]
|
|
137
132
|
}], propDecorators: { layout: [{
|
|
@@ -203,10 +198,10 @@ class OcxContentDirective {
|
|
|
203
198
|
}
|
|
204
199
|
}
|
|
205
200
|
}
|
|
206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
207
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
202
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: OcxContentDirective, isStandalone: false, selector: "[ocxContent]", inputs: { ocxContent: "ocxContent" }, usesOnChanges: true, ngImport: i0 }); }
|
|
208
203
|
}
|
|
209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentDirective, decorators: [{
|
|
210
205
|
type: Directive,
|
|
211
206
|
args: [{ selector: '[ocxContent]', standalone: false }]
|
|
212
207
|
}], propDecorators: { ocxContent: [{
|
|
@@ -241,28 +236,29 @@ class IfPermissionDirective {
|
|
|
241
236
|
this.permissionChecker = hasPermissionChecker ?? userService;
|
|
242
237
|
}
|
|
243
238
|
ngOnInit() {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
!this.permission) {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
}
|
|
250
|
-
else {
|
|
251
|
-
if (this.onMissingPermission === 'disable') {
|
|
252
|
-
this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
|
|
239
|
+
const permissions = (Array.isArray(this.permission) ? this.permission : [this.permission]).filter((p) => p !== undefined);
|
|
240
|
+
this.hasPermission(permissions).then((hasPerm) => {
|
|
241
|
+
if ((this.permission && this.negate === hasPerm) || !this.permission) {
|
|
242
|
+
if (this.ocxIfPermissionElseTemplate) {
|
|
243
|
+
this.viewContainer.createEmbeddedView(this.ocxIfPermissionElseTemplate);
|
|
253
244
|
}
|
|
254
245
|
else {
|
|
255
|
-
this.
|
|
246
|
+
if (this.onMissingPermission === 'disable') {
|
|
247
|
+
this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
|
|
248
|
+
}
|
|
249
|
+
else {
|
|
250
|
+
this.viewContainer.clear();
|
|
251
|
+
}
|
|
256
252
|
}
|
|
257
253
|
}
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
254
|
+
else {
|
|
255
|
+
if (this.templateRef) {
|
|
256
|
+
this.viewContainer.createEmbeddedView(this.templateRef);
|
|
257
|
+
}
|
|
262
258
|
}
|
|
263
|
-
}
|
|
259
|
+
});
|
|
264
260
|
}
|
|
265
|
-
hasPermission(permission) {
|
|
261
|
+
async hasPermission(permission) {
|
|
266
262
|
if (this.ocxIfPermissionPermissions) {
|
|
267
263
|
const result = permission.every((p) => this.ocxIfPermissionPermissions?.includes(p));
|
|
268
264
|
if (!result) {
|
|
@@ -270,12 +266,12 @@ class IfPermissionDirective {
|
|
|
270
266
|
}
|
|
271
267
|
return result;
|
|
272
268
|
}
|
|
273
|
-
return
|
|
269
|
+
return (await this.permissionChecker?.hasPermission(permission)) ?? false;
|
|
274
270
|
}
|
|
275
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
276
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IfPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
272
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: IfPermissionDirective, isStandalone: false, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: { permission: ["ocxIfPermission", "permission"], notPermission: ["ocxIfNotPermission", "notPermission"], onMissingPermission: "onMissingPermission", ocxIfPermissionPermissions: "ocxIfPermissionPermissions", ocxIfNotPermissionPermissions: "ocxIfNotPermissionPermissions", ocxIfPermissionElseTemplate: "ocxIfPermissionElseTemplate", ocxIfNotPermissionElseTemplate: "ocxIfNotPermissionElseTemplate" }, ngImport: i0 }); }
|
|
277
273
|
}
|
|
278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IfPermissionDirective, decorators: [{
|
|
279
275
|
type: Directive,
|
|
280
276
|
args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]', standalone: false }]
|
|
281
277
|
}], ctorParameters: () => [], propDecorators: { permission: [{
|
|
@@ -323,10 +319,10 @@ class IfBreakpointDirective {
|
|
|
323
319
|
}
|
|
324
320
|
this.state = newState;
|
|
325
321
|
}
|
|
326
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
327
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
322
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IfBreakpointDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
323
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: IfBreakpointDirective, isStandalone: false, selector: "[ocxIfBreakpoint]", inputs: { breakpoint: ["ocxIfBreakpoint", "breakpoint"], ocxIfBreakpointElseTemplate: "ocxIfBreakpointElseTemplate" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
|
|
328
324
|
}
|
|
329
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IfBreakpointDirective, decorators: [{
|
|
330
326
|
type: Directive,
|
|
331
327
|
args: [{ selector: '[ocxIfBreakpoint]', standalone: false }]
|
|
332
328
|
}], propDecorators: { breakpoint: [{
|
|
@@ -388,10 +384,10 @@ class SrcDirective {
|
|
|
388
384
|
this.error = new EventEmitter();
|
|
389
385
|
this.el.nativeElement.style.visibility = 'hidden';
|
|
390
386
|
}
|
|
391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
392
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SrcDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
388
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SrcDirective, isStandalone: false, selector: "[ocxSrc]", inputs: { ocxSrc: "ocxSrc" }, outputs: { error: "error" }, ngImport: i0 }); }
|
|
393
389
|
}
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SrcDirective, decorators: [{
|
|
395
391
|
type: Directive,
|
|
396
392
|
args: [{ selector: '[ocxSrc]', standalone: false }]
|
|
397
393
|
}], ctorParameters: () => [], propDecorators: { error: [{
|
|
@@ -483,16 +479,16 @@ let BreadcrumbService = class BreadcrumbService {
|
|
|
483
479
|
}
|
|
484
480
|
setItems(items) {
|
|
485
481
|
const translationKeys = [
|
|
486
|
-
...items.map((i) => i.labelKey
|
|
487
|
-
...items.map((i) => i.titleKey
|
|
482
|
+
...items.map((i) => i.labelKey ?? '').filter((l) => !!l),
|
|
483
|
+
...items.map((i) => i.titleKey ?? '').filter((l) => !!l),
|
|
488
484
|
];
|
|
489
485
|
if (translationKeys.length) {
|
|
490
486
|
this.translateService.get(translationKeys).subscribe((translations) => {
|
|
491
487
|
this.itemsSource$.publish({
|
|
492
488
|
menuItems: items.map((i) => ({
|
|
493
489
|
...i,
|
|
494
|
-
label: translations[i.labelKey
|
|
495
|
-
title: translations[i.titleKey
|
|
490
|
+
label: translations[i.labelKey ?? ''],
|
|
491
|
+
title: translations[i.titleKey ?? ''],
|
|
496
492
|
})),
|
|
497
493
|
});
|
|
498
494
|
});
|
|
@@ -503,14 +499,14 @@ let BreadcrumbService = class BreadcrumbService {
|
|
|
503
499
|
});
|
|
504
500
|
}
|
|
505
501
|
}
|
|
506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
507
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
503
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, providedIn: 'any' }); }
|
|
508
504
|
};
|
|
509
505
|
BreadcrumbService = __decorate([
|
|
510
506
|
UntilDestroy(),
|
|
511
507
|
__metadata("design:paramtypes", [])
|
|
512
508
|
], BreadcrumbService);
|
|
513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
514
510
|
type: Injectable,
|
|
515
511
|
args: [{ providedIn: 'any' }]
|
|
516
512
|
}], ctorParameters: () => [] });
|
|
@@ -558,10 +554,10 @@ class DynamicPipe {
|
|
|
558
554
|
}
|
|
559
555
|
}
|
|
560
556
|
}
|
|
561
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
562
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
557
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
558
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DynamicPipe, isStandalone: false, name: "dynamicPipe" }); }
|
|
563
559
|
}
|
|
564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
565
561
|
type: Pipe,
|
|
566
562
|
args: [{
|
|
567
563
|
name: 'dynamicPipe',
|
|
@@ -674,6 +670,7 @@ class PageHeaderComponent {
|
|
|
674
670
|
const translations$ = translationKeys.length ? this.translateService.get(translationKeys) : of([]);
|
|
675
671
|
translations$.subscribe((translations) => {
|
|
676
672
|
const allowedActions = [];
|
|
673
|
+
const permissionPromises = [];
|
|
677
674
|
if (this.actions) {
|
|
678
675
|
this.actions
|
|
679
676
|
.filter((a) => a.show === 'asOverflow')
|
|
@@ -687,22 +684,25 @@ class PageHeaderComponent {
|
|
|
687
684
|
return a;
|
|
688
685
|
})
|
|
689
686
|
.forEach((action) => {
|
|
690
|
-
this.checkActionPermission(allowedActions, action);
|
|
687
|
+
const permissionPromise = this.checkActionPermission(allowedActions, action);
|
|
688
|
+
permissionPromises.push(permissionPromise);
|
|
689
|
+
});
|
|
690
|
+
Promise.all(permissionPromises).then(() => {
|
|
691
|
+
this.overflowActions = [
|
|
692
|
+
...allowedActions.map((a) => ({
|
|
693
|
+
id: a.id,
|
|
694
|
+
label: a.labelKey ? translations[a.labelKey] : a.label,
|
|
695
|
+
icon: a.icon,
|
|
696
|
+
tooltipOptions: {
|
|
697
|
+
tooltipLabel: a.titleKey ? translations[a.titleKey] : a.title,
|
|
698
|
+
tooltipEvent: 'hover',
|
|
699
|
+
tooltipPosition: 'top',
|
|
700
|
+
},
|
|
701
|
+
command: a.actionCallback,
|
|
702
|
+
disabled: a.disabled,
|
|
703
|
+
})),
|
|
704
|
+
];
|
|
691
705
|
});
|
|
692
|
-
this.overflowActions = [
|
|
693
|
-
...allowedActions.map((a) => ({
|
|
694
|
-
id: a.id,
|
|
695
|
-
label: a.labelKey ? translations[a.labelKey] : a.label,
|
|
696
|
-
icon: a.icon,
|
|
697
|
-
tooltipOptions: {
|
|
698
|
-
tooltipLabel: a.titleKey ? translations[a.titleKey] : a.title,
|
|
699
|
-
tooltipEvent: 'hover',
|
|
700
|
-
tooltipPosition: 'top',
|
|
701
|
-
},
|
|
702
|
-
command: a.actionCallback,
|
|
703
|
-
disabled: a.disabled,
|
|
704
|
-
})),
|
|
705
|
-
];
|
|
706
706
|
}
|
|
707
707
|
});
|
|
708
708
|
}
|
|
@@ -714,6 +714,7 @@ class PageHeaderComponent {
|
|
|
714
714
|
if (this.actions) {
|
|
715
715
|
// Temp array to hold all inline actions that should be visible to the current user
|
|
716
716
|
const allowedActions = [];
|
|
717
|
+
const permissionPromises = [];
|
|
717
718
|
// Check permissions for all actions that should be rendered 'always'
|
|
718
719
|
this.actions
|
|
719
720
|
.filter((a) => a.show === 'always')
|
|
@@ -725,9 +726,12 @@ class PageHeaderComponent {
|
|
|
725
726
|
return a;
|
|
726
727
|
})
|
|
727
728
|
.forEach((action) => {
|
|
728
|
-
this.checkActionPermission(allowedActions, action);
|
|
729
|
+
const permissionPromise = this.checkActionPermission(allowedActions, action);
|
|
730
|
+
permissionPromises.push(permissionPromise);
|
|
731
|
+
});
|
|
732
|
+
Promise.all(permissionPromises).then(() => {
|
|
733
|
+
this.inlineActions = [...allowedActions];
|
|
729
734
|
});
|
|
730
|
-
this.inlineActions = [...allowedActions];
|
|
731
735
|
}
|
|
732
736
|
}
|
|
733
737
|
/**
|
|
@@ -736,23 +740,28 @@ class PageHeaderComponent {
|
|
|
736
740
|
* @param action Action for which a permission check should be executed
|
|
737
741
|
*/
|
|
738
742
|
checkActionPermission(allowedActions, action) {
|
|
739
|
-
|
|
740
|
-
if (
|
|
741
|
-
|
|
743
|
+
return new Promise((resolve) => {
|
|
744
|
+
if (action.permission) {
|
|
745
|
+
this.userService.hasPermission(action.permission).then((hasPermission) => {
|
|
746
|
+
if (hasPermission) {
|
|
747
|
+
allowedActions.push(action);
|
|
748
|
+
}
|
|
749
|
+
resolve();
|
|
750
|
+
});
|
|
751
|
+
}
|
|
752
|
+
else {
|
|
753
|
+
// Push action to allowed array if no permission was specified
|
|
742
754
|
allowedActions.push(action);
|
|
755
|
+
resolve();
|
|
743
756
|
}
|
|
744
|
-
}
|
|
745
|
-
else {
|
|
746
|
-
// Push action to allowed array if no permission was specified
|
|
747
|
-
allowedActions.push(action);
|
|
748
|
-
}
|
|
757
|
+
});
|
|
749
758
|
}
|
|
750
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <h2 id=\"page-subheader\">{{ subheader }}</h2>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || item.tooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
759
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
760
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PageHeaderComponent, isStandalone: false, selector: "ocx-page-header", inputs: { header: "header", loading: "loading", figureBackground: "figureBackground", showFigure: "showFigure", figureImage: "figureImage", disableDefaultActions: "disableDefaultActions", subheader: "subheader", actions: "actions", objectDetails: "objectDetails", showBreadcrumbs: "showBreadcrumbs", manualBreadcrumbs: "manualBreadcrumbs", enableGridView: "enableGridView", gridLayoutDesktopColumns: "gridLayoutDesktopColumns" }, outputs: { save: "save" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <h2 id=\"page-subheader\">{{ subheader }}</h2>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
752
761
|
}
|
|
753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
754
763
|
type: Component,
|
|
755
|
-
args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <h2 id=\"page-subheader\">{{ subheader }}</h2>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip ||
|
|
764
|
+
args: [{ standalone: false, selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n @if (showBreadcrumbs) { @if (breadcrumbs$ | async ; as items) {\n <p-breadcrumb\n [model]=\"items\"\n [home]=\"(home$ | async)?.menuItem ?? {}\"\n [homeAriaLabel]=\"(home$ | async)?.page ? ('OCX_PAGE_HEADER.HOME_ARIA_LABEL' | translate: { page: (home$ | async)?.page}) : ('OCX_PAGE_HEADER.HOME_DEFAULT_ARIA_LABEL' | translate)\"\n [attr.manual]=\"manualBreadcrumbs\"\n ></p-breadcrumb>\n } }\n <div class=\"title-bar flex flex-row md:justify-content-between align-items-center p-3\">\n <div class=\"title-wrap\">\n @if (showFigure) {\n <div class=\"mr-2 figure relative flex h-2rem w-2rem md:h-3rem md:w-3rem\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n @if (figureImage && !figureImageLoadError) {\n <img [ocxSrc]=\"figureImage\" alt=\"Figure Image\" class=\"w-full border-round-sm\" (error)=\"handleImageError()\" />\n }\n </div>\n @if (previewImage.children.length === 0 || figureImageLoadError) {\n <div class=\"colorblob flex-1 border-round\"></div>\n }\n </div>\n } @if (!loading) {\n <div class=\"header\">\n @if (!!header) {\n <h1 id=\"page-header\">{{ header }}</h1>\n } @if (!!subheader) {\n <h2 id=\"page-subheader\">{{ subheader }}</h2>\n }\n </div>\n } @else {\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n }\n </div>\n\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n @if (additionalToolbarContentLeft) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContentLeft\"> </ng-container>\n } @if (!loading) { @if (inlineActions && inlineActions.length > 0) {\n <div class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n @for (action of inlineActions; track action) {\n <span\n [pTooltip]=\"action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n >\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n [iconPos]=\"action.iconPos ?? 'left'\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [disabled]=\"action.disabled ? action.disabled : false\"\n [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n [ariaLabel]=\" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </span>\n }\n </div>\n }\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n @if (overflowActions.length !== 0) {\n <div>\n <button\n id=\"pageHeaderMenuButton\"\n type=\"button\"\n pButton\n icon=\"pi pi-ellipsis-v\"\n pTooltip=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n class=\"more-actions-menu-button action-button ml-2\"\n (click)=\"menu.toggle($event)\"\n name=\"ocx-page-header-overflow-action-button\"\n [attr.aria-label]=\"('OCX_PAGE_HEADER.MORE_ACTIONS' | translate)\"\n ></button>\n <p-menu #menu [popup]=\"true\" [model]=\"overflowActions\" appendTo=\"body\"></p-menu>\n </div>\n }\n </ng-container>\n } @else {\n <div class=\"flex\">\n <p-skeleton width=\"5rem\" height=\"2rem\" styleClass=\"mr-2\"></p-skeleton>\n <p-skeleton width=\"2rem\" height=\"2rem\" styleClass=\"mb-2\"></p-skeleton>\n </div>\n } @if (additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n }\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n @if (objectDetails) { @for (item of objectDetails; track item) {\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\">\n <span\n class=\"flex font-medium text-600 object-info-grid-label\"\n name=\"object-detail-label\"\n [pTooltip]=\"item.labelTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >{{ item.label | dynamicPipe:item.labelPipe }}</span\n >\n @if (item.icon || item.value) {\n <span class=\"object-info-grid-value\">\n <span\n class=\"flex text-900 align-items-center gap-2 w-max\"\n [ngClass]=\"generateItemStyle(item)\"\n name=\"object-detail-value\"\n >\n <span\n class=\"flex align-items-center gap-2\"\n [pTooltip]=\"item.valueTooltip || ''\"\n tooltipEvent=\"hover\"\n tooltipPosition=\"top\"\n >\n @if (item.icon) {\n <i class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n } {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n @if (item.actionItemIcon && item.actionItemCallback) {\n <p-button\n [icon]=\"item.actionItemIcon\"\n styleClass=\"p-button-text p-0 w-full\"\n [pTooltip]=\"item.actionItemTooltip || ''\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"(item.actionItemAriaLabelKey ? (item.actionItemAriaLabelKey | translate) : item.actionItemAriaLabel) || item.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n }\n </span>\n </span>\n }\n </div>\n } }\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host(.p-button-label){font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.1);box-shadow:0 2px 2px #0000001a;border:1px solid #cdd0d3}.onecx-page-header .title-bar{background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure .figure-image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.onecx-page-header .title-bar .figure .colorblob{background-color:var(--primary-color);position:absolute;inset:0}.onecx-page-header .title-bar .title-wrap{display:flex;flex-flow:row;align-items:center;gap:.25rem}.onecx-page-header .title-bar .title-wrap .header{display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.onecx-page-header .title-bar .title-wrap h1{font-size:1em;font-weight:700;margin:0;padding:0}.onecx-page-header .title-bar .title-wrap h2{font-size:1em;font-weight:400;margin:0;padding:0}.onecx-page-header .title-bar .action-items-wrap{display:flex;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .object-panel{border-top:1px solid #cdd0d3;padding:1rem}.onecx-page-header .object-panel:empty{display:none!important}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}.object-info-grid-label{flex:1}.object-info-grid-value{flex:3}.min-w-120{min-width:120px!important}\n"] }]
|
|
756
765
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
757
766
|
type: Input
|
|
758
767
|
}], loading: [{
|
|
@@ -796,15 +805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
796
805
|
* which do not have an input element.
|
|
797
806
|
*/
|
|
798
807
|
class SearchHeaderComponent {
|
|
799
|
-
/**
|
|
800
|
-
* @deprecated Will be replaced by header
|
|
801
|
-
*/
|
|
802
|
-
get headline() {
|
|
803
|
-
return this.header;
|
|
804
|
-
}
|
|
805
|
-
set headline(value) {
|
|
806
|
-
this.header = value;
|
|
807
|
-
}
|
|
808
808
|
get viewMode() {
|
|
809
809
|
return this._viewMode;
|
|
810
810
|
}
|
|
@@ -923,16 +923,14 @@ class SearchHeaderComponent {
|
|
|
923
923
|
isVisible(control) {
|
|
924
924
|
return this.visibleFormControls.some((formControl) => formControl.name !== null && String(formControl.name) === control);
|
|
925
925
|
}
|
|
926
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
927
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SearchHeaderComponent, isStandalone: false, selector: "ocx-search-header", inputs: { header: "header", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchConfigPermission: "searchConfigPermission", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled", pageName: "pageName" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, providers: [], queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }, { propertyName: "formGroup", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "visibleFormControls", predicate: FormControlName, descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n [subheader]=\"subheader\"\n [manualBreadcrumbs]=\"manualBreadcrumbs\"\n [actions]=\"headerActions\"\n >\n <ng-template #additionalToolbarContentLeft>\n @if (searchConfigChangeObserved && pageName) {\n <ocx-slot\n *ocxIfPermission=\"searchConfigPermission\"\n name=\"onecx-search-config\"\n [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\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 }\n @if (_additionalToolbarContentLeft) {\n <ng-container\n [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n ></ng-container>\n }\n </ng-template>\n <ng-template #additionalToolbarContent>\n @if (_additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n }\n </ng-template>\n <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n <div>\n <div #searchParameterFields>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n @if (resetted.observed) {\n <p-button\n id=\"resetButton\"\n (onClick)=\"onResetClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"resetButtonDisabled\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n }\n\n <p-button\n id=\"searchButton\"\n (onClick)=\"onSearchClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-search\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n </div>\n </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs", "enableGridView", "gridLayoutDesktopColumns"], outputs: ["save"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
928
928
|
}
|
|
929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SearchHeaderComponent, decorators: [{
|
|
930
930
|
type: Component,
|
|
931
931
|
args: [{ standalone: false, selector: 'ocx-search-header', providers: [], template: "<ocx-page-header\n [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n [subheader]=\"subheader\"\n [manualBreadcrumbs]=\"manualBreadcrumbs\"\n [actions]=\"headerActions\"\n >\n <ng-template #additionalToolbarContentLeft>\n @if (searchConfigChangeObserved && pageName) {\n <ocx-slot\n *ocxIfPermission=\"searchConfigPermission\"\n name=\"onecx-search-config\"\n [inputs]=\"{ pageName: pageName, currentFieldValues: fieldValues$ | async, viewMode: viewMode }\"\n [outputs]=\"{ searchConfigSelected: searchConfigChangedSlotEmitter }\"\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 }\n @if (_additionalToolbarContentLeft) {\n <ng-container\n [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n ></ng-container>\n }\n </ng-template>\n <ng-template #additionalToolbarContent>\n @if (_additionalToolbarContent) {\n <ng-container [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n }\n </ng-template>\n <div class=\"flex row-gap-3 column-gap-6 flex-wrap align-items-center\">\n <div>\n <div #searchParameterFields>\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"flex flex-wrap gap-2\" [ngClass]=\"(searchButtonsReversed$ | async) ? 'flex-row-reverse' : 'flex-row'\">\n @if (resetted.observed) {\n <p-button\n id=\"resetButton\"\n (onClick)=\"onResetClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"resetButtonDisabled\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n }\n\n <p-button\n id=\"searchButton\"\n (onClick)=\"onSearchClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-search\"\n pTooltip=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [disabled]=\"searchButtonDisabled || formGroup?.invalid\"\n [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.ARIA_LABEL' | translate\"\n >\n </p-button>\n </div>\n </div>\n</ocx-page-header>\n" }]
|
|
932
932
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
933
933
|
type: Input
|
|
934
|
-
}], headline: [{
|
|
935
|
-
type: Input
|
|
936
934
|
}], subheader: [{
|
|
937
935
|
type: Input
|
|
938
936
|
}], viewMode: [{
|
|
@@ -997,10 +995,10 @@ class AdvancedDirective {
|
|
|
997
995
|
this.viewContainer.clear();
|
|
998
996
|
}
|
|
999
997
|
}
|
|
1000
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1001
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
998
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AdvancedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
999
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: AdvancedDirective, isStandalone: false, selector: "[ocxAdvanced]", ngImport: i0 }); }
|
|
1002
1000
|
}
|
|
1003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AdvancedDirective, decorators: [{
|
|
1004
1002
|
type: Directive,
|
|
1005
1003
|
args: [{ selector: '[ocxAdvanced]', standalone: false }]
|
|
1006
1004
|
}], ctorParameters: () => [] });
|
|
@@ -1019,7 +1017,15 @@ class TooltipOnOverflowDirective extends Tooltip {
|
|
|
1019
1017
|
}
|
|
1020
1018
|
ngAfterViewInit() {
|
|
1021
1019
|
super.ngAfterViewInit();
|
|
1022
|
-
|
|
1020
|
+
setTimeout(() => {
|
|
1021
|
+
// Needed to ensure change detection picks up the correct state of 'disabled'
|
|
1022
|
+
// Without this the tooltip for some elements won't update properly
|
|
1023
|
+
this.zone.run(() => {
|
|
1024
|
+
this.disabled = this.el.nativeElement.scrollWidth <= this.el.nativeElement.offsetWidth;
|
|
1025
|
+
this.setOption({ disabled: this.disabled });
|
|
1026
|
+
}, this);
|
|
1027
|
+
this.mutationObserver.observe(this.el.nativeElement, { subtree: true, characterData: true, childList: true });
|
|
1028
|
+
}, 0);
|
|
1023
1029
|
}
|
|
1024
1030
|
constructor() {
|
|
1025
1031
|
const zone = inject(NgZone);
|
|
@@ -1038,12 +1044,12 @@ class TooltipOnOverflowDirective extends Tooltip {
|
|
|
1038
1044
|
this.disabled = true;
|
|
1039
1045
|
this.setOption({ disabled: this.disabled });
|
|
1040
1046
|
}
|
|
1041
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1042
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
1047
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipOnOverflowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1048
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: TooltipOnOverflowDirective, isStandalone: false, selector: "[ocxTooltipOnOverflow]", inputs: { ocxTooltipOnOverflow: "ocxTooltipOnOverflow" }, providers: [TooltipStyle], usesInheritance: true, ngImport: i0 }); }
|
|
1043
1049
|
}
|
|
1044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipOnOverflowDirective, decorators: [{
|
|
1045
1051
|
type: Directive,
|
|
1046
|
-
args: [{ selector: '[ocxTooltipOnOverflow]', standalone: false }]
|
|
1052
|
+
args: [{ selector: '[ocxTooltipOnOverflow]', standalone: false, providers: [TooltipStyle] }]
|
|
1047
1053
|
}], ctorParameters: () => [], propDecorators: { ocxTooltipOnOverflow: [{
|
|
1048
1054
|
type: Input
|
|
1049
1055
|
}] } });
|
|
@@ -1056,10 +1062,10 @@ class TemplateDirective {
|
|
|
1056
1062
|
getType() {
|
|
1057
1063
|
return this.name;
|
|
1058
1064
|
}
|
|
1059
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1060
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
1065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1066
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: TemplateDirective, isStandalone: false, selector: "[ocxTemplate]", inputs: { name: ["ocxTemplate", "name"] }, ngImport: i0 }); }
|
|
1061
1067
|
}
|
|
1062
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TemplateDirective, decorators: [{
|
|
1063
1069
|
type: Directive,
|
|
1064
1070
|
args: [{ selector: '[ocxTemplate]', standalone: false }]
|
|
1065
1071
|
}], propDecorators: { name: [{
|
|
@@ -1070,6 +1076,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
1070
1076
|
}]
|
|
1071
1077
|
}] } });
|
|
1072
1078
|
|
|
1079
|
+
class BasicDirective {
|
|
1080
|
+
constructor() {
|
|
1081
|
+
this.viewContainer = inject(ViewContainerRef);
|
|
1082
|
+
this.templateRef = inject(TemplateRef, { optional: true });
|
|
1083
|
+
this.searchHeader = inject(SearchHeaderComponent, { optional: true });
|
|
1084
|
+
const searchHeader = this.searchHeader;
|
|
1085
|
+
if (!searchHeader) {
|
|
1086
|
+
throw 'Basic directive can only be used inside search header component';
|
|
1087
|
+
}
|
|
1088
|
+
}
|
|
1089
|
+
ngDoCheck() {
|
|
1090
|
+
if (this.searchHeader?.viewMode === 'basic') {
|
|
1091
|
+
if (this.templateRef && !this.viewContainer.length) {
|
|
1092
|
+
this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1093
|
+
}
|
|
1094
|
+
}
|
|
1095
|
+
else {
|
|
1096
|
+
this.viewContainer.clear();
|
|
1097
|
+
}
|
|
1098
|
+
}
|
|
1099
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BasicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1100
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BasicDirective, isStandalone: false, selector: "[ocxBasic]", ngImport: i0 }); }
|
|
1101
|
+
}
|
|
1102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BasicDirective, decorators: [{
|
|
1103
|
+
type: Directive,
|
|
1104
|
+
args: [{ selector: '[ocxBasic]', standalone: false }]
|
|
1105
|
+
}], ctorParameters: () => [] });
|
|
1106
|
+
|
|
1107
|
+
class LoadingIndicatorComponent {
|
|
1108
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LoadingIndicatorComponent, isStandalone: false, selector: "ocx-loading-indicator", ngImport: i0, template: "<div class=\"full-overlay\">\n <div class=\"overlay\">\n <span class=\"loader\"></span>\n </div>\n</div>", styles: [".full-overlay{position:fixed;top:0;left:0;height:100%;width:100%;z-index:9999}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:99999}\n"] }); }
|
|
1110
|
+
}
|
|
1111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
|
|
1112
|
+
type: Component,
|
|
1113
|
+
args: [{ standalone: false, selector: 'ocx-loading-indicator', template: "<div class=\"full-overlay\">\n <div class=\"overlay\">\n <span class=\"loader\"></span>\n </div>\n</div>", styles: [".full-overlay{position:fixed;top:0;left:0;height:100%;width:100%;z-index:9999}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:99999}\n"] }]
|
|
1114
|
+
}] });
|
|
1115
|
+
|
|
1116
|
+
class LoadingIndicatorDirective {
|
|
1117
|
+
constructor() {
|
|
1118
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
1119
|
+
this.el = inject(ElementRef);
|
|
1120
|
+
this.renderer = inject(Renderer2);
|
|
1121
|
+
this.ocxLoadingIndicator = false;
|
|
1122
|
+
this.overlayFullPage = false;
|
|
1123
|
+
this.isLoaderSmall = false;
|
|
1124
|
+
}
|
|
1125
|
+
ngOnChanges(changes) {
|
|
1126
|
+
if (changes['ocxLoadingIndicator'] || changes['overlayFullPage']) {
|
|
1127
|
+
this.toggleLoadingIndicator();
|
|
1128
|
+
}
|
|
1129
|
+
}
|
|
1130
|
+
elementLoader() {
|
|
1131
|
+
this.renderer.addClass(this.el.nativeElement, 'element-overlay');
|
|
1132
|
+
const loaderElement = document.createElement('div');
|
|
1133
|
+
loaderElement.className = 'loader';
|
|
1134
|
+
if (this.isLoaderSmall) {
|
|
1135
|
+
loaderElement.className = 'loader loader-small';
|
|
1136
|
+
}
|
|
1137
|
+
this.renderer.appendChild(this.el.nativeElement, loaderElement);
|
|
1138
|
+
}
|
|
1139
|
+
toggleLoadingIndicator() {
|
|
1140
|
+
if (this.ocxLoadingIndicator) {
|
|
1141
|
+
if (this.overlayFullPage == false) {
|
|
1142
|
+
this.elementLoader();
|
|
1143
|
+
}
|
|
1144
|
+
else {
|
|
1145
|
+
this.componentRef = this.viewContainerRef.createComponent(LoadingIndicatorComponent);
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
else {
|
|
1149
|
+
this.viewContainerRef.clear();
|
|
1150
|
+
if (this.componentRef) {
|
|
1151
|
+
this.componentRef.destroy();
|
|
1152
|
+
}
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1156
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: LoadingIndicatorDirective, isStandalone: false, selector: "[ocxLoadingIndicator]", inputs: { ocxLoadingIndicator: "ocxLoadingIndicator", overlayFullPage: "overlayFullPage", isLoaderSmall: "isLoaderSmall" }, usesOnChanges: true, ngImport: i0 }); }
|
|
1157
|
+
}
|
|
1158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
|
|
1159
|
+
type: Directive,
|
|
1160
|
+
args: [{
|
|
1161
|
+
selector: '[ocxLoadingIndicator]',
|
|
1162
|
+
standalone: false,
|
|
1163
|
+
}]
|
|
1164
|
+
}], propDecorators: { ocxLoadingIndicator: [{
|
|
1165
|
+
type: Input
|
|
1166
|
+
}], overlayFullPage: [{
|
|
1167
|
+
type: Input
|
|
1168
|
+
}], isLoaderSmall: [{
|
|
1169
|
+
type: Input
|
|
1170
|
+
}] } });
|
|
1171
|
+
|
|
1073
1172
|
class ColumnGroupSelectionComponent {
|
|
1074
1173
|
constructor() {
|
|
1075
1174
|
this.selectedGroupKey$ = new BehaviorSubject('');
|
|
@@ -1129,10 +1228,10 @@ class ColumnGroupSelectionComponent {
|
|
|
1129
1228
|
displayedColumns: activeColumns,
|
|
1130
1229
|
});
|
|
1131
1230
|
}
|
|
1132
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
1231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ColumnGroupSelectionComponent, isStandalone: false, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\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 }\n @if ((allGroupKeys$ | async)?.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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1134
1233
|
}
|
|
1135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
1136
1235
|
type: Component,
|
|
1137
1236
|
args: [{ standalone: false, selector: 'ocx-column-group-selection', template: "<p-floatlabel variant=\"on\">\n @if ((allGroupKeys$ | async)?.length) {\n <p-select\n inputId=\"columnGroupSelectionDropdown\"\n id=\"columnGroupSelectionDropdownElement\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\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 }\n @if ((allGroupKeys$ | async)?.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"] }]
|
|
1138
1237
|
}], propDecorators: { selectedGroupKey: [{
|
|
@@ -1158,10 +1257,10 @@ class OcxContentComponent {
|
|
|
1158
1257
|
*/
|
|
1159
1258
|
this.title = '';
|
|
1160
1259
|
}
|
|
1161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
1260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OcxContentComponent, isStandalone: false, selector: "ocx-content", inputs: { title: "title", styleClass: "styleClass" }, ngImport: i0, template: "<div [ocxContent]=\"title\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OcxContentDirective, selector: "[ocxContent]", inputs: ["ocxContent"] }] }); }
|
|
1163
1262
|
}
|
|
1164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentComponent, decorators: [{
|
|
1165
1264
|
type: Component,
|
|
1166
1265
|
args: [{ standalone: false, selector: 'ocx-content', template: "<div [ocxContent]=\"title\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>" }]
|
|
1167
1266
|
}], propDecorators: { title: [{
|
|
@@ -1183,10 +1282,10 @@ class OcxContentContainerComponent {
|
|
|
1183
1282
|
*/
|
|
1184
1283
|
this.breakpoint = 'md';
|
|
1185
1284
|
}
|
|
1186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
1285
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: OcxContentContainerComponent, isStandalone: false, selector: "ocx-content-container", inputs: { layout: "layout", breakpoint: "breakpoint", styleClass: "styleClass" }, ngImport: i0, template: "<div ocxContentContainer [layout]=\"layout\" [breakpoint]=\"breakpoint\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: OcxContentContainerDirective, selector: "[ocxContentContainer]", inputs: ["layout", "breakpoint"] }] }); }
|
|
1188
1287
|
}
|
|
1189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxContentContainerComponent, decorators: [{
|
|
1190
1289
|
type: Component,
|
|
1191
1290
|
args: [{ standalone: false, selector: 'ocx-content-container', template: "<div ocxContentContainer [layout]=\"layout\" [breakpoint]=\"breakpoint\" [ngClass]=\"styleClass\">\n <ng-content></ng-content>\n</div>" }]
|
|
1192
1291
|
}], propDecorators: { layout: [{
|
|
@@ -1310,12 +1409,12 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1310
1409
|
onCancelClick() {
|
|
1311
1410
|
this.visible = false;
|
|
1312
1411
|
}
|
|
1313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "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: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
1412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", customGroupKey: "customGroupKey", dialogTitle: "dialogTitle", dialogTitleKey: "dialogTitleKey", openButtonTitle: "openButtonTitle", openButtonTitleKey: "openButtonTitleKey", openButtonAriaLabel: "openButtonAriaLabel", openButtonAriaLabelKey: "openButtonAriaLabelKey", saveButtonLabel: "saveButtonLabel", saveButtonLabelKey: "saveButtonLabelKey", saveButtonAriaLabel: "saveButtonAriaLabel", saveButtonAriaLabelKey: "saveButtonAriaLabelKey", cancelButtonLabel: "cancelButtonLabel", cancelButtonLabelKey: "cancelButtonLabelKey", cancelButtonAriaLabel: "cancelButtonAriaLabel", cancelButtonAriaLabelKey: "cancelButtonAriaLabelKey", activeColumnsLabel: "activeColumnsLabel", activeColumnsLabelKey: "activeColumnsLabelKey", inactiveColumnsLabel: "inactiveColumnsLabel", inactiveColumnsLabelKey: "inactiveColumnsLabelKey", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "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: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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" }] }); }
|
|
1315
1414
|
}
|
|
1316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
|
|
1317
1416
|
type: Component,
|
|
1318
|
-
args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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}.p-button{height:100%}\n"] }]
|
|
1417
|
+
args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [pTooltip]=\"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' | translate)\n }}</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 class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}</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 >\n <ng-template #item let-option> {{option.label | translate}} </ng-template>\n </p-selectbutton>\n </div>\n <div>\n <p class=\"mb-1\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}</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 >\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"] }]
|
|
1319
1418
|
}], propDecorators: { columns: [{
|
|
1320
1419
|
type: Input
|
|
1321
1420
|
}], displayedColumns: [{
|
|
@@ -1418,12 +1517,12 @@ class DataLayoutSelectionComponent {
|
|
|
1418
1517
|
layout: event.layout,
|
|
1419
1518
|
});
|
|
1420
1519
|
}
|
|
1421
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1422
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
1520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataLayoutSelectionComponent, isStandalone: false, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, 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 >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [pTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\"></i>\n <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\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}\n"], dependencies: [{ kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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" }] }); }
|
|
1423
1522
|
}
|
|
1424
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1425
1524
|
type: Component,
|
|
1426
|
-
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 >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [pTooltip]=\"item.
|
|
1525
|
+
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 >\n <ng-template #item let-item>\n <i [class]=\"item.icon\" [pTooltip]=\"item.tooltipKey | translate\" tooltipPosition=\"top\"></i>\n <label style=\"display: none\" id=\"{{item.id}}\">{{item.labelKey | translate}}</label>\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}\n"] }]
|
|
1427
1526
|
}], propDecorators: { supportedViewLayouts: [{
|
|
1428
1527
|
type: Input
|
|
1429
1528
|
}], layout: [{
|
|
@@ -1441,13 +1540,6 @@ var ColumnType;
|
|
|
1441
1540
|
ColumnType["DATE"] = "DATE";
|
|
1442
1541
|
ColumnType["RELATIVE_DATE"] = "RELATIVE_DATE";
|
|
1443
1542
|
ColumnType["TRANSLATION_KEY"] = "TRANSLATION_KEY";
|
|
1444
|
-
/**
|
|
1445
|
-
* @deprecated Will be removed with the next major v6 upgrade.
|
|
1446
|
-
* Please use pTemplate="column id + IdCell" in DataTable or
|
|
1447
|
-
* pTemplate="column id + IdTableCell" in DataView and InteractiveDataView
|
|
1448
|
-
* e.g. for a column with the id 'status' in DataTable use pTemplate="statusIdCell"
|
|
1449
|
-
*/
|
|
1450
|
-
ColumnType["CUSTOM"] = "CUSTOM";
|
|
1451
1543
|
})(ColumnType || (ColumnType = {}));
|
|
1452
1544
|
|
|
1453
1545
|
class ObjectUtils {
|
|
@@ -1742,10 +1834,10 @@ class OcxTimeAgoPipe extends TranslatePipe {
|
|
|
1742
1834
|
return 3600;
|
|
1743
1835
|
}
|
|
1744
1836
|
}
|
|
1745
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1746
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
1837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1838
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: OcxTimeAgoPipe, isStandalone: false, name: "timeago" }); }
|
|
1747
1839
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1840
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
|
|
1749
1841
|
type: Pipe,
|
|
1750
1842
|
args: [{
|
|
1751
1843
|
name: 'timeago',
|
|
@@ -1766,10 +1858,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1766
1858
|
set pageSize(value) {
|
|
1767
1859
|
this._pageSize$.next(value);
|
|
1768
1860
|
}
|
|
1769
|
-
/**
|
|
1770
|
-
* @deprecated
|
|
1771
|
-
*/
|
|
1772
|
-
set showAllOption(value) { }
|
|
1773
1861
|
get columns() {
|
|
1774
1862
|
return this._columns$.getValue();
|
|
1775
1863
|
}
|
|
@@ -1840,9 +1928,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1840
1928
|
get _relativeDateListValue() {
|
|
1841
1929
|
return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate;
|
|
1842
1930
|
}
|
|
1843
|
-
get _customListValue() {
|
|
1844
|
-
return this.customListValueTemplate || this.customListValueChildTemplate;
|
|
1845
|
-
}
|
|
1846
1931
|
get _stringListValue() {
|
|
1847
1932
|
return this.stringListValueTemplate || this.stringListValueChildTemplate;
|
|
1848
1933
|
}
|
|
@@ -1927,7 +2012,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1927
2012
|
this.pageChanged = new EventEmitter();
|
|
1928
2013
|
this.pageSizeChanged = new EventEmitter();
|
|
1929
2014
|
this.componentStateChanged = new EventEmitter();
|
|
1930
|
-
this.showMenu = false;
|
|
1931
2015
|
this.gridMenuItems = [];
|
|
1932
2016
|
this.observedOutputs = 0;
|
|
1933
2017
|
this.templates$ = new BehaviorSubject(undefined);
|
|
@@ -1940,10 +2024,14 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1940
2024
|
this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50));
|
|
1941
2025
|
this.inlineListActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => !action.showAsOverflow)));
|
|
1942
2026
|
this.overflowListActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => action.showAsOverflow)));
|
|
1943
|
-
this.overflowMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
.
|
|
2027
|
+
this.overflowMenuItems$ = combineLatest([this.overflowListActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(mergeMap(async (translations) => {
|
|
2028
|
+
const filteredActions = [];
|
|
2029
|
+
for (const a of actions) {
|
|
2030
|
+
if (await this.userService.hasPermission(a.permission)) {
|
|
2031
|
+
filteredActions.push(a);
|
|
2032
|
+
}
|
|
2033
|
+
}
|
|
2034
|
+
return filteredActions.map((a) => ({
|
|
1947
2035
|
label: translations[a.labelKey || ''],
|
|
1948
2036
|
icon: a.icon,
|
|
1949
2037
|
styleClass: (a.classes || []).join(' '),
|
|
@@ -1962,10 +2050,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1962
2050
|
}
|
|
1963
2051
|
ngOnInit() {
|
|
1964
2052
|
this.displayedItems$ = combineLatest([this._data$, this._filters$, this._sortField$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([items]) => items));
|
|
1965
|
-
this.showMenu =
|
|
1966
|
-
(!!this.viewPermission && this.userService.hasPermission(this.viewPermission)) ||
|
|
1967
|
-
(!!this.editPermission && this.userService.hasPermission(this.editPermission)) ||
|
|
1968
|
-
(!!this.deletePermission && this.userService.hasPermission(this.deletePermission));
|
|
1969
2053
|
this.emitComponentStateChanged();
|
|
1970
2054
|
}
|
|
1971
2055
|
ngAfterContentInit() {
|
|
@@ -1983,9 +2067,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1983
2067
|
case 'relativeDateListValue':
|
|
1984
2068
|
this.relativeDateListValueChildTemplate = item.template;
|
|
1985
2069
|
break;
|
|
1986
|
-
case 'customListValue':
|
|
1987
|
-
this.customListValueChildTemplate = item.template;
|
|
1988
|
-
break;
|
|
1989
2070
|
case 'stringListValue':
|
|
1990
2071
|
this.stringListValueChildTemplate = item.template;
|
|
1991
2072
|
break;
|
|
@@ -1999,8 +2080,12 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1999
2080
|
this.deleteItem.emit(element);
|
|
2000
2081
|
}
|
|
2001
2082
|
onViewRow(element) {
|
|
2002
|
-
if (
|
|
2003
|
-
this.
|
|
2083
|
+
if (this.viewPermission) {
|
|
2084
|
+
this.userService.hasPermission(this.viewPermission).then((hasPermission) => {
|
|
2085
|
+
if (hasPermission) {
|
|
2086
|
+
this.viewItem.emit(element);
|
|
2087
|
+
}
|
|
2088
|
+
});
|
|
2004
2089
|
}
|
|
2005
2090
|
}
|
|
2006
2091
|
onEditRow(element) {
|
|
@@ -2041,50 +2126,62 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2041
2126
|
...this.additionalActions.map((a) => a.labelKey || ''),
|
|
2042
2127
|
])
|
|
2043
2128
|
.subscribe((translations) => {
|
|
2044
|
-
let menuItems = [];
|
|
2045
2129
|
const automationId = 'data-grid-action-button';
|
|
2046
2130
|
const automationIdHidden = 'data-grid-action-button-hidden';
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2131
|
+
const permissionChecks = Promise.all([
|
|
2132
|
+
this.userService.hasPermission(this.viewPermission),
|
|
2133
|
+
this.userService.hasPermission(this.editPermission),
|
|
2134
|
+
this.userService.hasPermission(this.deletePermission),
|
|
2135
|
+
]);
|
|
2136
|
+
permissionChecks.then(([hasViewPermission, hasEditPermission, hasDeletePermission]) => {
|
|
2137
|
+
const menuItems = [];
|
|
2138
|
+
if (this.viewItem.observed && hasViewPermission) {
|
|
2139
|
+
menuItems.push({
|
|
2140
|
+
label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'],
|
|
2141
|
+
icon: PrimeIcons.EYE,
|
|
2142
|
+
command: () => this.viewItem.emit(this.selectedItem),
|
|
2143
|
+
disabled: viewDisabled,
|
|
2144
|
+
visible: viewVisible,
|
|
2145
|
+
automationId: viewVisible ? automationId : automationIdHidden,
|
|
2146
|
+
});
|
|
2147
|
+
}
|
|
2148
|
+
if (this.editItem.observed && hasEditPermission) {
|
|
2149
|
+
menuItems.push({
|
|
2150
|
+
label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'],
|
|
2151
|
+
icon: PrimeIcons.PENCIL,
|
|
2152
|
+
command: () => this.editItem.emit(this.selectedItem),
|
|
2153
|
+
disabled: editDisabled,
|
|
2154
|
+
visible: editVisible,
|
|
2155
|
+
automationId: editVisible ? automationId : automationIdHidden,
|
|
2156
|
+
});
|
|
2157
|
+
}
|
|
2158
|
+
if (this.deleteItem.observed && hasDeletePermission) {
|
|
2159
|
+
menuItems.push({
|
|
2160
|
+
label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'],
|
|
2161
|
+
icon: PrimeIcons.TRASH,
|
|
2162
|
+
command: () => this.deleteItem.emit(this.selectedItem),
|
|
2163
|
+
disabled: deleteDisabled,
|
|
2164
|
+
visible: deleteVisible,
|
|
2165
|
+
automationId: deleteVisible ? automationId : automationIdHidden,
|
|
2166
|
+
});
|
|
2167
|
+
}
|
|
2168
|
+
Promise.all(this.additionalActions.map((a) => this.userService.hasPermission(a.permission).then((hasPermission) => {
|
|
2169
|
+
if (!hasPermission)
|
|
2170
|
+
return null;
|
|
2171
|
+
const visible = !a.actionVisibleField || this.fieldIsTruthy(this.selectedItem, a.actionVisibleField);
|
|
2172
|
+
return {
|
|
2173
|
+
label: translations[a.labelKey || ''],
|
|
2174
|
+
icon: a.icon,
|
|
2175
|
+
styleClass: (a.classes || []).join(' '),
|
|
2176
|
+
disabled: a.disabled ||
|
|
2177
|
+
(!!a.actionEnabledField && !this.fieldIsTruthy(this.selectedItem, a.actionEnabledField)),
|
|
2178
|
+
visible,
|
|
2179
|
+
command: () => a.callback(this.selectedItem),
|
|
2180
|
+
};
|
|
2181
|
+
}))).then((additionalMenuItems) => {
|
|
2182
|
+
this.gridMenuItems = menuItems.concat(additionalMenuItems.filter((item) => item !== null));
|
|
2075
2183
|
});
|
|
2076
|
-
}
|
|
2077
|
-
menuItems = menuItems.concat(this.additionalActions
|
|
2078
|
-
.filter((a) => this.userService.hasPermission(a.permission))
|
|
2079
|
-
.map((a) => ({
|
|
2080
|
-
label: translations[a.labelKey || ''],
|
|
2081
|
-
icon: a.icon,
|
|
2082
|
-
styleClass: (a.classes || []).join(' '),
|
|
2083
|
-
disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(this.selectedItem, a.actionEnabledField)),
|
|
2084
|
-
visible: !a.actionVisibleField || this.fieldIsTruthy(this.selectedItem, a.actionVisibleField),
|
|
2085
|
-
command: () => a.callback(this.selectedItem),
|
|
2086
|
-
})));
|
|
2087
|
-
this.gridMenuItems = menuItems;
|
|
2184
|
+
});
|
|
2088
2185
|
});
|
|
2089
2186
|
}
|
|
2090
2187
|
setSelectedItem(item) {
|
|
@@ -2121,9 +2218,18 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2121
2218
|
fieldIsTruthy(object, key) {
|
|
2122
2219
|
return !!this.resolveFieldData(object, key);
|
|
2123
2220
|
}
|
|
2221
|
+
// A new Observable is created with each ChangeDetection.
|
|
2222
|
+
// The async pipe subscribes to it, triggering another ChangeDetection when a new value is emitted, which creates a loop.
|
|
2223
|
+
// To prevent this, cache the Observable by using shareReplay to avoid recreating it with every ChangeDetection.
|
|
2124
2224
|
hasVisibleOverflowMenuItems(item) {
|
|
2125
|
-
|
|
2126
|
-
this.
|
|
2225
|
+
if (this.cachedOverflowMenuItemsVisibility$) {
|
|
2226
|
+
return this.cachedOverflowMenuItemsVisibility$;
|
|
2227
|
+
}
|
|
2228
|
+
const overflowMenuItemsVisibility$ = this.overflowListActions$.pipe(mergeMap((actions) => forkJoin(actions.map((a) => !a.actionVisibleField || this.fieldIsTruthy(item, a.actionVisibleField)
|
|
2229
|
+
? from(this.userService.hasPermission(a.permission))
|
|
2230
|
+
: of(false)))), map((results) => results.some((isVisible) => isVisible)));
|
|
2231
|
+
this.cachedOverflowMenuItemsVisibility$ = overflowMenuItemsVisibility$.pipe(shareReplay(1));
|
|
2232
|
+
return this.cachedOverflowMenuItemsVisibility$;
|
|
2127
2233
|
}
|
|
2128
2234
|
toggleOverflowMenu(event, menu, row) {
|
|
2129
2235
|
this.currentMenuRow$.next(row);
|
|
@@ -2175,10 +2281,6 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2175
2281
|
return (this._translationKeyListValue ??
|
|
2176
2282
|
this.findTemplate(templates, ['translationKeyListValue', 'defaultTranslationKeyListValue'])?.template ??
|
|
2177
2283
|
null);
|
|
2178
|
-
case ColumnType.CUSTOM:
|
|
2179
|
-
return (this._customListValue ??
|
|
2180
|
-
this.findTemplate(templates, ['customListValue', 'defaultCustomListValue'])?.template ??
|
|
2181
|
-
null);
|
|
2182
2284
|
default:
|
|
2183
2285
|
return (this._stringListValue ??
|
|
2184
2286
|
this.findTemplate(templates, ['stringListValue', 'defaultStringListValue'])?.template ??
|
|
@@ -2188,12 +2290,12 @@ class DataListGridComponent extends DataSortBase {
|
|
|
2188
2290
|
}
|
|
2189
2291
|
return this.templatesObservables[column.id];
|
|
2190
2292
|
}
|
|
2191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{\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\">\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 <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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]=\"(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, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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", "style", "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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "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]] }); }
|
|
2293
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataListGridComponent, isStandalone: false, selector: "ocx-data-list-grid", inputs: { titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", fallbackImage: "fallbackImage", layout: "layout", viewPermission: "viewPermission", editPermission: "editPermission", deletePermission: "deletePermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", viewMenuItemKey: "viewMenuItemKey", editMenuItemKey: "editMenuItemKey", deleteMenuItemKey: "deleteMenuItemKey", paginator: "paginator", page: "page", columns: "columns", name: "name", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", data: "data", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", listItemTemplate: "listItemTemplate", gridItemTemplate: "gridItemTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _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\">\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 <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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]=\"(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, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { 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", "style", "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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i8$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "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]] }); }
|
|
2193
2295
|
}
|
|
2194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
2195
2297
|
type: Component,
|
|
2196
|
-
args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{\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\">\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 <a [routerLink]=\"\" (click)=\"onViewRow\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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]=\"(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, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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=\"defaultCustomListValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </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"] }]
|
|
2298
|
+
args: [{ standalone: false, selector: 'ocx-data-list-grid', template: "@if ((displayedPageSize$ | async); as displayedPageSize) { @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 ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n>\n <ng-template #grid let-rows>\n <div class=\"grid grid-cols-12 gap-4\">\n @for (item of rows; track item) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _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\">\n @for (item of rows; track item; let first = $first) { @defer (on viewport; on idle){\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _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\">\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 <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n </div>\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines ? _gridItemSubtitleLines : defaultGridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div>\n <p-menu #menu [model]=\"gridMenuItems\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n <button\n pButton\n (click)=\"setSelectedItem(item); updateGridMenuItems(true); 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 [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n </div>\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\">\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 [pTooltip]=\"(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 [pTooltip]=\"(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 <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 [pTooltip]=\"(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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(item, 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)=\"action.callback(item)\"\n [pTooltip]=\"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]=\"(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, item)\"\n [attr.aria-label]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_ARIA_LABEL' | translate\"\n [pTooltip]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS_TOOLTIP' | translate\"\n tooltipPosition=\"top\"\n ></button>\n }\n </div>\n </div>\n <div class=\"text-base font-light my-1\">\n <ng-container\n [ngTemplateOutlet]=\"_listItemSubtitleLines ? _listItemSubtitleLines : defaultListItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </div>\n <div class=\"flex flex-wrap\">\n @for (col of getFilteredColumns(); 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 ? _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"] }]
|
|
2197
2299
|
}], ctorParameters: () => [], propDecorators: { titleLineId: [{
|
|
2198
2300
|
type: Input
|
|
2199
2301
|
}], subtitleLineIds: [{
|
|
@@ -2208,8 +2310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2208
2310
|
type: Input
|
|
2209
2311
|
}], pageSize: [{
|
|
2210
2312
|
type: Input
|
|
2211
|
-
}], showAllOption: [{
|
|
2212
|
-
type: Input
|
|
2213
2313
|
}], emptyResultsMessage: [{
|
|
2214
2314
|
type: Input
|
|
2215
2315
|
}], fallbackImage: [{
|
|
@@ -2302,11 +2402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2302
2402
|
}], relativeDateListValueChildTemplate: [{
|
|
2303
2403
|
type: ContentChild,
|
|
2304
2404
|
args: ['relativeDateListValue']
|
|
2305
|
-
}], customListValueTemplate: [{
|
|
2306
|
-
type: Input
|
|
2307
|
-
}], customListValueChildTemplate: [{
|
|
2308
|
-
type: ContentChild,
|
|
2309
|
-
args: ['customListValue']
|
|
2310
2405
|
}], stringListValueTemplate: [{
|
|
2311
2406
|
type: Input
|
|
2312
2407
|
}], stringListValueChildTemplate: [{
|
|
@@ -2415,10 +2510,10 @@ class DataListGridSortingComponent {
|
|
|
2415
2510
|
return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TOOLTIP';
|
|
2416
2511
|
}
|
|
2417
2512
|
}
|
|
2418
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
2513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DataListGridSortingComponent, isStandalone: false, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, 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 >\n <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem>\n {{ item?.columnName ? (item.columnName | translate) : ''}}\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 [pTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>\n", 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", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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" }] }); }
|
|
2420
2515
|
}
|
|
2421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
|
|
2422
2517
|
type: Component,
|
|
2423
2518
|
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 >\n <ng-template let-item #item> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item #selectedItem>\n {{ item?.columnName ? (item.columnName | translate) : ''}}\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 [pTooltip]=\"(sortIconTitle() | translate)\"\n tooltipPosition=\"top\"\n [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}:host ::ng-deep .p-select{min-width:12rem}\n"] }]
|
|
2424
2519
|
}], propDecorators: { columns: [{
|
|
@@ -2512,10 +2607,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2512
2607
|
set pageSize(value) {
|
|
2513
2608
|
this._pageSize$.next(value);
|
|
2514
2609
|
}
|
|
2515
|
-
/**
|
|
2516
|
-
* @deprecated
|
|
2517
|
-
*/
|
|
2518
|
-
set showAllOption(value) { }
|
|
2519
2610
|
get totalRecordsOnServer() {
|
|
2520
2611
|
return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
|
|
2521
2612
|
}
|
|
@@ -2528,9 +2619,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2528
2619
|
get _numberCell() {
|
|
2529
2620
|
return this.numberCellTemplate || this.numberCellChildTemplate;
|
|
2530
2621
|
}
|
|
2531
|
-
get _customCell() {
|
|
2532
|
-
return this.customCellTemplate || this.customCellChildTemplate;
|
|
2533
|
-
}
|
|
2534
2622
|
get _dateCell() {
|
|
2535
2623
|
return this.dateCellTemplate || this.dateCellChildTemplate;
|
|
2536
2624
|
}
|
|
@@ -2549,9 +2637,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2549
2637
|
get _numberFilterCell() {
|
|
2550
2638
|
return this.numberFilterCellTemplate || this.numberFilterCellChildTemplate;
|
|
2551
2639
|
}
|
|
2552
|
-
get _customFilterCell() {
|
|
2553
|
-
return this.customFilterCellTemplate || this.customFilterCellChildTemplate;
|
|
2554
|
-
}
|
|
2555
2640
|
get _dateFilterCell() {
|
|
2556
2641
|
return this.dateFilterCellTemplate || this.dateFilterCellChildTemplate;
|
|
2557
2642
|
}
|
|
@@ -2669,7 +2754,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2669
2754
|
[ColumnType.NUMBER]: ['numberCell', 'numberTableCell', 'defaultNumberCell'],
|
|
2670
2755
|
[ColumnType.RELATIVE_DATE]: ['relativeDateCell', 'relativeDateTableCell', 'defaultRelativeDateCell'],
|
|
2671
2756
|
[ColumnType.TRANSLATION_KEY]: ['translationKeyCell', 'translationKeyTableCell', 'defaultTranslationKeyCell'],
|
|
2672
|
-
[ColumnType.CUSTOM]: ['customCell', 'customTableCell', 'defaultCustomCell'],
|
|
2673
2757
|
[ColumnType.STRING]: ['stringCell', 'stringTableCell', 'defaultStringCell'],
|
|
2674
2758
|
},
|
|
2675
2759
|
};
|
|
@@ -2699,13 +2783,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2699
2783
|
'translationKeyCell',
|
|
2700
2784
|
'translationKeyTableCell',
|
|
2701
2785
|
],
|
|
2702
|
-
[ColumnType.CUSTOM]: [
|
|
2703
|
-
'customFilterCell',
|
|
2704
|
-
'customTableFilterCell',
|
|
2705
|
-
'customCell',
|
|
2706
|
-
'customTableCell',
|
|
2707
|
-
'defaultCustomCell',
|
|
2708
|
-
],
|
|
2709
2786
|
[ColumnType.STRING]: [
|
|
2710
2787
|
'stringFilterCell',
|
|
2711
2788
|
'stringTableFilterCell',
|
|
@@ -2719,23 +2796,29 @@ class DataTableComponent extends DataSortBase {
|
|
|
2719
2796
|
[TemplateType.CELL]: this.cellTemplatesData,
|
|
2720
2797
|
[TemplateType.FILTERCELL]: this.filterTemplatesData,
|
|
2721
2798
|
};
|
|
2799
|
+
this.rowTrackByFunction = (item) => {
|
|
2800
|
+
return item.id;
|
|
2801
|
+
};
|
|
2722
2802
|
this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
|
|
2723
2803
|
this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val) => typeof val === 'number') ?? 50));
|
|
2724
2804
|
this.overflowActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => action.showAsOverflow)));
|
|
2725
2805
|
this.inlineActions$ = this._additionalActions$.pipe(map((actions) => actions.filter((action) => !action.showAsOverflow)));
|
|
2726
|
-
this.overflowMenuItems$ = combineLatest([this.overflowActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2806
|
+
this.overflowMenuItems$ = combineLatest([this.overflowActions$, this.currentMenuRow$]).pipe(mergeMap(([actions, row]) => this.translateService.get([...actions.map((a) => a.labelKey || '')]).pipe(switchMap((translations) => from(actions).pipe(mergeMap((a) => from(this.userService.hasPermission(a.permission)).pipe(map((hasPermission) => ({
|
|
2807
|
+
...a,
|
|
2808
|
+
hasPermission,
|
|
2809
|
+
})))), toArray(), map((actionsWithPermissions) => actionsWithPermissions
|
|
2810
|
+
.filter((a) => a.hasPermission)
|
|
2811
|
+
.map((a) => ({
|
|
2812
|
+
label: translations[a.labelKey || ''],
|
|
2813
|
+
icon: a.icon,
|
|
2814
|
+
styleClass: (a.classes || []).join(' '),
|
|
2815
|
+
disabled: a.disabled || (!!a.actionEnabledField && !this.fieldIsTruthy(row, a.actionEnabledField)),
|
|
2816
|
+
visible: !a.actionVisibleField || this.fieldIsTruthy(row, a.actionVisibleField),
|
|
2817
|
+
command: () => a.callback(row),
|
|
2818
|
+
}))))))));
|
|
2738
2819
|
this.rowSelectable = this.rowSelectable.bind(this);
|
|
2820
|
+
this.cachedOverflowActions$ = this.overflowActions$.pipe(shareReplay(1) // Cache the last emitted value
|
|
2821
|
+
);
|
|
2739
2822
|
}
|
|
2740
2823
|
ngOnInit() {
|
|
2741
2824
|
this.displayedRows$ = combineLatest([this._rows$, this._filters$, this._sortColumn$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([rows]) => this.flattenItems(rows)));
|
|
@@ -2758,7 +2841,9 @@ class DataTableComponent extends DataSortBase {
|
|
|
2758
2841
|
.filter((filter) => filter.columnId === currentFilterColumn?.id &&
|
|
2759
2842
|
(!currentFilterColumn.filterType || currentFilterColumn.filterType === FilterType.EQUALS))
|
|
2760
2843
|
.map((filter) => filter.value);
|
|
2761
|
-
const columnValues = rows
|
|
2844
|
+
const columnValues = rows
|
|
2845
|
+
.map((row) => row[currentFilterColumn?.id])
|
|
2846
|
+
.filter((value) => value !== null && value !== undefined && value !== '');
|
|
2762
2847
|
if (currentFilterColumn.columnType === ColumnType.DATE) {
|
|
2763
2848
|
return of({
|
|
2764
2849
|
options: columnValues.map((c) => ({
|
|
@@ -2775,7 +2860,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2775
2860
|
return translateObservable.pipe(map((translatedValues) => {
|
|
2776
2861
|
return Object.values(translatedValues)
|
|
2777
2862
|
.concat(currentFilters)
|
|
2778
|
-
.filter((value, index, self) => self.indexOf(value) === index && value
|
|
2863
|
+
.filter((value, index, self) => self.indexOf(value) === index && value !== null && value !== '')
|
|
2779
2864
|
.map((filterOption) => ({
|
|
2780
2865
|
label: filterOption,
|
|
2781
2866
|
value: filterOption,
|
|
@@ -2823,9 +2908,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2823
2908
|
case 'numberCell':
|
|
2824
2909
|
this.numberCellChildTemplate = item.template;
|
|
2825
2910
|
break;
|
|
2826
|
-
case 'customCell':
|
|
2827
|
-
this.customCellChildTemplate = item.template;
|
|
2828
|
-
break;
|
|
2829
2911
|
case 'dateCell':
|
|
2830
2912
|
this.dateCellChildTemplate = item.template;
|
|
2831
2913
|
break;
|
|
@@ -2844,9 +2926,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
2844
2926
|
case 'numberFilterCell':
|
|
2845
2927
|
this.numberFilterCellChildTemplate = item.template;
|
|
2846
2928
|
break;
|
|
2847
|
-
case 'customFilterCell':
|
|
2848
|
-
this.customFilterCellChildTemplate = item.template;
|
|
2849
|
-
break;
|
|
2850
2929
|
case 'dateFilterCell':
|
|
2851
2930
|
this.dateFilterCellChildTemplate = item.template;
|
|
2852
2931
|
break;
|
|
@@ -2996,16 +3075,25 @@ class DataTableComponent extends DataSortBase {
|
|
|
2996
3075
|
this.currentMenuRow$.next(row);
|
|
2997
3076
|
menu.toggle(event);
|
|
2998
3077
|
}
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3078
|
+
// A new Observable is created with each ChangeDetection.
|
|
3079
|
+
// The async pipe subscribes to it, triggering another ChangeDetection when a new value is emitted, which creates a loop.
|
|
3080
|
+
// To prevent this, cache the Observable by using shareReplay to avoid recreating it with every ChangeDetection.
|
|
3081
|
+
hasVisibleOverflowMenuItems(item) {
|
|
3082
|
+
if (this.cachedOverflowMenuItemsVisibility$) {
|
|
3083
|
+
return this.cachedOverflowMenuItemsVisibility$;
|
|
3084
|
+
}
|
|
3085
|
+
const overflowMenuItemsVisibility$ = this.overflowActions$.pipe(mergeMap((actions) => forkJoin(actions.map((a) => !a.actionVisibleField || this.fieldIsTruthy(item, a.actionVisibleField)
|
|
3086
|
+
? from(this.userService.hasPermission(a.permission))
|
|
3087
|
+
: of(false)))), map((results) => results.some((isVisible) => isVisible)));
|
|
3088
|
+
this.cachedOverflowMenuItemsVisibility$ = overflowMenuItemsVisibility$.pipe(shareReplay(1));
|
|
3089
|
+
return this.cachedOverflowMenuItemsVisibility$;
|
|
3002
3090
|
}
|
|
3003
3091
|
isDate(value) {
|
|
3004
3092
|
if (value instanceof Date) {
|
|
3005
3093
|
return true;
|
|
3006
3094
|
}
|
|
3007
3095
|
const d = new Date(value);
|
|
3008
|
-
return isValidDate
|
|
3096
|
+
return isValidDate(d);
|
|
3009
3097
|
}
|
|
3010
3098
|
getColumnTypeTemplate(templates, columnType, templateType) {
|
|
3011
3099
|
let template;
|
|
@@ -3024,9 +3112,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
3024
3112
|
case ColumnType.TRANSLATION_KEY:
|
|
3025
3113
|
template = this._translationKeyCell;
|
|
3026
3114
|
break;
|
|
3027
|
-
case ColumnType.CUSTOM:
|
|
3028
|
-
template = this._customCell;
|
|
3029
|
-
break;
|
|
3030
3115
|
default:
|
|
3031
3116
|
template = this._stringCell;
|
|
3032
3117
|
}
|
|
@@ -3045,9 +3130,6 @@ class DataTableComponent extends DataSortBase {
|
|
|
3045
3130
|
case ColumnType.TRANSLATION_KEY:
|
|
3046
3131
|
template = this._translationKeyFilterCell;
|
|
3047
3132
|
break;
|
|
3048
|
-
case ColumnType.CUSTOM:
|
|
3049
|
-
template = this._customFilterCell;
|
|
3050
|
-
break;
|
|
3051
3133
|
default:
|
|
3052
3134
|
template = this._stringFilterCell;
|
|
3053
3135
|
}
|
|
@@ -3083,12 +3165,12 @@ class DataTableComponent extends DataSortBase {
|
|
|
3083
3165
|
[column.id]: value.label,
|
|
3084
3166
|
};
|
|
3085
3167
|
}
|
|
3086
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3087
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0) {\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 }\n @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\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 }\n @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, 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 }\n @for (action of inlineActions$ | async; track action) {\n @if ((!action.actionVisibleField || fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n }\n }\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 ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0) {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) {\n @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n <p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n >\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\n </th>\n }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n @for (column of columns; track column) {\n @if (column.sortable || column.filterable) {\n <th scope=\"col\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n ></button>\n }\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) {\n @if (columnFilterTemplates$ | async; as columnFilterTemplates) {\n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 }\n }\n }\n @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 }\n }\n @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\n ></p-tableCheckbox>\n }\n </td>\n }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n }\n @for (column of columns; track column) {\n <td>\n @defer(on viewport){\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n }\n } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n }\n @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n}\n}\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=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </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}\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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "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]] }); }
|
|
3168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3169
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 <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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\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 ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\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\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\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$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\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]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\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 <ng-template #emptymessage>\n <tr>\n <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\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}\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: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$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", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "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]] }); }
|
|
3088
3170
|
}
|
|
3089
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3090
3172
|
type: Component,
|
|
3091
|
-
args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0) {\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 }\n @if (editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))) {\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 }\n @if (deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, 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 }\n @for (action of inlineActions$ | async; track action) {\n @if ((!action.actionVisibleField || fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n [attr.name]=\"'data-table-action-button'\"\n ></button>\n }\n }\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 ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0) {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) {\n @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n <p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n >\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\n </th>\n }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n @for (column of columns; track column) {\n @if (column.sortable || column.filterable) {\n <th scope=\"col\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n ></button>\n }\n @if (currentEqualFilterOptions$ | async; as equalFilterOptions) {\n @if (columnFilterTemplates$ | async; as columnFilterTemplates) {\n @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 }\n }\n }\n @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n <p-multiselect\n class=\"filterMultiSelect\"\n [options]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 }\n }\n @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n }\n </tr>\n </ng-template>\n <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\n ></p-tableCheckbox>\n }\n </td>\n }\n @if (actionColumnPosition === 'left';) {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n }\n @for (column of columns; track column) {\n <td>\n @defer(on viewport){\n @if (columnTemplates[column.id]) {\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n }\n } @placeholder {\n <p-skeleton width=\"3rem\" />\n }\n </td>\n }\n @if (actionColumnPosition === 'right';) {\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n }\n </tr>\n }\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n}\n}\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=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </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}\n"] }]
|
|
3173
|
+
args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 <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$ | async; track action) { @if ((!action.actionVisibleField ||\n fieldIsTruthy(rowObject, 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)=\"action.callback(rowObject)\"\n [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\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 ></button>\n }\n </div>\n </td>\n }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n @if (anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0)\n {\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 >\n {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n </th>\n }\n</ng-template>\n\n@if ((displayedPageSize$ | async); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n [value]=\"(displayedRows$ | async) ?? []\"\n responsiveLayout=\"scroll\"\n [paginator]=\"paginator\"\n [first]=\"page * displayedPageSize\"\n (onPage)=\"onPageChange($event)\"\n [rows]=\"displayedPageSize\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n [rowsPerPageOptions]=\"this.pageSizes ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n dataKey=\"id\"\n [rowTrackBy]=\"rowTrackByFunction\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [style]=\"tableStyle\"\n paginatorDropdownAppendTo=\"body\"\n [rowSelectable]=\"rowSelectable\"\n tableStyleClass=\"h-full\"\n>\n <ng-template #header>\n <tr style=\"vertical-align: top\">\n @if (selectionChangedObserved) {\n <th style=\"width: 4rem\" scope=\"col\">\n @if (allowSelectAll) {\n <p-tableHeaderCheckbox\n pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n ></p-tableHeaderCheckbox>\n }\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\">\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 [title]=\"(sortIconTitle(column.id) | translate)\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\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$ | async) || []\"\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 [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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]=\"truthyFilterOptions\"\n [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\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]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template #selecteditems let-value>\n <div\n class=\"pi\"\n [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[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 <ng-template #body let-rowObject>\n @if (columnTemplates) {\n <tr>\n @if (selectionChangedObserved) {\n <td>\n @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n <p-checkbox\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\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}\"\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]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\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 <ng-template #emptymessage>\n <tr>\n <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n </td>\n </tr>\n </ng-template>\n</p-table>\n} }\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}\n"] }]
|
|
3092
3174
|
}], ctorParameters: () => [], propDecorators: { rows: [{
|
|
3093
3175
|
type: Input
|
|
3094
3176
|
}], selectedRows: [{
|
|
@@ -3111,8 +3193,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3111
3193
|
type: Input
|
|
3112
3194
|
}], pageSize: [{
|
|
3113
3195
|
type: Input
|
|
3114
|
-
}], showAllOption: [{
|
|
3115
|
-
type: Input
|
|
3116
3196
|
}], emptyResultsMessage: [{
|
|
3117
3197
|
type: Input
|
|
3118
3198
|
}], name: [{
|
|
@@ -3161,11 +3241,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3161
3241
|
}], numberCellChildTemplate: [{
|
|
3162
3242
|
type: ContentChild,
|
|
3163
3243
|
args: ['numberCell']
|
|
3164
|
-
}], customCellTemplate: [{
|
|
3165
|
-
type: Input
|
|
3166
|
-
}], customCellChildTemplate: [{
|
|
3167
|
-
type: ContentChild,
|
|
3168
|
-
args: ['customCell']
|
|
3169
3244
|
}], dateCellTemplate: [{
|
|
3170
3245
|
type: Input
|
|
3171
3246
|
}], dateCellChildTemplate: [{
|
|
@@ -3196,11 +3271,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3196
3271
|
}], numberFilterCellChildTemplate: [{
|
|
3197
3272
|
type: ContentChild,
|
|
3198
3273
|
args: ['numberFilterCell']
|
|
3199
|
-
}], customFilterCellTemplate: [{
|
|
3200
|
-
type: Input
|
|
3201
|
-
}], customFilterCellChildTemplate: [{
|
|
3202
|
-
type: ContentChild,
|
|
3203
|
-
args: ['customFilterCell']
|
|
3204
3274
|
}], dateFilterCellTemplate: [{
|
|
3205
3275
|
type: Input
|
|
3206
3276
|
}], dateFilterCellChildTemplate: [{
|
|
@@ -3295,10 +3365,6 @@ class DataViewComponent {
|
|
|
3295
3365
|
this.actionColumnPosition = 'right';
|
|
3296
3366
|
this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
|
|
3297
3367
|
this.pageSizes = [10, 25, 50];
|
|
3298
|
-
/**
|
|
3299
|
-
* @deprecated
|
|
3300
|
-
*/
|
|
3301
|
-
this.showAllOption = false;
|
|
3302
3368
|
this.additionalActions = [];
|
|
3303
3369
|
this.filtered = new EventEmitter();
|
|
3304
3370
|
this.sorted = new EventEmitter();
|
|
@@ -3347,37 +3413,14 @@ class DataViewComponent {
|
|
|
3347
3413
|
get _numberTableCell() {
|
|
3348
3414
|
return this.numberTableCellTemplate || this.numberTableCellChildTemplate;
|
|
3349
3415
|
}
|
|
3350
|
-
get _customTableCell() {
|
|
3351
|
-
return this.customTableCellTemplate || this.customTableCellChildTemplate;
|
|
3352
|
-
}
|
|
3353
|
-
/**
|
|
3354
|
-
* @deprecated Will be replaced by dateTableCellTemplate
|
|
3355
|
-
*/
|
|
3356
|
-
get tableDateCellTemplate() {
|
|
3357
|
-
return this.dateTableCellTemplate;
|
|
3358
|
-
}
|
|
3359
|
-
set tableDateCellTemplate(value) {
|
|
3360
|
-
this.dateTableCellTemplate = value;
|
|
3361
|
-
}
|
|
3362
3416
|
get _dateTableCell() {
|
|
3363
|
-
return this.dateTableCellTemplate || this.dateTableCellChildTemplate
|
|
3417
|
+
return this.dateTableCellTemplate || this.dateTableCellChildTemplate;
|
|
3364
3418
|
}
|
|
3365
3419
|
get _tableCell() {
|
|
3366
3420
|
return this.tableCellTemplate || this.tableCellChildTemplate;
|
|
3367
3421
|
}
|
|
3368
|
-
/**
|
|
3369
|
-
* @deprecated Will be replaced by translationKeyTableCellTemplate
|
|
3370
|
-
*/
|
|
3371
|
-
get tableTranslationKeyCellTemplate() {
|
|
3372
|
-
return this.translationKeyTableCellTemplate;
|
|
3373
|
-
}
|
|
3374
|
-
set tableTranslationKeyCellTemplate(value) {
|
|
3375
|
-
this.translationKeyTableCellTemplate = value;
|
|
3376
|
-
}
|
|
3377
3422
|
get _translationKeyTableCell() {
|
|
3378
|
-
return
|
|
3379
|
-
this.translationKeyTableCellChildTemplate ||
|
|
3380
|
-
this.tableTranslationKeyCellChildTemplate);
|
|
3423
|
+
return this.translationKeyTableCellTemplate || this.translationKeyTableCellChildTemplate;
|
|
3381
3424
|
}
|
|
3382
3425
|
get _gridItemSubtitleLines() {
|
|
3383
3426
|
return this.gridItemSubtitleLinesTemplate || this.gridItemSubtitleLinesChildTemplate;
|
|
@@ -3391,19 +3434,8 @@ class DataViewComponent {
|
|
|
3391
3434
|
get _listItem() {
|
|
3392
3435
|
return this.listItemTemplate || this.listItemChildTemplate;
|
|
3393
3436
|
}
|
|
3394
|
-
/**
|
|
3395
|
-
* @deprecated Will be replaced by relativeDateTableCellTemplate
|
|
3396
|
-
*/
|
|
3397
|
-
get tableRelativeDateCellTemplate() {
|
|
3398
|
-
return this.relativeDateTableCellTemplate;
|
|
3399
|
-
}
|
|
3400
|
-
set tableRelativeDateCellTemplate(value) {
|
|
3401
|
-
this.relativeDateTableCellTemplate = value;
|
|
3402
|
-
}
|
|
3403
3437
|
get _relativeDateTableCell() {
|
|
3404
|
-
return
|
|
3405
|
-
this.relativeDateTableCellChildTemplate ||
|
|
3406
|
-
this.tableRelativeDateCellChildTemplate);
|
|
3438
|
+
return this.relativeDateTableCellTemplate || this.relativeDateTableCellChildTemplate;
|
|
3407
3439
|
}
|
|
3408
3440
|
get _listValue() {
|
|
3409
3441
|
return this.listValueTemplate || this.listValueChildTemplate;
|
|
@@ -3417,9 +3449,6 @@ class DataViewComponent {
|
|
|
3417
3449
|
get _relativeDateListValue() {
|
|
3418
3450
|
return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate;
|
|
3419
3451
|
}
|
|
3420
|
-
get _customListValue() {
|
|
3421
|
-
return this.customListValueTemplate || this.customListValueChildTemplate;
|
|
3422
|
-
}
|
|
3423
3452
|
get _stringListValue() {
|
|
3424
3453
|
return this.stringListValueTemplate || this.stringListValueChildTemplate;
|
|
3425
3454
|
}
|
|
@@ -3444,9 +3473,6 @@ class DataViewComponent {
|
|
|
3444
3473
|
get _numberTableFilterCell() {
|
|
3445
3474
|
return this.numberTableFilterCellTemplate || this.numberTableFilterCellChildTemplate;
|
|
3446
3475
|
}
|
|
3447
|
-
get _customTableFilterCell() {
|
|
3448
|
-
return this.customTableFilterCellTemplate || this.customTableFilterCellChildTemplate;
|
|
3449
|
-
}
|
|
3450
3476
|
set parentTemplates(value) {
|
|
3451
3477
|
this.parentTemplates$.next(value);
|
|
3452
3478
|
}
|
|
@@ -3493,21 +3519,12 @@ class DataViewComponent {
|
|
|
3493
3519
|
case 'numberTableCell':
|
|
3494
3520
|
this.numberTableCellChildTemplate = item.template;
|
|
3495
3521
|
break;
|
|
3496
|
-
case 'customTableCell':
|
|
3497
|
-
this.customTableCellChildTemplate = item.template;
|
|
3498
|
-
break;
|
|
3499
|
-
case 'tableDateCell':
|
|
3500
|
-
this.tableDateCellChildTemplate = item.template;
|
|
3501
|
-
break;
|
|
3502
3522
|
case 'dateTableCell':
|
|
3503
3523
|
this.dateTableCellChildTemplate = item.template;
|
|
3504
3524
|
break;
|
|
3505
3525
|
case 'tableCell':
|
|
3506
3526
|
this.tableCellChildTemplate = item.template;
|
|
3507
3527
|
break;
|
|
3508
|
-
case 'tableTranslationKeyCell':
|
|
3509
|
-
this.tableTranslationKeyCellChildTemplate = item.template;
|
|
3510
|
-
break;
|
|
3511
3528
|
case 'translationKeyTableCell':
|
|
3512
3529
|
this.translationKeyTableCellChildTemplate = item.template;
|
|
3513
3530
|
break;
|
|
@@ -3523,9 +3540,6 @@ class DataViewComponent {
|
|
|
3523
3540
|
case 'listItem':
|
|
3524
3541
|
this.listItemChildTemplate = item.template;
|
|
3525
3542
|
break;
|
|
3526
|
-
case 'tableRelativeDateCell':
|
|
3527
|
-
this.tableRelativeDateCellChildTemplate = item.template;
|
|
3528
|
-
break;
|
|
3529
3543
|
case 'relativeDateTableCell':
|
|
3530
3544
|
this.relativeDateTableCellChildTemplate = item.template;
|
|
3531
3545
|
break;
|
|
@@ -3541,9 +3555,6 @@ class DataViewComponent {
|
|
|
3541
3555
|
case 'relativeDateListValue':
|
|
3542
3556
|
this.relativeDateListValueChildTemplate = item.template;
|
|
3543
3557
|
break;
|
|
3544
|
-
case 'customListValue':
|
|
3545
|
-
this.customListValueChildTemplate = item.template;
|
|
3546
|
-
break;
|
|
3547
3558
|
case 'stringListValue':
|
|
3548
3559
|
this.stringListValueChildTemplate = item.template;
|
|
3549
3560
|
break;
|
|
@@ -3568,9 +3579,6 @@ class DataViewComponent {
|
|
|
3568
3579
|
case 'numberTableFilterCell':
|
|
3569
3580
|
this.numberTableFilterCellChildTemplate = item.template;
|
|
3570
3581
|
break;
|
|
3571
|
-
case 'customTableFilterCell':
|
|
3572
|
-
this.customTableFilterCellChildTemplate = item.template;
|
|
3573
|
-
break;
|
|
3574
3582
|
}
|
|
3575
3583
|
});
|
|
3576
3584
|
}
|
|
@@ -3678,12 +3686,12 @@ class DataViewComponent {
|
|
|
3678
3686
|
this.pageSize = event;
|
|
3679
3687
|
this.pageSizeChanged.emit(event);
|
|
3680
3688
|
}
|
|
3681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3682
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", customTableCellTemplate: "customTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", customListValueTemplate: "customListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", customTableFilterCellTemplate: "customTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCellChildTemplate", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "tableDateCellChildTemplate", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "tableRelativeDateCellChildTemplate", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValueChildTemplate", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCellChildTemplate", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: 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 ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #translationKeyListValue 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 >\n }</ng-template>\n <ng-template #numberListValue 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 >\n }</ng-template>\n <ng-template #relativeDateListValue 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 >\n }</ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #stringListValue 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 >\n }</ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n </div>\n }\n\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 ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell 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 >\n }</ng-template>\n <ng-template #numberCell 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 >\n }</ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #relativeDateCell 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 >\n }</ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #translationKeyCell 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 >\n }</ng-template>\n <ng-template #stringFilterCell 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 >\n }</ng-template>\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell 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 #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCell 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 #relativeDateFilterCell 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 #translationKeyFilterCell 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", "pageSizes", "pageSize", "showAllOption", "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", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3690
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", data: "data", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", layout: "layout", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortField: "sortField", sortDirection: "sortDirection", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", selectedRows: "selectedRows", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", paginator: "paginator", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", stringTableCellTemplate: "stringTableCellTemplate", numberTableCellTemplate: "numberTableCellTemplate", dateTableCellTemplate: "dateTableCellTemplate", tableCellTemplate: "tableCellTemplate", translationKeyTableCellTemplate: "translationKeyTableCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", relativeDateTableCellTemplate: "relativeDateTableCellTemplate", listValueTemplate: "listValueTemplate", translationKeyListValueTemplate: "translationKeyListValueTemplate", numberListValueTemplate: "numberListValueTemplate", relativeDateListValueTemplate: "relativeDateListValueTemplate", stringListValueTemplate: "stringListValueTemplate", dateListValueTemplate: "dateListValueTemplate", tableFilterCellTemplate: "tableFilterCellTemplate", dateTableFilterCellTemplate: "dateTableFilterCellTemplate", relativeDateTableFilterCellTemplate: "relativeDateTableFilterCellTemplate", translationKeyTableFilterCellTemplate: "translationKeyTableFilterCellTemplate", stringTableFilterCellTemplate: "stringTableFilterCellTemplate", numberTableFilterCellTemplate: "numberTableFilterCellTemplate", additionalActions: "additionalActions", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "listGrid", first: true, predicate: DataListGridComponent, descendants: true }, { propertyName: "dataTable", first: true, predicate: DataTableComponent, descendants: 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 ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValue 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 #translationKeyListValue 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 #numberListValue 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 #relativeDateListValue 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 #stringListValue 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 #dateListValue 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 ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell 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 #numberCell 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 #dateCell 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 #relativeDateCell 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 #cell 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 #translationKeyCell 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 #stringFilterCell 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 #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell 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 #numberFilterCell 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 #relativeDateFilterCell 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 #translationKeyFilterCell 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", "pageSizes", "pageSize", "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: ["viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
3683
3691
|
}
|
|
3684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataViewComponent, decorators: [{
|
|
3685
3693
|
type: Component,
|
|
3686
|
-
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 ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n >\n }</ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_listValue) {\n <ng-container\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #translationKeyListValue 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 >\n }</ng-template>\n <ng-template #numberListValue 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 >\n }</ng-template>\n <ng-template #relativeDateListValue 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 >\n }</ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #stringListValue 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 >\n }</ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateListValue) {\n <ng-container\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n </div>\n }\n\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 ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [customCellTemplate]=\"_customTableCell ? customCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [customFilterCellTemplate]=\"_customTableFilterCell ? customFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell 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 >\n }</ng-template>\n <ng-template #numberCell 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 >\n }</ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_dateTableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #relativeDateCell 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 >\n }</ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n >\n }</ng-template>\n <ng-template #translationKeyCell 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 >\n }</ng-template>\n <ng-template #stringFilterCell 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 >\n }</ng-template>\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell 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 #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #numberFilterCell 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 #relativeDateFilterCell 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 #translationKeyFilterCell 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" }]
|
|
3694
|
+
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 ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n >\n </ocx-data-list-grid>\n <ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n >\n <ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n >\n <ng-template #listValue 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 #translationKeyListValue 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 #numberListValue 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 #relativeDateListValue 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 #stringListValue 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 #dateListValue 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 ? stringCell : undefined\"\n [numberCellTemplate]=\"_numberTableCell ? numberCell : undefined\"\n [dateCellTemplate]=\"_dateTableCell ? dateCell : undefined\"\n [relativeDateCellTemplate]=\"_relativeDateTableCell ? relativeDateCell : undefined\"\n [cellTemplate]=\"_tableCell ? cell : undefined\"\n [translationKeyCellTemplate]=\"_translationKeyTableCell ? translationKeyCell : undefined\"\n [filterCellTemplate]=\"_tableFilterCell ? filterCell : undefined\"\n [dateFilterCellTemplate]=\"_dateTableFilterCell ? dateFilterCell : undefined\"\n [numberFilterCellTemplate]=\"_numberTableFilterCell ? numberFilterCell : undefined\"\n [stringFilterCellTemplate]=\"_stringTableFilterCell ? stringFilterCell : undefined\"\n [relativeDateFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateFilterCell : undefined\"\n [translationKeyFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyFilterCell : undefined\"\n (sorted)=\"sorting($event)\"\n (filtered)=\"filtering($event)\"\n [totalRecordsOnServer]=\"totalRecordsOnServer\"\n [currentPageShowingKey]=\"currentPageShowingKey\"\n [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\n [parentTemplates]=\"templatesForChildren$ | async\"\n [allowSelectAll]=\"tableAllowSelectAll\"\n [selectionEnabledField]=\"tableSelectionEnabledField\"\n >\n </ocx-data-table>\n <ng-template #stringCell 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 #numberCell 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 #dateCell 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 #relativeDateCell 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 #cell 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 #translationKeyCell 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 #stringFilterCell 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 #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }\n </ng-template>\n <ng-template #dateFilterCell 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 #numberFilterCell 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 #relativeDateFilterCell 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 #translationKeyFilterCell 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" }]
|
|
3687
3695
|
}], propDecorators: { listGrid: [{
|
|
3688
3696
|
type: ViewChild,
|
|
3689
3697
|
args: [DataListGridComponent]
|
|
@@ -3764,8 +3772,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3764
3772
|
type: Input
|
|
3765
3773
|
}], pageSize: [{
|
|
3766
3774
|
type: Input
|
|
3767
|
-
}], showAllOption: [{
|
|
3768
|
-
type: Input
|
|
3769
3775
|
}], stringTableCellTemplate: [{
|
|
3770
3776
|
type: Input
|
|
3771
3777
|
}], stringTableCellChildTemplate: [{
|
|
@@ -3776,18 +3782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3776
3782
|
}], numberTableCellChildTemplate: [{
|
|
3777
3783
|
type: ContentChild,
|
|
3778
3784
|
args: ['numberTableCell']
|
|
3779
|
-
}], customTableCellTemplate: [{
|
|
3780
|
-
type: Input
|
|
3781
|
-
}], customTableCellChildTemplate: [{
|
|
3782
|
-
type: ContentChild,
|
|
3783
|
-
args: ['customTableCell']
|
|
3784
3785
|
}], dateTableCellTemplate: [{
|
|
3785
3786
|
type: Input
|
|
3786
|
-
}], tableDateCellTemplate: [{
|
|
3787
|
-
type: Input
|
|
3788
|
-
}], tableDateCellChildTemplate: [{
|
|
3789
|
-
type: ContentChild,
|
|
3790
|
-
args: ['tableDateCell']
|
|
3791
3787
|
}], dateTableCellChildTemplate: [{
|
|
3792
3788
|
type: ContentChild,
|
|
3793
3789
|
args: ['dateTableCell']
|
|
@@ -3798,11 +3794,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3798
3794
|
args: ['tableCell']
|
|
3799
3795
|
}], translationKeyTableCellTemplate: [{
|
|
3800
3796
|
type: Input
|
|
3801
|
-
}], tableTranslationKeyCellTemplate: [{
|
|
3802
|
-
type: Input
|
|
3803
|
-
}], tableTranslationKeyCellChildTemplate: [{
|
|
3804
|
-
type: ContentChild,
|
|
3805
|
-
args: ['tableTranslationKeyCell']
|
|
3806
3797
|
}], translationKeyTableCellChildTemplate: [{
|
|
3807
3798
|
type: ContentChild,
|
|
3808
3799
|
args: ['translationKeyTableCell']
|
|
@@ -3828,11 +3819,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3828
3819
|
args: ['listItem']
|
|
3829
3820
|
}], relativeDateTableCellTemplate: [{
|
|
3830
3821
|
type: Input
|
|
3831
|
-
}], tableRelativeDateCellTemplate: [{
|
|
3832
|
-
type: Input
|
|
3833
|
-
}], tableRelativeDateCellChildTemplate: [{
|
|
3834
|
-
type: ContentChild,
|
|
3835
|
-
args: ['tableRelativeDateCell']
|
|
3836
3822
|
}], relativeDateTableCellChildTemplate: [{
|
|
3837
3823
|
type: ContentChild,
|
|
3838
3824
|
args: ['relativeDateTableCell']
|
|
@@ -3856,11 +3842,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3856
3842
|
}], relativeDateListValueChildTemplate: [{
|
|
3857
3843
|
type: ContentChild,
|
|
3858
3844
|
args: ['relativeDateListValue']
|
|
3859
|
-
}], customListValueTemplate: [{
|
|
3860
|
-
type: Input
|
|
3861
|
-
}], customListValueChildTemplate: [{
|
|
3862
|
-
type: ContentChild,
|
|
3863
|
-
args: ['customListValue']
|
|
3864
3845
|
}], stringListValueTemplate: [{
|
|
3865
3846
|
type: Input
|
|
3866
3847
|
}], stringListValueChildTemplate: [{
|
|
@@ -3901,11 +3882,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
3901
3882
|
}], numberTableFilterCellChildTemplate: [{
|
|
3902
3883
|
type: ContentChild,
|
|
3903
3884
|
args: ['numberTableFilterCell']
|
|
3904
|
-
}], customTableFilterCellTemplate: [{
|
|
3905
|
-
type: Input
|
|
3906
|
-
}], customTableFilterCellChildTemplate: [{
|
|
3907
|
-
type: ContentChild,
|
|
3908
|
-
args: ['customTableFilterCell']
|
|
3909
3885
|
}], additionalActions: [{
|
|
3910
3886
|
type: Input
|
|
3911
3887
|
}], filtered: [{
|
|
@@ -4094,12 +4070,12 @@ class DiagramComponent {
|
|
|
4094
4070
|
activeDiagramType: event.value.layout,
|
|
4095
4071
|
});
|
|
4096
4072
|
}
|
|
4097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
4073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DiagramComponent, isStandalone: false, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", fillMissingColors: "fillMissingColors", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (this.data) {\n @if (shownDiagramTypes.length > 1) {\n <div class=\"flex justify-content-center pb-2\">\n <p-selectbutton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n [allowEmpty]=\"false\"\n >\n <ng-template #item let-item>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.tooltipKey | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></i>\n <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n </ng-template>\n </p-selectbutton>\n </div>\n }\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n}\n\n@if (!this.data) {\n <div class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n </div>\n}\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "component", type: i1$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i2$4.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i3$3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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" }] }); }
|
|
4099
4075
|
}
|
|
4100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
4101
4077
|
type: Component,
|
|
4102
|
-
args: [{ standalone: false, selector: 'ocx-diagram', template: "@if (this.data) {\n @if (shownDiagramTypes.length > 1) {\n <div class=\"flex justify-content-center pb-2\">\n <p-selectbutton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n [allowEmpty]=\"false\"\n >\n <ng-template #item let-item>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.
|
|
4078
|
+
args: [{ standalone: false, selector: 'ocx-diagram', template: "@if (this.data) {\n @if (shownDiagramTypes.length > 1) {\n <div class=\"flex justify-content-center pb-2\">\n <p-selectbutton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"id\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n [allowEmpty]=\"false\"\n >\n <ng-template #item let-item>\n <i\n [class]=\"item.icon\"\n [pTooltip]=\"item.tooltipKey | translate\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n ></i>\n <label style=\"display: none\" id=\"{{item.id}}\"> {{item.label ? item.label : item.labelKey | translate}} </label>\n </ng-template>\n </p-selectbutton>\n </div>\n }\n <div class=\"w-full flex justify-content-center\">\n <p-chart\n id=\"diagram\"\n [type]=\"chartType\"\n [data]=\"chartData\"\n [responsive]=\"false\"\n [options]=\"chartOptions\"\n (onDataSelect)=\"dataClicked($event)\"\n [ariaLabel]=\"(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}\"\n ></p-chart>\n </div>\n <div class=\"w-full flex justify-content-center mt-2 sumKey\">\n <p class=\"text-md font-medium text-700\">\n <span name=\"sumLabel\"> {{ sumKey | translate }}</span> : <span name=\"amountOfData\">{{ amountOfData}}</span>\n </p>\n </div>\n}\n\n@if (!this.data) {\n <div class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n </div>\n}\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
|
|
4103
4079
|
}], propDecorators: { data: [{
|
|
4104
4080
|
type: Input
|
|
4105
4081
|
}], sumKey: [{
|
|
@@ -4171,7 +4147,6 @@ class FilterViewComponent {
|
|
|
4171
4147
|
'translationKeyTableCell',
|
|
4172
4148
|
'defaultTranslationKeyValue',
|
|
4173
4149
|
],
|
|
4174
|
-
[ColumnType.CUSTOM]: ['customFilterChipValue', 'customTableFilterCell', 'customTableCell', 'defaultCustomValue'],
|
|
4175
4150
|
[ColumnType.STRING]: ['stringFilterChipValue', 'stringTableFilterCell', 'stringTableCell', 'defaultStringValue'],
|
|
4176
4151
|
};
|
|
4177
4152
|
this.chipTemplates = {};
|
|
@@ -4191,7 +4166,6 @@ class FilterViewComponent {
|
|
|
4191
4166
|
'translationKeyTableCell',
|
|
4192
4167
|
'defaultTranslationKeyValue',
|
|
4193
4168
|
],
|
|
4194
|
-
[ColumnType.CUSTOM]: ['customFilterViewCell', 'customTableFilterCell', 'customTableCell', 'defaultCustomValue'],
|
|
4195
4169
|
[ColumnType.STRING]: ['stringFilterViewCell', 'stringTableFilterCell', 'stringTableCell', 'defaultStringValue'],
|
|
4196
4170
|
};
|
|
4197
4171
|
this.tableTemplates = {};
|
|
@@ -4331,10 +4305,10 @@ class FilterViewComponent {
|
|
|
4331
4305
|
[row['valueColumnId']]: row['value'],
|
|
4332
4306
|
};
|
|
4333
4307
|
}
|
|
4334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; 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 pTooltip=\"{{ '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 (_fitlerViewNoSelection) {\n <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </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 { @if (columns$ | async; as columns) {\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 #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\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 pTooltip=\"{{ '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$ | async) ?? []\"\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)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$5.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "showAllOption", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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" }] }); }
|
|
4308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; 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 pTooltip=\"{{ '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 (_fitlerViewNoSelection) {\n <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </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 { @if (columns$ | async; as columns) {\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 #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\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 pTooltip=\"{{ '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$ | async) ?? []\"\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)}\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", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: 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", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { 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" }] }); }
|
|
4336
4310
|
}
|
|
4337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterViewComponent, decorators: [{
|
|
4338
4312
|
type: Component,
|
|
4339
4313
|
args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (columns$ | async; as columns) { @if (filters$ | async; 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 pTooltip=\"{{ '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 (_fitlerViewNoSelection) {\n <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </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 { @if (columns$ | async; as columns) {\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 #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\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 pTooltip=\"{{ '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$ | async) ?? []\"\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)}\n"] }]
|
|
4340
4314
|
}], propDecorators: { filters: [{
|
|
@@ -4388,15 +4362,6 @@ class GroupByCountDiagramComponent {
|
|
|
4388
4362
|
this.diagramTypeChanged = new EventEmitter();
|
|
4389
4363
|
this.componentStateChanged = new EventEmitter();
|
|
4390
4364
|
}
|
|
4391
|
-
/**
|
|
4392
|
-
* @deprecated Will be replaced by diagramType
|
|
4393
|
-
*/
|
|
4394
|
-
get type() {
|
|
4395
|
-
return this.diagramType;
|
|
4396
|
-
}
|
|
4397
|
-
set type(value) {
|
|
4398
|
-
this.diagramType = value;
|
|
4399
|
-
}
|
|
4400
4365
|
get data() {
|
|
4401
4366
|
return this._data$.getValue();
|
|
4402
4367
|
}
|
|
@@ -4458,10 +4423,10 @@ class GroupByCountDiagramComponent {
|
|
|
4458
4423
|
activeDiagramType: newDiagramType,
|
|
4459
4424
|
});
|
|
4460
4425
|
}
|
|
4461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
4426
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GroupByCountDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4427
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GroupByCountDiagramComponent, isStandalone: false, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", fillMissingColors: "fillMissingColors", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column", colors: "colors" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [fillMissingColors]=\"fillMissingColors\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "fillMissingColors", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4463
4428
|
}
|
|
4464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
|
|
4465
4430
|
type: Component,
|
|
4466
4431
|
args: [{ standalone: false, selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [fillMissingColors]=\"fillMissingColors\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
|
|
4467
4432
|
}], propDecorators: { sumKey: [{
|
|
@@ -4470,8 +4435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
4470
4435
|
type: Input
|
|
4471
4436
|
}], fillMissingColors: [{
|
|
4472
4437
|
type: Input
|
|
4473
|
-
}], type: [{
|
|
4474
|
-
type: Input
|
|
4475
4438
|
}], supportedDiagramTypes: [{
|
|
4476
4439
|
type: Input
|
|
4477
4440
|
}], data: [{
|
|
@@ -4506,17 +4469,6 @@ class InteractiveDataViewComponent {
|
|
|
4506
4469
|
set displayedColumnKeys(value) {
|
|
4507
4470
|
this.displayedColumnKeys$.next(value);
|
|
4508
4471
|
}
|
|
4509
|
-
/**
|
|
4510
|
-
* @deprecated Use `displayedColumnKeys` and pass in column ids instead of `DataTableColumn` objects
|
|
4511
|
-
*/
|
|
4512
|
-
get displayedColumns() {
|
|
4513
|
-
return (this.displayedColumnKeys
|
|
4514
|
-
.map((d) => this.columns.find((c) => c.id === d))
|
|
4515
|
-
.filter((d) => d) ?? []);
|
|
4516
|
-
}
|
|
4517
|
-
set displayedColumns(value) {
|
|
4518
|
-
this.displayedColumnKeys$.next(value.map((d) => d.id));
|
|
4519
|
-
}
|
|
4520
4472
|
set templates(value) {
|
|
4521
4473
|
this.templates$.next(value);
|
|
4522
4474
|
}
|
|
@@ -4548,24 +4500,12 @@ class InteractiveDataViewComponent {
|
|
|
4548
4500
|
get _numberTableCell() {
|
|
4549
4501
|
return this.numberTableCell;
|
|
4550
4502
|
}
|
|
4551
|
-
get _customTableCell() {
|
|
4552
|
-
return this.customTableCell;
|
|
4553
|
-
}
|
|
4554
|
-
get _tableDateCell() {
|
|
4555
|
-
return this.dateTableCell ?? this.tableDateCell;
|
|
4556
|
-
}
|
|
4557
4503
|
get _dateTableCell() {
|
|
4558
4504
|
return this.dateTableCell;
|
|
4559
4505
|
}
|
|
4560
|
-
get _tableRelativeDateCell() {
|
|
4561
|
-
return this.relativeDateTableCell ?? this.tableRelativeDateCell;
|
|
4562
|
-
}
|
|
4563
4506
|
get _relativeDateTableCell() {
|
|
4564
4507
|
return this.relativeDateTableCell;
|
|
4565
4508
|
}
|
|
4566
|
-
get _tableTranslationKeyCell() {
|
|
4567
|
-
return this.translationKeyTableCell ?? this.tableTranslationKeyCell;
|
|
4568
|
-
}
|
|
4569
4509
|
get _translationKeyTableCell() {
|
|
4570
4510
|
return this.translationKeyTableCell;
|
|
4571
4511
|
}
|
|
@@ -4587,9 +4527,6 @@ class InteractiveDataViewComponent {
|
|
|
4587
4527
|
get _relativeDateListValue() {
|
|
4588
4528
|
return this.relativeDateListValue;
|
|
4589
4529
|
}
|
|
4590
|
-
get _customListValue() {
|
|
4591
|
-
return this.customListValue;
|
|
4592
|
-
}
|
|
4593
4530
|
get _stringListValue() {
|
|
4594
4531
|
return this.stringListValue;
|
|
4595
4532
|
}
|
|
@@ -4614,9 +4551,6 @@ class InteractiveDataViewComponent {
|
|
|
4614
4551
|
get _numberTableFilterCell() {
|
|
4615
4552
|
return this.numberTableFilterCell;
|
|
4616
4553
|
}
|
|
4617
|
-
get _customTableFilterCell() {
|
|
4618
|
-
return this.customTableFilterCell;
|
|
4619
|
-
}
|
|
4620
4554
|
get data() {
|
|
4621
4555
|
return this._data;
|
|
4622
4556
|
}
|
|
@@ -4648,10 +4582,6 @@ class InteractiveDataViewComponent {
|
|
|
4648
4582
|
"NONE" /* DataSortDirection.NONE */,
|
|
4649
4583
|
];
|
|
4650
4584
|
this.pageSizes = [10, 25, 50];
|
|
4651
|
-
/**
|
|
4652
|
-
* @deprecated
|
|
4653
|
-
*/
|
|
4654
|
-
this.showAllOption = false;
|
|
4655
4585
|
this.layout = 'table';
|
|
4656
4586
|
this.defaultGroupKey = '';
|
|
4657
4587
|
this.customGroupKey = 'OCX_INTERACTIVE_DATA_VIEW.CUSTOM_GROUP';
|
|
@@ -4679,8 +4609,6 @@ class InteractiveDataViewComponent {
|
|
|
4679
4609
|
this.viewItem = new EventEmitter();
|
|
4680
4610
|
this.editItem = new EventEmitter();
|
|
4681
4611
|
this.dataViewLayoutChange = new EventEmitter();
|
|
4682
|
-
// TODO: Remove following line once displayedColumns (deprecated) has been removed
|
|
4683
|
-
this.displayedColumnsChange = new EventEmitter();
|
|
4684
4612
|
this.displayedColumnKeysChange = new EventEmitter();
|
|
4685
4613
|
this.selectionChanged = new EventEmitter();
|
|
4686
4614
|
this.pageChanged = new EventEmitter();
|
|
@@ -4694,15 +4622,12 @@ class InteractiveDataViewComponent {
|
|
|
4694
4622
|
.isSomeComponentDefinedForSlot(this.columnGroupSlotName)
|
|
4695
4623
|
.pipe(startWith(true));
|
|
4696
4624
|
this.groupSelectionChangedSlotEmitter.subscribe((event) => {
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
};
|
|
4702
|
-
}
|
|
4625
|
+
event ??= {
|
|
4626
|
+
activeColumns: this.getDisplayedColumns(),
|
|
4627
|
+
groupKey: this.selectedGroupKey ?? this.defaultGroupKey,
|
|
4628
|
+
};
|
|
4703
4629
|
this.displayedColumnKeys$.next(event.activeColumns.map((col) => col.id));
|
|
4704
4630
|
this.selectedGroupKey$.next(event.groupKey);
|
|
4705
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
4706
4631
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
4707
4632
|
this.columnGroupSelectionComponentState$.next({
|
|
4708
4633
|
activeColumnGroupKey: event.groupKey,
|
|
@@ -4722,9 +4647,6 @@ class InteractiveDataViewComponent {
|
|
|
4722
4647
|
}
|
|
4723
4648
|
ngOnInit() {
|
|
4724
4649
|
this.selectedGroupKey = this.defaultGroupKey;
|
|
4725
|
-
if (!this.displayedColumns || this.displayedColumns.length === 0) {
|
|
4726
|
-
this.displayedColumnKeys = this.columns.map((column) => column.id);
|
|
4727
|
-
}
|
|
4728
4650
|
if (this.defaultGroupKey && this.defaultGroupKey !== this.customGroupKey) {
|
|
4729
4651
|
this.displayedColumnKeys = this.columns
|
|
4730
4652
|
.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey))
|
|
@@ -4732,7 +4654,6 @@ class InteractiveDataViewComponent {
|
|
|
4732
4654
|
}
|
|
4733
4655
|
this.displayedColumns$ = this.displayedColumnKeys$.pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => curr[i] === v)), map((columnKeys) => columnKeys.map((key) => this.columns.find((col) => col.id === key)).filter((d) => d) ??
|
|
4734
4656
|
[]));
|
|
4735
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
4736
4657
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
4737
4658
|
if (!this.groupSelectionNoGroupSelectedKey) {
|
|
4738
4659
|
this.groupSelectionNoGroupSelectedKey = 'OCX_INTERACTIVE_DATA_VIEW.NO_GROUP_SELECTED';
|
|
@@ -4747,14 +4668,14 @@ class InteractiveDataViewComponent {
|
|
|
4747
4668
|
else {
|
|
4748
4669
|
columnGroupSelectionComponentState$ = columnGroupSelectionComponentState$.pipe(startWith({
|
|
4749
4670
|
activeColumnGroupKey: this.selectedGroupKey,
|
|
4750
|
-
displayedColumns: this.
|
|
4671
|
+
displayedColumns: this.getDisplayedColumns(),
|
|
4751
4672
|
}));
|
|
4752
4673
|
customGroupColumnSelectorComponentState$ = customGroupColumnSelectorComponentState$.pipe(startWith({
|
|
4753
4674
|
actionColumnConfig: {
|
|
4754
4675
|
frozen: this.frozenActionColumn,
|
|
4755
4676
|
position: this.actionColumnPosition,
|
|
4756
4677
|
},
|
|
4757
|
-
displayedColumns: this.
|
|
4678
|
+
displayedColumns: this.getDisplayedColumns(),
|
|
4758
4679
|
activeColumnGroupKey: this.selectedGroupKey,
|
|
4759
4680
|
}));
|
|
4760
4681
|
}
|
|
@@ -4783,91 +4704,73 @@ class InteractiveDataViewComponent {
|
|
|
4783
4704
|
this.templates$.value?.forEach((item) => {
|
|
4784
4705
|
switch (item.getType()) {
|
|
4785
4706
|
case 'tableCell':
|
|
4786
|
-
this.
|
|
4787
|
-
break;
|
|
4788
|
-
case 'tableDateCell':
|
|
4789
|
-
this.tableDateCell = item.template;
|
|
4707
|
+
this.primeNgTableCell = item.template;
|
|
4790
4708
|
break;
|
|
4791
4709
|
case 'dateTableCell':
|
|
4792
|
-
this.
|
|
4793
|
-
break;
|
|
4794
|
-
case 'tableRelativeDateCell':
|
|
4795
|
-
this.tableRelativeDateCell = item.template;
|
|
4710
|
+
this.primeNgDateTableCell = item.template;
|
|
4796
4711
|
break;
|
|
4797
4712
|
case 'relativeDateTableCell':
|
|
4798
|
-
this.
|
|
4799
|
-
break;
|
|
4800
|
-
case 'tableTranslationKeyCell':
|
|
4801
|
-
this.tableTranslationKeyCell = item.template;
|
|
4713
|
+
this.primeNgRelativeDateTableCell = item.template;
|
|
4802
4714
|
break;
|
|
4803
4715
|
case 'translationKeyTableCell':
|
|
4804
|
-
this.
|
|
4716
|
+
this.primeNgTranslationKeyTableCell = item.template;
|
|
4805
4717
|
break;
|
|
4806
4718
|
case 'gridItemSubtitleLines':
|
|
4807
|
-
this.
|
|
4719
|
+
this.primeNgGridItemSubtitleLines = item.template;
|
|
4808
4720
|
break;
|
|
4809
4721
|
case 'listItemSubtitleLines':
|
|
4810
|
-
this.
|
|
4722
|
+
this.primeNgListItemSubtitleLines = item.template;
|
|
4811
4723
|
break;
|
|
4812
4724
|
case 'stringTableCell':
|
|
4813
|
-
this.
|
|
4725
|
+
this.primeNgStringTableCell = item.template;
|
|
4814
4726
|
break;
|
|
4815
4727
|
case 'numberTableCell':
|
|
4816
|
-
this.
|
|
4817
|
-
break;
|
|
4818
|
-
case 'customTableCell':
|
|
4819
|
-
this.customTableCell = item.template;
|
|
4728
|
+
this.primeNgNumberTableCell = item.template;
|
|
4820
4729
|
break;
|
|
4821
4730
|
case 'gridItem':
|
|
4822
|
-
this.
|
|
4731
|
+
this.primeNgGridItem = item.template;
|
|
4823
4732
|
break;
|
|
4824
4733
|
case 'listItem':
|
|
4825
|
-
this.
|
|
4734
|
+
this.primeNgListItem = item.template;
|
|
4826
4735
|
break;
|
|
4827
4736
|
case 'topCenter':
|
|
4828
|
-
this.
|
|
4737
|
+
this.primeNgTopCenter = item.template;
|
|
4829
4738
|
break;
|
|
4830
4739
|
case 'listValue':
|
|
4831
|
-
this.
|
|
4740
|
+
this.primeNgListValue = item.template;
|
|
4832
4741
|
break;
|
|
4833
4742
|
case 'translationKeyListValue':
|
|
4834
|
-
this.
|
|
4743
|
+
this.primeNgTranslationKeyListValue = item.template;
|
|
4835
4744
|
break;
|
|
4836
4745
|
case 'numberListValue':
|
|
4837
|
-
this.
|
|
4746
|
+
this.primeNgNumberListValue = item.template;
|
|
4838
4747
|
break;
|
|
4839
4748
|
case 'relativeDateListValue':
|
|
4840
|
-
this.
|
|
4841
|
-
break;
|
|
4842
|
-
case 'customListValue':
|
|
4843
|
-
this.customListValue = item.template;
|
|
4749
|
+
this.primeNgRelativeDateListValue = item.template;
|
|
4844
4750
|
break;
|
|
4845
4751
|
case 'stringListValue':
|
|
4846
|
-
this.
|
|
4752
|
+
this.primeNgStringListValue = item.template;
|
|
4847
4753
|
break;
|
|
4848
4754
|
case 'dateListValue':
|
|
4849
|
-
this.
|
|
4755
|
+
this.primeNgDateListValue = item.template;
|
|
4850
4756
|
break;
|
|
4851
4757
|
case 'tableFilterCell':
|
|
4852
|
-
this.
|
|
4758
|
+
this.primeNgTableFilterCell = item.template;
|
|
4853
4759
|
break;
|
|
4854
4760
|
case 'dateTableFilterCell':
|
|
4855
|
-
this.
|
|
4761
|
+
this.primeNgDateTableFilterCell = item.template;
|
|
4856
4762
|
break;
|
|
4857
4763
|
case 'relativeDateTableFilterCell':
|
|
4858
|
-
this.
|
|
4764
|
+
this.primeNgRelativeDateTableFilterCell = item.template;
|
|
4859
4765
|
break;
|
|
4860
4766
|
case 'translationKeyTableFilterCell':
|
|
4861
|
-
this.
|
|
4767
|
+
this.primeNgTranslationKeyTableFilterCell = item.template;
|
|
4862
4768
|
break;
|
|
4863
4769
|
case 'stringTableFilterCell':
|
|
4864
|
-
this.
|
|
4770
|
+
this.primeNgStringTableFilterCell = item.template;
|
|
4865
4771
|
break;
|
|
4866
4772
|
case 'numberTableFilterCell':
|
|
4867
|
-
this.
|
|
4868
|
-
break;
|
|
4869
|
-
case 'customTableFilterCell':
|
|
4870
|
-
this.customTableFilterCell = item.template;
|
|
4773
|
+
this.primeNgNumberTableFilterCell = item.template;
|
|
4871
4774
|
break;
|
|
4872
4775
|
}
|
|
4873
4776
|
});
|
|
@@ -4911,8 +4814,6 @@ class InteractiveDataViewComponent {
|
|
|
4911
4814
|
onColumnGroupSelectionChange(event) {
|
|
4912
4815
|
this.displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
4913
4816
|
this.selectedGroupKey = event.groupKey;
|
|
4914
|
-
// TODO: Remove following line once displayedColumns (deprecated) has been removed
|
|
4915
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
4916
4817
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
4917
4818
|
}
|
|
4918
4819
|
registerEventListenerForDataView() {
|
|
@@ -4951,8 +4852,6 @@ class InteractiveDataViewComponent {
|
|
|
4951
4852
|
onColumnSelectionChange(event) {
|
|
4952
4853
|
this.displayedColumnKeys = event.activeColumns.map((col) => col.id);
|
|
4953
4854
|
this.selectedGroupKey = this.customGroupKey;
|
|
4954
|
-
// TODO: Remove following line once displayedColumns (deprecated) has been removed
|
|
4955
|
-
this.displayedColumnsChange.emit(this.displayedColumns);
|
|
4956
4855
|
this.displayedColumnKeysChange.emit(this.displayedColumnKeys);
|
|
4957
4856
|
}
|
|
4958
4857
|
onActionColumnConfigChange(event) {
|
|
@@ -4972,12 +4871,17 @@ class InteractiveDataViewComponent {
|
|
|
4972
4871
|
this.pageSize = event;
|
|
4973
4872
|
this.pageSizeChanged.emit(event);
|
|
4974
4873
|
}
|
|
4975
|
-
|
|
4976
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnsChange: "displayedColumnsChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "customTableCell", first: true, predicate: ["customTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "customListValue", first: true, predicate: ["customListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "customTableFilterCell", first: true, predicate: ["customTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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 ? stringTableCell : undefined\"\n [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableDateCell) {\n <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell 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 #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableRelativeDateCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableCell 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 #tableCell 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 #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableTranslationKeyCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableCell 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 #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue 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 #translationKeyListValue 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 #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue 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 #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue 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\n<ng-template #stringTableFilterCell 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 #numberTableFilterCell 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 }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableFilterCell 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 }</ng-template\n>\n<ng-template #relativeDateTableFilterCell 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 }</ng-template\n>\n<ng-template #translationKeyTableFilterCell 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 }</ng-template\n>\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", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { 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: ["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", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "showAllOption", "stringTableCellTemplate", "numberTableCellTemplate", "customTableCellTemplate", "dateTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "tableRelativeDateCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "customListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "customTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4874
|
+
getDisplayedColumns() {
|
|
4875
|
+
return (this.displayedColumnKeys
|
|
4876
|
+
.map((key) => this.columns.find((c) => c.id === key))
|
|
4877
|
+
.filter((d) => d) ?? []);
|
|
4878
|
+
}
|
|
4879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4880
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: "searchConfigPermission", deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", tableSelectionEnabledField: "tableSelectionEnabledField", tableAllowSelectAll: "tableAllowSelectAll", name: "name", titleLineId: "titleLineId", subtitleLineIds: "subtitleLineIds", supportedViewLayouts: "supportedViewLayouts", columns: "columns", emptyResultsMessage: "emptyResultsMessage", clientSideSorting: "clientSideSorting", clientSideFiltering: "clientSideFiltering", fallbackImage: "fallbackImage", filters: "filters", sortDirection: "sortDirection", sortField: "sortField", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", totalRecordsOnServer: "totalRecordsOnServer", layout: "layout", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey", groupSelectionNoGroupSelectedKey: "groupSelectionNoGroupSelectedKey", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", additionalActions: "additionalActions", listGridPaginator: "listGridPaginator", tablePaginator: "tablePaginator", disableFilterView: "disableFilterView", filterViewDisplayMode: "filterViewDisplayMode", filterViewChipStyleClass: "filterViewChipStyleClass", filterViewTableStyle: "filterViewTableStyle", filterViewPanelStyle: "filterViewPanelStyle", selectDisplayedChips: "selectDisplayedChips", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", paginator: "paginator", data: "data" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "dateTableCell", first: true, predicate: ["dateTableCell"], descendants: true }, { propertyName: "relativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true }, { propertyName: "translationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true }, { propertyName: "gridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true }, { propertyName: "listItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true }, { propertyName: "stringTableCell", first: true, predicate: ["stringTableCell"], descendants: true }, { propertyName: "numberTableCell", first: true, predicate: ["numberTableCell"], descendants: true }, { propertyName: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], descendants: true }, { propertyName: "topCenter", first: true, predicate: ["topCenter"], descendants: true }, { propertyName: "listValue", first: true, predicate: ["listValue"], descendants: true }, { propertyName: "translationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true }, { propertyName: "numberListValue", first: true, predicate: ["numberListValue"], descendants: true }, { propertyName: "relativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true }, { propertyName: "stringListValue", first: true, predicate: ["stringListValue"], descendants: true }, { propertyName: "dateListValue", first: true, predicate: ["dateListValue"], descendants: true }, { propertyName: "tableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true }, { propertyName: "dateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true }, { propertyName: "relativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true }, { propertyName: "translationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true }, { propertyName: "stringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true }, { propertyName: "numberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataViewComponent, descendants: 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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]=\"primeNgStringTableCell ?? _stringTableCell\"\n [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\n [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell 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 #relativeDateTableCell 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 #tableCell 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 #translationKeyTableCell 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 #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue 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 #translationKeyListValue 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 #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue 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 #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue 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\n<ng-template #stringTableFilterCell 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 #numberTableFilterCell 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 }</ng-template\n>\n<ng-template #dateTableFilterCell 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 }</ng-template\n>\n<ng-template #relativeDateTableFilterCell 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 }</ng-template\n>\n<ng-template #translationKeyTableFilterCell 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 }</ng-template\n>\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", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i5$1.SlotComponent, selector: "ocx-slot[name]", inputs: ["name", "slotStyles", "slotClasses", "inputs", "outputs"] }, { 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: ["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", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "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: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtered", "componentStateChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4977
4881
|
}
|
|
4978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
4979
4883
|
type: Component,
|
|
4980
|
-
args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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 ? stringTableCell : undefined\"\n [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n [dateTableCellTemplate]=\"_dateTableCell ? dateTableCell : _tableDateCell ? tableDateCell : undefined\"\n [relativeDateTableCellTemplate]=\"_relativeDateTableCell ? relativeDateTableCell : _tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n [translationKeyTableCellTemplate]=\"_translationKeyTableCell ? translationKeyTableCell : _tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n [listItemTemplate]=\"_listItem ? listItem : undefined\"\n [listValueTemplate]=\"_listValue ? listValue : undefined\"\n [translationKeyListValueTemplate]=\"_translationKeyListValue ? translationKeyListValue : undefined\"\n [numberListValueTemplate]=\"_numberListValue ? numberListValue : undefined\"\n [relativeDateListValueTemplate]=\"_relativeDateListValue ? relativeDateListValue : undefined\"\n [customListValueTemplate]=\"_customListValue ? customListValue : undefined\"\n [stringListValueTemplate]=\"_stringListValue ? stringListValue : undefined\"\n [dateListValueTemplate]=\"_dateListValue ? dateListValue : undefined\"\n [gridItemTemplate]=\"_gridItem ? gridItem : undefined\"\n [tableFilterCellTemplate]=\"_tableFilterCell ? tableFilterCell : undefined\"\n [dateTableFilterCellTemplate]=\"_dateTableFilterCell ? dateTableFilterCell : undefined\"\n [customTableFilterCellTemplate]=\"_customTableFilterCell ? customTableFilterCell : undefined\"\n [numberTableFilterCellTemplate]=\"_numberTableFilterCell ? numberTableFilterCell : undefined\"\n [stringTableFilterCellTemplate]=\"_stringTableFilterCell ? stringTableFilterCell : undefined\"\n [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined\"\n [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined\"\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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableDateCell) {\n <ng-container [ngTemplateOutlet]=\"_tableDateCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell 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 #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableRelativeDateCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateTableCell 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 #tableCell 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 #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_tableTranslationKeyCell) {\n <ng-container\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #translationKeyTableCell 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 #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue 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 #translationKeyListValue 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 #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue 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 #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customListValue) {\n <ng-container [ngTemplateOutlet]=\"_customListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue 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\n<ng-template #stringTableFilterCell 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 #numberTableFilterCell 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 }</ng-template\n>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_customTableFilterCell) {\n <ng-container\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableFilterCell 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 }</ng-template\n>\n<ng-template #relativeDateTableFilterCell 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 }</ng-template\n>\n<ng-template #translationKeyTableFilterCell 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 }</ng-template\n>\n" }]
|
|
4884
|
+
args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], 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$ | async\"\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) {\n <div>\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </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$ | async) ?? []\"\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$ | async) { @if (displayedColumnKeys$ | async; as displayedColumnKeys)\n {\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: groupSelectionChangedSlotEmitter }\"\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$ | async) ?? []\"\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$ | async) ?? []\"\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]=\"primeNgStringTableCell ?? _stringTableCell\"\n [numberTableCellTemplate]=\"primeNgNumberTableCell ?? _numberTableCell\"\n [dateTableCellTemplate]=\"primeNgDateTableCell ?? _dateTableCell\"\n [relativeDateTableCellTemplate]=\"primeNgRelativeDateTableCell ?? _relativeDateTableCell\"\n [tableCellTemplate]=\"primeNgTableCell ?? _tableCell\"\n [translationKeyTableCellTemplate]=\"primeNgTranslationKeyTableCell ?? _translationKeyTableCell\"\n [gridItemSubtitleLinesTemplate]=\"primeNgGridItemSubtitleLines ?? _gridItemSubtitleLines\"\n [listItemSubtitleLinesTemplate]=\"primeNgListItemSubtitleLines ?? _listItemSubtitleLines\"\n [listItemTemplate]=\"primeNgListItem ?? _listItem\"\n [listValueTemplate]=\"primeNgListValue ?? _listValue\"\n [translationKeyListValueTemplate]=\"primeNgTranslationKeyListValue ?? _translationKeyListValue\"\n [numberListValueTemplate]=\"primeNgNumberListValue ?? _numberListValue\"\n [relativeDateListValueTemplate]=\"primeNgRelativeDateListValue ?? _relativeDateListValue\"\n [stringListValueTemplate]=\"primeNgStringListValue ?? _stringListValue\"\n [dateListValueTemplate]=\"primeNgDateListValue ?? _dateListValue\"\n [gridItemTemplate]=\"primeNgGridItem ?? _gridItem\"\n [tableFilterCellTemplate]=\"primeNgTableFilterCell ?? _tableFilterCell\"\n [dateTableFilterCellTemplate]=\"primeNgDateTableFilterCell ?? _dateTableFilterCell\"\n [numberTableFilterCellTemplate]=\"primeNgNumberTableFilterCell ?? _numberTableFilterCell\"\n [stringTableFilterCellTemplate]=\"primeNgStringTableFilterCell ?? _stringTableFilterCell\"\n [relativeDateTableFilterCellTemplate]=\"primeNgRelativeDateTableFilterCell ?? _relativeDateTableFilterCell\"\n [translationKeyTableFilterCellTemplate]=\"primeNgTranslationKeyTableFilterCell ?? _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$ | async\"\n [tableAllowSelectAll]=\"tableAllowSelectAll\"\n [tableSelectionEnabledField]=\"tableSelectionEnabledField\"\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\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringTableCell) {\n <ng-container [ngTemplateOutlet]=\"_stringTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #numberTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberTableCell) {\n <ng-container [ngTemplateOutlet]=\"_numberTableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateTableCell 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 #relativeDateTableCell 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 #tableCell 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 #translationKeyTableCell 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 #gridItemSubtitleLines let-item>\n @if (_gridItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n @if (_listItemSubtitleLines) {\n <ng-container [ngTemplateOutlet]=\"_listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #gridItem let-item>\n @if (_gridItem) {\n <ng-container [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listItem let-item>\n @if (_listItem) {\n <ng-container [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n }</ng-template\n>\n<ng-template #listValue 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 #translationKeyListValue 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 #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_numberListValue) {\n <ng-container [ngTemplateOutlet]=\"_numberListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #relativeDateListValue 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 #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n @if (_stringListValue) {\n <ng-container [ngTemplateOutlet]=\"_stringListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n </ng-container>\n }</ng-template\n>\n<ng-template #dateListValue 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\n<ng-template #stringTableFilterCell 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 #numberTableFilterCell 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 }</ng-template\n>\n<ng-template #dateTableFilterCell 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 }</ng-template\n>\n<ng-template #relativeDateTableFilterCell 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 }</ng-template\n>\n<ng-template #translationKeyTableFilterCell 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 }</ng-template\n>\n" }]
|
|
4981
4885
|
}], ctorParameters: () => [], propDecorators: { dataView: [{
|
|
4982
4886
|
type: ViewChild,
|
|
4983
4887
|
args: [DataViewComponent]
|
|
@@ -5035,8 +4939,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5035
4939
|
type: Input
|
|
5036
4940
|
}], pageSize: [{
|
|
5037
4941
|
type: Input
|
|
5038
|
-
}], showAllOption: [{
|
|
5039
|
-
type: Input
|
|
5040
4942
|
}], totalRecordsOnServer: [{
|
|
5041
4943
|
type: Input
|
|
5042
4944
|
}], layout: [{
|
|
@@ -5075,8 +4977,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5075
4977
|
type: Input
|
|
5076
4978
|
}], displayedColumnKeys: [{
|
|
5077
4979
|
type: Input
|
|
5078
|
-
}], displayedColumns: [{
|
|
5079
|
-
type: Input
|
|
5080
4980
|
}], frozenActionColumn: [{
|
|
5081
4981
|
type: Input
|
|
5082
4982
|
}], actionColumnPosition: [{
|
|
@@ -5088,21 +4988,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5088
4988
|
}], tableCell: [{
|
|
5089
4989
|
type: ContentChild,
|
|
5090
4990
|
args: ['tableCell']
|
|
5091
|
-
}], tableDateCell: [{
|
|
5092
|
-
type: ContentChild,
|
|
5093
|
-
args: ['tableDateCell']
|
|
5094
4991
|
}], dateTableCell: [{
|
|
5095
4992
|
type: ContentChild,
|
|
5096
4993
|
args: ['dateTableCell']
|
|
5097
|
-
}], tableRelativeDateCell: [{
|
|
5098
|
-
type: ContentChild,
|
|
5099
|
-
args: ['tableRelativeDateCell']
|
|
5100
4994
|
}], relativeDateTableCell: [{
|
|
5101
4995
|
type: ContentChild,
|
|
5102
4996
|
args: ['relativeDateTableCell']
|
|
5103
|
-
}], tableTranslationKeyCell: [{
|
|
5104
|
-
type: ContentChild,
|
|
5105
|
-
args: ['tableTranslationKeyCell']
|
|
5106
4997
|
}], translationKeyTableCell: [{
|
|
5107
4998
|
type: ContentChild,
|
|
5108
4999
|
args: ['translationKeyTableCell']
|
|
@@ -5118,9 +5009,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5118
5009
|
}], numberTableCell: [{
|
|
5119
5010
|
type: ContentChild,
|
|
5120
5011
|
args: ['numberTableCell']
|
|
5121
|
-
}], customTableCell: [{
|
|
5122
|
-
type: ContentChild,
|
|
5123
|
-
args: ['customTableCell']
|
|
5124
5012
|
}], gridItem: [{
|
|
5125
5013
|
type: ContentChild,
|
|
5126
5014
|
args: ['gridItem']
|
|
@@ -5142,9 +5030,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5142
5030
|
}], relativeDateListValue: [{
|
|
5143
5031
|
type: ContentChild,
|
|
5144
5032
|
args: ['relativeDateListValue']
|
|
5145
|
-
}], customListValue: [{
|
|
5146
|
-
type: ContentChild,
|
|
5147
|
-
args: ['customListValue']
|
|
5148
5033
|
}], stringListValue: [{
|
|
5149
5034
|
type: ContentChild,
|
|
5150
5035
|
args: ['stringListValue']
|
|
@@ -5169,9 +5054,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5169
5054
|
}], numberTableFilterCell: [{
|
|
5170
5055
|
type: ContentChild,
|
|
5171
5056
|
args: ['numberTableFilterCell']
|
|
5172
|
-
}], customTableFilterCell: [{
|
|
5173
|
-
type: ContentChild,
|
|
5174
|
-
args: ['customTableFilterCell']
|
|
5175
5057
|
}], templates: [{
|
|
5176
5058
|
type: ContentChildren,
|
|
5177
5059
|
args: [PrimeTemplate]
|
|
@@ -5187,8 +5069,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5187
5069
|
type: Output
|
|
5188
5070
|
}], dataViewLayoutChange: [{
|
|
5189
5071
|
type: Output
|
|
5190
|
-
}], displayedColumnsChange: [{
|
|
5191
|
-
type: Output
|
|
5192
5072
|
}], displayedColumnKeysChange: [{
|
|
5193
5073
|
type: Output
|
|
5194
5074
|
}], selectionChanged: [{
|
|
@@ -5209,10 +5089,10 @@ class LifecycleComponent {
|
|
|
5209
5089
|
constructor() {
|
|
5210
5090
|
this.steps = [];
|
|
5211
5091
|
}
|
|
5212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
5213
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
5092
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LifecycleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5093
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LifecycleComponent, isStandalone: false, selector: "ocx-lifecycle", inputs: { steps: "steps", activeStepId: "activeStepId" }, ngImport: i0, template: "<p-timeline [value]=\"steps\">\n <ng-template pTemplate=\"marker\" let-step>\n <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n </ng-template>\n <ng-template pTemplate=\"content\" let-step>\n <div class=\"pb-4 h-full\">\n <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n @if (step.details) {\n <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n }\n </div>\n </div>\n </ng-template>\n</p-timeline>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }] }); }
|
|
5214
5094
|
}
|
|
5215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
5095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LifecycleComponent, decorators: [{
|
|
5216
5096
|
type: Component,
|
|
5217
5097
|
args: [{ standalone: false, selector: 'ocx-lifecycle', template: "<p-timeline [value]=\"steps\">\n <ng-template pTemplate=\"marker\" let-step>\n <span class=\"p-timeline-event-marker\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\"></span>\n </ng-template>\n <ng-template pTemplate=\"content\" let-step>\n <div class=\"pb-4 h-full\">\n <div class=\"card h-full\" [ngClass]=\"activeStepId && activeStepId === step.id ? 'bg-primary' : ''\">\n <p class=\"font-bold text-xl\" [ngClass]=\"step.details ? 'mb-2' : ''\">{{ step.title }}</p>\n @if (step.details) {\n <p [ngClass]=\"activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'\">{{ step.details }}</p>\n }\n </div>\n </div>\n </ng-template>\n</p-timeline>\n" }]
|
|
5218
5098
|
}], propDecorators: { steps: [{
|
|
@@ -5221,91 +5101,701 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5221
5101
|
type: Input
|
|
5222
5102
|
}] } });
|
|
5223
5103
|
|
|
5224
|
-
|
|
5225
|
-
* Show this data not found page component if the main entity of a page could not be loaded.
|
|
5226
|
-
*/
|
|
5227
|
-
class DataLoadingErrorComponent {
|
|
5228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DataLoadingErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: DataLoadingErrorComponent, isStandalone: false, selector: "ocx-data-loading-error", ngImport: i0, template: `<div class="p-4">
|
|
5230
|
-
<h1>{{ 'OCX_DATA_LOADING_ERROR.TITLE' | translate }}</h1>
|
|
5231
|
-
<div style="white-space: pre-line">
|
|
5232
|
-
{{ 'OCX_DATA_LOADING_ERROR.MESSAGE' | translate }}
|
|
5233
|
-
</div>
|
|
5234
|
-
</div> `, isInline: true, dependencies: [{ kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
5235
|
-
}
|
|
5236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DataLoadingErrorComponent, decorators: [{
|
|
5237
|
-
type: Component,
|
|
5238
|
-
args: [{
|
|
5239
|
-
standalone: false,
|
|
5240
|
-
selector: 'ocx-data-loading-error',
|
|
5241
|
-
template: `<div class="p-4">
|
|
5242
|
-
<h1>{{ 'OCX_DATA_LOADING_ERROR.TITLE' | translate }}</h1>
|
|
5243
|
-
<div style="white-space: pre-line">
|
|
5244
|
-
{{ 'OCX_DATA_LOADING_ERROR.MESSAGE' | translate }}
|
|
5245
|
-
</div>
|
|
5246
|
-
</div> `,
|
|
5247
|
-
}]
|
|
5248
|
-
}] });
|
|
5249
|
-
|
|
5250
|
-
class TranslationConnectionService {
|
|
5104
|
+
class DialogMessageContentComponent {
|
|
5251
5105
|
constructor() {
|
|
5252
|
-
|
|
5253
|
-
|
|
5254
|
-
this.
|
|
5106
|
+
this.message = 'message';
|
|
5107
|
+
this.messageParameters = {};
|
|
5108
|
+
this.icon = '';
|
|
5255
5109
|
}
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
}
|
|
5259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TranslationConnectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5260
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TranslationConnectionService }); }
|
|
5110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogMessageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DialogMessageContentComponent, isStandalone: false, selector: "ng-component", inputs: { message: "message", messageParameters: "messageParameters", icon: "icon" }, ngImport: i0, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\"></i>\n }\n <span id=\"dialogMessage\">{{message | translate:messageParameters}}</span>\n </div>\n</div>", dependencies: [{ kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
5261
5112
|
}
|
|
5262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
5263
|
-
type:
|
|
5264
|
-
|
|
5113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogMessageContentComponent, decorators: [{
|
|
5114
|
+
type: Component,
|
|
5115
|
+
args: [{ standalone: false, template: "<div class=\"dialogMessageContent\">\n <div>\n @if (icon !== '') {\n <i [class]=\"icon\"></i>\n }\n <span id=\"dialogMessage\">{{message | translate:messageParameters}}</span>\n </div>\n</div>" }]
|
|
5116
|
+
}], propDecorators: { message: [{
|
|
5117
|
+
type: Input
|
|
5118
|
+
}], messageParameters: [{
|
|
5119
|
+
type: Input
|
|
5120
|
+
}], icon: [{
|
|
5121
|
+
type: Input
|
|
5122
|
+
}] } });
|
|
5265
5123
|
|
|
5266
|
-
|
|
5267
|
-
// it is not used as framework independent integration but for improving
|
|
5268
|
-
// angular specific things
|
|
5269
|
-
class TranslationCacheTopic extends SyncableTopic {
|
|
5124
|
+
class DialogContentComponent {
|
|
5270
5125
|
constructor() {
|
|
5271
|
-
|
|
5126
|
+
this.dynamicDialogConfig = inject(DynamicDialogConfig);
|
|
5127
|
+
this.dynamicDialogRef = inject(DynamicDialogRef);
|
|
5128
|
+
this.defaultDialogData = {
|
|
5129
|
+
component: DialogMessageContentComponent,
|
|
5130
|
+
config: {},
|
|
5131
|
+
componentData: {},
|
|
5132
|
+
};
|
|
5133
|
+
this.dialogData = this.defaultDialogData;
|
|
5272
5134
|
}
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5276
|
-
*/
|
|
5277
|
-
class TranslationCacheService {
|
|
5278
|
-
constructor() {
|
|
5279
|
-
this.translationTopic$ = new TranslationCacheTopic();
|
|
5280
|
-
window['onecxTranslations'] ??= {};
|
|
5135
|
+
ngOnInit() {
|
|
5136
|
+
this.loadComponent();
|
|
5281
5137
|
}
|
|
5282
5138
|
ngOnDestroy() {
|
|
5283
|
-
this.
|
|
5284
|
-
|
|
5285
|
-
|
|
5286
|
-
|
|
5287
|
-
|
|
5288
|
-
|
|
5289
|
-
if (
|
|
5290
|
-
|
|
5291
|
-
}
|
|
5292
|
-
|
|
5293
|
-
|
|
5294
|
-
|
|
5295
|
-
|
|
5296
|
-
|
|
5297
|
-
|
|
5298
|
-
|
|
5299
|
-
|
|
5300
|
-
|
|
5301
|
-
|
|
5302
|
-
|
|
5303
|
-
|
|
5304
|
-
|
|
5139
|
+
this.primaryButtonEnabledSub?.unsubscribe();
|
|
5140
|
+
this.secondaryButtonEnabledSub?.unsubscribe();
|
|
5141
|
+
this.customButtonEnabledSub?.unsubscribe();
|
|
5142
|
+
this.buttonClickedSub?.unsubscribe();
|
|
5143
|
+
}
|
|
5144
|
+
loadComponent() {
|
|
5145
|
+
if (this.dynamicDialogConfig.data) {
|
|
5146
|
+
this.setUpDialogDataForDynamicConfig();
|
|
5147
|
+
}
|
|
5148
|
+
}
|
|
5149
|
+
setUpDialogDataForDynamicConfig() {
|
|
5150
|
+
const dynamicConfigData = this.dynamicDialogConfig.data;
|
|
5151
|
+
const portalDialogServiceData = this.dynamicDialogConfig.data.portalDialogServiceData;
|
|
5152
|
+
if (dynamicConfigData.component) {
|
|
5153
|
+
this.dialogData.component = dynamicConfigData.component;
|
|
5154
|
+
}
|
|
5155
|
+
if (dynamicConfigData.componentData) {
|
|
5156
|
+
this.dialogData.componentData = dynamicConfigData.componentData;
|
|
5157
|
+
}
|
|
5158
|
+
const viewContainerRef = this.dialogHost;
|
|
5159
|
+
viewContainerRef.clear();
|
|
5160
|
+
this.buttonClickedSub = portalDialogServiceData.buttonClicked$.subscribe((state) => {
|
|
5161
|
+
const component = this.componentRef.instance;
|
|
5162
|
+
const hasDialogResult = this.isDialogResultImplemented(component);
|
|
5163
|
+
if (hasDialogResult) {
|
|
5164
|
+
state.result = component.dialogResult;
|
|
5165
|
+
}
|
|
5166
|
+
const closeResult = state;
|
|
5167
|
+
// check if component implements DialogButtonClicked
|
|
5168
|
+
if (this.isDialogButtonClickedImplemented(component)) {
|
|
5169
|
+
const buttonResult = component.ocxDialogButtonClicked(state);
|
|
5170
|
+
// If undefined or void is returned, close dialog and return result
|
|
5171
|
+
if (buttonResult === undefined) {
|
|
5172
|
+
if (hasDialogResult) {
|
|
5173
|
+
closeResult.result = component.dialogResult;
|
|
5174
|
+
}
|
|
5175
|
+
return this.dynamicDialogRef.close(closeResult);
|
|
5176
|
+
}
|
|
5177
|
+
this.toObservable(buttonResult).subscribe((result) => {
|
|
5178
|
+
if (result === true) {
|
|
5179
|
+
if (hasDialogResult) {
|
|
5180
|
+
closeResult.result = component.dialogResult;
|
|
5181
|
+
}
|
|
5182
|
+
this.dynamicDialogRef.close(closeResult);
|
|
5183
|
+
}
|
|
5184
|
+
});
|
|
5185
|
+
}
|
|
5186
|
+
else {
|
|
5187
|
+
return this.dynamicDialogRef.close(closeResult);
|
|
5188
|
+
}
|
|
5189
|
+
});
|
|
5190
|
+
if (this.dialogData.component) {
|
|
5191
|
+
const componentRef = viewContainerRef.createComponent(this.dialogData.component);
|
|
5192
|
+
if (this.isDialogPrimaryButtonDisabledImplemented(componentRef.instance)) {
|
|
5193
|
+
this.primaryButtonEnabledSub = componentRef.instance.primaryButtonEnabled
|
|
5194
|
+
.pipe(startWith(false))
|
|
5195
|
+
.subscribe((isEnabled) => {
|
|
5196
|
+
portalDialogServiceData.primaryButtonEnabled$.emit(isEnabled);
|
|
5197
|
+
});
|
|
5198
|
+
}
|
|
5199
|
+
if (this.isDialogSecondaryButtonDisabledImplemented(componentRef.instance)) {
|
|
5200
|
+
this.secondaryButtonEnabledSub = componentRef.instance.secondaryButtonEnabled
|
|
5201
|
+
.pipe(startWith(false))
|
|
5202
|
+
.subscribe((isEnabled) => {
|
|
5203
|
+
portalDialogServiceData.secondaryButtonEnabled$.emit(isEnabled);
|
|
5204
|
+
});
|
|
5205
|
+
}
|
|
5206
|
+
if (this.isDialogCustomButtonDisabledImplemented(componentRef.instance)) {
|
|
5207
|
+
this.customButtonEnabledSub = componentRef.instance.customButtonEnabled.subscribe((buttonEnabled) => {
|
|
5208
|
+
portalDialogServiceData.customButtonEnabled$.emit(buttonEnabled);
|
|
5209
|
+
});
|
|
5210
|
+
}
|
|
5211
|
+
//populate container
|
|
5212
|
+
Object.keys(this.dialogData.componentData).forEach((k) => {
|
|
5213
|
+
componentRef.setInput(k, this.dialogData.componentData[k]);
|
|
5214
|
+
});
|
|
5215
|
+
this.componentRef = componentRef;
|
|
5216
|
+
}
|
|
5217
|
+
}
|
|
5218
|
+
toObservable(ocxDialogButtonClickedResult) {
|
|
5219
|
+
if (ocxDialogButtonClickedResult === undefined) {
|
|
5220
|
+
return of(true);
|
|
5221
|
+
}
|
|
5222
|
+
if (isObservable(ocxDialogButtonClickedResult)) {
|
|
5223
|
+
return ocxDialogButtonClickedResult;
|
|
5224
|
+
}
|
|
5225
|
+
return from(Promise.resolve(ocxDialogButtonClickedResult));
|
|
5226
|
+
}
|
|
5227
|
+
isDialogResultImplemented(component) {
|
|
5228
|
+
return 'dialogResult' in component;
|
|
5229
|
+
}
|
|
5230
|
+
isDialogButtonClickedImplemented(component) {
|
|
5231
|
+
return typeof component.ocxDialogButtonClicked === 'function';
|
|
5232
|
+
}
|
|
5233
|
+
isDialogPrimaryButtonDisabledImplemented(component) {
|
|
5234
|
+
return 'primaryButtonEnabled' in component;
|
|
5235
|
+
}
|
|
5236
|
+
isDialogSecondaryButtonDisabledImplemented(component) {
|
|
5237
|
+
return 'secondaryButtonEnabled' in component;
|
|
5238
|
+
}
|
|
5239
|
+
isDialogCustomButtonDisabledImplemented(component) {
|
|
5240
|
+
return 'customButtonEnabled' in component;
|
|
5241
|
+
}
|
|
5242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DialogContentComponent, isStandalone: false, selector: "ocx-dialog-content", viewQueries: [{ propertyName: "dialogHost", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"buttonDialogScrollableContent\">\n <ng-container #container></ng-container>\n <ng-content></ng-content>\n</div>\n", styles: [".buttonDialogScrollableContent{overflow:auto;max-height:500px;margin-bottom:20px}\n"] }); }
|
|
5244
|
+
}
|
|
5245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogContentComponent, decorators: [{
|
|
5246
|
+
type: Component,
|
|
5247
|
+
args: [{ standalone: false, selector: 'ocx-dialog-content', template: "<div class=\"buttonDialogScrollableContent\">\n <ng-container #container></ng-container>\n <ng-content></ng-content>\n</div>\n", styles: [".buttonDialogScrollableContent{overflow:auto;max-height:500px;margin-bottom:20px}\n"] }]
|
|
5248
|
+
}], propDecorators: { dialogHost: [{
|
|
5249
|
+
type: ViewChild,
|
|
5250
|
+
args: ['container', { static: true, read: ViewContainerRef }]
|
|
5251
|
+
}] } });
|
|
5252
|
+
|
|
5253
|
+
class DialogFooterComponent {
|
|
5254
|
+
constructor() {
|
|
5255
|
+
this.dynamicDialogConfig = inject(DynamicDialogConfig);
|
|
5256
|
+
this.dynamicDialogRef = inject(DynamicDialogRef);
|
|
5257
|
+
this.defaultPrimaryButtonDetails = {
|
|
5258
|
+
key: 'OCX_BUTTON_DIALOG.CONFIRM',
|
|
5259
|
+
};
|
|
5260
|
+
this.defaultSecondaryButtonDetails = {
|
|
5261
|
+
key: 'OCX_BUTTON_DIALOG.CANCEL',
|
|
5262
|
+
};
|
|
5263
|
+
this.defaultDialogData = {
|
|
5264
|
+
config: {
|
|
5265
|
+
primaryButtonDetails: this.defaultPrimaryButtonDetails,
|
|
5266
|
+
secondaryButtonIncluded: true,
|
|
5267
|
+
secondaryButtonDetails: this.defaultSecondaryButtonDetails,
|
|
5268
|
+
},
|
|
5269
|
+
componentData: {},
|
|
5270
|
+
};
|
|
5271
|
+
this.config = {};
|
|
5272
|
+
this.dialogData = this.defaultDialogData;
|
|
5273
|
+
this.customButtonsDisabled$ = new BehaviorSubject({});
|
|
5274
|
+
this.leftCustomButtons = [];
|
|
5275
|
+
this.rightCustomButtons = [];
|
|
5276
|
+
this.buttonClickedEmitter = new EventEmitter();
|
|
5277
|
+
}
|
|
5278
|
+
set secondaryButton(content) {
|
|
5279
|
+
if (content) {
|
|
5280
|
+
this._secondaryButton = content;
|
|
5281
|
+
}
|
|
5282
|
+
}
|
|
5283
|
+
get secondaryButton() {
|
|
5284
|
+
return this._secondaryButton;
|
|
5285
|
+
}
|
|
5286
|
+
ngAfterViewInit() {
|
|
5287
|
+
if (!(this.dynamicDialogConfig.data && this.dynamicDialogConfig.data.config))
|
|
5288
|
+
return;
|
|
5289
|
+
const config = this.dynamicDialogConfig.data.config;
|
|
5290
|
+
if (config.autoFocusButton === 'primary') {
|
|
5291
|
+
this.primaryButton.element.nativeElement.focus();
|
|
5292
|
+
}
|
|
5293
|
+
else if (config.autoFocusButton === 'secondary') {
|
|
5294
|
+
this.secondaryButton.element.nativeElement.focus();
|
|
5295
|
+
}
|
|
5296
|
+
else if (config.autoFocusButton === 'custom') {
|
|
5297
|
+
const button = this.customButtons.find((customButton) => {
|
|
5298
|
+
return customButton.nativeElement.id === config.autoFocusButtonCustomId;
|
|
5299
|
+
});
|
|
5300
|
+
setTimeout(() => {
|
|
5301
|
+
button?.nativeElement.focus();
|
|
5302
|
+
});
|
|
5303
|
+
}
|
|
5304
|
+
}
|
|
5305
|
+
ngOnInit() {
|
|
5306
|
+
this.loadComponent();
|
|
5307
|
+
}
|
|
5308
|
+
primaryButtonAction() {
|
|
5309
|
+
return this.buttonAction('primary');
|
|
5310
|
+
}
|
|
5311
|
+
secondaryButtonAction() {
|
|
5312
|
+
return this.buttonAction('secondary');
|
|
5313
|
+
}
|
|
5314
|
+
customButtonAction(button) {
|
|
5315
|
+
return this.buttonAction(`custom`, button.id);
|
|
5316
|
+
}
|
|
5317
|
+
resolveCustomButtonDisabled(customButtonsDisabled, buttonId) {
|
|
5318
|
+
return buttonId in customButtonsDisabled ? customButtonsDisabled[buttonId] : true;
|
|
5319
|
+
}
|
|
5320
|
+
loadComponent() {
|
|
5321
|
+
if (this.dynamicDialogConfig.data) {
|
|
5322
|
+
this.setUpDialogDataForDynamicConfig();
|
|
5323
|
+
}
|
|
5324
|
+
else {
|
|
5325
|
+
this.setUpDialogDataForInput();
|
|
5326
|
+
}
|
|
5327
|
+
}
|
|
5328
|
+
setUpDialogDataForInput() {
|
|
5329
|
+
if (this.config) {
|
|
5330
|
+
if (!!this.config.primaryButtonDetails && !!this.config.primaryButtonDetails.key) {
|
|
5331
|
+
this.dialogData.config.primaryButtonDetails = this.config.primaryButtonDetails;
|
|
5332
|
+
}
|
|
5333
|
+
if (this.config.secondaryButtonIncluded) {
|
|
5334
|
+
this.dialogData.config.secondaryButtonIncluded = this.config.secondaryButtonIncluded;
|
|
5335
|
+
}
|
|
5336
|
+
if (!!this.config.secondaryButtonDetails && !!this.config.secondaryButtonDetails.key) {
|
|
5337
|
+
this.dialogData.config.secondaryButtonDetails = this.config.secondaryButtonDetails;
|
|
5338
|
+
}
|
|
5339
|
+
}
|
|
5340
|
+
this.dialogData.config.customButtons = this.config.customButtons;
|
|
5341
|
+
this.setupCustomButtons(this.dialogData);
|
|
5342
|
+
}
|
|
5343
|
+
setUpDialogDataForDynamicConfig() {
|
|
5344
|
+
const dynamicConfigData = this.dynamicDialogConfig.data;
|
|
5345
|
+
const portalDialogServiceData = this.dynamicDialogConfig.data.portalDialogServiceData;
|
|
5346
|
+
if (dynamicConfigData.config) {
|
|
5347
|
+
const dialogConfig = dynamicConfigData.config;
|
|
5348
|
+
if (!!dialogConfig.primaryButtonDetails && !!dialogConfig.primaryButtonDetails.key) {
|
|
5349
|
+
this.dialogData.config.primaryButtonDetails = dialogConfig.primaryButtonDetails;
|
|
5350
|
+
}
|
|
5351
|
+
if (dialogConfig.secondaryButtonIncluded !== undefined) {
|
|
5352
|
+
this.dialogData.config.secondaryButtonIncluded = dialogConfig.secondaryButtonIncluded;
|
|
5353
|
+
}
|
|
5354
|
+
if (!!dialogConfig.secondaryButtonDetails && !!dialogConfig.secondaryButtonDetails.key) {
|
|
5355
|
+
this.dialogData.config.secondaryButtonDetails = dialogConfig.secondaryButtonDetails;
|
|
5356
|
+
}
|
|
5357
|
+
}
|
|
5358
|
+
this.setupCustomButtons(dynamicConfigData);
|
|
5359
|
+
this.primaryButtonDisabled$ = portalDialogServiceData.primaryButtonEnabled$.pipe(map((isEnabled) => !isEnabled));
|
|
5360
|
+
this.secondaryButtonDisabled$ = portalDialogServiceData.secondaryButtonEnabled$.pipe(map((isEnabled) => !isEnabled));
|
|
5361
|
+
const initCustomButtons = {};
|
|
5362
|
+
this.rightCustomButtons.concat(this.leftCustomButtons).map((button) => {
|
|
5363
|
+
initCustomButtons[button.id] = true;
|
|
5364
|
+
});
|
|
5365
|
+
this.customButtonsDisabled$.next(initCustomButtons);
|
|
5366
|
+
portalDialogServiceData.customButtonEnabled$
|
|
5367
|
+
.pipe(withLatestFrom(this.customButtonsDisabled$), map(([buttonEnabled, customButtonsDisabled]) => {
|
|
5368
|
+
if (customButtonsDisabled[buttonEnabled.id] !== !buttonEnabled.enabled) {
|
|
5369
|
+
customButtonsDisabled[buttonEnabled.id] = !buttonEnabled.enabled;
|
|
5370
|
+
}
|
|
5371
|
+
return customButtonsDisabled;
|
|
5372
|
+
}))
|
|
5373
|
+
.subscribe(this.customButtonsDisabled$);
|
|
5374
|
+
this.buttonClickedEmitter = portalDialogServiceData.buttonClicked$;
|
|
5375
|
+
}
|
|
5376
|
+
buttonAction(resultButtonClickedName, buttonId) {
|
|
5377
|
+
const state = {
|
|
5378
|
+
button: resultButtonClickedName,
|
|
5379
|
+
result: undefined,
|
|
5380
|
+
id: buttonId,
|
|
5381
|
+
};
|
|
5382
|
+
this.buttonClickedEmitter?.emit(state);
|
|
5383
|
+
}
|
|
5384
|
+
setupCustomButtons(dialogData) {
|
|
5385
|
+
this.leftCustomButtons = dialogData.config.customButtons?.filter((button) => button.alignment === 'left') ?? [];
|
|
5386
|
+
this.rightCustomButtons = dialogData.config.customButtons?.filter((button) => button.alignment === 'right') ?? [];
|
|
5387
|
+
}
|
|
5388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DialogFooterComponent, isStandalone: false, selector: "ocx-dialog-footer", inputs: { config: "config" }, outputs: { buttonClickedEmitter: "buttonClickedEmitter" }, viewQueries: [{ propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, read: ViewContainerRef }, { propertyName: "customButtons", predicate: ["customButton"], descendants: true }], ngImport: i0, template: "<div class=\"w-full flex-row justify-content-end flex flex-wrap gap-2\">\n @for (button of leftCustomButtons; track button; let i = $index) {\n <div [ngStyle]=\"{'margin-right': (i === leftCustomButtons.length - 1) ? 'auto' : 0}\">\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n }\n @for (button of rightCustomButtons; track button) {\n <div>\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n }\n <div>\n @if (dialogData.config.secondaryButtonIncluded) {\n <button\n #secondaryButton\n id=\"{{dialogData.config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}\"\n pButton\n [icon]=\"dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''\"\n (click)=\"secondaryButtonAction()\"\n [label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n [disabled]=\"secondaryButtonDisabled$ | async\"\n pTooltip=\"dialogData.config.secondaryButtonDetails!.tooltipKey ? (dialogData.config.secondaryButtonDetails!.tooltipKey | translate) : null\"\n tooltipPosition=\"dialogData.config.secondaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n ></button>\n }\n </div>\n <div>\n <button\n #primaryButton\n id=\"{{dialogData.config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}\"\n pButton\n autofocus\n [icon]=\"dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''\"\n (click)=\"primaryButtonAction()\"\n [label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n [disabled]=\"primaryButtonDisabled$ | async\"\n pTooltip=\"dialogData.config.primaryButtonDetails!.tooltipKey ? (dialogData.config.primaryButtonDetails!.tooltipKey | translate) : null\"\n tooltipPosition=\"dialogData.config.primaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n ></button>\n </div>\n</div>\n\n<ng-template #customButtonTemplate let-button=\"button\">\n <button\n #customButton\n id=\"{{button.id}}\"\n pButton\n [icon]=\"button.icon !== undefined ? button.icon : ''\"\n (click)=\"customButtonAction(button)\"\n [label]=\"button.key | translate:button.parameters\"\n [disabled]=\"resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)\"\n pTooltip=\"button.tooltipKey ? (button.tooltipKey | translate) : null\"\n tooltipPosition=\"button.tooltipPosition ?? ''\"\n [attr.aria-label]=\"button.key | translate:button.parameters\"\n ></button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
|
|
5390
|
+
}
|
|
5391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogFooterComponent, decorators: [{
|
|
5392
|
+
type: Component,
|
|
5393
|
+
args: [{ standalone: false, selector: 'ocx-dialog-footer', template: "<div class=\"w-full flex-row justify-content-end flex flex-wrap gap-2\">\n @for (button of leftCustomButtons; track button; let i = $index) {\n <div [ngStyle]=\"{'margin-right': (i === leftCustomButtons.length - 1) ? 'auto' : 0}\">\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n }\n @for (button of rightCustomButtons; track button) {\n <div>\n <ng-container *ngTemplateOutlet=\"customButtonTemplate; context: {button: button}\"> </ng-container>\n </div>\n }\n <div>\n @if (dialogData.config.secondaryButtonIncluded) {\n <button\n #secondaryButton\n id=\"{{dialogData.config.secondaryButtonDetails?.id ?? 'buttonDialogSecondaryButton'}}\"\n pButton\n [icon]=\"dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''\"\n (click)=\"secondaryButtonAction()\"\n [label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n [disabled]=\"secondaryButtonDisabled$ | async\"\n pTooltip=\"dialogData.config.secondaryButtonDetails!.tooltipKey ? (dialogData.config.secondaryButtonDetails!.tooltipKey | translate) : null\"\n tooltipPosition=\"dialogData.config.secondaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters\"\n ></button>\n }\n </div>\n <div>\n <button\n #primaryButton\n id=\"{{dialogData.config.primaryButtonDetails?.id ?? 'buttonDialogPrimaryButton'}}\"\n pButton\n autofocus\n [icon]=\"dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''\"\n (click)=\"primaryButtonAction()\"\n [label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n [disabled]=\"primaryButtonDisabled$ | async\"\n pTooltip=\"dialogData.config.primaryButtonDetails!.tooltipKey ? (dialogData.config.primaryButtonDetails!.tooltipKey | translate) : null\"\n tooltipPosition=\"dialogData.config.primaryButtonDetails?.tooltipPosition ?? ''\"\n [attr.aria-label]=\"dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters\"\n ></button>\n </div>\n</div>\n\n<ng-template #customButtonTemplate let-button=\"button\">\n <button\n #customButton\n id=\"{{button.id}}\"\n pButton\n [icon]=\"button.icon !== undefined ? button.icon : ''\"\n (click)=\"customButtonAction(button)\"\n [label]=\"button.key | translate:button.parameters\"\n [disabled]=\"resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)\"\n pTooltip=\"button.tooltipKey ? (button.tooltipKey | translate) : null\"\n tooltipPosition=\"button.tooltipPosition ?? ''\"\n [attr.aria-label]=\"button.key | translate:button.parameters\"\n ></button>\n</ng-template>\n" }]
|
|
5394
|
+
}], propDecorators: { config: [{
|
|
5395
|
+
type: Input
|
|
5396
|
+
}], buttonClickedEmitter: [{
|
|
5397
|
+
type: Output
|
|
5398
|
+
}], primaryButton: [{
|
|
5399
|
+
type: ViewChild,
|
|
5400
|
+
args: ['primaryButton', { static: true, read: ViewContainerRef }]
|
|
5401
|
+
}], secondaryButton: [{
|
|
5402
|
+
type: ViewChild,
|
|
5403
|
+
args: ['secondaryButton', { static: false, read: ViewContainerRef }]
|
|
5404
|
+
}], customButtons: [{
|
|
5405
|
+
type: ViewChildren,
|
|
5406
|
+
args: ['customButton']
|
|
5407
|
+
}] } });
|
|
5408
|
+
|
|
5409
|
+
class DialogInlineComponent {
|
|
5410
|
+
constructor() {
|
|
5411
|
+
this.config = {};
|
|
5412
|
+
this.resultEmitter = new EventEmitter();
|
|
5413
|
+
}
|
|
5414
|
+
buttonClicked(event) {
|
|
5415
|
+
this.resultEmitter.emit(event.button);
|
|
5416
|
+
}
|
|
5417
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5418
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DialogInlineComponent, isStandalone: false, selector: "ocx-dialog-inline", inputs: { config: "config" }, outputs: { resultEmitter: "resultEmitter" }, ngImport: i0, template: "<div>\n <ocx-dialog-content>\n <ng-content></ng-content>\n </ocx-dialog-content>\n <ocx-dialog-footer [config]=\"config\" (buttonClickedEmitter)=\"buttonClicked($event)\"></ocx-dialog-footer>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: DialogFooterComponent, selector: "ocx-dialog-footer", inputs: ["config"], outputs: ["buttonClickedEmitter"] }, { kind: "component", type: DialogContentComponent, selector: "ocx-dialog-content" }] }); }
|
|
5419
|
+
}
|
|
5420
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogInlineComponent, decorators: [{
|
|
5421
|
+
type: Component,
|
|
5422
|
+
args: [{ standalone: false, selector: 'ocx-dialog-inline', template: "<div>\n <ocx-dialog-content>\n <ng-content></ng-content>\n </ocx-dialog-content>\n <ocx-dialog-footer [config]=\"config\" (buttonClickedEmitter)=\"buttonClicked($event)\"></ocx-dialog-footer>\n</div>\n" }]
|
|
5423
|
+
}], propDecorators: { config: [{
|
|
5424
|
+
type: Input
|
|
5425
|
+
}], resultEmitter: [{
|
|
5426
|
+
type: Output
|
|
5427
|
+
}] } });
|
|
5428
|
+
|
|
5429
|
+
class GlobalErrorComponent {
|
|
5430
|
+
constructor() {
|
|
5431
|
+
this.router = inject(Router);
|
|
5432
|
+
this.route = inject(ActivatedRoute);
|
|
5433
|
+
this.errCode = this.route.snapshot.queryParamMap.get('err') || 'E1001_FAILED_START';
|
|
5434
|
+
this.backUrl = this.route.snapshot.queryParamMap.get('return') || '/';
|
|
5435
|
+
}
|
|
5436
|
+
onGoBack() {
|
|
5437
|
+
this.router.navigateByUrl(this.backUrl);
|
|
5438
|
+
}
|
|
5439
|
+
reload() {
|
|
5440
|
+
window.location.reload();
|
|
5441
|
+
}
|
|
5442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GlobalErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5443
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GlobalErrorComponent, isStandalone: false, selector: "ocx-error", inputs: { errCode: "errCode" }, ngImport: i0, template: "<div class=\"pages-body error-page flex flex-column\">\n <div class=\"align-self-center mt-auto mb-auto\">\n <div class=\"pages-panel card flex flex-column\">\n <div class=\"pages-header px-3 py-1\">\n <h2>ERROR</h2>\n </div>\n <div class=\"card mt-3 px-6\">\n <img src=\"assets/images/error.png\" alt=\"\" />\n </div>\n <div class=\"pages-detail pb-6\">{{errCode}}</div>\n <button pButton pRipple type=\"button\" label=\"Try Again\" (click)=\"reload()\" class=\"p-button-text\"></button>\n </div>\n </div>\n</div>\n", styles: [".pages-body{height:100vh}.pages-body .topbar{box-shadow:0 2px 5px #00000042;background-color:#1565c0;z-index:100}.pages-body .topbar .topbar-left img{height:2rem}.pages-body .topbar .p-button.p-button-text.p-button-plain{color:#fff}.pages-body .pages-panel{text-align:center;z-index:200}.pages-body .pages-panel.card{border:1.5px solid var(--divider-color);border-radius:6px}.pages-body .pages-panel.card img{width:100%}.pages-body .pages-panel.card>.card{background-color:var(--content-alt-bg-color)}.pages-body .pages-panel .pages-header{margin-top:-3rem;color:var(--primary-color-text);border:1.5px solid var(--divider-color);border-radius:4px;margin-left:auto;margin-right:auto}.pages-body .pages-panel .pages-header h2{margin:0}.pages-body .pages-panel .pages-detail{color:var(--text-secondary-color)}.pages-body.error-page{background-size:cover;background-color:var(--primary-color)}.pages-body.error-page .pages-panel .pages-header{background:#d81b60}.pages-body.notfound-page{background-size:cover}.pages-body.notfound-page .pages-panel .pages-header{background:#455a64}.pages-body.accessdenied-page{background-size:cover}.pages-body.accessdenied-page .pages-panel .pages-header{background:#fb8c00}@media screen and (max-width: 768px){.pages-body.contact-page .pages-panel{padding-bottom:10em}.pages-body.contact-page .pages-panel .p-button{width:100%}.pages-body.contact-page .pages-panel .card .right-panel{text-align:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] }); }
|
|
5444
|
+
}
|
|
5445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GlobalErrorComponent, decorators: [{
|
|
5446
|
+
type: Component,
|
|
5447
|
+
args: [{ standalone: false, selector: 'ocx-error', template: "<div class=\"pages-body error-page flex flex-column\">\n <div class=\"align-self-center mt-auto mb-auto\">\n <div class=\"pages-panel card flex flex-column\">\n <div class=\"pages-header px-3 py-1\">\n <h2>ERROR</h2>\n </div>\n <div class=\"card mt-3 px-6\">\n <img src=\"assets/images/error.png\" alt=\"\" />\n </div>\n <div class=\"pages-detail pb-6\">{{errCode}}</div>\n <button pButton pRipple type=\"button\" label=\"Try Again\" (click)=\"reload()\" class=\"p-button-text\"></button>\n </div>\n </div>\n</div>\n", styles: [".pages-body{height:100vh}.pages-body .topbar{box-shadow:0 2px 5px #00000042;background-color:#1565c0;z-index:100}.pages-body .topbar .topbar-left img{height:2rem}.pages-body .topbar .p-button.p-button-text.p-button-plain{color:#fff}.pages-body .pages-panel{text-align:center;z-index:200}.pages-body .pages-panel.card{border:1.5px solid var(--divider-color);border-radius:6px}.pages-body .pages-panel.card img{width:100%}.pages-body .pages-panel.card>.card{background-color:var(--content-alt-bg-color)}.pages-body .pages-panel .pages-header{margin-top:-3rem;color:var(--primary-color-text);border:1.5px solid var(--divider-color);border-radius:4px;margin-left:auto;margin-right:auto}.pages-body .pages-panel .pages-header h2{margin:0}.pages-body .pages-panel .pages-detail{color:var(--text-secondary-color)}.pages-body.error-page{background-size:cover;background-color:var(--primary-color)}.pages-body.error-page .pages-panel .pages-header{background:#d81b60}.pages-body.notfound-page{background-size:cover}.pages-body.notfound-page .pages-panel .pages-header{background:#455a64}.pages-body.accessdenied-page{background-size:cover}.pages-body.accessdenied-page .pages-panel .pages-header{background:#fb8c00}@media screen and (max-width: 768px){.pages-body.contact-page .pages-panel{padding-bottom:10em}.pages-body.contact-page .pages-panel .p-button{width:100%}.pages-body.contact-page .pages-panel .card .right-panel{text-align:center}}\n"] }]
|
|
5448
|
+
}], ctorParameters: () => [], propDecorators: { errCode: [{
|
|
5449
|
+
type: Input
|
|
5450
|
+
}] } });
|
|
5451
|
+
|
|
5452
|
+
class PortalDialogService {
|
|
5453
|
+
constructor() {
|
|
5454
|
+
this.dialogService = inject(DialogService);
|
|
5455
|
+
this.translateService = inject(TranslateService);
|
|
5456
|
+
this.router = inject(Router);
|
|
5457
|
+
this.eventsTopic = new EventsTopic();
|
|
5458
|
+
this.skipStyleScoping = inject(SKIP_STYLE_SCOPING, { optional: true });
|
|
5459
|
+
this.remoteComponentConfig = inject(REMOTE_COMPONENT_CONFIG, { optional: true });
|
|
5460
|
+
this.appStateService = inject(AppStateService);
|
|
5461
|
+
this.capabilityService = inject(ShellCapabilityService);
|
|
5462
|
+
this.router.events.subscribe((event) => {
|
|
5463
|
+
if (event instanceof NavigationStart) {
|
|
5464
|
+
this.cleanupAndCloseDialog();
|
|
5465
|
+
}
|
|
5466
|
+
});
|
|
5467
|
+
let observable = this.appStateService.currentLocation$.asObservable();
|
|
5468
|
+
if (!this.capabilityService.hasCapability(Capability.CURRENT_LOCATION_TOPIC)) {
|
|
5469
|
+
observable = this.eventsTopic.pipe(filter((e) => e.type === 'navigated'));
|
|
5470
|
+
}
|
|
5471
|
+
observable.subscribe(() => {
|
|
5472
|
+
this.cleanupAndCloseDialog();
|
|
5473
|
+
});
|
|
5474
|
+
}
|
|
5475
|
+
ngOnDestroy() {
|
|
5476
|
+
this.cleanupAndCloseDialog();
|
|
5477
|
+
this.eventsTopic.destroy();
|
|
5478
|
+
}
|
|
5479
|
+
openDialog(title, componentOrMessage, primaryButtonTranslationKeyOrDetails, secondaryButtonTranslationKeyOrDetails, extrasOrShowXButton = {}) {
|
|
5480
|
+
const dialogOptions = typeof extrasOrShowXButton === 'object'
|
|
5481
|
+
? extrasOrShowXButton
|
|
5482
|
+
: {
|
|
5483
|
+
showXButton: extrasOrShowXButton,
|
|
5484
|
+
};
|
|
5485
|
+
const translateParams = this.prepareTitleForTranslation(title);
|
|
5486
|
+
const componentToRender = this.getComponentToRender(componentOrMessage);
|
|
5487
|
+
const dynamicDialogDataConfig = {
|
|
5488
|
+
component: componentToRender.type,
|
|
5489
|
+
config: {
|
|
5490
|
+
primaryButtonDetails: this.buttonDetailsOrTranslationKey(primaryButtonTranslationKeyOrDetails),
|
|
5491
|
+
secondaryButtonIncluded: secondaryButtonTranslationKeyOrDetails !== undefined,
|
|
5492
|
+
secondaryButtonDetails: this.buttonDetailsOrTranslationKey(secondaryButtonTranslationKeyOrDetails),
|
|
5493
|
+
customButtons: dialogOptions.customButtons?.map((button) => this.buttonDetailsOrTranslationKey(button)),
|
|
5494
|
+
autoFocusButton: dialogOptions.autoFocusButton,
|
|
5495
|
+
autoFocusButtonCustomId: dialogOptions.autoFocusButtonCustomId,
|
|
5496
|
+
},
|
|
5497
|
+
componentData: componentToRender.inputs,
|
|
5498
|
+
};
|
|
5499
|
+
return this.translateService.get(translateParams.key, translateParams.parameters).pipe(mergeMap((dialogTitle) => {
|
|
5500
|
+
const dialogRef = this.dialogService.open(DialogContentComponent, {
|
|
5501
|
+
header: dialogTitle,
|
|
5502
|
+
data: {
|
|
5503
|
+
...dynamicDialogDataConfig,
|
|
5504
|
+
portalDialogServiceData: {
|
|
5505
|
+
primaryButtonEnabled$: new EventEmitter(),
|
|
5506
|
+
secondaryButtonEnabled$: new EventEmitter(),
|
|
5507
|
+
customButtonEnabled$: new EventEmitter(),
|
|
5508
|
+
buttonClicked$: new EventEmitter(),
|
|
5509
|
+
},
|
|
5510
|
+
},
|
|
5511
|
+
closable: dialogOptions.showXButton && secondaryButtonTranslationKeyOrDetails !== undefined,
|
|
5512
|
+
modal: true,
|
|
5513
|
+
...dialogOptions,
|
|
5514
|
+
focusOnShow: false,
|
|
5515
|
+
appendTo: 'body', // Important for the function findBodyChild
|
|
5516
|
+
duplicate: true, // Since dialog always opens DialogContentComponent, duplicates must be always allowed
|
|
5517
|
+
templates: {
|
|
5518
|
+
footer: DialogFooterComponent,
|
|
5519
|
+
},
|
|
5520
|
+
});
|
|
5521
|
+
this.setScopeIdentifier(this.dialogService.getInstance(dialogRef));
|
|
5522
|
+
return dialogRef.onClose;
|
|
5523
|
+
}));
|
|
5524
|
+
}
|
|
5525
|
+
cleanupAndCloseDialog() {
|
|
5526
|
+
if (this.dialogService.dialogComponentRefMap.size > 0) {
|
|
5527
|
+
this.dialogService.dialogComponentRefMap.forEach((_, dialogRef) => {
|
|
5528
|
+
const dialogComponent = this.dialogService.getInstance(dialogRef);
|
|
5529
|
+
dialogRef.close();
|
|
5530
|
+
this.removeDialogFromHtml(dialogComponent);
|
|
5531
|
+
});
|
|
5532
|
+
}
|
|
5533
|
+
}
|
|
5534
|
+
removeDialogFromHtml(dialogComponent) {
|
|
5535
|
+
const bodyChild = this.findDialogComponentBodyChild(dialogComponent);
|
|
5536
|
+
bodyChild && document.body.removeChild(bodyChild);
|
|
5537
|
+
}
|
|
5538
|
+
setScopeIdentifier(dialogComponent) {
|
|
5539
|
+
getScopeIdentifier(this.appStateService, this.skipStyleScoping ?? undefined, this.remoteComponentConfig ?? undefined).then((scopeId) => {
|
|
5540
|
+
const bodyChild = this.findDialogComponentBodyChild(dialogComponent);
|
|
5541
|
+
if (bodyChild) {
|
|
5542
|
+
bodyChild.dataset[dataStyleIdKey] = scopeId;
|
|
5543
|
+
bodyChild.dataset[dataNoPortalLayoutStylesKey] = '';
|
|
5544
|
+
}
|
|
5545
|
+
});
|
|
5546
|
+
}
|
|
5547
|
+
findDialogComponentBodyChild(dialogComponent) {
|
|
5548
|
+
const element = dialogComponent.el.nativeElement;
|
|
5549
|
+
if (!element)
|
|
5550
|
+
return;
|
|
5551
|
+
return this.findBodyChild(element);
|
|
5552
|
+
}
|
|
5553
|
+
findBodyChild(element) {
|
|
5554
|
+
let currentNode = element;
|
|
5555
|
+
while (currentNode.parentElement && currentNode.parentElement != document.body) {
|
|
5556
|
+
currentNode = currentNode.parentElement;
|
|
5557
|
+
}
|
|
5558
|
+
return currentNode.parentElement === document.body ? currentNode : undefined;
|
|
5559
|
+
}
|
|
5560
|
+
prepareTitleForTranslation(title) {
|
|
5561
|
+
if (!title)
|
|
5562
|
+
return { key: '', parameters: {} };
|
|
5563
|
+
if (this.isString(title))
|
|
5564
|
+
return { key: title, parameters: {} };
|
|
5565
|
+
return title;
|
|
5566
|
+
}
|
|
5567
|
+
buttonDetailsOrTranslationKey(buttonTranslationKeyOrDetails) {
|
|
5568
|
+
if (buttonTranslationKeyOrDetails === undefined) {
|
|
5569
|
+
return undefined;
|
|
5570
|
+
}
|
|
5571
|
+
let buttonDetails;
|
|
5572
|
+
if (this.isString(buttonTranslationKeyOrDetails)) {
|
|
5573
|
+
buttonDetails = {
|
|
5574
|
+
key: buttonTranslationKeyOrDetails,
|
|
5575
|
+
};
|
|
5576
|
+
}
|
|
5577
|
+
else {
|
|
5578
|
+
buttonDetails = buttonTranslationKeyOrDetails;
|
|
5579
|
+
}
|
|
5580
|
+
return buttonDetails;
|
|
5581
|
+
}
|
|
5582
|
+
getComponentToRender(componentOrMessage) {
|
|
5583
|
+
if (this.isTranslationKey(componentOrMessage)) {
|
|
5584
|
+
return {
|
|
5585
|
+
type: DialogMessageContentComponent,
|
|
5586
|
+
inputs: {
|
|
5587
|
+
message: this.isString(componentOrMessage) ? componentOrMessage : componentOrMessage.key,
|
|
5588
|
+
messageParameters: this.isString(componentOrMessage) ? {} : componentOrMessage.parameters,
|
|
5589
|
+
},
|
|
5590
|
+
};
|
|
5591
|
+
}
|
|
5592
|
+
else if (this.isDialogMessage(componentOrMessage)) {
|
|
5593
|
+
return {
|
|
5594
|
+
type: DialogMessageContentComponent,
|
|
5595
|
+
inputs: {
|
|
5596
|
+
message: this.isString(componentOrMessage.message)
|
|
5597
|
+
? componentOrMessage.message
|
|
5598
|
+
: componentOrMessage.message.key,
|
|
5599
|
+
icon: componentOrMessage.icon,
|
|
5600
|
+
messageParameters: this.isString(componentOrMessage.message) ? {} : componentOrMessage.message.parameters,
|
|
5601
|
+
},
|
|
5602
|
+
};
|
|
5603
|
+
}
|
|
5604
|
+
else if (this.isType(componentOrMessage)) {
|
|
5605
|
+
return {
|
|
5606
|
+
type: componentOrMessage,
|
|
5607
|
+
};
|
|
5608
|
+
}
|
|
5609
|
+
return componentOrMessage;
|
|
5610
|
+
}
|
|
5611
|
+
isTranslationKey(obj) {
|
|
5612
|
+
return this.isString(obj) || ('key' in obj && 'parameters' in obj);
|
|
5613
|
+
}
|
|
5614
|
+
isString(obj) {
|
|
5615
|
+
return typeof obj === 'string' || obj instanceof String;
|
|
5616
|
+
}
|
|
5617
|
+
isDialogMessage(obj) {
|
|
5618
|
+
return 'message' in obj && 'icon' in obj;
|
|
5619
|
+
}
|
|
5620
|
+
isType(obj) {
|
|
5621
|
+
return obj instanceof Type;
|
|
5622
|
+
}
|
|
5623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PortalDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5624
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PortalDialogService, providedIn: 'any' }); }
|
|
5625
|
+
}
|
|
5626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PortalDialogService, decorators: [{
|
|
5627
|
+
type: Injectable,
|
|
5628
|
+
args: [{ providedIn: 'any' }]
|
|
5629
|
+
}], ctorParameters: () => [] });
|
|
5630
|
+
function providePortalDialogService() {
|
|
5631
|
+
return [DialogService, PortalDialogService];
|
|
5632
|
+
}
|
|
5633
|
+
|
|
5634
|
+
class DateUtils {
|
|
5635
|
+
constructor() {
|
|
5636
|
+
this.locale = inject(LOCALE_ID);
|
|
5637
|
+
this.options = {
|
|
5638
|
+
month: 'short',
|
|
5639
|
+
day: '2-digit',
|
|
5640
|
+
year: 'numeric',
|
|
5641
|
+
hour: 'numeric',
|
|
5642
|
+
minute: '2-digit',
|
|
5643
|
+
second: '2-digit',
|
|
5644
|
+
};
|
|
5645
|
+
}
|
|
5646
|
+
localizedDate(date) {
|
|
5647
|
+
return date
|
|
5648
|
+
? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
|
|
5649
|
+
: '';
|
|
5650
|
+
}
|
|
5651
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5652
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
|
|
5653
|
+
}
|
|
5654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateUtils, decorators: [{
|
|
5655
|
+
type: Injectable,
|
|
5656
|
+
args: [{
|
|
5657
|
+
providedIn: 'root',
|
|
5658
|
+
}]
|
|
5659
|
+
}] });
|
|
5660
|
+
|
|
5661
|
+
class ExportDataService {
|
|
5662
|
+
constructor() {
|
|
5663
|
+
this.dateUtils = inject(DateUtils);
|
|
5664
|
+
this.translateService = inject(TranslateService);
|
|
5665
|
+
this.locale = inject(LOCALE_ID);
|
|
5666
|
+
}
|
|
5667
|
+
async exportCsv(columns, data, fileName) {
|
|
5668
|
+
if (!columns.length) {
|
|
5669
|
+
return;
|
|
5670
|
+
}
|
|
5671
|
+
const flattenedData = data.map((d) => columns.reduce((obj, c) => ({ ...obj, [c.id]: ObjectUtils.resolveFieldData(d, c.id) }), {}));
|
|
5672
|
+
const translatedData = await firstValueFrom(this.translateData(columns, flattenedData));
|
|
5673
|
+
const dataToExport = this.formatData(columns, translatedData);
|
|
5674
|
+
const delimiter = this.locale.startsWith('de') ? ';' : ',';
|
|
5675
|
+
const dataString = dataToExport
|
|
5676
|
+
.map((d) => columns
|
|
5677
|
+
.reduce((arr, c) => [...arr, d[c.id]], [])
|
|
5678
|
+
.map((d) => this.escapeDelimiter(delimiter, d))
|
|
5679
|
+
.join(delimiter))
|
|
5680
|
+
.join('\r\n');
|
|
5681
|
+
const headerString = (await firstValueFrom(this.translateColumnNames(columns)))
|
|
5682
|
+
.map((c) => c.name)
|
|
5683
|
+
.map((c) => this.escapeDelimiter(delimiter, c))
|
|
5684
|
+
.join(delimiter);
|
|
5685
|
+
const csvString = headerString + '\r\n' + dataString;
|
|
5686
|
+
const blob = new Blob(['\ufeff' + csvString], {
|
|
5687
|
+
type: 'text/csv;charset=utf-8;',
|
|
5688
|
+
});
|
|
5689
|
+
const dwldLink = document.createElement('a');
|
|
5690
|
+
const url = URL.createObjectURL(blob);
|
|
5691
|
+
dwldLink.setAttribute('href', url);
|
|
5692
|
+
dwldLink.setAttribute('download', fileName);
|
|
5693
|
+
dwldLink.click();
|
|
5694
|
+
}
|
|
5695
|
+
translateColumnNames(columns) {
|
|
5696
|
+
return this.translateService
|
|
5697
|
+
.get(columns.map((c) => c.nameKey))
|
|
5698
|
+
.pipe(map((translations) => columns.map((c) => ({ ...c, name: translations[c.nameKey] }))));
|
|
5699
|
+
}
|
|
5700
|
+
formatData(columns, data) {
|
|
5701
|
+
return data.map((d) => columns.reduce((obj, c) => {
|
|
5702
|
+
if (c.columnType === ColumnType.DATE || c.columnType === ColumnType.RELATIVE_DATE) {
|
|
5703
|
+
return {
|
|
5704
|
+
...obj,
|
|
5705
|
+
[c.id]: this.dateUtils.localizedDate(d[c.id] ? String(d[c.id]) : undefined),
|
|
5706
|
+
};
|
|
5707
|
+
}
|
|
5708
|
+
return { ...obj, [c.id]: d[c.id] };
|
|
5709
|
+
}, {}));
|
|
5710
|
+
}
|
|
5711
|
+
translateData(columns, data) {
|
|
5712
|
+
let translationKeys = [];
|
|
5713
|
+
const translatedColumns = columns.filter((c) => c.columnType === ColumnType.TRANSLATION_KEY);
|
|
5714
|
+
translatedColumns.forEach((c) => {
|
|
5715
|
+
translationKeys = [...translationKeys, ...data.map((i) => i[c.id]?.toString() ?? '')];
|
|
5716
|
+
});
|
|
5717
|
+
if (translationKeys.length) {
|
|
5718
|
+
return this.translateService.get(translationKeys).pipe(map((translatedValues) => {
|
|
5719
|
+
return data.map((d) => columns.reduce((obj, c) => ({
|
|
5720
|
+
...obj,
|
|
5721
|
+
[c.id]: c.columnType === ColumnType.TRANSLATION_KEY ? translatedValues[String(d[c.id])] : d[c.id],
|
|
5722
|
+
}), {}));
|
|
5723
|
+
}));
|
|
5724
|
+
}
|
|
5725
|
+
return of(data);
|
|
5726
|
+
}
|
|
5727
|
+
escapeDelimiter(delimiter, data) {
|
|
5728
|
+
if (data === null || data === undefined) {
|
|
5729
|
+
return data;
|
|
5730
|
+
}
|
|
5731
|
+
let str = String(data);
|
|
5732
|
+
if (str.includes('"')) {
|
|
5733
|
+
str = str.replaceAll('"', '""');
|
|
5734
|
+
}
|
|
5735
|
+
if (str.includes(delimiter)) {
|
|
5736
|
+
str = `"${str}"`;
|
|
5737
|
+
}
|
|
5738
|
+
return str;
|
|
5739
|
+
}
|
|
5740
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5741
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportDataService, providedIn: 'any' }); }
|
|
5742
|
+
}
|
|
5743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportDataService, decorators: [{
|
|
5744
|
+
type: Injectable,
|
|
5745
|
+
args: [{ providedIn: 'any' }]
|
|
5746
|
+
}] });
|
|
5747
|
+
|
|
5748
|
+
const DIVISIONS = [
|
|
5749
|
+
{ amount: 60, name: 'seconds' },
|
|
5750
|
+
{ amount: 60, name: 'minutes' },
|
|
5751
|
+
{ amount: 24, name: 'hours' },
|
|
5752
|
+
{ amount: 7, name: 'days' },
|
|
5753
|
+
{ amount: 4.34524, name: 'weeks' },
|
|
5754
|
+
{ amount: 12, name: 'months' },
|
|
5755
|
+
{ amount: Number.POSITIVE_INFINITY, name: 'years' },
|
|
5756
|
+
];
|
|
5757
|
+
class RelativeDatePipe {
|
|
5758
|
+
constructor() {
|
|
5759
|
+
this.translateService = inject(TranslateService);
|
|
5760
|
+
this.rtf = new Intl.RelativeTimeFormat(this.translateService.currentLang, {
|
|
5761
|
+
style: 'long',
|
|
5762
|
+
});
|
|
5763
|
+
}
|
|
5764
|
+
transform(value) {
|
|
5765
|
+
let date = new Date();
|
|
5766
|
+
switch (typeof value) {
|
|
5767
|
+
case 'string':
|
|
5768
|
+
date = new Date(value);
|
|
5769
|
+
break;
|
|
5770
|
+
case 'object':
|
|
5771
|
+
date = value;
|
|
5772
|
+
break;
|
|
5773
|
+
default:
|
|
5774
|
+
break;
|
|
5775
|
+
}
|
|
5776
|
+
let duration = (date.getTime() - new Date().getTime()) / 1000;
|
|
5777
|
+
for (let i = 0; i <= DIVISIONS.length; i++) {
|
|
5778
|
+
const division = DIVISIONS[i];
|
|
5779
|
+
if (Math.abs(duration) < division.amount) {
|
|
5780
|
+
return this.rtf.format(Math.round(duration), division.name);
|
|
5781
|
+
}
|
|
5782
|
+
duration /= division.amount;
|
|
5783
|
+
}
|
|
5784
|
+
}
|
|
5785
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RelativeDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5786
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: RelativeDatePipe, isStandalone: false, name: "relativeDate" }); }
|
|
5787
|
+
}
|
|
5788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RelativeDatePipe, decorators: [{
|
|
5789
|
+
type: Pipe,
|
|
5790
|
+
args: [{
|
|
5791
|
+
name: 'relativeDate',
|
|
5792
|
+
standalone: false,
|
|
5793
|
+
}]
|
|
5794
|
+
}], ctorParameters: () => [] });
|
|
5305
5795
|
|
|
5306
5796
|
class AngularAcceleratorPrimeNgModule {
|
|
5307
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
5308
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
5797
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5798
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
|
|
5309
5799
|
ChipModule,
|
|
5310
5800
|
CheckboxModule,
|
|
5311
5801
|
SelectModule,
|
|
@@ -5323,8 +5813,9 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5323
5813
|
FloatLabelModule,
|
|
5324
5814
|
PopoverModule,
|
|
5325
5815
|
FocusTrapModule,
|
|
5326
|
-
|
|
5816
|
+
TooltipModule,
|
|
5327
5817
|
TimelineModule,
|
|
5818
|
+
SelectButtonModule,
|
|
5328
5819
|
SharedModule], exports: [BreadcrumbModule,
|
|
5329
5820
|
ChipModule,
|
|
5330
5821
|
CheckboxModule,
|
|
@@ -5343,10 +5834,11 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5343
5834
|
FloatLabelModule,
|
|
5344
5835
|
PopoverModule,
|
|
5345
5836
|
FocusTrapModule,
|
|
5346
|
-
|
|
5837
|
+
TooltipModule,
|
|
5347
5838
|
TimelineModule,
|
|
5839
|
+
SelectButtonModule,
|
|
5348
5840
|
SharedModule] }); }
|
|
5349
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
5841
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorPrimeNgModule, providers: [providePrimeNG()], imports: [BreadcrumbModule,
|
|
5350
5842
|
ChipModule,
|
|
5351
5843
|
CheckboxModule,
|
|
5352
5844
|
SelectModule,
|
|
@@ -5364,7 +5856,9 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5364
5856
|
FloatLabelModule,
|
|
5365
5857
|
PopoverModule,
|
|
5366
5858
|
FocusTrapModule,
|
|
5859
|
+
TooltipModule,
|
|
5367
5860
|
TimelineModule,
|
|
5861
|
+
SelectButtonModule,
|
|
5368
5862
|
SharedModule, BreadcrumbModule,
|
|
5369
5863
|
ChipModule,
|
|
5370
5864
|
CheckboxModule,
|
|
@@ -5383,10 +5877,12 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
5383
5877
|
FloatLabelModule,
|
|
5384
5878
|
PopoverModule,
|
|
5385
5879
|
FocusTrapModule,
|
|
5880
|
+
TooltipModule,
|
|
5386
5881
|
TimelineModule,
|
|
5882
|
+
SelectButtonModule,
|
|
5387
5883
|
SharedModule] }); }
|
|
5388
5884
|
}
|
|
5389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
5885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
|
|
5390
5886
|
type: NgModule,
|
|
5391
5887
|
args: [{
|
|
5392
5888
|
imports: [
|
|
@@ -5408,8 +5904,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5408
5904
|
FloatLabelModule,
|
|
5409
5905
|
PopoverModule,
|
|
5410
5906
|
FocusTrapModule,
|
|
5411
|
-
|
|
5907
|
+
TooltipModule,
|
|
5412
5908
|
TimelineModule,
|
|
5909
|
+
SelectButtonModule,
|
|
5413
5910
|
SharedModule,
|
|
5414
5911
|
],
|
|
5415
5912
|
exports: [
|
|
@@ -5431,8 +5928,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5431
5928
|
FloatLabelModule,
|
|
5432
5929
|
PopoverModule,
|
|
5433
5930
|
FocusTrapModule,
|
|
5434
|
-
|
|
5931
|
+
TooltipModule,
|
|
5435
5932
|
TimelineModule,
|
|
5933
|
+
SelectButtonModule,
|
|
5436
5934
|
SharedModule,
|
|
5437
5935
|
],
|
|
5438
5936
|
providers: [providePrimeNG()],
|
|
@@ -5460,19 +5958,6 @@ class DynamicLocaleId {
|
|
|
5460
5958
|
}
|
|
5461
5959
|
}
|
|
5462
5960
|
|
|
5463
|
-
function provideTranslationConnectionService() {
|
|
5464
|
-
return [
|
|
5465
|
-
{
|
|
5466
|
-
provide: ENVIRONMENT_INITIALIZER,
|
|
5467
|
-
multi: true,
|
|
5468
|
-
useFactory() {
|
|
5469
|
-
return () => inject(TranslationConnectionService);
|
|
5470
|
-
},
|
|
5471
|
-
},
|
|
5472
|
-
TranslationConnectionService,
|
|
5473
|
-
];
|
|
5474
|
-
}
|
|
5475
|
-
|
|
5476
5961
|
class AngularAcceleratorMissingTranslationHandler {
|
|
5477
5962
|
handle(params) {
|
|
5478
5963
|
console.log(`Missing translation for ${params.key}`, params);
|
|
@@ -5485,8 +5970,8 @@ function appInitializer(userService) {
|
|
|
5485
5970
|
};
|
|
5486
5971
|
}
|
|
5487
5972
|
class AngularAcceleratorModule {
|
|
5488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
5489
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
5973
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5974
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorModule, declarations: [ColumnGroupSelectionComponent,
|
|
5490
5975
|
CustomGroupColumnSelectorComponent,
|
|
5491
5976
|
DataLayoutSelectionComponent,
|
|
5492
5977
|
DataListGridSortingComponent,
|
|
@@ -5500,7 +5985,6 @@ class AngularAcceleratorModule {
|
|
|
5500
5985
|
SearchHeaderComponent,
|
|
5501
5986
|
DiagramComponent,
|
|
5502
5987
|
GroupByCountDiagramComponent,
|
|
5503
|
-
DataLoadingErrorComponent,
|
|
5504
5988
|
OcxContentComponent,
|
|
5505
5989
|
OcxContentContainerComponent,
|
|
5506
5990
|
IfPermissionDirective,
|
|
@@ -5512,7 +5996,15 @@ class AngularAcceleratorModule {
|
|
|
5512
5996
|
FilterViewComponent,
|
|
5513
5997
|
TemplateDirective,
|
|
5514
5998
|
OcxContentDirective,
|
|
5515
|
-
OcxContentContainerDirective
|
|
5999
|
+
OcxContentContainerDirective,
|
|
6000
|
+
GlobalErrorComponent,
|
|
6001
|
+
LoadingIndicatorComponent,
|
|
6002
|
+
LoadingIndicatorDirective,
|
|
6003
|
+
BasicDirective,
|
|
6004
|
+
DialogFooterComponent,
|
|
6005
|
+
DialogContentComponent,
|
|
6006
|
+
DialogInlineComponent,
|
|
6007
|
+
DialogMessageContentComponent], imports: [CommonModule,
|
|
5516
6008
|
AngularAcceleratorPrimeNgModule,
|
|
5517
6009
|
AngularRemoteComponentsModule,
|
|
5518
6010
|
TranslateModule,
|
|
@@ -5531,7 +6023,6 @@ class AngularAcceleratorModule {
|
|
|
5531
6023
|
SearchHeaderComponent,
|
|
5532
6024
|
DiagramComponent,
|
|
5533
6025
|
GroupByCountDiagramComponent,
|
|
5534
|
-
DataLoadingErrorComponent,
|
|
5535
6026
|
OcxContentComponent,
|
|
5536
6027
|
OcxContentContainerComponent,
|
|
5537
6028
|
IfPermissionDirective,
|
|
@@ -5543,8 +6034,16 @@ class AngularAcceleratorModule {
|
|
|
5543
6034
|
FilterViewComponent,
|
|
5544
6035
|
TemplateDirective,
|
|
5545
6036
|
OcxContentDirective,
|
|
5546
|
-
OcxContentContainerDirective
|
|
5547
|
-
|
|
6037
|
+
OcxContentContainerDirective,
|
|
6038
|
+
GlobalErrorComponent,
|
|
6039
|
+
LoadingIndicatorComponent,
|
|
6040
|
+
LoadingIndicatorDirective,
|
|
6041
|
+
BasicDirective,
|
|
6042
|
+
DialogFooterComponent,
|
|
6043
|
+
DialogContentComponent,
|
|
6044
|
+
DialogInlineComponent,
|
|
6045
|
+
DialogMessageContentComponent] }); }
|
|
6046
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorModule, providers: [
|
|
5548
6047
|
providePermissionChecker(),
|
|
5549
6048
|
{
|
|
5550
6049
|
provide: LOCALE_ID,
|
|
@@ -5567,6 +6066,10 @@ class AngularAcceleratorModule {
|
|
|
5567
6066
|
useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
|
|
5568
6067
|
multi: true,
|
|
5569
6068
|
},
|
|
6069
|
+
{
|
|
6070
|
+
provide: MessageService,
|
|
6071
|
+
useClass: MessageService,
|
|
6072
|
+
},
|
|
5570
6073
|
AppConfigService,
|
|
5571
6074
|
provideTranslationConnectionService(),
|
|
5572
6075
|
], imports: [CommonModule,
|
|
@@ -5577,7 +6080,7 @@ class AngularAcceleratorModule {
|
|
|
5577
6080
|
RouterModule,
|
|
5578
6081
|
ReactiveFormsModule, AngularRemoteComponentsModule] }); }
|
|
5579
6082
|
}
|
|
5580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
6083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AngularAcceleratorModule, decorators: [{
|
|
5581
6084
|
type: NgModule,
|
|
5582
6085
|
args: [{
|
|
5583
6086
|
imports: [
|
|
@@ -5604,7 +6107,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5604
6107
|
SearchHeaderComponent,
|
|
5605
6108
|
DiagramComponent,
|
|
5606
6109
|
GroupByCountDiagramComponent,
|
|
5607
|
-
DataLoadingErrorComponent,
|
|
5608
6110
|
OcxContentComponent,
|
|
5609
6111
|
OcxContentContainerComponent,
|
|
5610
6112
|
IfPermissionDirective,
|
|
@@ -5617,6 +6119,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5617
6119
|
TemplateDirective,
|
|
5618
6120
|
OcxContentDirective,
|
|
5619
6121
|
OcxContentContainerDirective,
|
|
6122
|
+
GlobalErrorComponent,
|
|
6123
|
+
LoadingIndicatorComponent,
|
|
6124
|
+
LoadingIndicatorDirective,
|
|
6125
|
+
BasicDirective,
|
|
6126
|
+
DialogFooterComponent,
|
|
6127
|
+
DialogContentComponent,
|
|
6128
|
+
DialogInlineComponent,
|
|
6129
|
+
DialogMessageContentComponent,
|
|
5620
6130
|
],
|
|
5621
6131
|
providers: [
|
|
5622
6132
|
providePermissionChecker(),
|
|
@@ -5641,6 +6151,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5641
6151
|
useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
|
|
5642
6152
|
multi: true,
|
|
5643
6153
|
},
|
|
6154
|
+
{
|
|
6155
|
+
provide: MessageService,
|
|
6156
|
+
useClass: MessageService,
|
|
6157
|
+
},
|
|
5644
6158
|
AppConfigService,
|
|
5645
6159
|
provideTranslationConnectionService(),
|
|
5646
6160
|
],
|
|
@@ -5658,7 +6172,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5658
6172
|
SearchHeaderComponent,
|
|
5659
6173
|
DiagramComponent,
|
|
5660
6174
|
GroupByCountDiagramComponent,
|
|
5661
|
-
DataLoadingErrorComponent,
|
|
5662
6175
|
OcxContentComponent,
|
|
5663
6176
|
OcxContentContainerComponent,
|
|
5664
6177
|
IfPermissionDirective,
|
|
@@ -5671,6 +6184,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5671
6184
|
TemplateDirective,
|
|
5672
6185
|
OcxContentDirective,
|
|
5673
6186
|
OcxContentContainerDirective,
|
|
6187
|
+
GlobalErrorComponent,
|
|
6188
|
+
LoadingIndicatorComponent,
|
|
6189
|
+
LoadingIndicatorDirective,
|
|
6190
|
+
BasicDirective,
|
|
6191
|
+
DialogFooterComponent,
|
|
6192
|
+
DialogContentComponent,
|
|
6193
|
+
DialogInlineComponent,
|
|
6194
|
+
DialogMessageContentComponent,
|
|
5674
6195
|
],
|
|
5675
6196
|
}]
|
|
5676
6197
|
}] });
|
|
@@ -5682,37 +6203,6 @@ const atLeastOneFieldFilledValidator = (form) => {
|
|
|
5682
6203
|
return null;
|
|
5683
6204
|
};
|
|
5684
6205
|
|
|
5685
|
-
/**
|
|
5686
|
-
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5687
|
-
*/
|
|
5688
|
-
class AsyncTranslateLoader {
|
|
5689
|
-
static { this.lastTimerId = 0; }
|
|
5690
|
-
constructor(translateLoader$) {
|
|
5691
|
-
this.translateLoader$ = translateLoader$;
|
|
5692
|
-
this.timerId = AsyncTranslateLoader.lastTimerId++;
|
|
5693
|
-
}
|
|
5694
|
-
getTranslation(lang) {
|
|
5695
|
-
return this.translateLoader$.pipe(tap(() => console.time('AsyncTranslateLoader_' + this.timerId)), defaultIfEmpty(undefined), first(), mergeMap((translateLoader) => translateLoader?.getTranslation(lang) ?? of({})), tap(() => console.timeEnd('AsyncTranslateLoader_' + this.timerId)));
|
|
5696
|
-
}
|
|
5697
|
-
}
|
|
5698
|
-
|
|
5699
|
-
/**
|
|
5700
|
-
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5701
|
-
*/
|
|
5702
|
-
class CachingTranslateLoader {
|
|
5703
|
-
constructor(translationCache, http, prefix, suffix) {
|
|
5704
|
-
this.translationCache = translationCache;
|
|
5705
|
-
this.http = http;
|
|
5706
|
-
this.prefix = prefix;
|
|
5707
|
-
this.suffix = suffix;
|
|
5708
|
-
this.translateLoader = new TranslateHttpLoader(this.http, this.prefix, this.suffix);
|
|
5709
|
-
}
|
|
5710
|
-
getTranslation(lang) {
|
|
5711
|
-
const url = `${this.prefix}${lang}${this.suffix}`;
|
|
5712
|
-
return this.translationCache.getTranslationFile(url, () => this.translateLoader.getTranslation(lang));
|
|
5713
|
-
}
|
|
5714
|
-
}
|
|
5715
|
-
|
|
5716
6206
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
5717
6207
|
class DataOperationStrategy {
|
|
5718
6208
|
endsWith(column, value, target) {
|
|
@@ -5794,127 +6284,6 @@ class DataOperationStrategy {
|
|
|
5794
6284
|
}
|
|
5795
6285
|
}
|
|
5796
6286
|
|
|
5797
|
-
/**
|
|
5798
|
-
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5799
|
-
*/
|
|
5800
|
-
class TranslateCombinedLoader {
|
|
5801
|
-
constructor(...loaders) {
|
|
5802
|
-
this._loaders = loaders;
|
|
5803
|
-
}
|
|
5804
|
-
getTranslation(lang) {
|
|
5805
|
-
return forkJoin(this._loaders.map((l) => l.getTranslation(lang).pipe(catchError(err => {
|
|
5806
|
-
console.error('Failed to load translation file', l, err);
|
|
5807
|
-
return of({});
|
|
5808
|
-
})))).pipe(map((allTranslations) => {
|
|
5809
|
-
let result = {};
|
|
5810
|
-
allTranslations.forEach((translations) => {
|
|
5811
|
-
result = this.mergeDeep(result, translations);
|
|
5812
|
-
});
|
|
5813
|
-
return result;
|
|
5814
|
-
}));
|
|
5815
|
-
}
|
|
5816
|
-
isObject(item) {
|
|
5817
|
-
return item && typeof item === 'object' && !Array.isArray(item);
|
|
5818
|
-
}
|
|
5819
|
-
mergeDeep(target, source) {
|
|
5820
|
-
const output = Object.assign({}, target);
|
|
5821
|
-
if (this.isObject(target) && this.isObject(source)) {
|
|
5822
|
-
Object.keys(source).forEach((key) => {
|
|
5823
|
-
if (this.isObject(source[key])) {
|
|
5824
|
-
if (!(key in target))
|
|
5825
|
-
Object.assign(output, { [key]: source[key] });
|
|
5826
|
-
else
|
|
5827
|
-
output[key] = this.mergeDeep(target[key], source[key]);
|
|
5828
|
-
}
|
|
5829
|
-
else {
|
|
5830
|
-
Object.assign(output, { [key]: source[key] });
|
|
5831
|
-
}
|
|
5832
|
-
});
|
|
5833
|
-
}
|
|
5834
|
-
return output;
|
|
5835
|
-
}
|
|
5836
|
-
}
|
|
5837
|
-
|
|
5838
|
-
let lastTranslateLoaderTimerId$1 = 0;
|
|
5839
|
-
/**
|
|
5840
|
-
* @deprecated Please import from `@onecx/angular-utils` instead.
|
|
5841
|
-
*/
|
|
5842
|
-
function createTranslateLoader(http, appStateService, translationCacheService) {
|
|
5843
|
-
const ts = translationCacheService ?? inject(TranslationCacheService);
|
|
5844
|
-
const timerId = lastTranslateLoaderTimerId$1++;
|
|
5845
|
-
console.time('createTranslateLoader_' + timerId);
|
|
5846
|
-
return new AsyncTranslateLoader(combineLatest([appStateService.currentMfe$.asObservable(), appStateService.globalLoading$.asObservable()]).pipe(filter(([, isLoading]) => !isLoading), map(([currentMfe]) => {
|
|
5847
|
-
return new TranslateCombinedLoader(
|
|
5848
|
-
// translations of shell or of app in standalone mode
|
|
5849
|
-
new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'),
|
|
5850
|
-
// translations of portal-integration-angular of app
|
|
5851
|
-
new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/`), '.json'),
|
|
5852
|
-
// translations of portal-integration-angular of shell
|
|
5853
|
-
new CachingTranslateLoader(ts, http, `./onecx-portal-lib/assets/i18n/`, '.json'),
|
|
5854
|
-
// Primelocale Translations
|
|
5855
|
-
new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/primeng/`), '.json'),
|
|
5856
|
-
// translations of the app
|
|
5857
|
-
new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `assets/i18n/`), '.json'));
|
|
5858
|
-
}), tap(() => console.timeEnd('createTranslateLoader_' + timerId))));
|
|
5859
|
-
}
|
|
5860
|
-
|
|
5861
|
-
class DateUtils {
|
|
5862
|
-
constructor() {
|
|
5863
|
-
this.locale = inject(LOCALE_ID);
|
|
5864
|
-
this.options = {
|
|
5865
|
-
month: 'short',
|
|
5866
|
-
day: '2-digit',
|
|
5867
|
-
year: 'numeric',
|
|
5868
|
-
hour: 'numeric',
|
|
5869
|
-
minute: '2-digit',
|
|
5870
|
-
second: '2-digit',
|
|
5871
|
-
};
|
|
5872
|
-
}
|
|
5873
|
-
localizedDate(date) {
|
|
5874
|
-
return date
|
|
5875
|
-
? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
|
|
5876
|
-
: '';
|
|
5877
|
-
}
|
|
5878
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DateUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5879
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
|
|
5880
|
-
}
|
|
5881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DateUtils, decorators: [{
|
|
5882
|
-
type: Injectable,
|
|
5883
|
-
args: [{
|
|
5884
|
-
providedIn: 'root',
|
|
5885
|
-
}]
|
|
5886
|
-
}] });
|
|
5887
|
-
/**
|
|
5888
|
-
* @deprecated Will be removed. Please use isValidDate() from @onecx/accelerator
|
|
5889
|
-
*/
|
|
5890
|
-
function isValidDate(value) {
|
|
5891
|
-
return value instanceof Date && !isNaN(value);
|
|
5892
|
-
}
|
|
5893
|
-
|
|
5894
|
-
let lastTranslateLoaderTimerId = 0;
|
|
5895
|
-
function createRemoteComponentTranslateLoader(http, baseUrlReplaySubject$, translationCacheService) {
|
|
5896
|
-
const ts = translationCacheService ?? inject(TranslationCacheService);
|
|
5897
|
-
const timerId = lastTranslateLoaderTimerId++;
|
|
5898
|
-
console.time('createRemoteComponentTranslateLoader_' + timerId);
|
|
5899
|
-
return new AsyncTranslateLoader(baseUrlReplaySubject$.pipe(map((baseUrl) => {
|
|
5900
|
-
return new TranslateCombinedLoader(
|
|
5901
|
-
// translations of shell or of app in standalone mode
|
|
5902
|
-
new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'),
|
|
5903
|
-
// translations of portal-integration-angular of app
|
|
5904
|
-
new CachingTranslateLoader(ts, http, Location.joinWithSlash(baseUrl, `onecx-portal-lib/assets/i18n/`), '.json'),
|
|
5905
|
-
// translations of portal-integration-angular of shell
|
|
5906
|
-
new CachingTranslateLoader(ts, http, `./onecx-portal-lib/assets/i18n/`, '.json'),
|
|
5907
|
-
// translations of the app
|
|
5908
|
-
new CachingTranslateLoader(ts, http, Location.joinWithSlash(baseUrl, `assets/i18n/`), '.json'));
|
|
5909
|
-
}), tap(() => console.timeEnd('createRemoteComponentTranslateLoader_' + timerId))));
|
|
5910
|
-
}
|
|
5911
|
-
|
|
5912
|
-
function createRemoteComponentAndMfeTranslateLoader(httpClient, baseUrl, translationCacheService, appStateService) {
|
|
5913
|
-
return new AsyncTranslateLoader(appStateService.currentMfe$.pipe(map((currentMfe) => {
|
|
5914
|
-
return new TranslateCombinedLoader(createRemoteComponentTranslateLoader(httpClient, baseUrl, translationCacheService), new CachingTranslateLoader(translationCacheService, httpClient, Location.joinWithSlash(currentMfe.remoteBaseUrl, 'assets/i18n/'), '.json'));
|
|
5915
|
-
})));
|
|
5916
|
-
}
|
|
5917
|
-
|
|
5918
6287
|
function enumToDropdownOptions(translateService, enumType, translationKeyPrefix) {
|
|
5919
6288
|
return translateService.get(Object.values(enumType).map((v) => translationKeyPrefix + v)).pipe(map((translations) => Object.values(enumType).map((v) => ({
|
|
5920
6289
|
label: translations[translationKeyPrefix + v],
|
|
@@ -5939,7 +6308,7 @@ function buildSearchCriteria(formRawValue, datePickers, { removeNullValues = fal
|
|
|
5939
6308
|
if (value == null && removeNullValues) {
|
|
5940
6309
|
return acc;
|
|
5941
6310
|
}
|
|
5942
|
-
if (isValidDate
|
|
6311
|
+
if (isValidDate(value) && !_hasShowTime(datePickers, key)) {
|
|
5943
6312
|
value = getUTCDateWithoutTimezoneIssues(value);
|
|
5944
6313
|
}
|
|
5945
6314
|
return {
|
|
@@ -5971,11 +6340,24 @@ function searchPrefixWithSpecialChars(strings, prefix) {
|
|
|
5971
6340
|
return null;
|
|
5972
6341
|
}
|
|
5973
6342
|
|
|
6343
|
+
class ImageLogoUrlUtils {
|
|
6344
|
+
static createLogoUrl(apiPrefix, url) {
|
|
6345
|
+
//if the url is from the backend, then we insert the apiPrefix
|
|
6346
|
+
if ((url && !url.match(/^(http|https)/g))) {
|
|
6347
|
+
return apiPrefix + url;
|
|
6348
|
+
}
|
|
6349
|
+
else {
|
|
6350
|
+
return url;
|
|
6351
|
+
}
|
|
6352
|
+
}
|
|
6353
|
+
}
|
|
6354
|
+
|
|
5974
6355
|
// injection tokens + related utilities
|
|
6356
|
+
// directives
|
|
5975
6357
|
|
|
5976
6358
|
/**
|
|
5977
6359
|
* Generated bundle index. Do not edit.
|
|
5978
6360
|
*/
|
|
5979
6361
|
|
|
5980
|
-
export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule,
|
|
6362
|
+
export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, BasicDirective, BreadcrumbService, ColorUtils, ColumnGroupSelectionComponent, ColumnType, 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, OcxContentComponent, OcxContentContainerComponent, OcxContentContainerDirective, OcxContentDirective, OcxTimeAgoPipe, PageHeaderComponent, PortalDialogService, RelativeDatePipe, SearchHeaderComponent, SrcDirective, TemplateDirective, TemplateType, TooltipOnOverflowDirective, atLeastOneFieldFilledValidator, buildSearchCriteria, enumToDropdownOptions, findEntryWithKeyword, findTemplate, flattenObject, limit, providePortalDialogService, removeKeyword, searchPrefixWithSpecialChars };
|
|
5981
6363
|
//# sourceMappingURL=onecx-angular-accelerator.mjs.map
|