@enigmatry/entry-components 19.0.1-preview.4 → 20.0.0

package/fesm2022/enigmatry-entry-components-table.mjs

@@ -2,7 +2,7 @@ import * as i4$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 export { PageEvent } from '@angular/material/paginator';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, ViewChild, TemplateRef, HostBinding, NgModule } from '@angular/core';
+import { InjectionToken, inject, Input, ChangeDetectionStrategy, Component, EventEmitter, ViewChild, Output, ElementRef, ChangeDetectorRef, TemplateRef, HostBinding, NgModule } from '@angular/core';
 import { createInjectionToken, provideConfig } from '@enigmatry/entry-components/common';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i2$1 from '@angular/material/table';
@@ -32,6 +32,7 @@ class EntryTableConfig {
         /** Page size, default 20 */
         this.pageSize = 20;
         /** Page size options, default [20, 50, 100] */
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
         this.pageSizeOptions = [20, 50, 100];
         /** Hide page size options, default is false */
         this.hidePageSize = false;
@@ -60,9 +61,7 @@ class EntryTableConfig {
  */
 const ENTRY_TABLE_CONFIG = createInjectionToken(new EntryTableConfig());
 /** Provide entry table config */
-function provideEntryTableConfig(config) {
-    return provideConfig(ENTRY_TABLE_CONFIG, () => new EntryTableConfig(config));
-}
+const provideEntryTableConfig = (config) => provideConfig(ENTRY_TABLE_CONFIG, () => new EntryTableConfig(config));
 /** Default percentage multiplier injection token */
 const DEFAULT_PERCENTAGE_MULTIPLIER = new InjectionToken('');
 
@@ -72,6 +71,7 @@ class PagedQuery {
     constructor() {
         this.pageNumber = defaultPageNumber;
         this.pageSize = defaultPageSize;
+        this.getValueIfNotEmpty = (value) => value ? value : undefined;
     }
     sortChange(sort) {
         if (sort.active) {
@@ -85,10 +85,10 @@ class PagedQuery {
         this.pageSize = page.pageSize;
     }
     applyRouteChanges(queryParams) {
-        this.pageNumber = queryParams.pageNumber ? Number(queryParams.pageNumber) : defaultPageNumber;
-        this.pageSize = queryParams.pageSize ? Number(queryParams.pageSize) : this.pageSize;
-        this.sortBy = this.getValueIfNotEmpty(queryParams.sortBy ?? this.sortBy);
-        this.sortDirection = this.getValueIfNotEmpty(queryParams.sortDirection ?? this.sortDirection);
+        this.pageNumber = queryParams['pageNumber'] ? Number(queryParams['pageNumber']) : defaultPageNumber;
+        this.pageSize = queryParams['pageSize'] ? Number(queryParams['pageSize']) : this.pageSize;
+        this.sortBy = this.getValueIfNotEmpty(queryParams['sortBy'] ?? this.sortBy);
+        this.sortDirection = this.getValueIfNotEmpty(queryParams['sortDirection'] ?? this.sortDirection);
     }
     getRouteQueryParams() {
         return {
@@ -98,25 +98,19 @@ class PagedQuery {
             sortDirection: this.sortDirection
         };
     }
-    getValueIfNotEmpty(value) {
-        return value ? value : undefined;
-    }
 }
 
 class EntryCellFormattedValueComponent {
-    constructor(defaultPercentageMultiplier) {
-        this.defaultPercentageMultiplier = defaultPercentageMultiplier;
+    constructor() {
+        this.defaultPercentageMultiplier = inject(DEFAULT_PERCENTAGE_MULTIPLIER);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryCellFormattedValueComponent, deps: [{ token: DEFAULT_PERCENTAGE_MULTIPLIER }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: EntryCellFormattedValueComponent, isStandalone: false, selector: "entry-cell-formatted-value", inputs: { value: "value", type: "type", typeParameter: "typeParameter" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- Boolean -->\n  <ng-container *ngSwitchCase=\"'boolean'\">\n    {{value ? '\\u2713' : ''}}\n  </ng-container>\n  <!-- Number -->\n  <ng-container *ngSwitchCase=\"'number'\">\n    {{value | number: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Currency -->\n  <ng-container *ngSwitchCase=\"'currency'\">\n    {{value | currency: typeParameter?.currencyCode : typeParameter?.display : typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Percent -->\n  <ng-container *ngSwitchCase=\"'percent'\">\n    {{+value * (typeParameter?.multiplier ?? defaultPercentageMultiplier) | percent: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Date -->\n  <ng-container *ngSwitchCase=\"'date'\">\n    {{value | date: typeParameter?.format : typeParameter?.timezone : typeParameter?.locale}}\n  </ng-container>\n  <!-- Link -->\n  <ng-container *ngSwitchCase=\"'link'\">\n    <a [href]=\"value\" target=\"_blank\">{{value}}</a>\n  </ng-container>\n  <!-- Default -->\n  <ng-container *ngSwitchDefault>\n    {{value}}\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryCellFormattedValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: EntryCellFormattedValueComponent, isStandalone: false, selector: "entry-cell-formatted-value", inputs: { value: "value", type: "type", typeParameter: "typeParameter" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- Boolean -->\n  <ng-container *ngSwitchCase=\"'boolean'\">\n    {{value ? '\\u2713' : ''}}\n  </ng-container>\n  <!-- Number -->\n  <ng-container *ngSwitchCase=\"'number'\">\n    {{value | number: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Currency -->\n  <ng-container *ngSwitchCase=\"'currency'\">\n    {{value | currency: typeParameter?.currencyCode : typeParameter?.display : typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Percent -->\n  <ng-container *ngSwitchCase=\"'percent'\">\n    {{+(value ?? 0) * (typeParameter?.multiplier ?? defaultPercentageMultiplier) | percent: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Date -->\n  <ng-container *ngSwitchCase=\"'date'\">\n    {{value | date: typeParameter?.format : typeParameter?.timezone : typeParameter?.locale}}\n  </ng-container>\n  <!-- Link -->\n  <ng-container *ngSwitchCase=\"'link'\">\n    <a [href]=\"value\" target=\"_blank\">{{value}}</a>\n  </ng-container>\n  <!-- Default -->\n  <ng-container *ngSwitchDefault>\n    {{value}}\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryCellFormattedValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryCellFormattedValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'entry-cell-formatted-value', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- Boolean -->\n  <ng-container *ngSwitchCase=\"'boolean'\">\n    {{value ? '\\u2713' : ''}}\n  </ng-container>\n  <!-- Number -->\n  <ng-container *ngSwitchCase=\"'number'\">\n    {{value | number: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Currency -->\n  <ng-container *ngSwitchCase=\"'currency'\">\n    {{value | currency: typeParameter?.currencyCode : typeParameter?.display : typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Percent -->\n  <ng-container *ngSwitchCase=\"'percent'\">\n    {{+value * (typeParameter?.multiplier ?? defaultPercentageMultiplier) | percent: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Date -->\n  <ng-container *ngSwitchCase=\"'date'\">\n    {{value | date: typeParameter?.format : typeParameter?.timezone : typeParameter?.locale}}\n  </ng-container>\n  <!-- Link -->\n  <ng-container *ngSwitchCase=\"'link'\">\n    <a [href]=\"value\" target=\"_blank\">{{value}}</a>\n  </ng-container>\n  <!-- Default -->\n  <ng-container *ngSwitchDefault>\n    {{value}}\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DEFAULT_PERCENTAGE_MULTIPLIER]
-                }] }], propDecorators: { value: [{
+            args: [{ selector: 'entry-cell-formatted-value', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- Boolean -->\n  <ng-container *ngSwitchCase=\"'boolean'\">\n    {{value ? '\\u2713' : ''}}\n  </ng-container>\n  <!-- Number -->\n  <ng-container *ngSwitchCase=\"'number'\">\n    {{value | number: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Currency -->\n  <ng-container *ngSwitchCase=\"'currency'\">\n    {{value | currency: typeParameter?.currencyCode : typeParameter?.display : typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Percent -->\n  <ng-container *ngSwitchCase=\"'percent'\">\n    {{+(value ?? 0) * (typeParameter?.multiplier ?? defaultPercentageMultiplier) | percent: typeParameter?.digitsInfo : typeParameter?.locale}}\n  </ng-container>\n  <!-- Date -->\n  <ng-container *ngSwitchCase=\"'date'\">\n    {{value | date: typeParameter?.format : typeParameter?.timezone : typeParameter?.locale}}\n  </ng-container>\n  <!-- Link -->\n  <ng-container *ngSwitchCase=\"'link'\">\n    <a [href]=\"value\" target=\"_blank\">{{value}}</a>\n  </ng-container>\n  <!-- Default -->\n  <ng-container *ngSwitchDefault>\n    {{value}}\n  </ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { value: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -125,19 +119,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
             }] } });
 
 class EntryCellComponent {
+    constructor() {
+        this.getCellValue = (rowData, colDef) => {
+            const keys = colDef.field ? colDef.field.split('.') : [];
+            return keys.reduce((data, key) => data && data[key], rowData);
+        };
+    }
     get value() {
         return this.getCellValue(this.rowData, this.colDef);
     }
-    getCellValue(rowData, colDef) {
-        const keys = colDef.field ? colDef.field.split('.') : [];
-        return keys.reduce((data, key) => data && data[key], rowData);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: EntryCellComponent, isStandalone: false, selector: "entry-cell", inputs: { rowData: "rowData", colDef: "colDef" }, ngImport: i0, template: "<entry-cell-formatted-value [value]=\"value\" [type]=\"colDef.type\" [typeParameter]=\"colDef.typeParameter\"></entry-cell-formatted-value>", dependencies: [{ kind: "component", type: EntryCellFormattedValueComponent, selector: "entry-cell-formatted-value", inputs: ["value", "type", "typeParameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: EntryCellComponent, isStandalone: false, selector: "entry-cell", inputs: { rowData: "rowData", colDef: "colDef" }, ngImport: i0, template: "<entry-cell-formatted-value [value]=\"value\" [type]=\"colDef.type!\" [typeParameter]=\"colDef.typeParameter\"></entry-cell-formatted-value>", dependencies: [{ kind: "component", type: EntryCellFormattedValueComponent, selector: "entry-cell-formatted-value", inputs: ["value", "type", "typeParameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'entry-cell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<entry-cell-formatted-value [value]=\"value\" [type]=\"colDef.type\" [typeParameter]=\"colDef.typeParameter\"></entry-cell-formatted-value>" }]
+            args: [{ selector: 'entry-cell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<entry-cell-formatted-value [value]=\"value\" [type]=\"colDef.type!\" [typeParameter]=\"colDef.typeParameter\"></entry-cell-formatted-value>" }]
         }], propDecorators: { rowData: [{
                 type: Input
             }], colDef: [{
@@ -157,12 +153,12 @@ class EntryCellContextMenuComponent {
             ? this.rowMenuFormatter.items(this.rowData)
             : this.items;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: EntryCellContextMenuComponent, isStandalone: false, selector: "entry-cell-context-menu", inputs: { items: "items", rowMenuFormatter: "rowMenuFormatter", rowData: "rowData", triggerIcon: "triggerIcon", isSubMenu: "isSubMenu" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<button *ngIf=\"!isSubMenu\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n    <mat-icon>{{triggerIcon}}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"entry-table-menu\" role=\"menu\">\n    <ng-container *ngFor=\"let item of menuItems\">\n        <ng-container \n            *ngIf=\"item.items?.length; then menuSubItems; else menuItem\">\n        </ng-container>\n\n        <ng-template #menuSubItems>\n            <button mat-menu-item [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"subMenu.menu\"\n                class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n                <entry-cell-context-menu #subMenu [items]=\"item.items\" [rowData]=\"rowData\" [isSubMenu]=\"true\"\n                    (selected)=\"selected.emit($event)\">\n                </entry-cell-context-menu>\n            </button>\n        </ng-template>\n\n        <ng-template #menuItem>\n            <button mat-menu-item [disabled]=\"item.disabled\" (click)=\"selected.emit(item.id)\" class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n            </button>\n        </ng-template>\n    </ng-container>\n</mat-menu>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: EntryCellContextMenuComponent, selector: "entry-cell-context-menu", inputs: ["items", "rowMenuFormatter", "rowData", "triggerIcon", "isSubMenu"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: EntryCellContextMenuComponent, isStandalone: false, selector: "entry-cell-context-menu", inputs: { items: "items", rowMenuFormatter: "rowMenuFormatter", rowData: "rowData", triggerIcon: "triggerIcon", isSubMenu: "isSubMenu" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<button *ngIf=\"!isSubMenu\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n    <mat-icon>{{triggerIcon}}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"entry-table-menu\" role=\"menu\">\n    <ng-container *ngFor=\"let item of menuItems\">\n        <ng-container\n            *ngIf=\"item.items?.length; then menuSubItems; else menuItem\">\n        </ng-container>\n\n        <ng-template #menuSubItems>\n            <button mat-menu-item [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"subMenu.menu\"\n                class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n                <entry-cell-context-menu #subMenu [items]=\"item.items ?? []\" [rowData]=\"rowData\" [isSubMenu]=\"true\"\n                    (selected)=\"selected.emit($event)\">\n                </entry-cell-context-menu>\n            </button>\n        </ng-template>\n\n        <ng-template #menuItem>\n            <button mat-menu-item [disabled]=\"item.disabled\" (click)=\"selected.emit(item.id)\" class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n            </button>\n        </ng-template>\n    </ng-container>\n</mat-menu>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: EntryCellContextMenuComponent, selector: "entry-cell-context-menu", inputs: ["items", "rowMenuFormatter", "rowData", "triggerIcon", "isSubMenu"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryCellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryCellContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'entry-cell-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button *ngIf=\"!isSubMenu\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n    <mat-icon>{{triggerIcon}}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"entry-table-menu\" role=\"menu\">\n    <ng-container *ngFor=\"let item of menuItems\">\n        <ng-container \n            *ngIf=\"item.items?.length; then menuSubItems; else menuItem\">\n        </ng-container>\n\n        <ng-template #menuSubItems>\n            <button mat-menu-item [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"subMenu.menu\"\n                class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n                <entry-cell-context-menu #subMenu [items]=\"item.items\" [rowData]=\"rowData\" [isSubMenu]=\"true\"\n                    (selected)=\"selected.emit($event)\">\n                </entry-cell-context-menu>\n            </button>\n        </ng-template>\n\n        <ng-template #menuItem>\n            <button mat-menu-item [disabled]=\"item.disabled\" (click)=\"selected.emit(item.id)\" class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n            </button>\n        </ng-template>\n    </ng-container>\n</mat-menu>" }]
+            args: [{ selector: 'entry-cell-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button *ngIf=\"!isSubMenu\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n    <mat-icon>{{triggerIcon}}</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"entry-table-menu\" role=\"menu\">\n    <ng-container *ngFor=\"let item of menuItems\">\n        <ng-container\n            *ngIf=\"item.items?.length; then menuSubItems; else menuItem\">\n        </ng-container>\n\n        <ng-template #menuSubItems>\n            <button mat-menu-item [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"subMenu.menu\"\n                class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n                <entry-cell-context-menu #subMenu [items]=\"item.items ?? []\" [rowData]=\"rowData\" [isSubMenu]=\"true\"\n                    (selected)=\"selected.emit($event)\">\n                </entry-cell-context-menu>\n            </button>\n        </ng-template>\n\n        <ng-template #menuItem>\n            <button mat-menu-item [disabled]=\"item.disabled\" (click)=\"selected.emit(item.id)\" class=\"context-menu-item\">\n                <mat-icon class=\"icon\" *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n                <span class=\"description\">{{item.name}}</span>\n            </button>\n        </ng-template>\n    </ng-container>\n</mat-menu>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], rowMenuFormatter: [{
@@ -180,16 +176,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                 args: ['menu', { static: true }]
             }] } });
 
-/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable max-lines */
 class EntryTableComponent {
-    get hasNoResult() {
-        return (!this.data || this._data.length === 0) && !this.loading;
-    }
-    constructor(_config, _elementRef, _changeDetectorRef) {
-        this._config = _config;
-        this._elementRef = _elementRef;
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
         this.className = 'entry-table';
+        this._config = inject(ENTRY_TABLE_CONFIG);
+        this._elementRef = inject((ElementRef));
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         this.dataSource = new MatTableDataSource([]);
         this.columns = [];
         // Data
@@ -222,18 +215,43 @@ class EntryTableComponent {
         this.contextMenuItemSelected = new EventEmitter();
         this.selectionColumn = 'selection-column';
         this.contextMenuColumn = 'context-menu-column';
+        this.toTemplateIndex = (template, key) => template[key];
+        this.isTemplateRef = (obj) => obj instanceof TemplateRef;
+        this.getIndex = (index, dataIndex) => typeof index === 'undefined' ? dataIndex : index;
+        this.initializeVariables = () => {
+            this.showPaginator = this.showPaginator ?? this._config.showPaginator;
+            this.showFirstLastButtons = this.showFirstLastButtons ?? this._config.showFirstLastButtons;
+            this.pageSizeOptions = this.pageSizeOptions ?? this._config.pageSizeOptions;
+            this.hidePageSize = this.hidePageSize ?? this._config.hidePageSize;
+            this.noResultText = this.noResultText ?? this._config.noResultsText;
+            this.rowFocusVisible = this.rowFocusVisible ?? this._config.rowFocusVisible;
+            this.displayedColumns = this.columns.filter(item => !item.hide).map(item => item.field);
+            if (this.rowSelectable && !this.displayedColumns.includes(this.selectionColumn)) {
+                this.displayedColumns.unshift(this.selectionColumn);
+            }
+            if (this.showContextMenu && !this.displayedColumns.includes(this.contextMenuColumn)) {
+                this.displayedColumns.push(this.contextMenuColumn);
+            }
+            if (this.rowSelectable) {
+                this.rowSelection = new SelectionModel(this.multiSelectable, this.rowSelected);
+            }
+            if (!this.data) {
+                this.data = [];
+            }
+        };
+        this.convertToKebabCase = (value) => value?.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase();
+    }
+    get hasNoResult() {
+        return (!this.data || this._data.length === 0) && !this.loading;
     }
     detectChanges() {
         this._changeDetectorRef.detectChanges();
     }
-    isTemplateRef(obj) {
-        return obj instanceof TemplateRef;
-    }
     getRowClassList(rowData, index) {
         const classList = {
             selected: this.rowSelection.isSelected(rowData),
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            'mat-row-odd': index % 2,
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            'mat-row-odd': index % 2
         };
         if (this.rowClassFormatter) {
             for (const key of Object.keys(this.rowClassFormatter)) {
@@ -249,25 +267,7 @@ class EntryTableComponent {
         return `${customClasses} ${columnType} ${columnField}`;
     }
     ngOnChanges(changes) {
-        this.showPaginator = this.showPaginator ?? this._config.showPaginator;
-        this.showFirstLastButtons = this.showFirstLastButtons ?? this._config.showFirstLastButtons;
-        this.pageSizeOptions = this.pageSizeOptions ?? this._config.pageSizeOptions;
-        this.hidePageSize = this.hidePageSize ?? this._config.hidePageSize;
-        this.noResultText = this.noResultText ?? this._config.noResultsText;
-        this.rowFocusVisible = this.rowFocusVisible ?? this._config.rowFocusVisible;
-        this.displayedColumns = this.columns.filter(item => !item.hide).map(item => item.field);
-        if (this.rowSelectable && !this.displayedColumns.includes(this.selectionColumn)) {
-            this.displayedColumns.unshift(this.selectionColumn);
-        }
-        if (this.showContextMenu && !this.displayedColumns.includes(this.contextMenuColumn)) {
-            this.displayedColumns.push(this.contextMenuColumn);
-        }
-        if (this.rowSelectable) {
-            this.rowSelection = new SelectionModel(this.multiSelectable, this.rowSelected);
-        }
-        if (!this.data) {
-            this.data = [];
-        }
+        this.initializeVariables();
         if (Array.isArray(this.data)) {
             this._data = this.data;
         }
@@ -282,13 +282,10 @@ class EntryTableComponent {
             this.dataSource.disconnect();
         }
         this.dataSource = new MatTableDataSource(this._data);
-        if (changes.data) {
+        if (changes['data']) {
             this.scrollToTop();
         }
     }
-    getIndex(index, dataIndex) {
-        return typeof index === 'undefined' ? dataIndex : index;
-    }
     isAllSelected() {
         const numSelected = this.rowSelection.selected.length;
         const numRows = this.dataSource.data.filter(row => !this.rowSelectionFormatter.disabled?.(row)).length;
@@ -320,19 +317,13 @@ class EntryTableComponent {
     get shouldShowPaginator() {
         return this.showPaginator && this._data.length > 0;
     }
-    convertToKebabCase(value) {
-        return value?.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryTableComponent, deps: [{ token: ENTRY_TABLE_CONFIG }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: EntryTableComponent, isStandalone: false, selector: "entry-table", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", total: "total", loading: "loading", showPaginator: "showPaginator", pageDisabled: "pageDisabled", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: "hidePageSize", paginationTemplate: "paginationTemplate", sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: "sortDisableClear", sortDisabled: "sortDisabled", sortStart: "sortStart", rowHover: "rowHover", rowStriped: "rowStriped", rowFocusVisible: "rowFocusVisible", multiSelectable: "multiSelectable", rowSelected: "rowSelected", rowSelectable: "rowSelectable", showSelectAllCheckbox: "showSelectAllCheckbox", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", showContextMenu: "showContextMenu", contextMenuItems: "contextMenuItems", contextMenuTemplate: "contextMenuTemplate", rowContextMenuFormatter: "rowContextMenuFormatter", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate" }, outputs: { pageChange: "pageChange", sortChange: "sortChange", rowClick: "rowClick", rowSelectionChange: "rowSelectionChange", contextMenuItemSelected: "contextMenuItemSelected" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Table content -->\n<table mat-table\n        [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-with-data': !hasNoResult }\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [matSortActive]=\"sortActive\"\n        [matSortDirection]=\"sortDirection\"\n        [matSortDisableClear]=\"sortDisableClear\"\n        [matSortDisabled]=\"sortDisabled\"\n        [matSortStart]=\"sortStart\"\n        (matSortChange)=\"sortChange.emit($event)\">\n\n  <!-- Selection column -->\n  <ng-container *ngIf=\"rowSelectable\" [matColumnDef]=\"selectionColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"selection-cell\" aria-label=\"Select rows\">\n      <mat-checkbox aria-label=\"Select all\" *ngIf=\"multiSelectable && showSelectAllCheckbox\"\n                    [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n                    (change)=\"$event ? toggleSelectAllCheckbox() : null\">\n      </mat-checkbox>\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"selection-cell\"\n        (click)=\"$event.stopPropagation()\">\n      <mat-checkbox aria-label=\"Select row\"\n        *ngIf=\"multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-checkbox>\n      <mat-radio-button aria-label=\"Select row\"\n        *ngIf=\"!multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        [value]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-radio-button>\n    </td>\n  </ng-container>\n\n  <!-- Context menu column -->\n  <ng-container *ngIf=\"showContextMenu\" [matColumnDef]=\"contextMenuColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"action-cell\" aria-label=\"Context Menu Actions\"></th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"action-cell\">\n        <ng-template [ngIf]=\"isTemplateRef(contextMenuTemplate)\" [ngIfElse]=\"contextMenuTpl\">\n          <ng-template [ngTemplateOutlet]=\"contextMenuTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #contextMenuTpl>\n          <entry-cell-context-menu\n            [items]=\"contextMenuItems\"\n            [rowData]=\"row\"\n            [rowMenuFormatter]=\"rowContextMenuFormatter\"\n            (selected)=\"contextMenuItemSelected.emit({itemId: $event, rowData: row})\"\n          ></entry-cell-context-menu>\n        </ng-template>\n    </td>\n  </ng-container>\n\n  <ng-container *ngFor=\"let col of columns;\">\n    <ng-container [matColumnDef]=\"col.field\"\n                  [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n      <th mat-header-cell *matHeaderCellDef\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n          <ng-template [ngIf]=\"isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n            </ng-template>\n          </ng-template>\n          <ng-template #headerTpl>\n            <ng-template [ngIf]=\"headerTemplate && isTemplateRef(headerTemplate[col.field])\"\n                          [ngIfElse]=\"defaultHeaderTpl\">\n              <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\n                            [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n              </ng-template>\n            </ng-template>\n          </ng-template>\n          <ng-template #defaultHeaderTpl>\n            <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                  [disabled]=\"!col.sortable\"\n                  [disableClear]=\"col.sortProp?.disableClear\">\n              <span>{{col.header}}</span>\n            </div>\n          </ng-template>\n      </th>\n\n      <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n        <ng-template [ngIf]=\"isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\n          <ng-template [ngTemplateOutlet]=\"cellTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #cellTpl>\n          <ng-template [ngIf]=\"cellTemplate && isTemplateRef(cellTemplate[col.field])\"\n                        [ngIfElse]=\"colDefCellTpl\">\n            <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\n                          [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n            </ng-template>\n          </ng-template>\n        </ng-template>\n        <ng-template #colDefCellTpl>\n          <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\n                        [ngTemplateOutlet]=\"col.cellTemplate ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #defaultCellTpl>\n          <entry-cell [rowData]=\"row\" [colDef]=\"col\"></entry-cell>\n        </ng-template>\n      </td>\n    </ng-container>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n  <tr mat-row\n      *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n      [ngClass]=\"getRowClassList(row, getIndex(index, dataIndex))\"\n      [attr.tabindex]=\"rowFocusVisible ? 0 : -1\"\n      (click)=\"rowClick.emit(row)\"\n      (keydown.enter)=\"rowClick.emit(row)\">\n  </tr>\n</table>\n\n<!-- No results -->\n<div class=\"no-results mat-body-2\" *ngIf=\"hasNoResult\">\n  <ng-template [ngIf]=\"isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\n    <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n  </ng-template>\n  <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\n</div>\n\n<!-- Pagination -->\n<ng-template [ngIf]=\"isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\n  <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n</ng-template>\n<ng-template #defaultPaginationTemplate>\n  <mat-paginator class=\"pagination\" *ngIf=\"shouldShowPaginator\"\n                  [showFirstLastButtons]=\"showFirstLastButtons\"\n                  [length]=\"total\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  [hidePageSize]=\"hidePageSize\"\n                  (page)=\"handlePage($event)\"\n                  [disabled]=\"pageDisabled\">\n  </mat-paginator>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: EntryCellComponent, selector: "entry-cell", inputs: ["rowData", "colDef"] }, { kind: "component", type: EntryCellContextMenuComponent, selector: "entry-cell-context-menu", inputs: ["items", "rowMenuFormatter", "rowData", "triggerIcon", "isSubMenu"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: EntryTableComponent, isStandalone: false, selector: "entry-table", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", total: "total", loading: "loading", showPaginator: "showPaginator", pageDisabled: "pageDisabled", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: "hidePageSize", paginationTemplate: "paginationTemplate", sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: "sortDisableClear", sortDisabled: "sortDisabled", sortStart: "sortStart", rowHover: "rowHover", rowStriped: "rowStriped", rowFocusVisible: "rowFocusVisible", multiSelectable: "multiSelectable", rowSelected: "rowSelected", rowSelectable: "rowSelectable", showSelectAllCheckbox: "showSelectAllCheckbox", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", showContextMenu: "showContextMenu", contextMenuItems: "contextMenuItems", contextMenuTemplate: "contextMenuTemplate", rowContextMenuFormatter: "rowContextMenuFormatter", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", cellTemplate: "cellTemplate" }, outputs: { pageChange: "pageChange", sortChange: "sortChange", rowClick: "rowClick", rowSelectionChange: "rowSelectionChange", contextMenuItemSelected: "contextMenuItemSelected" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Table content -->\n<table mat-table\n        [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-with-data': !hasNoResult }\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [matSortActive]=\"sortActive\"\n        [matSortDirection]=\"sortDirection\"\n        [matSortDisableClear]=\"sortDisableClear\"\n        [matSortDisabled]=\"sortDisabled\"\n        [matSortStart]=\"sortStart\"\n        (matSortChange)=\"sortChange.emit($event)\">\n\n  <!-- Selection column -->\n  <ng-container *ngIf=\"rowSelectable\" [matColumnDef]=\"selectionColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"selection-cell\" aria-label=\"Select rows\">\n      <mat-checkbox aria-label=\"Select all\" *ngIf=\"multiSelectable && showSelectAllCheckbox\"\n                    [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n                    (change)=\"$event ? toggleSelectAllCheckbox() : null\">\n      </mat-checkbox>\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"selection-cell\"\n        (click)=\"$event.stopPropagation()\">\n      <mat-checkbox aria-label=\"Select row\"\n        *ngIf=\"multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-checkbox>\n      <mat-radio-button aria-label=\"Select row\"\n        *ngIf=\"!multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        [value]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-radio-button>\n    </td>\n  </ng-container>\n\n  <!-- Context menu column -->\n  <ng-container *ngIf=\"showContextMenu\" [matColumnDef]=\"contextMenuColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"action-cell\" aria-label=\"Context Menu Actions\"></th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"action-cell\">\n        <ng-template [ngIf]=\"isTemplateRef(contextMenuTemplate)\" [ngIfElse]=\"contextMenuTpl\">\n          <ng-template [ngTemplateOutlet]=\"contextMenuTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #contextMenuTpl>\n          <entry-cell-context-menu\n            [items]=\"contextMenuItems\"\n            [rowData]=\"row\"\n            [rowMenuFormatter]=\"rowContextMenuFormatter\"\n            (selected)=\"contextMenuItemSelected.emit({itemId: $event, rowData: row})\"\n          ></entry-cell-context-menu>\n        </ng-template>\n    </td>\n  </ng-container>\n\n  <ng-container *ngFor=\"let col of columns;\">\n    <ng-container [matColumnDef]=\"col.field\"\n                  [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n      <th mat-header-cell *matHeaderCellDef\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n          <ng-template [ngIf]=\"isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n            </ng-template>\n          </ng-template>\n          <ng-template #headerTpl>\n            <ng-template [ngIf]=\"headerTemplate && isTemplateRef(toTemplateIndex(headerTemplate, col.field))\"\n                          [ngIfElse]=\"defaultHeaderTpl\">\n              <ng-template [ngTemplateOutlet]=\"toTemplateIndex(headerTemplate, col.field)\"\n                            [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n              </ng-template>\n            </ng-template>\n          </ng-template>\n          <ng-template #defaultHeaderTpl>\n            <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                  [disabled]=\"!col.sortable\"\n                  [disableClear]=\"col.sortProp?.disableClear\">\n              <span>{{col.header}}</span>\n            </div>\n          </ng-template>\n      </th>\n\n      <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n        <ng-template [ngIf]=\"isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\n          <ng-template [ngTemplateOutlet]=\"cellTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #cellTpl>\n          <ng-template [ngIf]=\"cellTemplate && isTemplateRef(toTemplateIndex(cellTemplate, col.field))\"\n                        [ngIfElse]=\"colDefCellTpl\">\n            <ng-template [ngTemplateOutlet]=\"toTemplateIndex(cellTemplate, col.field)\"\n                          [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n            </ng-template>\n          </ng-template>\n        </ng-template>\n        <ng-template #colDefCellTpl>\n          <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\n                        [ngTemplateOutlet]=\"col.cellTemplate ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #defaultCellTpl>\n          <entry-cell [rowData]=\"row\" [colDef]=\"col\"></entry-cell>\n        </ng-template>\n      </td>\n    </ng-container>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n  <tr mat-row\n      *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n      [ngClass]=\"getRowClassList(row, getIndex(index, dataIndex))\"\n      [attr.tabindex]=\"rowFocusVisible ? 0 : -1\"\n      (click)=\"rowClick.emit(row)\"\n      (keydown.enter)=\"rowClick.emit(row)\">\n  </tr>\n</table>\n\n<!-- No results -->\n<div class=\"no-results mat-body-2\" *ngIf=\"hasNoResult\">\n  <ng-template [ngIf]=\"isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\n    <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n  </ng-template>\n  <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\n</div>\n\n<!-- Pagination -->\n<ng-template [ngIf]=\"isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\n  <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n</ng-template>\n<ng-template #defaultPaginationTemplate>\n  <mat-paginator class=\"pagination\" *ngIf=\"shouldShowPaginator\"\n                  [showFirstLastButtons]=\"showFirstLastButtons\"\n                  [length]=\"total\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  [hidePageSize]=\"hidePageSize\"\n                  (page)=\"handlePage($event)\"\n                  [disabled]=\"pageDisabled\">\n  </mat-paginator>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: EntryCellComponent, selector: "entry-cell", inputs: ["rowData", "colDef"] }, { kind: "component", type: EntryCellContextMenuComponent, selector: "entry-cell-context-menu", inputs: ["items", "rowMenuFormatter", "rowData", "triggerIcon", "isSubMenu"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'entry-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- Table content -->\n<table mat-table\n        [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-with-data': !hasNoResult }\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [matSortActive]=\"sortActive\"\n        [matSortDirection]=\"sortDirection\"\n        [matSortDisableClear]=\"sortDisableClear\"\n        [matSortDisabled]=\"sortDisabled\"\n        [matSortStart]=\"sortStart\"\n        (matSortChange)=\"sortChange.emit($event)\">\n\n  <!-- Selection column -->\n  <ng-container *ngIf=\"rowSelectable\" [matColumnDef]=\"selectionColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"selection-cell\" aria-label=\"Select rows\">\n      <mat-checkbox aria-label=\"Select all\" *ngIf=\"multiSelectable && showSelectAllCheckbox\"\n                    [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n                    (change)=\"$event ? toggleSelectAllCheckbox() : null\">\n      </mat-checkbox>\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"selection-cell\"\n        (click)=\"$event.stopPropagation()\">\n      <mat-checkbox aria-label=\"Select row\"\n        *ngIf=\"multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-checkbox>\n      <mat-radio-button aria-label=\"Select row\"\n        *ngIf=\"!multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        [value]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-radio-button>\n    </td>\n  </ng-container>\n\n  <!-- Context menu column -->\n  <ng-container *ngIf=\"showContextMenu\" [matColumnDef]=\"contextMenuColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"action-cell\" aria-label=\"Context Menu Actions\"></th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"action-cell\">\n        <ng-template [ngIf]=\"isTemplateRef(contextMenuTemplate)\" [ngIfElse]=\"contextMenuTpl\">\n          <ng-template [ngTemplateOutlet]=\"contextMenuTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #contextMenuTpl>\n          <entry-cell-context-menu\n            [items]=\"contextMenuItems\"\n            [rowData]=\"row\"\n            [rowMenuFormatter]=\"rowContextMenuFormatter\"\n            (selected)=\"contextMenuItemSelected.emit({itemId: $event, rowData: row})\"\n          ></entry-cell-context-menu>\n        </ng-template>\n    </td>\n  </ng-container>\n\n  <ng-container *ngFor=\"let col of columns;\">\n    <ng-container [matColumnDef]=\"col.field\"\n                  [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n      <th mat-header-cell *matHeaderCellDef\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n          <ng-template [ngIf]=\"isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n            </ng-template>\n          </ng-template>\n          <ng-template #headerTpl>\n            <ng-template [ngIf]=\"headerTemplate && isTemplateRef(headerTemplate[col.field])\"\n                          [ngIfElse]=\"defaultHeaderTpl\">\n              <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\n                            [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n              </ng-template>\n            </ng-template>\n          </ng-template>\n          <ng-template #defaultHeaderTpl>\n            <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                  [disabled]=\"!col.sortable\"\n                  [disableClear]=\"col.sortProp?.disableClear\">\n              <span>{{col.header}}</span>\n            </div>\n          </ng-template>\n      </th>\n\n      <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n        <ng-template [ngIf]=\"isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\n          <ng-template [ngTemplateOutlet]=\"cellTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #cellTpl>\n          <ng-template [ngIf]=\"cellTemplate && isTemplateRef(cellTemplate[col.field])\"\n                        [ngIfElse]=\"colDefCellTpl\">\n            <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\n                          [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n            </ng-template>\n          </ng-template>\n        </ng-template>\n        <ng-template #colDefCellTpl>\n          <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\n                        [ngTemplateOutlet]=\"col.cellTemplate ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #defaultCellTpl>\n          <entry-cell [rowData]=\"row\" [colDef]=\"col\"></entry-cell>\n        </ng-template>\n      </td>\n    </ng-container>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n  <tr mat-row\n      *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n      [ngClass]=\"getRowClassList(row, getIndex(index, dataIndex))\"\n      [attr.tabindex]=\"rowFocusVisible ? 0 : -1\"\n      (click)=\"rowClick.emit(row)\"\n      (keydown.enter)=\"rowClick.emit(row)\">\n  </tr>\n</table>\n\n<!-- No results -->\n<div class=\"no-results mat-body-2\" *ngIf=\"hasNoResult\">\n  <ng-template [ngIf]=\"isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\n    <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n  </ng-template>\n  <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\n</div>\n\n<!-- Pagination -->\n<ng-template [ngIf]=\"isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\n  <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n</ng-template>\n<ng-template #defaultPaginationTemplate>\n  <mat-paginator class=\"pagination\" *ngIf=\"shouldShowPaginator\"\n                  [showFirstLastButtons]=\"showFirstLastButtons\"\n                  [length]=\"total\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  [hidePageSize]=\"hidePageSize\"\n                  (page)=\"handlePage($event)\"\n                  [disabled]=\"pageDisabled\">\n  </mat-paginator>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: EntryTableConfig, decorators: [{
-                    type: Inject,
-                    args: [ENTRY_TABLE_CONFIG]
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { className: [{
+            args: [{ selector: 'entry-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- Table content -->\n<table mat-table\n        [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-with-data': !hasNoResult }\"\n        [dataSource]=\"dataSource\"\n        matSort\n        [matSortActive]=\"sortActive\"\n        [matSortDirection]=\"sortDirection\"\n        [matSortDisableClear]=\"sortDisableClear\"\n        [matSortDisabled]=\"sortDisabled\"\n        [matSortStart]=\"sortStart\"\n        (matSortChange)=\"sortChange.emit($event)\">\n\n  <!-- Selection column -->\n  <ng-container *ngIf=\"rowSelectable\" [matColumnDef]=\"selectionColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"selection-cell\" aria-label=\"Select rows\">\n      <mat-checkbox aria-label=\"Select all\" *ngIf=\"multiSelectable && showSelectAllCheckbox\"\n                    [checked]=\"rowSelection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !isAllSelected()\"\n                    (change)=\"$event ? toggleSelectAllCheckbox() : null\">\n      </mat-checkbox>\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"selection-cell\"\n        (click)=\"$event.stopPropagation()\">\n      <mat-checkbox aria-label=\"Select row\"\n        *ngIf=\"multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-checkbox>\n      <mat-radio-button aria-label=\"Select row\"\n        *ngIf=\"!multiSelectable && !(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row))\"\n        [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row)\"\n        [checked]=\"rowSelection.isSelected(row)\"\n        [value]=\"rowSelection.isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-radio-button>\n    </td>\n  </ng-container>\n\n  <!-- Context menu column -->\n  <ng-container *ngIf=\"showContextMenu\" [matColumnDef]=\"contextMenuColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"action-cell\" aria-label=\"Context Menu Actions\"></th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n        class=\"action-cell\">\n        <ng-template [ngIf]=\"isTemplateRef(contextMenuTemplate)\" [ngIfElse]=\"contextMenuTpl\">\n          <ng-template [ngTemplateOutlet]=\"contextMenuTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #contextMenuTpl>\n          <entry-cell-context-menu\n            [items]=\"contextMenuItems\"\n            [rowData]=\"row\"\n            [rowMenuFormatter]=\"rowContextMenuFormatter\"\n            (selected)=\"contextMenuItemSelected.emit({itemId: $event, rowData: row})\"\n          ></entry-cell-context-menu>\n        </ng-template>\n    </td>\n  </ng-container>\n\n  <ng-container *ngFor=\"let col of columns;\">\n    <ng-container [matColumnDef]=\"col.field\"\n                  [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n      <th mat-header-cell *matHeaderCellDef\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n          <ng-template [ngIf]=\"isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\"\n                          [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n            </ng-template>\n          </ng-template>\n          <ng-template #headerTpl>\n            <ng-template [ngIf]=\"headerTemplate && isTemplateRef(toTemplateIndex(headerTemplate, col.field))\"\n                          [ngIfElse]=\"defaultHeaderTpl\">\n              <ng-template [ngTemplateOutlet]=\"toTemplateIndex(headerTemplate, col.field)\"\n                            [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n              </ng-template>\n            </ng-template>\n          </ng-template>\n          <ng-template #defaultHeaderTpl>\n            <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                  [disabled]=\"!col.sortable\"\n                  [disableClear]=\"col.sortProp?.disableClear\">\n              <span>{{col.header}}</span>\n            </div>\n          </ng-template>\n      </th>\n\n      <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n          [class]=\"getColumnClassList(col)\"\n          [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n          [ngStyle]=\"{'width': col.width, 'min-width': col.width}\">\n        <ng-template [ngIf]=\"isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\n          <ng-template [ngTemplateOutlet]=\"cellTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #cellTpl>\n          <ng-template [ngIf]=\"cellTemplate && isTemplateRef(toTemplateIndex(cellTemplate, col.field))\"\n                        [ngIfElse]=\"colDefCellTpl\">\n            <ng-template [ngTemplateOutlet]=\"toTemplateIndex(cellTemplate, col.field)\"\n                          [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n            </ng-template>\n          </ng-template>\n        </ng-template>\n        <ng-template #colDefCellTpl>\n          <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\n                        [ngTemplateOutlet]=\"col.cellTemplate ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: col }\">\n          </ng-template>\n        </ng-template>\n        <ng-template #defaultCellTpl>\n          <entry-cell [rowData]=\"row\" [colDef]=\"col\"></entry-cell>\n        </ng-template>\n      </td>\n    </ng-container>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n  <tr mat-row\n      *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n      [ngClass]=\"getRowClassList(row, getIndex(index, dataIndex))\"\n      [attr.tabindex]=\"rowFocusVisible ? 0 : -1\"\n      (click)=\"rowClick.emit(row)\"\n      (keydown.enter)=\"rowClick.emit(row)\">\n  </tr>\n</table>\n\n<!-- No results -->\n<div class=\"no-results mat-body-2\" *ngIf=\"hasNoResult\">\n  <ng-template [ngIf]=\"isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\n    <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n  </ng-template>\n  <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\n</div>\n\n<!-- Pagination -->\n<ng-template [ngIf]=\"isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\n  <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n</ng-template>\n<ng-template #defaultPaginationTemplate>\n  <mat-paginator class=\"pagination\" *ngIf=\"shouldShowPaginator\"\n                  [showFirstLastButtons]=\"showFirstLastButtons\"\n                  [length]=\"total\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  [hidePageSize]=\"hidePageSize\"\n                  (page)=\"handlePage($event)\"\n                  [disabled]=\"pageDisabled\">\n  </mat-paginator>\n</ng-template>\n" }]
+        }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }], displayedColumns: [{
@@ -359,10 +350,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                 type: Input
             }], hidePageSize: [{
                 type: Input
-            }], pageChange: [{
-                type: Output
             }], paginationTemplate: [{
                 type: Input
+            }], pageChange: [{
+                type: Output
             }], sortActive: [{
                 type: Input
             }], sortDirection: [{
@@ -418,8 +409,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
             }] } });
 
 class EntryTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: EntryTableModule, declarations: [EntryTableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: EntryTableModule, declarations: [EntryTableComponent,
             EntryCellComponent,
             EntryCellContextMenuComponent,
             EntryCellFormattedValueComponent], imports: [CommonModule,
@@ -436,7 +427,7 @@ class EntryTableModule {
             EntryCellComponent,
             EntryCellContextMenuComponent,
             EntryCellFormattedValueComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryTableModule, providers: [
             { provide: DEFAULT_PERCENTAGE_MULTIPLIER, useValue: 1 }
         ], imports: [CommonModule,
             FormsModule,
@@ -450,7 +441,7 @@ class EntryTableModule {
             CommonModule,
             MatButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: EntryTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: EntryTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [