@ng-matero/extensions 19.3.3 → 19.4.1

package/fesm2022/mtxGrid.mjs

@@ -1,7 +1,7 @@
 import { moveItemInArray, CdkDrag, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
 import { DOCUMENT, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, NgTemplateOutlet, PercentPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, NgZone, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Injector, ViewContainerRef, ChangeDetectorRef, HostBinding, Input, NgModule, Pipe, KeyValueDiffers, EventEmitter, Output, HostListener, InjectionToken, ANIMATION_MODULE_TYPE, booleanAttribute, ContentChildren } from '@angular/core';
+import { Injectable, inject, ElementRef, NgZone, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Injector, ViewContainerRef, ChangeDetectorRef, Input, NgModule, Pipe, KeyValueDiffers, EventEmitter, Output, InjectionToken, ANIMATION_MODULE_TYPE, booleanAttribute, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { MatBadge, MatBadgeModule } from '@angular/material/badge';
@@ -242,7 +242,7 @@ class MatResizable extends AbstractMatResizable {
         this.document = inject(DOCUMENT);
         this.isResizable = true;
     }
-    get hasResizableClass() {
+    get resizableClass() {
         return this.isResizable ? RESIZABLE_HOST_BINDINGS.class : '';
     }
     get resizable() {
@@ -252,19 +252,18 @@ class MatResizable extends AbstractMatResizable {
         this.isResizable = newValue == null || newValue === '' || newValue;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MatResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "this.hasResizableClass" }, classAttribute: "mat-resizable" }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "resizableClass" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MatResizable, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
-                    host: RESIZABLE_HOST_BINDINGS,
+                    host: {
+                        '[class]': 'resizableClass',
+                    },
                     inputs: RESIZABLE_INPUTS,
                 }]
-        }], propDecorators: { hasResizableClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], resizable: [{
+        }], propDecorators: { resizable: [{
                 type: Input
             }] } });
 
