@onecx/angular-accelerator 4.42.1 → 4.43.1

package/fesm2015/onecx-angular-accelerator.mjs

@@ -1,13 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, Optional, Input, HostListener, EventEmitter, Output, Component, Injectable, Injector, LOCALE_ID, Pipe, Inject, ViewEncapsulation, ContentChild, ViewChild, NgModule, inject } from '@angular/core';
-import * as i3 from '@onecx/angular-integration-interface';
-import { UserService } from '@onecx/angular-integration-interface';
+import { InjectionToken, Directive, Inject, Optional, Input, HostListener, EventEmitter, Output, Component, Injectable, Injector, LOCALE_ID, Pipe, ViewEncapsulation, ContentChild, ViewChild, NgModule, inject } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import * as i4 from '@angular/common';
 import { CurrencyPipe, DecimalPipe, DatePipe, Location, CommonModule } from '@angular/common';
 import * as i6 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i3$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
@@ -20,6 +18,8 @@ import { __decorate, __metadata, __awaiter } from 'tslib';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, Router, ActivatedRoute, RouterModule } from '@angular/router';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import * as i3$1 from '@onecx/angular-integration-interface';
+import { UserService } from '@onecx/angular-integration-interface';
 import * as i5 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import * as i8 from 'primeng/menu';
@@ -46,6 +46,15 @@ import { MessageModule } from 'primeng/message';
 import { SyncableTopic } from '@onecx/accelerator';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
+/**
+ * This checker always returns true, basically disabling the permission system on the UI side
+ */
+class AlwaysGrantPermissionChecker {
+    hasPermission(_permissionKey) {
+        return true;
+    }
+}
+const HAS_PERMISSION_CHECKER = new InjectionToken('hasPermission');
 class IfPermissionDirective {
     set notPermission(value) {
         this.permission = value;
@@ -54,11 +63,11 @@ class IfPermissionDirective {
     set ocxIfNotPermissionPermissions(value) {
         this.ocxIfPermissionPermissions = value;
     }
-    constructor(renderer, el, viewContainer, userService, templateRef) {
+    constructor(renderer, el, viewContainer, permissionChecker, templateRef) {
         this.renderer = renderer;
         this.el = el;
         this.viewContainer = viewContainer;
-        this.userService = userService;
+        this.permissionChecker = permissionChecker;
         this.templateRef = templateRef;
         this.onMissingPermission = 'hide';
         this.negate = false;
@@ -88,16 +97,19 @@ class IfPermissionDirective {
             }
             return result;
         }
-        return this.userService.hasPermission(permission);
+        return this.permissionChecker.hasPermission(permission);
     }
 }
-IfPermissionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IfPermissionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i3.UserService }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+IfPermissionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IfPermissionDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: HAS_PERMISSION_CHECKER }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 IfPermissionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: { permission: ["ocxIfPermission", "permission"], notPermission: ["ocxIfNotPermission", "notPermission"], onMissingPermission: "onMissingPermission", ocxIfPermissionPermissions: "ocxIfPermissionPermissions", ocxIfNotPermissionPermissions: "ocxIfNotPermissionPermissions" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IfPermissionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ocxIfPermission], [ocxIfNotPermission]' }]
         }], ctorParameters: function () {
-        return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i3.UserService }, { type: i0.TemplateRef, decorators: [{
+        return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [HAS_PERMISSION_CHECKER]
+                    }] }, { type: i0.TemplateRef, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { permission: [{
@@ -224,7 +236,7 @@ class SearchConfigComponent {
     }
 }
 SearchConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], 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" }] });
+SearchConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchConfigComponent, decorators: [{
             type: Component,
             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" }]
@@ -566,12 +578,12 @@ class PageHeaderComponent {
         }
     }
 }
-PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$1.TranslateService }, { token: i3.AppStateService }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component });
+PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1$1.TranslateService }, { token: i3$1.AppStateService }, { token: i3$1.UserService }], target: i0.ɵɵFactoryTarget.Component });
 PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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-2 md: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              [title]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n              [disabled]=\"action.disabled ? action.disabled : false\"\n              [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n              [ariaLabel]=\"(action.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              title=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [ariaLabel]=\"('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\n    class=\"object-panel\"\n    [ngClass]=\"getObjectPanelLayoutClasses()\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info\"\n        [ngClass]=\"getObjectInfoLayoutClasses()\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <span\n          class=\"flex font-medium text-600 object-info-grid-label\"\n          name=\"object-detail-label\"\n          [title]=\"item.labelTooltip || ''\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</span\n        >\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"object-info-grid-value\"\n          [title]=\"item.valueTooltip || item.tooltip || ''\"\n        >\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            <i *ngIf=\"item.icon\" class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n            <p-button\n              *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n              [icon]=\"item.actionItemIcon\"\n              styleClass=\"p-button-text p-0 w-full\"\n              [title]=\"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}:host ::ng-deep .action-button{padding:.5rem;font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;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:-moz-fit-content;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .title-bar .action-items-wrap button{padding:.5rem}.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.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8$1.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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
             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-2 md: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              [title]=\"(action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)\"\n              [disabled]=\"action.disabled ? action.disabled : false\"\n              [attr.name]=\"action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'\"\n              [ariaLabel]=\"(action.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              title=\"{{ 'OCX_PAGE_HEADER.MORE_ACTIONS' | translate }}\"\n              class=\"more-actions-menu-button action-button ml-2\"\n              (click)=\"menu.toggle($event)\"\n              name=\"ocx-page-header-overflow-action-button\"\n              [ariaLabel]=\"('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\n    class=\"object-panel\"\n    [ngClass]=\"getObjectPanelLayoutClasses()\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info\"\n        [ngClass]=\"getObjectInfoLayoutClasses()\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <span\n          class=\"flex font-medium text-600 object-info-grid-label\"\n          name=\"object-detail-label\"\n          [title]=\"item.labelTooltip || ''\"\n          >{{ item.label | dynamicPipe:item.labelPipe }}</span\n        >\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"object-info-grid-value\"\n          [title]=\"item.valueTooltip || item.tooltip || ''\"\n        >\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            <i *ngIf=\"item.icon\" class='{{item.icon + \" \" + (item.iconStyleClass || \"\")}}' name=\"object-detail-icon\"></i>\n            {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}\n            <p-button\n              *ngIf=\"item.actionItemIcon && item.actionItemCallback\"\n              [icon]=\"item.actionItemIcon\"\n              styleClass=\"p-button-text p-0 w-full\"\n              [title]=\"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}:host ::ng-deep .action-button{padding:.5rem;font-weight:400}.onecx-page-header{display:flex;flex-flow:column;border-radius:.25rem;overflow:hidden;background:#fff;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:-moz-fit-content;height:fit-content;gap:.5rem;align-items:center;justify-content:space-between}.onecx-page-header .title-bar .action-items-wrap button{padding:.5rem}.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"] }]
