npm - @onecx/angular-accelerator - Versions diffs - 8.6.1 → 8.7.0 - Mend

@onecx/angular-accelerator 8.6.1 → 8.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/assets/i18n/de.json +1 -0
package/assets/i18n/en.json +1 -0
package/fesm2022/onecx-angular-accelerator.mjs +65 -15
package/fesm2022/onecx-angular-accelerator.mjs.map +1 -1
package/package.json +7 -7
package/types/onecx-angular-accelerator.d.ts +20 -4

package/fesm2022/onecx-angular-accelerator.mjs CHANGED Viewed

@@ -1557,11 +1557,11 @@ class CustomGroupColumnSelectorComponent {
         this.visible.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CustomGroupColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogTitleKey: { classPropertyName: "dialogTitleKey", publicName: "dialogTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitle: { classPropertyName: "openButtonTitle", publicName: "openButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitleKey: { classPropertyName: "openButtonTitleKey", publicName: "openButtonTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabel: { classPropertyName: "openButtonAriaLabel", publicName: "openButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabelKey: { classPropertyName: "openButtonAriaLabelKey", publicName: "openButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabel: { classPropertyName: "saveButtonLabel", publicName: "saveButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabelKey: { classPropertyName: "saveButtonLabelKey", publicName: "saveButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabel: { classPropertyName: "saveButtonAriaLabel", publicName: "saveButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabelKey: { classPropertyName: "saveButtonAriaLabelKey", publicName: "saveButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabelKey: { classPropertyName: "cancelButtonLabelKey", publicName: "cancelButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabelKey: { classPropertyName: "cancelButtonAriaLabelKey", publicName: "cancelButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabel: { classPropertyName: "activeColumnsLabel", publicName: "activeColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabelKey: { classPropertyName: "activeColumnsLabelKey", publicName: "activeColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabel: { classPropertyName: "inactiveColumnsLabel", publicName: "inactiveColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabelKey: { classPropertyName: "inactiveColumnsLabelKey", publicName: "inactiveColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayedColumns: "displayedColumnsChange", columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n      translate) }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel()\"\n    [target]=\"hiddenColumnsModel()\"\n    [sourceHeader]=\"activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"frozenOptions()\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"frozenActionColumnLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"alignmentOptions()\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"actionColumnPositionLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CustomGroupColumnSelectorComponent, isStandalone: false, selector: "ocx-custom-group-column-selector", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, dialogTitleKey: { classPropertyName: "dialogTitleKey", publicName: "dialogTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitle: { classPropertyName: "openButtonTitle", publicName: "openButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, openButtonTitleKey: { classPropertyName: "openButtonTitleKey", publicName: "openButtonTitleKey", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabel: { classPropertyName: "openButtonAriaLabel", publicName: "openButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, openButtonAriaLabelKey: { classPropertyName: "openButtonAriaLabelKey", publicName: "openButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabel: { classPropertyName: "saveButtonLabel", publicName: "saveButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonLabelKey: { classPropertyName: "saveButtonLabelKey", publicName: "saveButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabel: { classPropertyName: "saveButtonAriaLabel", publicName: "saveButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, saveButtonAriaLabelKey: { classPropertyName: "saveButtonAriaLabelKey", publicName: "saveButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabelKey: { classPropertyName: "cancelButtonLabelKey", publicName: "cancelButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabelKey: { classPropertyName: "cancelButtonAriaLabelKey", publicName: "cancelButtonAriaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabel: { classPropertyName: "activeColumnsLabel", publicName: "activeColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeColumnsLabelKey: { classPropertyName: "activeColumnsLabelKey", publicName: "activeColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabel: { classPropertyName: "inactiveColumnsLabel", publicName: "inactiveColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, inactiveColumnsLabelKey: { classPropertyName: "inactiveColumnsLabelKey", publicName: "inactiveColumnsLabelKey", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { displayedColumns: "displayedColumnsChange", columnSelectionChanged: "columnSelectionChanged", actionColumnConfigChanged: "actionColumnConfigChanged", componentStateChanged: "componentStateChanged" }, ngImport: i0, template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n      translate) }}</span\n    >\n  </ng-template>\n\n  @let resolvedActiveColumnsLabel = activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate);\n  @let resolvedInactiveColumnsLabel = inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate);\n  <p-pickList\n    [source]=\"displayedColumnsModel()\"\n    [target]=\"hiddenColumnsModel()\"\n    [sourceHeader]=\"resolvedActiveColumnsLabel\"\n    [targetHeader]=\"resolvedInactiveColumnsLabel\"\n    [sourceAriaLabel]=\"resolvedActiveColumnsLabel\"\n    [targetAriaLabel]=\"resolvedInactiveColumnsLabel\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\" [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    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"frozenOptions()\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"frozenActionColumnLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"alignmentOptions()\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"actionColumnPositionLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"], dependencies: [{ kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i3$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i4$2.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["hostName", "source", "target", "dataKey", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "sourceAriaLabel", "targetAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["sourceChange", "targetChange", "onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CustomGroupColumnSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n      translate) }}</span\n    >\n  </ng-template>\n\n  <p-pickList\n    [source]=\"displayedColumnsModel()\"\n    [target]=\"hiddenColumnsModel()\"\n    [sourceHeader]=\"activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate)\"\n    [targetHeader]=\"inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate)\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\"\n    [sourceStyle]=\"{ height: '300px' }\"\n    [targetStyle]=\"{ height: '300px' }\"\n    [upButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)\"\n    [topButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)\"\n    [downButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)\"\n    [bottomButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)\"\n    [rightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)\"\n    [allRightButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)\"\n    [leftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)\"\n    [allLeftButtonAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)\"\n  >\n    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"frozenOptions()\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"frozenActionColumnLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"alignmentOptions()\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"actionColumnPositionLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-custom-group-column-selector', template: "<p-button\n  id=\"customGroupColumnSelectorButton\"\n  type=\"button\"\n  (onClick)=\"onOpenCustomGroupColumnSelectionDialogClick()\"\n  [ocxTooltip]=\"openButtonTitle() || (openButtonTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  tooltipPosition=\"top\"\n  icon=\"pi pi-cog\"\n  styleClass=\"p-button\"\n  [ariaLabel]=\"(openButtonAriaLabelKey() ? (openButtonAriaLabelKey() | translate) : openButtonAriaLabel()) || openButtonTitle() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)\"\n  [attr.aria-controls]=\"visible() ? 'customGroupColumnSelectorDialog' : null\"\n  [attr.aria-expanded]=\"visible() ? true : false\"\n></p-button>\n\n<p-dialog\n  #dialog\n  id=\"customGroupColumnSelectorDialog\"\n  [(visible)]=\"visible\"\n  [style]=\"{ width: '70%' }\"\n  [modal]=\"true\"\n  [closeAriaLabel]=\"('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.CLOSE' | translate)\"\n>\n  <ng-template pTemplate=\"header\">\n    <span [id]=\"dialog.ariaLabelledBy\" class=\"text-xl font-bold\"\n      >{{ dialogTitle() || (dialogTitleKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.DIALOG_TITLE' |\n      translate) }}</span\n    >\n  </ng-template>\n\n  @let resolvedActiveColumnsLabel = activeColumnsLabel() || (activeColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ACTIVE_COLUMNS_LABEL' | translate);\n  @let resolvedInactiveColumnsLabel = inactiveColumnsLabel() || (inactiveColumnsLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.INACTIVE_COLUMNS_LABEL' | translate);\n  <p-pickList\n    [source]=\"displayedColumnsModel()\"\n    [target]=\"hiddenColumnsModel()\"\n    [sourceHeader]=\"resolvedActiveColumnsLabel\"\n    [targetHeader]=\"resolvedInactiveColumnsLabel\"\n    [sourceAriaLabel]=\"resolvedActiveColumnsLabel\"\n    [targetAriaLabel]=\"resolvedInactiveColumnsLabel\"\n    [dragdrop]=\"true\"\n    [responsive]=\"false\" [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    <ng-template let-item #item>\n      <div>{{ item.nameKey | translate }}</div>\n    </ng-template>\n  </p-pickList>\n\n  <div class=\"pt-4\">\n    <p class=\"text-xl font-bold\">{{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.TITLE' | translate}}</p>\n    <div class=\"flex gap-6 px-3\">\n      <div>\n        <p id=\"frozenActionColumnLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.FREEZE' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"frozenOptions()\"\n          [(ngModel)]=\"frozenActionColumnModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"frozenActionColumn\"\n          name=\"frozen-action-column-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"frozenActionColumnLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n      <div>\n        <p id=\"actionColumnPositionLabel\" class=\"mb-1\">\n          {{'OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CONFIGURE_ACTION_COLUMN.POSITION' | translate}}\n        </p>\n        <p-selectbutton\n          [options]=\"alignmentOptions()\"\n          [(ngModel)]=\"actionColumnPositionModel\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          id=\"actionColumnPosition\"\n          name=\"action-column-position-select-button\"\n          [allowEmpty]=\"false\"\n          ariaLabelledBy=\"actionColumnPositionLabel\"\n        >\n          <ng-template #item let-option> {{option.label | translate}} </ng-template>\n        </p-selectbutton>\n      </div>\n    </div>\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <p-button\n      id=\"cancelButton\"\n      (onClick)=\"onCancelClick()\"\n      [label]=\"cancelButtonLabel() || (cancelButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_LABEL' | translate)\"\n      styleClass=\"p-button\"\n      [ariaLabel]=\"cancelButtonLabel() || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.CANCEL_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n    <p-button\n      id=\"saveButton\"\n      (onClick)=\"onSaveClick()\"\n      [label]=\"saveButtonLabel() || (saveButtonLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_LABEL' | translate)\"\n      [ariaLabel]=\"saveButtonAriaLabelKey() || (saveButtonAriaLabelKey() | translate) || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.SAVE_BUTTON_ARIA_LABEL' | translate)\"\n    ></p-button>\n  </ng-template>\n</p-dialog>\n", styles: ["::ng-deep .p-buttonset .p-button{min-width:auto}::ng-deep .p-buttonset{display:flex}::ng-deep .p-picklist-item.cdk-drag-preview{z-index:2000!important}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary{background-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-transfer-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-source-controls>button.p-button-secondary:not(:disabled):hover,::ng-deep .p-picklist>div.p-picklist-controls.p-picklist-target-controls>button.p-button-secondary:not(:disabled):hover{background-color:var(--p-primary-hover-color)}.p-button{height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }, { type: i0.Output, args: ["displayedColumnsChange"] }], customGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupKey", required: false }] }], dialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitle", required: false }] }], dialogTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogTitleKey", required: false }] }], openButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonTitle", required: false }] }], openButtonTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonTitleKey", required: false }] }], openButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonAriaLabel", required: false }] }], openButtonAriaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openButtonAriaLabelKey", required: false }] }], saveButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonLabel", required: false }] }], saveButtonLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonLabelKey", required: false }] }], saveButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonAriaLabel", required: false }] }], saveButtonAriaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonAriaLabelKey", required: false }] }], cancelButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabel", required: false }] }], cancelButtonLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonLabelKey", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], cancelButtonAriaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabelKey", required: false }] }], activeColumnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColumnsLabel", required: false }] }], activeColumnsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColumnsLabelKey", required: false }] }], inactiveColumnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactiveColumnsLabel", required: false }] }], inactiveColumnsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactiveColumnsLabelKey", required: false }] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }], columnSelectionChanged: [{ type: i0.Output, args: ["columnSelectionChanged"] }], actionColumnConfigChanged: [{ type: i0.Output, args: ["actionColumnConfigChanged"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }] } });
 const ALL_VIEW_LAYOUTS = [
@@ -2536,6 +2536,7 @@ var TemplateType;
 (function (TemplateType) {
     TemplateType["CELL"] = "CELL";
     TemplateType["FILTERCELL"] = "FILTERCELL";
+    TemplateType["HEADER"] = "HEADER";
 })(TemplateType || (TemplateType = {}));
 class DataTableComponent extends DataSortBase {
     get viewTableRowObserved() {
@@ -2688,6 +2689,11 @@ class DataTableComponent extends DataSortBase {
         this.translationKeyFilterCell = computed(() => {
             return this.translationKeyFilterCellTemplate() || this.translationKeyFilterCellChildTemplate();
         }, ...(ngDevMode ? [{ debugName: "translationKeyFilterCell" }] : []));
+        this.columnHeaderTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "columnHeaderTemplate" }] : []));
+        this.columnHeaderChildTemplate = contentChild('columnHeaderTemplate', ...(ngDevMode ? [{ debugName: "columnHeaderChildTemplate" }] : []));
+        this.columnHeader = computed(() => {
+            return this.columnHeaderTemplate() || this.columnHeaderChildTemplate();
+        }, ...(ngDevMode ? [{ debugName: "columnHeader" }] : []));
         this.additionalActions = model([], ...(ngDevMode ? [{ debugName: "additionalActions" }] : []));
         this.frozenActionColumn = input(false, ...(ngDevMode ? [{ debugName: "frozenActionColumn" }] : []));
         this.actionColumnPosition = input('right', ...(ngDevMode ? [{ debugName: "actionColumnPosition" }] : []));
@@ -2835,6 +2841,11 @@ class DataTableComponent extends DataSortBase {
             const all = [...this.templates(), ...this.viewTemplates(), ...(this.parentTemplates() ?? [])].filter((t, index, self) => self.findIndex((pt) => pt.getType() === t.getType()) === index);
             return all.find((t) => t.getType() === 'expansion');
         }, ...(ngDevMode ? [{ debugName: "expansionTemplate" }] : []));
