@onecx/angular-accelerator 4.11.0

package/fesm2020/onecx-angular-accelerator.mjs

@@ -0,0 +1,3085 @@
+import * as i0 from '@angular/core';
+import { Directive, Optional, Input, HostListener, EventEmitter, Component, Output, LOCALE_ID, Inject, ContentChild, Pipe, ViewChild, Injectable, Injector, ViewEncapsulation, NgModule, inject, importProvidersFrom, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i2 from '@onecx/angular-integration-interface';
+import { UserService, AppStateService } from '@onecx/angular-integration-interface';
+import { BehaviorSubject, combineLatest, map, of, mergeMap, filter, concat, withLatestFrom, tap, race, first, defaultIfEmpty, forkJoin } from 'rxjs';
+import * as i3 from '@angular/common';
+import { CurrencyPipe, DecimalPipe, DatePipe, Location, CommonModule } from '@angular/common';
+import * as i2$1 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i2$2 from 'primeng/api';
+import { PrimeIcons } from 'primeng/api';
+import * as i3$1 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule, TranslateLoader, MissingTranslationHandler } from '@ngx-translate/core';
+import * as i5 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i4 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i5$1 from 'primeng/picklist';
+import { PickListModule } from 'primeng/picklist';
+import * as i6 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i1$1 from '@angular/router';
+import { NavigationEnd, RouterModule } from '@angular/router';
+import * as i7 from 'primeng/dataview';
+import { DataViewModule } from 'primeng/dataview';
+import * as i8 from 'primeng/menu';
+import { MenuModule } from 'primeng/menu';
+import * as i6$1 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i7$1 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { TimeagoPipe, TimeagoIntl, TimeagoModule, TimeagoFormatter, TimeagoCustomFormatter, TimeagoClock, TimeagoDefaultClock } from 'ngx-timeago';
+import * as d3 from 'd3-scale-chromatic';
+import * as i5$2 from 'primeng/chart';
+import { ChartModule } from 'primeng/chart';
+import { SyncableTopic } from '@onecx/accelerator';
+import { HttpClient } from '@angular/common/http';
+import { strings } from 'ngx-timeago/language-strings/en';
+import { strings as strings$1 } from 'ngx-timeago/language-strings/de';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+class IfPermissionDirective {
+    set notPermission(value) {
+        this.permission = value;
+        this.negate = true;
+    }
+    constructor(renderer, el, viewContainer, userService, templateRef) {
+        this.renderer = renderer;
+        this.el = el;
+        this.viewContainer = viewContainer;
+        this.userService = userService;
+        this.templateRef = templateRef;
+        this.onMissingPermission = 'hide';
+        this.negate = false;
+    }
+    ngOnInit() {
+        if (this.permission) {
+            if (this.negate === this.userService.hasPermission(this.permission)) {
+                if (this.onMissingPermission === 'disable') {
+                    this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
+                }
+                else {
+                    this.viewContainer.clear();
+                }
+            }
+            else {
+                if (this.templateRef) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+            }
+        }
+    }
+}
+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: i2.UserService }, { 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" }, 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: i2.UserService }, { type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { permission: [{
+                type: Input,
+                args: ['ocxIfPermission']
+            }], notPermission: [{
+                type: Input,
+                args: ['ocxIfNotPermission']
+            }], onMissingPermission: [{
+                type: Input
+            }] } });
+
+class IfBreakpointDirective {
+    constructor(viewContainer, templateRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+    }
+    ngOnInit() {
+        this.onResize();
+    }
+    onResize() {
+        const mobileBreakpointVar = getComputedStyle(document.documentElement).getPropertyValue('--mobile-break-point');
+        const isMobile = window.matchMedia(`(max-width: ${mobileBreakpointVar})`).matches;
+        const isDesktop = !isMobile;
+        if ((this.breakpoint === 'mobile' && isMobile) || (this.breakpoint === 'desktop' && isDesktop)) {
+            if (this.templateRef && !this.viewContainer.length) {
+                this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+        }
+        else {
+            this.viewContainer.clear();
+        }
+    }
+}
+IfBreakpointDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IfBreakpointDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+IfBreakpointDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: { breakpoint: ["ocxIfBreakpoint", "breakpoint"] }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IfBreakpointDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ocxIfBreakpoint]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { breakpoint: [{
+                type: Input,
+                args: ['ocxIfBreakpoint']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class ColumnGroupSelectionComponent {
+    constructor() {
+        this.selectedGroupKey$ = new BehaviorSubject('');
+        this.columns$ = new BehaviorSubject([]);
+        this.placeholderKey = '';
+        this.defaultGroupKey = '';
+        this.customGroupKey = '';
+        this.groupSelectionChanged = new EventEmitter();
+    }
+    get selectedGroupKey() {
+        return this.selectedGroupKey$.getValue();
+    }
+    set selectedGroupKey(value) {
+        this.selectedGroupKey$.next(value);
+    }
+    get columns() {
+        return this.columns$.getValue();
+    }
+    set columns(value) {
+        this.columns$.next(value);
+    }
+    ngOnInit() {
+        this.allGroupKeys$ = combineLatest([this.columns$, this.selectedGroupKey$]).pipe(map(([columns, selectedGroupKey]) => columns
+            .map((keys) => keys.predefinedGroupKeys || [])
+            .flat()
+            .concat([this.defaultGroupKey])
+            .concat([selectedGroupKey])
+            .filter((value) => !!value)
+            .filter((value, index, self) => self.indexOf(value) === index && value != null)));
+    }
+    changeGroupSelection(event) {
+        if (event.value === this.customGroupKey) {
+            return;
+        }
+        const activeColumns = this.columns.filter((c) => c.predefinedGroupKeys?.includes(event.value));
+        this.groupSelectionChanged.emit({ activeColumns, groupKey: event.value });
+    }
+    clearGroupSelection() {
+        let activeColumns = this.columns;
+        if (this.defaultGroupKey) {
+            activeColumns = this.columns.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey));
+        }
+        this.groupSelectionChanged.emit({ activeColumns, groupKey: this.defaultGroupKey });
+    }
+}
+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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$2.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.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"] }]
+        }], propDecorators: { selectedGroupKey: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], placeholderKey: [{
+                type: Input
+            }], defaultGroupKey: [{
+                type: Input
+            }], customGroupKey: [{
+                type: Input
+            }], groupSelectionChanged: [{
+                type: Output
+            }] } });
+
+class CustomGroupColumnSelectorComponent {
+    constructor(translate) {
+        this.translate = translate;
+        this.columns = [];
+        this.displayedColumns = [];
+        this.dialogTitle = '';
+        this.openButtonTitle = '';
+        this.saveButtonLabel = '';
+        this.cancelButtonLabel = '';
+        this.activeColumnsLabel = '';
+        this.inactiveColumnsLabel = '';
+        this.frozenActionColumn = false;
+        this.actionColumnPosition = 'right';
+        this.columnSelectionChanged = new EventEmitter();
+        this.actionColumnConfigChanged = new EventEmitter();
+        this.hiddenColumnsModel = [];
+        this.displayedColumnsModel = [];
+        this.frozenActionColumnModel = false;
+        this.actionColumnPositionModel = 'right';
+        this.visible = false;
+        this.alignmentOptions = [
+            {
+                label: 'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.LEFT',
+                value: 'left',
+            },
+            {
+                label: 'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.RIGHT',
+                value: 'right',
+            },
+        ];
+        this.frozenOptions = [
+            {
+                label: 'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.YES',
+                value: true,
+            },
+            {
+                label: 'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.NO',
+                value: false,
+            },
+        ];
+    }
+    onOpenCustomGroupColumnSelectionDialogClick() {
+        this.displayedColumnsModel = [...this.displayedColumns];
+        this.hiddenColumnsModel = this.columns.filter((column) => !this.displayedColumnsModel.map((c) => c.id).includes(column.id));
+        this.frozenActionColumnModel = this.frozenActionColumn;
+        this.actionColumnPositionModel = this.actionColumnPosition;
+        this.visible = true;
+    }
+    onSaveClick() {
+        this.visible = false;
+        const colIdsBefore = this.displayedColumns.map((column) => column.id);
+        const colIdsAfter = this.displayedColumnsModel.map((column) => column.id);
+        if (!colIdsAfter.every((colId, i) => colId === colIdsBefore[i])) {
+            this.columnSelectionChanged.emit({ activeColumns: [...this.displayedColumnsModel] });
+        }
+        if (this.frozenActionColumn != this.frozenActionColumnModel ||
+            this.actionColumnPosition != this.actionColumnPositionModel) {
+            this.actionColumnConfigChanged.emit({
+                frozenActionColumn: this.frozenActionColumnModel,
+                actionColumnPosition: this.actionColumnPositionModel,
+            });
+        }
+    }
+    onCancelClick() {
+        this.visible = false;
+    }
+}
+CustomGroupColumnSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [{ token: i1.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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.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.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.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"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { columns: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], dialogTitle: [{
+                type: Input
+            }], openButtonTitle: [{
+                type: Input
+            }], saveButtonLabel: [{
+                type: Input
+            }], cancelButtonLabel: [{
+                type: Input
+            }], activeColumnsLabel: [{
+                type: Input
+            }], inactiveColumnsLabel: [{
+                type: Input
+            }], frozenActionColumn: [{
+                type: Input
+            }], actionColumnPosition: [{
+                type: Input
+            }], columnSelectionChanged: [{
+                type: Output
+            }], actionColumnConfigChanged: [{
+                type: Output
+            }] } });
+
+const ALL_VIEW_LAYOUTS = [
+    { icon: PrimeIcons.LIST, layout: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
+    { icon: PrimeIcons.TH_LARGE, layout: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
+    { icon: PrimeIcons.TABLE, layout: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
+];
+class DataLayoutSelectionComponent {
+    constructor() {
+        this.supportedViewLayouts = [];
+        this.dataViewLayoutChange = new EventEmitter();
+        this.viewingLayouts = [];
+    }
+    set layout(value) {
+        this.selectedViewLayout = this.viewingLayouts.find((v) => v.layout === value);
+    }
+    get layout() {
+        return this.selectedViewLayout?.layout || 'table';
+    }
+    ngOnInit() {
+        this.viewingLayouts = ALL_VIEW_LAYOUTS.filter((vl) => this.supportedViewLayouts.includes(vl.layout));
+        this.layout = 'table';
+    }
+    onDataViewLayoutChange(event) {
+        this.dataViewLayoutChange.emit(event.layout);
+    }
+}
+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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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.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"] }]
+        }], propDecorators: { supportedViewLayouts: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], dataViewLayoutChange: [{
+                type: Output
+            }] } });
+
+class ObjectUtils {
+    static resolveFieldData(data, field) {
+        if (data && field) {
+            if (this.isFunction(field)) {
+                return field(data);
+            }
+            else if (field.indexOf('.') == -1) {
+                return data[field];
+            }
+            else {
+                const fields = field.split('.');
+                let value = data;
+                for (let i = 0, len = fields.length; i < len; ++i) {
+                    if (value == null) {
+                        return null;
+                    }
+                    value = value[fields[i]];
+                }
+                return value;
+            }
+        }
+        else {
+            return null;
+        }
+    }
+    static isFunction(obj) {
+        return !!(obj && obj.constructor && obj.call && obj.apply);
+    }
+}
+
+function flattenObject(ob) {
+    const toReturn = {};
+    for (const i in ob) {
+        if (!Object.prototype.hasOwnProperty.call(ob, i))
+            continue;
+        if (!!ob[i] && typeof ob[i] == 'object' && !(ob[i] instanceof Date) && !Array.isArray(ob[i])) {
+            const flatObject = flattenObject(ob[i]);
+            for (const x in flatObject) {
+                if (!Object.prototype.hasOwnProperty.call(flatObject, x))
+                    continue;
+                toReturn[i + '.' + x] = flatObject[x];
+            }
+        }
+        else {
+            toReturn[i] = ob[i];
+        }
+    }
+    return toReturn;
+}
+
+var ColumnType;
+(function (ColumnType) {
+    ColumnType["STRING"] = "STRING";
+    ColumnType["NUMBER"] = "NUMBER";
+    ColumnType["DATE"] = "DATE";
+    ColumnType["RELATIVE_DATE"] = "RELATIVE_DATE";
+    ColumnType["TRANSLATION_KEY"] = "TRANSLATION_KEY";
+})(ColumnType || (ColumnType = {}));
+
+class DataSortBase {
+    constructor(locale, translateService) {
+        this.locale = locale;
+        this.translateService = translateService;
+    }
+    translateItems([items, filters, sortColumn, sortDirection], columns, clientSideFiltering, clientSideSorting) {
+        if (clientSideFiltering || clientSideSorting) {
+            let translationKeys = [];
+            const translatedColumns = columns.filter((c) => c.columnType === ColumnType.TRANSLATION_KEY);
+            translatedColumns.forEach((c) => {
+                translationKeys = [...translationKeys, ...items.map((i) => ObjectUtils.resolveFieldData(i, c.id)?.toString())];
+            });
+            if (translationKeys.length) {
+                return this.translateService.get(translationKeys).pipe(map((translatedValues) => {
+                    const translations = {};
+                    translatedColumns.forEach((c) => {
+                        translations[c.id] = Object.fromEntries(items.map((i) => [
+                            ObjectUtils.resolveFieldData(i, c.id)?.toString() || '',
+                            translatedValues[ObjectUtils.resolveFieldData(i, c.id)?.toString()],
+                        ]));
+                    });
+                    return [items, filters, sortColumn, sortDirection, translations];
+                }));
+            }
+        }
+        return of([items, filters, sortColumn, sortDirection, {}]);
+    }
+    filterItems([items, filters, sortColumn, sortDirection, translations], clientSideFiltering) {
+        if (!clientSideFiltering) {
+            return [items, filters, sortColumn, sortDirection, translations];
+        }
+        return [
+            items.filter((item) => filters
+                .map((filter) => filter.columnId)
+                .filter((value, index, self) => self.indexOf(value) === index && value != null)
+                .every((filterColumnId) => filters
+                .filter((filter) => filter.columnId === filterColumnId)
+                .some((filter) => (translations[filter.columnId]?.[ObjectUtils.resolveFieldData(item, filter.columnId).toString()] ||
+                ObjectUtils.resolveFieldData(item, filter.columnId)).toString() === filter.value.toString()))),
+            filters,
+            sortColumn,
+            sortDirection,
+            translations,
+        ];
+    }
+    sortItems([items, filters, sortColumn, sortDirection, translations], columns, clientSideSorting) {
+        if (!clientSideSorting || sortColumn === '') {
+            return [items, filters, sortColumn, sortDirection, translations];
+        }
+        let translatedColValues = Object.fromEntries(items.map((i) => [
+            ObjectUtils.resolveFieldData(i, sortColumn)?.toString(),
+            ObjectUtils.resolveFieldData(i, sortColumn)?.toString(),
+        ]));
+        if (columns.find((h) => h.id === sortColumn)?.columnType === ColumnType.TRANSLATION_KEY) {
+            translatedColValues = translations[sortColumn];
+        }
+        return [
+            [...items].sort(this.createCompareFunction(translatedColValues, sortColumn, sortDirection)),
+            filters,
+            sortColumn,
+            sortDirection,
+            translations,
+        ];
+    }
+    flattenItems(items) {
+        return items.map((i) => flattenObject(i));
+    }
+    createCompareFunction(translatedColValues, sortColumn, sortDirection) {
+        let direction = 0;
+        if (sortDirection === "ASCENDING" /* DataSortDirection.ASCENDING */) {
+            direction = 1;
+        }
+        else if (sortDirection === "DESCENDING" /* DataSortDirection.DESCENDING */) {
+            direction = -1;
+        }
+        return (data1, data2) => {
+            if (direction === 0) {
+                return 0;
+            }
+            let result;
+            const value1 = translatedColValues[ObjectUtils.resolveFieldData(data1, sortColumn)];
+            const value2 = translatedColValues[ObjectUtils.resolveFieldData(data2, sortColumn)];
+            if (value1 == null && value2 != null)
+                result = -1;
+            else if (value1 != null && value2 == null)
+                result = 1;
+            else if (value1 == null && value2 == null)
+                result = 0;
+            else if (typeof value1 === 'string' && typeof value2 === 'string')
+                result = value1.localeCompare(value2, [this.locale, 'en', 'de'], { numeric: true });
+            else {
+                if (value1 < value2) {
+                    result = -1;
+                }
+                else if (value1 > value2) {
+                    result = 1;
+                }
+                else {
+                    result = 0;
+                }
+            }
+            return direction * result;
+        };
+    }
+}
+
+class DataListGridComponent extends DataSortBase {
+    get totalRecordsOnServer() {
+        return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
+    }
+    set totalRecordsOnServer(value) {
+        this.params['totalRecordsOnServer'] = value?.toString() ?? '0';
+    }
+    get data() {
+        return this._data$.getValue();
+    }
+    set data(value) {
+        this._originalData = [...value];
+        this._data$.next([...value]);
+    }
+    get filters() {
+        return this._filters$.getValue();
+    }
+    set filters(value) {
+        this._filters$.next(value);
+    }
+    get sortDirection() {
+        return this._sortDirection$.getValue();
+    }
+    set sortDirection(value) {
+        if (value === "NONE" /* DataSortDirection.NONE */) {
+            this._data$.next([...this._originalData]);
+        }
+        this._sortDirection$.next(value);
+    }
+    get sortField() {
+        return this?._sortField$.getValue();
+    }
+    set sortField(value) {
+        this._sortField$.next(value);
+    }
+    get _gridItemSubtitleLines() {
+        return this.gridItemSubtitleLinesTemplate || this.gridItemSubtitleLinesChildTemplate;
+    }
+    get _listItemSubtitleLines() {
+        return this.listItemSubtitleLinesTemplate || this.listItemSubtitleLinesChildTemplate;
+    }
+    get _listItem() {
+        return this.listItemTemplate || this.listItemChildTemplate;
+    }
+    get _gridItem() {
+        return this.gridItemTemplate || this.gridItemChildTemplate;
+    }
+    get additionalActions() {
+        return this._additionalActions;
+    }
+    set additionalActions(value) {
+        this._additionalActions = value;
+        this.updateGridMenuItems();
+    }
+    get viewItemObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.viewItemObserved || dv?.viewItem.observed || this.viewItem.observed;
+    }
+    get editItemObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.editItemObserved || dv?.editItem.observed || this.editItem.observed;
+    }
+    get deleteItemObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.deleteItemObserved || dv?.deleteItem.observed || this.deleteItem.observed;
+    }
+    get sortDirectionNumber() {
+        if (this.sortDirection === "ASCENDING" /* DataSortDirection.ASCENDING */)
+            return 1;
+        if (this.sortDirection === "DESCENDING" /* DataSortDirection.DESCENDING */)
+            return -1;
+        return 0;
+    }
+    constructor(locale, translateService, userService, router, injector, appStateService) {
+        super(locale, translateService);
+        this.userService = userService;
+        this.router = router;
+        this.injector = injector;
+        this.appStateService = appStateService;
+        this.subtitleLineIds = [];
+        this.clientSideSorting = true;
+        this.clientSideFiltering = true;
+        this.sortStates = [];
+        this.pageSizes = [10, 25, 50];
+        this.pageSize = this.pageSizes[0] || 50;
+        this.fallbackImage = 'placeholder.png';
+        this.layout = 'grid';
+        this.paginator = true;
+        this.page = 0;
+        this.columns = [];
+        this.name = '';
+        this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
+        this.currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER';
+        this.params = {
+            currentPage: '{currentPage}',
+            totalPages: '{totalPages}',
+            rows: '{rows}',
+            first: '{first}',
+            last: '{last}',
+            totalRecords: '{totalRecords}',
+        };
+        this._data$ = new BehaviorSubject([]);
+        this._filters$ = new BehaviorSubject([]);
+        this._originalData = [];
+        this._sortDirection$ = new BehaviorSubject("NONE" /* DataSortDirection.NONE */);
+        this._sortField$ = new BehaviorSubject('');
+        this._additionalActions = [];
+        this.viewItem = new EventEmitter();
+        this.editItem = new EventEmitter();
+        this.deleteItem = new EventEmitter();
+        this.pageChanged = new EventEmitter();
+        this.showMenu = false;
+        this.gridMenuItems = [];
+        this.observedOutputs = 0;
+        this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
+        this.fallbackImagePath$ = this.appStateService.currentMfe$.pipe(map((currentMfe) => this.getFallbackImagePath(currentMfe)));
+    }
+    ngDoCheck() {
+        const observedOutputs = this.viewItem.observed + this.deleteItem.observed + this.editItem.observed;
+        if (this.observedOutputs !== observedOutputs) {
+            this.updateGridMenuItems();
+            this.observedOutputs = observedOutputs;
+        }
+    }
+    ngOnInit() {
+        this.displayedItems$ = combineLatest([this._data$, this._filters$, this._sortField$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([items]) => items));
+        this.showMenu =
+            (!!this.viewPermission && this.userService.hasPermission(this.viewPermission)) ||
+                (!!this.editPermission && this.userService.hasPermission(this.editPermission)) ||
+                (!!this.deletePermission && this.userService.hasPermission(this.deletePermission));
+    }
+    onDeleteRow(element) {
+        this.deleteItem.emit(element);
+    }
+    onViewRow(element) {
+        if (!!this.viewPermission && this.userService.hasPermission(this.viewPermission)) {
+            this.viewItem.emit(element);
+        }
+    }
+    onEditRow(element) {
+        this.editItem.emit(element);
+    }
+    imgError(item) {
+        item.imagePath = '';
+    }
+    getFallbackImagePath(mfeInfo) {
+        return mfeInfo?.remoteBaseUrl
+            ? `${mfeInfo.remoteBaseUrl}/onecx-portal-lib/assets/images/${this.fallbackImage}`
+            : `./onecx-portal-lib/assets/images/${this.fallbackImage}`;
+    }
+    updateGridMenuItems(useSelectedItem = false) {
+        let deleteDisabled = false;
+        let editDisabled = false;
+        let viewDisabled = false;
+        let deleteVisible = true;
+        let editVisible = true;
+        let viewVisible = true;
+        if (useSelectedItem && this.selectedItem) {
+            viewDisabled = !!this.viewActionEnabledField && !this.fieldIsTruthy(this.selectedItem, this.viewActionEnabledField);
+            editDisabled = !!this.editActionEnabledField && !this.fieldIsTruthy(this.selectedItem, this.editActionEnabledField);
+            deleteDisabled = !!this.deleteActionEnabledField && !this.fieldIsTruthy(this.selectedItem, this.deleteActionEnabledField);
+            viewVisible = (!this.viewActionVisibleField || this.fieldIsTruthy(this.selectedItem, this.viewActionVisibleField));
+            editVisible = (!this.editActionVisibleField || this.fieldIsTruthy(this.selectedItem, this.editActionVisibleField));
+            deleteVisible = (!this.deleteActionVisibleField || this.fieldIsTruthy(this.selectedItem, this.deleteActionVisibleField));
+        }
+        this.translateService
+            .get([
+            this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW',
+            this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT',
+            this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE',
+            ...this.additionalActions.map((a) => a.labelKey || ''),
+        ])
+            .subscribe((translations) => {
+            let menuItems = [];
+            const automationId = 'data-grid-action-button';
+            const automationIdHidden = 'data-grid-action-button-hidden';
+            if (this.viewItem.observed && this.userService.hasPermission(this.viewPermission || '')) {
+                menuItems.push({
+                    label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'],
+                    icon: PrimeIcons.EYE,
+                    command: () => this.viewItem.emit(this.selectedItem),
+                    disabled: viewDisabled,
+                    visible: viewVisible,
+                    automationId: viewVisible ? automationId : automationIdHidden
+                });
+            }
+            if (this.editItem.observed && this.userService.hasPermission(this.editPermission || '')) {
+                menuItems.push({
+                    label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'],
+                    icon: PrimeIcons.PENCIL,
+                    command: () => this.editItem.emit(this.selectedItem),
+                    disabled: editDisabled,
+                    visible: editVisible,
+                    automationId: editVisible ? automationId : automationIdHidden
+                });
+            }
+            if (this.deleteItem.observed && this.userService.hasPermission(this.deletePermission || '')) {
+                menuItems.push({
+                    label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'],
+                    icon: PrimeIcons.TRASH,
+                    command: () => this.deleteItem.emit(this.selectedItem),
+                    disabled: deleteDisabled,
+                    visible: deleteVisible,
+                    automationId: deleteVisible ? automationId : automationIdHidden
+                });
+            }
+            menuItems = menuItems.concat(this.additionalActions
+                .filter((a) => this.userService.hasPermission(a.permission))
+                .map((a) => ({
+                label: translations[a.labelKey || ''],
+                icon: a.icon,
+                styleClass: (a.classes || []).join(' '),
+                disabled: a.disabled,
+                command: () => a.callback(this.selectedItem),
+            })));
+            this.gridMenuItems = menuItems;
+        });
+    }
+    setSelectedItem(item) {
+        this.selectedItem = item;
+    }
+    resolveFieldData(object, key) {
+        return ObjectUtils.resolveFieldData(object, key);
+    }
+    onPageChange(event) {
+        const page = event.first / event.rows;
+        this.page = page;
+        this.pageChanged.emit(page);
+    }
+    fieldIsTruthy(object, key) {
+        return !!this.resolveFieldData(object, key);
+    }
+}
+DataListGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataListGridComponent, deps: [{ token: LOCALE_ID }, { token: i1.TranslateService }, { token: i2.UserService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i2.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  [value]=\"(displayedItems$ | async) || []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * pageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"pageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n  [rowsPerPageOptions]=\"[10, 25, 50, data?.length]\"\n  id=\"dataListGrid_{{name}}\"\n>\n  <ng-template let-item pTemplate=\"paginatordropdownitem\">\n    {{ item.value === data?.length ? (\"OCX_DATA_TABLE.ALL\" | translate) : item.value }}\n  </ng-template>\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 additionalActions\">\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\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataListGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ocx-data-list-grid', template: "<p-dataView\n  [value]=\"(displayedItems$ | async) || []\"\n  [paginator]=\"paginator\"\n  [first]=\"page * pageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"pageSize\"\n  [layout]=\"layout\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n  [rowsPerPageOptions]=\"[10, 25, 50, data?.length]\"\n  id=\"dataListGrid_{{name}}\"\n>\n  <ng-template let-item pTemplate=\"paginatordropdownitem\">\n    {{ item.value === data?.length ? (\"OCX_DATA_TABLE.ALL\" | translate) : item.value }}\n  </ng-template>\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 additionalActions\">\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\"\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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1.TranslateService }, { type: i2.UserService }, { type: i1$1.Router }, { type: i0.Injector }, { type: i2.AppStateService }]; }, propDecorators: { titleLineId: [{
+                type: Input
+            }], subtitleLineIds: [{
+                type: Input
+            }], clientSideSorting: [{
+                type: Input
+            }], clientSideFiltering: [{
+                type: Input
+            }], sortStates: [{
+                type: Input
+            }], pageSizes: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], emptyResultsMessage: [{
+                type: Input
+            }], fallbackImage: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], viewPermission: [{
+                type: Input
+            }], editPermission: [{
+                type: Input
+            }], deletePermission: [{
+                type: Input
+            }], deleteActionVisibleField: [{
+                type: Input
+            }], deleteActionEnabledField: [{
+                type: Input
+            }], viewActionVisibleField: [{
+                type: Input
+            }], viewActionEnabledField: [{
+                type: Input
+            }], editActionVisibleField: [{
+                type: Input
+            }], editActionEnabledField: [{
+                type: Input
+            }], viewMenuItemKey: [{
+                type: Input
+            }], editMenuItemKey: [{
+                type: Input
+            }], deleteMenuItemKey: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], totalRecordsOnServer: [{
+                type: Input
+            }], currentPageShowingKey: [{
+                type: Input
+            }], currentPageShowingWithTotalOnServerKey: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], sortField: [{
+                type: Input
+            }], gridItemSubtitleLinesTemplate: [{
+                type: Input
+            }], gridItemSubtitleLinesChildTemplate: [{
+                type: ContentChild,
+                args: ['gridItemSubtitleLines']
+            }], listItemSubtitleLinesTemplate: [{
+                type: Input
+            }], listItemSubtitleLinesChildTemplate: [{
+                type: ContentChild,
+                args: ['listItemSubtitleLines']
+            }], listItemTemplate: [{
+                type: Input
+            }], listItemChildTemplate: [{
+                type: ContentChild,
+                args: ['listItem']
+            }], gridItemTemplate: [{
+                type: Input
+            }], gridItemChildTemplate: [{
+                type: ContentChild,
+                args: ['gridItem']
+            }], additionalActions: [{
+                type: Input
+            }], viewItem: [{
+                type: Output
+            }], editItem: [{
+                type: Output
+            }], deleteItem: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }] } });
+
+class DataListGridSortingComponent {
+    constructor() {
+        this.columns = [];
+        this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
+        this._sortDirection$ = new BehaviorSubject("NONE" /* DataSortDirection.NONE */);
+        this._sortField$ = new BehaviorSubject('');
+        this.sortChange = new EventEmitter();
+        this.sortDirectionChange = new EventEmitter();
+        this.columnsChange = new EventEmitter();
+        this.dropdownOptions = [];
+    }
+    get sortDirection() {
+        return this._sortDirection$.getValue();
+    }
+    set sortDirection(value) {
+        this._sortDirection$.next(value);
+    }
+    get sortField() {
+        return this?._sortField$.getValue();
+    }
+    set sortField(value) {
+        this._sortField$.next(value);
+    }
+    ngOnInit() {
+        this.columns.forEach((element) => this.dropdownOptions.push({ columnId: element.id, columnName: element.nameKey }));
+        this.selectedSortingOption = this.dropdownOptions.find((e) => e.columnId === this?.sortField);
+    }
+    selectSorting(event) {
+        this._sortField$.next(event.value);
+        this.sortChange.emit(event.value.columnId);
+    }
+    sortDirectionChanged() {
+        const newSortDirection = this.nextSortDirection();
+        this._sortDirection$.next(newSortDirection);
+        this.sortDirectionChange.emit(newSortDirection);
+    }
+    nextSortDirection() {
+        return this.sortStates[(this.sortStates.indexOf(this.sortDirection) + 1) % this.sortStates.length];
+    }
+    sortIcon() {
+        switch (this.sortDirection) {
+            case "ASCENDING" /* DataSortDirection.ASCENDING */:
+                return 'pi-sort-amount-up';
+            case "DESCENDING" /* DataSortDirection.DESCENDING */:
+                return 'pi-sort-amount-down';
+            default:
+                return 'pi-sort-alt-slash';
+        }
+    }
+    sortIconTitle() {
+        return this.sortDirectionToTitle(this.sortDirection);
+    }
+    sortDirectionToTitle(sortDirection) {
+        switch (sortDirection) {
+            case "ASCENDING" /* DataSortDirection.ASCENDING */:
+                return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TITLE';
+            case "DESCENDING" /* DataSortDirection.DESCENDING */:
+                return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DESCENDING_TITLE';
+            default:
+                return 'OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DEFAULT_TITLE';
+        }
+    }
+}
+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$1.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$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.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.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"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], sortStates: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], sortField: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], sortDirectionChange: [{
+                type: Output
+            }], columnsChange: [{
+                type: Output
+            }] } });
+
+// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
+class OcxTimeAgoPipe extends TimeagoPipe {
+}
+OcxTimeAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OcxTimeAgoPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
+OcxTimeAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OcxTimeAgoPipe, name: "timeago" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OcxTimeAgoPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timeago',
+                }]
+        }] });
+
+class DataTableComponent extends DataSortBase {
+    get rows() {
+        return this._rows$.getValue();
+    }
+    set rows(value) {
+        this._rows$.next(value);
+    }
+    get selectedRows() {
+        return this._selection$.getValue();
+    }
+    set selectedRows(value) {
+        this._selection$.next(value);
+    }
+    get filters() {
+        return this._filters$.getValue();
+    }
+    set filters(value) {
+        this._filters$.next(value);
+    }
+    get sortDirection() {
+        return this._sortDirection$.getValue();
+    }
+    set sortDirection(value) {
+        this._sortDirection$.next(value);
+    }
+    get sortColumn() {
+        return this?._sortColumn$.getValue();
+    }
+    set sortColumn(value) {
+        this?._sortColumn$.next(value);
+    }
+    get totalRecordsOnServer() {
+        return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined;
+    }
+    set totalRecordsOnServer(value) {
+        this.params['totalRecordsOnServer'] = value?.toString() ?? '0';
+    }
+    get _stringCell() {
+        return this.stringCellTemplate || this.stringCellChildTemplate;
+    }
+    get _numberCell() {
+        return this.numberCellTemplate || this.numberCellChildTemplate;
+    }
+    get _dateCell() {
+        return this.dateCellTemplate || this.dateCellChildTemplate;
+    }
+    get _relativeDateCell() {
+        return this.relativeDateCellTemplate || this.relativeDateCellChildTemplate;
+    }
+    get _cell() {
+        return this.cellTemplate || this.cellChildTemplate;
+    }
+    get _translationKeyCell() {
+        return this.translationKeyCellTemplate || this.translationKeyCellChildTemplate;
+    }
+    get viewTableRowObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.viewItemObserved || dv?.viewItem.observed || this.viewTableRow.observed;
+    }
+    get editTableRowObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.editItemObserved || dv?.editItem.observed || this.editTableRow.observed;
+    }
+    get deleteTableRowObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.deleteItemObserved || dv?.deleteItem.observed || this.deleteTableRow.observed;
+    }
+    get anyRowActionObserved() {
+        return this.viewTableRowObserved || this.editTableRowObserved || this.deleteTableRowObserved;
+    }
+    get selectionChangedObserved() {
+        const dv = this.injector.get('DataViewComponent', null);
+        return dv?.selectionChangedObserved || dv?.selectionChanged.observed || this.selectionChanged.observed;
+    }
+    constructor(locale, translateService, router, injector) {
+        super(locale, translateService);
+        this.router = router;
+        this.injector = injector;
+        this._rows$ = new BehaviorSubject([]);
+        this._selection$ = new BehaviorSubject([]);
+        this._filters$ = new BehaviorSubject([]);
+        this._sortDirection$ = new BehaviorSubject("NONE" /* DataSortDirection.NONE */);
+        this._sortColumn$ = new BehaviorSubject('');
+        this.columns = [];
+        this.clientSideFiltering = true;
+        this.clientSideSorting = true;
+        this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
+        this.pageSizes = [10, 25, 50];
+        this.pageSize = this.pageSizes[0] || 50;
+        this.name = '';
+        this.paginator = true;
+        this.page = 0;
+        this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
+        this.currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER';
+        this.params = {
+            currentPage: '{currentPage}',
+            totalPages: '{totalPages}',
+            rows: '{rows}',
+            first: '{first}',
+            last: '{last}',
+            totalRecords: '{totalRecords}',
+        };
+        this.additionalActions = [];
+        this.frozenActionColumn = false;
+        this.actionColumnPosition = 'right';
+        this.filtered = new EventEmitter();
+        this.sorted = new EventEmitter();
+        this.viewTableRow = new EventEmitter();
+        this.editTableRow = new EventEmitter();
+        this.deleteTableRow = new EventEmitter();
+        this.selectionChanged = new EventEmitter();
+        this.pageChanged = new EventEmitter();
+        this.currentFilterColumn$ = new BehaviorSubject(null);
+        this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_');
+    }
+    ngOnInit() {
+        this.displayedRows$ = combineLatest([this._rows$, this._filters$, this._sortColumn$, this._sortDirection$]).pipe(mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)), map((params) => this.filterItems(params, this.clientSideFiltering)), map((params) => this.sortItems(params, this.columns, this.clientSideSorting)), map(([rows]) => this.flattenItems(rows)));
+        this.currentSelectedFilters$ = combineLatest([this._filters$, this.currentFilterColumn$]).pipe(map(([filters, currentFilterColumn]) => {
+            return filters.filter((filter) => filter.columnId === currentFilterColumn?.id).map((filter) => filter.value);
+        }));
+        this.currentFilterOptions$ = combineLatest([this._rows$, this.currentFilterColumn$, this._filters$]).pipe(mergeMap(([rows, currentFilterColumn, filters]) => {
+            if (!currentFilterColumn?.id) {
+                return of([]);
+            }
+            const currentFilters = filters
+                .filter((filter) => filter.columnId === currentFilterColumn?.id)
+                .map((filter) => filter.value);
+            const columnValues = rows.map((row) => row[currentFilterColumn?.id]);
+            const translateObservable = this.columns.find((c) => c.id === currentFilterColumn?.id)?.columnType === ColumnType.TRANSLATION_KEY
+                ? this.translateService.get(columnValues)
+                : of(Object.fromEntries(columnValues.map((cv) => [cv, cv])));
+            return translateObservable.pipe(map((translatedValues) => {
+                return Object.values(translatedValues)
+                    .concat(currentFilters)
+                    .filter((value, index, self) => self.indexOf(value) === index && value != null)
+                    .map((filterOption) => ({
+                    label: filterOption,
+                    value: filterOption,
+                }));
+            }));
+        }));
+        this.filterAmounts$ = this._filters$.pipe(map((filters) => filters
+            .map((filter) => filter.columnId)
+            .map((columnId) => [columnId, filters.filter((filter) => filter.columnId === columnId).length])), map((amounts) => Object.fromEntries(amounts)));
+        this.mapSelectionToRows();
+    }
+    onSortColumnClick(sortColumn) {
+        const newSortDirection = this.columnNextSortDirection(sortColumn);
+        this._sortColumn$.next(sortColumn);
+        this._sortDirection$.next(newSortDirection);
+        this.sorted.emit({ sortColumn: sortColumn, sortDirection: newSortDirection });
+    }
+    columnNextSortDirection(sortColumn) {
+        return sortColumn !== this.sortColumn
+            ? this.sortStates[0]
+            : this.sortStates[(this.sortStates.indexOf(this.sortDirection) + 1) % this.sortStates.length];
+    }
+    onDeleteRow(selectedTableRow) {
+        this.deleteTableRow.emit(selectedTableRow);
+    }
+    onViewRow(selectedTableRow) {
+        this.viewTableRow.emit(selectedTableRow);
+    }
+    onEditRow(selectedTableRow) {
+        this.editTableRow.emit(selectedTableRow);
+    }
+    onFilterClick(column) {
+        this.currentFilterColumn$.next(column);
+    }
+    onFilterChange(column, event) {
+        const filters = this.filters
+            .filter((filter) => filter.columnId !== column.id)
+            .concat(event.value.map((value) => ({
+            columnId: column.id,
+            value,
+        })));
+        if (this.clientSideFiltering) {
+            this.filters = filters;
+        }
+        this.filtered.emit(filters);
+    }
+    getSelectedFilters(columnId) {
+        return this.filters.filter((filter) => filter.columnId === columnId).map((filter) => filter.value);
+    }
+    sortIconTitle(sortColumn) {
+        return this.sortDirectionToTitle(sortColumn !== this.sortDirection
+            ? "NONE" /* DataSortDirection.NONE */
+            : this.sortStates[this.sortStates.indexOf(this.sortDirection) % this.sortStates.length]);
+    }
+    sortDirectionToTitle(sortDirection) {
+        switch (sortDirection) {
+            case "ASCENDING" /* DataSortDirection.ASCENDING */:
+                return 'OCX_DATA_TABLE.TOGGLE_BUTTON.ASCENDING_TITLE';
+            case "DESCENDING" /* DataSortDirection.DESCENDING */:
+                return 'OCX_DATA_TABLE.TOGGLE_BUTTON.DESCENDING_TITLE';
+            default:
+                return 'OCX_DATA_TABLE.TOGGLE_BUTTON.DEFAULT_TITLE';
+        }
+    }
+    mapSelectionToRows() {
+        this.selectedRows$ = combineLatest([this._selection$, this._rows$]).pipe(map(([selectedRows, rows]) => {
+            return selectedRows.map((row) => {
+                return rows.find((r) => r.id === row.id);
+            });
+        }));
+    }
+    onSelectionChange(event) {
+        this.selectionChanged.emit(event);
+    }
+    onPageChange(event) {
+        const page = event.first / event.rows;
+        this.page = page;
+        this.pageChanged.emit(page);
+    }
+    fieldIsTruthy(object, key) {
+        return !!(ObjectUtils.resolveFieldData(object, key));
+    }
+}
+DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1.TranslateService }, { token: i1$1.Router }, { token: i0.Injector }], 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", 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: "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\">\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 *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\">\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 *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\">\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 *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\">\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          <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\"\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\">\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  [value]=\"(displayedRows$ | async) || []\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator\"\n  [first]=\"page * pageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"pageSize\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n  [rowsPerPageOptions]=\"[10, 25, 50, rows?.length]\"\n  id=\"dataTable_{{name}}\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  [selection]=\"(selectedRows$ | async) || []\"\n  [scrollable]=\"true\"\n>\n  <ng-template let-item pTemplate=\"paginatordropdownitem\">\n    {{ item.value === rows?.length ? (\"OCX_DATA_TABLE.ALL\" | translate) : item.value }}\n  </ng-template>\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-slash]=\"(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                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) ? 1 : 0)\">{{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}</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=\"'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 #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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i6$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: i6$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i6$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i6$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i7$1.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"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i1.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\">\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 *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\">\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 *ngIf=\"editTableRowObserved && (!editActionVisibleField || fieldIsTruthy(rowObject, editActionVisibleField))\">\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 *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\">\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          <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\"\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\">\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  [value]=\"(displayedRows$ | async) || []\"\n  responsiveLayout=\"scroll\"\n  [paginator]=\"paginator\"\n  [first]=\"page * pageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"pageSize\"\n  [showCurrentPageReport]=\"true\"\n  currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n  [rowsPerPageOptions]=\"[10, 25, 50, rows?.length]\"\n  id=\"dataTable_{{name}}\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  [selection]=\"(selectedRows$ | async) || []\"\n  [scrollable]=\"true\"\n>\n  <ng-template let-item pTemplate=\"paginatordropdownitem\">\n    {{ item.value === rows?.length ? (\"OCX_DATA_TABLE.ALL\" | translate) : item.value }}\n  </ng-template>\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-slash]=\"(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                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) ? 1 : 0)\">{{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}</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=\"'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 #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"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1.TranslateService }, { type: i1$1.Router }, { type: i0.Injector }]; }, propDecorators: { rows: [{
+                type: Input
+            }], selectedRows: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], sortColumn: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], clientSideFiltering: [{
+                type: Input
+            }], clientSideSorting: [{
+                type: Input
+            }], sortStates: [{
+                type: Input
+            }], pageSizes: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], emptyResultsMessage: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], deletePermission: [{
+                type: Input
+            }], viewPermission: [{
+                type: Input
+            }], editPermission: [{
+                type: Input
+            }], deleteActionVisibleField: [{
+                type: Input
+            }], deleteActionEnabledField: [{
+                type: Input
+            }], viewActionVisibleField: [{
+                type: Input
+            }], viewActionEnabledField: [{
+                type: Input
+            }], editActionVisibleField: [{
+                type: Input
+            }], editActionEnabledField: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], totalRecordsOnServer: [{
+                type: Input
+            }], currentPageShowingKey: [{
+                type: Input
+            }], currentPageShowingWithTotalOnServerKey: [{
+                type: Input
+            }], stringCellTemplate: [{
+                type: Input
+            }], stringCellChildTemplate: [{
+                type: ContentChild,
+                args: ['stringCell']
+            }], numberCellTemplate: [{
+                type: Input
+            }], numberCellChildTemplate: [{
+                type: ContentChild,
+                args: ['numberCell']
+            }], dateCellTemplate: [{
+                type: Input
+            }], dateCellChildTemplate: [{
+                type: ContentChild,
+                args: ['dateCell']
+            }], relativeDateCellTemplate: [{
+                type: Input
+            }], relativeDateCellChildTemplate: [{
+                type: ContentChild,
+                args: ['relativeDateCell']
+            }], cellTemplate: [{
+                type: Input
+            }], cellChildTemplate: [{
+                type: ContentChild,
+                args: ['cell']
+            }], translationKeyCellTemplate: [{
+                type: Input
+            }], translationKeyCellChildTemplate: [{
+                type: ContentChild,
+                args: ['translationKeyCell']
+            }], additionalActions: [{
+                type: Input
+            }], frozenActionColumn: [{
+                type: Input
+            }], actionColumnPosition: [{
+                type: Input
+            }], filtered: [{
+                type: Output
+            }], sorted: [{
+                type: Output
+            }], viewTableRow: [{
+                type: Output
+            }], editTableRow: [{
+                type: Output
+            }], deleteTableRow: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }] } });
+
+class DataViewComponent {
+    set listGrid(ref) {
+        this._dataListGridComponent = ref;
+        this.registerEventListenerForListGrid();
+    }
+    get listGrid() {
+        return this._dataListGridComponent;
+    }
+    set dataTable(ref) {
+        this._dataTableComponent = ref;
+        this.registerEventListenerForDataTable();
+    }
+    get dataTable() {
+        return this._dataTableComponent;
+    }
+    get paginator() {
+        return this.listGridPaginator && this.tablePaginator;
+    }
+    set paginator(value) {
+        this.listGridPaginator = value;
+        this.tablePaginator = value;
+    }
+    get _stringTableCell() {
+        return this.stringTableCellTemplate || this.stringTableCellChildTemplate;
+    }
+    get _numberTableCell() {
+        return this.numberTableCellTemplate || this.numberTableCellChildTemplate;
+    }
+    get _tableDateCell() {
+        return this.tableDateCellTemplate || this.tableDateCellChildTemplate;
+    }
+    get _tableCell() {
+        return this.tableCellTemplate || this.tableCellChildTemplate;
+    }
+    get _tableTranslationKeyCell() {
+        return this.tableTranslationKeyCellTemplate || this.tableTranslationKeyCellChildTemplate;
+    }
+    get _gridItemSubtitleLines() {
+        return this.gridItemSubtitleLinesTemplate || this.gridItemSubtitleLinesChildTemplate;
+    }
+    get _listItemSubtitleLines() {
+        return this.listItemSubtitleLinesTemplate || this.listItemSubtitleLinesChildTemplate;
+    }
+    get _gridItem() {
+        return this.gridItemTemplate || this.gridItemChildTemplate;
+    }
+    get _listItem() {
+        return this.listItemTemplate || this.listItemChildTemplate;
+    }
+    get _tableRelativeDateCell() {
+        return this.tableRelativeDateCellTemplate || this.tableRelativeDateCellChildTemplate;
+    }
+    get viewItemObserved() {
+        return this.injector.get('InteractiveDataViewComponent', null)?.viewItem.observed || this.viewItem.observed;
+    }
+    get editItemObserved() {
+        return this.injector.get('InteractiveDataViewComponent', null)?.editItem.observed || this.editItem.observed;
+    }
+    get deleteItemObserved() {
+        return this.injector.get('InteractiveDataViewComponent', null)?.deleteItem.observed || this.deleteItem.observed;
+    }
+    get selectionChangedObserved() {
+        return (this.injector.get('InteractiveDataViewComponent', null)?.selectionChanged.observed ||
+            this.selectionChanged.observed);
+    }
+    constructor(injector) {
+        this.injector = injector;
+        this.data = [];
+        this.name = 'Data table';
+        this.subtitleLineIds = [];
+        this.layout = ['grid', 'list', 'table'];
+        this.columns = [];
+        this.clientSideFiltering = true;
+        this.fallbackImage = 'placeholder.png';
+        this.filters = [];
+        this.sortField = '';
+        this.sortDirection = "NONE" /* DataSortDirection.NONE */;
+        this.listGridPaginator = true;
+        this.tablePaginator = true;
+        this.page = 0;
+        this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
+        this.currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER';
+        this.selectedRows = [];
+        this.frozenActionColumn = false;
+        this.actionColumnPosition = 'right';
+        this.sortStates = ["ASCENDING" /* DataSortDirection.ASCENDING */, "DESCENDING" /* DataSortDirection.DESCENDING */];
+        this.pageSizes = [10, 25, 50];
+        this.pageSize = this.pageSizes?.[0] || 50;
+        this.additionalActions = [];
+        this.filtered = new EventEmitter();
+        this.sorted = new EventEmitter();
+        this.deleteItem = new EventEmitter();
+        this.viewItem = new EventEmitter();
+        this.editItem = new EventEmitter();
+        this.selectionChanged = new EventEmitter();
+        this.pageChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.firstColumnId = this.columns[0]?.id;
+    }
+    ngDoCheck() {
+        this.registerEventListenerForDataTable();
+        this.registerEventListenerForListGrid();
+    }
+    registerEventListenerForListGrid() {
+        if (this.layout !== 'table') {
+            if (this.deleteItem.observed) {
+                this.isDeleteItemObserved = true;
+                if (!this._dataListGridComponent?.deleteItem.observed) {
+                    this._dataListGridComponent?.deleteItem.subscribe((event) => {
+                        this.deletingElement(event);
+                    });
+                }
+            }
+            if (this.viewItem.observed) {
+                this.isViewItemObserved = true;
+                if (!this._dataListGridComponent?.viewItem.observed) {
+                    this._dataListGridComponent?.viewItem.subscribe((event) => {
+                        this.viewingElement(event);
+                    });
+                }
+            }
+            if (this.editItem.observed) {
+                this.IsEditItemObserved = true;
+                if (!this._dataListGridComponent?.editItem.observed) {
+                    this._dataListGridComponent?.editItem.subscribe((event) => {
+                        this.editingElement(event);
+                    });
+                }
+            }
+        }
+    }
+    registerEventListenerForDataTable() {
+        if (this.layout === 'table') {
+            if (this.deleteItem.observed) {
+                this.isDeleteItemObserved = true;
+                if (!this._dataTableComponent?.deleteTableRow.observed) {
+                    this._dataTableComponent?.deleteTableRow.subscribe((event) => {
+                        this.deletingElement(event);
+                    });
+                }
+            }
+            if (this.viewItem.observed) {
+                this.isViewItemObserved = true;
+                if (!this._dataTableComponent?.viewTableRow.observed) {
+                    this._dataTableComponent?.viewTableRow.subscribe((event) => {
+                        this.viewingElement(event);
+                    });
+                }
+            }
+            if (this.editItem.observed) {
+                this.IsEditItemObserved = true;
+                if (!this._dataTableComponent?.editTableRow.observed) {
+                    this._dataTableComponent?.editTableRow.subscribe((event) => {
+                        this.editingElement(event);
+                    });
+                }
+            }
+            if (this.selectionChangedObserved) {
+                if (!this._dataTableComponent?.selectionChanged.observed) {
+                    this._dataTableComponent?.selectionChanged.subscribe((event) => {
+                        this.onRowSelectionChange(event);
+                    });
+                }
+            }
+        }
+    }
+    filtering(event) {
+        this.filters = event;
+        this.filtered.emit(event);
+    }
+    sorting(event) {
+        this.sortDirection = event.sortDirection;
+        this.sortField = event.sortColumn;
+        this.sorted.emit(event);
+    }
+    deletingElement(event) {
+        if (this.isDeleteItemObserved) {
+            this.deleteItem.emit(event);
+        }
+    }
+    viewingElement(event) {
+        if (this.isViewItemObserved) {
+            this.viewItem.emit(event);
+        }
+    }
+    editingElement(event) {
+        if (this.IsEditItemObserved) {
+            this.editItem.emit(event);
+        }
+    }
+    onRowSelectionChange(event) {
+        if (this.selectionChangedObserved) {
+            this.selectionChanged.emit(event);
+        }
+    }
+    onPageChange(event) {
+        this.page = event;
+        this.pageChanged.emit(event);
+    }
+}
+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", 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", 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: "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    [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]=\"true\"\n    [clientSideSorting]=\"true\"\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    [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 #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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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", "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    [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]=\"true\"\n    [clientSideSorting]=\"true\"\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    [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 #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" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { listGrid: [{
+                type: ViewChild,
+                args: [DataListGridComponent]
+            }], dataTable: [{
+                type: ViewChild,
+                args: [DataTableComponent]
+            }], deletePermission: [{
+                type: Input
+            }], editPermission: [{
+                type: Input
+            }], viewPermission: [{
+                type: Input
+            }], deleteActionVisibleField: [{
+                type: Input
+            }], deleteActionEnabledField: [{
+                type: Input
+            }], viewActionVisibleField: [{
+                type: Input
+            }], viewActionEnabledField: [{
+                type: Input
+            }], editActionVisibleField: [{
+                type: Input
+            }], editActionEnabledField: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], titleLineId: [{
+                type: Input
+            }], subtitleLineIds: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], emptyResultsMessage: [{
+                type: Input
+            }], clientSideFiltering: [{
+                type: Input
+            }], fallbackImage: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], sortField: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], listGridPaginator: [{
+                type: Input
+            }], tablePaginator: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], totalRecordsOnServer: [{
+                type: Input
+            }], currentPageShowingKey: [{
+                type: Input
+            }], currentPageShowingWithTotalOnServerKey: [{
+                type: Input
+            }], selectedRows: [{
+                type: Input
+            }], frozenActionColumn: [{
+                type: Input
+            }], actionColumnPosition: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], sortStates: [{
+                type: Input
+            }], pageSizes: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], stringTableCellTemplate: [{
+                type: Input
+            }], stringTableCellChildTemplate: [{
+                type: ContentChild,
+                args: ['stringTableCell']
+            }], numberTableCellTemplate: [{
+                type: Input
+            }], numberTableCellChildTemplate: [{
+                type: ContentChild,
+                args: ['numberTableCell']
+            }], tableDateCellTemplate: [{
+                type: Input
+            }], tableDateCellChildTemplate: [{
+                type: ContentChild,
+                args: ['tableDateCell']
+            }], tableCellTemplate: [{
+                type: Input
+            }], tableCellChildTemplate: [{
+                type: ContentChild,
+                args: ['tableCell']
+            }], tableTranslationKeyCellTemplate: [{
+                type: Input
+            }], tableTranslationKeyCellChildTemplate: [{
+                type: ContentChild,
+                args: ['tableTranslationKeyCell']
+            }], gridItemSubtitleLinesTemplate: [{
+                type: Input
+            }], gridItemSubtitleLinesChildTemplate: [{
+                type: ContentChild,
+                args: ['gridItemSubtitleLines']
+            }], listItemSubtitleLinesTemplate: [{
+                type: Input
+            }], listItemSubtitleLinesChildTemplate: [{
+                type: ContentChild,
+                args: ['listItemSubtitleLines']
+            }], gridItemTemplate: [{
+                type: Input
+            }], gridItemChildTemplate: [{
+                type: ContentChild,
+                args: ['gridItem']
+            }], listItemTemplate: [{
+                type: Input
+            }], listItemChildTemplate: [{
+                type: ContentChild,
+                args: ['listItem']
+            }], tableRelativeDateCellTemplate: [{
+                type: Input
+            }], tableRelativeDateCellChildTemplate: [{
+                type: ContentChild,
+                args: ['tableRelativeDateCell']
+            }], additionalActions: [{
+                type: Input
+            }], filtered: [{
+                type: Output
+            }], sorted: [{
+                type: Output
+            }], deleteItem: [{
+                type: Output
+            }], viewItem: [{
+                type: Output
+            }], editItem: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }] } });
+
+class ColorUtils {
+    static calculatePoint(i, intervalSize, colorRangeInfo) {
+        const { colorStart, colorEnd, useEndAsStart } = colorRangeInfo;
+        return useEndAsStart ? colorEnd - i * intervalSize : colorStart + i * intervalSize;
+    }
+    static interpolateColors(dataLength, colorScale, colorRangeInfo) {
+        const { colorStart, colorEnd } = colorRangeInfo;
+        const colorRange = colorEnd - colorStart;
+        const intervalSize = colorRange / dataLength;
+        let i, colorPoint;
+        const colorArray = [];
+        for (i = 0; i < dataLength; i++) {
+            colorPoint = this.calculatePoint(i, intervalSize, colorRangeInfo);
+            colorArray.push(colorScale(colorPoint));
+        }
+        return colorArray;
+    }
+}
+
+const allDiagramTypes = [
+    { icon: PrimeIcons.CHART_PIE, layout: "PIE" /* DiagramType.PIE */, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE' },
+    {
+        icon: PrimeIcons.BARS,
+        layout: "HORIZONTAL_BAR" /* DiagramType.HORIZONTAL_BAR */,
+        titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+    },
+    {
+        icon: PrimeIcons.CHART_BAR,
+        layout: "VERTICAL_BAR" /* DiagramType.VERTICAL_BAR */,
+        titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
+    },
+];
+class DiagramComponent {
+    get diagramType() {
+        return this._diagramType;
+    }
+    set diagramType(value) {
+        this._diagramType = value;
+        this.selectedDiagramType = allDiagramTypes.find((v) => v.layout === value);
+        this.chartType = this.diagramTypeToChartType(value);
+    }
+    get supportedDiagramTypes() {
+        return this._supportedDiagramTypes;
+    }
+    set supportedDiagramTypes(value) {
+        this._supportedDiagramTypes = value;
+        this.shownDiagramTypes = allDiagramTypes.filter((vl) => this.supportedDiagramTypes.includes(vl.layout));
+    }
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.sumKey = 'OCX_DIAGRAM.SUM';
+        this._diagramType = "PIE" /* DiagramType.PIE */;
+        this.chartType = 'pie';
+        this._supportedDiagramTypes = [];
+        this.dataSelected = new EventEmitter();
+        this.diagramTypeChanged = new EventEmitter();
+        this.shownDiagramTypes = [];
+        // Changing the colorRangeInfo, will change the range of the color palette of the diagram.
+        this.colorRangeInfo = {
+            colorStart: 0,
+            colorEnd: 1,
+            useEndAsStart: false,
+        };
+        // Changing the colorScale, will change the thematic color appearance of the diagram.
+        this.colorScale = d3.interpolateCool;
+    }
+    ngOnChanges() {
+        this.generateChart(this.colorScale, this.colorRangeInfo);
+    }
+    ngOnInit() {
+        this.generateChart(this.colorScale, this.colorRangeInfo);
+    }
+    generateChart(colorScale, colorRangeInfo) {
+        if (this.data) {
+            const inputData = this.data.map((diagramData) => diagramData.value);
+            this.amountOfData = this.data.reduce((acc, current) => acc + current.value, 0);
+            const COLORS = interpolateColors(this.data.length, colorScale, colorRangeInfo);
+            this.chartData = {
+                labels: this.data.map((data) => data.label),
+                datasets: [
+                    {
+                        data: inputData,
+                        backgroundColor: COLORS,
+                    },
+                ],
+            };
+        }
+        this.chartOptions = {
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                },
+            },
+            maintainAspectRatio: false,
+            ...(this._diagramType === "VERTICAL_BAR" /* DiagramType.VERTICAL_BAR */ && {
+                plugins: { legend: { display: false } },
+                scales: { y: { ticks: { precision: 0 } } },
+            }),
+            ...(this._diagramType === "HORIZONTAL_BAR" /* DiagramType.HORIZONTAL_BAR */ && {
+                indexAxis: 'y',
+                plugins: { legend: { display: false } },
+                scales: { x: { ticks: { precision: 0 } } },
+            }),
+        };
+    }
+    diagramTypeToChartType(value) {
+        if (value === "PIE" /* DiagramType.PIE */)
+            return 'pie';
+        else if (value === "HORIZONTAL_BAR" /* DiagramType.HORIZONTAL_BAR */ || value === "VERTICAL_BAR" /* DiagramType.VERTICAL_BAR */)
+            return 'bar';
+        return 'pie';
+    }
+    dataClicked(event) {
+        this.dataSelected.emit(event.length);
+    }
+    onDiagramTypeChanged(event) {
+        this.diagramType = event.value.layout;
+        this.generateChart(this.colorScale, this.colorRangeInfo);
+        this.diagramTypeChanged.emit(event.value.layout);
+    }
+}
+DiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DiagramComponent, deps: [{ token: i1.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i6.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: "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.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"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { data: [{
+                type: Input
+            }], sumKey: [{
+                type: Input
+            }], diagramType: [{
+                type: Input
+            }], supportedDiagramTypes: [{
+                type: Input
+            }], dataSelected: [{
+                type: Output
+            }], diagramTypeChanged: [{
+                type: Output
+            }] } });
+function interpolateColors(amountOfData, colorScale, colorRangeInfo) {
+    return ColorUtils.interpolateColors(amountOfData, colorScale, colorRangeInfo);
+}
+
+class GroupByCountDiagramComponent {
+    /**
+     * @deprecated Will be replaced by diagramType
+     */
+    get type() {
+        return this.diagramType;
+    }
+    set type(value) {
+        this.diagramType = value;
+    }
+    get data() {
+        return this._data$.getValue();
+    }
+    set data(value) {
+        this._data$.next(value);
+    }
+    get columnType() {
+        return this._columnType$.getValue();
+    }
+    set columnType(value) {
+        this._columnType$.next(value);
+    }
+    get columnField() {
+        return this._columnField$.getValue();
+    }
+    set columnField(value) {
+        this._columnField$.next(value);
+    }
+    get column() {
+        return { columnType: this.columnType, id: this.columnField };
+    }
+    set column(value) {
+        this.columnType = value.columnType;
+        this.columnField = value.id;
+    }
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.sumKey = 'SEARCH.SUMMARY_TITLE';
+        this.diagramType = "PIE" /* DiagramType.PIE */;
+        this.supportedDiagramTypes = [];
+        this._data$ = new BehaviorSubject([]);
+        this._columnType$ = new BehaviorSubject(ColumnType.STRING);
+        this._columnField$ = new BehaviorSubject('');
+        this.dataSelected = new EventEmitter();
+        this.diagramTypeChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.diagramData$ = combineLatest([this._data$, this._columnField$, this._columnType$]).pipe(mergeMap(([data, columnField, columnType]) => {
+            const columnData = data.map((d) => ObjectUtils.resolveFieldData(d, columnField));
+            const occurrences = columnData.reduce((acc, current) => {
+                return acc.some((e) => e.label === current)
+                    ? (acc.find((e) => e.label === current).value++, acc)
+                    : [...acc, { label: current, value: 1 }];
+            }, []);
+            if (columnType === ColumnType.TRANSLATION_KEY && occurrences.length > 0) {
+                return this.translateService.get(occurrences.map((o) => o.label)).pipe(map((translations) => occurrences.map((o) => ({
+                    label: translations[o.label],
+                    value: o.value,
+                }))));
+            }
+            else {
+                return of(occurrences);
+            }
+        }));
+    }
+    dataClicked(event) {
+        this.dataSelected.emit(event);
+    }
+    onDiagramTypeChanged(newDiagramType) {
+        this.diagramType = newDiagramType;
+        this.diagramTypeChanged.emit(newDiagramType);
+    }
+}
+GroupByCountDiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupByCountDiagramComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+GroupByCountDiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GroupByCountDiagramComponent, selector: "ocx-group-by-count-diagram", inputs: { sumKey: "sumKey", diagramType: "diagramType", type: "type", supportedDiagramTypes: "supportedDiagramTypes", data: "data", columnType: "columnType", columnField: "columnField", column: "column" }, outputs: { dataSelected: "dataSelected", diagramTypeChanged: "diagramTypeChanged" }, ngImport: i0, template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n", dependencies: [{ kind: "component", type: DiagramComponent, selector: "ocx-diagram", inputs: ["data", "sumKey", "diagramType", "supportedDiagramTypes"], outputs: ["dataSelected", "diagramTypeChanged"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GroupByCountDiagramComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ocx-group-by-count-diagram', template: "<ocx-diagram\n  [data]=\"(diagramData$ | async) || []\"\n  [sumKey]=\"sumKey\"\n  [diagramType]=\"diagramType\"\n  (onDataSelect)=\"dataClicked($event)\"\n  [supportedDiagramTypes]=\"supportedDiagramTypes\"\n  (diagramTypeChanged)=\"onDiagramTypeChanged($event)\"\n></ocx-diagram>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { sumKey: [{
+                type: Input
+            }], diagramType: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], supportedDiagramTypes: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], columnType: [{
+                type: Input
+            }], columnField: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], dataSelected: [{
+                type: Output
+            }], diagramTypeChanged: [{
+                type: Output
+            }] } });
+
+class InteractiveDataViewComponent {
+    constructor() {
+        this.name = 'Data';
+        this.subtitleLineIds = [];
+        this.supportedViewLayouts = ['grid', 'list', 'table'];
+        this.columns = [];
+        this.clientSideFiltering = true;
+        this.fallbackImage = 'placeholder.png';
+        this.filters = [];
+        this.sortDirection = "NONE" /* DataSortDirection.NONE */;
+        this.sortField = '';
+        this.sortStates = [
+            "ASCENDING" /* DataSortDirection.ASCENDING */,
+            "DESCENDING" /* DataSortDirection.DESCENDING */,
+            "NONE" /* DataSortDirection.NONE */,
+        ];
+        this.pageSizes = [10, 25, 50];
+        this.pageSize = this.pageSizes[0] || 50;
+        this.layout = 'table';
+        this.defaultGroupKey = '';
+        this.customGroupKey = 'OCX_INTERACTIVE_DATA_VIEW.CUSTOM_GROUP';
+        this.groupSelectionNoGroupSelectedKey = 'OCX_INTERACTIVE_DATA_VIEW.NO_GROUP_SELECTED';
+        this.currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING';
+        this.currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER';
+        this.additionalActions = [];
+        this.listGridPaginator = true;
+        this.tablePaginator = true;
+        this.page = 0;
+        this.selectedRows = [];
+        this.displayedColumns = [];
+        this.filtered = new EventEmitter();
+        this.sorted = new EventEmitter();
+        this.deleteItem = new EventEmitter();
+        this.viewItem = new EventEmitter();
+        this.editItem = new EventEmitter();
+        this.dataViewLayoutChange = new EventEmitter();
+        this.displayedColumnsChange = new EventEmitter();
+        this.selectionChanged = new EventEmitter();
+        this.pageChanged = new EventEmitter();
+        this.selectedGroupKey = '';
+        this.frozenActionColumn = false;
+        this.actionColumnPosition = 'right';
+        this._data = [];
+    }
+    set dataView(ref) {
+        this._dataViewComponent = ref;
+        this.registerEventListenerForDataView();
+    }
+    get dataView() {
+        return this._dataViewComponent;
+    }
+    get paginator() {
+        return this.listGridPaginator && this.tablePaginator;
+    }
+    set paginator(value) {
+        this.listGridPaginator = value;
+        this.tablePaginator = value;
+    }
+    get _gridItemSubtitleLines() {
+        return this.gridItemSubtitleLines;
+    }
+    get _listItemSubtitleLines() {
+        return this.listItemSubtitleLines;
+    }
+    get _tableCell() {
+        return this.tableCell;
+    }
+    get _stringTableCell() {
+        return this.stringTableCell;
+    }
+    get _numberTableCell() {
+        return this.numberTableCell;
+    }
+    get _tableDateCell() {
+        return this.tableDateCell;
+    }
+    get _tableRelativeDateCell() {
+        return this.tableRelativeDateCell;
+    }
+    get _tableTranslationKeyCell() {
+        return this.tableTranslationKeyCell;
+    }
+    get _gridItem() {
+        return this.gridItem;
+    }
+    get _listItem() {
+        return this.listItem;
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        this._data = value;
+    }
+    ngOnInit() {
+        this.selectedGroupKey = this.defaultGroupKey;
+        this.displayedColumns = this.columns;
+        if (this.defaultGroupKey) {
+            this.displayedColumns = this.columns.filter((column) => column.predefinedGroupKeys?.includes(this.defaultGroupKey));
+        }
+        this.displayedColumnsChange.emit(this.displayedColumns);
+        if (!this.groupSelectionNoGroupSelectedKey) {
+            this.groupSelectionNoGroupSelectedKey = 'OCX_INTERACTIVE_DATA_VIEW.NO_GROUP_SELECTED';
+        }
+        this.firstColumnId = this.columns[0]?.id;
+    }
+    filtering(event) {
+        this.filters = event;
+        this.filtered.emit(event);
+    }
+    sorting(event) {
+        this.sortDirection = event.sortDirection;
+        this.sortField = event.sortColumn;
+        this.sorted.emit(event);
+    }
+    onDeleteElement(element) {
+        if (this.isDeleteItemObserved) {
+            this.deleteItem.emit(element);
+        }
+    }
+    onViewElement(element) {
+        if (this.isViewItemObserved) {
+            this.viewItem.emit(element);
+        }
+    }
+    onEditElement(element) {
+        if (this.isEditItemObserved) {
+            this.editItem.emit(element);
+        }
+    }
+    onDataViewLayoutChange(layout) {
+        this.layout = layout;
+        this.dataViewLayoutChange.emit(layout);
+    }
+    onSortChange($event) {
+        this.sortField = $event;
+        this.sorted.emit({ sortColumn: this.sortField, sortDirection: this.sortDirection });
+    }
+    onSortDirectionChange($event) {
+        this.sortDirection = $event;
+        this.sorted.emit({ sortColumn: this.sortField, sortDirection: this.sortDirection });
+    }
+    onColumnGroupSelectionChange(event) {
+        this.displayedColumns = event.activeColumns;
+        this.selectedGroupKey = event.groupKey;
+        this.displayedColumnsChange.emit(this.displayedColumns);
+    }
+    registerEventListenerForDataView() {
+        if (this.deleteItem.observed) {
+            this.isDeleteItemObserved = true;
+            if (!this._dataViewComponent?.deleteItem.observed) {
+                this._dataViewComponent?.deleteItem.subscribe((event) => {
+                    this.onDeleteElement(event);
+                });
+            }
+        }
+        if (this.viewItem.observed) {
+            this.isViewItemObserved = true;
+            if (!this._dataViewComponent?.viewItem.observed) {
+                this._dataViewComponent?.viewItem.subscribe((event) => {
+                    this.onViewElement(event);
+                });
+            }
+        }
+        if (this.editItem.observed) {
+            this.isEditItemObserved = true;
+            if (!this._dataViewComponent?.editItem.observed) {
+                this._dataViewComponent?.editItem.subscribe((event) => {
+                    this.onEditElement(event);
+                });
+            }
+        }
+        if (this.selectionChanged.observed) {
+            if (!this._dataViewComponent?.selectionChanged.observed) {
+                this._dataViewComponent?.selectionChanged.subscribe((event) => {
+                    this.onRowSelectionChange(event);
+                });
+            }
+        }
+    }
+    onColumnSelectionChange(event) {
+        this.displayedColumns = event.activeColumns;
+        this.selectedGroupKey = this.customGroupKey;
+        this.displayedColumnsChange.emit(this.displayedColumns);
+    }
+    onActionColumnConfigChange(event) {
+        this.frozenActionColumn = event.frozenActionColumn;
+        this.actionColumnPosition = event.actionColumnPosition;
+    }
+    onRowSelectionChange(event) {
+        if (this.selectionChanged.observed) {
+            this.selectionChanged.emit(event);
+        }
+    }
+    onPageChange(event) {
+        this.page = event;
+        this.pageChanged.emit(event);
+    }
+}
+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", 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", 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: "gridItem", first: true, predicate: ["gridItem"], descendants: true }, { propertyName: "listItem", first: true, predicate: ["listItem"], 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=\"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]=\"true\"\n    [clientSideFiltering]=\"true\"\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    [tableDateCellTemplate]=\"_tableDateCell ? tableDateCell : undefined\"\n    [tableRelativeDateTemplate]=\"_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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "paginator", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "tableDateCellTemplate", "tableCellTemplate", "tableTranslationKeyCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "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=\"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]=\"true\"\n    [clientSideFiltering]=\"true\"\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    [tableDateCellTemplate]=\"_tableDateCell ? tableDateCell : undefined\"\n    [tableRelativeDateTemplate]=\"_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" }]
+        }], propDecorators: { dataView: [{
+                type: ViewChild,
+                args: [DataViewComponent]
+            }], deletePermission: [{
+                type: Input
+            }], editPermission: [{
+                type: Input
+            }], viewPermission: [{
+                type: Input
+            }], deleteActionVisibleField: [{
+                type: Input
+            }], deleteActionEnabledField: [{
+                type: Input
+            }], viewActionVisibleField: [{
+                type: Input
+            }], viewActionEnabledField: [{
+                type: Input
+            }], editActionVisibleField: [{
+                type: Input
+            }], editActionEnabledField: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], titleLineId: [{
+                type: Input
+            }], subtitleLineIds: [{
+                type: Input
+            }], supportedViewLayouts: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], emptyResultsMessage: [{
+                type: Input
+            }], clientSideFiltering: [{
+                type: Input
+            }], fallbackImage: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], sortField: [{
+                type: Input
+            }], sortStates: [{
+                type: Input
+            }], pageSizes: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], totalRecordsOnServer: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], defaultGroupKey: [{
+                type: Input
+            }], customGroupKey: [{
+                type: Input
+            }], groupSelectionNoGroupSelectedKey: [{
+                type: Input
+            }], currentPageShowingKey: [{
+                type: Input
+            }], currentPageShowingWithTotalOnServerKey: [{
+                type: Input
+            }], additionalActions: [{
+                type: Input
+            }], listGridPaginator: [{
+                type: Input
+            }], tablePaginator: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], selectedRows: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], tableCell: [{
+                type: ContentChild,
+                args: ['tableCell']
+            }], tableDateCell: [{
+                type: ContentChild,
+                args: ['tableDateCell']
+            }], tableRelativeDateCell: [{
+                type: ContentChild,
+                args: ['tableRelativeDateCell']
+            }], tableTranslationKeyCell: [{
+                type: ContentChild,
+                args: ['tableTranslationKeyCell']
+            }], gridItemSubtitleLines: [{
+                type: ContentChild,
+                args: ['gridItemSubtitleLines']
+            }], listItemSubtitleLines: [{
+                type: ContentChild,
+                args: ['listItemSubtitleLines']
+            }], stringTableCell: [{
+                type: ContentChild,
+                args: ['stringTableCell']
+            }], numberTableCell: [{
+                type: ContentChild,
+                args: ['numberTableCell']
+            }], gridItem: [{
+                type: ContentChild,
+                args: ['gridItem']
+            }], listItem: [{
+                type: ContentChild,
+                args: ['listItem']
+            }], filtered: [{
+                type: Output
+            }], sorted: [{
+                type: Output
+            }], deleteItem: [{
+                type: Output
+            }], viewItem: [{
+                type: Output
+            }], editItem: [{
+                type: Output
+            }], dataViewLayoutChange: [{
+                type: Output
+            }], displayedColumnsChange: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }], paginator: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class BreadcrumbService {
+    constructor(router, activeRoute, translateService) {
+        this.router = router;
+        this.activeRoute = activeRoute;
+        this.translateService = translateService;
+        this.itemsSource = new BehaviorSubject([]);
+        this.generatedItemsSource = new BehaviorSubject([]);
+        this.itemsHandler = this.itemsSource.asObservable();
+        const breadcrumbs = [];
+        this.addBreadcrumb(this.activeRoute.snapshot, [], breadcrumbs);
+        this.generatedItemsSource.next(breadcrumbs);
+        this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
+            const root = this.router.routerState.snapshot.root;
+            const breadcrumbs = [];
+            this.addBreadcrumb(root, [], breadcrumbs);
+            this.generatedItemsSource.next(breadcrumbs);
+        });
+    }
+    addBreadcrumb(route, parentUrl, breadcrumbs) {
+        if (route && route.url) {
+            const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+            if (route.routeConfig?.path) {
+                if (route.data['breadcrumb']) {
+                    const breadcrumb = {
+                        label: this.getLabel(route.data, route.paramMap),
+                        routerLink: '/' + routeUrl.join('/'),
+                    };
+                    breadcrumbs.push(breadcrumb);
+                }
+                else {
+                    const breadcrumb = {
+                        label: 'NA',
+                        routerLink: '/' + routeUrl.join('/'),
+                    };
+                    breadcrumbs.push(breadcrumb);
+                }
+            }
+            this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+        }
+    }
+    getLabel(data, params) {
+        if (typeof data['breadcrumbFn'] === 'function') {
+            return data['breadcrumbFn'](data, params);
+        }
+        return data['breadcrumb'];
+    }
+    setItems(items) {
+        const translationKeys = [
+            ...items.map((i) => i.labelKey || '').filter((l) => !!l),
+            ...items.map((i) => i.titleKey || '').filter((l) => !!l),
+        ];
+        if (translationKeys.length) {
+            this.translateService.get(translationKeys).subscribe((translations) => {
+                this.itemsSource.next(items.map((i) => ({
+                    ...i,
+                    label: translations[i.labelKey || ''] || i.label,
+                    title: translations[i.titleKey || ''] || i.title,
+                })));
+            });
+        }
+        else {
+            this.itemsSource.next(items);
+        }
+    }
+}
+BreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+BreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadcrumbService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'any' }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i1.TranslateService }]; } });
+
+class DynamicPipe {
+    constructor(locale, injector) {
+        this.injector = injector;
+        this.knownPipes = {};
+        this.knownPipes = {
+            currency: new CurrencyPipe(locale),
+            decimal: new DecimalPipe(locale),
+            date: new DatePipe(locale),
+        };
+    }
+    transform(value, requiredPipe, pipeArgs) {
+        if (!requiredPipe) {
+            return value;
+        }
+        const injector = Injector.create({
+            name: 'DynamicPipe',
+            parent: this.injector,
+            providers: [{ provide: requiredPipe }],
+        });
+        const pipe = injector.get(requiredPipe);
+        return pipe.transform(value, pipeArgs);
+    }
+    transform2(value, pipeToken, ...pipeArgs) {
+        if (!pipeToken) {
+            return value;
+        }
+        else {
+            // eslint-disable-next-line no-prototype-builtins
+            if (pipeToken && this.knownPipes.hasOwnProperty(pipeToken)) {
+                const pipe = this.knownPipes[pipeToken];
+                if (Array.isArray(pipeArgs)) {
+                    return pipe.transform(value, ...pipeArgs);
+                }
+                else {
+                    return pipe.transform(value, pipeArgs);
+                }
+            }
+            else {
+                return value;
+            }
+        }
+    }
+}
+DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicPipe, deps: [{ token: LOCALE_ID }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
+DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dynamicPipe',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i0.Injector }]; } });
+
+class PageHeaderComponent {
+    get actions() {
+        return this._actions;
+    }
+    set actions(value) {
+        this._actions = value;
+        this.generateInlineActions();
+        this.generateOverflowActions();
+    }
+    constructor(breadcrumbs, translateService, appStateService, userService) {
+        this.translateService = translateService;
+        this.appStateService = appStateService;
+        this.userService = userService;
+        this.loading = false;
+        this.figureBackground = true;
+        this.showFigure = true;
+        this.disableDefaultActions = false;
+        this.showBreadcrumbs = true;
+        this.manualBreadcrumbs = false;
+        this.save = new EventEmitter();
+        this.overflowActions = [];
+        this.dd = new Date();
+        this.breadcrumbs = breadcrumbs;
+        this.home$ = concat(of({ menuItem: { icon: PrimeIcons.HOME, routerLink: '/' } }), this.appStateService.currentPortal$.pipe(map((portal) => ({
+            menuItem: {
+                icon: PrimeIcons.HOME,
+                routerLink: portal.baseUrl,
+            },
+            page: portal.portalName,
+        }))));
+    }
+    ngOnChanges(changes) {
+        if (changes['actions']) {
+            this.generateInlineActions();
+            this.generateOverflowActions();
+        }
+    }
+    ngOnInit() {
+        if (!this.manualBreadcrumbs) {
+            this.breadcrumbs$ = this.breadcrumbs.generatedItemsSource;
+        }
+        else {
+            this.breadcrumbs$ = this.breadcrumbs.itemsHandler;
+        }
+        this.generateInlineActions();
+        this.generateOverflowActions();
+    }
+    onAction(action) {
+        switch (action) {
+            case 'save':
+                this.save.emit();
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Generates a list of actions that should be rendered in an overflow menu
+     */
+    generateOverflowActions() {
+        if (this.actions) {
+            const translationKeys = [
+                ...this.actions.map((a) => a.labelKey || '').filter((a) => !!a),
+                ...this.actions.map((a) => a.titleKey || '').filter((a) => !!a),
+            ];
+            const translations$ = translationKeys.length ? this.translateService.get(translationKeys) : of([]);
+            translations$.subscribe((translations) => {
+                const allowedActions = [];
+                if (this.actions) {
+                    this.actions
+                        .filter((a) => a.show === 'asOverflow')
+                        .filter((a) => {
+                        if (a.conditional) {
+                            if (a.showCondition)
+                                return a;
+                            return null;
+                        }
+                        else
+                            return a;
+                    })
+                        .forEach((action) => {
+                        this.checkActionPermission(allowedActions, action);
+                    });
+                    this.overflowActions = [
+                        ...allowedActions.map((a) => ({
+                            label: a.labelKey ? translations[a.labelKey] : a.label,
+                            icon: a.icon,
+                            title: (a.titleKey ? translations[a.titleKey] : a.title) || (a.labelKey ? translations[a.labelKey] : a.label),
+                            command: a.actionCallback,
+                            disabled: a.disabled,
+                        })),
+                    ];
+                }
+            });
+        }
+    }
+    /**
+     * Generates a list of actions that should be rendered as inline buttons
+     */
+    generateInlineActions() {
+        if (this.actions) {
+            // Temp array to hold all inline actions that should be visible to the current user
+            const allowedActions = [];
+            // Check permissions for all actions that should be rendered 'always'
+            this.actions
+                .filter((a) => a.show === 'always')
+                .filter((a) => {
+                if (a.conditional) {
+                    return a.showCondition ? a : null;
+                }
+                else
+                    return a;
+            })
+                .forEach((action) => {
+                this.checkActionPermission(allowedActions, action);
+            });
+            this.inlineActions = [...allowedActions];
+        }
+    }
+    /**
+     * Adds a given action to a given array if the current user is allowed to see it
+     * @param allowedActions Array that the action should be added to if the current user is allowed to see it
+     * @param action Action for which a permission check should be executed
+     */
+    checkActionPermission(allowedActions, action) {
+        if (action.permission) {
+            if (this.userService.hasPermission(action.permission)) {
+                // Push action to allowed array if user has sufficient permissions
+                allowedActions.push(action);
+            }
+        }
+        else {
+            // Push action to allowed array if no permission was specified
+            allowedActions.push(action);
+        }
+    }
+}
+PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [{ token: BreadcrumbService }, { token: i1.TranslateService }, { token: i2.AppStateService }, { token: i2.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" }, 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\" 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 *ngIf=\"figureImage\" [src]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" />\n        </div>\n        <div class=\"colorblob flex-1 border-round\" *ngIf=\"previewImage.children.length === 0\"></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 *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 *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\"> </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 flex-column md:flex-row\"\n    [class.justify-content-evenly]=\"objectDetails\"\n    [class.justify-content-start]=\"!objectDetails\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <label class=\"flex font-medium text-600\" name=\"object-detail-label\">{{ item.label | dynamicPipe:item.labelPipe }}</label>\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"flex text-900 mt-2\"\n          [ngClass]=\"item.icon ? 'gap-1 align-items-center' : null\"\n          [title]=\"item.tooltip || ''\"\n          name=\"object-detail-value\"\n        >\n          <i *ngIf=\"item.icon\" class=\"{{item.icon}}\" name=\"object-detail-icon\"></i>\n          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}</span\n        >\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;display:flex}.onecx-page-header .object-panel:empty{display:none}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5.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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.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\" 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 *ngIf=\"figureImage\" [src]=\"figureImage\" alt=\"Figure image\" class=\"w-full\" />\n        </div>\n        <div class=\"colorblob flex-1 border-round\" *ngIf=\"previewImage.children.length === 0\"></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 *ngIf=\"!!header\">{{ header }}</h1>\n        <h2 *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\"> </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 flex-column md:flex-row\"\n    [class.justify-content-evenly]=\"objectDetails\"\n    [class.justify-content-start]=\"!objectDetails\"\n  >\n    <ng-container *ngIf=\"objectDetails\">\n      <div\n        class=\"object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between\"\n        *ngFor=\"let item of objectDetails\"\n      >\n        <label class=\"flex font-medium text-600\" name=\"object-detail-label\">{{ item.label | dynamicPipe:item.labelPipe }}</label>\n        <span\n          *ngIf=\"item.icon || item.value\"\n          class=\"flex text-900 mt-2\"\n          [ngClass]=\"item.icon ? 'gap-1 align-items-center' : null\"\n          [title]=\"item.tooltip || ''\"\n          name=\"object-detail-value\"\n        >\n          <i *ngIf=\"item.icon\" class=\"{{item.icon}}\" name=\"object-detail-icon\"></i>\n          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}</span\n        >\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;display:flex}.onecx-page-header .object-panel:empty{display:none}.badge-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.scale{transform:scale(2)}\n"] }]
+        }], ctorParameters: function () { return [{ type: BreadcrumbService }, { type: i1.TranslateService }, { type: i2.AppStateService }, { type: i2.UserService }]; }, propDecorators: { header: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], figureBackground: [{
+                type: Input
+            }], showFigure: [{
+                type: Input
+            }], figureImage: [{
+                type: Input
+            }], disableDefaultActions: [{
+                type: Input
+            }], subheader: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], objectDetails: [{
+                type: Input
+            }], showBreadcrumbs: [{
+                type: Input
+            }], manualBreadcrumbs: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], additionalToolbarContent: [{
+                type: ContentChild,
+                args: ['additionalToolbarContent']
+            }], additionalToolbarContentLeft: [{
+                type: ContentChild,
+                args: ['additionalToolbarContentLeft']
+            }] } });
+
+class SearchConfigComponent {
+    constructor() {
+        this.placeholderKey = 'OCX_SEARCH_HEADER.OCX_SEARCH_CONFIG.DROPDOWN_DEFAULT';
+        this.selectedSearchConfigChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this.formGroup = new FormGroup({
+            searchConfigForm: new FormControl(null),
+        });
+    }
+    onSearchConfigChange(event) {
+        this.selectedSearchConfigChanged?.emit(event.value);
+    }
+}
+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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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.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" }]
+        }], propDecorators: { searchConfigs: [{
+                type: Input
+            }], placeholderKey: [{
+                type: Input
+            }], selectedSearchConfigChanged: [{
+                type: Output
+            }] } });
+
+/**
+ * To trigger the search when Enter key is pressed inside a search parameter field,
+ * an EventListener for keyup enter event is added for HTML elements which have an input.
+ * Please add the EventListener yourself manually, if you want to have that functionality for some other elements
+ * which do not have an input element.
+ */
+class SearchHeaderComponent {
+    constructor() {
+        this.header = '';
+        this.viewMode = 'basic';
+        this.manualBreadcrumbs = false;
+        this._actions = [];
+        this.searched = new EventEmitter();
+        this.resetted = new EventEmitter();
+        this.selectedSearchConfigChanged = new EventEmitter();
+        this.viewModeChanged = new EventEmitter();
+        this.hasAdvanced = false;
+        this.headerActions = [];
+    }
+    /**
+     * @deprecated Will be replaced by header
+     */
+    get headline() {
+        return this.header;
+    }
+    set headline(value) {
+        this.header = value;
+    }
+    get actions() {
+        return this._actions;
+    }
+    set actions(value) {
+        this._actions = value;
+        this.updateHeaderActions();
+    }
+    get _additionalToolbarContent() {
+        return this.additionalToolbarContent;
+    }
+    get _additionalToolbarContentLeft() {
+        return this.additionalToolbarContentLeft;
+    }
+    ngAfterViewInit() {
+        this.addKeyUpEventListener();
+    }
+    toggleViewMode() {
+        this.viewMode = this.viewMode === 'basic' ? 'advanced' : 'basic';
+        this.viewModeChanged?.emit(this.viewMode);
+        this.updateHeaderActions();
+        setTimeout(() => this.addKeyUpEventListener());
+    }
+    onResetClicked() {
+        this.resetted.emit();
+    }
+    onSearchClicked() {
+        this.searched.emit();
+    }
+    updateHeaderActions() {
+        const headerActions = [];
+        if (this.hasAdvanced) {
+            headerActions.push({
+                id: 'simpleAdvancedButton',
+                labelKey: this.viewMode === 'basic'
+                    ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.TEXT'
+                    : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.TEXT',
+                actionCallback: () => this.toggleViewMode(),
+                show: 'always',
+                titleKey: this.viewMode === 'basic'
+                    ? 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.ADVANCED.DETAIL'
+                    : 'OCX_SEARCH_HEADER.TOGGLE_BUTTON.SIMPLE.DETAIL',
+            });
+        }
+        this.headerActions = headerActions.concat(this.actions);
+    }
+    addKeyUpEventListener() {
+        const inputElements = this.searchParameterFields?.nativeElement.querySelectorAll('input');
+        inputElements.forEach((inputElement) => {
+            if (!inputElement.listenerAdded) {
+                inputElement.addEventListener('keyup', (event) => this.onSearchKeyup(event));
+                inputElement.listenerAdded = true;
+            }
+        });
+    }
+    onSearchKeyup(event) {
+        if (event.code === 'Enter') {
+            this.onSearchClicked();
+        }
+    }
+    confirmSearchConfig(searchConfig) {
+        this.selectedSearchConfigChanged?.emit(searchConfig);
+    }
+}
+SearchHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchHeaderComponent, selector: "ocx-search-header", inputs: { searchConfigs: "searchConfigs", header: "header", headline: "headline", subheader: "subheader", viewMode: "viewMode", manualBreadcrumbs: "manualBreadcrumbs", actions: "actions" }, outputs: { searched: "searched", resetted: "resetted", selectedSearchConfigChanged: "selectedSearchConfigChanged", viewModeChanged: "viewModeChanged" }, queries: [{ propertyName: "additionalToolbarContent", first: true, predicate: ["additionalToolbarContent"], descendants: true }, { propertyName: "additionalToolbarContentLeft", first: true, predicate: ["additionalToolbarContentLeft"], descendants: true }], viewQueries: [{ propertyName: "searchParameterFields", first: true, predicate: ["searchParameterFields"], descendants: true }], ngImport: i0, template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n>\n  <ng-template #additionalToolbarContentLeft>\n    <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n    </ocx-search-config>\n    <ng-container *ngIf=\"_additionalToolbarContentLeft\" [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"search-criteria-container\">\n    <div #searchParameterFields>\n      <ng-content></ng-content>\n      <div class=\"search-criteria-buttons\">\n        <p-button\n          id=\"resetButton\"\n          *ngIf=\"resetted.observed\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n\n        <p-button\n          id=\"searchButton\"\n          (onClick)=\"onSearchClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-search\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n      </div>\n    </div>\n  </div>\n</ocx-page-header>\n", styles: [".search-criteria-buttons{display:flex;flex-flow:row;align-items:flex-start;gap:.5rem;margin-top:.5rem}.search-criteria-container{width:100%;display:flex}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SearchConfigComponent, selector: "ocx-search-config", inputs: ["searchConfigs", "placeholderKey"], outputs: ["selectedSearchConfigChanged"] }, { kind: "component", type: PageHeaderComponent, selector: "ocx-page-header", inputs: ["header", "loading", "figureBackground", "showFigure", "figureImage", "disableDefaultActions", "subheader", "actions", "objectDetails", "showBreadcrumbs", "manualBreadcrumbs"], outputs: ["save"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ocx-search-header', template: "<ocx-page-header\n  [header]=\"header || ('OCX_SEARCH_HEADER.HEADER' | translate)\"\n  [subheader]=\"subheader\"\n  [manualBreadcrumbs]=\"manualBreadcrumbs\"\n  [actions]=\"headerActions\"\n>\n  <ng-template #additionalToolbarContentLeft>\n    <ocx-search-config [searchConfigs]=\"searchConfigs\" (selectedSearchConfigChanged)=\"confirmSearchConfig($event)\">\n    </ocx-search-config>\n    <ng-container *ngIf=\"_additionalToolbarContentLeft\" [ngTemplateOutlet]=\"_additionalToolbarContentLeft\"></ng-container>\n  </ng-template>\n  <ng-template #additionalToolbarContent>\n    <ng-container *ngIf=\"_additionalToolbarContent\" [ngTemplateOutlet]=\"_additionalToolbarContent\"></ng-container>\n  </ng-template>\n  <div class=\"search-criteria-container\">\n    <div #searchParameterFields>\n      <ng-content></ng-content>\n      <div class=\"search-criteria-buttons\">\n        <p-button\n          id=\"resetButton\"\n          *ngIf=\"resetted.observed\"\n          (onClick)=\"onResetClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-eraser\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.RESET_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n\n        <p-button\n          id=\"searchButton\"\n          (onClick)=\"onSearchClicked()\"\n          label=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.TEXT' | translate }}\"\n          icon=\"pi pi-search\"\n          [ariaLabel]=\"'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate\"\n          title=\"{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON.DETAIL' | translate }}\"\n        >\n        </p-button>\n      </div>\n    </div>\n  </div>\n</ocx-page-header>\n", styles: [".search-criteria-buttons{display:flex;flex-flow:row;align-items:flex-start;gap:.5rem;margin-top:.5rem}.search-criteria-container{width:100%;display:flex}\n"] }]
+        }], propDecorators: { searchConfigs: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], headline: [{
+                type: Input
+            }], subheader: [{
+                type: Input
+            }], viewMode: [{
+                type: Input
+            }], manualBreadcrumbs: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], searched: [{
+                type: Output
+            }], resetted: [{
+                type: Output
+            }], selectedSearchConfigChanged: [{
+                type: Output
+            }], viewModeChanged: [{
+                type: Output
+            }], additionalToolbarContent: [{
+                type: ContentChild,
+                args: ['additionalToolbarContent']
+            }], additionalToolbarContentLeft: [{
+                type: ContentChild,
+                args: ['additionalToolbarContentLeft']
+            }], searchParameterFields: [{
+                type: ViewChild,
+                args: ['searchParameterFields']
+            }] } });
+
+// This topic is defined here and not in integration-interface, because
+// it is not used as framework independent integration but for improving
+// angular specific things
+class TranslationCacheTopic extends SyncableTopic {
+    constructor() {
+        super('translationCache', 1);
+    }
+}
+class TranslationCacheService {
+    constructor() {
+        this.translationTopic$ = new TranslationCacheTopic();
+        this.translations$ = new BehaviorSubject({});
+        this.translationTopic$
+            .pipe(withLatestFrom(this.translations$), map(([topicTranslations, translations]) => {
+            let foundValueOthersDoNotKnow = false;
+            const newTranslations = { ...translations };
+            Object.keys(topicTranslations).forEach((k) => {
+                if (!topicTranslations[k] && translations[k]) {
+                    foundValueOthersDoNotKnow = true;
+                }
+                newTranslations[k] ?? (newTranslations[k] = topicTranslations[k]);
+            });
+            return [newTranslations, foundValueOthersDoNotKnow];
+        }), tap(([newTranslations, foundValueOthersDoNotKnow]) => {
+            if (foundValueOthersDoNotKnow) {
+                this.translationTopic$.publish(newTranslations);
+            }
+        }), map(([newTranslations]) => newTranslations))
+            .subscribe(this.translations$);
+    }
+    ngOnDestroy() {
+        this.translationTopic$.destroy();
+    }
+    getTranslationFile(url, cacheMissFunction) {
+        if (this.translations$.value[url]) {
+            return of(this.translations$.value[url]);
+        }
+        this.translationTopic$.publish({ ...this.translations$.value, [url]: null });
+        return race(this.translations$.pipe(filter((t) => t[url]), map((t) => t[url])), cacheMissFunction().pipe(tap((t) => {
+            this.translationTopic$.publish({ ...this.translations$.value, [url]: t });
+        }))).pipe(first());
+    }
+}
+TranslationCacheService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TranslationCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TranslationCacheService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TranslationCacheService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TranslationCacheService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+class AngularAcceleratorPrimeNgModule {
+}
+AngularAcceleratorPrimeNgModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AngularAcceleratorPrimeNgModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [DropdownModule,
+        ButtonModule,
+        DialogModule,
+        PickListModule,
+        SelectButtonModule,
+        DataViewModule,
+        TableModule,
+        MenuModule,
+        ChartModule,
+        MultiSelectModule], exports: [DropdownModule,
+        ButtonModule,
+        DialogModule,
+        PickListModule,
+        SelectButtonModule,
+        DataViewModule,
+        TableModule,
+        MenuModule,
+        ChartModule,
+        MultiSelectModule] });
+AngularAcceleratorPrimeNgModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorPrimeNgModule, imports: [DropdownModule,
+        ButtonModule,
+        DialogModule,
+        PickListModule,
+        SelectButtonModule,
+        DataViewModule,
+        TableModule,
+        MenuModule,
+        ChartModule,
+        MultiSelectModule, DropdownModule,
+        ButtonModule,
+        DialogModule,
+        PickListModule,
+        SelectButtonModule,
+        DataViewModule,
+        TableModule,
+        MenuModule,
+        ChartModule,
+        MultiSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorPrimeNgModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DropdownModule,
+                        ButtonModule,
+                        DialogModule,
+                        PickListModule,
+                        SelectButtonModule,
+                        DataViewModule,
+                        TableModule,
+                        MenuModule,
+                        ChartModule,
+                        MultiSelectModule,
+                    ],
+                    exports: [
+                        DropdownModule,
+                        ButtonModule,
+                        DialogModule,
+                        PickListModule,
+                        SelectButtonModule,
+                        DataViewModule,
+                        TableModule,
+                        MenuModule,
+                        ChartModule,
+                        MultiSelectModule,
+                    ],
+                }]
+        }] });
+
+class OcxTimeagoIntl extends TimeagoIntl {
+    constructor(userService) {
+        super();
+        this.userService = userService;
+        this.LANG_TO_STRINGS = {
+            en: strings,
+            de: strings$1,
+        };
+        this.DEFAULT_LANG = 'en';
+        this.strings = strings;
+        userService.lang$
+            .pipe(map((lang) => {
+            return this.getBestMatchLanguage(lang);
+        }))
+            .subscribe((lang) => {
+            this.strings = this.LANG_TO_STRINGS[lang];
+            this.changes.next();
+        });
+    }
+    getBestMatchLanguage(lang) {
+        if (Object.keys(this.LANG_TO_STRINGS).includes(lang)) {
+            return lang;
+        }
+        else {
+            console.log(`${lang} is not supported. Using ${this.DEFAULT_LANG} as a fallback.`);
+        }
+        return this.DEFAULT_LANG;
+    }
+}
+
+class AsyncTranslateLoader {
+    constructor(translateLoader$) {
+        this.translateLoader$ = translateLoader$;
+        this.timerId = AsyncTranslateLoader.lastTimerId++;
+    }
+    getTranslation(lang) {
+        return this.translateLoader$.pipe(tap(() => console.time('AsyncTranslateLoader_' + this.timerId)), defaultIfEmpty(undefined), first(), mergeMap((translateLoader) => translateLoader?.getTranslation(lang) ?? of({})), tap(() => console.timeEnd('AsyncTranslateLoader_' + this.timerId)));
+    }
+}
+AsyncTranslateLoader.lastTimerId = 0;
+
+class CachingTranslateLoader {
+    constructor(translationCache, http, prefix, suffix) {
+        this.translationCache = translationCache;
+        this.http = http;
+        this.prefix = prefix;
+        this.suffix = suffix;
+        this.translateLoader = new TranslateHttpLoader(this.http, this.prefix, this.suffix);
+    }
+    getTranslation(lang) {
+        const url = `${this.prefix}${lang}${this.suffix}`;
+        return this.translationCache.getTranslationFile(url, () => this.translateLoader.getTranslation(lang));
+    }
+}
+
+class TranslateCombinedLoader {
+    constructor(...loaders) {
+        this._loaders = loaders;
+    }
+    getTranslation(lang) {
+        return forkJoin(this._loaders.map((l) => l.getTranslation(lang))).pipe(map((allTranslations) => {
+            let result = {};
+            allTranslations.forEach((translations) => {
+                result = this.mergeDeep(result, translations);
+            });
+            return result;
+        }));
+    }
+    isObject(item) {
+        return item && typeof item === 'object' && !Array.isArray(item);
+    }
+    mergeDeep(target, source) {
+        const output = Object.assign({}, target);
+        if (this.isObject(target) && this.isObject(source)) {
+            Object.keys(source).forEach((key) => {
+                if (this.isObject(source[key])) {
+                    if (!(key in target))
+                        Object.assign(output, { [key]: source[key] });
+                    else
+                        output[key] = this.mergeDeep(target[key], source[key]);
+                }
+                else {
+                    Object.assign(output, { [key]: source[key] });
+                }
+            });
+        }
+        return output;
+    }
+}
+
+let lastTranslateLoaderTimerId = 0;
+function createTranslateLoader(http, appStateService, translationCacheService) {
+    const ts = translationCacheService ?? inject(TranslationCacheService);
+    const timerId = lastTranslateLoaderTimerId++;
+    console.time('createTranslateLoader_' + timerId);
+    return new AsyncTranslateLoader(combineLatest([appStateService.currentMfe$.asObservable(), appStateService.globalLoading$.asObservable()]).pipe(filter(([, isLoading]) => !isLoading), map(([currentMfe]) => {
+        return new TranslateCombinedLoader(
+        // translations of shell or of app in standalone mode
+        new CachingTranslateLoader(ts, http, `./assets/i18n/`, '.json'), 
+        // translations of portal-integration-angular of app
+        new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `onecx-portal-lib/assets/i18n/`), '.json'), 
+        // translations of the app
+        new CachingTranslateLoader(ts, http, Location.joinWithSlash(currentMfe.remoteBaseUrl, `assets/i18n/`), '.json'));
+    }), tap(() => console.timeEnd('createTranslateLoader_' + timerId))));
+}
+
+class AngularAcceleratorMissingTranslationHandler {
+    handle(params) {
+        console.log(`Missing translation for ${params.key}`, params);
+        return params.key;
+    }
+}
+class AngularAcceleratorModule {
+}
+AngularAcceleratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AngularAcceleratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorModule, declarations: [ColumnGroupSelectionComponent,
+        CustomGroupColumnSelectorComponent,
+        DataLayoutSelectionComponent,
+        DataListGridSortingComponent,
+        DataListGridComponent,
+        DataTableComponent,
+        DataViewComponent,
+        InteractiveDataViewComponent,
+        SearchConfigComponent,
+        PageHeaderComponent,
+        DynamicPipe,
+        SearchHeaderComponent,
+        DiagramComponent,
+        GroupByCountDiagramComponent,
+        IfPermissionDirective,
+        IfBreakpointDirective,
+        OcxTimeAgoPipe], imports: [CommonModule,
+        AngularAcceleratorPrimeNgModule, i1.TranslateModule, FormsModule,
+        RouterModule,
+        ReactiveFormsModule], exports: [ColumnGroupSelectionComponent,
+        CustomGroupColumnSelectorComponent,
+        DataLayoutSelectionComponent,
+        DataListGridComponent,
+        DataTableComponent,
+        DataViewComponent,
+        InteractiveDataViewComponent,
+        SearchConfigComponent,
+        PageHeaderComponent,
+        SearchHeaderComponent,
+        DiagramComponent,
+        GroupByCountDiagramComponent,
+        IfPermissionDirective,
+        IfBreakpointDirective,
+        OcxTimeAgoPipe] });
+AngularAcceleratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorModule, providers: [
+        {
+            provide: LOCALE_ID,
+            useFactory: (UserService) => {
+                return UserService.lang$.getValue();
+            },
+            deps: [UserService],
+        },
+        {
+            provide: TimeagoIntl,
+            useFactory: (userService) => {
+                return new OcxTimeagoIntl(userService);
+            },
+            deps: [UserService],
+        },
+        importProvidersFrom(TimeagoModule),
+        {
+            provide: TimeagoFormatter,
+            useFactory: (TimeagoIntl) => {
+                return new TimeagoCustomFormatter(TimeagoIntl);
+            },
+            deps: [TimeagoIntl],
+        },
+        {
+            provide: TimeagoClock,
+            useClass: TimeagoDefaultClock,
+        },
+    ], imports: [CommonModule,
+        AngularAcceleratorPrimeNgModule,
+        TranslateModule.forRoot({
+            isolate: true,
+            loader: {
+                provide: TranslateLoader,
+                useFactory: createTranslateLoader,
+                deps: [HttpClient, AppStateService, TranslationCacheService],
+            },
+            missingTranslationHandler: {
+                provide: MissingTranslationHandler,
+                useClass: AngularAcceleratorMissingTranslationHandler,
+            },
+        }),
+        FormsModule,
+        RouterModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AngularAcceleratorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        AngularAcceleratorPrimeNgModule,
+                        TranslateModule.forRoot({
+                            isolate: true,
+                            loader: {
+                                provide: TranslateLoader,
+                                useFactory: createTranslateLoader,
+                                deps: [HttpClient, AppStateService, TranslationCacheService],
+                            },
+                            missingTranslationHandler: {
+                                provide: MissingTranslationHandler,
+                                useClass: AngularAcceleratorMissingTranslationHandler,
+                            },
+                        }),
+                        FormsModule,
+                        RouterModule,
+                        ReactiveFormsModule,
+                    ],
+                    declarations: [
+                        ColumnGroupSelectionComponent,
+                        CustomGroupColumnSelectorComponent,
+                        DataLayoutSelectionComponent,
+                        DataListGridSortingComponent,
+                        DataListGridComponent,
+                        DataTableComponent,
+                        DataViewComponent,
+                        InteractiveDataViewComponent,
+                        SearchConfigComponent,
+                        PageHeaderComponent,
+                        DynamicPipe,
+                        SearchHeaderComponent,
+                        DiagramComponent,
+                        GroupByCountDiagramComponent,
+                        IfPermissionDirective,
+                        IfBreakpointDirective,
+                        OcxTimeAgoPipe,
+                    ],
+                    providers: [
+                        {
+                            provide: LOCALE_ID,
+                            useFactory: (UserService) => {
+                                return UserService.lang$.getValue();
+                            },
+                            deps: [UserService],
+                        },
+                        {
+                            provide: TimeagoIntl,
+                            useFactory: (userService) => {
+                                return new OcxTimeagoIntl(userService);
+                            },
+                            deps: [UserService],
+                        },
+                        importProvidersFrom(TimeagoModule),
+                        {
+                            provide: TimeagoFormatter,
+                            useFactory: (TimeagoIntl) => {
+                                return new TimeagoCustomFormatter(TimeagoIntl);
+                            },
+                            deps: [TimeagoIntl],
+                        },
+                        {
+                            provide: TimeagoClock,
+                            useClass: TimeagoDefaultClock,
+                        },
+                    ],
+                    exports: [
+                        ColumnGroupSelectionComponent,
+                        CustomGroupColumnSelectorComponent,
+                        DataLayoutSelectionComponent,
+                        DataListGridComponent,
+                        DataTableComponent,
+                        DataViewComponent,
+                        InteractiveDataViewComponent,
+                        SearchConfigComponent,
+                        PageHeaderComponent,
+                        SearchHeaderComponent,
+                        DiagramComponent,
+                        GroupByCountDiagramComponent,
+                        IfPermissionDirective,
+                        IfBreakpointDirective,
+                        OcxTimeAgoPipe,
+                        // DataListGridSortingComponent,
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+class DateUtils {
+    constructor(locale) {
+        this.locale = locale;
+        this.options = {
+            month: 'short',
+            day: '2-digit',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            second: '2-digit',
+        };
+    }
+    localizedDate(date) {
+        return date
+            ? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
+            : '';
+    }
+}
+DateUtils.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateUtils, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+DateUtils.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateUtils, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateUtils, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
+
+// directives
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularAcceleratorMissingTranslationHandler, AngularAcceleratorModule, AngularAcceleratorPrimeNgModule, AsyncTranslateLoader, BreadcrumbService, CachingTranslateLoader, ColorUtils, ColumnGroupSelectionComponent, ColumnType, CustomGroupColumnSelectorComponent, DataLayoutSelectionComponent, DataListGridComponent, DataListGridSortingComponent, DataTableComponent, DataViewComponent, DateUtils, DiagramComponent, DynamicPipe, GroupByCountDiagramComponent, IfBreakpointDirective, IfPermissionDirective, InteractiveDataViewComponent, ObjectUtils, OcxTimeAgoPipe, PageHeaderComponent, SearchConfigComponent, SearchHeaderComponent, TranslateCombinedLoader, TranslationCacheService, createTranslateLoader, flattenObject };
+//# sourceMappingURL=onecx-angular-accelerator.mjs.map