-        }], ctorParameters: function () { return [{ type: BreadcrumbService }, { type: i1$1.TranslateService }, { type: i3.AppStateService }, { type: i3.UserService }]; }, propDecorators: { header: [{
+        }], ctorParameters: function () { return [{ type: BreadcrumbService }, { type: i1$1.TranslateService }, { type: i3$1.AppStateService }, { type: i3$1.UserService }]; }, propDecorators: { header: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -820,7 +832,7 @@ class ColumnGroupSelectionComponent {
     }
 }
 ColumnGroupSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnGroupSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnGroupSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged" }, 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: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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" }] });
+ColumnGroupSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: { selectedGroupKey: "selectedGroupKey", columns: "columns", placeholderKey: "placeholderKey", defaultGroupKey: "defaultGroupKey", customGroupKey: "customGroupKey" }, outputs: { groupSelectionChanged: "groupSelectionChanged" }, 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: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnGroupSelectionComponent, decorators: [{
             type: Component,
             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"] }]
@@ -907,7 +919,7 @@ class CustomGroupColumnSelectorComponent {
     }
 }
 CustomGroupColumnSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-CustomGroupColumnSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (click)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"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: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], 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", "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", "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", "breakpoint", "stripedRows", "keepSelection"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter"] }, { kind: "component", type: i6$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], 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" }] });
+CustomGroupColumnSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (click)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"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: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], 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", "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", "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", "breakpoint", "stripedRows", "keepSelection"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter"] }, { kind: "component", type: i6$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (click)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [title]=\"openButtonTitle || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"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"] }]
@@ -964,7 +976,7 @@ class DataLayoutSelectionComponent {
     }
 }
 DataLayoutSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataLayoutSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataLayoutSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { dataViewLayoutChange: "dataViewLayoutChange" }, 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>\n      <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></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: "component", type: i6$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], 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" }] });
+DataLayoutSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: { supportedViewLayouts: "supportedViewLayouts", layout: "layout" }, outputs: { dataViewLayoutChange: "dataViewLayoutChange" }, 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>\n      <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></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: "component", type: i6$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataLayoutSelectionComponent, decorators: [{
             type: Component,
             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>\n      <i [class]=\"item.icon\" [title]=\"item.title || (item.titleKey | translate)\"></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"] }]
@@ -1427,7 +1439,7 @@ class DataListGridComponent extends DataSortBase {
         }));
     }
 }
-DataListGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
+DataListGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataListGridComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: i3$1.UserService }, { token: i1$2.Router }, { token: i0.Injector }, { token: i3$1.AppStateService }], target: i0.ɵɵFactoryTarget.Component });
 DataListGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", additionalActions: "additionalActions" }, outputs: { viewItem: "viewItem", editItem: "editItem", deleteItem: "deleteItem", pageChanged: "pageChanged" }, 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 }], usesInheritance: true, ngImport: i0, template: "<p-dataView\n  *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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-item pTemplate=\"gridItem\">\n    <ng-container\n      [ngTemplateOutlet]=\"_gridItem ? _gridItem : defaultGridItem\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template #listItem let-item pTemplate=\"listItem\">\n    <ng-container\n      [ngTemplateOutlet]=\"_listItem ? _listItem : defaultListItem\"\n      [ngTemplateOutletContext]=\"{$implicit:item}\"\n    ></ng-container>\n  </ng-template>\n  <ng-template pTemplate=\"empty\">\n    <span>{{ emptyResultsMessage || (\"OCX_DATA_LIST_GRID.EMPTY_RESULT\" | translate) }}</span>\n  </ng-template>\n</p-dataView>\n\n<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            [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>\n  <div class=\"col-12\">\n    <div class=\"flex flex-1 align-items-center p-3 w-full\">\n      <div class=\"data-list-items flex-1\">\n        <div class=\"item-name-row flex flex-row justify-content-between\">\n          <div class=\"item-name mr-3 text-2xl font-medium\">\n            <a [routerLink]=\"\" (click)=\"onViewRow(item)\">{{ resolveFieldData(item, titleLineId) || '' }}</a>\n          </div>\n          <div class=\"flex flex-column md:flex-row md:justify-content-between\">\n            <ng-container *ngIf=\"viewItemObserved && (!viewActionVisibleField || fieldIsTruthy(item, viewActionVisibleField))\">\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 *ngIf=\"editItemObserved && (!editActionVisibleField || fieldIsTruthy(item, editActionVisibleField))\">\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 *ngIf=\"deleteItemObserved && (!deleteActionVisibleField || fieldIsTruthy(item, deleteActionVisibleField))\">\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 additionalListActions\">\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)\">\n              <p-menu #menu [model]=\"(getOverflowMenuItems(item) | 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)=\"menu.toggle($event)\"\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>\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\">{{ resolveFieldData(item, subtitleLineId) }}</div>\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "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"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataListGridComponent, decorators: [{
             type: Component,
@@ -1436,7 +1448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [LOCALE_ID]
-                    }] }, { type: i1$1.TranslateService }, { type: i3.UserService }, { type: i1$2.Router }, { type: i0.Injector }, { type: i3.AppStateService }];
+                    }] }, { type: i1$1.TranslateService }, { type: i3$1.UserService }, { type: i1$2.Router }, { type: i0.Injector }, { type: i3$1.AppStateService }];
     }, propDecorators: { titleLineId: [{
                 type: Input
             }], subtitleLineIds: [{
@@ -1599,7 +1611,7 @@ class DataListGridSortingComponent {
     }
 }
 DataListGridSortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataListGridSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataListGridSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", 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    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], 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" }] });
+DataListGridSortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: { columns: "columns", sortStates: "sortStates", sortDirection: "sortDirection", sortField: "sortField" }, outputs: { sortChange: "sortChange", sortDirectionChange: "sortDirectionChange", 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    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "overlayDirection", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataListGridSortingComponent, decorators: [{
             type: Component,
             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    [ariaLabel]=\"('OCX_LIST_GRID_SORT.SORTING_BUTTON_ARIA_LABEL' | translate:{direction: (sortDirectionToTitle(nextSortDirection())) | translate})\"\n  ></p-button>\n</div>\n", styles: [".pi{border-radius:var(--border-radius);border-width:thin;background:none;cursor:pointer}\n"] }]
@@ -1985,8 +1997,8 @@ class DataTableComponent extends DataSortBase {
         }));
     }
 }
-DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", paginator: "paginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || this.overflowActions.length > 0\">\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <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 additionalActions\">\n          <ng-container\n            *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\"\n          >\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)\">\n          <p-menu #menu [model]=\"(getOverflowMenuItems(rowObject) | 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)=\"menu.toggle($event)\"\n            [ariaLabel]=\"'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 *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || this.overflowActions.length > 0\">\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<p-table\n  *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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 [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n                    <span *ngSwitchCase=\"'DATE'\">{{ value.label | date }}</span>\n                    <span *ngSwitchDefault> {{ value.label }} </span>\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 [value]=\"rowObject\"></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: defaultCell\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\n<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container [ngSwitch]=\"column.columnType\">\n    <ng-container *ngSwitchCase=\"'CUSTOM'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _customCell ? _customCell: defaultCustomCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'DATE'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _dateCell ? _dateCell : defaultDateCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'RELATIVE_DATE'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _relativeDateCell ? _relativeDateCell : defaultRelativeDateCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'TRANSLATION_KEY'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _translationKeyCell ? _translationKeyCell: defaultTranslationKeyCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'NUMBER'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _numberCell ? _numberCell: defaultNumberCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _stringCell ? _stringCell: defaultStringCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #defaultStringCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] }} </ng-container>\n</ng-template>\n\n<ng-template #defaultNumberCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] | number }} </ng-container>\n</ng-template>\n\n<ng-template #defaultCustomCell let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template #defaultDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] | date: 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template #defaultRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ rowObject[column.id] | timeago }} </ng-container>\n</ng-template>\n\n<ng-template #defaultTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ 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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "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", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "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$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i7$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i7$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"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { 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" }] });
+DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.TranslateService }, { token: i1$2.Router }, { token: i0.Injector }, { token: i3$1.UserService }], target: i0.ɵɵFactoryTarget.Component });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", paginator: "paginator", page: "page", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || this.overflowActions.length > 0\">\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <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 additionalActions\">\n          <ng-container\n            *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\"\n          >\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)\">\n          <p-menu #menu [model]=\"(getOverflowMenuItems(rowObject) | 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)=\"menu.toggle($event)\"\n            [ariaLabel]=\"'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 *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || this.overflowActions.length > 0\">\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<p-table\n  *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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 [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n                    <span *ngSwitchCase=\"'DATE'\">{{ value.label | date }}</span>\n                    <span *ngSwitchDefault> {{ value.label }} </span>\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 [value]=\"rowObject\"></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: defaultCell\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\n<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container [ngSwitch]=\"column.columnType\">\n    <ng-container *ngSwitchCase=\"'CUSTOM'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _customCell ? _customCell: defaultCustomCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'DATE'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _dateCell ? _dateCell : defaultDateCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'RELATIVE_DATE'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _relativeDateCell ? _relativeDateCell : defaultRelativeDateCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'TRANSLATION_KEY'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _translationKeyCell ? _translationKeyCell: defaultTranslationKeyCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'NUMBER'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _numberCell ? _numberCell: defaultNumberCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _stringCell ? _stringCell: defaultStringCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #defaultStringCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] }} </ng-container>\n</ng-template>\n\n<ng-template #defaultNumberCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] | number }} </ng-container>\n</ng-template>\n\n<ng-template #defaultCustomCell let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template #defaultDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] | date: 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template #defaultRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ rowObject[column.id] | timeago }} </ng-container>\n</ng-template>\n\n<ng-template #defaultTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ 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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i7$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "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", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "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$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i7$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i7$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"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions"] }, { 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || this.overflowActions.length > 0\">\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <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 additionalActions\">\n          <ng-container\n            *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\"\n          >\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)\">\n          <p-menu #menu [model]=\"(getOverflowMenuItems(rowObject) | 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)=\"menu.toggle($event)\"\n            [ariaLabel]=\"'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 *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || this.overflowActions.length > 0\">\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<p-table\n  *ngIf=\"displayedPageSize$ | async as displayedPageSize\"\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 [ngSwitch]=\"(currentFilterColumn$ | async)?.columnType\">\n                    <span *ngSwitchCase=\"'DATE'\">{{ value.label | date }}</span>\n                    <span *ngSwitchDefault> {{ value.label }} </span>\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 [value]=\"rowObject\"></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: defaultCell\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\n<ng-template #defaultCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container [ngSwitch]=\"column.columnType\">\n    <ng-container *ngSwitchCase=\"'CUSTOM'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _customCell ? _customCell: defaultCustomCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'DATE'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _dateCell ? _dateCell : defaultDateCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'RELATIVE_DATE'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _relativeDateCell ? _relativeDateCell : defaultRelativeDateCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'TRANSLATION_KEY'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _translationKeyCell ? _translationKeyCell: defaultTranslationKeyCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'NUMBER'\">\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _numberCell ? _numberCell: defaultNumberCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <ng-container\n        [ngTemplateOutlet]=\"\n            _stringCell ? _stringCell: defaultStringCell\n            \"\n        [ngTemplateOutletContext]=\"{\n                rowObject: rowObject,\n                column: column\n            }\"\n      >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #defaultStringCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] }} </ng-container>\n</ng-template>\n\n<ng-template #defaultNumberCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] | number }} </ng-container>\n</ng-template>\n\n<ng-template #defaultCustomCell let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template #defaultDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ rowObject[column.id] | date: 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template #defaultRelativeDateCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ rowObject[column.id] | timeago }} </ng-container>\n</ng-template>\n\n<ng-template #defaultTranslationKeyCell let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ 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"] }]
@@ -1994,7 +2006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [LOCALE_ID]
-                    }] }, { type: i1$1.TranslateService }, { type: i1$2.Router }, { type: i0.Injector }, { type: i3.UserService }];
+                    }] }, { type: i1$1.TranslateService }, { type: i1$2.Router }, { type: i0.Injector }, { type: i3$1.UserService }];
     }, propDecorators: { rows: [{
                 type: Input
             }], selectedRows: [{
@@ -2137,14 +2149,32 @@ class DataViewComponent {
     get _customTableCell() {
         return this.customTableCellTemplate || this.customTableCellChildTemplate;
     }
-    get _tableDateCell() {
-        return this.tableDateCellTemplate || this.tableDateCellChildTemplate;
+    /**
+     * @deprecated Will be replaced by dateTableCellTemplate
+     */
+    get tableDateCellTemplate() {
+        return this.dateTableCellTemplate;
+    }
+    set tableDateCellTemplate(value) {
+        this.dateTableCellTemplate = value;
+    }
+    get _dateTableCell() {
+        return this.dateTableCellTemplate || this.dateTableCellChildTemplate || this.tableDateCellChildTemplate;
     }
     get _tableCell() {
         return this.tableCellTemplate || this.tableCellChildTemplate;
     }
-    get _tableTranslationKeyCell() {
-        return this.tableTranslationKeyCellTemplate || this.tableTranslationKeyCellChildTemplate;
+    /**
+     * @deprecated Will be replaced by translationKeyTableCellTemplate
+     */
+    get tableTranslationKeyCellTemplate() {
+        return this.translationKeyTableCellTemplate;
+    }
+    set tableTranslationKeyCellTemplate(value) {
+        this.translationKeyTableCellTemplate = value;
+    }
+    get _translationKeyTableCell() {
+        return this.translationKeyTableCellTemplate || this.translationKeyTableCellChildTemplate || this.tableTranslationKeyCellChildTemplate;
     }
     get _gridItemSubtitleLines() {
         return this.gridItemSubtitleLinesTemplate || this.gridItemSubtitleLinesChildTemplate;
@@ -2158,8 +2188,17 @@ class DataViewComponent {
     get _listItem() {
         return this.listItemTemplate || this.listItemChildTemplate;
     }
-    get _tableRelativeDateCell() {
-        return this.tableRelativeDateCellTemplate || this.tableRelativeDateCellChildTemplate;
+    /**
+     * @deprecated Will be replaced by relativeDateTableCellTemplate
+     */
+    get tableRelativeDateCellTemplate() {
+        return this.relativeDateTableCellTemplate;
+    }
+    set tableRelativeDateCellTemplate(value) {
+        this.relativeDateTableCellTemplate = value;
+    }
+    get _relativeDateTableCell() {
+        return this.relativeDateTableCellTemplate || this.relativeDateTableCellChildTemplate || this.tableRelativeDateCellChildTemplate;
     }
     get viewItemObserved() {
         var _a;
@@ -2318,10 +2357,10 @@ class DataViewComponent {
     }
 }
 DataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataViewComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", tableDateCellTemplate: "tableDateCellTemplate", tableCellTemplate: "tableCellTemplate", tableTranslationKeyCellTemplate: "tableTranslationKeyCellTemplate", gridItemSubtitleLinesTemplate: "gridItemSubtitleLinesTemplate", listItemSubtitleLinesTemplate: "listItemSubtitleLinesTemplate", gridItemTemplate: "gridItemTemplate", listItemTemplate: "listItemTemplate", tableRelativeDateCellTemplate: "tableRelativeDateCellTemplate", additionalActions: "additionalActions" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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: "tableCellChildTemplate", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableTranslationKeyCellChildTemplate", first: true, predicate: ["tableTranslationKeyCell"], 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 }], 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 || firstColumnId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($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    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\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</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    [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]=\"_tableDateCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_tableRelativeDateCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_tableTranslationKeyCell ? translationKeyCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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=\"_tableDateCell\"\n      [ngTemplateOutlet]=\"_tableDateCell\"\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=\"_tableRelativeDateCell\"\n      [ngTemplateOutlet]=\"_tableRelativeDateCell\"\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=\"_tableTranslationKeyCell\"\n      [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\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", "additionalActions"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged"] }, { 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", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged"] }] });
+DataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", additionalActions: "additionalActions" }, outputs: { filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], 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 || firstColumnId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($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    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\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</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    [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    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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</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", "additionalActions"], outputs: ["viewItem", "editItem", "deleteItem", "pageChanged"] }, { 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", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
-            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 || firstColumnId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($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    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\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</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    [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]=\"_tableDateCell ? dateCell : undefined\"\n    [relativeDateCellTemplate]=\"_tableRelativeDateCell ? relativeDateCell : undefined\"\n    [cellTemplate]=\"_tableCell ? cell : undefined\"\n    [translationKeyCellTemplate]=\"_tableTranslationKeyCell ? translationKeyCell : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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=\"_tableDateCell\"\n      [ngTemplateOutlet]=\"_tableDateCell\"\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=\"_tableRelativeDateCell\"\n      [ngTemplateOutlet]=\"_tableRelativeDateCell\"\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=\"_tableTranslationKeyCell\"\n      [ngTemplateOutlet]=\"_tableTranslationKeyCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container\n  ></ng-template>\n</div>\n" }]
+            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 || firstColumnId\"\n    [subtitleLineIds]=\"subtitleLineIds\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes\"\n    [pageSize]=\"pageSize\"\n    [paginator]=\"listGridPaginator\"\n    [page]=\"page\"\n    (pageChanged)=\"onPageChange($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    [gridItemTemplate]=\"_gridItem ? gridItem  : undefined\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\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</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    [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    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { listGrid: [{
                 type: ViewChild,
                 args: [DataListGridComponent]
@@ -2413,21 +2452,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], customTableCellChildTemplate: [{
                 type: ContentChild,
                 args: ['customTableCell']
+            }], dateTableCellTemplate: [{
+                type: Input
             }], tableDateCellTemplate: [{
                 type: Input
             }], tableDateCellChildTemplate: [{
                 type: ContentChild,
                 args: ['tableDateCell']
+            }], dateTableCellChildTemplate: [{
+                type: ContentChild,
+                args: ['dateTableCell']
             }], tableCellTemplate: [{
                 type: Input
             }], tableCellChildTemplate: [{
                 type: ContentChild,
                 args: ['tableCell']
+            }], translationKeyTableCellTemplate: [{
+                type: Input
             }], tableTranslationKeyCellTemplate: [{
                 type: Input
             }], tableTranslationKeyCellChildTemplate: [{
                 type: ContentChild,
                 args: ['tableTranslationKeyCell']
+            }], translationKeyTableCellChildTemplate: [{
+                type: ContentChild,
+                args: ['translationKeyTableCell']
             }], gridItemSubtitleLinesTemplate: [{
                 type: Input
             }], gridItemSubtitleLinesChildTemplate: [{
@@ -2448,11 +2497,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], listItemChildTemplate: [{
                 type: ContentChild,
                 args: ['listItem']
+            }], relativeDateTableCellTemplate: [{
+                type: Input
             }], tableRelativeDateCellTemplate: [{
                 type: Input
             }], tableRelativeDateCellChildTemplate: [{
                 type: ContentChild,
                 args: ['tableRelativeDateCell']
+            }], relativeDateTableCellChildTemplate: [{
+                type: ContentChild,
+                args: ['relativeDateTableCell']
             }], additionalActions: [{
                 type: Input
             }], filtered: [{
@@ -2588,7 +2642,7 @@ class DiagramComponent {
     }
 }
 DiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DiagramComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged" }, 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: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i5$2.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "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" }] });
+DiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DiagramComponent, selector: "ocx-diagram", inputs: { data: "data", sumKey: "sumKey", diagramType: "diagramType", supportedDiagramTypes: "supportedDiagramTypes" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged" }, 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: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6$1.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: i5$2.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "data", "options"], outputs: ["onDataSelect"] }, { kind: "component", type: i6$2.UIMessage, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             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"] }]
@@ -2786,13 +2840,25 @@ class InteractiveDataViewComponent {
         return this.customTableCell;
     }
     get _tableDateCell() {
-        return this.tableDateCell;
+        var _a;
+        return (_a = this.dateTableCell) !== null && _a !== void 0 ? _a : this.tableDateCell;
+    }
+    get _dateTableCell() {
+        return this.dateTableCell;
     }
     get _tableRelativeDateCell() {
-        return this.tableRelativeDateCell;
+        var _a;
+        return (_a = this.relativeDateTableCell) !== null && _a !== void 0 ? _a : this.tableRelativeDateCell;
+    }
+    get _relativeDateTableCell() {
+        return this.relativeDateTableCell;
     }
     get _tableTranslationKeyCell() {
-        return this.tableTranslationKeyCell;
+        var _a;
+        return (_a = this.translationKeyTableCell) !== null && _a !== void 0 ? _a : this.tableTranslationKeyCell;
+    }
+    get _translationKeyTableCell() {
+        return this.translationKeyTableCell;
     }
     get _gridItem() {
         return this.gridItem;
@@ -2914,10 +2980,10 @@ class InteractiveDataViewComponent {
     }
 }
 InteractiveDataViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InteractiveDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", 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", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "tableCell", first: true, predicate: ["tableCell"], descendants: true }, { propertyName: "tableDateCell", first: true, predicate: ["tableDateCell"], descendants: true }, { propertyName: "tableRelativeDateCell", first: true, predicate: ["tableRelativeDateCell"], descendants: true }, { propertyName: "tableTranslationKeyCell", first: true, predicate: ["tableTranslationKeyCell"], 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 }], 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    ></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]=\"columns\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($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      ></ocx-column-group-selection>\n\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"displayedColumns\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($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\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId || firstColumnId\"\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    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [tableDateCellTemplate]=\"_tableDateCell ? tableDateCell : undefined\"\n    [tableRelativeDateCellTemplate]=\"_tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [tableTranslationKeyCellTemplate]=\"_tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem? listItem : undefined\"\n    [gridItemTemplate]=\"_gridItem? gridItem  : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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 #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 #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 #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", 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"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "dialogTitle", "openButtonTitle", "saveButtonLabel", "cancelButtonLabel", "activeColumnsLabel", "inactiveColumnsLabel", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "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", "tableDateCellTemplate", "tableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "tableRelativeDateCellTemplate", "additionalActions"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged"] }] });
+InteractiveDataViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", 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", selectionChanged: "selectionChanged", pageChanged: "pageChanged" }, 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 }], 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    ></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]=\"columns\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($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      ></ocx-column-group-selection>\n\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"displayedColumns\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($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\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId || firstColumnId\"\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    [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    [gridItemTemplate]=\"_gridItem? gridItem  : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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", 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"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "dialogTitle", "openButtonTitle", "saveButtonLabel", "cancelButtonLabel", "activeColumnsLabel", "inactiveColumnsLabel", "frozenActionColumn", "actionColumnPosition"], outputs: ["columnSelectionChanged", "actionColumnConfigChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["dataViewLayoutChange"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortChange", "sortDirectionChange", "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", "additionalActions"], outputs: ["filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
             type: Component,
-            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    ></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]=\"columns\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($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      ></ocx-column-group-selection>\n\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"displayedColumns\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($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\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId || firstColumnId\"\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    [selectedRows]=\"selectedRows\"\n    [frozenActionColumn]=\"frozenActionColumn\"\n    [actionColumnPosition]=\"actionColumnPosition\"\n    [stringTableCellTemplate]=\"_stringTableCell ? stringTableCell : undefined\"\n    [numberTableCellTemplate]=\"_numberTableCell ? numberTableCell : undefined\"\n    [customTableCellTemplate]=\"_customTableCell ? customTableCell : undefined\"\n    [tableDateCellTemplate]=\"_tableDateCell ? tableDateCell : undefined\"\n    [tableRelativeDateCellTemplate]=\"_tableRelativeDateCell ? tableRelativeDateCell : undefined\"\n    [tableCellTemplate]=\"_tableCell ? tableCell : undefined\"\n    [tableTranslationKeyCellTemplate]=\"_tableTranslationKeyCell ? tableTranslationKeyCell : undefined\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines ? gridItemSubtitleLines : undefined\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines ? listItemSubtitleLines : undefined\"\n    [listItemTemplate]=\"_listItem? listItem : undefined\"\n    [gridItemTemplate]=\"_gridItem? gridItem  : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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 #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 #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 #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" }]
+            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    ></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]=\"columns\"\n        [sortStates]=\"sortStates\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($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      ></ocx-column-group-selection>\n\n      <ocx-custom-group-column-selector\n        [columns]=\"columns\"\n        [displayedColumns]=\"displayedColumns\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn\"\n        [actionColumnPosition]=\"actionColumnPosition\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($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\"\n    [sortStates]=\"sortStates\"\n    [sortField]=\"sortField\"\n    [filters]=\"filters\"\n    [data]=\"data\"\n    [sortDirection]=\"sortDirection\"\n    [titleLineId]=\"titleLineId || firstColumnId\"\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    [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    [gridItemTemplate]=\"_gridItem? gridItem  : undefined\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer\"\n    [currentPageShowingKey]=\"currentPageShowingKey\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey\"\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" }]
         }], propDecorators: { dataView: [{
                 type: ViewChild,
                 args: [DataViewComponent]
@@ -3005,12 +3071,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], tableDateCell: [{
                 type: ContentChild,
                 args: ['tableDateCell']
+            }], dateTableCell: [{
+                type: ContentChild,
+                args: ['dateTableCell']
             }], tableRelativeDateCell: [{
                 type: ContentChild,
                 args: ['tableRelativeDateCell']
+            }], relativeDateTableCell: [{
+                type: ContentChild,
+                args: ['relativeDateTableCell']
             }], tableTranslationKeyCell: [{
                 type: ContentChild,
                 args: ['tableTranslationKeyCell']
+            }], translationKeyTableCell: [{
+                type: ContentChild,
+                args: ['translationKeyTableCell']
             }], gridItemSubtitleLines: [{
                 type: ContentChild,
                 args: ['gridItemSubtitleLines']
@@ -3283,6 +3358,10 @@ AngularAcceleratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
             },
             deps: [UserService],
         },
+        {
+            provide: HAS_PERMISSION_CHECKER,
+            useExisting: UserService,
+        },
         AppConfigService,
     ], imports: [CommonModule,
         AngularAcceleratorPrimeNgModule,
@@ -3331,6 +3410,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             },
                             deps: [UserService],
                         },
+                        {
+                            provide: HAS_PERMISSION_CHECKER,
+                            useExisting: UserService,
+                        },
                         AppConfigService,
                     ],
                     exports: [
@@ -3496,5 +3579,5 @@ function enumToDropdownOptions(translateService, enumType, translationKeyPrefix)
  * Generated bundle index. Do not edit.
  */
 
-export { AdvancedDirective, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AppConfigService, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchConfigComponent, SearchHeaderComponent, SrcDirective, TranslateCombinedLoader, TranslationCacheService, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, flattenObject, isValidDate };
+export { AdvancedDirective, AlwaysGrantPermissionChecker, AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AppConfigService, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, GroupByCountDiagramComponent, HAS_PERMISSION_CHECKER, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchConfigComponent, SearchHeaderComponent, SrcDirective, TranslateCombinedLoader, TranslationCacheService, createRemoteComponentTranslateLoader, createTranslateLoader, enumToDropdownOptions, flattenObject, isValidDate };
 //# sourceMappingURL=onecx-angular-accelerator.mjs.map