@onecx/angular-accelerator 5.32.0 → 5.32.1

package/fesm2022/onecx-angular-accelerator.mjs

@@ -10,7 +10,7 @@ import { FormGroupDirective, FormControlName, FormsModule, ReactiveFormsModule }
 import { BehaviorSubject, map, filter, concat, of, combineLatest, startWith, debounceTime, mergeMap, first, withLatestFrom, ReplaySubject, timestamp, distinctUntilChanged, tap, firstValueFrom, skip, defaultIfEmpty, forkJoin, catchError } from 'rxjs';
 import { SyncableTopic, getLocation, isValidDate as isValidDate$1, getUTCDateWithoutTimezoneIssues } from '@onecx/accelerator';
 import * as i4 from '@angular/common';
-import { CurrencyPipe, DecimalPipe, DatePipe, CommonModule, Location } from '@angular/common';
+import { CurrencyPipe, DecimalPipe, DatePipe, formatDate, CommonModule, Location } from '@angular/common';
 import * as i2 from 'primeng/tooltip';
 import { Tooltip } from 'primeng/tooltip';
 import * as i7 from 'primeng/button';
@@ -2548,6 +2548,16 @@ class DataTableComponent extends DataSortBase {
                 (!currentFilterColumn.filterType || currentFilterColumn.filterType === FilterType.EQUAL))
                 .map((filter) => filter.value);
             const columnValues = rows.map((row) => row[currentFilterColumn?.id]);
+            if (currentFilterColumn.columnType === ColumnType.DATE) {
+                return of({
+                    options: columnValues.map((c) => ({
+                        label: c,
+                        value: c,
+                        toFilterBy: formatDate(`${c}`, currentFilterColumn.dateFormat ?? 'medium', this.locale),
+                    })),
+                    column: currentFilterColumn,
+                });
+            }
             const translateObservable = this.columns.find((c) => c.id === currentFilterColumn?.id)?.columnType === ColumnType.TRANSLATION_KEY
                 ? this.translateColumnValues(columnValues)
                 : of(Object.fromEntries(columnValues.map((cv) => [cv, cv])));
@@ -2558,6 +2568,7 @@ class DataTableComponent extends DataSortBase {
                     .map((filterOption) => ({
                     label: filterOption,
                     value: filterOption,
+                    toFilterBy: filterOption
                 }));
             }), map((options) => {
                 return {
@@ -2862,11 +2873,11 @@ class DataTableComponent extends DataSortBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: LOCALE_ID }, { token: i1$2.TranslateService }, { token: i1$1.Router }, { token: i0.Injector }, { token: i3.UserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            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        </ng-container>\n        <ng-container\n          *ngIf=\"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        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\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        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n              [attr.name]=\"'data-table-action-button'\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\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                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      (onFocus)=\"onFilterChosen(column)\"\n                      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                      [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                    >\n                      <ng-template pTemplate=\"selectedItems\" let-value>\n                        <div\n                          class=\"pi\"\n                          [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                          [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                        ></div>\n                      </ng-template>\n                      <ng-template pTemplate=\"item\" let-value>\n                        <ng-container\n                          *ngIf=\"columnFilterTemplates[column.id] as template\"\n                          [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                        >\n                        </ng-container>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-container>\n                </ng-container>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr *ngIf=\"columnTemplates\">\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"isRowSelectionDisabled(rowObject)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          @defer(on viewport){\n          <ng-container\n            *ngIf=\"columnTemplates[column.id]\"\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          >\n          </ng-container>\n          } @placeholder {\n          <p-skeleton width=\"3rem\" />\n          }\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i9$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i9$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i9$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgIf, i4.NgTemplateOutlet]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: DataTableComponent, selector: "ocx-data-table", inputs: { rows: "rows", selectedRows: "selectedRows", filters: "filters", sortDirection: "sortDirection", sortColumn: "sortColumn", columns: "columns", clientSideFiltering: "clientSideFiltering", clientSideSorting: "clientSideSorting", sortStates: "sortStates", pageSizes: "pageSizes", pageSize: "pageSize", showAllOption: "showAllOption", emptyResultsMessage: "emptyResultsMessage", name: "name", deletePermission: "deletePermission", viewPermission: "viewPermission", editPermission: "editPermission", deleteActionVisibleField: "deleteActionVisibleField", deleteActionEnabledField: "deleteActionEnabledField", viewActionVisibleField: "viewActionVisibleField", viewActionEnabledField: "viewActionEnabledField", editActionVisibleField: "editActionVisibleField", editActionEnabledField: "editActionEnabledField", selectionEnabledField: "selectionEnabledField", allowSelectAll: "allowSelectAll", paginator: "paginator", page: "page", tableStyle: "tableStyle", totalRecordsOnServer: "totalRecordsOnServer", currentPageShowingKey: "currentPageShowingKey", currentPageShowingWithTotalOnServerKey: "currentPageShowingWithTotalOnServerKey", stringCellTemplate: "stringCellTemplate", numberCellTemplate: "numberCellTemplate", customCellTemplate: "customCellTemplate", dateCellTemplate: "dateCellTemplate", relativeDateCellTemplate: "relativeDateCellTemplate", cellTemplate: "cellTemplate", translationKeyCellTemplate: "translationKeyCellTemplate", stringFilterCellTemplate: "stringFilterCellTemplate", numberFilterCellTemplate: "numberFilterCellTemplate", customFilterCellTemplate: "customFilterCellTemplate", dateFilterCellTemplate: "dateFilterCellTemplate", relativeDateFilterCellTemplate: "relativeDateFilterCellTemplate", filterCellTemplate: "filterCellTemplate", translationKeyFilterCellTemplate: "translationKeyFilterCellTemplate", additionalActions: "additionalActions", frozenActionColumn: "frozenActionColumn", actionColumnPosition: "actionColumnPosition", parentTemplates: "parentTemplates" }, outputs: { filtered: "filtered", sorted: "sorted", viewTableRow: "viewTableRow", editTableRow: "editTableRow", deleteTableRow: "deleteTableRow", selectionChanged: "selectionChanged", pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", componentStateChanged: "componentStateChanged" }, queries: [{ propertyName: "stringCellChildTemplate", first: true, predicate: ["stringCell"], descendants: true }, { propertyName: "numberCellChildTemplate", first: true, predicate: ["numberCell"], descendants: true }, { propertyName: "customCellChildTemplate", first: true, predicate: ["customCell"], descendants: true }, { propertyName: "dateCellChildTemplate", first: true, predicate: ["dateCell"], descendants: true }, { propertyName: "relativeDateCellChildTemplate", first: true, predicate: ["relativeDateCell"], descendants: true }, { propertyName: "cellChildTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "translationKeyCellChildTemplate", first: true, predicate: ["translationKeyCell"], descendants: true }, { propertyName: "stringFilterCellChildTemplate", first: true, predicate: ["stringFilterCell"], descendants: true }, { propertyName: "numberFilterCellChildTemplate", first: true, predicate: ["numberFilterCell"], descendants: true }, { propertyName: "customFilterCellChildTemplate", first: true, predicate: ["customFilterCell"], descendants: true }, { propertyName: "dateFilterCellChildTemplate", first: true, predicate: ["dateFilterCell"], descendants: true }, { propertyName: "relativeDateFilterCellChildTemplate", first: true, predicate: ["relativeDateFilterCell"], descendants: true }, { propertyName: "filterCellChildTemplate", first: true, predicate: ["filterCell"], descendants: true }, { propertyName: "translationKeyFilterCellChildTemplate", first: true, predicate: ["translationKeyFilterCell"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "viewTemplates", predicate: PrimeTemplate, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            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        </ng-container>\n        <ng-container\n          *ngIf=\"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        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\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        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n              [attr.name]=\"'data-table-action-button'\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\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                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      filterBy=\"toFilterBy\"\n                      (onFocus)=\"onFilterChosen(column)\"\n                      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                      [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                    >\n                      <ng-template pTemplate=\"selectedItems\" let-value>\n                        <div\n                          class=\"pi\"\n                          [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                          [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                        ></div>\n                      </ng-template>\n                      <ng-template pTemplate=\"item\" let-value>\n                        <ng-container\n                          *ngIf=\"columnFilterTemplates[column.id] as template\"\n                          [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                        >\n                        </ng-container>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-container>\n                </ng-container>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr *ngIf=\"columnTemplates\">\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"isRowSelectionDisabled(rowObject)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          @defer(on viewport){\n          <ng-container\n            *ngIf=\"columnTemplates[column.id]\"\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          >\n          </ng-container>\n          } @placeholder {\n          <p-skeleton width=\"3rem\" />\n          }\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i9$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "component", type: i9$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i9$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IfPermissionDirective, selector: "[ocxIfPermission], [ocxIfNotPermission]", inputs: ["ocxIfPermission", "ocxIfNotPermission", "onMissingPermission", "ocxIfPermissionPermissions", "ocxIfNotPermissionPermissions", "ocxIfPermissionElseTemplate", "ocxIfNotPermissionElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }], deferBlockDependencies: [() => [i4.NgIf, i4.NgTemplateOutlet]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            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        </ng-container>\n        <ng-container\n          *ngIf=\"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        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\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        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n              [attr.name]=\"'data-table-action-button'\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\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                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      (onFocus)=\"onFilterChosen(column)\"\n                      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                      [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                    >\n                      <ng-template pTemplate=\"selectedItems\" let-value>\n                        <div\n                          class=\"pi\"\n                          [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                          [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                        ></div>\n                      </ng-template>\n                      <ng-template pTemplate=\"item\" let-value>\n                        <ng-container\n                          *ngIf=\"columnFilterTemplates[column.id] as template\"\n                          [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                        >\n                        </ng-container>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-container>\n                </ng-container>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr *ngIf=\"columnTemplates\">\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"isRowSelectionDisabled(rowObject)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          @defer(on viewport){\n          <ng-container\n            *ngIf=\"columnTemplates[column.id]\"\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          >\n          </ng-container>\n          } @placeholder {\n          <p-skeleton width=\"3rem\" />\n          }\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
+            args: [{ selector: 'ocx-data-table', template: "<ng-template #actionColumn let-rowObject=\"localRowObject\">\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0 || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <td\n      class=\"actions\"\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-left' : 'action-column-right'\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n    >\n      <div class=\"icon-button-row-wrapper\">\n        <ng-container\n          *ngIf=\"viewTableRowObserved && (!viewActionVisibleField || fieldIsTruthy(rowObject, viewActionVisibleField))\"\n        >\n          <button\n            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        </ng-container>\n        <ng-container\n          *ngIf=\"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        </ng-container>\n        <ng-container\n          *ngIf=\"deleteTableRowObserved && (!deleteActionVisibleField || fieldIsTruthy(rowObject, deleteActionVisibleField))\"\n        >\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        </ng-container>\n        <ng-container *ngFor=\"let action of inlineActions$ | async\">\n          <ng-container *ngIf=\"(!action.actionVisibleField || fieldIsTruthy(rowObject, action.actionVisibleField))\">\n            <button\n              id=\"{{resolveFieldData(rowObject, 'id')}}-{{action.id ? action.id.concat('ActionButton') : 'inlineActionButton'}}\"\n              *ocxIfPermission=\"action.permission\"\n              pButton\n              class=\"p-button-rounded p-button-text\"\n              [ngClass]=\"action.classes\"\n              [icon]=\"action.icon || ''\"\n              (click)=\"action.callback(rowObject)\"\n              [title]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [attr.aria-label]=\"action.labelKey ? (action.labelKey | translate) : ''\"\n              [disabled]=\"action.disabled || (!!action.actionEnabledField && !fieldIsTruthy(rowObject, action.actionEnabledField))\"\n              [attr.name]=\"'data-table-action-button'\"\n            ></button>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasVisibleOverflowMenuItems(rowObject) | async\">\n          <p-menu #menu [model]=\"(overflowMenuItems$ | async) || []\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n          <button\n            pButton\n            class=\"p-button-rounded p-button-text\"\n            [icon]=\"'pi pi-ellipsis-v'\"\n            (click)=\"toggleOverflowMenu($event, menu, rowObject)\"\n            [attr.aria-label]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n            [title]=\"'OCX_DATA_TABLE.MORE_ACTIONS' | translate\"\n          ></button>\n        </ng-container>\n      </div>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #actionColumnHeader>\n  <ng-container\n    *ngIf=\"anyRowActionObserved || this.additionalActions.length > 0  || ((this.overflowActions$ | async) ?? []).length > 0\"\n  >\n    <th\n      pFrozenColumn\n      [frozen]=\"frozenActionColumn\"\n      [alignFrozen]=\"actionColumnPosition\"\n      [ngClass]=\"(frozenActionColumn && actionColumnPosition === 'left') ? 'border-right-1' : (frozenActionColumn && actionColumnPosition === 'right') ? 'border-left-1' : ''\"\n      [attr.name]=\"actionColumnPosition === 'left' ? 'action-column-header-left' : 'action-column-header-right'\"\n    >\n      {{ 'OCX_DATA_TABLE.ACTIONS_COLUMN_NAME' | translate }}\n    </th>\n  </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"(displayedPageSize$ | async) as displayedPageSize\">\n  <p-table\n    *ngIf=\"(columnTemplates$ | async) ?? {} as columnTemplates\"\n    [value]=\"(displayedRows$ | async) ?? []\"\n    responsiveLayout=\"scroll\"\n    [paginator]=\"paginator\"\n    [first]=\"page * displayedPageSize\"\n    (onPage)=\"onPageChange($event)\"\n    [rows]=\"displayedPageSize\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}\"\n    [rowsPerPageOptions]=\"(displayedPageSizes$ | async) ?? []\"\n    id=\"dataTable_{{name}}\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [selection]=\"(selectedRows$ | async) ?? []\"\n    [scrollable]=\"true\"\n    scrollHeight=\"flex\"\n    [style]=\"tableStyle\"\n    paginatorDropdownAppendTo=\"body\"\n    [rowSelectable]=\"rowSelectable\"\n    tableStyleClass=\"h-full\"\n  >\n    <ng-template pTemplate=\"header\">\n      <tr style=\"vertical-align: top\">\n        <th style=\"width: 4rem\" scope=\"col\" *ngIf=\"selectionChangedObserved\">\n          <p-tableHeaderCheckbox\n            *ngIf=\"allowSelectAll\"\n            pTooltip=\"{{'OCX_DATA_TABLE.SELECT_ALL_TOOLTIP' | translate}}\"\n            ariaLabel=\"{{'OCX_DATA_TABLE.SELECT_ALL_ARIA_LABEL' | translate}}\"\n          ></p-tableHeaderCheckbox>\n        </th>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"column.sortable || column.filterable; else simpleHeader\" scope=\"col\">\n            <div\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                <button\n                  *ngIf=\"column.sortable\"\n                  class=\"pi sortButton pl-0\"\n                  [class.pi-sort-alt]=\"(column?.id === sortColumn && sortDirection === 'NONE') || column?.id !== sortColumn\"\n                  [class.pi-sort-amount-up]=\"column?.id === sortColumn && sortDirection === 'ASCENDING'\"\n                  [class.pi-sort-amount-down]=\"column?.id === sortColumn && sortDirection === 'DESCENDING'\"\n                  (click)=\"onSortColumnClick(column.id)\"\n                  [title]=\"(sortIconTitle(column.id) | translate)\"\n                  [attr.aria-label]=\"('OCX_DATA_TABLE.TOGGLE_BUTTON.ARIA_LABEL' | translate: { column: (column.nameKey | translate), direction: (sortDirectionToTitle(columnNextSortDirection(column.id)) | translate)})\"\n                ></button>\n                <ng-container *ngIf=\"currentEqualFilterOptions$ | async as equalFilterOptions\">\n                  <ng-container *ngIf=\"columnFilterTemplates$ | async as columnFilterTemplates\">\n                    <p-multiSelect\n                      class=\"filterMultiSelect\"\n                      *ngIf=\"column.filterable && (!column.filterType || column.filterType === FilterType.EQUAL)\"\n                      [options]=\"equalFilterOptions.column?.id === column.id ? equalFilterOptions.options : []\"\n                      [ngModel]=\"(currentEqualSelectedFilters$ | async) || []\"\n                      [showToggleAll]=\"true\"\n                      emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                      [displaySelectedLabel]=\"false\"\n                      [resetFilterOnHide]=\"true\"\n                      (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                      placeholder=\"Icon\"\n                      appendTo=\"body\"\n                      filterBy=\"toFilterBy\"\n                      (onFocus)=\"onFilterChosen(column)\"\n                      [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                      [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                      [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                    >\n                      <ng-template pTemplate=\"selectedItems\" let-value>\n                        <div\n                          class=\"pi\"\n                          [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                          [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                        ></div>\n                      </ng-template>\n                      <ng-template pTemplate=\"item\" let-value>\n                        <ng-container\n                          *ngIf=\"columnFilterTemplates[column.id] as template\"\n                          [ngTemplateOutlet]=\"template\"\n                          [ngTemplateOutletContext]=\"{\n                      rowObject: getRowObjectFromMultiselectItem(value, column),\n                      column: column\n                  }\"\n                        >\n                        </ng-container>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-container>\n                </ng-container>\n                <p-multiSelect\n                  class=\"filterMultiSelect\"\n                  *ngIf=\"column.filterable && column.filterType === FilterType.TRUTHY\"\n                  [options]=\"truthyFilterOptions\"\n                  [ngModel]=\"(currentTruthySelectedFilters$ | async) || []\"\n                  [showToggleAll]=\"true\"\n                  emptyFilterMessage=\"{{ 'OCX_DATA_TABLE.EMPTY_FILTER_MESSAGE' | translate }}\"\n                  [displaySelectedLabel]=\"false\"\n                  [resetFilterOnHide]=\"true\"\n                  (onChange)=\"onMultiselectFilterChange(column, $event)\"\n                  placeholder=\"Icon\"\n                  appendTo=\"body\"\n                  (onFocus)=\"onFilterChosen(column)\"\n                  [title]=\"'OCX_DATA_TABLE.FILTER_TITLE' | translate\"\n                  [ariaLabel]=\"'OCX_DATA_TABLE.COLUMN_FILTER_ARIA_LABEL' | translate\"\n                  [ariaFilterLabel]=\"('OCX_DATA_TABLE.FILTER_ARIA_LABEL' | translate: { column: column.nameKey | translate})\"\n                >\n                  <ng-template pTemplate=\"selectedItems\" let-value>\n                    <div\n                      class=\"pi\"\n                      [class.pi-filter]=\"!((filterAmounts$ | async) || {})[column.id]\"\n                      [class.pi-filter-fill]=\"((filterAmounts$ | async) || {})[column.id] > 0\"\n                    ></div>\n                  </ng-template>\n                  <ng-template pTemplate=\"item\" let-value> {{value.key | translate}} </ng-template>\n                </p-multiSelect>\n              </span>\n            </div>\n          </th>\n          <ng-template #simpleHeader>\n            <th scope=\"col\">{{ column.nameKey | translate }}</th>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumnHeader\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowObject>\n      <tr *ngIf=\"columnTemplates\">\n        <td *ngIf=\"selectionChangedObserved\">\n          <p-checkbox\n            *ngIf=\"isRowSelectionDisabled(rowObject) && isSelected(rowObject); else defaultCheckbox\"\n            [(ngModel)]=\"checked\"\n            [binary]=\"true\"\n            [disabled]=\"true\"\n            [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n          ></p-checkbox>\n          <ng-template #defaultCheckbox>\n            <p-tableCheckbox\n              [value]=\"rowObject\"\n              [disabled]=\"isRowSelectionDisabled(rowObject)\"\n              [ariaLabel]=\"'OCX_DATA_TABLE.SELECT_ARIA_LABEL' | translate: { key: rowObject.id}\"\n            ></p-tableCheckbox>\n          </ng-template>\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'left';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n        <td *ngFor=\"let column of columns\">\n          @defer(on viewport){\n          <ng-container\n            *ngIf=\"columnTemplates[column.id]\"\n            [ngTemplateOutlet]=\"\n                _cell ? _cell: columnTemplates[column.id]\n              \"\n            [ngTemplateOutletContext]=\"{\n                  rowObject: rowObject,\n                  column: column,\n              }\"\n          >\n          </ng-container>\n          } @placeholder {\n          <p-skeleton width=\"3rem\" />\n          }\n        </td>\n        <ng-container *ngIf=\"actionColumnPosition === 'right';\">\n          <ng-container *ngTemplateOutlet=\"actionColumn; context: {localRowObject: rowObject}\"></ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td [colSpan]=\"columns.length + ((anyRowActionObserved || this.additionalActions.length > 0) ? 1 : 0)\">\n          {{ emptyResultsMessage || (\"OCX_DATA_TABLE.EMPTY_RESULT\" | translate) }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</ng-container>\n\n<ng-template pTemplate=\"defaultStringCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomCell\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container>\n    {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n  </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n  <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }} </ng-container>\n</ng-template>\n", styles: [":host ::ng-deep .p-multiselect{padding:0;background:#f7f7f7;border:none}:host ::ng-deep .p-multiselect .p-multiselect-container{height:20px;width:20px}:host ::ng-deep .p-multiselect .p-multiselect-trigger{display:none}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{color:#262626;font-size:.9rem;font-family:Bold,sans-serif;font-weight:700;padding:0}:host ::ng-deep .p-multiselect:focus-within{box-shadow:none;background:#979797}.pi{border:none;background:none;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]