@enigmatry/entry-components 20.3.1-preview.1 → 21.1.1

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

@@ -1,29 +1,28 @@
-import * as i4$1 from '@angular/material/paginator';
+import * as i5 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 export { PageEvent } from '@angular/material/paginator';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, ChangeDetectionStrategy, Component, EventEmitter, ViewChild, Output, ElementRef, ChangeDetectorRef, TemplateRef, HostBinding, NgModule } from '@angular/core';
+import { InjectionToken, input, inject, ChangeDetectionStrategy, Component, computed, output, viewChild, ElementRef, signal, linkedSignal, TemplateRef, effect, 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';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/material/sort';
-import { MatSortModule } from '@angular/material/sort';
-import * as i5 from '@angular/material/checkbox';
+import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i6 from '@angular/material/radio';
+import * as i4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i2 from '@angular/material/icon';
+import * as i2$1 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i1$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { DatePipe, DecimalPipe, PercentPipe, CurrencyPipe, CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/menu';
+import * as i1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import { FormsModule } from '@angular/forms';
 
-class EntryTableConfig {
+class EntryTableConfiguration {
     constructor(config = {}) {
         /** Show paginator, default is true */
         this.showPaginator = true;
@@ -59,9 +58,9 @@ class EntryTableConfig {
  * - noResultsText: 'No results found'
  * - rowFocusVisible: false
  */
-const ENTRY_TABLE_CONFIG = createInjectionToken(new EntryTableConfig());
+const ENTRY_TABLE_CONFIGURATION = createInjectionToken(new EntryTableConfiguration());
 /** Provide entry table config */
-const provideEntryTableConfig = (config) => provideConfig(ENTRY_TABLE_CONFIG, () => new EntryTableConfig(config));
+const provideEntryTableConfiguration = (config) => provideConfig(ENTRY_TABLE_CONFIGURATION, () => new EntryTableConfiguration(config));
 /** Default percentage multiplier injection token */
 const DEFAULT_PERCENTAGE_MULTIPLIER = new InjectionToken('');
 
@@ -71,349 +70,248 @@ class PagedQuery {
     constructor() {
         this.pageNumber = defaultPageNumber;
         this.pageSize = defaultPageSize;
-        this.getValueIfNotEmpty = (value) => value ? value : undefined;
-    }
-    sortChange(sort) {
-        if (sort.active) {
-            this.sortBy = sort.active;
-            this.sortDirection = this.getValueIfNotEmpty(sort.direction);
-            this.pageNumber = defaultPageNumber;
-        }
-    }
-    pageChange(page) {
-        this.pageNumber = page.pageIndex + 1;
-        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);
-    }
-    getRouteQueryParams() {
-        return {
-            pageNumber: this.pageNumber,
-            pageSize: this.pageSize,
-            sortBy: this.sortBy,
-            sortDirection: this.sortDirection
+        this.sortChange = (sort) => {
+            if (sort.active) {
+                this.sortBy = sort.active;
+                this.sortDirection = this.getValueIfNotEmpty(sort.direction);
+                this.pageNumber = defaultPageNumber;
+            }
+        };
+        this.pageChange = (page) => {
+            this.pageNumber = page.pageIndex + 1;
+            this.pageSize = page.pageSize;
         };
+        this.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.getRouteQueryParams = () => {
+            return {
+                pageNumber: this.pageNumber,
+                pageSize: this.pageSize,
+                sortBy: this.sortBy,
+                sortDirection: this.sortDirection
+            };
+        };
+        this.getValueIfNotEmpty = (value) => value ? value : undefined;
     }
 }
 
 class EntryCellFormattedValueComponent {
     constructor() {
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+        this.typeParameter = input(...(ngDevMode ? [undefined, { debugName: "typeParameter" }] : /* istanbul ignore next */ []));
         this.defaultPercentageMultiplier = inject(DEFAULT_PERCENTAGE_MULTIPLIER);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryCellFormattedValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntryCellFormattedValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntryCellFormattedValueComponent, isStandalone: true, selector: "entry-cell-formatted-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, typeParameter: { classPropertyName: "typeParameter", publicName: "typeParameter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (type()) {\n  @case('boolean'){\n    {{value() ? '\\u2713' : ''}}\n  }\n  @case('number'){\n    {{value() | number: typeParameter()?.digitsInfo : typeParameter()?.locale}}\n  }\n  @case('currency'){\n    {{value() | currency: typeParameter()?.currencyCode : typeParameter()?.display : typeParameter()?.digitsInfo :\n      typeParameter()?.locale}}\n  }\n  @case('percent'){\n    {{+(value() ?? 0) * (typeParameter()?.multiplier ?? defaultPercentageMultiplier) | percent: typeParameter()?.digitsInfo : typeParameter()?.locale}}\n  }\n  @case('date'){\n    {{value() | date: typeParameter()?.format : typeParameter()?.timezone : typeParameter()?.locale}}\n  }\n  @case('link'){\n    <a [href]=\"value()\" target=\"_blank\">{{value()}}</a>\n  }\n  @default{\n    {{value()}}\n  }\n}", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryCellFormattedValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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 ?? 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
-            }], typeParameter: [{
-                type: Input
-            }] } });
+            args: [{ imports: [DatePipe, DecimalPipe, PercentPipe, CurrencyPipe], selector: 'entry-cell-formatted-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (type()) {\n  @case('boolean'){\n    {{value() ? '\\u2713' : ''}}\n  }\n  @case('number'){\n    {{value() | number: typeParameter()?.digitsInfo : typeParameter()?.locale}}\n  }\n  @case('currency'){\n    {{value() | currency: typeParameter()?.currencyCode : typeParameter()?.display : typeParameter()?.digitsInfo :\n      typeParameter()?.locale}}\n  }\n  @case('percent'){\n    {{+(value() ?? 0) * (typeParameter()?.multiplier ?? defaultPercentageMultiplier) | percent: typeParameter()?.digitsInfo : typeParameter()?.locale}}\n  }\n  @case('date'){\n    {{value() | date: typeParameter()?.format : typeParameter()?.timezone : typeParameter()?.locale}}\n  }\n  @case('link'){\n    <a [href]=\"value()\" target=\"_blank\">{{value()}}</a>\n  }\n  @default{\n    {{value()}}\n  }\n}" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], typeParameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeParameter", required: false }] }] } });
 
 class EntryCellComponent {
     constructor() {
-        this.getCellValue = (rowData, colDef) => {
-            const keys = colDef.field ? colDef.field.split('.') : [];
+        this.rowData = input.required(...(ngDevMode ? [{ debugName: "rowData" }] : /* istanbul ignore next */ []));
+        this.columnDefinition = input.required(...(ngDevMode ? [{ debugName: "columnDefinition" }] : /* istanbul ignore next */ []));
+        this.value = computed(() => this.getCellValue(this.rowData(), this.columnDefinition()), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.printableValue = computed(() => this.value() ?? '', ...(ngDevMode ? [{ debugName: "printableValue" }] : /* istanbul ignore next */ []));
+        this.getCellValue = (rowData, columnDefinition) => {
+            const keys = columnDefinition.field ? columnDefinition.field.split('.') : [];
             return keys.reduce((data, key) => data && data[key], rowData);
         };
     }
-    get value() {
-        return this.getCellValue(this.rowData, this.colDef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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: "21.2.8", ngImport: i0, type: EntryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntryCellComponent, isStandalone: true, selector: "entry-cell", inputs: { rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, columnDefinition: { classPropertyName: "columnDefinition", publicName: "columnDefinition", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<entry-cell-formatted-value [value]=\"printableValue()\" [type]=\"columnDefinition().type!\"\n    [typeParameter]=\"columnDefinition().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: "20.3.10", ngImport: i0, type: EntryCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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>" }]
-        }], propDecorators: { rowData: [{
-                type: Input
-            }], colDef: [{
-                type: Input
-            }] } });
+            args: [{ imports: [EntryCellFormattedValueComponent], selector: 'entry-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<entry-cell-formatted-value [value]=\"printableValue()\" [type]=\"columnDefinition().type!\"\n    [typeParameter]=\"columnDefinition().typeParameter\"></entry-cell-formatted-value>" }]
+        }], propDecorators: { rowData: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowData", required: true }] }], columnDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefinition", required: true }] }] } });
 
 class EntryCellContextMenuComponent {
     constructor() {
-        this.items = [];
-        this.triggerIcon = 'more_vert';
-        this.isSubMenu = false;
-        this.selected = new EventEmitter();
-        this.menuItems = [];
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.rowMenuFormatter = input(...(ngDevMode ? [undefined, { debugName: "rowMenuFormatter" }] : /* istanbul ignore next */ []));
+        this.rowData = input(...(ngDevMode ? [undefined, { debugName: "rowData" }] : /* istanbul ignore next */ []));
+        this.triggerIcon = input('more_vert', ...(ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
+        this.isSubMenu = input(false, ...(ngDevMode ? [{ debugName: "isSubMenu" }] : /* istanbul ignore next */ []));
+        this.selected = output();
+        this.menuItems = computed(() => (this.rowMenuFormatter()?.items
+            ? this.rowMenuFormatter()?.items(this.rowData)
+            : this.items()) ?? [], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.subMenu = viewChild('subMenu', ...(ngDevMode ? [{ debugName: "subMenu" }] : /* istanbul ignore next */ []));
     }
-    ngOnInit() {
-        this.menuItems = this.rowMenuFormatter?.items
-            ? this.rowMenuFormatter.items(this.rowData)
-            : this.items;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntryCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntryCellContextMenuComponent, isStandalone: true, selector: "entry-cell-context-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, rowMenuFormatter: { classPropertyName: "rowMenuFormatter", publicName: "rowMenuFormatter", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, isSubMenu: { classPropertyName: "isSubMenu", publicName: "isSubMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "subMenu", first: true, predicate: ["subMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(!isSubMenu())\n{\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n        <mat-icon>{{triggerIcon()}}</mat-icon>\n    </button>\n}\n\n<mat-menu #menu=\"matMenu\" class=\"entry-table-menu\" role=\"menu\">\n    @for(menuItem of menuItems(); track menuItem.id)\n    {\n        <button mat-menu-item [disabled]=\"menuItem.disabled\"\n            [matMenuTriggerFor]=\"menuItem.items?.length ? (subMenu()?.menu() ?? null) : null\"\n            (click)=\"!menuItem.items?.length && selected.emit(menuItem.id)\" class=\"context-menu-item\">\n\n            @if(menuItem.icon)\n            {\n                <mat-icon class=\"icon\">{{menuItem.icon}}</mat-icon>\n            }\n\n            <span class=\"description\">{{menuItem.name}}</span>\n\n            @if(menuItem.items?.length)\n            {\n                <entry-cell-context-menu #subMenu [items]=\"menuItem.items ?? []\" [rowData]=\"rowData()\" [isSubMenu]=\"true\"\n                    (selected)=\"selected.emit($event)\">\n                </entry-cell-context-menu>\n            }\n        </button>\n    }\n</mat-menu>", dependencies: [{ kind: "component", type: EntryCellContextMenuComponent, selector: "entry-cell-context-menu", inputs: ["items", "rowMenuFormatter", "rowData", "triggerIcon", "isSubMenu"], outputs: ["selected"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.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: i1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryCellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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>" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], rowMenuFormatter: [{
-                type: Input
-            }], rowData: [{
-                type: Input
-            }], triggerIcon: [{
-                type: Input
-            }], isSubMenu: [{
-                type: Input
-            }], selected: [{
-                type: Output
-            }], menu: [{
-                type: ViewChild,
-                args: ['menu', { static: true }]
-            }] } });
+            args: [{ selector: 'entry-cell-context-menu', imports: [MatMenuModule, MatButtonModule, MatIconModule, EntryCellContextMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(!isSubMenu())\n{\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\">\n        <mat-icon>{{triggerIcon()}}</mat-icon>\n    </button>\n}\n\n<mat-menu #menu=\"matMenu\" class=\"entry-table-menu\" role=\"menu\">\n    @for(menuItem of menuItems(); track menuItem.id)\n    {\n        <button mat-menu-item [disabled]=\"menuItem.disabled\"\n            [matMenuTriggerFor]=\"menuItem.items?.length ? (subMenu()?.menu() ?? null) : null\"\n            (click)=\"!menuItem.items?.length && selected.emit(menuItem.id)\" class=\"context-menu-item\">\n\n            @if(menuItem.icon)\n            {\n                <mat-icon class=\"icon\">{{menuItem.icon}}</mat-icon>\n            }\n\n            <span class=\"description\">{{menuItem.name}}</span>\n\n            @if(menuItem.items?.length)\n            {\n                <entry-cell-context-menu #subMenu [items]=\"menuItem.items ?? []\" [rowData]=\"rowData()\" [isSubMenu]=\"true\"\n                    (selected)=\"selected.emit($event)\">\n                </entry-cell-context-menu>\n            }\n        </button>\n    }\n</mat-menu>" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], rowMenuFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowMenuFormatter", required: false }] }], rowData: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowData", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], isSubMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenu", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], subMenu: [{ type: i0.ViewChild, args: ['subMenu', { isSignal: true }] }] } });
 
 /* eslint-disable max-lines */
 class EntryTableComponent {
     constructor() {
-        this.className = 'entry-table';
-        this._config = inject(ENTRY_TABLE_CONFIG);
-        this._elementRef = inject((ElementRef));
-        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this.configuration = inject(ENTRY_TABLE_CONFIGURATION);
+        this.elementRef = inject((ElementRef));
         this.dataSource = new MatTableDataSource([]);
-        this.columns = [];
+        this.selectionColumn = 'selection-column';
+        this.contextMenuColumn = 'context-menu-column';
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.displayedColumns = computed(() => {
+            const result = this.columns().filter(item => !item.hide)
+                .map(item => item.field);
+            if (this.rowSelectable() && !result.includes(this.selectionColumn)) {
+                result.unshift(this.selectionColumn);
+            }
+            if (this.showContextMenu() && !result.includes(this.contextMenuColumn)) {
+                result.push(this.contextMenuColumn);
+            }
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
         // Data
-        this._data = [];
-        this.data = [];
-        this.total = 0;
-        this.loading = false;
-        this.pageDisabled = false;
-        this.pageIndex = 0;
-        this.pageChange = new EventEmitter();
-        this.sortDisableClear = false;
-        this.sortDisabled = false;
-        this.sortStart = 'asc';
-        this.sortChange = new EventEmitter();
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.trueData = signal(([]), ...(ngDevMode ? [{ debugName: "trueData" }] : /* istanbul ignore next */ []));
+        this.total = linkedSignal(() => 0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        // Pagination
+        this.showPaginator = input(this.configuration.showPaginator, ...(ngDevMode ? [{ debugName: "showPaginator" }] : /* istanbul ignore next */ []));
+        this.pageDisabled = input(this.configuration.showFirstLastButtons, ...(ngDevMode ? [{ debugName: "pageDisabled" }] : /* istanbul ignore next */ []));
+        this.showFirstLastButtons = input(false, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : /* istanbul ignore next */ []));
+        this.pageIndex = linkedSignal(() => 0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+        this.pageSize = linkedSignal(() => 0, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.pageSizeOptions = input(this.configuration.pageSizeOptions, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+        this.hidePageSize = input(this.configuration.hidePageSize, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : /* istanbul ignore next */ []));
+        this.paginationTemplate = input(...(ngDevMode ? [undefined, { debugName: "paginationTemplate" }] : /* istanbul ignore next */ []));
+        this.shouldShowPaginator = computed(() => {
+            return this.showPaginator() && this.trueData()?.length;
+        }, ...(ngDevMode ? [{ debugName: "shouldShowPaginator" }] : /* istanbul ignore next */ []));
+        this.pageChange = output();
+        // Sort
+        this.sortActive = input(...(ngDevMode ? [undefined, { debugName: "sortActive" }] : /* istanbul ignore next */ []));
+        this.sortDirection = input(...(ngDevMode ? [undefined, { debugName: "sortDirection" }] : /* istanbul ignore next */ []));
+        this.sortDisableClear = input(false, ...(ngDevMode ? [{ debugName: "sortDisableClear" }] : /* istanbul ignore next */ []));
+        this.sortDisabled = input(false, ...(ngDevMode ? [{ debugName: "sortDisabled" }] : /* istanbul ignore next */ []));
+        this.sortStart = input('asc', ...(ngDevMode ? [{ debugName: "sortStart" }] : /* istanbul ignore next */ []));
+        this.sortChange = output();
         // Row
-        this.rowHover = false;
-        this.rowStriped = false;
-        this.rowClick = new EventEmitter();
+        this.rowHover = input(false, ...(ngDevMode ? [{ debugName: "rowHover" }] : /* istanbul ignore next */ []));
+        this.rowStriped = input(false, ...(ngDevMode ? [{ debugName: "rowStriped" }] : /* istanbul ignore next */ []));
+        this.rowFocusVisible = input(this.configuration.rowFocusVisible, ...(ngDevMode ? [{ debugName: "rowFocusVisible" }] : /* istanbul ignore next */ []));
+        this.rowClick = output();
         // Row selection
-        this.multiSelectable = true;
-        this.rowSelection = new SelectionModel(true, []);
-        this.rowSelected = [];
-        this.rowSelectable = false;
-        this.showSelectAllCheckbox = true;
-        this.rowSelectionFormatter = {};
-        this.rowSelectionChange = new EventEmitter();
+        this.multiSelectable = input(true, ...(ngDevMode ? [{ debugName: "multiSelectable" }] : /* istanbul ignore next */ []));
+        this.rowSelection = linkedSignal(() => this.rowSelectable() ?
+            new SelectionModel(this.multiSelectable(), this.rowSelected()) : new SelectionModel(true, []), ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+        this.rowSelected = input([], ...(ngDevMode ? [{ debugName: "rowSelected" }] : /* istanbul ignore next */ []));
+        this.rowSelectable = input(false, ...(ngDevMode ? [{ debugName: "rowSelectable" }] : /* istanbul ignore next */ []));
+        this.showSelectAllCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showSelectAllCheckbox" }] : /* istanbul ignore next */ []));
+        this.rowSelectionFormatter = input({}, ...(ngDevMode ? [{ debugName: "rowSelectionFormatter" }] : /* istanbul ignore next */ []));
+        this.rowClassFormatter = input(...(ngDevMode ? [undefined, { debugName: "rowClassFormatter" }] : /* istanbul ignore next */ []));
         // Context menu
-        this.showContextMenu = false;
-        this.contextMenuItems = [];
-        this.contextMenuItemSelected = new EventEmitter();
-        this.selectionColumn = 'selection-column';
-        this.contextMenuColumn = 'context-menu-column';
+        this.showContextMenu = input(false, ...(ngDevMode ? [{ debugName: "showContextMenu" }] : /* istanbul ignore next */ []));
+        this.contextMenuItems = input([], ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : /* istanbul ignore next */ []));
+        this.contextMenuTemplate = input(null, ...(ngDevMode ? [{ debugName: "contextMenuTemplate" }] : /* istanbul ignore next */ []));
+        this.rowContextMenuFormatter = input(...(ngDevMode ? [undefined, { debugName: "rowContextMenuFormatter" }] : /* istanbul ignore next */ []));
+        this.contextMenuItemSelected = output();
+        // No Result
+        this.noResultText = input(this.configuration.noResultsText, ...(ngDevMode ? [{ debugName: "noResultText" }] : /* istanbul ignore next */ []));
+        this.noResultTemplate = input(null, ...(ngDevMode ? [{ debugName: "noResultTemplate" }] : /* istanbul ignore next */ []));
+        this.hasNoResult = computed(() => !this.trueData()?.length && !this.loading(), ...(ngDevMode ? [{ debugName: "hasNoResult" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = input(...(ngDevMode ? [undefined, { debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.unknownTemplateAsTemplate = (template) => template;
+        this.cellTemplate = input(...(ngDevMode ? [undefined, { debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
         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);
+        this.isTemplateRef = (value) => value instanceof TemplateRef;
+        this.getRowClassList = (rowData, index) => {
+            const classList = {
+                selected: this.rowSelection().isSelected(rowData),
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                'mat-row-odd': index % 2
+            };
+            const rowFormatter = this.rowClassFormatter();
+            if (rowFormatter) {
+                Object.keys(rowFormatter).forEach(key => {
+                    classList[key] = rowFormatter[key](rowData);
+                });
             }
-            if (this.rowSelectable) {
-                this.rowSelection = new SelectionModel(this.multiSelectable, this.rowSelected);
+            return classList;
+        };
+        this.getColumnClassList = (columnDefinition) => {
+            const customClasses = columnDefinition.class ?? '';
+            const columnType = columnDefinition.type ?? '';
+            const columnField = `cell-${this.convertToKebabCase(columnDefinition.field)}`;
+            return `${customClasses} ${columnType} ${columnField}`;
+        };
+        this.getIndex = (index, dataIndex) => typeof index === 'undefined' ? dataIndex : index;
+        this.allRowsSelected = () => {
+            const selectedCount = this.rowSelection().selected.length;
+            const rowCount = this.dataSource.data.filter(row => !this.rowSelectionFormatter().disabled?.(row)).length;
+            return selectedCount === rowCount;
+        };
+        this.toggleSelectAllCheckbox = () => {
+            if (this.allRowsSelected()) {
+                this.rowSelection().clear();
             }
-            if (!this.data) {
-                this.data = [];
+            else {
+                this.dataSource.data.forEach(row => {
+                    if (!this.rowSelectionFormatter().disabled?.(row)) {
+                        this.rowSelection().select(row);
+                    }
+                });
             }
+            this.rowSelection.set(this.rowSelection());
         };
-        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();
-    }
-    getRowClassList(rowData, index) {
-        const classList = {
-            selected: this.rowSelection.isSelected(rowData),
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-            'mat-row-odd': index % 2
+        this.toggleRowSelection = (row) => {
+            this.rowSelection().toggle(row);
+            this.rowSelection.set(this.rowSelection());
         };
-        if (this.rowClassFormatter) {
-            for (const key of Object.keys(this.rowClassFormatter)) {
-                classList[key] = this.rowClassFormatter[key](rowData);
-            }
-        }
-        return classList;
-    }
-    getColumnClassList(colDef) {
-        const customClasses = colDef.class ?? '';
-        const columnType = colDef.type ?? '';
-        const columnField = `cell-${this.convertToKebabCase(colDef.field)}`;
-        return `${customClasses} ${columnType} ${columnField}`;
-    }
-    ngOnChanges(changes) {
-        this.initializeVariables();
-        if (Array.isArray(this.data)) {
-            this._data = this.data;
-        }
-        else {
-            this._page = this.data;
-            this._data = this._page.items ?? [];
-            this.total = this._page.totalCount ?? 0;
-            this.pageSize = this._page.pageSize ?? this.pageSize ?? this._config.pageSize;
-            this.pageIndex = this._page.pageNumber ? this._page.pageNumber - 1 : this.pageIndex;
-        }
-        if (this.dataSource) {
-            this.dataSource.disconnect();
-        }
-        this.dataSource = new MatTableDataSource(this._data);
-        if (changes['data']) {
-            this.scrollToTop();
-        }
-    }
-    isAllSelected() {
-        const numSelected = this.rowSelection.selected.length;
-        const numRows = this.dataSource.data.filter(row => !this.rowSelectionFormatter.disabled?.(row)).length;
-        return numSelected === numRows;
-    }
-    toggleSelectAllCheckbox() {
-        if (this.isAllSelected()) {
-            this.rowSelection.clear();
-            this.rowSelectionChange.emit(this.rowSelection.selected);
-            return;
-        }
-        this.dataSource.data.forEach(row => {
-            if (!this.rowSelectionFormatter.disabled?.(row)) {
-                this.rowSelection.select(row);
+        this.handlePage = (event) => {
+            this.pageChange.emit(event);
+        };
+        this.scrollToTop = () => {
+            this.elementRef.nativeElement.scrollTop = 0;
+        };
+        this.convertToKebabCase = (value) => value?.replace(/([a-z0-9])([A-Z])/gu, '$1-$2').toLowerCase();
+        effect(() => {
+            if (this.data()) {
+                let trueData;
+                if (Array.isArray(this.data())) {
+                    trueData = this.data();
+                }
+                else {
+                    const page = this.data();
+                    this.total.set(page.totalCount ?? 0);
+                    this.pageSize.set(page.pageSize ?? this.pageSize() ?? this.configuration.pageSize);
+                    this.pageIndex.set(page.pageNumber ? page.pageNumber - 1 : this.pageIndex());
+                    trueData = this.data()?.items ?? [];
+                }
+                if (this.dataSource) {
+                    this.dataSource.disconnect();
+                }
+                this.dataSource = new MatTableDataSource(trueData);
+                this.trueData.set(trueData);
+                this.scrollToTop();
             }
         });
-        this.rowSelectionChange.emit(this.rowSelection.selected);
-    }
-    toggleRowSelection(row) {
-        this.rowSelection.toggle(row);
-        this.rowSelectionChange.emit(this.rowSelection.selected);
-    }
-    handlePage(e) {
-        this.pageChange.emit(e);
-    }
-    scrollToTop() {
-        this._elementRef.nativeElement.scrollTop = 0;
     }
-    get shouldShowPaginator() {
-        return this.showPaginator && this._data.length > 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntryTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntryTableComponent, isStandalone: true, selector: "entry-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageDisabled: { classPropertyName: "pageDisabled", publicName: "pageDisabled", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplate: { classPropertyName: "paginationTemplate", publicName: "paginationTemplate", isSignal: true, isRequired: false, transformFunction: null }, sortActive: { classPropertyName: "sortActive", publicName: "sortActive", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortDisableClear: { classPropertyName: "sortDisableClear", publicName: "sortDisableClear", isSignal: true, isRequired: false, transformFunction: null }, sortDisabled: { classPropertyName: "sortDisabled", publicName: "sortDisabled", isSignal: true, isRequired: false, transformFunction: null }, sortStart: { classPropertyName: "sortStart", publicName: "sortStart", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, rowStriped: { classPropertyName: "rowStriped", publicName: "rowStriped", isSignal: true, isRequired: false, transformFunction: null }, rowFocusVisible: { classPropertyName: "rowFocusVisible", publicName: "rowFocusVisible", isSignal: true, isRequired: false, transformFunction: null }, multiSelectable: { classPropertyName: "multiSelectable", publicName: "multiSelectable", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, showSelectAllCheckbox: { classPropertyName: "showSelectAllCheckbox", publicName: "showSelectAllCheckbox", isSignal: true, isRequired: false, transformFunction: null }, rowSelectionFormatter: { classPropertyName: "rowSelectionFormatter", publicName: "rowSelectionFormatter", isSignal: true, isRequired: false, transformFunction: null }, rowClassFormatter: { classPropertyName: "rowClassFormatter", publicName: "rowClassFormatter", isSignal: true, isRequired: false, transformFunction: null }, showContextMenu: { classPropertyName: "showContextMenu", publicName: "showContextMenu", isSignal: true, isRequired: false, transformFunction: null }, contextMenuItems: { classPropertyName: "contextMenuItems", publicName: "contextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, contextMenuTemplate: { classPropertyName: "contextMenuTemplate", publicName: "contextMenuTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowContextMenuFormatter: { classPropertyName: "rowContextMenuFormatter", publicName: "rowContextMenuFormatter", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, noResultTemplate: { classPropertyName: "noResultTemplate", publicName: "noResultTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", rowClick: "rowClick", contextMenuItemSelected: "contextMenuItemSelected" }, host: { classAttribute: "entry-table" }, ngImport: i0, template: "<!-- Table content -->\n<table mat-table [class.mat-table-hover]=\"rowHover()\" [class.mat-table-striped]=\"rowStriped()\"\n  [class.mat-table-with-data]=\"!hasNoResult()\" [dataSource]=\"dataSource\" matSort [matSortActive]=\"sortActive()!\"\n  [matSortDirection]=\"sortDirection()!\" [matSortDisableClear]=\"sortDisableClear()\" [matSortDisabled]=\"sortDisabled()\"\n  [matSortStart]=\"sortStart()\" (matSortChange)=\"sortChange.emit($event)\">\n\n  <!-- Selection column -->\n  @if(rowSelectable())\n  {\n  <ng-container [matColumnDef]=\"selectionColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"selection-cell\" aria-label=\"Select rows\">\n      @if(multiSelectable() && showSelectAllCheckbox())\n      {\n      <mat-checkbox aria-label=\"Select all\" [checked]=\"rowSelection().hasValue() && allRowsSelected()\"\n        [indeterminate]=\"rowSelection().hasValue() && !allRowsSelected()\"\n        (change)=\"$event ? toggleSelectAllCheckbox() : null\">\n      </mat-checkbox>\n      }\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\" class=\"selection-cell\"\n      (click)=\"$event.stopPropagation()\">\n      @if(multiSelectable() && !(rowSelectionFormatter().hideCheckbox && rowSelectionFormatter().hideCheckbox!(row)))\n      {\n      <mat-checkbox aria-label=\"Select row\"\n        [disabled]=\"rowSelectionFormatter().disabled && rowSelectionFormatter().disabled!(row)\"\n        [checked]=\"rowSelection().isSelected(row)\" (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-checkbox>\n      }\n\n      @if(!multiSelectable() && !(rowSelectionFormatter().hideCheckbox && rowSelectionFormatter().hideCheckbox!(row)))\n      {\n      <mat-radio-button aria-label=\"Select row\"\n        [disabled]=\"rowSelectionFormatter().disabled && rowSelectionFormatter().disabled!(row)\"\n        [checked]=\"rowSelection().isSelected(row)\" [value]=\"rowSelection().isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-radio-button>\n      }\n    </td>\n  </ng-container>\n  }\n\n  <!-- Context menu column -->\n  @if(showContextMenu())\n  {\n  <ng-container [matColumnDef]=\"contextMenuColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"action-cell\" aria-label=\"Context Menu Actions\"></th>\n\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\" class=\"action-cell\">\n      @if(isTemplateRef(contextMenuTemplate()))\n      {\n      <ng-template [ngTemplateOutlet]=\"contextMenuTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row }\">\n      </ng-template>\n      }\n      @else{\n      <entry-cell-context-menu [items]=\"contextMenuItems()\" [rowData]=\"row\"\n        [rowMenuFormatter]=\"rowContextMenuFormatter()\"\n        (selected)=\"contextMenuItemSelected.emit({itemId: $event, rowData: row})\"></entry-cell-context-menu>\n      }\n    </td>\n  </ng-container>\n  }\n\n  @for(column of columns(); track column.field)\n  {\n  <ng-container [matColumnDef]=\"column.field\" [sticky]=\"column.pinned==='left'\" [stickyEnd]=\"column.pinned==='right'\">\n    <th mat-header-cell *matHeaderCellDef [class]=\"getColumnClassList(column)\"\n      [class.mat-table-sticky-left]=\"column.pinned === 'left'\"\n      [class.mat-table-sticky-right]=\"column.pinned === 'right'\"\n      [style]=\"{'width': column.width, 'min-width': column.width}\">\n      @if(isTemplateRef(headerTemplate()))\n      {\n      <ng-template [ngTemplateOutlet]=\"unknownTemplateAsTemplate(headerTemplate())\"\n        [ngTemplateOutletContext]=\"{ $implicit: column, colDef: column }\">\n      </ng-template>\n      }\n      @else if(headerTemplate() && isTemplateRef(toTemplateIndex(unknownTemplateAsTemplate(headerTemplate()),\n      column.field))) {\n      <ng-template [ngTemplateOutlet]=\"toTemplateIndex(unknownTemplateAsTemplate(headerTemplate()), column.field)\"\n        [ngTemplateOutletContext]=\"{ $implicit: column, colDef: column }\">\n      </ng-template>\n      }\n      @else {\n      <div [mat-sort-header]=\"column.sortProperties?.id || column.field\" [disabled]=\"!column.sortable\"\n        [disableClear]=\"column.sortProperties?.disableClear\">\n        <span>{{column.header}}</span>\n      </div>\n      }\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n      [class]=\"getColumnClassList(column)\" [class.mat-table-sticky-left]=\"column.pinned === 'left'\"\n      [class.mat-table-sticky-right]=\"column.pinned === 'right'\"\n      [style]=\"{'width': column.width, 'min-width': column.width}\">\n      @if(isTemplateRef(cellTemplate()))\n      {\n      <ng-template [ngTemplateOutlet]=\"unknownTemplateAsTemplate(cellTemplate())\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: column }\">\n      </ng-template>\n      }\n      @else if(cellTemplate() && isTemplateRef(toTemplateIndex(unknownTemplateAsTemplate(cellTemplate()),\n      column.field)))\n      {\n      <ng-template [ngTemplateOutlet]=\"toTemplateIndex(unknownTemplateAsTemplate(cellTemplate()), column.field)\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: column }\">\n      </ng-template>\n      }\n      @else if(column.cellTemplate) {\n      <ng-template [ngTemplateOutlet]=\"column.cellTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: column }\">\n      </ng-template>\n      }\n      @else {\n      <entry-cell [rowData]=\"row\" [columnDefinition]=\"column\"></entry-cell>\n      }\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n  <tr mat-row *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns();\"\n    [class]=\"getRowClassList(row, getIndex(index, dataIndex))\" [attr.tabindex]=\"rowFocusVisible() ? 0 : -1\"\n    (click)=\"rowClick.emit(row)\" (keydown.enter)=\"rowClick.emit(row)\">\n  </tr>\n</table>\n\n<!-- No results -->\n@if(hasNoResult())\n{\n<div class=\"no-results mat-body-2\">\n  @if(isTemplateRef(noResultTemplate()))\n  {\n  <ng-template [ngTemplateOutlet]=\"noResultTemplate()\"></ng-template>\n  }\n  @else {\n  {{noResultText()}}\n  }\n</div>\n}\n<!-- Pagination -->\n@if(isTemplateRef(paginationTemplate()))\n{\n<ng-template [ngTemplateOutlet]=\"paginationTemplate()\"></ng-template>\n}\n@else if(shouldShowPaginator()) {\n<mat-paginator class=\"pagination\" [showFirstLastButtons]=\"showFirstLastButtons()\" [length]=\"total()\"\n  [pageIndex]=\"pageIndex()\" [pageSize]=\"pageSize()\" [pageSizeOptions]=\"pageSizeOptions()\"\n  [hidePageSize]=\"hidePageSize()\" (page)=\"handlePage($event)\" [disabled]=\"pageDisabled()\">\n</mat-paginator>\n}", dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.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: "ngmodule", type: MatRadioModule }, { kind: "component", type: i4.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: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: EntryCellComponent, selector: "entry-cell", inputs: ["rowData", "columnDefinition"] }, { 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: "20.3.10", ngImport: i0, type: EntryTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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(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: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], total: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], showPaginator: [{
-                type: Input
-            }], pageDisabled: [{
-                type: Input
-            }], showFirstLastButtons: [{
-                type: Input
-            }], pageIndex: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], pageSizeOptions: [{
-                type: Input
-            }], hidePageSize: [{
-                type: Input
-            }], paginationTemplate: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }], sortActive: [{
-                type: Input
-            }], sortDirection: [{
-                type: Input
-            }], sortDisableClear: [{
-                type: Input
-            }], sortDisabled: [{
-                type: Input
-            }], sortStart: [{
-                type: Input
-            }], sortChange: [{
-                type: Output
-            }], rowHover: [{
-                type: Input
-            }], rowStriped: [{
-                type: Input
-            }], rowFocusVisible: [{
-                type: Input
-            }], rowClick: [{
-                type: Output
-            }], multiSelectable: [{
-                type: Input
-            }], rowSelected: [{
-                type: Input
-            }], rowSelectable: [{
-                type: Input
-            }], showSelectAllCheckbox: [{
-                type: Input
-            }], rowSelectionFormatter: [{
-                type: Input
-            }], rowClassFormatter: [{
-                type: Input
-            }], rowSelectionChange: [{
-                type: Output
-            }], showContextMenu: [{
-                type: Input
-            }], contextMenuItems: [{
-                type: Input
-            }], contextMenuTemplate: [{
-                type: Input
-            }], rowContextMenuFormatter: [{
-                type: Input
-            }], contextMenuItemSelected: [{
-                type: Output
-            }], noResultText: [{
-                type: Input
-            }], noResultTemplate: [{
-                type: Input
-            }], headerTemplate: [{
-                type: Input
-            }], cellTemplate: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'entry-table', host: { class: 'entry-table' }, imports: [MatTableModule, MatSortModule, MatCheckboxModule, MatRadioModule, MatPaginatorModule, EntryCellComponent, EntryCellContextMenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Table content -->\n<table mat-table [class.mat-table-hover]=\"rowHover()\" [class.mat-table-striped]=\"rowStriped()\"\n  [class.mat-table-with-data]=\"!hasNoResult()\" [dataSource]=\"dataSource\" matSort [matSortActive]=\"sortActive()!\"\n  [matSortDirection]=\"sortDirection()!\" [matSortDisableClear]=\"sortDisableClear()\" [matSortDisabled]=\"sortDisabled()\"\n  [matSortStart]=\"sortStart()\" (matSortChange)=\"sortChange.emit($event)\">\n\n  <!-- Selection column -->\n  @if(rowSelectable())\n  {\n  <ng-container [matColumnDef]=\"selectionColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"selection-cell\" aria-label=\"Select rows\">\n      @if(multiSelectable() && showSelectAllCheckbox())\n      {\n      <mat-checkbox aria-label=\"Select all\" [checked]=\"rowSelection().hasValue() && allRowsSelected()\"\n        [indeterminate]=\"rowSelection().hasValue() && !allRowsSelected()\"\n        (change)=\"$event ? toggleSelectAllCheckbox() : null\">\n      </mat-checkbox>\n      }\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\" class=\"selection-cell\"\n      (click)=\"$event.stopPropagation()\">\n      @if(multiSelectable() && !(rowSelectionFormatter().hideCheckbox && rowSelectionFormatter().hideCheckbox!(row)))\n      {\n      <mat-checkbox aria-label=\"Select row\"\n        [disabled]=\"rowSelectionFormatter().disabled && rowSelectionFormatter().disabled!(row)\"\n        [checked]=\"rowSelection().isSelected(row)\" (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-checkbox>\n      }\n\n      @if(!multiSelectable() && !(rowSelectionFormatter().hideCheckbox && rowSelectionFormatter().hideCheckbox!(row)))\n      {\n      <mat-radio-button aria-label=\"Select row\"\n        [disabled]=\"rowSelectionFormatter().disabled && rowSelectionFormatter().disabled!(row)\"\n        [checked]=\"rowSelection().isSelected(row)\" [value]=\"rowSelection().isSelected(row)\"\n        (change)=\"$event ? toggleRowSelection(row) : null\">\n      </mat-radio-button>\n      }\n    </td>\n  </ng-container>\n  }\n\n  <!-- Context menu column -->\n  @if(showContextMenu())\n  {\n  <ng-container [matColumnDef]=\"contextMenuColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"action-cell\" aria-label=\"Context Menu Actions\"></th>\n\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\" class=\"action-cell\">\n      @if(isTemplateRef(contextMenuTemplate()))\n      {\n      <ng-template [ngTemplateOutlet]=\"contextMenuTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row }\">\n      </ng-template>\n      }\n      @else{\n      <entry-cell-context-menu [items]=\"contextMenuItems()\" [rowData]=\"row\"\n        [rowMenuFormatter]=\"rowContextMenuFormatter()\"\n        (selected)=\"contextMenuItemSelected.emit({itemId: $event, rowData: row})\"></entry-cell-context-menu>\n      }\n    </td>\n  </ng-container>\n  }\n\n  @for(column of columns(); track column.field)\n  {\n  <ng-container [matColumnDef]=\"column.field\" [sticky]=\"column.pinned==='left'\" [stickyEnd]=\"column.pinned==='right'\">\n    <th mat-header-cell *matHeaderCellDef [class]=\"getColumnClassList(column)\"\n      [class.mat-table-sticky-left]=\"column.pinned === 'left'\"\n      [class.mat-table-sticky-right]=\"column.pinned === 'right'\"\n      [style]=\"{'width': column.width, 'min-width': column.width}\">\n      @if(isTemplateRef(headerTemplate()))\n      {\n      <ng-template [ngTemplateOutlet]=\"unknownTemplateAsTemplate(headerTemplate())\"\n        [ngTemplateOutletContext]=\"{ $implicit: column, colDef: column }\">\n      </ng-template>\n      }\n      @else if(headerTemplate() && isTemplateRef(toTemplateIndex(unknownTemplateAsTemplate(headerTemplate()),\n      column.field))) {\n      <ng-template [ngTemplateOutlet]=\"toTemplateIndex(unknownTemplateAsTemplate(headerTemplate()), column.field)\"\n        [ngTemplateOutletContext]=\"{ $implicit: column, colDef: column }\">\n      </ng-template>\n      }\n      @else {\n      <div [mat-sort-header]=\"column.sortProperties?.id || column.field\" [disabled]=\"!column.sortable\"\n        [disableClear]=\"column.sortProperties?.disableClear\">\n        <span>{{column.header}}</span>\n      </div>\n      }\n    </th>\n    <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n      [class]=\"getColumnClassList(column)\" [class.mat-table-sticky-left]=\"column.pinned === 'left'\"\n      [class.mat-table-sticky-right]=\"column.pinned === 'right'\"\n      [style]=\"{'width': column.width, 'min-width': column.width}\">\n      @if(isTemplateRef(cellTemplate()))\n      {\n      <ng-template [ngTemplateOutlet]=\"unknownTemplateAsTemplate(cellTemplate())\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: column }\">\n      </ng-template>\n      }\n      @else if(cellTemplate() && isTemplateRef(toTemplateIndex(unknownTemplateAsTemplate(cellTemplate()),\n      column.field)))\n      {\n      <ng-template [ngTemplateOutlet]=\"toTemplateIndex(unknownTemplateAsTemplate(cellTemplate()), column.field)\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: column }\">\n      </ng-template>\n      }\n      @else if(column.cellTemplate) {\n      <ng-template [ngTemplateOutlet]=\"column.cellTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: getIndex(index, dataIndex), colDef: column }\">\n      </ng-template>\n      }\n      @else {\n      <entry-cell [rowData]=\"row\" [columnDefinition]=\"column\"></entry-cell>\n      }\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n  <tr mat-row *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns();\"\n    [class]=\"getRowClassList(row, getIndex(index, dataIndex))\" [attr.tabindex]=\"rowFocusVisible() ? 0 : -1\"\n    (click)=\"rowClick.emit(row)\" (keydown.enter)=\"rowClick.emit(row)\">\n  </tr>\n</table>\n\n<!-- No results -->\n@if(hasNoResult())\n{\n<div class=\"no-results mat-body-2\">\n  @if(isTemplateRef(noResultTemplate()))\n  {\n  <ng-template [ngTemplateOutlet]=\"noResultTemplate()\"></ng-template>\n  }\n  @else {\n  {{noResultText()}}\n  }\n</div>\n}\n<!-- Pagination -->\n@if(isTemplateRef(paginationTemplate()))\n{\n<ng-template [ngTemplateOutlet]=\"paginationTemplate()\"></ng-template>\n}\n@else if(shouldShowPaginator()) {\n<mat-paginator class=\"pagination\" [showFirstLastButtons]=\"showFirstLastButtons()\" [length]=\"total()\"\n  [pageIndex]=\"pageIndex()\" [pageSize]=\"pageSize()\" [pageSizeOptions]=\"pageSizeOptions()\"\n  [hidePageSize]=\"hidePageSize()\" (page)=\"handlePage($event)\" [disabled]=\"pageDisabled()\">\n</mat-paginator>\n}" }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], pageDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageDisabled", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], paginationTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTemplate", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortActive", required: false }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], sortDisableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisableClear", required: false }] }], sortDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDisabled", required: false }] }], sortStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortStart", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], rowStriped: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowStriped", required: false }] }], rowFocusVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowFocusVisible", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], multiSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectable", required: false }] }], rowSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelected", required: false }] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], showSelectAllCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAllCheckbox", required: false }] }], rowSelectionFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectionFormatter", required: false }] }], rowClassFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClassFormatter", required: false }] }], showContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContextMenu", required: false }] }], contextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuItems", required: false }] }], contextMenuTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuTemplate", required: false }] }], rowContextMenuFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowContextMenuFormatter", required: false }] }], contextMenuItemSelected: [{ type: i0.Output, args: ["contextMenuItemSelected"] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], noResultTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultTemplate", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }] } });
 
 class EntryTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: EntryTableModule, declarations: [EntryTableComponent,
-            EntryCellComponent,
-            EntryCellContextMenuComponent,
-            EntryCellFormattedValueComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntryTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: EntryTableModule, imports: [CommonModule,
             FormsModule,
             MatTableModule,
             MatSortModule,
@@ -423,11 +321,15 @@ class EntryTableModule {
             MatMenuModule,
             MatRadioModule,
             CommonModule,
-            MatButtonModule], exports: [EntryTableComponent,
+            MatButtonModule,
+            EntryTableComponent,
+            EntryCellComponent,
+            EntryCellContextMenuComponent,
+            EntryCellFormattedValueComponent], exports: [EntryTableComponent,
             EntryCellComponent,
             EntryCellContextMenuComponent,
             EntryCellFormattedValueComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntryTableModule, providers: [
             { provide: DEFAULT_PERCENTAGE_MULTIPLIER, useValue: 1 }
         ], imports: [CommonModule,
             FormsModule,
@@ -439,9 +341,11 @@ class EntryTableModule {
             MatMenuModule,
             MatRadioModule,
             CommonModule,
-            MatButtonModule] }); }
+            MatButtonModule,
+            EntryTableComponent,
+            EntryCellContextMenuComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EntryTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntryTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -455,9 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                         MatMenuModule,
                         MatRadioModule,
                         CommonModule,
-                        MatButtonModule
-                    ],
-                    declarations: [
+                        MatButtonModule,
                         EntryTableComponent,
                         EntryCellComponent,
                         EntryCellContextMenuComponent,
@@ -479,5 +381,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_PERCENTAGE_MULTIPLIER, ENTRY_TABLE_CONFIG, EntryCellComponent, EntryCellContextMenuComponent, EntryCellFormattedValueComponent, EntryTableComponent, EntryTableConfig, EntryTableModule, PagedQuery, defaultPageNumber, defaultPageSize, provideEntryTableConfig };
+export { DEFAULT_PERCENTAGE_MULTIPLIER, ENTRY_TABLE_CONFIGURATION, EntryCellComponent, EntryCellContextMenuComponent, EntryCellFormattedValueComponent, EntryTableComponent, EntryTableConfiguration, EntryTableModule, PagedQuery, defaultPageNumber, defaultPageSize, provideEntryTableConfiguration };
 //# sourceMappingURL=enigmatry-entry-components-table.mjs.map