@onecx/angular-accelerator 5.11.1 → 5.12.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/esm2022/lib/angular-accelerator-primeng.module.mjs +12 -5
- package/esm2022/lib/angular-accelerator.module.mjs +4 -4
- package/esm2022/lib/components/column-group-selection/column-group-selection.component.mjs +3 -3
- package/esm2022/lib/components/custom-group-column-selector/custom-group-column-selector.component.mjs +3 -3
- package/esm2022/lib/components/data-layout-selection/data-layout-selection.component.mjs +3 -3
- package/esm2022/lib/components/data-list-grid/data-list-grid.component.mjs +3 -3
- package/esm2022/lib/components/data-list-grid-sorting/data-list-grid-sorting.component.mjs +3 -3
- package/esm2022/lib/components/data-table/data-table.component.mjs +71 -35
- package/esm2022/lib/components/data-view/data-view.component.mjs +10 -5
- package/esm2022/lib/components/diagram/diagram.component.mjs +3 -3
- package/esm2022/lib/components/group-by-count-diagram/group-by-count-diagram.component.mjs +3 -3
- package/esm2022/lib/components/interactive-data-view/interactive-data-view.component.mjs +10 -5
- package/esm2022/lib/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/components/search-config/search-config.component.mjs +3 -3
- package/esm2022/lib/components/search-header/search-header.component.mjs +3 -3
- package/esm2022/lib/directives/advanced.directive.mjs +3 -3
- package/esm2022/lib/directives/if-breakpoint.directive.mjs +3 -3
- package/esm2022/lib/directives/if-permission.directive.mjs +3 -3
- package/esm2022/lib/directives/src.directive.mjs +3 -3
- package/esm2022/lib/directives/tooltipOnOverflow.directive.mjs +3 -3
- package/esm2022/lib/pipes/dynamic.pipe.mjs +3 -3
- package/esm2022/lib/pipes/ocxtimeago.pipe.mjs +3 -3
- package/esm2022/lib/services/app-config-service.mjs +3 -3
- package/esm2022/lib/services/breadcrumb.service.mjs +3 -3
- package/esm2022/lib/services/translation-cache.service.mjs +3 -3
- package/esm2022/lib/utils/dateutils.mjs +3 -3
- package/fesm2022/onecx-angular-accelerator.mjs +162 -109
- package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
- package/lib/angular-accelerator-primeng.module.d.ts +15 -14
- package/lib/components/data-table/data-table.component.d.ts +16 -13
- package/lib/components/data-view/data-view.component.d.ts +3 -1
- package/lib/components/interactive-data-view/interactive-data-view.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@ import * as i1$1 from '@ngx-translate/core';
|
|
|
15
15
|
import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
16
16
|
import * as i1$3 from 'primeng/api';
|
|
17
17
|
import { PrimeIcons, PrimeTemplate, SharedModule } from 'primeng/api';
|
|
18
|
-
import { BehaviorSubject, map, filter, concat, of, combineLatest, mergeMap, first, debounceTime, ReplaySubject, startWith, timestamp, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin } from 'rxjs';
|
|
18
|
+
import { BehaviorSubject, map, filter, concat, of, combineLatest, mergeMap, first, debounceTime, withLatestFrom, ReplaySubject, startWith, timestamp, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin } from 'rxjs';
|
|
19
19
|
import { __decorate, __metadata } from 'tslib';
|
|
20
20
|
import * as i1$2 from '@angular/router';
|
|
21
21
|
import { NavigationEnd, Router, ActivatedRoute, RouterModule } from '@angular/router';
|
|
@@ -37,14 +37,16 @@ import * as i4$2 from 'primeng/selectbutton';
|
|
|
37
37
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
38
38
|
import * as i7$1 from 'primeng/dataview';
|
|
39
39
|
import { DataViewModule } from 'primeng/dataview';
|
|
40
|
-
import * as
|
|
40
|
+
import * as i6$1 from 'primeng/checkbox';
|
|
41
|
+
import { CheckboxModule } from 'primeng/checkbox';
|
|
42
|
+
import * as i8$1 from 'primeng/table';
|
|
41
43
|
import { TableModule } from 'primeng/table';
|
|
42
|
-
import * as
|
|
44
|
+
import * as i10 from 'primeng/multiselect';
|
|
43
45
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
44
46
|
import * as d3 from 'd3-scale-chromatic';
|
|
45
47
|
import * as i5$2 from 'primeng/chart';
|
|
46
48
|
import { ChartModule } from 'primeng/chart';
|
|
47
|
-
import * as i6$
|
|
49
|
+
import * as i6$2 from 'primeng/message';
|
|
48
50
|
import { MessageModule } from 'primeng/message';
|
|
49
51
|
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
50
52
|
|
|
@@ -106,10 +108,10 @@ class IfPermissionDirective {
|
|
|
106
108
|
}
|
|
107
109
|
return this.permissionChecker?.hasPermission(permission);
|
|
108
110
|
}
|
|
109
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
110
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IfPermissionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: HAS_PERMISSION_CHECKER, optional: true }, { token: i0.TemplateRef, optional: true }, { token: i3.UserService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
112
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: { permission: ["ocxIfPermission", "permission"], notPermission: ["ocxIfNotPermission", "notPermission"], onMissingPermission: "onMissingPermission", ocxIfPermissionPermissions: "ocxIfPermissionPermissions", ocxIfNotPermissionPermissions: "ocxIfNotPermissionPermissions" }, ngImport: i0 }); }
|
|
111
113
|
}
|
|
112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IfPermissionDirective, decorators: [{
|
|
113
115
|
type: Directive,
|
|
114
116
|
args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]' }]
|
|
115
117
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
|
@@ -156,10 +158,10 @@ class IfBreakpointDirective {
|
|
|
156
158
|
this.viewContainer.clear();
|
|
157
159
|
}
|
|
158
160
|
}
|
|
159
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
160
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IfBreakpointDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
162
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: { breakpoint: ["ocxIfBreakpoint", "breakpoint"] }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
|
|
161
163
|
}
|
|
162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IfBreakpointDirective, decorators: [{
|
|
163
165
|
type: Directive,
|
|
164
166
|
args: [{ selector: '[ocxIfBreakpoint]' }]
|
|
165
167
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef, decorators: [{
|
|
@@ -215,10 +217,10 @@ class SrcDirective {
|
|
|
215
217
|
this.error = new EventEmitter();
|
|
216
218
|
this.el.nativeElement.style.visibility = 'hidden';
|
|
217
219
|
}
|
|
218
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
219
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SrcDirective, deps: [{ token: i0.ElementRef }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
221
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: SrcDirective, selector: "[ocxSrc]", inputs: { ocxSrc: "ocxSrc" }, outputs: { error: "error" }, ngImport: i0 }); }
|
|
220
222
|
}
|
|
221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SrcDirective, decorators: [{
|
|
222
224
|
type: Directive,
|
|
223
225
|
args: [{ selector: '[ocxSrc]' }]
|
|
224
226
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.HttpClient }], propDecorators: { error: [{
|
|
@@ -240,10 +242,10 @@ class SearchConfigComponent {
|
|
|
240
242
|
onSearchConfigChange(event) {
|
|
241
243
|
this.selectedSearchConfigChanged?.emit(event.value);
|
|
242
244
|
}
|
|
243
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
244
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
245
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SearchConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
246
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: SearchConfigComponent, selector: "ocx-search-config", inputs: { searchConfigs: "searchConfigs", placeholderKey: "placeholderKey" }, outputs: { selectedSearchConfigChanged: "selectedSearchConfigChanged" }, ngImport: i0, template: "<div *ngIf=\"formGroup\">\n <form [formGroup]=\"formGroup\">\n <div *ngIf=\"searchConfigs !== undefined\">\n <div *ngIf=\"searchConfigs.length > 0\">\n <p-dropdown\n id=\"searchConfig\"\n formControlName=\"searchConfigForm\"\n [options]=\"searchConfigs\"\n optionLabel=\"name\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"true\"\n (onChange)=\"onSearchConfigChange($event)\"\n ></p-dropdown>\n </div>\n </div>\n </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", 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", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
245
247
|
}
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SearchConfigComponent, decorators: [{
|
|
247
249
|
type: Component,
|
|
248
250
|
args: [{ selector: 'ocx-search-config', template: "<div *ngIf=\"formGroup\">\n <form [formGroup]=\"formGroup\">\n <div *ngIf=\"searchConfigs !== undefined\">\n <div *ngIf=\"searchConfigs.length > 0\">\n <p-dropdown\n id=\"searchConfig\"\n formControlName=\"searchConfigForm\"\n [options]=\"searchConfigs\"\n optionLabel=\"name\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"true\"\n (onChange)=\"onSearchConfigChange($event)\"\n ></p-dropdown>\n </div>\n </div>\n </form>\n</div>\n" }]
|
|
249
251
|
}], propDecorators: { searchConfigs: [{
|
|
@@ -357,8 +359,8 @@ let BreadcrumbService = class BreadcrumbService {
|
|
|
357
359
|
});
|
|
358
360
|
}
|
|
359
361
|
}
|
|
360
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
361
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
363
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbService, providedIn: 'any' }); }
|
|
362
364
|
};
|
|
363
365
|
BreadcrumbService = __decorate([
|
|
364
366
|
UntilDestroy(),
|
|
@@ -366,7 +368,7 @@ BreadcrumbService = __decorate([
|
|
|
366
368
|
ActivatedRoute,
|
|
367
369
|
TranslateService])
|
|
368
370
|
], BreadcrumbService);
|
|
369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BreadcrumbService, decorators: [{
|
|
370
372
|
type: Injectable,
|
|
371
373
|
args: [{ providedIn: 'any' }]
|
|
372
374
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i1$1.TranslateService }] });
|
|
@@ -413,10 +415,10 @@ class DynamicPipe {
|
|
|
413
415
|
}
|
|
414
416
|
}
|
|
415
417
|
}
|
|
416
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
417
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DynamicPipe, deps: [{ token: LOCALE_ID }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
419
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" }); }
|
|
418
420
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DynamicPipe, decorators: [{
|
|
420
422
|
type: Pipe,
|
|
421
423
|
args: [{
|
|
422
424
|
name: 'dynamicPipe',
|
|
@@ -598,10 +600,10 @@ class PageHeaderComponent {
|
|
|
598
600
|
allowedActions.push(action);
|
|
599
601
|
}
|
|
600
602
|
}
|
|
601
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
602
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: PageHeaderComponent, 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 <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as 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 </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\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 </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\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 [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\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 </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\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 <span *ngIf=\"item.icon || item.value\" 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 <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\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.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\n </span>\n </div>\n </ng-container>\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{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.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: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.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: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
603
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$1.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: PageHeaderComponent, 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 <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as 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 </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\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 </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\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 [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\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 </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\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 <span *ngIf=\"item.icon || item.value\" 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 <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\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.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\n </span>\n </div>\n </ng-container>\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{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i6.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: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.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: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: SrcDirective, selector: "[ocxSrc]", inputs: ["ocxSrc"], outputs: ["error"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
603
605
|
}
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
605
607
|
type: Component,
|
|
606
608
|
args: [{ selector: 'ocx-page-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"onecx-page-header mb-4\" name=\"ocx-page-header-wrapper\">\n <ng-container *ngIf=\"showBreadcrumbs\">\n <p-breadcrumb\n [model]=\"items\"\n *ngIf=\"breadcrumbs$ | async as 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 </ng-container>\n <div class=\"title-bar flex flex-row md:justify-content-between p-3\">\n <div class=\"title-wrap\">\n <div class=\"figure flex h-2rem w-2rem md:h-3rem md:w-3rem\" *ngIf=\"showFigure\">\n <div #previewImage class=\"figure-image absolute top-0 left-0 right-0 bottom-0\">\n <ng-content select=\"[figureImage]\"></ng-content>\n <img\n *ngIf=\"figureImage && !figureImageLoadError\"\n [ocxSrc]=\"figureImage\"\n alt=\"Figure image\"\n class=\"w-full\"\n (error)=\"handleImageError()\"\n />\n </div>\n <div\n class=\"colorblob flex-1 border-round\"\n *ngIf=\"previewImage.children.length === 0 || figureImageLoadError\"\n ></div>\n </div>\n <ng-template #skeletonBar>\n <div class=\"header justify-content-evenly\">\n <p-skeleton width=\"10rem\"></p-skeleton>\n <p-skeleton width=\"10rem\"></p-skeleton>\n </div>\n </ng-template>\n <div class=\"header\" *ngIf=\"!loading; else skeletonBar\">\n <h1 id=\"page-header\" *ngIf=\"!!header\">{{ header }}</h1>\n <h2 id=\"page-subheader\" *ngIf=\"!!subheader\">{{ subheader }}</h2>\n </div>\n </div>\n <div class=\"action-items-wrap mt-2 md:mt-0\">\n <ng-container *ngIf=\"additionalToolbarContentLeft\" [ngTemplateOutlet]=\"additionalToolbarContentLeft\">\n </ng-container>\n\n <ng-container *ngIf=\"!disableDefaultActions\"> </ng-container>\n <ng-template #skeletonActions>\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 </ng-template>\n <ng-container *ngIf=\"!loading; else skeletonActions\">\n <div *ngIf=\"inlineActions && inlineActions.length > 0\" class=\"toolbar flex flex-wrap gap-1 sm:gap-2\">\n <ng-container *ngFor=\"let action of inlineActions\">\n <p-button\n id=\"{{ action.id }}\"\n [icon]=\"action.icon ?? ''\"\n type=\"button\"\n class=\"action-button\"\n [label]=\"action.labelKey ? (action.labelKey | translate) : action.label\"\n (onClick)=\"action.actionCallback()\"\n [pTooltip]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\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 [attr.aria-label]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n ></p-button>\n </ng-container>\n </div>\n <ng-content select=\"[toolbarItems]\"></ng-content>\n <ng-container>\n <div *ngIf=\"overflowActions.length !== 0\">\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 </ng-container>\n </ng-container>\n <ng-container *ngIf=\"additionalToolbarContent\" [ngTemplateOutlet]=\"additionalToolbarContent\"> </ng-container>\n </div>\n </div>\n\n <div class=\"object-panel\" [ngClass]=\"getObjectPanelLayoutClasses()\">\n <ng-container *ngIf=\"objectDetails\">\n <div class=\"object-info\" [ngClass]=\"getObjectInfoLayoutClasses()\" *ngFor=\"let item of objectDetails\">\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 <span *ngIf=\"item.icon || item.value\" 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 <i\n *ngIf=\"item.icon\"\n class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}'\n name=\"object-detail-icon\"\n ></i>\n {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n </span>\n <p-button\n *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\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.actionItemTooltip || ''\"\n (onClick)=\"item.actionItemCallback()\"\n ></p-button>\n </span>\n </span>\n </div>\n </ng-container>\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{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;background-color:#f8f9fa;border-top-right-radius:inherit;border-top-left-radius:inherit}.onecx-page-header .title-bar .figure{width:3rem;height:3rem;margin-right:.5rem;position:relative}.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"] }]
|
|
607
609
|
}], ctorParameters: () => [{ type: BreadcrumbService }, { type: i1$1.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }], propDecorators: { header: [{
|
|
@@ -739,10 +741,10 @@ class SearchHeaderComponent {
|
|
|
739
741
|
selectedSearchConfig: searchConfig
|
|
740
742
|
});
|
|
741
743
|
}
|
|
742
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
743
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
745
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: SearchHeaderComponent, selector: "ocx-search-header", inputs: { searchConfigs: "searchConfigs", header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions", searchButtonDisabled: "searchButtonDisabled", resetButtonDisabled: "resetButtonDisabled" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], 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 <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n </ocx-search-config>\n <ng-container\n *ngIf=\"_additionalToolbarContentLeft\"\n [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n ></ng-container>\n </ng-template>\n <ng-template #additionalToolbarContent>\n <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\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\">\n <p-button\n id=\"resetButton\"\n *ngIf=\"resetted.observed\"\n (onClick)=\"onResetClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-eraser\"\n [attr.aria-label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n [disabled]=\"resetButtonDisabled\"\n >\n </p-button>\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 [attr.aria-label]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n [disabled]=\"searchButtonDisabled\"\n >\n </p-button>\n </div>\n </div>\n</ocx-page-header>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SearchConfigComponent, selector: "ocx-search-config", inputs: ["searchConfigs", "placeholderKey"], outputs: ["selectedSearchConfigChanged"] }, { 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: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
744
746
|
}
|
|
745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SearchHeaderComponent, decorators: [{
|
|
746
748
|
type: Component,
|
|
747
749
|
args: [{ selector: 'ocx-search-header', 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 <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n </ocx-search-config>\n <ng-container\n *ngIf=\"_additionalToolbarContentLeft\"\n [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"\n ></ng-container>\n </ng-template>\n <ng-template #additionalToolbarContent>\n <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\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\">\n <p-button\n id=\"resetButton\"\n *ngIf=\"resetted.observed\"\n (onClick)=\"onResetClicked()\"\n label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n icon=\"pi pi-eraser\"\n [attr.aria-label]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n [disabled]=\"resetButtonDisabled\"\n >\n </p-button>\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 [attr.aria-label]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n [disabled]=\"searchButtonDisabled\"\n >\n </p-button>\n </div>\n </div>\n</ocx-page-header>\n" }]
|
|
748
750
|
}], propDecorators: { searchConfigs: [{
|
|
@@ -804,10 +806,10 @@ class AdvancedDirective {
|
|
|
804
806
|
this.viewContainer.clear();
|
|
805
807
|
}
|
|
806
808
|
}
|
|
807
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
808
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
809
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AdvancedDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef, optional: true }, { token: SearchHeaderComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
810
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: AdvancedDirective, selector: "[ocxAdvanced]", ngImport: i0 }); }
|
|
809
811
|
}
|
|
810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AdvancedDirective, decorators: [{
|
|
811
813
|
type: Directive,
|
|
812
814
|
args: [{ selector: '[ocxAdvanced]' }]
|
|
813
815
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef, decorators: [{
|
|
@@ -846,10 +848,10 @@ class TooltipOnOverflowDirective extends Tooltip {
|
|
|
846
848
|
this.disabled = true;
|
|
847
849
|
this.setOption({ disabled: this.disabled });
|
|
848
850
|
}
|
|
849
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
850
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.
|
|
851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TooltipOnOverflowDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$3.PrimeNGConfig }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
852
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: { ocxTooltipOnOverflow: "ocxTooltipOnOverflow" }, usesInheritance: true, ngImport: i0 }); }
|
|
851
853
|
}
|
|
852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TooltipOnOverflowDirective, decorators: [{
|
|
853
855
|
type: Directive,
|
|
854
856
|
args: [{ selector: '[ocxTooltipOnOverflow]' }]
|
|
855
857
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -916,10 +918,10 @@ class ColumnGroupSelectionComponent {
|
|
|
916
918
|
displayedColumns: activeColumns
|
|
917
919
|
});
|
|
918
920
|
}
|
|
919
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<span class=\"p-float-label\">\n <p-dropdown\n id=\"columnGroupSelectionDropdown\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\n (onClear)=\"clearGroupSelection()\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"selectedGroupKey !== defaultGroupKey\"\n [(ngModel)]=\"selectedGroupKey\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</span>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", 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", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
921
923
|
}
|
|
922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
|
|
923
925
|
type: Component,
|
|
924
926
|
args: [{ selector: 'ocx-column-group-selection', template: "<span class=\"p-float-label\">\n <p-dropdown\n id=\"columnGroupSelectionDropdown\"\n *ngIf=\"(allGroupKeys$ | async)?.length\"\n (onClear)=\"clearGroupSelection()\"\n (onChange)=\"changeGroupSelection($event)\"\n [options]=\"(allGroupKeys$ | async) || []\"\n [placeholder]=\"placeholderKey | translate\"\n [showClear]=\"selectedGroupKey !== defaultGroupKey\"\n [(ngModel)]=\"selectedGroupKey\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item ? (item | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\"> {{ item ? (item | translate) : ''}} </ng-template>\n </p-dropdown>\n <label *ngIf=\"(allGroupKeys$ | async)?.length\" for=\"columnGroupSelectionDropdown\"\n >{{ (\"OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DROPDOWN_LABEL\" | translate) }}</label\n >\n</span>\n", styles: [":host ::ng-deep .p-dropdown{min-width:12rem}\n"] }]
|
|
925
927
|
}], propDecorators: { selectedGroupKey: [{
|
|
@@ -1029,10 +1031,10 @@ class CustomGroupColumnSelectorComponent {
|
|
|
1029
1031
|
onCancelClick() {
|
|
1030
1032
|
this.visible = false;
|
|
1031
1033
|
}
|
|
1032
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1033
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1034
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1035
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: { columns: "columns", displayedColumns: "displayedColumns", dialogTitle: "dialogTitle", openButtonTitle: "openButtonTitle", saveButtonLabel: "saveButtonLabel", cancelButtonLabel: "cancelButtonLabel", activeColumnsLabel: "activeColumnsLabel", inactiveColumnsLabel: "inactiveColumnsLabel", 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 [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [attr.aria-label]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n></p-button>\n\n<p-dialog header=\"Header\" [(visible)]=\"visible\" [style]=\"{ width: '70%' }\" [modal]=\"true\" [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\">\n <ng-template pTemplate=\"header\">\n <span class=\"text-xl font-bold\"\n >{{ dialogTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || ('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 pTemplate=\"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 >\n <ng-template let-option pTemplate> {{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 class=\"mt-2\"\n name=\"action-column-position-select-button\"\n >\n <ng-template let-option pTemplate> {{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 || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_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: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4$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", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i5$1.PickList, selector: "p-pickList", 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", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i4$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { 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: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
1034
1036
|
}
|
|
1035
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1037
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
|
|
1036
1038
|
type: Component,
|
|
1037
1039
|
args: [{ selector: 'ocx-custom-group-column-selector', template: "<p-button\n id=\"customGroupColumnSelectorButton\"\n type=\"button\"\n (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n icon=\"pi pi-cog\"\n styleClass=\"p-button\"\n [attr.aria-label]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n></p-button>\n\n<p-dialog header=\"Header\" [(visible)]=\"visible\" [style]=\"{ width: '70%' }\" [modal]=\"true\" [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\">\n <ng-template pTemplate=\"header\">\n <span class=\"text-xl font-bold\"\n >{{ dialogTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' | translate) }}</span\n >\n </ng-template>\n\n <p-pickList\n [source]=\"displayedColumnsModel\"\n [target]=\"hiddenColumnsModel\"\n [sourceHeader]=\"activeColumnsLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n [targetHeader]=\"inactiveColumnsLabel || ('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 pTemplate=\"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 >\n <ng-template let-option pTemplate> {{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 class=\"mt-2\"\n name=\"action-column-position-select-button\"\n >\n <ng-template let-option pTemplate> {{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 || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n styleClass=\"p-button\"\n ></p-button>\n <p-button\n id=\"saveButton\"\n (onClick)=\"onSaveClick()\"\n [label]=\"saveButtonLabel || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_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"] }]
|
|
1038
1040
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { columns: [{
|
|
@@ -1093,10 +1095,10 @@ class DataLayoutSelectionComponent {
|
|
|
1093
1095
|
layout: event.layout
|
|
1094
1096
|
});
|
|
1095
1097
|
}
|
|
1096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1098
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataLayoutSelectionComponent, 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 <p-selectButton\n *ngIf=\"viewingLayouts.length > 1\"\n [options]=\"viewingLayouts\"\n [(ngModel)]=\"selectedViewLayout\"\n optionLabel=\"icon\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [pTooltip]=\"item.title || (item.titleKey | translate)\" tooltipPosition=\"top\"></i>\n </ng-template>\n </p-selectButton>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { 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: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
1098
1100
|
}
|
|
1099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
|
|
1100
1102
|
type: Component,
|
|
1101
1103
|
args: [{ selector: 'ocx-data-layout-selection', template: "<div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n <p-selectButton\n *ngIf=\"viewingLayouts.length > 1\"\n [options]=\"viewingLayouts\"\n [(ngModel)]=\"selectedViewLayout\"\n optionLabel=\"icon\"\n (onChange)=\"onDataViewLayoutChange($event.value)\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [pTooltip]=\"item.title || (item.titleKey | translate)\" tooltipPosition=\"top\"></i>\n </ng-template>\n </p-selectButton>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
|
|
1102
1104
|
}], propDecorators: { supportedViewLayouts: [{
|
|
@@ -1377,10 +1379,10 @@ class OcxTimeAgoPipe extends TranslatePipe {
|
|
|
1377
1379
|
return 3600;
|
|
1378
1380
|
}
|
|
1379
1381
|
}
|
|
1380
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1381
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
1382
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: OcxTimeAgoPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1383
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: OcxTimeAgoPipe, name: "timeago" }); }
|
|
1382
1384
|
}
|
|
1383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
|
|
1384
1386
|
type: Pipe,
|
|
1385
1387
|
args: [{
|
|
1386
1388
|
name: 'timeago',
|
|
@@ -1815,10 +1817,10 @@ class DataListGridComponent extends DataSortBase {
|
|
|
1815
1817
|
}
|
|
1816
1818
|
return this.templatesObservables[column.id];
|
|
1817
1819
|
}
|
|
1818
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DataListGridComponent, 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", 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: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-dataView\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n \n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{\n item:item,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n </ng-template>\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</ng-container>\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n <div class=\"col-12\">\n <div class=\"data-list-items p-3\">\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 <a *ngIf=\"titleLineId\" [routerLink]=\"\" (click)=\"onViewRow(item)\"\n >{{ resolveFieldData(item, titleLineId) || '' }}</a\n >\n </div>\n <div class=\"flex flex-row\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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 <div *ngFor=\"let col of getFilteredColumns()\" 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 <ng-container\n [ngTemplateOutlet]=\"\n _listValue ? _listValue: defaultListValue\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\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{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$1.DataView, selector: "p-dataView", 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: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
1820
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataListGridComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: i3.UserService }, { token: i1$2.Router }, { token: i0.Injector }, { token: i3.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1821
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataListGridComponent, 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", 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: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-dataView\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n \n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{\n item:item,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n </ng-template>\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</ng-container>\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n <div class=\"col-12\">\n <div class=\"data-list-items p-3\">\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 <a *ngIf=\"titleLineId\" [routerLink]=\"\" (click)=\"onViewRow(item)\"\n >{{ resolveFieldData(item, titleLineId) || '' }}</a\n >\n </div>\n <div class=\"flex flex-row\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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 <div *ngFor=\"let col of getFilteredColumns()\" 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 <ng-container\n [ngTemplateOutlet]=\"\n _listValue ? _listValue: defaultListValue\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\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{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$1.DataView, selector: "p-dataView", 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: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions"] }, { kind: "directive", type: TooltipOnOverflowDirective, selector: "[ocxTooltipOnOverflow]", inputs: ["ocxTooltipOnOverflow"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
1820
1822
|
}
|
|
1821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataListGridComponent, decorators: [{
|
|
1822
1824
|
type: Component,
|
|
1823
1825
|
args: [{ selector: 'ocx-data-list-grid', template: "<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-dataView\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataListGrid_{{name}}\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template #gridItem let-rows pTemplate=\"gridItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n ></ng-container>\n </ng-template>\n </div>\n </ng-template>\n \n <ng-template #listItem let-rows pTemplate=\"listItem\">\n <div class=\"p-grid p-nogutter grid grid-nogutter\">\n <ng-template ngFor let-item [ngForOf]=\"rows\">\n <ng-container\n [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n [ngTemplateOutletContext]=\"{\n item:item,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n </ng-template>\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</ng-container>\n\n<ng-template #defaultGridItem let-item>\n <div class=\"col-12 lg:col-6 xl:col-4 flex\">\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.ariaLabel]=\"'OCX_DATA_LIST_GRID.MORE_ACTIONS' | translate\"\n class=\"more-actions-menu-button menu-btn\"\n [attr.name]=\"'data-grid-item-menu-button'\"\n ></button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultGridItemSubtitleLines let-item>\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine edit-time text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n<ng-template #defaultListItem let-item=\"item\" let-columnTemplates=\"columnTemplates\">\n <div class=\"col-12\">\n <div class=\"data-list-items p-3\">\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 <a *ngIf=\"titleLineId\" [routerLink]=\"\" (click)=\"onViewRow(item)\"\n >{{ resolveFieldData(item, titleLineId) || '' }}</a\n >\n </div>\n <div class=\"flex flex-row\">\n <ng-container\n *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\"\n >\n <button\n type=\"button\"\n icon=\"pi pi-eye\"\n pButton\n class=\"p-button-rounded p-button-text mb-1 mr-2 viewListItemButton\"\n title=\"{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\"\n >\n <button\n type=\"button\"\n class=\"p-button-rounded p-button-text mb-1 mr-2 editListItemButton\"\n icon=\"pi pi-pencil\"\n pButton\n title=\"{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}\"\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 </ng-container>\n <ng-container\n *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\"\n >\n <button\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 title=\"{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}\"\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineListActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(item, action.actionVisibleField))\">\n <button\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 [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(item, action.actionEnabledField))\"\n ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 [ariaLabel]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n ></button>\n </ng-container>\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 <div *ngFor=\"let col of getFilteredColumns()\" 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 <ng-container\n [ngTemplateOutlet]=\"\n _listValue ? _listValue: defaultListValue\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: item,\n column: col,\n columnTemplates: columnTemplates\n }\"\n ></ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #defaultListItemSubtitleLines let-item=\"$implicit\">\n <div *ngFor=\"let subtitleLineId of subtitleLineIds\" class=\"subtitleLine text-xl my-3\">\n {{ resolveFieldData(item, subtitleLineId) }}\n </div>\n</ng-template>\n\n<ng-template #defaultListValue let-rowObject=\"rowObject\" let-column=\"column\" let-columnTemplates=\"columnTemplates\">\n <ng-container\n [ngTemplateOutlet]=\"columnTemplates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\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{color:var(--primary-text-color);background-color:var(--primary-color);border:var(--button-border);border-radius:var(--border-radius);padding:var(--button-padding);cursor:pointer;min-width:4rem}\n"] }]
|
|
1824
1826
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -2043,10 +2045,10 @@ class DataListGridSortingComponent {
|
|
|
2043
2045
|
return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TITLE';
|
|
2044
2046
|
}
|
|
2045
2047
|
}
|
|
2046
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
2047
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
2048
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2049
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataListGridSortingComponent, 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-dropdown\n id=\"dataListGridSortingDropdown\"\n [(ngModel)]=\"selectedSortingOption\"\n class=\"sort-dropdown\"\n [options]=\"dropdownOptions\"\n [placeholder]=\"('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)\"\n (onChange)=\"selectSorting($event)\"\n [title]=\"('OCX_LIST_GRID_SORT.DROPDOWN.TITLE' | translate)\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\">\n {{ item?.columnName ? (item.columnName | translate) : ''}}\n </ng-template></p-dropdown\n >\n <p-button\n id=\"dataListGridSortingButton\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n [title]=\"(sortIconTitle() | translate)\"\n [attr.aria-label]=\"('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}\n"], dependencies: [{ kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2.Dropdown, selector: "p-dropdown", 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", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
2048
2050
|
}
|
|
2049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
|
|
2050
2052
|
type: Component,
|
|
2051
2053
|
args: [{ selector: 'ocx-data-list-grid-sorting', template: "<div class=\"flex align-items-center gap-2\">\n <p-dropdown\n id=\"dataListGridSortingDropdown\"\n [(ngModel)]=\"selectedSortingOption\"\n class=\"sort-dropdown\"\n [options]=\"dropdownOptions\"\n [placeholder]=\"('OCX_LIST_GRID_SORT.DROPDOWN.PLACEHOLDER' | translate)\"\n (onChange)=\"selectSorting($event)\"\n [title]=\"('OCX_LIST_GRID_SORT.DROPDOWN.TITLE' | translate)\"\n >\n <ng-template let-item pTemplate=\"item\"> {{ item?.columnName ? (item.columnName | translate) : ''}} </ng-template>\n <ng-template let-item pTemplate=\"selectedItem\">\n {{ item?.columnName ? (item.columnName | translate) : ''}}\n </ng-template></p-dropdown\n >\n <p-button\n id=\"dataListGridSortingButton\"\n icon=\"pi {{sortIcon()}}\"\n styleClass=\"p-button-outlined\"\n (onClick)=\"sortDirectionChanged()\"\n [title]=\"(sortIconTitle() | translate)\"\n [attr.aria-label]=\"('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}\n"] }]
|
|
2052
2054
|
}], propDecorators: { columns: [{
|
|
@@ -2080,11 +2082,13 @@ class DataTableComponent extends DataSortBase {
|
|
|
2080
2082
|
!this._rows$.getValue().length ?? this.resetPage();
|
|
2081
2083
|
this._rows$.next(value);
|
|
2082
2084
|
}
|
|
2083
|
-
get selectedRows() {
|
|
2084
|
-
return this._selection$.getValue();
|
|
2085
|
-
}
|
|
2086
2085
|
set selectedRows(value) {
|
|
2087
|
-
this.
|
|
2086
|
+
this._selectionIds$.next(value.map((row) => {
|
|
2087
|
+
if (typeof row === 'object') {
|
|
2088
|
+
return row.id;
|
|
2089
|
+
}
|
|
2090
|
+
return row;
|
|
2091
|
+
}));
|
|
2088
2092
|
}
|
|
2089
2093
|
get filters() {
|
|
2090
2094
|
return this._filters$.getValue();
|
|
@@ -2111,7 +2115,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2111
2115
|
set columns(value) {
|
|
2112
2116
|
this._columns$.next(value);
|
|
2113
2117
|
const obs = value.map((c) => this.getTemplate(c, TemplateType.CELL));
|
|
2114
|
-
this.columnTemplates$ = combineLatest(obs).pipe(map(values => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))));
|
|
2118
|
+
this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(value.map((c, i) => [c.id, values[i]]))));
|
|
2115
2119
|
}
|
|
2116
2120
|
get pageSizes() {
|
|
2117
2121
|
return this._pageSizes$.getValue();
|
|
@@ -2213,8 +2217,9 @@ class DataTableComponent extends DataSortBase {
|
|
|
2213
2217
|
this.injector = injector;
|
|
2214
2218
|
this.userService = userService;
|
|
2215
2219
|
this.TemplateType = TemplateType;
|
|
2220
|
+
this.checked = true;
|
|
2216
2221
|
this._rows$ = new BehaviorSubject([]);
|
|
2217
|
-
this.
|
|
2222
|
+
this._selectionIds$ = new BehaviorSubject([]);
|
|
2218
2223
|
this._filters$ = new BehaviorSubject([]);
|
|
2219
2224
|
this._sortDirection$ = new BehaviorSubject("NONE" /* DataSortDirection.NONE */);
|
|
2220
2225
|
this._sortColumn$ = new BehaviorSubject('');
|
|
@@ -2225,6 +2230,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2225
2230
|
this._pageSizes$ = new BehaviorSubject([10, 25, 50]);
|
|
2226
2231
|
this._pageSize$ = new BehaviorSubject(undefined);
|
|
2227
2232
|
this.name = '';
|
|
2233
|
+
this.allowSelectAll = true;
|
|
2228
2234
|
this.paginator = true;
|
|
2229
2235
|
this.page = 0;
|
|
2230
2236
|
this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
|
|
@@ -2338,17 +2344,19 @@ class DataTableComponent extends DataSortBase {
|
|
|
2338
2344
|
this.emitComponentStateChanged();
|
|
2339
2345
|
}
|
|
2340
2346
|
emitComponentStateChanged(state = {}) {
|
|
2341
|
-
|
|
2347
|
+
this.displayedPageSize$
|
|
2348
|
+
.pipe(withLatestFrom(this._selectionIds$, this._rows$), first())
|
|
2349
|
+
.subscribe(([pageSize, selectedIds, rows]) => {
|
|
2342
2350
|
this.componentStateChanged.emit({
|
|
2343
2351
|
filters: this.filters,
|
|
2344
2352
|
sorting: {
|
|
2345
2353
|
sortColumn: this.sortColumn,
|
|
2346
|
-
sortDirection: this.sortDirection
|
|
2354
|
+
sortDirection: this.sortDirection,
|
|
2347
2355
|
},
|
|
2348
2356
|
pageSize,
|
|
2349
2357
|
activePage: this.page,
|
|
2350
|
-
selectedRows,
|
|
2351
|
-
...state
|
|
2358
|
+
selectedRows: rows.filter((row) => selectedIds.includes(row.id)),
|
|
2359
|
+
...state,
|
|
2352
2360
|
});
|
|
2353
2361
|
});
|
|
2354
2362
|
}
|
|
@@ -2408,8 +2416,8 @@ class DataTableComponent extends DataSortBase {
|
|
|
2408
2416
|
this.emitComponentStateChanged({
|
|
2409
2417
|
sorting: {
|
|
2410
2418
|
sortColumn: sortColumn,
|
|
2411
|
-
sortDirection: newSortDirection
|
|
2412
|
-
}
|
|
2419
|
+
sortDirection: newSortDirection,
|
|
2420
|
+
},
|
|
2413
2421
|
});
|
|
2414
2422
|
}
|
|
2415
2423
|
columnNextSortDirection(sortColumn) {
|
|
@@ -2441,7 +2449,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2441
2449
|
}
|
|
2442
2450
|
this.filtered.emit(filters);
|
|
2443
2451
|
this.emitComponentStateChanged({
|
|
2444
|
-
filters
|
|
2452
|
+
filters,
|
|
2445
2453
|
});
|
|
2446
2454
|
this.resetPage();
|
|
2447
2455
|
}
|
|
@@ -2464,18 +2472,45 @@ class DataTableComponent extends DataSortBase {
|
|
|
2464
2472
|
}
|
|
2465
2473
|
}
|
|
2466
2474
|
mapSelectionToRows() {
|
|
2467
|
-
this.selectedRows$ = combineLatest([this.
|
|
2468
|
-
return
|
|
2469
|
-
return rows.find((r) => r.id ===
|
|
2475
|
+
this.selectedRows$ = combineLatest([this._selectionIds$, this._rows$]).pipe(map(([selectedRowIds, rows]) => {
|
|
2476
|
+
return selectedRowIds.map((rowId) => {
|
|
2477
|
+
return rows.find((r) => r.id === rowId);
|
|
2470
2478
|
});
|
|
2471
2479
|
}));
|
|
2472
2480
|
}
|
|
2473
|
-
onSelectionChange(
|
|
2474
|
-
|
|
2475
|
-
this.
|
|
2476
|
-
this.
|
|
2477
|
-
|
|
2481
|
+
onSelectionChange(selection) {
|
|
2482
|
+
let newSelectionIds = selection.map((row) => row.id);
|
|
2483
|
+
const rows = this._rows$.getValue();
|
|
2484
|
+
if (this.selectionEnabledField) {
|
|
2485
|
+
const disabledRowIds = rows.filter((r) => !this.fieldIsTruthy(r, this.selectionEnabledField)).map((row) => row.id);
|
|
2486
|
+
if (disabledRowIds.length > 0) {
|
|
2487
|
+
newSelectionIds = this.mergeWithDisabledKeys(newSelectionIds, disabledRowIds);
|
|
2488
|
+
}
|
|
2489
|
+
}
|
|
2490
|
+
this._selectionIds$.next(newSelectionIds);
|
|
2491
|
+
this.selectionChanged.emit(this._rows$.getValue().filter((row) => newSelectionIds.includes(row.id)));
|
|
2492
|
+
this.emitComponentStateChanged();
|
|
2493
|
+
}
|
|
2494
|
+
mergeWithDisabledKeys(newSelectionIds, disabledRowIds) {
|
|
2495
|
+
const previousSelectionIds = this._selectionIds$.getValue();
|
|
2496
|
+
const previouslySelectedAndDisabled = previousSelectionIds.filter((id) => disabledRowIds.includes(id));
|
|
2497
|
+
const disabledAndPreviouslyDeselected = disabledRowIds.filter((id) => !previousSelectionIds.includes(id));
|
|
2498
|
+
const updatedSelection = [...newSelectionIds];
|
|
2499
|
+
previouslySelectedAndDisabled.forEach((id) => {
|
|
2500
|
+
if (!updatedSelection.includes(id)) {
|
|
2501
|
+
updatedSelection.push(id);
|
|
2502
|
+
}
|
|
2503
|
+
});
|
|
2504
|
+
disabledAndPreviouslyDeselected.forEach((id) => {
|
|
2505
|
+
const index = updatedSelection.indexOf(id);
|
|
2506
|
+
if (index > -1) {
|
|
2507
|
+
updatedSelection.splice(index, 1);
|
|
2508
|
+
}
|
|
2478
2509
|
});
|
|
2510
|
+
return updatedSelection;
|
|
2511
|
+
}
|
|
2512
|
+
isSelected(row) {
|
|
2513
|
+
return this._selectionIds$.getValue().includes(row.id);
|
|
2479
2514
|
}
|
|
2480
2515
|
onPageChange(event) {
|
|
2481
2516
|
const page = event.first / event.rows;
|
|
@@ -2485,7 +2520,7 @@ class DataTableComponent extends DataSortBase {
|
|
|
2485
2520
|
this.pageSizeChanged.emit(event.rows);
|
|
2486
2521
|
this.emitComponentStateChanged({
|
|
2487
2522
|
activePage: page,
|
|
2488
|
-
pageSize: event.rows
|
|
2523
|
+
pageSize: event.rows,
|
|
2489
2524
|
});
|
|
2490
2525
|
}
|
|
2491
2526
|
resetPage() {
|
|
@@ -2597,12 +2632,12 @@ class DataTableComponent extends DataSortBase {
|
|
|
2597
2632
|
[column.id]: value.label,
|
|
2598
2633
|
};
|
|
2599
2634
|
}
|
|
2600
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
2601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DataTableComponent, 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", paginator: "paginator", page: "page", 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 <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-table\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container\n *ngIf=\"columnTemplates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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</ng-container>\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-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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7$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", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i7$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i7$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i7$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.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: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { 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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
2635
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: i1$2.Router }, { token: i0.Injector }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataTableComponent, 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", 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 <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-table\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox *ngIf=\"allowSelectAll\"></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container\n *ngIf=\"columnTemplates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-checkbox\n *ngIf=\"(!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)) && isSelected(rowObject); else defaultCheckbox\"\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n ></p-checkbox>\n <ng-template #defaultCheckbox>\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </ng-template>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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</ng-container>\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-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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i8$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i8$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.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: i10.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { 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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
2602
2637
|
}
|
|
2603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2638
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
2604
2639
|
type: Component,
|
|
2605
|
-
args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-table\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container\n *ngIf=\"columnTemplates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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</ng-container>\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-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"] }]
|
|
2640
|
+
args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n <ng-container\n *ngIf=\"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 <ng-container\n *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container\n *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n >\n <button\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 </ng-container>\n <ng-container *ngFor=\"let action of inlineActions$ | async\">\n <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n <button\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 ></button>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"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 </ng-container>\n </div>\n </td>\n </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n <ng-container\n *ngIf=\"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 </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n <p-table\n *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\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]=\"(displayedPageSizes$ | async) ?? []\"\n id=\"dataTable_{{name}}\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selection]=\"(selectedRows$ | async) ?? []\"\n [scrollable]=\"true\"\n paginatorDropdownAppendTo=\"body\"\n >\n <ng-template pTemplate=\"header\">\n <tr>\n <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n <p-tableHeaderCheckbox *ngIf=\"allowSelectAll\"></p-tableHeaderCheckbox>\n </th>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n <div class=\"table-header-wrapper\">\n <span id=\"{{column.id}}-header-name\">{{ column.nameKey | translate }}</span>\n <span class=\"icon-button-header-wrapper\">\n <button\n *ngIf=\"column.sortable\"\n class=\"pi sortButton\"\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 <p-multiSelect\n class=\"filterMultiSelect\"\n *ngIf=\"column.filterable\"\n [options]=\"(currentFilterOptions$ | async) || []\"\n [ngModel]=\"(currentSelectedFilters$ | async) || []\"\n [showToggleAll]=\"true\"\n emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n [displaySelectedLabel]=\"false\"\n [resetFilterOnHide]=\"true\"\n (onChange)=\"onFilterChange(column, $event)\"\n placeholder=\"Icon\"\n appendTo=\"body\"\n (onClick)=\"onFilterClick(column)\"\n [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n [attr.aria-label]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n >\n <ng-template pTemplate=\"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 pTemplate=\"item\" let-value>\n <ng-container\n *ngIf=\"columnTemplates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromMultiselectItem(value, column),\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n </p-multiSelect>\n </span>\n </div>\n </th>\n <ng-template #simpleHeader>\n <th scope=\"col\">{{ column.nameKey | translate }}</th>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-rowObject>\n <tr>\n <td *ngIf=\"selectionChangedObserved\">\n <p-checkbox\n *ngIf=\"(!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)) && isSelected(rowObject); else defaultCheckbox\"\n [(ngModel)]=\"checked\"\n [binary]=\"true\"\n [disabled]=\"true\"\n ></p-checkbox>\n <ng-template #defaultCheckbox>\n <p-tableCheckbox\n [value]=\"rowObject\"\n [disabled]=\"!!selectionEnabledField && !fieldIsTruthy(rowObject, selectionEnabledField)\"\n ></p-tableCheckbox>\n </ng-template>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n <td *ngFor=\"let column of columns\">\n <ng-container\n [ngTemplateOutlet]=\"\n _cell ? _cell: columnTemplates[column.id]\n \"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n ></ng-container>\n </td>\n <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"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</ng-container>\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-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"] }]
|
|
2606
2641
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2607
2642
|
type: Inject,
|
|
2608
2643
|
args: [LOCALE_ID]
|
|
@@ -2652,6 +2687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
2652
2687
|
type: Input
|
|
2653
2688
|
}], selectionEnabledField: [{
|
|
2654
2689
|
type: Input
|
|
2690
|
+
}], allowSelectAll: [{
|
|
2691
|
+
type: Input
|
|
2655
2692
|
}], paginator: [{
|
|
2656
2693
|
type: Input
|
|
2657
2694
|
}], page: [{
|
|
@@ -2930,6 +2967,7 @@ class DataViewComponent {
|
|
|
2930
2967
|
this.injector = injector;
|
|
2931
2968
|
this.dataTableComponentState$ = new ReplaySubject(1);
|
|
2932
2969
|
this.dataListGridComponentState$ = new ReplaySubject(1);
|
|
2970
|
+
this.tableAllowSelectAll = true;
|
|
2933
2971
|
this.data = [];
|
|
2934
2972
|
this.name = 'Data table';
|
|
2935
2973
|
this.subtitleLineIds = [];
|
|
@@ -3185,12 +3223,12 @@ class DataViewComponent {
|
|
|
3185
3223
|
this.pageSize = event;
|
|
3186
3224
|
this.pageSizeChanged.emit(event);
|
|
3187
3225
|
}
|
|
3188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
3189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: DataViewComponent, selector: "ocx-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", 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", 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: "<div *ngIf=\"layout !== 'table'\">\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 <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableFilterCell\"\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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", "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", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "paginator", "page", "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: i4.AsyncPipe, name: "async" }] }); }
|
|
3226
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DataViewComponent, 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", 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: "<div *ngIf=\"layout !== 'table'\">\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 <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableFilterCell\"\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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", "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", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "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: i4.AsyncPipe, name: "async" }] }); }
|
|
3190
3228
|
}
|
|
3191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
3229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DataViewComponent, decorators: [{
|
|
3192
3230
|
type: Component,
|
|
3193
|
-
args: [{ selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "<div *ngIf=\"layout !== 'table'\">\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 <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 >\n </ocx-data-table>\n <ng-template #stringCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableFilterCell\"\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n</div>\n" }]
|
|
3231
|
+
args: [{ selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "<div *ngIf=\"layout !== 'table'\">\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 <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n ></ng-template>\n <ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n</div>\n\n<div *ngIf=\"layout === 'table'\">\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 <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #numberCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableCell\"\n [ngTemplateOutlet]=\"_numberTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #customCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableCell\"\n [ngTemplateOutlet]=\"_customTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #dateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #relativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #cell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #translationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #stringFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n ></ng-template>\n <ng-template #filterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableFilterCell\"\n [ngTemplateOutlet]=\"_tableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #dateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #customFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #numberFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #relativeDateFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n <ng-template #translationKeyFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container>\n </ng-template>\n</div>\n" }]
|
|
3194
3232
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { listGrid: [{
|
|
3195
3233
|
type: ViewChild,
|
|
3196
3234
|
args: [DataListGridComponent]
|
|
@@ -3215,6 +3253,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
3215
3253
|
type: Input
|
|
3216
3254
|
}], editActionEnabledField: [{
|
|
3217
3255
|
type: Input
|
|
3256
|
+
}], tableSelectionEnabledField: [{
|
|
3257
|
+
type: Input
|
|
3258
|
+
}], tableAllowSelectAll: [{
|
|
3259
|
+
type: Input
|
|
3218
3260
|
}], data: [{
|
|
3219
3261
|
type: Input
|
|
3220
3262
|
}], name: [{
|
|
@@ -3558,10 +3600,10 @@ class DiagramComponent {
|
|
|
3558
3600
|
activeDiagramType: event.value.layout
|
|
3559
3601
|
});
|
|
3560
3602
|
}
|
|
3561
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
3562
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
3603
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DiagramComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.data\">\n <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n <p-selectButton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"icon\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></i>\n </ng-template>\n </p-selectButton>\n </div>\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 ></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</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i5$2.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i6$2.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { 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: i1$1.TranslatePipe, name: "translate" }] }); }
|
|
3563
3605
|
}
|
|
3564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
3606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
3565
3607
|
type: Component,
|
|
3566
3608
|
args: [{ selector: 'ocx-diagram', template: "<ng-container *ngIf=\"this.data\">\n <div class=\"flex justify-content-center pb-2\" *ngIf=\"shownDiagramTypes.length > 1\">\n <p-selectButton\n [options]=\"shownDiagramTypes\"\n [(ngModel)]=\"selectedDiagramType\"\n optionLabel=\"icon\"\n (onChange)=\"onDiagramTypeChanged($event)\"\n name=\"diagram-type-select-button\"\n >\n <ng-template let-item pTemplate>\n <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></i>\n </ng-template>\n </p-selectButton>\n </div>\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 ></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</ng-container>\n\n<div *ngIf=\"!this.data\" class=\"w-full flex justify-content-center\">\n <p-message severity=\"info\" text=\"{{ 'OCX_DIAGRAM.NO_DATA' | translate }}\"></p-message>\n</div>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}\n"] }]
|
|
3567
3609
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { data: [{
|
|
@@ -3659,10 +3701,10 @@ class GroupByCountDiagramComponent {
|
|
|
3659
3701
|
activeDiagramType: newDiagramType
|
|
3660
3702
|
});
|
|
3661
3703
|
}
|
|
3662
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
3663
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
3704
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: GroupByCountDiagramComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: GroupByCountDiagramComponent, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", type: "type", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\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", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged", "componentStateChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
3664
3706
|
}
|
|
3665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
3707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
|
|
3666
3708
|
type: Component,
|
|
3667
3709
|
args: [{ selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n [data]=\"(diagramData$ | async) || []\"\n [sumKey]=\"sumKey\"\n [diagramType]=\"diagramType\"\n (onDataSelect)=\"dataClicked($event)\"\n [supportedDiagramTypes]=\"supportedDiagramTypes\"\n (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
|
|
3668
3710
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { sumKey: [{
|
|
@@ -3696,6 +3738,7 @@ class InteractiveDataViewComponent {
|
|
|
3696
3738
|
this.dataLayoutComponentState$ = new ReplaySubject(1);
|
|
3697
3739
|
this.dataListGridSortingComponentState$ = new ReplaySubject(1);
|
|
3698
3740
|
this.dataViewComponentState$ = new ReplaySubject(1);
|
|
3741
|
+
this.tableAllowSelectAll = true;
|
|
3699
3742
|
this.name = 'Data';
|
|
3700
3743
|
this.subtitleLineIds = [];
|
|
3701
3744
|
this.supportedViewLayouts = ['grid', 'list', 'table'];
|
|
@@ -4102,12 +4145,12 @@ class InteractiveDataViewComponent {
|
|
|
4102
4145
|
this.pageSize = event;
|
|
4103
4146
|
this.pageSizeChanged.emit(event);
|
|
4104
4147
|
}
|
|
4105
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
4106
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: InteractiveDataViewComponent, selector: "ocx-interactive-data-view", inputs: { deletePermission: "deletePermission", editPermission: "editPermission", viewPermission: "viewPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", 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", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", 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\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 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\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" 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 <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\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 </div>\n </div>\n</div>\n<div class=\"p-3\">\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 >\n </ocx-data-view>\n</div>\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "dialogTitle", "openButtonTitle", "saveButtonLabel", "cancelButtonLabel", "activeColumnsLabel", "inactiveColumnsLabel", "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", "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", "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: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
4148
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: InteractiveDataViewComponent, selector: "ocx-interactive-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", 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", page: "page", selectedRows: "selectedRows", displayedColumnKeys: "displayedColumnKeys", displayedColumns: "displayedColumns", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", 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\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 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\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" 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 <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\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 </div>\n </div>\n</div>\n<div class=\"p-3\">\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<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "dialogTitle", "openButtonTitle", "saveButtonLabel", "cancelButtonLabel", "activeColumnsLabel", "inactiveColumnsLabel", "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", "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: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
|
|
4107
4150
|
}
|
|
4108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
4151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
|
|
4109
4152
|
type: Component,
|
|
4110
|
-
args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 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\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" 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 <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\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 </div>\n </div>\n</div>\n<div class=\"p-3\">\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 >\n </ocx-data-view>\n</div>\n<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n" }]
|
|
4153
|
+
args: [{ selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\">\n <div class=\"flex flex-wrap justify-content-between align-items-center py-1 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\n <div *ngIf=\"topCenter\">\n <ng-container [ngTemplateOutlet]=\"topCenter\"> </ng-container>\n </div>\n\n <div *ngIf=\"layout !== 'table'\" 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 <div *ngIf=\"layout === 'table'\" class=\"flex flex-wrap justify-content-between align-items-center gap-2\">\n <ocx-column-group-selection\n [selectedGroupKey]=\"selectedGroupKey\"\n [columns]=\"columns\"\n [defaultGroupKey]=\"defaultGroupKey\"\n [customGroupKey]=\"customGroupKey\"\n [placeholderKey]=\"groupSelectionNoGroupSelectedKey\"\n (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n ></ocx-column-group-selection>\n\n <ocx-custom-group-column-selector\n [columns]=\"columns\"\n [displayedColumns]=\"(displayedColumns$ | async) ?? []\"\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 </div>\n </div>\n</div>\n<div class=\"p-3\">\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<ng-template #stringTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableCell\"\n [ngTemplateOutlet]=\"_stringTableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableDateCell\"\n [ngTemplateOutlet]=\"_tableDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableCell\"\n [ngTemplateOutlet]=\"_dateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableRelativeDateCell\"\n [ngTemplateOutlet]=\"_tableRelativeDateCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableCell\"\n [ngTemplateOutlet]=\"_relativeDateTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableCell\"\n [ngTemplateOutlet]=\"_tableCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #tableTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_tableTranslationKeyCell\"\n [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableCell\"\n [ngTemplateOutlet]=\"_translationKeyTableCell\"\n [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_gridItemSubtitleLines\"\n [ngTemplateOutlet]=\"_gridItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container>\n</ng-template>\n<ng-template #listItemSubtitleLines let-item>\n <ng-container\n *ngIf=\"_listItemSubtitleLines\"\n [ngTemplateOutlet]=\"_listItemSubtitleLines\"\n [ngTemplateOutletContext]=\"{$implicit:item}\"\n >\n </ng-container\n></ng-template>\n<ng-template #gridItem let-item>\n <ng-container *ngIf=\"_gridItem\" [ngTemplateOutlet]=\"_gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listItem let-item>\n <ng-container *ngIf=\"_listItem\" [ngTemplateOutlet]=\"_listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n </ng-container\n></ng-template>\n<ng-template #listValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_listValue\"\n [ngTemplateOutlet]=\"_listValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyListValue\"\n [ngTemplateOutlet]=\"_translationKeyListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberListValue\"\n [ngTemplateOutlet]=\"_numberListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateListValue\"\n [ngTemplateOutlet]=\"_relativeDateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customListValue\"\n [ngTemplateOutlet]=\"_customListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #stringListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringListValue\"\n [ngTemplateOutlet]=\"_stringListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateListValue let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateListValue\"\n [ngTemplateOutlet]=\"_dateListValue\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n\n<ng-template #stringTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_stringTableFilterCell\"\n [ngTemplateOutlet]=\"_stringTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #numberTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_numberTableFilterCell\"\n [ngTemplateOutlet]=\"_numberTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #customTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_customTableFilterCell\"\n [ngTemplateOutlet]=\"_customTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #dateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_dateTableFilterCell\"\n [ngTemplateOutlet]=\"_dateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #relativeDateTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_relativeDateTableFilterCell\"\n [ngTemplateOutlet]=\"_relativeDateTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n<ng-template #translationKeyTableFilterCell let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"_translationKeyTableFilterCell\"\n [ngTemplateOutlet]=\"_translationKeyTableFilterCell\"\n [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n >\n </ng-container\n></ng-template>\n" }]
|
|
4111
4154
|
}], propDecorators: { dataView: [{
|
|
4112
4155
|
type: ViewChild,
|
|
4113
4156
|
args: [DataViewComponent]
|
|
@@ -4129,6 +4172,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
4129
4172
|
type: Input
|
|
4130
4173
|
}], editActionEnabledField: [{
|
|
4131
4174
|
type: Input
|
|
4175
|
+
}], tableSelectionEnabledField: [{
|
|
4176
|
+
type: Input
|
|
4177
|
+
}], tableAllowSelectAll: [{
|
|
4178
|
+
type: Input
|
|
4132
4179
|
}], name: [{
|
|
4133
4180
|
type: Input
|
|
4134
4181
|
}], titleLineId: [{
|
|
@@ -4340,10 +4387,10 @@ class TranslationCacheService {
|
|
|
4340
4387
|
this.translationTopic$.publish(url);
|
|
4341
4388
|
}), map(() => window['onecxTranslations'][url]), first());
|
|
4342
4389
|
}
|
|
4343
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
4344
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
4390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TranslationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4391
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TranslationCacheService, providedIn: 'root' }); }
|
|
4345
4392
|
}
|
|
4346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
4393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TranslationCacheService, decorators: [{
|
|
4347
4394
|
type: Injectable,
|
|
4348
4395
|
args: [{ providedIn: 'root' }]
|
|
4349
4396
|
}], ctorParameters: () => [] });
|
|
@@ -4378,16 +4425,17 @@ class AppConfigService {
|
|
|
4378
4425
|
getConfig() {
|
|
4379
4426
|
return this.config$.getValue();
|
|
4380
4427
|
}
|
|
4381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
4382
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
4428
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AppConfigService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4429
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AppConfigService }); }
|
|
4383
4430
|
}
|
|
4384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
4431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AppConfigService, decorators: [{
|
|
4385
4432
|
type: Injectable
|
|
4386
4433
|
}], ctorParameters: () => [{ type: i1.HttpClient }] });
|
|
4387
4434
|
|
|
4388
4435
|
class AngularAcceleratorPrimeNgModule {
|
|
4389
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
4390
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
4436
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4437
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
|
|
4438
|
+
CheckboxModule,
|
|
4391
4439
|
DropdownModule,
|
|
4392
4440
|
ButtonModule,
|
|
4393
4441
|
DialogModule,
|
|
@@ -4401,6 +4449,7 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
4401
4449
|
SkeletonModule,
|
|
4402
4450
|
MessageModule,
|
|
4403
4451
|
SharedModule], exports: [BreadcrumbModule,
|
|
4452
|
+
CheckboxModule,
|
|
4404
4453
|
DropdownModule,
|
|
4405
4454
|
ButtonModule,
|
|
4406
4455
|
DialogModule,
|
|
@@ -4414,7 +4463,8 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
4414
4463
|
SkeletonModule,
|
|
4415
4464
|
MessageModule,
|
|
4416
4465
|
SharedModule] }); }
|
|
4417
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
4466
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [BreadcrumbModule,
|
|
4467
|
+
CheckboxModule,
|
|
4418
4468
|
DropdownModule,
|
|
4419
4469
|
ButtonModule,
|
|
4420
4470
|
DialogModule,
|
|
@@ -4428,6 +4478,7 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
4428
4478
|
SkeletonModule,
|
|
4429
4479
|
MessageModule,
|
|
4430
4480
|
SharedModule, BreadcrumbModule,
|
|
4481
|
+
CheckboxModule,
|
|
4431
4482
|
DropdownModule,
|
|
4432
4483
|
ButtonModule,
|
|
4433
4484
|
DialogModule,
|
|
@@ -4442,11 +4493,12 @@ class AngularAcceleratorPrimeNgModule {
|
|
|
4442
4493
|
MessageModule,
|
|
4443
4494
|
SharedModule] }); }
|
|
4444
4495
|
}
|
|
4445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
4496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
|
|
4446
4497
|
type: NgModule,
|
|
4447
4498
|
args: [{
|
|
4448
4499
|
imports: [
|
|
4449
4500
|
BreadcrumbModule,
|
|
4501
|
+
CheckboxModule,
|
|
4450
4502
|
DropdownModule,
|
|
4451
4503
|
ButtonModule,
|
|
4452
4504
|
DialogModule,
|
|
@@ -4463,6 +4515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
|
|
|
4463
4515
|
],
|
|
4464
4516
|
exports: [
|
|
4465
4517
|
BreadcrumbModule,
|
|
4518
|
+
CheckboxModule,
|
|
4466
4519
|
DropdownModule,
|
|
4467
4520
|
ButtonModule,
|
|
4468
4521
|
DialogModule,
|
|
@@ -4513,8 +4566,8 @@ function appInitializer(userService) {
|
|
|
4513
4566
|
};
|
|
4514
4567
|
}
|
|
4515
4568
|
class AngularAcceleratorModule {
|
|
4516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
4517
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
4569
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4570
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorModule, declarations: [ColumnGroupSelectionComponent,
|
|
4518
4571
|
CustomGroupColumnSelectorComponent,
|
|
4519
4572
|
DataLayoutSelectionComponent,
|
|
4520
4573
|
DataListGridSortingComponent,
|
|
@@ -4556,7 +4609,7 @@ class AngularAcceleratorModule {
|
|
|
4556
4609
|
OcxTimeAgoPipe,
|
|
4557
4610
|
AdvancedDirective,
|
|
4558
4611
|
TooltipOnOverflowDirective] }); }
|
|
4559
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
4612
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorModule, providers: [
|
|
4560
4613
|
{
|
|
4561
4614
|
provide: LOCALE_ID,
|
|
4562
4615
|
useClass: DynamicLocaleId,
|
|
@@ -4580,7 +4633,7 @@ class AngularAcceleratorModule {
|
|
|
4580
4633
|
RouterModule,
|
|
4581
4634
|
ReactiveFormsModule] }); }
|
|
4582
4635
|
}
|
|
4583
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
4636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: AngularAcceleratorModule, decorators: [{
|
|
4584
4637
|
type: NgModule,
|
|
4585
4638
|
args: [{
|
|
4586
4639
|
imports: [
|
|
@@ -4754,10 +4807,10 @@ class DateUtils {
|
|
|
4754
4807
|
? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
|
|
4755
4808
|
: '';
|
|
4756
4809
|
}
|
|
4757
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
4758
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
4810
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DateUtils, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4811
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
|
|
4759
4812
|
}
|
|
4760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
4813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: DateUtils, decorators: [{
|
|
4761
4814
|
type: Injectable,
|
|
4762
4815
|
args: [{
|
|
4763
4816
|
providedIn: 'root',
|