+        this.headerTemplatesData = {
+            templatesObservables: {},
+            idSuffix: ['IdTableHeader', 'IdHeader'],
+            templateNames: ['columnHeader'],
+        };
         this.cellTemplatesData = {
             templatesObservables: {},
             idSuffix: ['IdTableCell', 'IdCell'],
@@ -2884,6 +2895,7 @@ class DataTableComponent extends DataSortBase {
         this.templatesDataMap = {
             [TemplateType.CELL]: this.cellTemplatesData,
             [TemplateType.FILTERCELL]: this.filterTemplatesData,
+            [TemplateType.HEADER]: this.headerTemplatesData,
         };
         this.rowTrackByFunction = (index, item) => {
             return item.id;
@@ -2918,8 +2930,10 @@ class DataTableComponent extends DataSortBase {
             const columns = this.columns();
             const obs = columns.map((c) => this.getTemplate(c, TemplateType.CELL));
             const filterObs = columns.map((c) => this.getTemplate(c, TemplateType.FILTERCELL));
+            const headerObs = columns.map((c) => this.getTemplate(c, TemplateType.HEADER));
             this.columnTemplates$ = combineLatest(obs).pipe(map((values) => Object.fromEntries(columns.map((c, i) => [c.id, values[i]]))), debounceTime(50));
             this.columnFilterTemplates$ = combineLatest(filterObs).pipe(map((values) => Object.fromEntries(columns.map((c, i) => [c.id, values[i]]))));
+            this.columnHeaderTemplates$ = combineLatest(headerObs).pipe(map((values) => Object.fromEntries(columns.map((c, i) => [c.id, values[i]]))));
         });
         effect(() => {
             const selectedRows = this.selectedRows();
@@ -3108,6 +3122,10 @@ class DataTableComponent extends DataSortBase {
     getColumnTypeTemplate(templates, columnType, templateType) {
         let template;
         switch (templateType) {
+            case TemplateType.HEADER:
+                return (this.columnHeader() ??
+                    findTemplate(templates, this.templatesDataMap[templateType].templateNames)?.template ??
+                    null);
             case TemplateType.CELL:
                 switch (columnType) {
                     case ColumnType.DATE:
@@ -3145,8 +3163,9 @@ class DataTableComponent extends DataSortBase {
                 }
                 break;
         }
+        const templateNames = this.templatesDataMap[templateType].templateNames;
         return (template ??
-            findTemplate(templates, this.templatesDataMap[templateType].templateNames[columnType])?.template ??
+            findTemplate(templates, templateNames[columnType])?.template ??
             null);
     }
     getTemplate(column, templateType) {
@@ -3200,12 +3219,12 @@ class DataTableComponent extends DataSortBase {
         return summary.trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", selectedRows: "selectedRowsChange", filters: "filtersChange", sortDirection: "sortDirectionChange", sortColumn: "sortColumnChange", columns: "columnsChange", sortStates: "sortStatesChange", pageSizes: "pageSizesChange", pageSize: "pageSizeChange", name: "nameChange", page: "pageChange", additionalActions: "additionalActionsChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true, isSignal: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true, isSignal: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true, isSignal: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true, isSignal: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true, isSignal: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true, isSignal: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true, isSignal: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true, isSignal: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n      <button\n        id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n        *ocxIfPermission=\"viewPermission()\"\n        [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n      {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n        *ocxIfPermission=\"editPermission()\"\n        [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n      deleteActionVisibleField())) ) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n        *ocxIfPermission=\"deletePermission()\"\n        [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n      action.actionVisibleField)) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n        *ocxIfPermission=\"action.permission\"\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [ngClass]=\"action.classes\"\n        [icon]=\"action.icon || ''\"\n        (click)=\"onActionClick(action, rowObject)\"\n        [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [disabled]=\"\n            action.disabled ||\n            (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n          \"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable() && expansionTemplate()) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn()\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n    scope=\"col\"\n  >\n    <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    scope=\"col\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  [paginator]=\"paginator()\"\n  [first]=\"page() * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  [currentPageReportTemplate]=\"\n      (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n        | translate : params()\n    \"\n  [rowsPerPageOptions]=\"pageSizes()\"\n  [id]=\"'dataTable_' + name()\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"selectedFilteredRows()\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle()\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys()\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll()) {\n        <p-tableHeaderCheckbox\n          [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n        ></p-tableHeaderCheckbox>\n        }\n        <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n      </th>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } @for (column of columns(); track column) { @if (column.sortable || column.filterable) {\n      <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n        <div\n          class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n          style=\"height: 100%\"\n        >\n          <span class=\"flex\" [id]=\"column.id + '-header-name'\">{{ column.nameKey | translate }}</span>\n          <span class=\"flex icon-button-header-wrapper\">\n            @if (column.sortable) {\n            <button\n              class=\"pi sortButton pl-0\"\n              [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n              [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n              [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n              (click)=\"onSortColumnClick(column.id)\"\n              [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n              tooltipPosition=\"bottom\"\n              [attr.aria-label]=\"\n                    'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n                      | translate : {\n                          column: (column.nameKey | translate),\n                          direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n                        }\n                  \"\n            ></button>\n            } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n            columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n            FilterType.EQUALS)) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n              [ngModel]=\"currentEqualSelectedFilters() || []\"\n              [showToggleAll]=\"true\"\n              [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              filterBy=\"toFilterBy\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n              [ariaFilterLabel]=\"\n                        'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n                      \"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!filterAmounts()[column.id]\"\n                  [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value>\n                @if (columnFilterTemplates[column.id]; as template) {\n                <ng-container\n                  [ngTemplateOutlet]=\"template\"\n                  [ngTemplateOutletContext]=\"{\n                            rowObject: getRowObjectFromMultiselectItem(value, column),\n                            column: column\n                          }\"\n                >\n                </ng-container>\n                }\n              </ng-template>\n            </p-multiselect>\n            } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"[\n                    { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n                    { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n                  ]\"\n              [ngModel]=\"currentTruthySelectedFilters() || []\"\n              [showToggleAll]=\"true\"\n              [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [ariaFilterLabel]=\"\n                    'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n                  \"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!filterAmounts()[column.id]\"\n                  [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n            </p-multiselect>\n            }\n          </span>\n        </div>\n      </th>\n      } @else {\n      <th scope=\"col\">{{ column.nameKey | translate }}</th>\n      } } @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"caption\">\n    @if (captionTemplate()) {\n    <ng-container>\n      <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n    </ng-container>\n    }\n  </ng-template>\n\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [value]=\"true\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      } @for (column of columns(); track column) {\n      <td>\n        @defer (on viewport) { @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n          [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate(); as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td\n        [colSpan]=\"\n            getRowColspan(!!expansionTemplate())\n          \"\n      >\n        {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable() && expansionTemplate()) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n      [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataTableComponent, isStandalone: false, selector: "ocx-data-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabledField: { classPropertyName: "selectionEnabledField", publicName: "selectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringCellTemplate: { classPropertyName: "stringCellTemplate", publicName: "stringCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberCellTemplate: { classPropertyName: "numberCellTemplate", publicName: "numberCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateCellTemplate: { classPropertyName: "dateCellTemplate", publicName: "dateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateCellTemplate: { classPropertyName: "relativeDateCellTemplate", publicName: "relativeDateCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyCellTemplate: { classPropertyName: "translationKeyCellTemplate", publicName: "translationKeyCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringFilterCellTemplate: { classPropertyName: "stringFilterCellTemplate", publicName: "stringFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberFilterCellTemplate: { classPropertyName: "numberFilterCellTemplate", publicName: "numberFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateFilterCellTemplate: { classPropertyName: "dateFilterCellTemplate", publicName: "dateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateFilterCellTemplate: { classPropertyName: "relativeDateFilterCellTemplate", publicName: "relativeDateFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterCellTemplate: { classPropertyName: "filterCellTemplate", publicName: "filterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyFilterCellTemplate: { classPropertyName: "translationKeyFilterCellTemplate", publicName: "translationKeyFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderTemplate: { classPropertyName: "columnHeaderTemplate", publicName: "columnHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", selectedRows: "selectedRowsChange", filters: "filtersChange", sortDirection: "sortDirectionChange", sortColumn: "sortColumnChange", columns: "columnsChange", sortStates: "sortStatesChange", pageSizes: "pageSizesChange", pageSize: "pageSizeChange", name: "nameChange", page: "pageChange", additionalActions: "additionalActionsChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", parentTemplates: "parentTemplatesChange" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true, isSignal: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true, isSignal: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true, isSignal: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true, isSignal: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true, isSignal: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true, isSignal: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true, isSignal: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true, isSignal: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true, isSignal: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true, isSignal: true }, { propertyName: "columnHeaderChildTemplate", first: true, predicate: ["columnHeaderTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n      <button\n        id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n        *ocxIfPermission=\"viewPermission()\"\n        [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n      {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n        *ocxIfPermission=\"editPermission()\"\n        [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n      deleteActionVisibleField())) ) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n        *ocxIfPermission=\"deletePermission()\"\n        [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n      action.actionVisibleField)) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n        *ocxIfPermission=\"action.permission\"\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [ngClass]=\"action.classes\"\n        [icon]=\"action.icon || ''\"\n        (click)=\"onActionClick(action, rowObject)\"\n        [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [disabled]=\"\n            action.disabled ||\n            (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n          \"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable() && expansionTemplate()) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn()\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n    scope=\"col\"\n  >\n    <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    scope=\"col\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  [paginator]=\"paginator()\"\n  [first]=\"page() * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  [currentPageReportTemplate]=\"\n      (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n        | translate : params()\n    \"\n  [rowsPerPageOptions]=\"pageSizes()\"\n  [id]=\"'dataTable_' + name()\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"selectedFilteredRows()\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle()\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys()\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll()) {\n        <p-tableHeaderCheckbox\n          [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n        ></p-tableHeaderCheckbox>\n        }\n        <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n      </th>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } \n      @for (column of columns(); track column) { \n        @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n          <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.id : undefined\">\n            <ng-container\n              [ngTemplateOutlet]=\"columnHeaderTemplate\"\n              [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n            ></ng-container>\n          </th>\n        } @else {\n          @if (column.sortable || column.filterable) {\n            <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n              <div\n                class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n                style=\"height: 100%\"\n              >\n                <span class=\"flex\" [id]=\"column.id + '-header-name'\">\n                  <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                </span>\n                <span class=\"flex icon-button-header-wrapper\">  \n                  <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                  <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                </span>\n              </div>\n            </th>\n          } @else {\n            <th scope=\"col\">\n              <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n            </th> \n          } \n        }\n    } \n    @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n    }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"caption\">\n    @if (captionTemplate()) {\n    <ng-container>\n      <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n    </ng-container>\n    }\n  </ng-template>\n\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [value]=\"true\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      } @for (column of columns(); track column) {\n      <td>\n        @defer (on viewport) { @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n          [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate(); as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td\n        [colSpan]=\"\n            getRowColspan(!!expansionTemplate())\n          \"\n      >\n        {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable() && expansionTemplate()) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n      [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n  @if (column.sortable) {\n    <button\n      class=\"pi sortButton pl-0\"\n      [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n      [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n      [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n      (click)=\"onSortColumnClick(column.id)\"\n      [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n      tooltipPosition=\"bottom\"\n      [attr.aria-label]=\"\n            'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n              | translate : {\n                  column: (column.nameKey | translate),\n                  direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n                }\n          \"\n    ></button>\n  } \n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n  @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { \n    @if (columnFilterTemplates$ | async; as columnFilterTemplates) { \n      @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n        <p-multiselect\n          class=\"filterMultiSelect\"\n          [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n          [ngModel]=\"currentEqualSelectedFilters() || []\"\n          [showToggleAll]=\"true\"\n          [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n          [displaySelectedLabel]=\"false\"\n          [resetFilterOnHide]=\"true\"\n          (onChange)=\"onMultiselectFilterChange(column, $event)\"\n          placeholder=\" \"\n          appendTo=\"body\"\n          filterBy=\"toFilterBy\"\n          (onFocus)=\"onFilterChosen(column)\"\n          [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n          [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n          [ariaFilterLabel]=\"\n                    'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n                  \"\n        >\n          <ng-template #selecteditems let-value>\n            <div\n              class=\"pi\"\n              [class.pi-filter]=\"!filterAmounts()[column.id]\"\n              [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n            ></div>\n          </ng-template>\n          <ng-template #item let-value>\n            @if (columnFilterTemplates[column.id]; as template) {\n            <ng-container\n              [ngTemplateOutlet]=\"template\"\n              [ngTemplateOutletContext]=\"{\n                        rowObject: getRowObjectFromMultiselectItem(value, column),\n                        column: column\n                      }\"\n            >\n            </ng-container>\n            }\n          </ng-template>\n        </p-multiselect>\n      } \n    } \n  } \n  @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n    <p-multiselect\n      class=\"filterMultiSelect\"\n      [options]=\"[\n            { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n            { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n          ]\"\n      [ngModel]=\"currentTruthySelectedFilters() || []\"\n      [showToggleAll]=\"true\"\n      [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n      [displaySelectedLabel]=\"false\"\n      [resetFilterOnHide]=\"true\"\n      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n      placeholder=\" \"\n      appendTo=\"body\"\n      (onFocus)=\"onFilterChosen(column)\"\n      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n      [ariaFilterLabel]=\"\n            'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n          \"\n    >\n      <ng-template #selecteditems let-value>\n        <div\n          class=\"pi\"\n          [class.pi-filter]=\"!filterAmounts()[column.id]\"\n          [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n        ></div>\n      </ng-template>\n      <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n    </p-multiselect>\n  }\n</ng-template>", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i5$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i5$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i7$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i2$4.Ripple, selector: "[pRipple]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n      <button\n        id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n        *ocxIfPermission=\"viewPermission()\"\n        [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n      {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n        *ocxIfPermission=\"editPermission()\"\n        [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n      deleteActionVisibleField())) ) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n        *ocxIfPermission=\"deletePermission()\"\n        [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n      action.actionVisibleField)) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n        *ocxIfPermission=\"action.permission\"\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [ngClass]=\"action.classes\"\n        [icon]=\"action.icon || ''\"\n        (click)=\"onActionClick(action, rowObject)\"\n        [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [disabled]=\"\n            action.disabled ||\n            (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n          \"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable() && expansionTemplate()) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn()\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n    scope=\"col\"\n  >\n    <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    scope=\"col\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  [paginator]=\"paginator()\"\n  [first]=\"page() * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  [currentPageReportTemplate]=\"\n      (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n        | translate : params()\n    \"\n  [rowsPerPageOptions]=\"pageSizes()\"\n  [id]=\"'dataTable_' + name()\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"selectedFilteredRows()\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle()\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys()\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll()) {\n        <p-tableHeaderCheckbox\n          [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n        ></p-tableHeaderCheckbox>\n        }\n        <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n      </th>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } @for (column of columns(); track column) { @if (column.sortable || column.filterable) {\n      <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n        <div\n          class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n          style=\"height: 100%\"\n        >\n          <span class=\"flex\" [id]=\"column.id + '-header-name'\">{{ column.nameKey | translate }}</span>\n          <span class=\"flex icon-button-header-wrapper\">\n            @if (column.sortable) {\n            <button\n              class=\"pi sortButton pl-0\"\n              [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n              [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n              [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n              (click)=\"onSortColumnClick(column.id)\"\n              [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n              tooltipPosition=\"bottom\"\n              [attr.aria-label]=\"\n                    'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n                      | translate : {\n                          column: (column.nameKey | translate),\n                          direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n                        }\n                  \"\n            ></button>\n            } @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { @if (columnFilterTemplates$ | async; as\n            columnFilterTemplates) { @if (column.filterable && (!column.filterType || column.filterType ===\n            FilterType.EQUALS)) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n              [ngModel]=\"currentEqualSelectedFilters() || []\"\n              [showToggleAll]=\"true\"\n              [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              filterBy=\"toFilterBy\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n              [ariaFilterLabel]=\"\n                        'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n                      \"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!filterAmounts()[column.id]\"\n                  [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value>\n                @if (columnFilterTemplates[column.id]; as template) {\n                <ng-container\n                  [ngTemplateOutlet]=\"template\"\n                  [ngTemplateOutletContext]=\"{\n                            rowObject: getRowObjectFromMultiselectItem(value, column),\n                            column: column\n                          }\"\n                >\n                </ng-container>\n                }\n              </ng-template>\n            </p-multiselect>\n            } } } @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n            <p-multiselect\n              class=\"filterMultiSelect\"\n              [options]=\"[\n                    { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n                    { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n                  ]\"\n              [ngModel]=\"currentTruthySelectedFilters() || []\"\n              [showToggleAll]=\"true\"\n              [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n              [displaySelectedLabel]=\"false\"\n              [resetFilterOnHide]=\"true\"\n              (onChange)=\"onMultiselectFilterChange(column, $event)\"\n              placeholder=\" \"\n              appendTo=\"body\"\n              (onFocus)=\"onFilterChosen(column)\"\n              [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n              [ariaFilterLabel]=\"\n                    'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n                  \"\n            >\n              <ng-template #selecteditems let-value>\n                <div\n                  class=\"pi\"\n                  [class.pi-filter]=\"!filterAmounts()[column.id]\"\n                  [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n                ></div>\n              </ng-template>\n              <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n            </p-multiselect>\n            }\n          </span>\n        </div>\n      </th>\n      } @else {\n      <th scope=\"col\">{{ column.nameKey | translate }}</th>\n      } } @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"caption\">\n    @if (captionTemplate()) {\n    <ng-container>\n      <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n    </ng-container>\n    }\n  </ng-template>\n\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [value]=\"true\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      } @for (column of columns(); track column) {\n      <td>\n        @defer (on viewport) { @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n          [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate(); as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td\n        [colSpan]=\"\n            getRowColspan(!!expansionTemplate())\n          \"\n      >\n        {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable() && expansionTemplate()) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n      [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }, { type: i0.Output, args: ["sortStatesChange"] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }, { type: i0.Output, args: ["pageSizesChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], selectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabledField", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], captionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplate", required: false }] }], stringCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringCellTemplate", required: false }] }], stringCellChildTemplate: [{ type: i0.ContentChild, args: ['stringCell', { isSignal: true }] }], numberCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberCellTemplate", required: false }] }], numberCellChildTemplate: [{ type: i0.ContentChild, args: ['numberCell', { isSignal: true }] }], dateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateCellTemplate", required: false }] }], dateCellChildTemplate: [{ type: i0.ContentChild, args: ['dateCell', { isSignal: true }] }], relativeDateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateCellTemplate", required: false }] }], relativeDateCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateCell', { isSignal: true }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], cellChildTemplate: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], translationKeyCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyCellTemplate", required: false }] }], translationKeyCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyCell', { isSignal: true }] }], stringFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringFilterCellTemplate", required: false }] }], stringFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringFilterCell', { isSignal: true }] }], numberFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFilterCellTemplate", required: false }] }], numberFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberFilterCell', { isSignal: true }] }], dateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilterCellTemplate", required: false }] }], dateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateFilterCell', { isSignal: true }] }], relativeDateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateFilterCellTemplate", required: false }] }], relativeDateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateFilterCell', { isSignal: true }] }], filterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCellTemplate", required: false }] }], filterCellChildTemplate: [{ type: i0.ContentChild, args: ['filterCell', { isSignal: true }] }], translationKeyFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyFilterCellTemplate", required: false }] }], translationKeyFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyFilterCell', { isSignal: true }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }, { type: i0.Output, args: ["additionalActionsChange"] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], viewTableRow: [{
