@kuzntsv/uikit 1.0.74 → 1.0.76

package/fesm2022/kuzntsv-uikit-ui.mjs

@@ -15,15 +15,15 @@ import { Overlay } from "@angular/cdk/overlay";
 import { ComponentPortal } from "@angular/cdk/portal";
 import { COMMA, ENTER } from "@angular/cdk/keycodes";
 import { AsyncPipe } from "@angular/common";
-import * as i2 from "@angular/material/autocomplete";
+import * as i2$1 from "@angular/material/autocomplete";
 import { MatAutocompleteModule, MatOption } from "@angular/material/autocomplete";
-import * as i3$1 from "@angular/material/chips";
+import * as i3$2 from "@angular/material/chips";
 import { MatChipsModule } from "@angular/material/chips";
 import { catchError, debounceTime, distinctUntilChanged, map as map$1, startWith as startWith$1 } from "rxjs/operators";
 import { DateAdapter, MAT_DATE_FORMATS, MatOptgroup, MatOption as MatOption$1, NativeDateAdapter } from "@angular/material/core";
 import { MatDateRangeInput, MatDateRangePicker, MatDatepickerToggle, MatEndDate, MatStartDate } from "@angular/material/datepicker";
 import { MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogClose, MatDialogConfig, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
-import * as i1 from "@angular/material/tooltip";
+import * as i4 from "@angular/material/tooltip";
 import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
 import { MatDivider } from "@angular/material/divider";
 import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
@@ -31,14 +31,17 @@ import { MatToolbar } from "@angular/material/toolbar";
 import z, { z as z$1 } from "zod";
 import { DomSanitizer } from "@angular/platform-browser";
 import { MatProgressSpinner } from "@angular/material/progress-spinner";
-import * as i3 from "@angular/cdk/scrolling";
+import * as i3$1 from "@angular/cdk/scrolling";
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { MatFormField as MatFormField$1, MatLabel as MatLabel$1, MatSelect } from "@angular/material/select";
 import { SelectionModel } from "@angular/cdk/collections";
 import { MatCheckbox } from "@angular/material/checkbox";
-import { MatPaginator } from "@angular/material/paginator";
-import { MatSort, MatSortHeader } from "@angular/material/sort";
-import { MatCell, MatCellDef, MatColumnDef, MatFooterCell, MatFooterCellDef, MatFooterRow, MatFooterRowDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableDataSource, MatTableModule } from "@angular/material/table";
+import * as i3 from "@angular/material/paginator";
+import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
+import * as i2 from "@angular/material/sort";
+import { MatSort, MatSortModule } from "@angular/material/sort";
+import * as i1 from "@angular/material/table";
+import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 var LoginFormComponent = class LoginFormComponent {
 	pending = input(false, ...ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []);
 	errorMessage = input("", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
@@ -575,7 +578,7 @@ var BaseMatChipComponent = class BaseMatChipComponent {
 			},
 			{
 				kind: "component",
-				type: i2.MatAutocomplete,
+				type: i2$1.MatAutocomplete,
 				selector: "mat-autocomplete",
 				inputs: [
 					"aria-label",
@@ -599,7 +602,7 @@ var BaseMatChipComponent = class BaseMatChipComponent {
 			},
 			{
 				kind: "component",
-				type: i2.MatOption,
+				type: i2$1.MatOption,
 				selector: "mat-option",
 				inputs: [
 					"value",
@@ -611,7 +614,7 @@ var BaseMatChipComponent = class BaseMatChipComponent {
 			},
 			{
 				kind: "directive",
-				type: i2.MatAutocompleteTrigger,
+				type: i2$1.MatAutocompleteTrigger,
 				selector: "input[matAutocomplete], textarea[matAutocomplete]",
 				inputs: [
 					"matAutocomplete",
@@ -641,7 +644,7 @@ var BaseMatChipComponent = class BaseMatChipComponent {
 			},
 			{
 				kind: "component",
-				type: i3$1.MatChipGrid,
+				type: i3$2.MatChipGrid,
 				selector: "mat-chip-grid",
 				inputs: [
 					"disabled",
@@ -654,7 +657,7 @@ var BaseMatChipComponent = class BaseMatChipComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.MatChipInput,
+				type: i3$2.MatChipInput,
 				selector: "input[matChipInputFor]",
 				inputs: [
 					"matChipInputFor",
@@ -671,12 +674,12 @@ var BaseMatChipComponent = class BaseMatChipComponent {
 			},
 			{
 				kind: "directive",
-				type: i3$1.MatChipRemove,
+				type: i3$2.MatChipRemove,
 				selector: "[matChipRemove]"
 			},
 			{
 				kind: "component",
-				type: i3$1.MatChipRow,
+				type: i3$2.MatChipRow,
 				selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]",
 				inputs: ["editable"],
 				outputs: ["edited"]
@@ -3912,7 +3915,7 @@ var BaseSelectAutocompleteWithVsComponent = class BaseSelectAutocompleteWithVsCo
 			},
 			{
 				kind: "component",
-				type: i2.MatAutocomplete,
+				type: i2$1.MatAutocomplete,
 				selector: "mat-autocomplete",
 				inputs: [
 					"aria-label",
@@ -3936,7 +3939,7 @@ var BaseSelectAutocompleteWithVsComponent = class BaseSelectAutocompleteWithVsCo
 			},
 			{
 				kind: "component",
-				type: i2.MatOption,
+				type: i2$1.MatOption,
 				selector: "mat-option",
 				inputs: [
 					"value",
@@ -3948,7 +3951,7 @@ var BaseSelectAutocompleteWithVsComponent = class BaseSelectAutocompleteWithVsCo
 			},
 			{
 				kind: "directive",
-				type: i2.MatAutocompleteTrigger,
+				type: i2$1.MatAutocompleteTrigger,
 				selector: "input[matAutocomplete], textarea[matAutocomplete]",
 				inputs: [
 					"matAutocomplete",
@@ -4004,7 +4007,7 @@ var BaseSelectAutocompleteWithVsComponent = class BaseSelectAutocompleteWithVsCo
 			},
 			{
 				kind: "directive",
-				type: i3.CdkFixedSizeVirtualScroll,
+				type: i3$1.CdkFixedSizeVirtualScroll,
 				selector: "cdk-virtual-scroll-viewport[itemSize]",
 				inputs: [
 					"itemSize",
@@ -4014,7 +4017,7 @@ var BaseSelectAutocompleteWithVsComponent = class BaseSelectAutocompleteWithVsCo
 			},
 			{
 				kind: "directive",
-				type: i3.CdkVirtualForOf,
+				type: i3$1.CdkVirtualForOf,
 				selector: "[cdkVirtualFor][cdkVirtualForOf]",
 				inputs: [
 					"cdkVirtualForOf",
@@ -4025,7 +4028,7 @@ var BaseSelectAutocompleteWithVsComponent = class BaseSelectAutocompleteWithVsCo
 			},
 			{
 				kind: "component",
-				type: i3.CdkVirtualScrollViewport,
+				type: i3$1.CdkVirtualScrollViewport,
 				selector: "cdk-virtual-scroll-viewport",
 				inputs: ["orientation", "appendOnly"],
 				outputs: ["scrolledIndexChange"]
@@ -4428,61 +4431,47 @@ var TableComponent = class TableComponent {
 	defaultPageSize = 10;
 	dataSource = new MatTableDataSource();
 	selection = new SelectionModel();
-	displayedColumns;
-	subscription = new Subscription();
+	displayedColumns = computed(() => {
+		return ["select", ...this.columnOptions()?.filter((c) => !c.hide).map((item) => item.name) || []];
+	}, ...ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []);
 	constructor() {
 		effect(() => {
-			this.dataSource.data = this.data();
-			const selected = this.selection.selected;
-			this.selection.clear();
-			this.data().filter((v) => selected.map((s) => JSON.stringify(s)).includes(JSON.stringify(v))).map((d) => {
-				this.selection.select(d);
-			});
+			this.dataSource.data = [...this.data()];
+			if (this.selection) {
+				const selected = this.selection.selected;
+				this.selection.clear();
+				this.data().filter((v) => selected.map((s) => JSON.stringify(s)).includes(JSON.stringify(v))).forEach((d) => this.selection.select(d));
+			}
+		});
+		effect(() => {
+			const paginator = this.paginator();
+			if (paginator) {
+				paginator._intl.itemsPerPageLabel = "Записей на странице";
+				paginator._intl.firstPageLabel = "Первая страница";
+				paginator._intl.previousPageLabel = "Предыдущая страница";
+				paginator._intl.nextPageLabel = "Следующая страница";
+				paginator._intl.lastPageLabel = "Последняя страница";
+				paginator._intl.changes.next();
+			}
 		});
 	}
 	ngOnInit() {
-		this.displayedColumns = ["select"].concat(this.columnOptions()?.filter((c) => !c.hide).map((item) => item.name) || []);
 		this.selection = new SelectionModel(this.allowMultiSelect());
+		this.selection.changed.subscribe((change) => {
+			this.selectionChange.emit(change.source.selected);
+		});
 	}
-	ngOnDestroy() {
-		if (this.subscription) this.subscription.unsubscribe();
+	onPageEvent(event) {
+		this.pageStateChange.emit({
+			pageIndex: event.pageIndex,
+			pageSize: event.pageSize
+		});
 	}
-	ngAfterViewInit() {
-		const paginator = this.paginator();
-		if (paginator) {
-			paginator._intl.itemsPerPageLabel = "Записей на странице";
-			paginator._intl.firstPageLabel = "Первая страница";
-			paginator._intl.previousPageLabel = "Предыдущая страница";
-			paginator._intl.nextPageLabel = "Следующая страница";
-			paginator._intl.lastPageLabel = "Последняя страница";
-			const subs = paginator.page.subscribe((page) => {
-				const pageState = {
-					pageIndex: page.pageIndex,
-					pageSize: page.pageSize
-				};
-				this.pageState.set(pageState);
-				this.pageStateChange.emit(pageState);
-			});
-			this.subscription.add(subs);
-		}
-		const sortValue = this.sort();
-		if (sortValue) {
-			const subs = sortValue.sortChange.subscribe((sort) => {
-				const sortState = {
-					sortActive: sort.active,
-					sortDirection: sort.direction
-				};
-				this.sortState.set(sortState);
-				this.sortStateChange.emit(sortState);
-			});
-			this.subscription.add(subs);
-		}
-		if (this.selection) {
-			const subs = this.selection.changed.subscribe((change) => {
-				this.selectionChange.emit(change.source.selected);
-			});
-			this.subscription.add(subs);
-		}
+	onSortEvent(sort) {
+		this.sortStateChange.emit({
+			sortActive: sort.active,
+			sortDirection: sort.direction
+		});
 	}
 	isAllSelected() {
 		return this.selection.selected.length === this.dataSource.data.length;
@@ -4621,18 +4610,103 @@ var TableComponent = class TableComponent {
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"component-container\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"dataSource\"\r\n      matSort\r\n      [matSortActive]=\"sortState().sortActive || ''\"\r\n      [matSortDirection]=\"sortState().sortDirection\"\r\n      matSortDisableClear>\r\n\r\n      <!-- Выбор строки Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (allowMultiSelect()) {\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n        @if (footer()) {\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        }\r\n      </ng-container>\r\n\r\n      @for (item of columnOptions(); track item) {\r\n        <ng-container matColumnDef={{item.name}}>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n          @if (!item.format) {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footer) {\r\n                  <strong>{{ getTotal(item.name) }}</strong>\r\n                }\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }            \r\n          }\r\n          @if (item.format === 'pre-wrap') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'link') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'linkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a  [href]=\"element[item.name]\" target=\"_blank\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLink') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLinkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a [routerLink]=\"[element[item.name]]\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'checkbox') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (item.icon) {\r\n                <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n              } \r\n              @if (item.symbol) {\r\n                <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icons') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.icons) {\r\n                <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n                [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n              } \r\n              @if (item.symbols) {\r\n                <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'actions') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.actions) {\r\n                <div class=\"actions-container\">\r\n                  @for (action of item.actions; track action) {\r\n                    @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n                      <button mat-icon-button\r\n                        (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n                        (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n                        [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n                        [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n                        @if (action.icon) {\r\n                          <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n                        }\r\n                        @if (action.symbol) {\r\n                          <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n                        }\r\n                        {{ action.title }}\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }  \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'image') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <img\r\n                  [src]=\"element[item.name]\"\r\n                  [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n                  [class]=\"item.classList ? item.classList : ''\"\r\n                />\r\n              } \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n      </ng-container>\r\n    }\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" colspan=\"9999\">\r\n        Нет данных для отображения\r\n      </td>\r\n    </tr>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" \r\n      (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n      class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n    </tr>\r\n    @if (footer()) {\r\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    }\r\n  </table>\r\n  <div style=\"visibility: hidden; position: fixed\"\r\n    [style.left]=\"contextMenuPosition.x\"\r\n    [style.top]=\"contextMenuPosition.y\"\r\n    [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n  </div>\r\n  <mat-menu #contextMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-id=\"id\">\r\n      @for (menuItem of opt(); track menuItem) {\r\n        @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <button mat-menu-item\r\n            (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n            (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n            [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n            @if (menuItem.icon) {\r\n              <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n            }\r\n            @if (menuItem.symbol) {\r\n              <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n            }\r\n            {{ menuItem.title }}\r\n          </button>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n  [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n  [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n  [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n  showFirstLastButtons\r\n  itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n",
+		template: "<div class=\"component-container\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"dataSource\"\r\n      matSort\r\n      [matSortActive]=\"sortState().sortActive\"\r\n      [matSortDirection]=\"sortState().sortDirection\"\r\n      (matSortChange)=\"onSortEvent($event)\"\r\n      matSortDisableClear>\r\n\r\n      <!-- Выбор строки Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (allowMultiSelect()) {\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n        @if (footer()) {\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        }\r\n      </ng-container>\r\n\r\n      @for (item of columnOptions(); track item) {\r\n        <ng-container matColumnDef={{item.name}}>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n          @if (!item.format) {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footer) {\r\n                  <strong>{{ getTotal(item.name) }}</strong>\r\n                }\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }            \r\n          }\r\n          @if (item.format === 'pre-wrap') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'link') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'linkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a  [href]=\"element[item.name]\" target=\"_blank\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLink') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLinkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a [routerLink]=\"[element[item.name]]\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'checkbox') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (item.icon) {\r\n                <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n              } \r\n              @if (item.symbol) {\r\n                <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icons') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.icons) {\r\n                <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n                [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n              } \r\n              @if (item.symbols) {\r\n                <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'actions') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.actions) {\r\n                <div class=\"actions-container\">\r\n                  @for (action of item.actions; track action) {\r\n                    @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n                      <button mat-icon-button\r\n                        (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n                        (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n                        [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n                        [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n                        @if (action.icon) {\r\n                          <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n                        }\r\n                        @if (action.symbol) {\r\n                          <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n                        }\r\n                        {{ action.title }}\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }  \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'image') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <img\r\n                  [src]=\"element[item.name]\"\r\n                  [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n                  [class]=\"item.classList ? item.classList : ''\"\r\n                />\r\n              } \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n      </ng-container>\r\n    }\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" colspan=\"9999\">\r\n        Нет данных для отображения\r\n      </td>\r\n    </tr>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns();\" \r\n      (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n      class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n    </tr>\r\n    @if (footer()) {\r\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n    }\r\n  </table>\r\n  <div style=\"visibility: hidden; position: fixed\"\r\n    [style.left]=\"contextMenuPosition.x\"\r\n    [style.top]=\"contextMenuPosition.y\"\r\n    [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n  </div>\r\n  <mat-menu #contextMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-id=\"id\">\r\n      @for (menuItem of opt(); track menuItem) {\r\n        @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <button mat-menu-item\r\n            (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n            (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n            [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n            @if (menuItem.icon) {\r\n              <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n            }\r\n            @if (menuItem.symbol) {\r\n              <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n            }\r\n            {{ menuItem.title }}\r\n          </button>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n  [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n  [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n  [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n  (page)=\"onPageEvent($event)\"\r\n  showFirstLastButtons\r\n  itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n",
 		styles: [".component-container{display:flex;flex-direction:column;height:100%}.table-container{display:flex;flex-direction:column;justify-content:space-between;flex:auto;margin:0 20px;overflow:auto;height:400px}.center{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.mat-column-select{overflow:initial}tr.mat-footer-row{font-weight:700;height:56px}.mat-table{overflow-x:scroll}.mat-cell,.mat-header-cell{word-wrap:initial;display:table-cell;padding:0 10px;line-break:unset;white-space:nowrap;overflow:hidden;vertical-align:middle}.mat-row,.mat-header-row{display:table-row}tr.element-row:not(.selected-row):hover{background:#f5f5f5}tr.element-row:not(.selected-row):active{background:#efefef}.selected-row{background-color:#eee}.fact-done-row{background-color:#eefdec}a,a:visited,a:hover,a:active{color:inherit}.pre-wrap{white-space:pre-wrap}.actions-container{display:flex;column-gap:5px}\n"],
 		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MatTableModule
+			},
 			{
 				kind: "component",
-				type: MatTable,
+				type: i1.MatTable,
 				selector: "mat-table, table[mat-table]",
 				exportAs: ["matTable"]
 			},
 			{
 				kind: "directive",
-				type: MatSort,
+				type: i1.MatHeaderCellDef,
+				selector: "[matHeaderCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i1.MatHeaderRowDef,
+				selector: "[matHeaderRowDef]",
+				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatColumnDef,
+				selector: "[matColumnDef]",
+				inputs: ["matColumnDef"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatCellDef,
+				selector: "[matCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i1.MatRowDef,
+				selector: "[matRowDef]",
+				inputs: ["matRowDefColumns", "matRowDefWhen"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatFooterCellDef,
+				selector: "[matFooterCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i1.MatFooterRowDef,
+				selector: "[matFooterRowDef]",
+				inputs: ["matFooterRowDef", "matFooterRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatHeaderCell,
+				selector: "mat-header-cell, th[mat-header-cell]"
+			},
+			{
+				kind: "directive",
+				type: i1.MatCell,
+				selector: "mat-cell, td[mat-cell]"
+			},
+			{
+				kind: "directive",
+				type: i1.MatFooterCell,
+				selector: "mat-footer-cell, td[mat-footer-cell]"
+			},
+			{
+				kind: "component",
+				type: i1.MatHeaderRow,
+				selector: "mat-header-row, tr[mat-header-row]",
+				exportAs: ["matHeaderRow"]
+			},
+			{
+				kind: "component",
+				type: i1.MatRow,
+				selector: "mat-row, tr[mat-row]",
+				exportAs: ["matRow"]
+			},
+			{
+				kind: "component",
+				type: i1.MatFooterRow,
+				selector: "mat-footer-row, tr[mat-footer-row]",
+				exportAs: ["matFooterRow"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatNoDataRow,
+				selector: "ng-template[matNoDataRow]"
+			},
+			{
+				kind: "ngmodule",
+				type: MatSortModule
+			},
+			{
+				kind: "directive",
+				type: i2.MatSort,
 				selector: "[matSort]",
 				inputs: [
 					"matSortActive",
@@ -4645,20 +4719,40 @@ var TableComponent = class TableComponent {
 				exportAs: ["matSort"]
 			},
 			{
-				kind: "directive",
-				type: MatColumnDef,
-				selector: "[matColumnDef]",
-				inputs: ["matColumnDef"]
+				kind: "component",
+				type: i2.MatSortHeader,
+				selector: "[mat-sort-header]",
+				inputs: [
+					"mat-sort-header",
+					"arrowPosition",
+					"start",
+					"disabled",
+					"sortActionDescription",
+					"disableClear"
+				],
+				exportAs: ["matSortHeader"]
 			},
 			{
-				kind: "directive",
-				type: MatHeaderCellDef,
-				selector: "[matHeaderCellDef]"
+				kind: "ngmodule",
+				type: MatPaginatorModule
 			},
 			{
-				kind: "directive",
-				type: MatHeaderCell,
-				selector: "mat-header-cell, th[mat-header-cell]"
+				kind: "component",
+				type: i3.MatPaginator,
+				selector: "mat-paginator",
+				inputs: [
+					"color",
+					"pageIndex",
+					"length",
+					"pageSize",
+					"pageSizeOptions",
+					"hidePageSize",
+					"showFirstLastButtons",
+					"selectConfig",
+					"disabled"
+				],
+				outputs: ["page"],
+				exportAs: ["matPaginator"]
 			},
 			{
 				kind: "component",
@@ -4687,30 +4781,6 @@ var TableComponent = class TableComponent {
 				outputs: ["change", "indeterminateChange"],
 				exportAs: ["matCheckbox"]
 			},
-			{
-				kind: "directive",
-				type: MatCellDef,
-				selector: "[matCellDef]"
-			},
-			{
-				kind: "directive",
-				type: MatCell,
-				selector: "mat-cell, td[mat-cell]"
-			},
-			{
-				kind: "component",
-				type: MatSortHeader,
-				selector: "[mat-sort-header]",
-				inputs: [
-					"mat-sort-header",
-					"arrowPosition",
-					"start",
-					"disabled",
-					"sortActionDescription",
-					"disableClear"
-				],
-				exportAs: ["matSortHeader"]
-			},
 			{
 				kind: "component",
 				type: MatIcon,
@@ -4743,35 +4813,6 @@ var TableComponent = class TableComponent {
 					"routerLink"
 				]
 			},
-			{
-				kind: "directive",
-				type: MatNoDataRow,
-				selector: "ng-template[matNoDataRow]"
-			},
-			{
-				kind: "directive",
-				type: MatHeaderRowDef,
-				selector: "[matHeaderRowDef]",
-				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
-			},
-			{
-				kind: "component",
-				type: MatHeaderRow,
-				selector: "mat-header-row, tr[mat-header-row]",
-				exportAs: ["matHeaderRow"]
-			},
-			{
-				kind: "directive",
-				type: MatRowDef,
-				selector: "[matRowDef]",
-				inputs: ["matRowDefColumns", "matRowDefWhen"]
-			},
-			{
-				kind: "component",
-				type: MatRow,
-				selector: "mat-row, tr[mat-row]",
-				exportAs: ["matRow"]
-			},
 			{
 				kind: "directive",
 				type: MatMenuTrigger,
@@ -4832,57 +4873,13 @@ var TableComponent = class TableComponent {
 				],
 				exportAs: ["matMenuItem"]
 			},
-			{
-				kind: "component",
-				type: MatPaginator,
-				selector: "mat-paginator",
-				inputs: [
-					"color",
-					"pageIndex",
-					"length",
-					"pageSize",
-					"pageSizeOptions",
-					"hidePageSize",
-					"showFirstLastButtons",
-					"selectConfig",
-					"disabled"
-				],
-				outputs: ["page"],
-				exportAs: ["matPaginator"]
-			},
-			{
-				kind: "directive",
-				type: MatFooterRowDef,
-				selector: "[matFooterRowDef]",
-				inputs: ["matFooterRowDef", "matFooterRowDefSticky"]
-			},
-			{
-				kind: "component",
-				type: MatFooterRow,
-				selector: "mat-footer-row, tr[mat-footer-row]",
-				exportAs: ["matFooterRow"]
-			},
-			{
-				kind: "directive",
-				type: MatFooterCellDef,
-				selector: "[matFooterCellDef]"
-			},
-			{
-				kind: "directive",
-				type: MatFooterCell,
-				selector: "mat-footer-cell, td[mat-footer-cell]"
-			},
-			{
-				kind: "ngmodule",
-				type: MatTableModule
-			},
 			{
 				kind: "ngmodule",
 				type: MatTooltipModule
 			},
 			{
 				kind: "directive",
-				type: i1.MatTooltip,
+				type: i4.MatTooltip,
 				selector: "[matTooltip]",
 				inputs: [
 					"matTooltipPosition",
@@ -4902,8 +4899,7 @@ var TableComponent = class TableComponent {
 				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
 				exportAs: ["matButton", "matAnchor"]
 			}
-		],
-		changeDetection: i0.ChangeDetectionStrategy.Eager
+		]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
@@ -4915,39 +4911,22 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ngx-uik-table",
-			changeDetection: ChangeDetectionStrategy.Eager,
 			imports: [
-				MatTable,
-				MatSort,
-				MatColumnDef,
-				MatHeaderCellDef,
-				MatHeaderCell,
+				MatTableModule,
+				MatSortModule,
+				MatPaginatorModule,
 				MatCheckbox,
-				MatCellDef,
-				MatCell,
-				MatSortHeader,
 				MatIcon,
 				RouterLink,
-				MatNoDataRow,
-				MatHeaderRowDef,
-				MatHeaderRow,
-				MatRowDef,
-				MatRow,
 				MatMenuTrigger,
 				MatMenu,
 				MatMenuContent,
 				MatDivider,
 				MatMenuItem,
-				MatPaginator,
-				MatFooterRowDef,
-				MatFooterRow,
-				MatFooterCellDef,
-				MatFooterCell,
-				MatTableModule,
 				MatTooltipModule,
 				MatIconButton
 			],
-			template: "<div class=\"component-container\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"dataSource\"\r\n      matSort\r\n      [matSortActive]=\"sortState().sortActive || ''\"\r\n      [matSortDirection]=\"sortState().sortDirection\"\r\n      matSortDisableClear>\r\n\r\n      <!-- Выбор строки Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (allowMultiSelect()) {\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n        @if (footer()) {\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        }\r\n      </ng-container>\r\n\r\n      @for (item of columnOptions(); track item) {\r\n        <ng-container matColumnDef={{item.name}}>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n          @if (!item.format) {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footer) {\r\n                  <strong>{{ getTotal(item.name) }}</strong>\r\n                }\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }            \r\n          }\r\n          @if (item.format === 'pre-wrap') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'link') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'linkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a  [href]=\"element[item.name]\" target=\"_blank\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLink') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLinkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a [routerLink]=\"[element[item.name]]\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'checkbox') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (item.icon) {\r\n                <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n              } \r\n              @if (item.symbol) {\r\n                <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icons') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.icons) {\r\n                <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n                [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n              } \r\n              @if (item.symbols) {\r\n                <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'actions') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.actions) {\r\n                <div class=\"actions-container\">\r\n                  @for (action of item.actions; track action) {\r\n                    @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n                      <button mat-icon-button\r\n                        (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n                        (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n                        [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n                        [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n                        @if (action.icon) {\r\n                          <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n                        }\r\n                        @if (action.symbol) {\r\n                          <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n                        }\r\n                        {{ action.title }}\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }  \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'image') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <img\r\n                  [src]=\"element[item.name]\"\r\n                  [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n                  [class]=\"item.classList ? item.classList : ''\"\r\n                />\r\n              } \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n      </ng-container>\r\n    }\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" colspan=\"9999\">\r\n        Нет данных для отображения\r\n      </td>\r\n    </tr>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" \r\n      (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n      class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n    </tr>\r\n    @if (footer()) {\r\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    }\r\n  </table>\r\n  <div style=\"visibility: hidden; position: fixed\"\r\n    [style.left]=\"contextMenuPosition.x\"\r\n    [style.top]=\"contextMenuPosition.y\"\r\n    [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n  </div>\r\n  <mat-menu #contextMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-id=\"id\">\r\n      @for (menuItem of opt(); track menuItem) {\r\n        @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <button mat-menu-item\r\n            (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n            (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n            [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n            @if (menuItem.icon) {\r\n              <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n            }\r\n            @if (menuItem.symbol) {\r\n              <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n            }\r\n            {{ menuItem.title }}\r\n          </button>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n  [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n  [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n  [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n  showFirstLastButtons\r\n  itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n",
+			template: "<div class=\"component-container\">\r\n  <div class=\"table-container\">\r\n    <table mat-table [dataSource]=\"dataSource\"\r\n      matSort\r\n      [matSortActive]=\"sortState().sortActive\"\r\n      [matSortDirection]=\"sortState().sortDirection\"\r\n      (matSortChange)=\"onSortEvent($event)\"\r\n      matSortDisableClear>\r\n\r\n      <!-- Выбор строки Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (allowMultiSelect()) {\r\n            <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\r\n            [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n        @if (footer()) {\r\n          <td mat-footer-cell *matFooterCellDef></td>\r\n        }\r\n      </ng-container>\r\n\r\n      @for (item of columnOptions(); track item) {\r\n        <ng-container matColumnDef={{item.name}}>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"item.titleSortDisable\">{{item.title}}</th>\r\n          @if (!item.format) {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footer) {\r\n                  <strong>{{ getTotal(item.name) }}</strong>\r\n                }\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }            \r\n          }\r\n          @if (item.format === 'pre-wrap') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" class=\"pre-wrap\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              {{element[item.name]}}\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'link') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [href]=\"element[item.name]\" target=\"_blank\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'linkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a  [href]=\"element[item.name]\" target=\"_blank\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLink') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <a [routerLink]=\"[element[item.name]]\">{{element[item.name]}}</a>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'routerLinkIcon') {\r\n            <td mat-cell *matCellDef=\"let element\" (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <a [routerLink]=\"[element[item.name]]\">\r\n                  @if (item.icon) {\r\n                    <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n                  } \r\n                  @if (item.symbol) {\r\n                    <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n                  }\r\n                </a>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'checkbox') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              <mat-checkbox [checked]=\"element[item.name] === 1\" [disabled]=\"true\"></mat-checkbox>\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icon') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (item.icon) {\r\n                <mat-icon [class]=\"item.classList ? item.classList : ''\" >{{item.icon}}</mat-icon>\r\n              } \r\n              @if (item.symbol) {\r\n                <span [class]=\"item.classList ? item.classList : ''\" >{{item.symbol}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'icons') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.icons) {\r\n                <mat-icon [class]=\"item.classList ? item.classList[element[item.name]] : ''\" \r\n                [matTooltip]=\"item.tooltips ? item.tooltips[element[item.name]] : ''\">{{item.icons[element[item.name]]}}</mat-icon>\r\n              } \r\n              @if (item.symbols) {\r\n                <span [class]=\"item.classList ? item.classList[element[item.name]] : ''\" >{{item.symbols[element[item.name]]}}</span>\r\n              }\r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'actions') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\">\r\n              @if (item.actions) {\r\n                <div class=\"actions-container\">\r\n                  @for (action of item.actions; track action) {\r\n                    @if (!(action.hideFn ? action.hideFn(element) : action.hide)) {\r\n                      <button mat-icon-button\r\n                        (click)=\"action.onClickFn ? action.onClickFn(element) : ''\"\r\n                        (mousedown)=\"action.onClickMiddleFn ? action.onClickMiddleFn($event, element) : ''\"\r\n                        [disabled]=\"action.disabledFn ? action.disabledFn(element) : action.disabled\"\r\n                        [matTooltip]=\"action.tooltip ? action.tooltip : ''\" >\r\n                        @if (action.icon) {\r\n                          <mat-icon [class]=\"action.classList ? action.classList : ''\" >{{action.icon}}</mat-icon>\r\n                        }\r\n                        @if (action.symbol) {\r\n                          <span [class]=\"action.classList ? action.classList : ''\" >{{action.symbol}}</span>\r\n                        }\r\n                        {{ action.title }}\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }  \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n          @if (item.format === 'image') {\r\n            <td mat-cell *matCellDef=\"let element\"  (contextmenu)=\"onContextMenu($event, element)\" [matTooltip]=\"item.tooltip ?? ''\">\r\n              @if (element[item.name]) {\r\n                <img\r\n                  [src]=\"element[item.name]\"\r\n                  [alt]=\"item.imageAlt && element[item.imageAlt] ? element[item.imageAlt] : ''\"\r\n                  [class]=\"item.classList ? item.classList : ''\"\r\n                />\r\n              } \r\n            </td>\r\n            @if (footer()) {\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                @if (item.footerTitle) {\r\n                  <strong>{{ item.footerTitle }}</strong>\r\n                }\r\n              </td>\r\n            }\r\n          }\r\n      </ng-container>\r\n    }\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" colspan=\"9999\">\r\n        Нет данных для отображения\r\n      </td>\r\n    </tr>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns();\" \r\n      (click)=\"onRowClicked(row)\" (dblclick)=\"onRowDblClicked(row)\" \r\n      class=\"element-row\" [class.selected-row]=\"selection.isSelected(row)\">\r\n    </tr>\r\n    @if (footer()) {\r\n      <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\"></tr>\r\n    }\r\n  </table>\r\n  <div style=\"visibility: hidden; position: fixed\"\r\n    [style.left]=\"contextMenuPosition.x\"\r\n    [style.top]=\"contextMenuPosition.y\"\r\n    [matMenuTriggerFor]=\"contextMenu\" #menuTrigger=\"matMenuTrigger\">\r\n  </div>\r\n  <mat-menu #contextMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-id=\"id\">\r\n      @for (menuItem of opt(); track menuItem) {\r\n        @if (menuItem.title === '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (menuItem.title !== '-' && !(menuItem.hideFn ? menuItem.hideFn(itemForMenu) : menuItem.hide)) {\r\n          <button mat-menu-item\r\n            (click)=\"menuItem.onClickFn ? menuItem.onClickFn(itemForMenu) : ''\"\r\n            (mousedown)=\"menuItem.onClickMiddleFn ? menuItem.onClickMiddleFn($event, itemForMenu, menuTrigger) : ''\"\r\n            [disabled]=\"menuItem.disabledFn ? menuItem.disabledFn(itemForMenu) : menuItem.disabled\">\r\n            @if (menuItem.icon) {\r\n              <mat-icon [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.icon}}</mat-icon>\r\n            }\r\n            @if (menuItem.symbol) {\r\n              <span [class]=\"menuItem.classList ? menuItem.classList : ''\">{{menuItem.symbol}}</span>\r\n            }\r\n            {{ menuItem.title }}\r\n          </button>\r\n        }\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</div>\r\n\r\n\r\n<mat-paginator [length]=\"length()\"\r\n  [pageIndex]=\"pageState().pageIndex || defaultPageIndex\"\r\n  [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n  [pageSize]=\"pageState().pageSize || defaultPageSize\"\r\n  (page)=\"onPageEvent($event)\"\r\n  showFirstLastButtons\r\n  itemsPerPageLabel=\"\"\r\n></mat-paginator>\r\n</div>\r\n",
 			styles: [".component-container{display:flex;flex-direction:column;height:100%}.table-container{display:flex;flex-direction:column;justify-content:space-between;flex:auto;margin:0 20px;overflow:auto;height:400px}.center{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.mat-column-select{overflow:initial}tr.mat-footer-row{font-weight:700;height:56px}.mat-table{overflow-x:scroll}.mat-cell,.mat-header-cell{word-wrap:initial;display:table-cell;padding:0 10px;line-break:unset;white-space:nowrap;overflow:hidden;vertical-align:middle}.mat-row,.mat-header-row{display:table-row}tr.element-row:not(.selected-row):hover{background:#f5f5f5}tr.element-row:not(.selected-row):active{background:#efefef}.selected-row{background-color:#eee}.fact-done-row{background-color:#eefdec}a,a:visited,a:hover,a:active{color:inherit}.pre-wrap{white-space:pre-wrap}.actions-container{display:flex;column-gap:5px}\n"]
 		}]
 	}],