@@ -729,6 +728,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class MtxGridExpansionToggle {
+    constructor() {
+        this._opened = false;
+        this.openedChange = new EventEmitter();
+        this.toggleChange = new EventEmitter();
+    }
     get opened() {
         return this._opened;
     }
@@ -736,9 +740,6 @@ class MtxGridExpansionToggle {
         this._opened = newValue;
         this.openedChange.emit(newValue);
     }
-    get expanded() {
-        return this._opened;
-    }
     set expandableRow(value) {
         if (value !== this._row) {
             this._row = value;
@@ -749,11 +750,6 @@ class MtxGridExpansionToggle {
             this._tplRef = value;
         }
     }
-    constructor() {
-        this._opened = false;
-        this.openedChange = new EventEmitter();
-        this.toggleChange = new EventEmitter();
-    }
     onClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -764,20 +760,21 @@ class MtxGridExpansionToggle {
         this.toggleChange.emit(this);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxGridExpansionToggle, isStandalone: true, selector: "[mtx-grid-expansion-toggle]", inputs: { opened: "opened", expandableRow: "expandableRow", template: ["expansionRowTpl", "template"] }, outputs: { openedChange: "openedChange", toggleChange: "toggleChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.expanded": "this.expanded" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxGridExpansionToggle, isStandalone: true, selector: "[mtx-grid-expansion-toggle]", inputs: { opened: "opened", expandableRow: "expandableRow", template: ["expansionRowTpl", "template"] }, outputs: { openedChange: "openedChange", toggleChange: "toggleChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.expanded": "opened" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxGridExpansionToggle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtx-grid-expansion-toggle]',
+                    host: {
+                        '[class.expanded]': 'opened',
+                        '(click)': 'onClick($event)',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { opened: [{
+        }], propDecorators: { opened: [{
                 type: Input
             }], openedChange: [{
                 type: Output
-            }], expanded: [{
-                type: HostBinding,
-                args: ['class.expanded']
             }], expandableRow: [{
                 type: Input
             }], template: [{
@@ -785,9 +782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 args: ['expansionRowTpl']
             }], toggleChange: [{
                 type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }] } });
 
 class MtxGridSelectableCell {
@@ -821,23 +815,21 @@ class MtxGridSelectableCell {
         this.cellSelectedChange.emit(this);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxGridSelectableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxGridSelectableCell, isStandalone: true, selector: "[mtx-grid-selectable-cell]", inputs: { cellSelectable: "cellSelectable" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "this.selected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxGridSelectableCell, isStandalone: true, selector: "[mtx-grid-selectable-cell]", inputs: { cellSelectable: "cellSelectable" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "selected" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxGridSelectableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtx-grid-selectable-cell]',
+                    host: {
+                        '[class.selected]': 'selected',
+                        '(click)': 'onClick($event)',
+                    },
                 }]
-        }], propDecorators: { selected: [{
-                type: HostBinding,
-                args: ['class.selected']
-            }], cellSelectable: [{
+        }], propDecorators: { cellSelectable: [{
                 type: Input
             }], cellSelectedChange: [{
                 type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }] } });
 
 /** Injection token that can be used to specify default grid options. */
@@ -1098,7 +1090,7 @@ class MtxGrid {
     }
     /** Expansion change event */
     _onExpansionChange(expansionRef, rowData, column, index) {
-        this.expansionChange.emit({ expanded: expansionRef.expanded, data: rowData, index, column });
+        this.expansionChange.emit({ expanded: expansionRef.opened, data: rowData, index, column });
     }
     /** Cell select event */
     _selectCell(cellRef, rowData, colDef) {
@@ -1199,7 +1191,7 @@ class MtxGrid {
         this.rowContextMenu.emit({ event, rowData, index });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxGrid, isStandalone: true, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: ["loading", "loading", booleanAttribute], trackBy: "trackBy", columnResizable: ["columnResizable", "columnResizable", booleanAttribute], emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: ["pageOnFront", "pageOnFront", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute], pageDisabled: ["pageDisabled", "pageDisabled", booleanAttribute], showFirstLastButtons: ["showFirstLastButtons", "showFirstLastButtons", booleanAttribute], pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: ["hidePageSize", "hidePageSize", booleanAttribute], paginationTemplate: "paginationTemplate", sortOnFront: ["sortOnFront", "sortOnFront", booleanAttribute], sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: ["sortDisableClear", "sortDisableClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], sortStart: "sortStart", rowHover: ["rowHover", "rowHover", booleanAttribute], rowStriped: ["rowStriped", "rowStriped", booleanAttribute], expandable: ["expandable", "expandable", booleanAttribute], expansionTemplate: "expansionTemplate", multiSelectable: ["multiSelectable", "multiSelectable", booleanAttribute], multiSelectionWithClick: ["multiSelectionWithClick", "multiSelectionWithClick", booleanAttribute], rowSelectable: ["rowSelectable", "rowSelectable", booleanAttribute], hideRowSelectionCheckbox: ["hideRowSelectionCheckbox", "hideRowSelectionCheckbox", booleanAttribute], disableRowClickSelection: ["disableRowClickSelection", "disableRowClickSelection", booleanAttribute], rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", rowSelected: "rowSelected", cellSelectable: ["cellSelectable", "cellSelectable", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: ["columnHideable", "columnHideable", booleanAttribute], columnHideableChecked: "columnHideableChecked", columnSortable: ["columnSortable", "columnSortable", booleanAttribute], columnPinnable: ["columnPinnable", "columnPinnable", booleanAttribute], columnPinOptions: "columnPinOptions", showColumnMenuButton: ["showColumnMenuButton", "showColumnMenuButton", booleanAttribute], columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", columnMenuButtonFontIcon: "columnMenuButtonFontIcon", columnMenuButtonSvgIcon: "columnMenuButtonSvgIcon", showColumnMenuHeader: ["showColumnMenuHeader", "showColumnMenuHeader", booleanAttribute], columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: ["showColumnMenuFooter", "showColumnMenuFooter", booleanAttribute], columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: ["useContentRowTemplate", "useContentRowTemplate", booleanAttribute], useContentHeaderRowTemplate: ["useContentHeaderRowTemplate", "useContentHeaderRowTemplate", booleanAttribute], useContentFooterRowTemplate: ["useContentFooterRowTemplate", "useContentFooterRowTemplate", booleanAttribute], showSummary: ["showSummary", "showSummary", booleanAttribute], summaryTemplate: "summaryTemplate", showSidebar: ["showSidebar", "showSidebar", booleanAttribute], sidebarTemplate: "sidebarTemplate", showStatusbar: ["showStatusbar", "showStatusbar", booleanAttribute], statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange" }, host: { properties: { "class.mtx-grid-animations-enabled": "!_animationsDisabled" }, classAttribute: "mtx-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: MtxGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n  <div class=\"mtx-grid-progress\">\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n  <div class=\"mtx-grid-toolbar\">\n    <div class=\"mtx-grid-toolbar-content\">\n      @if (toolbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n      } @else {\n        @if (toolbarTitle) {\n          <div class=\"mtx-grid-toolbar-title\">{{toolbarTitle}}</div>\n        }\n      }\n    </div>\n    <div class=\"mtx-grid-toolbar-actions\">\n      @if (showColumnMenuButton) {\n        <mtx-grid-column-menu\n          [columns]=\"columns\"\n          [buttonText]=\"columnMenuButtonText\"\n          [buttonType]=\"columnMenuButtonType\"\n          [buttonColor]=\"columnMenuButtonColor\"\n          [buttonClass]=\"columnMenuButtonClass\"\n          [buttonIcon]=\"columnMenuButtonIcon\"\n          [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n          [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n          [selectable]=\"columnHideable\"\n          [selectableChecked]=\"columnHideableChecked\"\n          [sortable]=\"columnSortable\"\n          [pinnable]=\"columnPinnable\"\n          [showHeader]=\"showColumnMenuHeader\"\n          [headerText]=\"columnMenuHeaderText\"\n          [headerTemplate]=\"columnMenuHeaderTemplate\"\n          [showFooter]=\"showColumnMenuFooter\"\n          [footerText]=\"columnMenuFooterText\"\n          [footerTemplate]=\"columnMenuFooterTemplate\"\n          [pinOptions]=\"columnPinOptions\"\n          (columnChange)=\"_onColumnChange($event)\">\n        </mtx-grid-column-menu>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"mtx-grid-main mtx-grid-layout\">\n  <!-- Table content -->\n  <div class=\"mtx-grid-content mtx-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n      @if (!columnResizable) {\n        <table mat-table\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      } @else {\n        <!-- TODO: Use flexbox-based mat-table -->\n        <table mat-table\n          columnResize\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                [resizable]=\"col.resizable\"\n                [matResizableMinWidthPx]=\"col.minWidth\"\n                [matResizableMaxWidthPx]=\"col.maxWidth\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      }\n    </div>\n\n    <!-- No result -->\n    @if (_hasNoResult) {\n      <div class=\"mtx-grid-no-result\">\n        @if (noResultTemplate) {\n          <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n        } @else {\n          {{noResultText}}\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Tool sidebar -->\n  @if (showSidebar) {\n    <div class=\"mtx-grid-sidebar\">\n      @if (sidebarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"mtx-grid-footer\">\n  <!-- Status Bar -->\n  @if (showStatusbar) {\n    <div class=\"mtx-grid-statusbar\">\n      @if (statusbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  <div class=\"mtx-grid-pagination\">\n    @if (paginationTemplate) {\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n    } @else {\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\n        [showFirstLastButtons]=\"showFirstLastButtons\"\n        [length]=\"length\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [hidePageSize]=\"hidePageSize\"\n        (page)=\"_onPage($event)\"\n        [disabled]=\"pageDisabled\">\n      </mat-paginator>\n    }\n  </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n    </ng-template>\n  } @else {\n    @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n      </ng-template>\n    }\n  }\n</ng-template>\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:var(--mtx-grid-table-cell-min-width, 80px)}.mtx-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--mtx-grid-table-footer-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .mtx-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mtx-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2)}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-toolbar-content{flex:1;width:0;padding:0 8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px))}.mtx-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.mtx-grid-expansion.expanded .mtx-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.mtx-grid-expansion-detail{min-height:0}.mtx-grid-animations-enabled .mtx-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button,.mtx-grid-row-expand-button+mtx-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { 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: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: MtxGridCell, selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: MtxGridColumnMenu, selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: MtxGridSelectableCell, selector: "[mtx-grid-selectable-cell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: MtxGridExpansionToggle, selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: MtxGridColClassPipe, name: "colClass" }, { kind: "pipe", type: MtxGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxGrid, isStandalone: true, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: ["loading", "loading", booleanAttribute], trackBy: "trackBy", columnResizable: ["columnResizable", "columnResizable", booleanAttribute], emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: ["pageOnFront", "pageOnFront", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute], pageDisabled: ["pageDisabled", "pageDisabled", booleanAttribute], showFirstLastButtons: ["showFirstLastButtons", "showFirstLastButtons", booleanAttribute], pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: ["hidePageSize", "hidePageSize", booleanAttribute], paginationTemplate: "paginationTemplate", sortOnFront: ["sortOnFront", "sortOnFront", booleanAttribute], sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: ["sortDisableClear", "sortDisableClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], sortStart: "sortStart", rowHover: ["rowHover", "rowHover", booleanAttribute], rowStriped: ["rowStriped", "rowStriped", booleanAttribute], expandable: ["expandable", "expandable", booleanAttribute], expansionTemplate: "expansionTemplate", multiSelectable: ["multiSelectable", "multiSelectable", booleanAttribute], multiSelectionWithClick: ["multiSelectionWithClick", "multiSelectionWithClick", booleanAttribute], rowSelectable: ["rowSelectable", "rowSelectable", booleanAttribute], hideRowSelectionCheckbox: ["hideRowSelectionCheckbox", "hideRowSelectionCheckbox", booleanAttribute], disableRowClickSelection: ["disableRowClickSelection", "disableRowClickSelection", booleanAttribute], rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", rowSelected: "rowSelected", cellSelectable: ["cellSelectable", "cellSelectable", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: ["columnHideable", "columnHideable", booleanAttribute], columnHideableChecked: "columnHideableChecked", columnSortable: ["columnSortable", "columnSortable", booleanAttribute], columnPinnable: ["columnPinnable", "columnPinnable", booleanAttribute], columnPinOptions: "columnPinOptions", showColumnMenuButton: ["showColumnMenuButton", "showColumnMenuButton", booleanAttribute], columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", columnMenuButtonFontIcon: "columnMenuButtonFontIcon", columnMenuButtonSvgIcon: "columnMenuButtonSvgIcon", showColumnMenuHeader: ["showColumnMenuHeader", "showColumnMenuHeader", booleanAttribute], columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: ["showColumnMenuFooter", "showColumnMenuFooter", booleanAttribute], columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: ["useContentRowTemplate", "useContentRowTemplate", booleanAttribute], useContentHeaderRowTemplate: ["useContentHeaderRowTemplate", "useContentHeaderRowTemplate", booleanAttribute], useContentFooterRowTemplate: ["useContentFooterRowTemplate", "useContentFooterRowTemplate", booleanAttribute], showSummary: ["showSummary", "showSummary", booleanAttribute], summaryTemplate: "summaryTemplate", showSidebar: ["showSidebar", "showSidebar", booleanAttribute], sidebarTemplate: "sidebarTemplate", showStatusbar: ["showStatusbar", "showStatusbar", booleanAttribute], statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange" }, host: { properties: { "class.mtx-grid-animations-enabled": "!_animationsDisabled" }, classAttribute: "mtx-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: MtxGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n  <div class=\"mtx-grid-progress\">\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n  <div class=\"mtx-grid-toolbar\">\n    <div class=\"mtx-grid-toolbar-content\">\n      @if (toolbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n      } @else {\n        @if (toolbarTitle) {\n          <div class=\"mtx-grid-toolbar-title\">{{toolbarTitle}}</div>\n        }\n      }\n    </div>\n    <div class=\"mtx-grid-toolbar-actions\">\n      @if (showColumnMenuButton) {\n        <mtx-grid-column-menu\n          [columns]=\"columns\"\n          [buttonText]=\"columnMenuButtonText\"\n          [buttonType]=\"columnMenuButtonType\"\n          [buttonColor]=\"columnMenuButtonColor\"\n          [buttonClass]=\"columnMenuButtonClass\"\n          [buttonIcon]=\"columnMenuButtonIcon\"\n          [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n          [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n          [selectable]=\"columnHideable\"\n          [selectableChecked]=\"columnHideableChecked\"\n          [sortable]=\"columnSortable\"\n          [pinnable]=\"columnPinnable\"\n          [showHeader]=\"showColumnMenuHeader\"\n          [headerText]=\"columnMenuHeaderText\"\n          [headerTemplate]=\"columnMenuHeaderTemplate\"\n          [showFooter]=\"showColumnMenuFooter\"\n          [footerText]=\"columnMenuFooterText\"\n          [footerTemplate]=\"columnMenuFooterTemplate\"\n          [pinOptions]=\"columnPinOptions\"\n          (columnChange)=\"_onColumnChange($event)\">\n        </mtx-grid-column-menu>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"mtx-grid-main mtx-grid-layout\">\n  <!-- Table content -->\n  <div class=\"mtx-grid-content mtx-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n      @if (!columnResizable) {\n        <table mat-table\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      } @else {\n        <!-- TODO: Use flexbox-based mat-table -->\n        <table mat-table\n          columnResize\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                [resizable]=\"col.resizable\"\n                [matResizableMinWidthPx]=\"col.minWidth\"\n                [matResizableMaxWidthPx]=\"col.maxWidth\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      }\n    </div>\n\n    <!-- No result -->\n    @if (_hasNoResult) {\n      <div class=\"mtx-grid-no-result\">\n        @if (noResultTemplate) {\n          <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n        } @else {\n          {{noResultText}}\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Tool sidebar -->\n  @if (showSidebar) {\n    <div class=\"mtx-grid-sidebar\">\n      @if (sidebarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"mtx-grid-footer\">\n  <!-- Status Bar -->\n  @if (showStatusbar) {\n    <div class=\"mtx-grid-statusbar\">\n      @if (statusbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  <div class=\"mtx-grid-pagination\">\n    @if (paginationTemplate) {\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n    } @else {\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\n        [showFirstLastButtons]=\"showFirstLastButtons\"\n        [length]=\"length\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [hidePageSize]=\"hidePageSize\"\n        (page)=\"_onPage($event)\"\n        [disabled]=\"pageDisabled\">\n      </mat-paginator>\n    }\n  </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n    </ng-template>\n  } @else {\n    @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n      </ng-template>\n    }\n  }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--mtx-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--mtx-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:var(--mtx-grid-table-cell-min-width, 80px)}.mtx-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--mtx-grid-table-footer-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .mtx-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mtx-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2)}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-toolbar-content{flex:1;width:0;padding:0 8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px))}.mtx-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.mtx-grid-expansion.expanded .mtx-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.mtx-grid-expansion-detail{min-height:0}.mtx-grid-animations-enabled .mtx-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button,.mtx-grid-row-expand-button+mtx-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { 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: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: MtxGridCell, selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: MtxGridColumnMenu, selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "buttonFontIcon", "buttonSvgIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: MtxGridSelectableCell, selector: "[mtx-grid-selectable-cell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: MtxGridExpansionToggle, selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: MtxGridColClassPipe, name: "colClass" }, { kind: "pipe", type: MtxGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxGrid, decorators: [{
             type: Component,
@@ -1239,7 +1231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         MtxGridColClassPipe,
                         MtxGridRowClassPipe,
                         MtxToObservablePipe,
-                    ], template: "<!-- Progress bar-->\n@if (loading) {\n  <div class=\"mtx-grid-progress\">\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n  <div class=\"mtx-grid-toolbar\">\n    <div class=\"mtx-grid-toolbar-content\">\n      @if (toolbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n      } @else {\n        @if (toolbarTitle) {\n          <div class=\"mtx-grid-toolbar-title\">{{toolbarTitle}}</div>\n        }\n      }\n    </div>\n    <div class=\"mtx-grid-toolbar-actions\">\n      @if (showColumnMenuButton) {\n        <mtx-grid-column-menu\n          [columns]=\"columns\"\n          [buttonText]=\"columnMenuButtonText\"\n          [buttonType]=\"columnMenuButtonType\"\n          [buttonColor]=\"columnMenuButtonColor\"\n          [buttonClass]=\"columnMenuButtonClass\"\n          [buttonIcon]=\"columnMenuButtonIcon\"\n          [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n          [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n          [selectable]=\"columnHideable\"\n          [selectableChecked]=\"columnHideableChecked\"\n          [sortable]=\"columnSortable\"\n          [pinnable]=\"columnPinnable\"\n          [showHeader]=\"showColumnMenuHeader\"\n          [headerText]=\"columnMenuHeaderText\"\n          [headerTemplate]=\"columnMenuHeaderTemplate\"\n          [showFooter]=\"showColumnMenuFooter\"\n          [footerText]=\"columnMenuFooterText\"\n          [footerTemplate]=\"columnMenuFooterTemplate\"\n          [pinOptions]=\"columnPinOptions\"\n          (columnChange)=\"_onColumnChange($event)\">\n        </mtx-grid-column-menu>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"mtx-grid-main mtx-grid-layout\">\n  <!-- Table content -->\n  <div class=\"mtx-grid-content mtx-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n      @if (!columnResizable) {\n        <table mat-table\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      } @else {\n        <!-- TODO: Use flexbox-based mat-table -->\n        <table mat-table\n          columnResize\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                [resizable]=\"col.resizable\"\n                [matResizableMinWidthPx]=\"col.minWidth\"\n                [matResizableMaxWidthPx]=\"col.maxWidth\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      }\n    </div>\n\n    <!-- No result -->\n    @if (_hasNoResult) {\n      <div class=\"mtx-grid-no-result\">\n        @if (noResultTemplate) {\n          <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n        } @else {\n          {{noResultText}}\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Tool sidebar -->\n  @if (showSidebar) {\n    <div class=\"mtx-grid-sidebar\">\n      @if (sidebarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"mtx-grid-footer\">\n  <!-- Status Bar -->\n  @if (showStatusbar) {\n    <div class=\"mtx-grid-statusbar\">\n      @if (statusbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  <div class=\"mtx-grid-pagination\">\n    @if (paginationTemplate) {\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n    } @else {\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\n        [showFirstLastButtons]=\"showFirstLastButtons\"\n        [length]=\"length\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [hidePageSize]=\"hidePageSize\"\n        (page)=\"_onPage($event)\"\n        [disabled]=\"pageDisabled\">\n      </mat-paginator>\n    }\n  </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n    </ng-template>\n  } @else {\n    @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n      </ng-template>\n    }\n  }\n</ng-template>\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:var(--mtx-grid-table-cell-min-width, 80px)}.mtx-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--mtx-grid-table-footer-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .mtx-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mtx-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2)}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-toolbar-content{flex:1;width:0;padding:0 8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px))}.mtx-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.mtx-grid-expansion.expanded .mtx-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.mtx-grid-expansion-detail{min-height:0}.mtx-grid-animations-enabled .mtx-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button,.mtx-grid-row-expand-button+mtx-grid-cell{vertical-align:middle}\n"] }]
+                    ], template: "<!-- Progress bar-->\n@if (loading) {\n  <div class=\"mtx-grid-progress\">\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n  <div class=\"mtx-grid-toolbar\">\n    <div class=\"mtx-grid-toolbar-content\">\n      @if (toolbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n      } @else {\n        @if (toolbarTitle) {\n          <div class=\"mtx-grid-toolbar-title\">{{toolbarTitle}}</div>\n        }\n      }\n    </div>\n    <div class=\"mtx-grid-toolbar-actions\">\n      @if (showColumnMenuButton) {\n        <mtx-grid-column-menu\n          [columns]=\"columns\"\n          [buttonText]=\"columnMenuButtonText\"\n          [buttonType]=\"columnMenuButtonType\"\n          [buttonColor]=\"columnMenuButtonColor\"\n          [buttonClass]=\"columnMenuButtonClass\"\n          [buttonIcon]=\"columnMenuButtonIcon\"\n          [buttonFontIcon]=\"columnMenuButtonFontIcon\"\n          [buttonSvgIcon]=\"columnMenuButtonSvgIcon\"\n          [selectable]=\"columnHideable\"\n          [selectableChecked]=\"columnHideableChecked\"\n          [sortable]=\"columnSortable\"\n          [pinnable]=\"columnPinnable\"\n          [showHeader]=\"showColumnMenuHeader\"\n          [headerText]=\"columnMenuHeaderText\"\n          [headerTemplate]=\"columnMenuHeaderTemplate\"\n          [showFooter]=\"showColumnMenuFooter\"\n          [footerText]=\"columnMenuFooterText\"\n          [footerTemplate]=\"columnMenuFooterTemplate\"\n          [pinOptions]=\"columnPinOptions\"\n          (columnChange)=\"_onColumnChange($event)\">\n        </mtx-grid-column-menu>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"mtx-grid-main mtx-grid-layout\">\n  <!-- Table content -->\n  <div class=\"mtx-grid-content mtx-grid-layout\">\n    <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n      @if (!columnResizable) {\n        <table mat-table\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.min-width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      } @else {\n        <!-- TODO: Use flexbox-based mat-table -->\n        <table mat-table\n          columnResize\n          [class.mat-table-hover]=\"rowHover\"\n          [class.mat-table-striped]=\"rowStriped\"\n          [class.mat-table-expandable]=\"expandable\"\n          [dataSource]=\"dataSource\"\n          [multiTemplateDataRows]=\"expandable\"\n          matSort\n          [matSortActive]=\"sortActive\"\n          [matSortDirection]=\"sortDirection\"\n          [matSortDisableClear]=\"sortDisableClear\"\n          [matSortDisabled]=\"sortDisabled\"\n          [matSortStart]=\"sortStart\"\n          (matSortChange)=\"_onSortChange($event)\"\n          [trackBy]=\"trackBy\">\n          @if (rowSelectable && !hideRowSelectionCheckbox) {\n            <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n              <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n                @if (multiSelectable) {\n                  <mat-checkbox\n                    [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n                    [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n                    (change)=\"$event ? _toggleMasterCheckbox() : null\">\n                  </mat-checkbox>\n                }\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                class=\"mtx-grid-checkbox-cell\">\n                @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n                  <mat-checkbox\n                    [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n                    [checked]=\"rowSelection.isSelected(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n                  </mat-checkbox>\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n            </ng-container>\n          }\n          @for (col of columns; track col.field) {\n            <ng-container [matColumnDef]=\"col.field\"\n              [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n              <th mat-header-cell *matHeaderCellDef\n                [class]=\"col | colClass\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                [resizable]=\"col.resizable\"\n                [matResizableMinWidthPx]=\"col.minWidth\"\n                [matResizableMaxWidthPx]=\"col.maxWidth\">\n                <div class=\"mat-header-cell-inner\">\n                  @if (headerTemplate | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n                      <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n                        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n                        [disabled]=\"!col.sortable\"\n                        [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n                        [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n                        [start]=\"col.sortProp?.start!\">\n                        @if (col.showExpand) {\n                          <span class=\"mtx-grid-expansion-placeholder\"></span>\n                        }\n                        <span>{{col.header | toObservable | async}}</span>\n                        @if (col.sortable) {\n                          <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n                          </svg>\n                        }\n                      </div>\n                      <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n                        [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n                      </ng-template>\n                    }\n                  }\n                </div>\n              </th>\n              <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n                [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\"\n                mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n                (cellSelectedChange)=\"_selectCell($event, row, col)\">\n                @if (cellTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    @if (col.cellTemplate) {\n                      <ng-template\n                        [ngTemplateOutlet]=\"col.cellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n                      </ng-template>\n                    } @else {\n                      @if (col.showExpand) {\n                        <button class=\"mtx-grid-row-expand-button\"\n                          mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n                          [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n                          (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n                          <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n                            width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n                          </svg>\n                        </button>\n                      }\n                      <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n                        (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n                    }\n                  }\n                }\n              </td>\n              <td mat-footer-cell *matFooterCellDef\n                [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n                [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n                [style.width]=\"col.width\"\n                [style.left]=\"col.left\"\n                [style.right]=\"col.right\">\n                @if (col.showExpand) {\n                  <span class=\"mtx-grid-expansion-placeholder\"></span>\n                }\n                @if (summaryTemplate | isTemplateRef) {\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n                  </ng-template>\n                } @else {\n                  @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n                    <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n                      [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n                    </ng-template>\n                  } @else {\n                    <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n                      [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n                  }\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!useContentHeaderRowTemplate) {\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (!useContentRowTemplate) {\n            <tr mat-row\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n              [class.selected]=\"rowSelection.isSelected(row)\"\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n            </tr>\n          }\n          @if (_whetherShowSummary) {\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n          }\n          @if (expandable) {\n            <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n            <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n              <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n                [attr.colspan]=\"displayedColumns.length\">\n                <div class=\"mtx-grid-expansion-detail-wrapper\">\n                  <div class=\"mtx-grid-expansion-detail\">\n                    <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                    </ng-template>\n                  </div>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              class=\"mtx-grid-expansion\"\n              [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n            </tr>\n          }\n        </table>\n      }\n    </div>\n\n    <!-- No result -->\n    @if (_hasNoResult) {\n      <div class=\"mtx-grid-no-result\">\n        @if (noResultTemplate) {\n          <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n        } @else {\n          {{noResultText}}\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Tool sidebar -->\n  @if (showSidebar) {\n    <div class=\"mtx-grid-sidebar\">\n      @if (sidebarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"mtx-grid-footer\">\n  <!-- Status Bar -->\n  @if (showStatusbar) {\n    <div class=\"mtx-grid-statusbar\">\n      @if (statusbarTemplate) {\n        <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  <div class=\"mtx-grid-pagination\">\n    @if (paginationTemplate) {\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n    } @else {\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\n        [showFirstLastButtons]=\"showFirstLastButtons\"\n        [length]=\"length\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [hidePageSize]=\"hidePageSize\"\n        (page)=\"_onPage($event)\"\n        [disabled]=\"pageDisabled\">\n      </mat-paginator>\n    }\n  </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n  @if (headerExtraTemplate | isTemplateRef) {\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n    </ng-template>\n  } @else {\n    @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n        [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n      </ng-template>\n    }\n  }\n</ng-template>\n", styles: [".mat-column-resize-table.cdk-column-resize-with-resized-column{table-layout:fixed}.mat-column-resize-flex .mat-mdc-header-cell,.mat-column-resize-flex .mat-mdc-cell{box-sizing:border-box;min-width:32px}.mat-mdc-header-cell{position:relative}.mat-resizable{box-sizing:border-box}.mat-mdc-header-cell:not(.mat-resizable):after,.mat-resizable-handle{position:absolute;bottom:0;top:0;right:0;width:1px;background:transparent;transition:background .3s cubic-bezier(.55,0,.55,.2)}.mat-mdc-header-cell:not(.mat-resizable):after{content:\"\"}[dir=rtl] .mat-mdc-header-cell:not(.mat-resizable):after,[dir=rtl] .mat-resizable-handle{left:0;right:auto}[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-header-cell,[dir=rtl] .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-left:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell{border-right:none}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-mdc-header-cell:not(.mat-resizable):after{background-color:var(--mtx-grid-resizable-handle-disabled-background-color, var(--mat-sys-outline-variant))}.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle{background-color:var(--mtx-grid-resizable-handle-hover-background-color, var(--mat-sys-primary))}.mat-resizable.cdk-resizable-overlay-thumb-active>.mat-resizable-handle{opacity:0;transition:none}.mat-resizable-handle:focus,.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus{outline:none;background-color:var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary))}.mat-column-resize-overlay-thumb{background:transparent;cursor:col-resize;width:100%;height:100%;transition:background .3s cubic-bezier(.55,0,.55,.2);-webkit-user-select:none;user-select:none}.mat-column-resize-overlay-thumb:active{will-change:transform;background:linear-gradient(90deg,transparent,transparent 7px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 7px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 9px,transparent 9px,transparent)}.mat-column-resize-overlay-thumb:active .mat-column-resize-overlay-thumb-top{background:linear-gradient(90deg,transparent,transparent 4px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 4px,var(--mtx-grid-resizable-handle-active-background-color, var(--mat-sys-primary)) 12px,transparent 12px,transparent)}.mat-column-resize-overlay-thumb-top{width:100%}.mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:var(--mtx-grid-table-cell-min-width, 80px)}.mtx-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--mtx-grid-table-footer-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .mtx-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mtx-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2)}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-toolbar-content{flex:1;width:0;padding:0 8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px))}.mtx-grid-expansion-detail-wrapper{display:grid;grid-template-rows:0fr;grid-template-columns:100%;padding:0;overflow:hidden}.mtx-grid-expansion.expanded .mtx-grid-expansion-detail-wrapper{grid-template-rows:1fr;padding:calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0}.mtx-grid-expansion-detail{min-height:0}.mtx-grid-animations-enabled .mtx-grid-expansion-detail-wrapper{transition:all 225ms cubic-bezier(.4,0,.2,1)}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button,.mtx-grid-row-expand-button+mtx-grid-cell{vertical-align:middle}\n"] }]
         }], propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]