+            args: [{ standalone: false, selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  @if (actionColumnVisible) {\n  <td\n    class=\"actions\"\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-left' : 'action-column-right'\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n  >\n    <div class=\"icon-button-row-wrapper\">\n      @if (viewTableRowObserved && (!viewActionVisibleField() || fieldIsTruthy(rowObject, viewActionVisibleField()))) {\n      <button\n        id=\"{{ resolveFieldData(rowObject, 'id') }}-viewButton\"\n        *ocxIfPermission=\"viewPermission()\"\n        [disabled]=\"!!viewActionEnabledField() && !fieldIsTruthy(rowObject, viewActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text viewTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.VIEW' | translate\"\n        icon=\"pi pi-eye\"\n        (click)=\"onViewRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if (editTableRowObserved && (!editActionVisibleField() || fieldIsTruthy(rowObject, editActionVisibleField())))\n      {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-editButton'\"\n        *ocxIfPermission=\"editPermission()\"\n        [disabled]=\"!!editActionEnabledField() && !fieldIsTruthy(rowObject, editActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text editTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.EDIT' | translate\"\n        icon=\"pi pi-pencil\"\n        (click)=\"onEditRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @if ( deleteTableRowObserved && (!deleteActionVisibleField() || fieldIsTruthy(rowObject,\n      deleteActionVisibleField())) ) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-deleteButton'\"\n        *ocxIfPermission=\"deletePermission()\"\n        [disabled]=\"!!deleteActionEnabledField() && !fieldIsTruthy(rowObject, deleteActionEnabledField())\"\n        pButton\n        class=\"p-button-rounded p-button-text p-button-danger deleteTableRowButton\"\n        [title]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.ACTIONS.DELETE' | translate\"\n        icon=\"pi pi-trash\"\n        (click)=\"onDeleteRow(rowObject)\"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } @for (action of inlineActions(); track action) { @if (!action.actionVisibleField || fieldIsTruthy(rowObject,\n      action.actionVisibleField)) {\n      <button\n        [id]=\"resolveFieldData(rowObject, 'id')+'-'+(action.id ? action.id.concat('ActionButton') : 'inlineActionButton')\"\n        *ocxIfPermission=\"action.permission\"\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [ngClass]=\"action.classes\"\n        [icon]=\"action.icon || ''\"\n        (click)=\"onActionClick(action, rowObject)\"\n        [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n        [disabled]=\"\n            action.disabled ||\n            (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\n          \"\n        [attr.name]=\"'data-table-action-button'\"\n      ></button>\n      } } @if (hasVisibleOverflowMenuItems(rowObject) | async) {\n      <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n      <button\n        pButton\n        class=\"p-button-rounded p-button-text\"\n        [icon]=\"'pi pi-ellipsis-v'\"\n        (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n        [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n        [name]=\"'data-table-overflow-action-button'\"\n      ></button>\n      }\n    </div>\n  </td>\n  }\n</ng-template>\n\n<ng-template #expansionColumnHeader>\n  @if (expandable() && expansionTemplate()) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenExpandColumn()\"\n    alignFrozen=\"left\"\n    [attr.name]=\"'expansion-column-header'\"\n    style=\"width: 4rem\"\n    scope=\"col\"\n  >\n    <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.EXPAND_COLLAPSE_COLUMN' | translate }}</span>\n</th>\n  }\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  @if (actionColumnVisible) {\n  <th\n    pFrozenColumn\n    [frozen]=\"frozenActionColumn()\"\n    [alignFrozen]=\"actionColumnPosition()\"\n    [ngClass]=\"(frozenActionColumn() && actionColumnPosition() === 'left') ? 'border-right-1' : (frozenActionColumn() && actionColumnPosition() === 'right') ? 'border-left-1' : ''\"\n    [attr.name]=\"actionColumnPosition() === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    scope=\"col\"\n  >\n    {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n  </th>\n  }\n</ng-template>\n\n@if (displayedPageSize(); as displayedPageSize) { @if ((columnTemplates$ | async) ?? {}; as columnTemplates) {\n@if ((columnHeaderTemplates$ | async) ?? {}; as columnHeaderTemplates) {\n<p-table\n  [value]=\"(displayedRows$ | async) ?? []\"\n  [paginator]=\"paginator()\"\n  [first]=\"page() * displayedPageSize\"\n  (onPage)=\"onPageChange($event)\"\n  [rows]=\"displayedPageSize\"\n  [showCurrentPageReport]=\"true\"\n  [currentPageReportTemplate]=\"\n      (totalRecordsOnServer() ? currentPageShowingWithTotalOnServerKey() : currentPageShowingKey())\n        | translate : params()\n    \"\n  [rowsPerPageOptions]=\"pageSizes()\"\n  [id]=\"'dataTable_' + name()\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  dataKey=\"id\"\n  [rowTrackBy]=\"rowTrackByFunction\"\n  [selection]=\"selectedFilteredRows()\"\n  [scrollable]=\"true\"\n  scrollHeight=\"flex\"\n  [style]=\"tableStyle()\"\n  paginatorDropdownAppendTo=\"body\"\n  [rowSelectable]=\"rowSelectable\"\n  tableStyleClass=\"h-full\"\n  [expandedRowKeys]=\"expandedRowKeys()\"\n  (onRowExpand)=\"onRowExpand($event)\"\n  (onRowCollapse)=\"onRowCollapse($event)\"\n>\n  <ng-template #header>\n    <tr style=\"vertical-align: top\">\n      <ng-container *ngTemplateOutlet=\"expansionColumnHeader\"></ng-container>\n      @if (selectionChangedObserved) {\n      <th style=\"width: 4rem\" scope=\"col\">\n        @if (allowSelectAll()) {\n        <p-tableHeaderCheckbox\n          [ocxTooltip]=\"'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate\"\n        ></p-tableHeaderCheckbox>\n        }\n        <span class=\"sr-only\">{{ 'OCX_DATA_TABLE.SELECTION_COLUMN' | translate }}</span>\n      </th>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n      } \n      @for (column of columns(); track column) { \n        @if (columnHeaderTemplates[column.id]; as columnHeaderTemplate){\n          <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.id : undefined\">\n            <ng-container\n              [ngTemplateOutlet]=\"columnHeaderTemplate\"\n              [ngTemplateOutletContext]=\"{ column: column, labelTemplate: columnHeaderLabel, sortTemplate: columnHeaderSortButton, filterTemplate: columnHeaderFilter }\"\n            ></ng-container>\n          </th>\n        } @else {\n          @if (column.sortable || column.filterable) {\n            <th scope=\"col\" [pSortableColumn]=\"column.sortable ? column.nameKey : undefined\">\n              <div\n                class=\"table-header-wrapper flex flex-column justify-content-between align-items-start\"\n                style=\"height: 100%\"\n              >\n                <span class=\"flex\" [id]=\"column.id + '-header-name'\">\n                  <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                </span>\n                <span class=\"flex icon-button-header-wrapper\">  \n                  <ng-container [ngTemplateOutlet]=\"columnHeaderSortButton\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                  <ng-container [ngTemplateOutlet]=\"columnHeaderFilter\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n                </span>\n              </div>\n            </th>\n          } @else {\n            <th scope=\"col\">\n              <ng-container [ngTemplateOutlet]=\"columnHeaderLabel\" [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n            </th> \n          } \n        }\n    } \n    @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n    }\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"caption\">\n    @if (captionTemplate()) {\n    <ng-container>\n      <ng-container [ngTemplateOutlet]=\"captionTemplate()\"></ng-container>\n    </ng-container>\n    }\n  </ng-template>\n\n  <ng-template #body let-rowObject>\n    @if (columnTemplates) {\n    <tr [attr.id]=\"'ocx-expanded-row-' + rowObject.id\">\n      <ng-container *ngTemplateOutlet=\"expansionColumn; context: {localRowObject: rowObject}\"></ng-container>\n      @if (selectionChangedObserved) {\n      <td>\n        @if (isRowSelectionDisabled(rowObject) && isSelected(rowObject)) {\n        <p-checkbox\n          [value]=\"true\"\n          [binary]=\"true\"\n          [disabled]=\"true\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-checkbox>\n        } @else {\n        <p-tableCheckbox\n          [value]=\"rowObject\"\n          [disabled]=\"isRowSelectionDisabled(rowObject)\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate : { key: rowObject.id , rowSummary: getRowSummary(rowObject) }\"\n        ></p-tableCheckbox>\n        }\n      </td>\n      } @if (actionColumnPosition() === 'left') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      } @for (column of columns(); track column) {\n      <td>\n        @defer (on viewport) { @if (columnTemplates[column.id]) {\n        <ng-container\n          [ngTemplateOutlet]=\"cell() ?? columnTemplates[column.id]\"\n          [ngTemplateOutletContext]=\"{ rowObject: rowObject, column: column }\"\n        >\n        </ng-container>\n        } } @placeholder {\n        <p-skeleton width=\"3rem\" />\n        }\n      </td>\n      } @if (actionColumnPosition() === 'right') {\n      <ng-container *ngTemplateOutlet=\"actionColumn; context: { localRowObject: rowObject }\"></ng-container>\n      }\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #expandedrow let-rowObject>\n    @if (expansionTemplate(); as expansionTemplate) {\n    <tr>\n      <td [attr.colspan]=\"getRowColspan(!!expansionTemplate)\">\n        <ng-container\n          [ngTemplateOutlet]=\"expansionTemplate.template\"\n          [ngTemplateOutletContext]=\"{\n            rowObject: rowObject\n          }\"\n        >\n        </ng-container>\n      </td>\n    </tr>\n    }\n  </ng-template>\n\n  <ng-template #emptymessage>\n    <tr>\n      <td\n        [colSpan]=\"\n            getRowColspan(!!expansionTemplate())\n          \"\n      >\n        {{ emptyResultsMessage() || ('OCX_DATA_TABLE.EMPTY_RESULT' | translate) }}\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n} } }\n\n<ng-template #expansionColumn let-rowObject=\"localRowObject\">\n  @if (expandable() && expansionTemplate()) {\n  <td pFrozenColumn [frozen]=\"frozenExpandColumn()\" alignFrozen=\"left\" [attr.name]=\"'expansion-column'\">\n    <button\n      type=\"button\"\n      pButton\n      pRipple\n      [icon]=\"isRowExpanded(rowObject) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n      class=\"p-button-rounded p-button-text\"\n      (click)=\"toggleRowExpansion(rowObject)\"\n      [attr.aria-expanded]=\"isRowExpanded(rowObject)\"\n      [attr.aria-controls]=\"'ocx-expanded-row-' + rowObject.id\"\n      [attr.aria-label]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n      [title]=\"isRowExpanded(rowObject) ? ('OCX_DATA_TABLE.EXPANDED_ROW' | translate) : ('OCX_DATA_TABLE.COLLAPSED_ROW' | translate)\"\n    ></button>\n  </td>\n  }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n\n<ng-template #columnHeaderLabel let-column=\"column\">{{ column.nameKey | translate }}</ng-template>\n\n<ng-template #columnHeaderSortButton let-column=\"column\">\n  @if (column.sortable) {\n    <button\n      class=\"pi sortButton pl-0\"\n      [class.pi-sort-alt]=\"(column?.id === sortColumn() && sortDirection() === 'NONE') || column?.id !== sortColumn()\"\n      [class.pi-sort-amount-up]=\"column?.id === sortColumn() && sortDirection() === 'ASCENDING'\"\n      [class.pi-sort-amount-down]=\"column?.id === sortColumn() && sortDirection() === 'DESCENDING'\"\n      (click)=\"onSortColumnClick(column.id)\"\n      [ocxTooltip]=\"sortIconTitle(column.id) | translate\"\n      tooltipPosition=\"bottom\"\n      [attr.aria-label]=\"\n            'OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL'\n              | translate : {\n                  column: (column.nameKey | translate),\n                  direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)\n                }\n          \"\n    ></button>\n  } \n</ng-template>\n\n<ng-template #columnHeaderFilter let-column=\"column\">\n  @if (currentEqualFilterOptions$ | async; as equalFilterOptions) { \n    @if (columnFilterTemplates$ | async; as columnFilterTemplates) { \n      @if (column.filterable && (!column.filterType || column.filterType === FilterType.EQUALS)) {\n        <p-multiselect\n          class=\"filterMultiSelect\"\n          [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n          [ngModel]=\"currentEqualSelectedFilters() || []\"\n          [showToggleAll]=\"true\"\n          [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n          [displaySelectedLabel]=\"false\"\n          [resetFilterOnHide]=\"true\"\n          (onChange)=\"onMultiselectFilterChange(column, $event)\"\n          placeholder=\" \"\n          appendTo=\"body\"\n          filterBy=\"toFilterBy\"\n          (onFocus)=\"onFilterChosen(column)\"\n          [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n          [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n          [filterPlaceHolder]=\"'OCX_DATA_TABLE.COLUMN_FILTER_PLACEHOLDER' | translate\"\n          [ariaFilterLabel]=\"\n                    'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n                  \"\n        >\n          <ng-template #selecteditems let-value>\n            <div\n              class=\"pi\"\n              [class.pi-filter]=\"!filterAmounts()[column.id]\"\n              [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n            ></div>\n          </ng-template>\n          <ng-template #item let-value>\n            @if (columnFilterTemplates[column.id]; as template) {\n            <ng-container\n              [ngTemplateOutlet]=\"template\"\n              [ngTemplateOutletContext]=\"{\n                        rowObject: getRowObjectFromMultiselectItem(value, column),\n                        column: column\n                      }\"\n            >\n            </ng-container>\n            }\n          </ng-template>\n        </p-multiselect>\n      } \n    } \n  } \n  @if (column.filterable && column.filterType === FilterType.IS_NOT_EMPTY) {\n    <p-multiselect\n      class=\"filterMultiSelect\"\n      [options]=\"[\n            { key: 'OCX_DATA_TABLE.FILTER_YES', value: true },\n            { key: 'OCX_DATA_TABLE.FILTER_NO', value: false }\n          ]\"\n      [ngModel]=\"currentTruthySelectedFilters() || []\"\n      [showToggleAll]=\"true\"\n      [emptyFilterMessage]=\"'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate\"\n      [displaySelectedLabel]=\"false\"\n      [resetFilterOnHide]=\"true\"\n      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n      placeholder=\" \"\n      appendTo=\"body\"\n      (onFocus)=\"onFilterChosen(column)\"\n      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n      [ariaFilterLabel]=\"\n            'OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate : { column: column.nameKey | translate }\n          \"\n    >\n      <ng-template #selecteditems let-value>\n        <div\n          class=\"pi\"\n          [class.pi-filter]=\"!filterAmounts()[column.id]\"\n          [class.pi-filter-fill]=\"filterAmounts()[column.id] > 0\"\n        ></div>\n      </ng-template>\n      <ng-template #item let-value> {{ value.key | translate }} </ng-template>\n    </p-multiselect>\n  }\n</ng-template>", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-dropdown{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }, { type: i0.Output, args: ["sortColumnChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }, { type: i0.Output, args: ["sortStatesChange"] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }, { type: i0.Output, args: ["pageSizesChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], selectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabledField", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], captionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplate", required: false }] }], stringCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringCellTemplate", required: false }] }], stringCellChildTemplate: [{ type: i0.ContentChild, args: ['stringCell', { isSignal: true }] }], numberCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberCellTemplate", required: false }] }], numberCellChildTemplate: [{ type: i0.ContentChild, args: ['numberCell', { isSignal: true }] }], dateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateCellTemplate", required: false }] }], dateCellChildTemplate: [{ type: i0.ContentChild, args: ['dateCell', { isSignal: true }] }], relativeDateCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateCellTemplate", required: false }] }], relativeDateCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateCell', { isSignal: true }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], cellChildTemplate: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], translationKeyCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyCellTemplate", required: false }] }], translationKeyCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyCell', { isSignal: true }] }], stringFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringFilterCellTemplate", required: false }] }], stringFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringFilterCell', { isSignal: true }] }], numberFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFilterCellTemplate", required: false }] }], numberFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberFilterCell', { isSignal: true }] }], dateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilterCellTemplate", required: false }] }], dateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateFilterCell', { isSignal: true }] }], relativeDateFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateFilterCellTemplate", required: false }] }], relativeDateFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateFilterCell', { isSignal: true }] }], filterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCellTemplate", required: false }] }], filterCellChildTemplate: [{ type: i0.ContentChild, args: ['filterCell', { isSignal: true }] }], translationKeyFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyFilterCellTemplate", required: false }] }], translationKeyFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyFilterCell', { isSignal: true }] }], columnHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderTemplate", required: false }] }], columnHeaderChildTemplate: [{ type: i0.ContentChild, args: ['columnHeaderTemplate', { isSignal: true }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }, { type: i0.Output, args: ["additionalActionsChange"] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], viewTableRow: [{
                 type: Output
             }], editTableRow: [{
                 type: Output
@@ -3306,6 +3325,9 @@ class DataViewComponent {
     get numberTableFilterCell() {
         return this.numberTableFilterCellTemplate() || this.numberTableFilterCellChildTemplate();
     }
+    get columnHeader() {
+        return this.columnHeaderTemplate() || this.columnHeaderChildTemplate();
+    }
     get viewItemObserved() {
         return this.injector.get('InteractiveDataViewComponent', null)?.viewItem.observed() || this.viewItem.observed();
     }
@@ -3408,6 +3430,8 @@ class DataViewComponent {
         this.stringTableFilterCellChildTemplate = contentChild('stringTableFilterCellTemplate', ...(ngDevMode ? [{ debugName: "stringTableFilterCellChildTemplate" }] : []));
         this.numberTableFilterCellTemplate = input(...(ngDevMode ? [undefined, { debugName: "numberTableFilterCellTemplate" }] : []));
         this.numberTableFilterCellChildTemplate = contentChild('numberTableFilterCellTemplate', ...(ngDevMode ? [{ debugName: "numberTableFilterCellChildTemplate" }] : []));
+        this.columnHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "columnHeaderTemplate" }] : []));
+        this.columnHeaderChildTemplate = contentChild('columnHeaderTemplate', ...(ngDevMode ? [{ debugName: "columnHeaderChildTemplate" }] : []));
         this.additionalActions = input([], ...(ngDevMode ? [{ debugName: "additionalActions" }] : []));
         this.filtered = output();
         this.sorted = output();
@@ -3572,14 +3596,14 @@ class DataViewComponent {
         this.pageSize.set(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, stringTableCellTemplate: { classPropertyName: "stringTableCellTemplate", publicName: "stringTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableCellTemplate: { classPropertyName: "numberTableCellTemplate", publicName: "numberTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableCellTemplate: { classPropertyName: "dateTableCellTemplate", publicName: "dateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableCellTemplate: { classPropertyName: "tableCellTemplate", publicName: "tableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableCellTemplate: { classPropertyName: "translationKeyTableCellTemplate", publicName: "translationKeyTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableCellTemplate: { classPropertyName: "relativeDateTableCellTemplate", publicName: "relativeDateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableFilterCellTemplate: { classPropertyName: "tableFilterCellTemplate", publicName: "tableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableFilterCellTemplate: { classPropertyName: "dateTableFilterCellTemplate", publicName: "dateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableFilterCellTemplate: { classPropertyName: "relativeDateTableFilterCellTemplate", publicName: "relativeDateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableFilterCellTemplate: { classPropertyName: "translationKeyTableFilterCellTemplate", publicName: "translationKeyTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringTableFilterCellTemplate: { classPropertyName: "stringTableFilterCellTemplate", publicName: "stringTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableFilterCellTemplate: { classPropertyName: "numberTableFilterCellTemplate", publicName: "numberTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortField: "sortFieldChange", sortDirection: "sortDirectionChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", expandedRows: "expandedRowsChange", pageSize: "pageSizeChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItemTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItemTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValueTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataListGridComponent", first: true, predicate: DataListGridComponent, descendants: true, isSignal: true }, { propertyName: "dataTableComponent", first: true, predicate: DataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (layout() !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name()\"\n    [data]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortField]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"listGridPaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n    [listItemTemplate]=\"listItem\"\n    [gridItemTemplate]=\"gridItem\"\n    [listValueTemplate]=\"listValue\"\n    [translationKeyListValueTemplate]=\"translationKeyListValue\"\n    [numberListValueTemplate]=\"numberListValue\"\n    [relativeDateListValueTemplate]=\"relativeDateListValue\"\n    [stringListValueTemplate]=\"stringListValue\"\n    [dateListValueTemplate]=\"dateListValue\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [parentTemplates]=\"templatesForChildren()\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLinesTemplate let-item>\n    @if (listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLinesTemplate let-item>\n    @if (gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemTemplate let-item>\n    @if (gridItem) {\n    <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItemTemplate let-item>\n    @if (listItem) {\n    <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (listValue) {\n    <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout() === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortColumn]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [stringCellTemplate]=\"stringTableCell\"\n    [numberCellTemplate]=\"numberTableCell\"\n    [dateCellTemplate]=\"dateTableCell\"\n    [relativeDateCellTemplate]=\"relativeDateTableCell\"\n    [cellTemplate]=\"tableCell\"\n    [translationKeyCellTemplate]=\"translationKeyTableCell\"\n    [filterCellTemplate]=\"tableFilterCell\"\n    [dateFilterCellTemplate]=\"dateTableFilterCell\"\n    [numberFilterCellTemplate]=\"numberTableFilterCell\"\n    [stringFilterCellTemplate]=\"stringTableFilterCell\"\n    [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n    [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    [parentTemplates]=\"templatesForChildren()\"\n    [allowSelectAll]=\"tableAllowSelectAll()\"\n    [selectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableCell) {\n    <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableFilterCell) {\n    <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSize", "pageSizes", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["pageSizeChange", "pageChange", "nameChange", "viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged", "parentTemplatesChange"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DataViewComponent, isStandalone: false, selector: "ocx-data-view", inputs: { deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, stringTableCellTemplate: { classPropertyName: "stringTableCellTemplate", publicName: "stringTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableCellTemplate: { classPropertyName: "numberTableCellTemplate", publicName: "numberTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableCellTemplate: { classPropertyName: "dateTableCellTemplate", publicName: "dateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableCellTemplate: { classPropertyName: "tableCellTemplate", publicName: "tableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableCellTemplate: { classPropertyName: "translationKeyTableCellTemplate", publicName: "translationKeyTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemSubtitleLinesTemplate: { classPropertyName: "gridItemSubtitleLinesTemplate", publicName: "gridItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemSubtitleLinesTemplate: { classPropertyName: "listItemSubtitleLinesTemplate", publicName: "listItemSubtitleLinesTemplate", isSignal: true, isRequired: false, transformFunction: null }, gridItemTemplate: { classPropertyName: "gridItemTemplate", publicName: "gridItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableCellTemplate: { classPropertyName: "relativeDateTableCellTemplate", publicName: "relativeDateTableCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, listValueTemplate: { classPropertyName: "listValueTemplate", publicName: "listValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyListValueTemplate: { classPropertyName: "translationKeyListValueTemplate", publicName: "translationKeyListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberListValueTemplate: { classPropertyName: "numberListValueTemplate", publicName: "numberListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateListValueTemplate: { classPropertyName: "relativeDateListValueTemplate", publicName: "relativeDateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringListValueTemplate: { classPropertyName: "stringListValueTemplate", publicName: "stringListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateListValueTemplate: { classPropertyName: "dateListValueTemplate", publicName: "dateListValueTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableFilterCellTemplate: { classPropertyName: "tableFilterCellTemplate", publicName: "tableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, dateTableFilterCellTemplate: { classPropertyName: "dateTableFilterCellTemplate", publicName: "dateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, relativeDateTableFilterCellTemplate: { classPropertyName: "relativeDateTableFilterCellTemplate", publicName: "relativeDateTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, translationKeyTableFilterCellTemplate: { classPropertyName: "translationKeyTableFilterCellTemplate", publicName: "translationKeyTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, stringTableFilterCellTemplate: { classPropertyName: "stringTableFilterCellTemplate", publicName: "stringTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, numberTableFilterCellTemplate: { classPropertyName: "numberTableFilterCellTemplate", publicName: "numberTableFilterCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderTemplate: { classPropertyName: "columnHeaderTemplate", publicName: "columnHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, parentTemplates: { classPropertyName: "parentTemplates", publicName: "parentTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortField: "sortFieldChange", sortDirection: "sortDirectionChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", expandedRows: "expandedRowsChange", pageSize: "pageSizeChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed" }, providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], queries: [{ propertyName: "stringTableCellChildTemplate", first: true, predicate: ["stringTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableCellChildTemplate", first: true, predicate: ["numberTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableCellChildTemplate", first: true, predicate: ["dateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "tableCellChildTemplate", first: true, predicate: ["tableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableCellChildTemplate", first: true, predicate: ["translationKeyTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemSubtitleLinesChildTemplate", first: true, predicate: ["gridItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemSubtitleLinesChildTemplate", first: true, predicate: ["listItemSubtitleLinesTemplate"], descendants: true, isSignal: true }, { propertyName: "gridItemChildTemplate", first: true, predicate: ["gridItemTemplate"], descendants: true, isSignal: true }, { propertyName: "listItemChildTemplate", first: true, predicate: ["listItemTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableCellChildTemplate", first: true, predicate: ["relativeDateTableCellTemplate"], descendants: true, isSignal: true }, { propertyName: "listValueChildTemplate", first: true, predicate: ["listValueTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyListValueChildTemplate", first: true, predicate: ["translationKeyListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "numberListValueChildTemplate", first: true, predicate: ["numberListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateListValueChildTemplate", first: true, predicate: ["relativeDateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "stringListValueChildTemplate", first: true, predicate: ["stringListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "dateListValueChildTemplate", first: true, predicate: ["dateListValueTemplate"], descendants: true, isSignal: true }, { propertyName: "tableFilterCellChildTemplate", first: true, predicate: ["tableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTableFilterCellChildTemplate", first: true, predicate: ["dateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "relativeDateTableFilterCellChildTemplate", first: true, predicate: ["relativeDateTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "translationKeyTableFilterCellChildTemplate", first: true, predicate: ["translationKeyTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "stringTableFilterCellChildTemplate", first: true, predicate: ["stringTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "numberTableFilterCellChildTemplate", first: true, predicate: ["numberTableFilterCellTemplate"], descendants: true, isSignal: true }, { propertyName: "columnHeaderChildTemplate", first: true, predicate: ["columnHeaderTemplate"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataListGridComponent", first: true, predicate: DataListGridComponent, descendants: true, isSignal: true }, { propertyName: "dataTableComponent", first: true, predicate: DataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (layout() !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name()\"\n    [data]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortField]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"listGridPaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n    [listItemTemplate]=\"listItem\"\n    [gridItemTemplate]=\"gridItem\"\n    [listValueTemplate]=\"listValue\"\n    [translationKeyListValueTemplate]=\"translationKeyListValue\"\n    [numberListValueTemplate]=\"numberListValue\"\n    [relativeDateListValueTemplate]=\"relativeDateListValue\"\n    [stringListValueTemplate]=\"stringListValue\"\n    [dateListValueTemplate]=\"dateListValue\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [parentTemplates]=\"templatesForChildren()\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLinesTemplate let-item>\n    @if (listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLinesTemplate let-item>\n    @if (gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemTemplate let-item>\n    @if (gridItem) {\n    <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItemTemplate let-item>\n    @if (listItem) {\n    <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (listValue) {\n    <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout() === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortColumn]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [stringCellTemplate]=\"stringTableCell\"\n    [numberCellTemplate]=\"numberTableCell\"\n    [dateCellTemplate]=\"dateTableCell\"\n    [relativeDateCellTemplate]=\"relativeDateTableCell\"\n    [cellTemplate]=\"tableCell\"\n    [translationKeyCellTemplate]=\"translationKeyTableCell\"\n    [filterCellTemplate]=\"tableFilterCell\"\n    [dateFilterCellTemplate]=\"dateTableFilterCell\"\n    [numberFilterCellTemplate]=\"numberTableFilterCell\"\n    [stringFilterCellTemplate]=\"stringTableFilterCell\"\n    [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n    [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n    [columnHeaderTemplate]=\"columnHeader\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    [parentTemplates]=\"templatesForChildren()\"\n    [allowSelectAll]=\"tableAllowSelectAll()\"\n    [selectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableCell) {\n    <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableFilterCell) {\n    <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #columnHeaderTemplate let-column=\"column\" let-labelTemplate=\"labelTemplate\" let-sortTemplate=\"sortTemplate\" let-filterTemplate=\"filterTemplate\">\n    @if (columnHeader) {\n    <ng-container\n      [ngTemplateOutlet]=\"columnHeader\"\n      [ngTemplateOutletContext]=\"{ column: column, labelTemplate: labelTemplate, sortTemplate: sortTemplate, filterTemplate: filterTemplate }\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataListGridComponent, selector: "ocx-data-list-grid", inputs: ["titleLineId", "subtitleLineIds", "clientSideSorting", "clientSideFiltering", "sortStates", "pageSize", "pageSizes", "emptyResultsMessage", "fallbackImage", "layout", "viewPermission", "editPermission", "deletePermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "viewMenuItemKey", "editMenuItemKey", "deleteMenuItemKey", "paginator", "page", "columns", "name", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "data", "filters", "sortDirection", "sortField", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "listItemTemplate", "gridItemTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "additionalActions", "parentTemplates"], outputs: ["pageSizeChange", "pageChange", "nameChange", "viewItem", "editItem", "deleteItem", "pageChanged", "pageSizeChanged", "componentStateChanged", "parentTemplatesChange"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout() !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name()\"\n    [data]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortField]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"listGridPaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n    [listItemTemplate]=\"listItem\"\n    [gridItemTemplate]=\"gridItem\"\n    [listValueTemplate]=\"listValue\"\n    [translationKeyListValueTemplate]=\"translationKeyListValue\"\n    [numberListValueTemplate]=\"numberListValue\"\n    [relativeDateListValueTemplate]=\"relativeDateListValue\"\n    [stringListValueTemplate]=\"stringListValue\"\n    [dateListValueTemplate]=\"dateListValue\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [parentTemplates]=\"templatesForChildren()\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLinesTemplate let-item>\n    @if (listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLinesTemplate let-item>\n    @if (gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemTemplate let-item>\n    @if (gridItem) {\n    <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItemTemplate let-item>\n    @if (listItem) {\n    <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (listValue) {\n    <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout() === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortColumn]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [stringCellTemplate]=\"stringTableCell\"\n    [numberCellTemplate]=\"numberTableCell\"\n    [dateCellTemplate]=\"dateTableCell\"\n    [relativeDateCellTemplate]=\"relativeDateTableCell\"\n    [cellTemplate]=\"tableCell\"\n    [translationKeyCellTemplate]=\"translationKeyTableCell\"\n    [filterCellTemplate]=\"tableFilterCell\"\n    [dateFilterCellTemplate]=\"dateTableFilterCell\"\n    [numberFilterCellTemplate]=\"numberTableFilterCell\"\n    [stringFilterCellTemplate]=\"stringTableFilterCell\"\n    [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n    [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    [parentTemplates]=\"templatesForChildren()\"\n    [allowSelectAll]=\"tableAllowSelectAll()\"\n    [selectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableCell) {\n    <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableFilterCell) {\n    <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n" }]
+            args: [{ standalone: false, selector: 'ocx-data-view', providers: [{ provide: 'DataViewComponent', useExisting: DataViewComponent }], template: "@if (layout() !== 'table') {\n<div>\n  <ocx-data-list-grid\n    #ocxdatalistgrid\n    [name]=\"name()\"\n    [data]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortField]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"true\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"listGridPaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataListGridComponentState$.next($event)\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [gridItemSubtitleLinesTemplate]=\"gridItemSubtitleLines\"\n    [listItemSubtitleLinesTemplate]=\"listItemSubtitleLines\"\n    [listItemTemplate]=\"listItem\"\n    [gridItemTemplate]=\"gridItem\"\n    [listValueTemplate]=\"listValue\"\n    [translationKeyListValueTemplate]=\"translationKeyListValue\"\n    [numberListValueTemplate]=\"numberListValue\"\n    [relativeDateListValueTemplate]=\"relativeDateListValue\"\n    [stringListValueTemplate]=\"stringListValue\"\n    [dateListValueTemplate]=\"dateListValue\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [parentTemplates]=\"templatesForChildren()\"\n  >\n  </ocx-data-list-grid>\n  <ng-template #listItemSubtitleLinesTemplate let-item>\n    @if (listItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"listItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemSubtitleLinesTemplate let-item>\n    @if (gridItemSubtitleLines) {\n    <ng-container [ngTemplateOutlet]=\"gridItemSubtitleLines\" [ngTemplateOutletContext]=\"{$implicit:item}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #gridItemTemplate let-item>\n    @if (gridItem) {\n    <ng-container [ngTemplateOutlet]=\"gridItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listItemTemplate let-item>\n    @if (listItem) {\n    <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"> </ng-container>\n    }</ng-template\n  >\n  <ng-template #listValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (listValue) {\n    <ng-container [ngTemplateOutlet]=\"listValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringListValue) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringListValue\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateListValueTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateListValue) {\n    <ng-container [ngTemplateOutlet]=\"dateListValue\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n</div>\n} @if (layout() === 'table') {\n<div>\n  <ocx-data-table\n    #ocxdatatable\n    [rows]=\"data()\"\n    [columns]=\"columns()\"\n    [filters]=\"filters()\"\n    [sortDirection]=\"sortDirection()\"\n    [sortColumn]=\"sortField()\"\n    [sortStates]=\"sortStates()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [paginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    (componentStateChanged)=\"dataTableComponentState$.next($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [stringCellTemplate]=\"stringTableCell\"\n    [numberCellTemplate]=\"numberTableCell\"\n    [dateCellTemplate]=\"dateTableCell\"\n    [relativeDateCellTemplate]=\"relativeDateTableCell\"\n    [cellTemplate]=\"tableCell\"\n    [translationKeyCellTemplate]=\"translationKeyTableCell\"\n    [filterCellTemplate]=\"tableFilterCell\"\n    [dateFilterCellTemplate]=\"dateTableFilterCell\"\n    [numberFilterCellTemplate]=\"numberTableFilterCell\"\n    [stringFilterCellTemplate]=\"stringTableFilterCell\"\n    [relativeDateFilterCellTemplate]=\"relativeDateTableFilterCell\"\n    [translationKeyFilterCellTemplate]=\"translationKeyTableFilterCell\"\n    [columnHeaderTemplate]=\"columnHeader\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    [parentTemplates]=\"templatesForChildren()\"\n    [allowSelectAll]=\"tableAllowSelectAll()\"\n    [selectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-table>\n  <ng-template #stringCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #numberCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #dateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableCell) {\n    <ng-container [ngTemplateOutlet]=\"dateTableCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #relativeDateCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #cellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableCell) {\n    <ng-container [ngTemplateOutlet]=\"tableCell\" [ngTemplateOutletContext]=\"{rowObject: rowObject, column:column}\">\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #translationKeyCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #stringFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (stringTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"stringTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }</ng-template\n  >\n  <ng-template #filterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (tableFilterCell) {\n    <ng-container [ngTemplateOutlet]=\"tableFilterCell\" [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\">\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #dateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (dateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"dateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #numberFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (numberTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"numberTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #relativeDateFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (relativeDateTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"relativeDateTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #translationKeyFilterCellTemplate let-rowObject=\"rowObject\" let-column=\"column\">\n    @if (translationKeyTableFilterCell) {\n    <ng-container\n      [ngTemplateOutlet]=\"translationKeyTableFilterCell\"\n      [ngTemplateOutletContext]=\"{rowObject:rowObject, column:column}\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n  <ng-template #columnHeaderTemplate let-column=\"column\" let-labelTemplate=\"labelTemplate\" let-sortTemplate=\"sortTemplate\" let-filterTemplate=\"filterTemplate\">\n    @if (columnHeader) {\n    <ng-container\n      [ngTemplateOutlet]=\"columnHeader\"\n      [ngTemplateOutletContext]=\"{ column: column, labelTemplate: labelTemplate, sortTemplate: sortTemplate, filterTemplate: filterTemplate }\"\n    >\n    </ng-container>\n    }\n  </ng-template>\n</div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { dataListGridComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataListGridComponent), { isSignal: true }] }], dataTableComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataTableComponent), { isSignal: true }] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], tableSelectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSelectionEnabledField", required: false }] }], tableAllowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAllowSelectAll", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], titleLineId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLineId", required: false }] }], subtitleLineIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleLineIds", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], fallbackImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackImage", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], listGridPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "listGridPaginator", required: false }] }, { type: i0.Output, args: ["listGridPaginatorChange"] }], tablePaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginator", required: false }] }, { type: i0.Output, args: ["tablePaginatorChange"] }], paginator: [{
                 type: Input
-            }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], stringTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringTableCellTemplate", required: false }] }], stringTableCellChildTemplate: [{ type: i0.ContentChild, args: ['stringTableCellTemplate', { isSignal: true }] }], numberTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberTableCellTemplate", required: false }] }], numberTableCellChildTemplate: [{ type: i0.ContentChild, args: ['numberTableCellTemplate', { isSignal: true }] }], dateTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTableCellTemplate", required: false }] }], dateTableCellChildTemplate: [{ type: i0.ContentChild, args: ['dateTableCellTemplate', { isSignal: true }] }], tableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCellTemplate", required: false }] }], tableCellChildTemplate: [{ type: i0.ContentChild, args: ['tableCellTemplate', { isSignal: true }] }], translationKeyTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyTableCellTemplate", required: false }] }], translationKeyTableCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyTableCellTemplate', { isSignal: true }] }], gridItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemSubtitleLinesTemplate", required: false }] }], gridItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['gridItemSubtitleLinesTemplate', { isSignal: true }] }], listItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemSubtitleLinesTemplate", required: false }] }], listItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['listItemSubtitleLinesTemplate', { isSignal: true }] }], gridItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemTemplate", required: false }] }], gridItemChildTemplate: [{ type: i0.ContentChild, args: ['gridItemTemplate', { isSignal: true }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], listItemChildTemplate: [{ type: i0.ContentChild, args: ['listItemTemplate', { isSignal: true }] }], relativeDateTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateTableCellTemplate", required: false }] }], relativeDateTableCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateTableCellTemplate', { isSignal: true }] }], listValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listValueTemplate", required: false }] }], listValueChildTemplate: [{ type: i0.ContentChild, args: ['listValueTemplate', { isSignal: true }] }], translationKeyListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyListValueTemplate", required: false }] }], translationKeyListValueChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyListValueTemplate', { isSignal: true }] }], numberListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberListValueTemplate", required: false }] }], numberListValueChildTemplate: [{ type: i0.ContentChild, args: ['numberListValueTemplate', { isSignal: true }] }], relativeDateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateListValueTemplate", required: false }] }], relativeDateListValueChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateListValueTemplate', { isSignal: true }] }], stringListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringListValueTemplate", required: false }] }], stringListValueChildTemplate: [{ type: i0.ContentChild, args: ['stringListValueTemplate', { isSignal: true }] }], dateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateListValueTemplate", required: false }] }], dateListValueChildTemplate: [{ type: i0.ContentChild, args: ['dateListValueTemplate', { isSignal: true }] }], tableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableFilterCellTemplate", required: false }] }], tableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['tableFilterCellTemplate', { isSignal: true }] }], dateTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTableFilterCellTemplate", required: false }] }], dateTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateTableFilterCellTemplate', { isSignal: true }] }], relativeDateTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateTableFilterCellTemplate", required: false }] }], relativeDateTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateTableFilterCellTemplate', { isSignal: true }] }], translationKeyTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyTableFilterCellTemplate", required: false }] }], translationKeyTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyTableFilterCellTemplate', { isSignal: true }] }], stringTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringTableFilterCellTemplate", required: false }] }], stringTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringTableFilterCellTemplate', { isSignal: true }] }], numberTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberTableFilterCellTemplate", required: false }] }], numberTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberTableFilterCellTemplate', { isSignal: true }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], deleteItem: [{
+            }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], stringTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringTableCellTemplate", required: false }] }], stringTableCellChildTemplate: [{ type: i0.ContentChild, args: ['stringTableCellTemplate', { isSignal: true }] }], numberTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberTableCellTemplate", required: false }] }], numberTableCellChildTemplate: [{ type: i0.ContentChild, args: ['numberTableCellTemplate', { isSignal: true }] }], dateTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTableCellTemplate", required: false }] }], dateTableCellChildTemplate: [{ type: i0.ContentChild, args: ['dateTableCellTemplate', { isSignal: true }] }], tableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCellTemplate", required: false }] }], tableCellChildTemplate: [{ type: i0.ContentChild, args: ['tableCellTemplate', { isSignal: true }] }], translationKeyTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyTableCellTemplate", required: false }] }], translationKeyTableCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyTableCellTemplate', { isSignal: true }] }], gridItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemSubtitleLinesTemplate", required: false }] }], gridItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['gridItemSubtitleLinesTemplate', { isSignal: true }] }], listItemSubtitleLinesTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemSubtitleLinesTemplate", required: false }] }], listItemSubtitleLinesChildTemplate: [{ type: i0.ContentChild, args: ['listItemSubtitleLinesTemplate', { isSignal: true }] }], gridItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridItemTemplate", required: false }] }], gridItemChildTemplate: [{ type: i0.ContentChild, args: ['gridItemTemplate', { isSignal: true }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], listItemChildTemplate: [{ type: i0.ContentChild, args: ['listItemTemplate', { isSignal: true }] }], relativeDateTableCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateTableCellTemplate", required: false }] }], relativeDateTableCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateTableCellTemplate', { isSignal: true }] }], listValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listValueTemplate", required: false }] }], listValueChildTemplate: [{ type: i0.ContentChild, args: ['listValueTemplate', { isSignal: true }] }], translationKeyListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyListValueTemplate", required: false }] }], translationKeyListValueChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyListValueTemplate', { isSignal: true }] }], numberListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberListValueTemplate", required: false }] }], numberListValueChildTemplate: [{ type: i0.ContentChild, args: ['numberListValueTemplate', { isSignal: true }] }], relativeDateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateListValueTemplate", required: false }] }], relativeDateListValueChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateListValueTemplate', { isSignal: true }] }], stringListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringListValueTemplate", required: false }] }], stringListValueChildTemplate: [{ type: i0.ContentChild, args: ['stringListValueTemplate', { isSignal: true }] }], dateListValueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateListValueTemplate", required: false }] }], dateListValueChildTemplate: [{ type: i0.ContentChild, args: ['dateListValueTemplate', { isSignal: true }] }], tableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableFilterCellTemplate", required: false }] }], tableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['tableFilterCellTemplate', { isSignal: true }] }], dateTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTableFilterCellTemplate", required: false }] }], dateTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['dateTableFilterCellTemplate', { isSignal: true }] }], relativeDateTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "relativeDateTableFilterCellTemplate", required: false }] }], relativeDateTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['relativeDateTableFilterCellTemplate', { isSignal: true }] }], translationKeyTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationKeyTableFilterCellTemplate", required: false }] }], translationKeyTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['translationKeyTableFilterCellTemplate', { isSignal: true }] }], stringTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stringTableFilterCellTemplate", required: false }] }], stringTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['stringTableFilterCellTemplate', { isSignal: true }] }], numberTableFilterCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberTableFilterCellTemplate", required: false }] }], numberTableFilterCellChildTemplate: [{ type: i0.ContentChild, args: ['numberTableFilterCellTemplate', { isSignal: true }] }], columnHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderTemplate", required: false }] }], columnHeaderChildTemplate: [{ type: i0.ContentChild, args: ['columnHeaderTemplate', { isSignal: true }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], deleteItem: [{
                 type: Output
             }], viewItem: [{
                 type: Output
@@ -3767,6 +3791,8 @@ function limit(columnFilterData, amount, options) {
 class FilterViewComponent {
     constructor() {
+        this.translateService = inject(TranslateService);
+        this.liveAnnouncer = inject(LiveAnnouncer);
         this.ColumnType = ColumnType;
         this.FilterType = FilterType;
         this.filters = model([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
@@ -3892,6 +3918,7 @@ class FilterViewComponent {
             const filters = this.filters();
             this.filtered.emit(filters);
             this.componentStateChanged.emit({ filters });
+            this.annouceFilterCount();
         });
     }
     getTemplate(column, templateNames, templates, idSuffix) {
@@ -3951,12 +3978,24 @@ class FilterViewComponent {
             [row['valueColumnId']]: row['value'],
         };
     }
+    annouceFilterCount() {
+        const currentCount = this.filters()?.length ?? 0;
+        if (currentCount === 0) {
+            firstValueFrom(this.translateService.get('OCX_FILTER_VIEW.NO_FILTERS')).then((translatedText) => {
+                this.liveAnnouncer.announce(translatedText);
+            });
+            return;
+        }
+        firstValueFrom(this.translateService.get('OCX_FILTER_VIEW.SELECTED_FILTERS_COUNT', { results: currentCount })).then((translatedText) => {
+            this.liveAnnouncer.announce(translatedText);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, chipStyleClass: { classPropertyName: "chipStyleClass", publicName: "chipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", columns: "columnsChange", filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true, isSignal: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode() === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n    <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n      @if (filterViewChipContent()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewChipContent()\"\n        [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n      >\n      </ng-container>\n      } @else {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      }\n    </p-chip>\n    } } @if (selectedFilters.length < filters.length) {\n    <p-chip\n      #showMoreChip\n      id=\"ocxFilterViewShowMore\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"showPanel($event)\"\n      class=\"cursor-pointer filter-view-focusable\"\n      (keydown.enter)=\"showPanel($event)\"\n      (keydown.space)=\"showPanel($event)\"\n    >\n      @if (filterViewShowMoreChip()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\n  <ng-template #noChipsContent>\n    <p-button\n      tabindex=\"0\"\n      #manageButton\n      id=\"ocxFilterViewManage\"\n      (onClick)=\"showPanel($event)\"\n      [disabled]=\"filters.length === 0\"\n      icon=\"pi pi-sliders-h\"\n      label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n      [ocxTooltip]=\"\n        filters.length === 0\n          ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n          : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n      \"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      aria-describedby=\"ocx-manage-filters-tooltip\"\n      [tooltipOptions]=\"{ id: 'ocx-manage-filters-tooltip' }\"\n      [badge]=\"filters.length.toString()\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n  </ng-template>\n  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n      <ng-template pTemplate=\"content\">\n        <div pFocusTrap>\n          <div class=\"flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n            <div>\n              <p-button\n                pAutoFocus\n                [autofocus]=\"true\"\n                id=\"ocxFilterViewOverlayReset\"\n                (onClick)=\"onResetFilersClick()\"\n                icon=\"pi pi-eraser\"\n                ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                tooltipPosition=\"top\"\n                tooltipEvent=\"hover\"\n                [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n              ></p-button>\n            </div>\n          </div>\n          <ocx-data-table\n            id=\"ocxFilterViewDataTable\"\n            [rows]=\"columnFilterDataRows()\"\n            [columns]=\"columnFilterTableColumns()\"\n            [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n            [paginator]=\"false\"\n            [tableStyle]=\"tableStyle()\"\n          >\n            <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <ng-container\n                [ngTemplateOutlet]=\"templates[column.id]\"\n                [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n              >\n              </ng-container>\n            </ng-template>\n            <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\n            </ng-template>\n            <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <div>\n                <button\n                  pButton\n                  class=\"p-button-rounded p-button-danger p-button-text\"\n                  title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                  [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"onFilterDelete(rowObject)\"\n                ></button>\n              </div>\n            </ng-template>\n          </ocx-data-table>\n        </div>\n      </ng-template>\n    </p-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterViewComponent, isStandalone: false, selector: "ocx-filter-view", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, chipStyleClass: { classPropertyName: "chipStyleClass", publicName: "chipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", columns: "columnsChange", filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true, isSignal: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode() === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n    <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n      @if (filterViewChipContent()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewChipContent()\"\n        [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n      >\n      </ng-container>\n      } @else {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      }\n    </p-chip>\n    } } @if (selectedFilters.length < filters.length) {\n    <p-chip\n      #showMoreChip\n      id=\"ocxFilterViewShowMore\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"showPanel($event)\"\n      class=\"cursor-pointer filter-view-focusable\"\n      (keydown.enter)=\"showPanel($event)\"\n      (keydown.space)=\"showPanel($event)\"\n    >\n      @if (filterViewShowMoreChip()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\n  <ng-template #noChipsContent>\n    <p-button\n      tabindex=\"0\"\n      #manageButton\n      id=\"ocxFilterViewManage\"\n      (onClick)=\"showPanel($event)\"\n      [disabled]=\"filters.length === 0\"\n      icon=\"pi pi-sliders-h\"\n      label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n      [ocxTooltip]=\"\n        filters.length === 0\n          ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n          : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n      \"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [badge]=\"filters.length.toString()\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n  </ng-template>\n  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n      <ng-template pTemplate=\"content\">\n        <div pFocusTrap>\n          <div class=\"flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n            <div>\n              <p-button\n                pAutoFocus\n                [autofocus]=\"true\"\n                id=\"ocxFilterViewOverlayReset\"\n                (onClick)=\"onResetFilersClick()\"\n                icon=\"pi pi-eraser\"\n                ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                tooltipPosition=\"top\"\n                tooltipEvent=\"hover\"\n                [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n              ></p-button>\n            </div>\n          </div>\n          <ocx-data-table\n            id=\"ocxFilterViewDataTable\"\n            [rows]=\"columnFilterDataRows()\"\n            [columns]=\"columnFilterTableColumns()\"\n            [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n            [paginator]=\"false\"\n            [tableStyle]=\"tableStyle()\"\n          >\n            <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <ng-container\n                [ngTemplateOutlet]=\"templates[column.id]\"\n                [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n              >\n              </ng-container>\n            </ng-template>\n            <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\n            </ng-template>\n            <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <div>\n                <button\n                  pButton\n                  class=\"p-button-rounded p-button-danger p-button-text\"\n                  title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                  [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"onFilterDelete(rowObject)\"\n                ></button>\n              </div>\n            </ng-template>\n          </ocx-data-table>\n        </div>\n      </ng-template>\n    </p-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "captionTemplate", "stringCellTemplate", "numberCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["rowsChange", "selectedRowsChange", "filtersChange", "sortDirectionChange", "sortColumnChange", "columnsChange", "sortStatesChange", "pageSizesChange", "pageSizeChange", "nameChange", "pageChange", "additionalActionsChange", "expandedRowsChange", "filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed", "parentTemplatesChange"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode() === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n    <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n      @if (filterViewChipContent()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewChipContent()\"\n        [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n      >\n      </ng-container>\n      } @else {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      }\n    </p-chip>\n    } } @if (selectedFilters.length < filters.length) {\n    <p-chip\n      #showMoreChip\n      id=\"ocxFilterViewShowMore\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"showPanel($event)\"\n      class=\"cursor-pointer filter-view-focusable\"\n      (keydown.enter)=\"showPanel($event)\"\n      (keydown.space)=\"showPanel($event)\"\n    >\n      @if (filterViewShowMoreChip()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\n  <ng-template #noChipsContent>\n    <p-button\n      tabindex=\"0\"\n      #manageButton\n      id=\"ocxFilterViewManage\"\n      (onClick)=\"showPanel($event)\"\n      [disabled]=\"filters.length === 0\"\n      icon=\"pi pi-sliders-h\"\n      label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n      [ocxTooltip]=\"\n        filters.length === 0\n          ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n          : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n      \"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      aria-describedby=\"ocx-manage-filters-tooltip\"\n      [tooltipOptions]=\"{ id: 'ocx-manage-filters-tooltip' }\"\n      [badge]=\"filters.length.toString()\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n  </ng-template>\n  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n      <ng-template pTemplate=\"content\">\n        <div pFocusTrap>\n          <div class=\"flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n            <div>\n              <p-button\n                pAutoFocus\n                [autofocus]=\"true\"\n                id=\"ocxFilterViewOverlayReset\"\n                (onClick)=\"onResetFilersClick()\"\n                icon=\"pi pi-eraser\"\n                ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                tooltipPosition=\"top\"\n                tooltipEvent=\"hover\"\n                [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n              ></p-button>\n            </div>\n          </div>\n          <ocx-data-table\n            id=\"ocxFilterViewDataTable\"\n            [rows]=\"columnFilterDataRows()\"\n            [columns]=\"columnFilterTableColumns()\"\n            [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n            [paginator]=\"false\"\n            [tableStyle]=\"tableStyle()\"\n          >\n            <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <ng-container\n                [ngTemplateOutlet]=\"templates[column.id]\"\n                [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n              >\n              </ng-container>\n            </ng-template>\n            <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\n            </ng-template>\n            <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <div>\n                <button\n                  pButton\n                  class=\"p-button-rounded p-button-danger p-button-text\"\n                  title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                  [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"onFilterDelete(rowObject)\"\n                ></button>\n              </div>\n            </ng-template>\n          </ocx-data-table>\n        </div>\n      </ng-template>\n    </p-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
+            args: [{ standalone: false, selector: 'ocx-filter-view', template: "@if (columns(); as columns) { @if (filters(); as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode() === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips()(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    @if (filters.length <= 0) { @if (filterViewNoSelection()) {\n    <ng-container [ngTemplateOutlet]=\"filterViewNoSelection()\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass()\">\n      @if (filterViewChipContent()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewChipContent()\"\n        [ngTemplateOutletContext]=\"{\n                filter: filter,\n                column: column,\n                filterValueTemplates: templates,\n                truthyTemplate: truthyTemplate,\n                filterValueTemplate: chipTemplate\n              }\"\n      >\n      </ng-container>\n      } @else {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      }\n    </p-chip>\n    } } @if (selectedFilters.length < filters.length) {\n    <p-chip\n      #showMoreChip\n      id=\"ocxFilterViewShowMore\"\n      tabindex=\"0\"\n      role=\"button\"\n      (click)=\"showPanel($event)\"\n      class=\"cursor-pointer filter-view-focusable\"\n      (keydown.enter)=\"showPanel($event)\"\n      (keydown.space)=\"showPanel($event)\"\n    >\n      @if (filterViewShowMoreChip()) {\n      <ng-container\n        [ngTemplateOutlet]=\"filterViewShowMoreChip()\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\n  <ng-template #noChipsContent>\n    <p-button\n      tabindex=\"0\"\n      #manageButton\n      id=\"ocxFilterViewManage\"\n      (onClick)=\"showPanel($event)\"\n      [disabled]=\"filters.length === 0\"\n      icon=\"pi pi-sliders-h\"\n      label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n      [ocxTooltip]=\"\n        filters.length === 0\n          ? ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DISABLED_DETAIL' | translate)\n          : ('OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate)\n      \"\n      tooltipPosition=\"top\"\n      tooltipEvent=\"hover\"\n      [badge]=\"filters.length.toString()\"\n      [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n    ></p-button>\n    <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n  </ng-template>\n  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #op [style]=\"panelStyle()\" (onHide)=\"focusTrigger()\">\n      <ng-template pTemplate=\"content\">\n        <div pFocusTrap>\n          <div class=\"flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n            <div>\n              <p-button\n                pAutoFocus\n                [autofocus]=\"true\"\n                id=\"ocxFilterViewOverlayReset\"\n                (onClick)=\"onResetFilersClick()\"\n                icon=\"pi pi-eraser\"\n                ocxTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n                tooltipPosition=\"top\"\n                tooltipEvent=\"hover\"\n                [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n              ></p-button>\n            </div>\n          </div>\n          <ocx-data-table\n            id=\"ocxFilterViewDataTable\"\n            [rows]=\"columnFilterDataRows()\"\n            [columns]=\"columnFilterTableColumns()\"\n            [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n            [paginator]=\"false\"\n            [tableStyle]=\"tableStyle()\"\n          >\n            <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <ng-container\n                [ngTemplateOutlet]=\"templates[column.id]\"\n                [ngTemplateOutletContext]=\"{\n            rowObject: rowObject,\n            column: column,\n          }\"\n              >\n              </ng-container>\n            </ng-template>\n            <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\n            </ng-template>\n            <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n              <div>\n                <button\n                  pButton\n                  class=\"p-button-rounded p-button-danger p-button-text\"\n                  title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n                  [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n                  icon=\"pi pi-trash\"\n                  (click)=\"onFilterDelete(rowObject)\"\n                ></button>\n              </div>\n            </ng-template>\n          </ocx-data-table>\n        </div>\n      </ng-template>\n    </p-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], selectDisplayedChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDisplayedChips", required: false }] }], chipStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipStyleClass", required: false }] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], componentStateChanged: [{ type: i0.Output, args: ["componentStateChanged"] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Popover), { isSignal: true }] }], manageButton: [{ type: i0.ViewChild, args: ['manageButton', { isSignal: true }] }], defaultTemplates: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }] } });
 class GroupByCountDiagramComponent {
@@ -4386,6 +4425,17 @@ class InteractiveDataViewComponent {
             const childNumberTableFilterCell = this.childNumberTableFilterCell();
             return primeNgNumberTableFilterCell ?? childNumberTableFilterCell ?? undefined;
         }, ...(ngDevMode ? [{ debugName: "_numberTableFilterCell" }] : []));
+        this.childColumnHeader = contentChild('columnHeader', ...(ngDevMode ? [{ debugName: "childColumnHeader" }] : []));
+        this.primeNgColumnHeader = computed(() => {
+            const templates = this.templates();
+            const columnHeaderTemplate = templates.find((t) => t.getType() === 'columnHeader');
+            return columnHeaderTemplate?.template ?? undefined;
+        }, ...(ngDevMode ? [{ debugName: "primeNgColumnHeader" }] : []));
+        this._columnHeader = computed(() => {
+            const primeNgColumnHeader = this.primeNgColumnHeader();
+            const childColumnHeader = this.childColumnHeader();
+            return primeNgColumnHeader ?? childColumnHeader ?? undefined;
+        }, ...(ngDevMode ? [{ debugName: "_columnHeader" }] : []));
         this.templates = contentChildren(PrimeTemplate, ...(ngDevMode ? [{ debugName: "templates" }] : []));
         this.filtered = output();
         this.sorted = output();
@@ -4615,14 +4665,14 @@ class InteractiveDataViewComponent {
         this.pageSize.set(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InteractiveDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, groupSelectionNoGroupSelectedKey: { classPropertyName: "groupSelectionNoGroupSelectedKey", publicName: "groupSelectionNoGroupSelectedKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, disableFilterView: { classPropertyName: "disableFilterView", publicName: "disableFilterView", isSignal: true, isRequired: false, transformFunction: null }, filterViewDisplayMode: { classPropertyName: "filterViewDisplayMode", publicName: "filterViewDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, filterViewChipStyleClass: { classPropertyName: "filterViewChipStyleClass", publicName: "filterViewChipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, filterViewTableStyle: { classPropertyName: "filterViewTableStyle", publicName: "filterViewTableStyle", isSignal: true, isRequired: false, transformFunction: null }, filterViewPanelStyle: { classPropertyName: "filterViewPanelStyle", publicName: "filterViewPanelStyle", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnKeys: { classPropertyName: "displayedColumnKeys", publicName: "displayedColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, headerStyleClass: { classPropertyName: "headerStyleClass", publicName: "headerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortDirection: "sortDirectionChange", sortField: "sortFieldChange", pageSize: "pageSizeChange", layout: "layoutChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", displayedColumnKeys: "displayedColumnKeysChange", frozenActionColumn: "frozenActionColumnChange", actionColumnPosition: "actionColumnPositionChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged", groupSelectionChangedSlotEmitter: "groupSelectionChangedSlotEmitter" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "childTableCell", first: true, predicate: ["tableCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableCell", first: true, predicate: ["dateTableCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childListItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childStringTableCell", first: true, predicate: ["stringTableCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableCell", first: true, predicate: ["numberTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItem", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "childListItem", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "childTopCenter", first: true, predicate: ["topCenter"], descendants: true, isSignal: true }, { propertyName: "childListValue", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "childNumberListValue", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "childStringListValue", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "childDateListValue", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "childTableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childStringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataViewComponent", first: true, predicate: DataViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts()\"\n        [layout]=\"layout()\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView()) {\n      <ocx-filter-view\n        [filters]=\"filters()\"\n        [columns]=\"columns()\"\n        [templates]=\"templates()\"\n        [displayMode]=\"filterViewDisplayMode()\"\n        [selectDisplayedChips]=\"selectDisplayedChips()\"\n        [chipStyleClass]=\"filterViewChipStyleClass()\"\n        [tableStyle]=\"filterViewTableStyle()\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (_topCenter(); as topCenterTemplate) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n    </div>\n    } @if (layout() !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection()\"\n        [sortField]=\"sortField()\"\n        [columns]=\"displayedColumns()\"\n        [sortStates]=\"sortStates()\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout() !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined() ?? true) {\n      <ocx-slot\n        [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n        [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout() === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns()\"\n        [displayedColumns]=\"displayedColumns()\"\n        [customGroupKey]=\"customGroupKey()\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn()\"\n        [actionColumnPosition]=\"actionColumnPosition()\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"displayedColumns()\"\n    [sortStates]=\"sortStates()\"\n    [sortField]=\"sortField()\"\n    [filters]=\"filters()\"\n    [data]=\"data()\"\n    [sortDirection]=\"sortDirection()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [listGridPaginator]=\"listGridPaginator()\"\n    [tablePaginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [stringTableCellTemplate]=\"_stringTableCell()\"\n    [numberTableCellTemplate]=\"_numberTableCell()\"\n    [dateTableCellTemplate]=\"_dateTableCell()\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n    [tableCellTemplate]=\"_tableCell()\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n    [listItemTemplate]=\"_listItem()\"\n    [listValueTemplate]=\"_listValue()\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n    [numberListValueTemplate]=\"_numberListValue()\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n    [stringListValueTemplate]=\"_stringListValue()\"\n    [dateListValueTemplate]=\"_dateListValue()\"\n    [gridItemTemplate]=\"_gridItem()\"\n    [tableFilterCellTemplate]=\"_tableFilterCell()\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates()\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout() === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n    [columns]=\"columns()\"\n    [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n    [customGroupKey]=\"customGroupKey()\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["selectedGroupKeyChange", "groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["displayedColumnsChange", "columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["layoutChange", "dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortDirectionChange", "sortFieldChange", "sortChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "additionalActions", "parentTemplates"], outputs: ["filtersChange", "sortFieldChange", "sortDirectionChange", "listGridPaginatorChange", "tablePaginatorChange", "pageChange", "expandedRowsChange", "pageSizeChange", "filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtersChange", "columnsChange", "filtered", "componentStateChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InteractiveDataViewComponent, isStandalone: false, selector: "ocx-interactive-data-view", inputs: { searchConfigPermission: { classPropertyName: "searchConfigPermission", publicName: "searchConfigPermission", isSignal: true, isRequired: false, transformFunction: null }, deletePermission: { classPropertyName: "deletePermission", publicName: "deletePermission", isSignal: true, isRequired: false, transformFunction: null }, editPermission: { classPropertyName: "editPermission", publicName: "editPermission", isSignal: true, isRequired: false, transformFunction: null }, viewPermission: { classPropertyName: "viewPermission", publicName: "viewPermission", isSignal: true, isRequired: false, transformFunction: null }, deleteActionVisibleField: { classPropertyName: "deleteActionVisibleField", publicName: "deleteActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, deleteActionEnabledField: { classPropertyName: "deleteActionEnabledField", publicName: "deleteActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, viewActionVisibleField: { classPropertyName: "viewActionVisibleField", publicName: "viewActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, viewActionEnabledField: { classPropertyName: "viewActionEnabledField", publicName: "viewActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, editActionVisibleField: { classPropertyName: "editActionVisibleField", publicName: "editActionVisibleField", isSignal: true, isRequired: false, transformFunction: null }, editActionEnabledField: { classPropertyName: "editActionEnabledField", publicName: "editActionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableSelectionEnabledField: { classPropertyName: "tableSelectionEnabledField", publicName: "tableSelectionEnabledField", isSignal: true, isRequired: false, transformFunction: null }, tableAllowSelectAll: { classPropertyName: "tableAllowSelectAll", publicName: "tableAllowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleLineId: { classPropertyName: "titleLineId", publicName: "titleLineId", isSignal: true, isRequired: false, transformFunction: null }, subtitleLineIds: { classPropertyName: "subtitleLineIds", publicName: "subtitleLineIds", isSignal: true, isRequired: false, transformFunction: null }, supportedViewLayouts: { classPropertyName: "supportedViewLayouts", publicName: "supportedViewLayouts", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyResultsMessage: { classPropertyName: "emptyResultsMessage", publicName: "emptyResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, clientSideSorting: { classPropertyName: "clientSideSorting", publicName: "clientSideSorting", isSignal: true, isRequired: false, transformFunction: null }, clientSideFiltering: { classPropertyName: "clientSideFiltering", publicName: "clientSideFiltering", isSignal: true, isRequired: false, transformFunction: null }, fallbackImage: { classPropertyName: "fallbackImage", publicName: "fallbackImage", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortStates: { classPropertyName: "sortStates", publicName: "sortStates", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalRecordsOnServer: { classPropertyName: "totalRecordsOnServer", publicName: "totalRecordsOnServer", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, defaultGroupKey: { classPropertyName: "defaultGroupKey", publicName: "defaultGroupKey", isSignal: true, isRequired: false, transformFunction: null }, customGroupKey: { classPropertyName: "customGroupKey", publicName: "customGroupKey", isSignal: true, isRequired: false, transformFunction: null }, groupSelectionNoGroupSelectedKey: { classPropertyName: "groupSelectionNoGroupSelectedKey", publicName: "groupSelectionNoGroupSelectedKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingKey: { classPropertyName: "currentPageShowingKey", publicName: "currentPageShowingKey", isSignal: true, isRequired: false, transformFunction: null }, currentPageShowingWithTotalOnServerKey: { classPropertyName: "currentPageShowingWithTotalOnServerKey", publicName: "currentPageShowingWithTotalOnServerKey", isSignal: true, isRequired: false, transformFunction: null }, additionalActions: { classPropertyName: "additionalActions", publicName: "additionalActions", isSignal: true, isRequired: false, transformFunction: null }, listGridPaginator: { classPropertyName: "listGridPaginator", publicName: "listGridPaginator", isSignal: true, isRequired: false, transformFunction: null }, tablePaginator: { classPropertyName: "tablePaginator", publicName: "tablePaginator", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, disableFilterView: { classPropertyName: "disableFilterView", publicName: "disableFilterView", isSignal: true, isRequired: false, transformFunction: null }, filterViewDisplayMode: { classPropertyName: "filterViewDisplayMode", publicName: "filterViewDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, filterViewChipStyleClass: { classPropertyName: "filterViewChipStyleClass", publicName: "filterViewChipStyleClass", isSignal: true, isRequired: false, transformFunction: null }, filterViewTableStyle: { classPropertyName: "filterViewTableStyle", publicName: "filterViewTableStyle", isSignal: true, isRequired: false, transformFunction: null }, filterViewPanelStyle: { classPropertyName: "filterViewPanelStyle", publicName: "filterViewPanelStyle", isSignal: true, isRequired: false, transformFunction: null }, selectDisplayedChips: { classPropertyName: "selectDisplayedChips", publicName: "selectDisplayedChips", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnKeys: { classPropertyName: "displayedColumnKeys", publicName: "displayedColumnKeys", isSignal: true, isRequired: false, transformFunction: null }, frozenActionColumn: { classPropertyName: "frozenActionColumn", publicName: "frozenActionColumn", isSignal: true, isRequired: false, transformFunction: null }, actionColumnPosition: { classPropertyName: "actionColumnPosition", publicName: "actionColumnPosition", isSignal: true, isRequired: false, transformFunction: null }, headerStyleClass: { classPropertyName: "headerStyleClass", publicName: "headerStyleClass", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, frozenExpandColumn: { classPropertyName: "frozenExpandColumn", publicName: "frozenExpandColumn", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", sortDirection: "sortDirectionChange", sortField: "sortFieldChange", pageSize: "pageSizeChange", layout: "layoutChange", listGridPaginator: "listGridPaginatorChange", tablePaginator: "tablePaginatorChange", page: "pageChange", displayedColumnKeys: "displayedColumnKeysChange", frozenActionColumn: "frozenActionColumnChange", actionColumnPosition: "actionColumnPositionChange", expandedRows: "expandedRowsChange", filtered: "filtered", sorted: "sorted", deleteItem: "deleteItem", viewItem: "viewItem", editItem: "editItem", selectionChanged: "selectionChanged", dataViewLayoutChange: "dataViewLayoutChange", displayedColumnKeysChange: "displayedColumnKeysChange", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", rowExpanded: "rowExpanded", rowCollapsed: "rowCollapsed", componentStateChanged: "componentStateChanged", groupSelectionChangedSlotEmitter: "groupSelectionChangedSlotEmitter" }, providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], queries: [{ propertyName: "childTableCell", first: true, predicate: ["tableCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableCell", first: true, predicate: ["dateTableCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableCell", first: true, predicate: ["relativeDateTableCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableCell", first: true, predicate: ["translationKeyTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItemSubtitleLines", first: true, predicate: ["gridItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childListItemSubtitleLines", first: true, predicate: ["listItemSubtitleLines"], descendants: true, isSignal: true }, { propertyName: "childStringTableCell", first: true, predicate: ["stringTableCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableCell", first: true, predicate: ["numberTableCell"], descendants: true, isSignal: true }, { propertyName: "childGridItem", first: true, predicate: ["gridItem"], descendants: true, isSignal: true }, { propertyName: "childListItem", first: true, predicate: ["listItem"], descendants: true, isSignal: true }, { propertyName: "childTopCenter", first: true, predicate: ["topCenter"], descendants: true, isSignal: true }, { propertyName: "childListValue", first: true, predicate: ["listValue"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyListValue", first: true, predicate: ["translationKeyListValue"], descendants: true, isSignal: true }, { propertyName: "childNumberListValue", first: true, predicate: ["numberListValue"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateListValue", first: true, predicate: ["relativeDateListValue"], descendants: true, isSignal: true }, { propertyName: "childStringListValue", first: true, predicate: ["stringListValue"], descendants: true, isSignal: true }, { propertyName: "childDateListValue", first: true, predicate: ["dateListValue"], descendants: true, isSignal: true }, { propertyName: "childTableFilterCell", first: true, predicate: ["tableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childDateTableFilterCell", first: true, predicate: ["dateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childRelativeDateTableFilterCell", first: true, predicate: ["relativeDateTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childTranslationKeyTableFilterCell", first: true, predicate: ["translationKeyTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childStringTableFilterCell", first: true, predicate: ["stringTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childNumberTableFilterCell", first: true, predicate: ["numberTableFilterCell"], descendants: true, isSignal: true }, { propertyName: "childColumnHeader", first: true, predicate: ["columnHeader"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }], viewQueries: [{ propertyName: "dataViewComponent", first: true, predicate: DataViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts()\"\n        [layout]=\"layout()\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView()) {\n      <ocx-filter-view\n        [filters]=\"filters()\"\n        [columns]=\"columns()\"\n        [templates]=\"templates()\"\n        [displayMode]=\"filterViewDisplayMode()\"\n        [selectDisplayedChips]=\"selectDisplayedChips()\"\n        [chipStyleClass]=\"filterViewChipStyleClass()\"\n        [tableStyle]=\"filterViewTableStyle()\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (_topCenter(); as topCenterTemplate) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n    </div>\n    } @if (layout() !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection()\"\n        [sortField]=\"sortField()\"\n        [columns]=\"displayedColumns()\"\n        [sortStates]=\"sortStates()\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout() !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined() ?? true) {\n      <ocx-slot\n        [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n        [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout() === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns()\"\n        [displayedColumns]=\"displayedColumns()\"\n        [customGroupKey]=\"customGroupKey()\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn()\"\n        [actionColumnPosition]=\"actionColumnPosition()\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"displayedColumns()\"\n    [sortStates]=\"sortStates()\"\n    [sortField]=\"sortField()\"\n    [filters]=\"filters()\"\n    [data]=\"data()\"\n    [sortDirection]=\"sortDirection()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [listGridPaginator]=\"listGridPaginator()\"\n    [tablePaginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [stringTableCellTemplate]=\"_stringTableCell()\"\n    [numberTableCellTemplate]=\"_numberTableCell()\"\n    [dateTableCellTemplate]=\"_dateTableCell()\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n    [tableCellTemplate]=\"_tableCell()\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n    [listItemTemplate]=\"_listItem()\"\n    [listValueTemplate]=\"_listValue()\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n    [numberListValueTemplate]=\"_numberListValue()\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n    [stringListValueTemplate]=\"_stringListValue()\"\n    [dateListValueTemplate]=\"_dateListValue()\"\n    [gridItemTemplate]=\"_gridItem()\"\n    [tableFilterCellTemplate]=\"_tableFilterCell()\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n    [columnHeaderTemplate]=\"_columnHeader()\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates()\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout() === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n    [columns]=\"columns()\"\n    [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n    [customGroupKey]=\"customGroupKey()\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i4$1.SlotComponent, selector: "ocx-slot", inputs: ["name", "inputs", "outputs"], outputs: ["inputsChange", "outputsChange"] }, { kind: "component", type: ColumnGroupSelectionComponent, selector: "ocx-column-group-selection", inputs: ["selectedGroupKey", "columns", "placeholderKey", "defaultGroupKey", "customGroupKey"], outputs: ["selectedGroupKeyChange", "groupSelectionChanged", "componentStateChanged"] }, { kind: "component", type: CustomGroupColumnSelectorComponent, selector: "ocx-custom-group-column-selector", inputs: ["columns", "displayedColumns", "customGroupKey", "dialogTitle", "dialogTitleKey", "openButtonTitle", "openButtonTitleKey", "openButtonAriaLabel", "openButtonAriaLabelKey", "saveButtonLabel", "saveButtonLabelKey", "saveButtonAriaLabel", "saveButtonAriaLabelKey", "cancelButtonLabel", "cancelButtonLabelKey", "cancelButtonAriaLabel", "cancelButtonAriaLabelKey", "activeColumnsLabel", "activeColumnsLabelKey", "inactiveColumnsLabel", "inactiveColumnsLabelKey", "frozenActionColumn", "actionColumnPosition"], outputs: ["displayedColumnsChange", "columnSelectionChanged", "actionColumnConfigChanged", "componentStateChanged"] }, { kind: "component", type: DataLayoutSelectionComponent, selector: "ocx-data-layout-selection", inputs: ["supportedViewLayouts", "layout"], outputs: ["layoutChange", "dataViewLayoutChange", "componentStateChanged"] }, { kind: "component", type: DataListGridSortingComponent, selector: "ocx-data-list-grid-sorting", inputs: ["columns", "sortStates", "sortDirection", "sortField"], outputs: ["sortDirectionChange", "sortFieldChange", "sortChange", "componentStateChanged", "columnsChange"] }, { kind: "component", type: DataViewComponent, selector: "ocx-data-view", inputs: ["deletePermission", "editPermission", "viewPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "tableSelectionEnabledField", "tableAllowSelectAll", "data", "name", "titleLineId", "subtitleLineIds", "layout", "columns", "emptyResultsMessage", "clientSideSorting", "clientSideFiltering", "fallbackImage", "filters", "sortField", "sortDirection", "listGridPaginator", "tablePaginator", "paginator", "page", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "selectedRows", "frozenActionColumn", "actionColumnPosition", "expandable", "frozenExpandColumn", "expandedRows", "sortStates", "pageSizes", "pageSize", "stringTableCellTemplate", "numberTableCellTemplate", "dateTableCellTemplate", "tableCellTemplate", "translationKeyTableCellTemplate", "gridItemSubtitleLinesTemplate", "listItemSubtitleLinesTemplate", "gridItemTemplate", "listItemTemplate", "relativeDateTableCellTemplate", "listValueTemplate", "translationKeyListValueTemplate", "numberListValueTemplate", "relativeDateListValueTemplate", "stringListValueTemplate", "dateListValueTemplate", "tableFilterCellTemplate", "dateTableFilterCellTemplate", "relativeDateTableFilterCellTemplate", "translationKeyTableFilterCellTemplate", "stringTableFilterCellTemplate", "numberTableFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "parentTemplates"], outputs: ["filtersChange", "sortFieldChange", "sortDirectionChange", "listGridPaginatorChange", "tablePaginatorChange", "pageChange", "expandedRowsChange", "pageSizeChange", "filtered", "sorted", "deleteItem", "viewItem", "editItem", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "ocxIfPermissionOnMissingPermission", "ocxIfNotPermissionOnMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "component", type: FilterViewComponent, selector: "ocx-filter-view", inputs: ["filters", "columns", "displayMode", "selectDisplayedChips", "chipStyleClass", "tableStyle", "panelStyle", "templates"], outputs: ["filtersChange", "columnsChange", "filtered", "componentStateChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InteractiveDataViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts()\"\n        [layout]=\"layout()\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView()) {\n      <ocx-filter-view\n        [filters]=\"filters()\"\n        [columns]=\"columns()\"\n        [templates]=\"templates()\"\n        [displayMode]=\"filterViewDisplayMode()\"\n        [selectDisplayedChips]=\"selectDisplayedChips()\"\n        [chipStyleClass]=\"filterViewChipStyleClass()\"\n        [tableStyle]=\"filterViewTableStyle()\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (_topCenter(); as topCenterTemplate) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n    </div>\n    } @if (layout() !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection()\"\n        [sortField]=\"sortField()\"\n        [columns]=\"displayedColumns()\"\n        [sortStates]=\"sortStates()\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout() !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined() ?? true) {\n      <ocx-slot\n        [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n        [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout() === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns()\"\n        [displayedColumns]=\"displayedColumns()\"\n        [customGroupKey]=\"customGroupKey()\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn()\"\n        [actionColumnPosition]=\"actionColumnPosition()\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"displayedColumns()\"\n    [sortStates]=\"sortStates()\"\n    [sortField]=\"sortField()\"\n    [filters]=\"filters()\"\n    [data]=\"data()\"\n    [sortDirection]=\"sortDirection()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [listGridPaginator]=\"listGridPaginator()\"\n    [tablePaginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [stringTableCellTemplate]=\"_stringTableCell()\"\n    [numberTableCellTemplate]=\"_numberTableCell()\"\n    [dateTableCellTemplate]=\"_dateTableCell()\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n    [tableCellTemplate]=\"_tableCell()\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n    [listItemTemplate]=\"_listItem()\"\n    [listValueTemplate]=\"_listValue()\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n    [numberListValueTemplate]=\"_numberListValue()\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n    [stringListValueTemplate]=\"_stringListValue()\"\n    [dateListValueTemplate]=\"_dateListValue()\"\n    [gridItemTemplate]=\"_gridItem()\"\n    [tableFilterCellTemplate]=\"_tableFilterCell()\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates()\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout() === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n    [columns]=\"columns()\"\n    [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n    [customGroupKey]=\"customGroupKey()\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n" }]
+            args: [{ standalone: false, selector: 'ocx-interactive-data-view', providers: [{ provide: 'InteractiveDataViewComponent', useExisting: InteractiveDataViewComponent }], template: "<div class=\"p-3 border-bottom-1 surface-border\" [ngClass]=\"headerStyleClass()\" id=\"interactiveDataViewHeader\">\n  <div class=\"flex flex-wrap justify-content-between align-items-center py-1 gap-2\">\n    <div class=\"flex flex-wrap justify-content-start align-items-center gap-2\">\n      <ocx-data-layout-selection\n        [supportedViewLayouts]=\"supportedViewLayouts()\"\n        [layout]=\"layout()\"\n        (dataViewLayoutChange)=\"onDataViewLayoutChange($event)\"\n        (componentStateChanged)=\"dataLayoutComponentState$.next($event)\"\n      ></ocx-data-layout-selection>\n      @if (!disableFilterView()) {\n      <ocx-filter-view\n        [filters]=\"filters()\"\n        [columns]=\"columns()\"\n        [templates]=\"templates()\"\n        [displayMode]=\"filterViewDisplayMode()\"\n        [selectDisplayedChips]=\"selectDisplayedChips()\"\n        [chipStyleClass]=\"filterViewChipStyleClass()\"\n        [tableStyle]=\"filterViewTableStyle()\"\n        (filtered)=\"filtering($event)\"\n        (componentStateChanged)=\"filterViewComponentState$.next($event)\"\n      ></ocx-filter-view>\n      }\n    </div>\n\n    @if (_topCenter(); as topCenterTemplate) {\n    <div>\n      <ng-container [ngTemplateOutlet]=\"topCenterTemplate\"> </ng-container>\n    </div>\n    } @if (layout() !== 'table') {\n    <div class=\"flex align-items-center gap-2\">\n      <ocx-data-list-grid-sorting\n        [sortDirection]=\"sortDirection()\"\n        [sortField]=\"sortField()\"\n        [columns]=\"displayedColumns()\"\n        [sortStates]=\"sortStates()\"\n        (sortChange)=\"onSortChange($event)\"\n        (sortDirectionChange)=\"onSortDirectionChange($event)\"\n        (componentStateChanged)=\"dataListGridSortingComponentState$.next($event)\"\n      ></ocx-data-list-grid-sorting>\n    </div>\n    }\n\n    <div\n      [ngStyle]=\"layout() !== 'table' ? {\n      'position': 'absolute'\n    } : {}\"\n      class=\"flex flex-wrap justify-content-between align-items-center gap-2\"\n    >\n      @if (isColumnGroupSelectionComponentDefined() ?? true) {\n      <ocx-slot\n        [ngStyle]=\"layout() !== 'table' ? {'display' : 'none'}  : {}\"\n        *ocxIfPermission=\"searchConfigPermission(); elseTemplate: defaultColumnGroupSelectionComponent\"\n        name=\"{{columnGroupSlotName}}\"\n        [inputs]=\"{ placeholderKey: groupSelectionNoGroupSelectedKey(), defaultGroupKey: defaultGroupKey(), customGroupKey: customGroupKey(), columns: columns(), selectedGroupKey: selectedGroupKey(), layout: layout(), displayedColumnsIds: displayedColumnKeys() }\"\n        [outputs]=\"{ groupSelectionChanged: slotGroupSelectionChangeListener }\"\n      >\n        <ng-template #skeleton>\n          <div class=\"flex\">\n            <p-skeleton width=\"18rem\" height=\"3rem\"></p-skeleton>\n          </div>\n        </ng-template>\n      </ocx-slot>\n      } @else {\n      <ng-container [ngTemplateOutlet]=\"defaultColumnGroupSelectionComponent\"></ng-container>\n      } @if (layout() === 'table') {\n      <ocx-custom-group-column-selector\n        [columns]=\"columns()\"\n        [displayedColumns]=\"displayedColumns()\"\n        [customGroupKey]=\"customGroupKey()\"\n        (columnSelectionChanged)=\"onColumnSelectionChange($event)\"\n        [frozenActionColumn]=\"frozenActionColumn()\"\n        [actionColumnPosition]=\"actionColumnPosition()\"\n        (actionColumnConfigChanged)=\"onActionColumnConfigChange($event)\"\n        (componentStateChanged)=\"customGroupColumnSelectorComponentState$.next($event)\"\n      ></ocx-custom-group-column-selector>\n      }\n    </div>\n  </div>\n</div>\n<div class=\"p-3\" [ngClass]=\"contentStyleClass()\" id=\"interactiveDataViewContent\">\n  <ocx-data-view\n    [columns]=\"displayedColumns()\"\n    [sortStates]=\"sortStates()\"\n    [sortField]=\"sortField()\"\n    [filters]=\"filters()\"\n    [data]=\"data()\"\n    [sortDirection]=\"sortDirection()\"\n    [titleLineId]=\"titleLineId()\"\n    [subtitleLineIds]=\"subtitleLineIds()\"\n    [clientSideSorting]=\"clientSideSorting()\"\n    [clientSideFiltering]=\"clientSideFiltering()\"\n    [pageSizes]=\"pageSizes()\"\n    [pageSize]=\"pageSize()\"\n    [emptyResultsMessage]=\"emptyResultsMessage()\"\n    [layout]=\"layout()\"\n    [name]=\"name()\"\n    [deletePermission]=\"deletePermission()\"\n    [editPermission]=\"editPermission()\"\n    [viewPermission]=\"viewPermission()\"\n    [deleteActionEnabledField]=\"deleteActionEnabledField()\"\n    [deleteActionVisibleField]=\"deleteActionVisibleField()\"\n    [editActionEnabledField]=\"editActionEnabledField()\"\n    [editActionVisibleField]=\"editActionVisibleField()\"\n    [viewActionEnabledField]=\"viewActionEnabledField()\"\n    [viewActionVisibleField]=\"viewActionVisibleField()\"\n    [additionalActions]=\"additionalActions()\"\n    [listGridPaginator]=\"listGridPaginator()\"\n    [tablePaginator]=\"tablePaginator()\"\n    [page]=\"page()\"\n    (pageChanged)=\"onPageChange($event)\"\n    (pageSizeChanged)=\"onPageSizeChange($event)\"\n    [selectedRows]=\"selectedRows()\"\n    [frozenActionColumn]=\"frozenActionColumn()\"\n    [actionColumnPosition]=\"actionColumnPosition()\"\n    [stringTableCellTemplate]=\"_stringTableCell()\"\n    [numberTableCellTemplate]=\"_numberTableCell()\"\n    [dateTableCellTemplate]=\"_dateTableCell()\"\n    [relativeDateTableCellTemplate]=\"_relativeDateTableCell()\"\n    [tableCellTemplate]=\"_tableCell()\"\n    [translationKeyTableCellTemplate]=\"_translationKeyTableCell()\"\n    [gridItemSubtitleLinesTemplate]=\"_gridItemSubtitleLines()\"\n    [listItemSubtitleLinesTemplate]=\"_listItemSubtitleLines()\"\n    [listItemTemplate]=\"_listItem()\"\n    [listValueTemplate]=\"_listValue()\"\n    [translationKeyListValueTemplate]=\"_translationKeyListValue()\"\n    [numberListValueTemplate]=\"_numberListValue()\"\n    [relativeDateListValueTemplate]=\"_relativeDateListValue()\"\n    [stringListValueTemplate]=\"_stringListValue()\"\n    [dateListValueTemplate]=\"_dateListValue()\"\n    [gridItemTemplate]=\"_gridItem()\"\n    [tableFilterCellTemplate]=\"_tableFilterCell()\"\n    [dateTableFilterCellTemplate]=\"_dateTableFilterCell()\"\n    [numberTableFilterCellTemplate]=\"_numberTableFilterCell()\"\n    [stringTableFilterCellTemplate]=\"_stringTableFilterCell()\"\n    [relativeDateTableFilterCellTemplate]=\"_relativeDateTableFilterCell()\"\n    [translationKeyTableFilterCellTemplate]=\"_translationKeyTableFilterCell()\"\n    [columnHeaderTemplate]=\"_columnHeader()\"\n    (sorted)=\"sorting($event)\"\n    (filtered)=\"filtering($event)\"\n    [totalRecordsOnServer]=\"totalRecordsOnServer()\"\n    [currentPageShowingKey]=\"currentPageShowingKey()\"\n    [currentPageShowingWithTotalOnServerKey]=\"currentPageShowingWithTotalOnServerKey()\"\n    (componentStateChanged)=\"dataViewComponentState$.next($event)\"\n    [parentTemplates]=\"templates()\"\n    [tableAllowSelectAll]=\"tableAllowSelectAll()\"\n    [tableSelectionEnabledField]=\"tableSelectionEnabledField()\"\n    [expandable]=\"expandable()\"\n    [frozenExpandColumn]=\"frozenExpandColumn()\"\n    [(expandedRows)]=\"expandedRows\"\n    (rowExpanded)=\"rowExpanded.emit($event)\"\n    (rowCollapsed)=\"rowCollapsed.emit($event)\"\n  >\n  </ocx-data-view>\n</div>\n\n<ng-template #defaultColumnGroupSelectionComponent>\n  @if (layout() === 'table') {\n  <ocx-column-group-selection\n    [selectedGroupKey]=\"selectedGroupKey() ?? defaultGroupKey()\"\n    [columns]=\"columns()\"\n    [defaultGroupKey]=\"defaultGroupKey() !== customGroupKey() ? defaultGroupKey() : ''\"\n    [customGroupKey]=\"customGroupKey()\"\n    [placeholderKey]=\"groupSelectionNoGroupSelectedKey()\"\n    (groupSelectionChanged)=\"onColumnGroupSelectionChange($event)\"\n    (componentStateChanged)=\"columnGroupSelectionComponentState$.next($event)\"\n  ></ocx-column-group-selection>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { dataViewComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataViewComponent), { isSignal: true }] }], searchConfigPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfigPermission", required: false }] }], deletePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletePermission", required: false }] }], editPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "editPermission", required: false }] }], viewPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewPermission", required: false }] }], deleteActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionVisibleField", required: false }] }], deleteActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteActionEnabledField", required: false }] }], viewActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionVisibleField", required: false }] }], viewActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActionEnabledField", required: false }] }], editActionVisibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionVisibleField", required: false }] }], editActionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editActionEnabledField", required: false }] }], tableSelectionEnabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSelectionEnabledField", required: false }] }], tableAllowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableAllowSelectAll", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], titleLineId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLineId", required: false }] }], subtitleLineIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleLineIds", required: false }] }], supportedViewLayouts: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedViewLayouts", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], emptyResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyResultsMessage", required: false }] }], clientSideSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideSorting", required: false }] }], clientSideFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSideFiltering", required: false }] }], fallbackImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackImage", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }, { type: i0.Output, args: ["sortDirectionChange"] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStates", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], totalRecordsOnServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecordsOnServer", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], defaultGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultGroupKey", required: false }] }], customGroupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupKey", required: false }] }], groupSelectionNoGroupSelectedKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSelectionNoGroupSelectedKey", required: false }] }], currentPageShowingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingKey", required: false }] }], currentPageShowingWithTotalOnServerKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageShowingWithTotalOnServerKey", required: false }] }], additionalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActions", required: false }] }], listGridPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "listGridPaginator", required: false }] }, { type: i0.Output, args: ["listGridPaginatorChange"] }], tablePaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginator", required: false }] }, { type: i0.Output, args: ["tablePaginatorChange"] }], paginator: [{
                 type: Input
-            }], disableFilterView: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFilterView", required: false }] }], filterViewDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewDisplayMode", required: false }] }], filterViewChipStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewChipStyleClass", required: false }] }], filterViewTableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewTableStyle", required: false }] }], filterViewPanelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewPanelStyle", required: false }] }], selectDisplayedChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDisplayedChips", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }], displayedColumnKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumnKeys", required: false }] }, { type: i0.Output, args: ["displayedColumnKeysChange"] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }, { type: i0.Output, args: ["frozenActionColumnChange"] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }, { type: i0.Output, args: ["actionColumnPositionChange"] }], headerStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyleClass", required: false }] }], contentStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyleClass", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], childTableCell: [{ type: i0.ContentChild, args: ['tableCell', { isSignal: true }] }], childDateTableCell: [{ type: i0.ContentChild, args: ['dateTableCell', { isSignal: true }] }], childRelativeDateTableCell: [{ type: i0.ContentChild, args: ['relativeDateTableCell', { isSignal: true }] }], childTranslationKeyTableCell: [{ type: i0.ContentChild, args: ['translationKeyTableCell', { isSignal: true }] }], childGridItemSubtitleLines: [{ type: i0.ContentChild, args: ['gridItemSubtitleLines', { isSignal: true }] }], childListItemSubtitleLines: [{ type: i0.ContentChild, args: ['listItemSubtitleLines', { isSignal: true }] }], childStringTableCell: [{ type: i0.ContentChild, args: ['stringTableCell', { isSignal: true }] }], childNumberTableCell: [{ type: i0.ContentChild, args: ['numberTableCell', { isSignal: true }] }], childGridItem: [{ type: i0.ContentChild, args: ['gridItem', { isSignal: true }] }], childListItem: [{ type: i0.ContentChild, args: ['listItem', { isSignal: true }] }], childTopCenter: [{ type: i0.ContentChild, args: ['topCenter', { isSignal: true }] }], childListValue: [{ type: i0.ContentChild, args: ['listValue', { isSignal: true }] }], childTranslationKeyListValue: [{ type: i0.ContentChild, args: ['translationKeyListValue', { isSignal: true }] }], childNumberListValue: [{ type: i0.ContentChild, args: ['numberListValue', { isSignal: true }] }], childRelativeDateListValue: [{ type: i0.ContentChild, args: ['relativeDateListValue', { isSignal: true }] }], childStringListValue: [{ type: i0.ContentChild, args: ['stringListValue', { isSignal: true }] }], childDateListValue: [{ type: i0.ContentChild, args: ['dateListValue', { isSignal: true }] }], childTableFilterCell: [{ type: i0.ContentChild, args: ['tableFilterCell', { isSignal: true }] }], childDateTableFilterCell: [{ type: i0.ContentChild, args: ['dateTableFilterCell', { isSignal: true }] }], childRelativeDateTableFilterCell: [{ type: i0.ContentChild, args: ['relativeDateTableFilterCell', { isSignal: true }] }], childTranslationKeyTableFilterCell: [{ type: i0.ContentChild, args: ['translationKeyTableFilterCell', { isSignal: true }] }], childStringTableFilterCell: [{ type: i0.ContentChild, args: ['stringTableFilterCell', { isSignal: true }] }], childNumberTableFilterCell: [{ type: i0.ContentChild, args: ['numberTableFilterCell', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], deleteItem: [{
+            }], disableFilterView: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFilterView", required: false }] }], filterViewDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewDisplayMode", required: false }] }], filterViewChipStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewChipStyleClass", required: false }] }], filterViewTableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewTableStyle", required: false }] }], filterViewPanelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterViewPanelStyle", required: false }] }], selectDisplayedChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDisplayedChips", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }], displayedColumnKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumnKeys", required: false }] }, { type: i0.Output, args: ["displayedColumnKeysChange"] }], frozenActionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenActionColumn", required: false }] }, { type: i0.Output, args: ["frozenActionColumnChange"] }], actionColumnPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumnPosition", required: false }] }, { type: i0.Output, args: ["actionColumnPositionChange"] }], headerStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyleClass", required: false }] }], contentStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyleClass", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], frozenExpandColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozenExpandColumn", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], childTableCell: [{ type: i0.ContentChild, args: ['tableCell', { isSignal: true }] }], childDateTableCell: [{ type: i0.ContentChild, args: ['dateTableCell', { isSignal: true }] }], childRelativeDateTableCell: [{ type: i0.ContentChild, args: ['relativeDateTableCell', { isSignal: true }] }], childTranslationKeyTableCell: [{ type: i0.ContentChild, args: ['translationKeyTableCell', { isSignal: true }] }], childGridItemSubtitleLines: [{ type: i0.ContentChild, args: ['gridItemSubtitleLines', { isSignal: true }] }], childListItemSubtitleLines: [{ type: i0.ContentChild, args: ['listItemSubtitleLines', { isSignal: true }] }], childStringTableCell: [{ type: i0.ContentChild, args: ['stringTableCell', { isSignal: true }] }], childNumberTableCell: [{ type: i0.ContentChild, args: ['numberTableCell', { isSignal: true }] }], childGridItem: [{ type: i0.ContentChild, args: ['gridItem', { isSignal: true }] }], childListItem: [{ type: i0.ContentChild, args: ['listItem', { isSignal: true }] }], childTopCenter: [{ type: i0.ContentChild, args: ['topCenter', { isSignal: true }] }], childListValue: [{ type: i0.ContentChild, args: ['listValue', { isSignal: true }] }], childTranslationKeyListValue: [{ type: i0.ContentChild, args: ['translationKeyListValue', { isSignal: true }] }], childNumberListValue: [{ type: i0.ContentChild, args: ['numberListValue', { isSignal: true }] }], childRelativeDateListValue: [{ type: i0.ContentChild, args: ['relativeDateListValue', { isSignal: true }] }], childStringListValue: [{ type: i0.ContentChild, args: ['stringListValue', { isSignal: true }] }], childDateListValue: [{ type: i0.ContentChild, args: ['dateListValue', { isSignal: true }] }], childTableFilterCell: [{ type: i0.ContentChild, args: ['tableFilterCell', { isSignal: true }] }], childDateTableFilterCell: [{ type: i0.ContentChild, args: ['dateTableFilterCell', { isSignal: true }] }], childRelativeDateTableFilterCell: [{ type: i0.ContentChild, args: ['relativeDateTableFilterCell', { isSignal: true }] }], childTranslationKeyTableFilterCell: [{ type: i0.ContentChild, args: ['translationKeyTableFilterCell', { isSignal: true }] }], childStringTableFilterCell: [{ type: i0.ContentChild, args: ['stringTableFilterCell', { isSignal: true }] }], childNumberTableFilterCell: [{ type: i0.ContentChild, args: ['numberTableFilterCell', { isSignal: true }] }], childColumnHeader: [{ type: i0.ContentChild, args: ['columnHeader', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], filtered: [{ type: i0.Output, args: ["filtered"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], deleteItem: [{
                 type: Output
             }], viewItem: [{
                 type: Output
@@ -5776,7 +5826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }] });
 const LIB_NAME = '@onecx/angular-accelerator';
-const LIB_VERSION = '8.6.1';
+const LIB_VERSION = '8.7.0';
 class AngularAcceleratorMissingTranslationHandler extends MultiLanguageMissingTranslationHandler {
 }