@ng-matero/extensions 16.3.1 → 17.0.0

package/fesm2022/mtxGrid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { CSP_NONCE, Injectable, Inject, Optional, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, HostBinding, Input, NgModule, Pipe, EventEmitter, Output, HostListener, InjectionToken, ContentChildren } from '@angular/core';
+import { CSP_NONCE, Injectable, Inject, Optional, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, HostBinding, Input, NgModule, Pipe, EventEmitter, Output, HostListener, InjectionToken, booleanAttribute, ContentChildren } from '@angular/core';
 import * as i3$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -42,7 +42,7 @@ import * as i14 from '@ng-matero/extensions/core';
 import { MtxPipesModule } from '@ng-matero/extensions/core';
 import * as i1$1 from '@ng-matero/extensions/dialog';
 import { MtxDialogModule } from '@ng-matero/extensions/dialog';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { style, state, animate, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { isObservable } from 'rxjs';
 
@@ -63,12 +63,12 @@ class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
     getColumnCssClass(cssFriendlyColumnName) {
         return `mat-column-${cssFriendlyColumnName}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i2.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1.CdkTable }, { token: DOCUMENT }, { token: CSP_NONCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatFlexTableResizeStrategy }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i2.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1.CdkTable }, { token: DOCUMENT }, { token: CSP_NONCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatFlexTableResizeStrategy }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.ColumnResize }, { type: i1._CoalescedStyleScheduler, decorators: [{
+        }], ctorParameters: () => [{ type: i2.ColumnResize }, { type: i1._CoalescedStyleScheduler, decorators: [{
                     type: Inject,
                     args: [_COALESCED_STYLE_SCHEDULER]
                 }] }, { type: i1.CdkTable }, { type: undefined, decorators: [{
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     args: [CSP_NONCE]
                 }, {
                     type: Optional
-                }] }]; } });
+                }] }] });
 const FLEX_RESIZE_STRATEGY_PROVIDER = {
     provide: ResizeStrategy,
     useClass: MatFlexTableResizeStrategy,
@@ -130,17 +130,17 @@ class MatColumnResize extends AbstractMatColumnResize {
         this.ngZone = ngZone;
         this.notifier = notifier;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResize, deps: [{ token: i2.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: MatColumnResize, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResize, deps: [{ token: i2.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: MatColumnResize, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResize, decorators: [{
             type: Directive,
             args: [{
                     selector: 'table[mat-table][columnResize]',
                     host: TABLE_HOST_BINDINGS,
                     providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }],
                 }]
-        }], ctorParameters: function () { return [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }]; } });
+        }], ctorParameters: () => [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }] });
 
 /**
  * @license
@@ -162,17 +162,17 @@ class MatColumnResizeFlex extends AbstractMatColumnResize {
         this.ngZone = ngZone;
         this.notifier = notifier;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeFlex, deps: [{ token: i2.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: MatColumnResizeFlex, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeFlex, deps: [{ token: i2.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: MatColumnResizeFlex, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-table[columnResize]',
                     host: FLEX_HOST_BINDINGS,
                     providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }],
                 }]
-        }], ctorParameters: function () { return [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }]; } });
+        }], ctorParameters: () => [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }] });
 
 /**
  * @license
@@ -209,10 +209,10 @@ class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
                 : originHeight,
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeRef }, { token: _COALESCED_STYLE_SCHEDULER }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MatColumnResizeOverlayHandle, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeRef }, { token: _COALESCED_STYLE_SCHEDULER }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: MatColumnResizeOverlayHandle, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -220,13 +220,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                     host: { class: 'mat-column-resize-overlay-thumb' },
                     template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }, { type: i2.ResizeRef }, { type: i1._CoalescedStyleScheduler, decorators: [{
+        }], ctorParameters: () => [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }, { type: i2.ResizeRef }, { type: i1._CoalescedStyleScheduler, decorators: [{
                     type: Inject,
                     args: [_COALESCED_STYLE_SCHEDULER]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { topElement: [{
+                }] }], propDecorators: { topElement: [{
                 type: ViewChild,
                 args: ['top', { static: true }]
             }] } });
@@ -289,23 +289,23 @@ class MatResizable extends AbstractMatResizable {
         this.isResizable = true;
         this.document = document;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatResizable, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i4.Overlay }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeStrategy }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: MatResizable, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatResizable, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i4.Overlay }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeStrategy }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: MatResizable, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatResizable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatResizable, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
                     host: RESIZABLE_HOST_BINDINGS,
                     inputs: RESIZABLE_INPUTS,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: i4.Overlay }, { type: i2.ColumnResizeNotifierSource }, { type: i2.ResizeStrategy }, { type: i1._CoalescedStyleScheduler, decorators: [{
                     type: Inject,
                     args: [_COALESCED_STYLE_SCHEDULER]
-                }] }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hasResizableClass: [{
+                }] }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { hasResizableClass: [{
                 type: HostBinding,
                 args: ['class']
             }], resizable: [{
@@ -321,11 +321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
  */
 const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
 class MatColumnResizeCommonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeCommonModule, declarations: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeCommonModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeCommonModule, declarations: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeCommonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: ENTRY_COMMON_COMPONENTS,
@@ -334,11 +334,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
         }] });
 const IMPORTS = [OverlayModule, MatColumnResizeCommonModule];
 class MatColumnResizeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeModule, declarations: [MatColumnResize, MatColumnResizeFlex, MatResizable], imports: [OverlayModule, MatColumnResizeCommonModule], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeModule, declarations: [MatColumnResize, MatColumnResizeFlex, MatResizable], imports: [OverlayModule, MatColumnResizeCommonModule], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MatColumnResizeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MatColumnResizeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: IMPORTS,
@@ -393,12 +393,12 @@ class MtxGridUtils {
     isContainHTML(value) {
         return /<\/?[a-z][\s\S]*>/i.test(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridUtils }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridUtils }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridUtils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridUtils, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class MtxGridColClassPipe {
     transform(colDef, rowData, rowChangeRecord, currentValue) {
@@ -410,10 +410,10 @@ class MtxGridColClassPipe {
         }
         return '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridColClassPipe, name: "colClass" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridColClassPipe, name: "colClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'colClass' }]
         }] });
@@ -430,10 +430,10 @@ class MtxGridRowClassPipe {
         }
         return classList.join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridRowClassPipe, name: "rowClass" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridRowClassPipe, name: "rowClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rowClass' }]
         }] });
@@ -447,10 +447,10 @@ class MtxGridCellActionsPipe {
         }
         return [];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionsPipe, name: "cellActions" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionsPipe, name: "cellActions" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'cellActions' }]
         }] });
@@ -463,10 +463,10 @@ class MtxGridCellActionTooltipPipe {
             return btn.tooltip || { message: '' };
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'cellActionTooltip' }]
         }] });
@@ -479,10 +479,10 @@ class MtxGridCellActionBadgePipe {
             return btn.badge || { content: '' };
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'cellActionBadge' }]
         }] });
@@ -498,10 +498,10 @@ class MtxGridCellActionDisablePipe {
             return false;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'cellActionDisable' }]
         }] });
@@ -517,13 +517,13 @@ class MtxGridCellSummaryPipe {
             return colDef.summary(this.utils.getColData(data, colDef), colDef);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [{ token: MtxGridUtils }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellSummaryPipe, name: "cellSummary" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [{ token: MtxGridUtils }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellSummaryPipe, name: "cellSummary" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'cellSummary' }]
-        }], ctorParameters: function () { return [{ type: MtxGridUtils }]; } });
+        }], ctorParameters: () => [{ type: MtxGridUtils }] });
 
 class MtxGridCell {
     get _value() {
@@ -602,13 +602,13 @@ class MtxGridCell {
             btn.click?.(rowData);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCell, deps: [{ token: i1$1.MtxDialog }, { token: MtxGridUtils }, { token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxGridCell, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\r\n      [innerHTML]=\"_getText((data | cellSummary: colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n  <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n        [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n        [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n  <ng-container [ngSwitch]=\"colDef.type\">\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container\r\n                    *ngFor=\"let btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container [ngSwitch]=\"btn.type\">\r\n            <ng-container *ngSwitchCase=\"'raised'\">\r\n              <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'stroked'\">\r\n              <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'flat'\">\r\n              <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'icon'\">\r\n              <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fab'\">\r\n              <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n              <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n              <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-listbox *ngIf=\"colDef.tag && colDef.tag[_value]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\r\n          {{colDef.tag[_value].text}}\r\n        </mat-chip>\r\n      </mat-chip-listbox>\r\n      <ng-template #tagEmptyTpl>{{_value}}</ng-template>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_value\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | number: colDef.typeParameter?.digitsInfo:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Currency -->\r\n    <ng-container *ngSwitchCase=\"'currency'\">\r\n      <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode:\r\n      colDef.typeParameter?.display:\r\n      colDef.typeParameter?.digitsInfo:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | currency: colDef.typeParameter?.currencyCode:\r\n        colDef.typeParameter?.display:\r\n        colDef.typeParameter?.digitsInfo:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Percent -->\r\n    <ng-container *ngSwitchCase=\"'percent'\">\r\n      <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | percent: colDef.typeParameter?.digitsInfo:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Date -->\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format:\r\n      colDef.typeParameter?.timezone:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | date: colDef.typeParameter?.format:\r\n        colDef.typeParameter?.timezone:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Default -->\r\n    <ng-container *ngSwitchDefault>\r\n      <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i3$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i3$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCell, deps: [{ token: i1$1.MtxDialog }, { token: MtxGridUtils }, { token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MtxGridCell, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "@if (summary) {\n  <span\n    [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n    [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n  </span>\n} @else {\n  <!-- Custom formatting -->\n  @if (colDef.formatter) {\n    <span\n      [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n      [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n    </span>\n  } @else {\n    <!-- Default formatting -->\n    @switch (colDef.type) {\n      <!-- Buttons -->\n      @case ('button') {\n        @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n          @if (!btn.iif || btn.iif(rowData)) {\n            @switch (btn.type) {\n              @case ('raised') {\n                <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('stroked') {\n                <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('icon') {\n                <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('mini-fab') {\n                <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @default {\n                <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n            }\n          }\n        }\n      }\n      <!-- Tag -->\n      @case ('tag') {\n        @if (colDef.tag && colDef.tag[_value]) {\n          <mat-chip-listbox>\n            <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\n              {{colDef.tag[_value].text}}\n            </mat-chip>\n          </mat-chip-listbox>\n        } @else {\n          {{_value}}\n        }\n      }\n      <!-- Link -->\n      @case ('link') {\n        <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n      }\n      <!-- Image -->\n      @case ('image') {\n        <img class=\"mtx-grid-img\" [src]=\"_value\">\n      }\n      <!-- Boolean -->\n      @case ('boolean') {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n      <!-- Number -->\n      @case ('number') {\n        <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Currency -->\n      @case ('currency') {\n        <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Percent -->\n      @case ('percent') {\n        <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Date -->\n      @case ('date') {\n        <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n          {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Default -->\n      @default {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n    }\n  }\n}\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i3$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i3$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridCell, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\r\n      [innerHTML]=\"_getText((data | cellSummary: colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n  <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n        [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n        [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n  <ng-container [ngSwitch]=\"colDef.type\">\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container\r\n                    *ngFor=\"let btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container [ngSwitch]=\"btn.type\">\r\n            <ng-container *ngSwitchCase=\"'raised'\">\r\n              <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'stroked'\">\r\n              <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'flat'\">\r\n              <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'icon'\">\r\n              <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fab'\">\r\n              <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n              <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n              </button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n              <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n                      [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n                      [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                      [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n                      [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n                      [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n                      [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n                      [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n                      [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n                      [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n                      [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n                      [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n                      [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n                      [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n                      [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n                      [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n                      [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n                      [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n                      [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n                      (click)=\"_onActionClick($event, btn, rowData)\">\r\n                <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n                <span>{{btn.text | toObservable | async}}</span>\r\n              </button>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-listbox *ngIf=\"colDef.tag && colDef.tag[_value]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\r\n          {{colDef.tag[_value].text}}\r\n        </mat-chip>\r\n      </mat-chip-listbox>\r\n      <ng-template #tagEmptyTpl>{{_value}}</ng-template>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_value\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | number: colDef.typeParameter?.digitsInfo:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Currency -->\r\n    <ng-container *ngSwitchCase=\"'currency'\">\r\n      <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode:\r\n      colDef.typeParameter?.display:\r\n      colDef.typeParameter?.digitsInfo:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | currency: colDef.typeParameter?.currencyCode:\r\n        colDef.typeParameter?.display:\r\n        colDef.typeParameter?.digitsInfo:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Percent -->\r\n    <ng-container *ngSwitchCase=\"'percent'\">\r\n      <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | percent: colDef.typeParameter?.digitsInfo:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Date -->\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format:\r\n      colDef.typeParameter?.timezone:\r\n      colDef.typeParameter?.locale)\">\r\n        {{_getText(_value | date: colDef.typeParameter?.format:\r\n        colDef.typeParameter?.timezone:\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Default -->\r\n    <ng-container *ngSwitchDefault>\r\n      <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MtxDialog }, { type: MtxGridUtils }, { type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rowData: [{
+            args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (summary) {\n  <span\n    [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n    [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n  </span>\n} @else {\n  <!-- Custom formatting -->\n  @if (colDef.formatter) {\n    <span\n      [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n      [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n    </span>\n  } @else {\n    <!-- Default formatting -->\n    @switch (colDef.type) {\n      <!-- Buttons -->\n      @case ('button') {\n        @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n          @if (!btn.iif || btn.iif(rowData)) {\n            @switch (btn.type) {\n              @case ('raised') {\n                <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('stroked') {\n                <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('icon') {\n                <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('mini-fab') {\n                <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @default {\n                <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n            }\n          }\n        }\n      }\n      <!-- Tag -->\n      @case ('tag') {\n        @if (colDef.tag && colDef.tag[_value]) {\n          <mat-chip-listbox>\n            <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\n              {{colDef.tag[_value].text}}\n            </mat-chip>\n          </mat-chip-listbox>\n        } @else {\n          {{_value}}\n        }\n      }\n      <!-- Link -->\n      @case ('link') {\n        <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n      }\n      <!-- Image -->\n      @case ('image') {\n        <img class=\"mtx-grid-img\" [src]=\"_value\">\n      }\n      <!-- Boolean -->\n      @case ('boolean') {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n      <!-- Number -->\n      @case ('number') {\n        <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Currency -->\n      @case ('currency') {\n        <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Percent -->\n      @case ('percent') {\n        <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Date -->\n      @case ('date') {\n        <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n          {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Default -->\n      @default {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n    }\n  }\n}\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MtxDialog }, { type: MtxGridUtils }, { type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { rowData: [{
                 type: Input
             }], colDef: [{
                 type: Input
@@ -672,12 +672,12 @@ class MtxGridColumnMenu {
             this.columnChange.emit(this.columns);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxGridColumnMenu, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "<ng-container [ngSwitch]=\"buttonType\">\r\n  <ng-container *ngSwitchCase=\"'raised'\">\r\n    <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'stroked'\">\r\n    <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'flat'\">\r\n    <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n  <div class=\"mtx-grid-column-menu-content\"\r\n       (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n    <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n      <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-body\">\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n           cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n             cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n          <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n               width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n            <path\r\n                  d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n            </path>\r\n          </svg>\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n      <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n  <ng-container *ngIf=\"pinnable\">\r\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\r\n            [matMenuTriggerFor]=\"pinList\">\r\n      <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n           viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n      </svg>\r\n      <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n           viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n              d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n      </svg>\r\n    </button>\r\n    <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n      <button class=\"mtx-grid-column-pin-option\" type=\"button\"\r\n              *ngFor=\"let item of pinOptions\" mat-menu-item\r\n              (click)=\"_handlePinSelect(col, item.value)\">\r\n        <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n          <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n          <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n               viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n          </svg>\r\n        </span>\r\n        <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n      </button>\r\n    </mat-menu>\r\n  </ng-container>\r\n\r\n  <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n                [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n                (change)=\"_handleChecked($event)\">\r\n    {{col.header | toObservable | async}}\r\n  </mat-checkbox>\r\n  <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n    {{col.header | toObservable | async}}\r\n  </span>\r\n</ng-template>\r\n", styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button{width:40px;height:40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MtxGridColumnMenu, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "@switch (buttonType) {\n  @case ('raised') {\n    <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('stroked') {\n    <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('flat') {\n    <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n    }\n  @case ('icon') {\n    <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n    </button>\n  }\n  @case ('fab') {\n    <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('mini-fab') {\n    <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @default {\n    <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n  <div class=\"mtx-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n    @if (showHeader) {\n      <div class=\"mtx-grid-column-menu-header\">\n        @if (headerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        } @else {\n          {{headerText}}\n        }\n      </div>\n    }\n\n    <div class=\"mtx-grid-column-menu-body\">\n      @if (sortable) {\n        <div class=\"mtx-grid-column-menu-list\"\n          cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\"\n              cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n              <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n                width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n              </svg>\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!sortable) {\n        <div class=\"mtx-grid-column-menu-list\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\">\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showFooter) {\n      <div class=\"mtx-grid-column-menu-footer\">\n        @if (footerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        } @else {\n          {{footerText}}\n        }\n      </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n      [matMenuTriggerFor]=\"pinList\">\n      @if (col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n        </svg>\n      }\n      @if (!col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n        </svg>\n      }\n      </button>\n      <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n        @for (item of pinOptions; track item) {\n          <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n            mat-menu-item\n            (click)=\"_handlePinSelect(col, item.value)\">\n            <span class=\"mtx-grid-column-pin-option-placeholder\">\n              <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n              @if (col.pinned==item.value) {\n                <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n                  viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                  <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n                </svg>\n              }\n            </span>\n            <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n          </button>\n        }\n      </mat-menu>\n  }\n\n  @if (selectable) {\n    <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n      [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n      (change)=\"_handleChecked($event)\">{{col.header | toObservable | async}}</mat-checkbox>\n  } @else {\n    <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridColumnMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridColumnMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-grid-column-menu', exportAs: 'mtxGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [ngSwitch]=\"buttonType\">\r\n  <ng-container *ngSwitchCase=\"'raised'\">\r\n    <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'stroked'\">\r\n    <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'flat'\">\r\n    <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n    <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\r\n            [matMenuTriggerFor]=\"menu\">\r\n      <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n  <div class=\"mtx-grid-column-menu-content\"\r\n       (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n    <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n      <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-body\">\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n           cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n             cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n          <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n               width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n            <path\r\n                  d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n            </path>\r\n          </svg>\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n        <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n          <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n                       [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n      <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n  <ng-container *ngIf=\"pinnable\">\r\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\r\n            [matMenuTriggerFor]=\"pinList\">\r\n      <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n           viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n      </svg>\r\n      <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n           viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n        <path\r\n              d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n      </svg>\r\n    </button>\r\n    <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n      <button class=\"mtx-grid-column-pin-option\" type=\"button\"\r\n              *ngFor=\"let item of pinOptions\" mat-menu-item\r\n              (click)=\"_handlePinSelect(col, item.value)\">\r\n        <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n          <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n          <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n               viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n            <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n          </svg>\r\n        </span>\r\n        <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n      </button>\r\n    </mat-menu>\r\n  </ng-container>\r\n\r\n  <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n                [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n                (change)=\"_handleChecked($event)\">\r\n    {{col.header | toObservable | async}}\r\n  </mat-checkbox>\r\n  <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n    {{col.header | toObservable | async}}\r\n  </span>\r\n</ng-template>\r\n", styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button{width:40px;height:40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"] }]
+            args: [{ selector: 'mtx-grid-column-menu', exportAs: 'mtxGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (buttonType) {\n  @case ('raised') {\n    <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('stroked') {\n    <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('flat') {\n    <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n    }\n  @case ('icon') {\n    <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n    </button>\n  }\n  @case ('fab') {\n    <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('mini-fab') {\n    <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @default {\n    <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n  <div class=\"mtx-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n    @if (showHeader) {\n      <div class=\"mtx-grid-column-menu-header\">\n        @if (headerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        } @else {\n          {{headerText}}\n        }\n      </div>\n    }\n\n    <div class=\"mtx-grid-column-menu-body\">\n      @if (sortable) {\n        <div class=\"mtx-grid-column-menu-list\"\n          cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\"\n              cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n              <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n                width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n              </svg>\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!sortable) {\n        <div class=\"mtx-grid-column-menu-list\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\">\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showFooter) {\n      <div class=\"mtx-grid-column-menu-footer\">\n        @if (footerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        } @else {\n          {{footerText}}\n        }\n      </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n      [matMenuTriggerFor]=\"pinList\">\n      @if (col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n        </svg>\n      }\n      @if (!col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n        </svg>\n      }\n      </button>\n      <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n        @for (item of pinOptions; track item) {\n          <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n            mat-menu-item\n            (click)=\"_handlePinSelect(col, item.value)\">\n            <span class=\"mtx-grid-column-pin-option-placeholder\">\n              <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n              @if (col.pinned==item.value) {\n                <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n                  viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                  <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n                </svg>\n              }\n            </span>\n            <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n          </button>\n        }\n      </mat-menu>\n  }\n\n  @if (selectable) {\n    <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n      [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n      (change)=\"_handleChecked($event)\">{{col.header | toObservable | async}}</mat-checkbox>\n  } @else {\n    <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"] }]
         }], propDecorators: { menuPanel: [{
                 type: ViewChild,
                 args: ['menu', { static: true }]
@@ -757,15 +757,15 @@ class MtxGridExpansionToggle {
         this.opened = !this.opened;
         this.toggleChange.emit(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: MtxGridExpansionToggle, 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: MtxGridExpansionToggle, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridExpansionToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridExpansionToggle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtx-grid-expansion-toggle]',
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { opened: [{
+        }], ctorParameters: () => [], propDecorators: { opened: [{
                 type: Input
             }], openedChange: [{
                 type: Output
@@ -1134,8 +1134,8 @@ class MtxGrid {
     _contextmenu(event, rowData, index) {
         this.rowContextMenu.emit({ event, rowData, index });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGrid, deps: [{ token: MtxGridUtils }, { token: i0.ChangeDetectorRef }, { token: MTX_GRID_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxGrid, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: "loading", trackBy: "trackBy", columnResizable: "columnResizable", emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: "pageOnFront", showPaginator: "showPaginator", pageDisabled: "pageDisabled", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: "hidePageSize", paginationTemplate: "paginationTemplate", sortOnFront: "sortOnFront", sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: "sortDisableClear", sortDisabled: "sortDisabled", sortStart: "sortStart", rowHover: "rowHover", rowStriped: "rowStriped", expandable: "expandable", expansionTemplate: "expansionTemplate", multiSelectable: "multiSelectable", multiSelectionWithClick: "multiSelectionWithClick", rowSelectable: "rowSelectable", hideRowSelectionCheckbox: "hideRowSelectionCheckbox", disableRowClickSelection: "disableRowClickSelection", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", rowSelected: "rowSelected", cellSelectable: "cellSelectable", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: "columnHideable", columnHideableChecked: "columnHideableChecked", columnSortable: "columnSortable", columnPinnable: "columnPinnable", columnPinOptions: "columnPinOptions", showColumnMenuButton: "showColumnMenuButton", columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", showColumnMenuHeader: "showColumnMenuHeader", columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: "showColumnMenuFooter", columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: "useContentRowTemplate", useContentHeaderRowTemplate: "useContentHeaderRowTemplate", useContentFooterRowTemplate: "useContentFooterRowTemplate", showSummary: "showSummary", summaryTemplate: "summaryTemplate", showSidebar: "showSidebar", sidebarTemplate: "sidebarTemplate", showStatusbar: "showStatusbar", statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange" }, host: { 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: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n  <div class=\"mtx-grid-toolbar-content\">\r\n    <ng-template [ngIf]=\"toolbarTemplate\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultToolbarTemplate>\r\n      <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"mtx-grid-toolbar-actions\">\r\n    <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n                          [columns]=\"columns\"\r\n                          [buttonText]=\"columnMenuButtonText\"\r\n                          [buttonType]=\"columnMenuButtonType\"\r\n                          [buttonColor]=\"columnMenuButtonColor\"\r\n                          [buttonClass]=\"columnMenuButtonClass\"\r\n                          [buttonIcon]=\"columnMenuButtonIcon\"\r\n                          [selectable]=\"columnHideable\"\r\n                          [selectableChecked]=\"columnHideableChecked\"\r\n                          [sortable]=\"columnSortable\"\r\n                          [pinnable]=\"columnPinnable\"\r\n                          [showHeader]=\"showColumnMenuHeader\"\r\n                          [headerText]=\"columnMenuHeaderText\"\r\n                          [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n                          [showFooter]=\"showColumnMenuFooter\"\r\n                          [footerText]=\"columnMenuFooterText\"\r\n                          [footerTemplate]=\"columnMenuFooterTemplate\"\r\n                          [pinOptions]=\"columnPinOptions\"\r\n                          (columnChange)=\"_onColumnChange($event)\">\r\n    </mtx-grid-column-menu>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n  <!-- Table content -->\r\n  <div class=\"mtx-grid-content mtx-grid-layout\">\r\n    <div #tableContainer class=\"mat-table-container\"\r\n         [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n      <table mat-table *ngIf=\"!columnResizable\"\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_onSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col | colClass\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n                         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n                         focusable=\"false\">\r\n                      <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n                    </svg>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectedChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n                        mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n                  <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n                       width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n                    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n                  </svg>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n                               (rowDataChange)=\"_onRowDataChange($event)\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n                               [placeholder]=\"emptyValuePlaceholder\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n              [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\r\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <!-- TODO: Use flexbox-based mat-table -->\r\n      <table mat-table *ngIf=\"columnResizable\"\r\n             columnResize\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_onSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col | colClass\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                [resizable]=\"col.resizable\"\r\n                [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n                         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n                         focusable=\"false\">\r\n                      <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n                    </svg>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectedChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n                        mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n                  <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n                       width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n                    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n                  </svg>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n                               (rowDataChange)=\"_onRowDataChange($event)\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n                               [placeholder]=\"emptyValuePlaceholder\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n              [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\r\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </div>\r\n\r\n    <!-- No result -->\r\n    <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n      <ng-template [ngIf]=\"noResultTemplate\" [ngIfElse]=\"defaultNoResultTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tool sidebar -->\r\n  <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n    <ng-template [ngIf]=\"sidebarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n  <!-- Status Bar -->\r\n  <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n    <ng-template [ngIf]=\"statusbarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n\r\n  <!-- Pagination -->\r\n  <div class=\"mtx-grid-pagination\">\r\n    <ng-template [ngIf]=\"paginationTemplate\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultPaginationTemplate>\r\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\r\n                     [showFirstLastButtons]=\"showFirstLastButtons\"\r\n                     [length]=\"length\"\r\n                     [pageIndex]=\"pageIndex\"\r\n                     [pageSize]=\"pageSize\"\r\n                     [pageSizeOptions]=\"pageSizeOptions\"\r\n                     [hidePageSize]=\"hidePageSize\"\r\n                     (page)=\"_onPage($event)\"\r\n                     [disabled]=\"pageDisabled\">\r\n      </mat-paginator>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n  <ng-template [ngIf]=\"headerExtraTemplate | isTemplateRef\" [ngIfElse]=\"headerExtraTpl\">\r\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template #headerExtraTpl>\r\n    <ng-template [ngIf]=\"$any(headerExtraTemplate)?.[col.field] | isTemplateRef\">\r\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n                   [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-template>\r\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;border:1px solid var(--mtx-grid-outline-color)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:var(--mtx-grid-table-row-selected-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color)}.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: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-header-cell,.mtx-grid .mat-mdc-footer-cell,.mtx-grid .mat-mdc-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.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)}.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-mdc-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin:0 4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color)}.mtx-grid .mat-paginator-hidden{display:none}.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:48px;padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color)}.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)}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color)}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px;border-top:1px solid var(--mtx-grid-outline-color)}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:60px;min-width:60px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mtx-grid-row-expand-button.mat-mdc-icon-button{width:40px;height:40px;padding:8px;vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button+mtx-grid-cell{vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-icon{width:20px;height:20px;font-size:20px}.mtx-grid-column-menu-item,.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu-header{border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{border-top:1px solid var(--mtx-grid-column-menu-divider-color)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i3$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterCellDef; }), selector: "[matFooterCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterRowDef; }), selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterCell; }), selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatFooterRow; }), selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i8$1.MatProgressBar; }), selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i0.forwardRef(function () { return MatColumnResize; }), selector: "table[mat-table][columnResize]" }, { kind: "directive", type: i0.forwardRef(function () { return MatResizable; }), selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridCell; }), selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridColumnMenu; }), selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridExpansionToggle; }), selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridSelectableCell; }), selector: "[mtx-grid-selectable-cell]", inputs: ["mtxSelectableRowData"], outputs: ["cellSelectedChange"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3$1.AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return i14.MtxToObservablePipe; }), name: "toObservable" }, { kind: "pipe", type: i0.forwardRef(function () { return i14.MtxIsTemplateRefPipe; }), name: "isTemplateRef" }, { kind: "pipe", type: i0.forwardRef(function () { return MtxGridRowClassPipe; }), name: "rowClass" }, { kind: "pipe", type: i0.forwardRef(function () { return MtxGridColClassPipe; }), name: "colClass" }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGrid, deps: [{ token: MtxGridUtils }, { token: i0.ChangeDetectorRef }, { token: MTX_GRID_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MtxGrid, 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", 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: { 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: "columnMenu", first: true, predicate: ["columnMenu"], 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 #columnMenu\n          [columns]=\"columns\"\n          [buttonText]=\"columnMenuButtonText\"\n          [buttonType]=\"columnMenuButtonType\"\n          [buttonColor]=\"columnMenuButtonColor\"\n          [buttonClass]=\"columnMenuButtonClass\"\n          [buttonIcon]=\"columnMenuButtonIcon\"\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          [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n          [dataSource]=\"dataSource\" [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) {\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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, '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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\n                mtx-grid-selectable-cell (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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, '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\"\n                  [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n                  <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                  </ng-template>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              [ngClass]=\"['mtx-grid-expansion', 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          [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n          [dataSource]=\"dataSource\" [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) {\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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\n                [resizable]=\"col.resizable\"\n                [matResizableMinWidthPx]=\"col.minWidth\" [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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\n                mtx-grid-selectable-cell (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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'left': col.left, '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\"\n                  [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n                  <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                  </ng-template>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              [ngClass]=\"['mtx-grid-expansion', 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%;border:1px solid var(--mtx-grid-outline-color);border-radius:var(--mtx-grid-container-shape)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:var(--mtx-grid-table-row-selected-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color)}.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)}.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)}.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:0 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);border-bottom-left-radius:var(--mtx-grid-container-shape);border-bottom-right-radius:var(--mtx-grid-container-shape)}.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)) / 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:48px;padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color)}.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)}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color)}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px;border-top:1px solid var(--mtx-grid-outline-color)}.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(--mtx-grid-row-expand-button-size);height:var(--mtx-grid-row-expand-button-size)}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:var(--mat-table-row-item-container-height);overflow:hidden}.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}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i3$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i3$1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i3$3.MatTable), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatHeaderCellDef), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatHeaderRowDef), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatColumnDef), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatCellDef), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatRowDef), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatFooterCellDef), selector: "[matFooterCellDef]" }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatFooterRowDef), selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatHeaderCell), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatCell), selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i0.forwardRef(() => i3$3.MatFooterCell), selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i0.forwardRef(() => i3$3.MatHeaderRow), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(() => i3$3.MatRow), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i0.forwardRef(() => i3$3.MatFooterRow), selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i0.forwardRef(() => i4$2.MatSort), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(() => i4$2.MatSortHeader), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i0.forwardRef(() => i5$1.MatPaginator), selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i0.forwardRef(() => i3$2.MatCheckbox), selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(() => i4$1.MatIconButton), selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(() => i8$1.MatProgressBar), selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i0.forwardRef(() => MatColumnResize), selector: "table[mat-table][columnResize]" }, { kind: "directive", type: i0.forwardRef(() => MatResizable), selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "component", type: i0.forwardRef(() => MtxGridCell), selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: i0.forwardRef(() => MtxGridColumnMenu), selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: i0.forwardRef(() => MtxGridExpansionToggle), selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "directive", type: i0.forwardRef(() => MtxGridSelectableCell), selector: "[mtx-grid-selectable-cell]", inputs: ["mtxSelectableRowData"], outputs: ["cellSelectedChange"] }, { kind: "pipe", type: i0.forwardRef(() => i3$1.AsyncPipe), name: "async" }, { kind: "pipe", type: i0.forwardRef(() => i14.MtxToObservablePipe), name: "toObservable" }, { kind: "pipe", type: i0.forwardRef(() => i14.MtxIsTemplateRefPipe), name: "isTemplateRef" }, { kind: "pipe", type: i0.forwardRef(() => MtxGridRowClassPipe), name: "rowClass" }, { kind: "pipe", type: i0.forwardRef(() => MtxGridColClassPipe), name: "colClass" }], animations: [
             trigger('expansion', [
                 state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
                 state('expanded', style({ height: '*', visibility: 'visible' })),
@@ -1144,7 +1144,7 @@ class MtxGrid {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGrid, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-grid', exportAs: 'mtxGrid', host: {
                         class: 'mtx-grid',
@@ -1155,13 +1155,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                             transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n  <div class=\"mtx-grid-toolbar-content\">\r\n    <ng-template [ngIf]=\"toolbarTemplate\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultToolbarTemplate>\r\n      <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"mtx-grid-toolbar-actions\">\r\n    <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n                          [columns]=\"columns\"\r\n                          [buttonText]=\"columnMenuButtonText\"\r\n                          [buttonType]=\"columnMenuButtonType\"\r\n                          [buttonColor]=\"columnMenuButtonColor\"\r\n                          [buttonClass]=\"columnMenuButtonClass\"\r\n                          [buttonIcon]=\"columnMenuButtonIcon\"\r\n                          [selectable]=\"columnHideable\"\r\n                          [selectableChecked]=\"columnHideableChecked\"\r\n                          [sortable]=\"columnSortable\"\r\n                          [pinnable]=\"columnPinnable\"\r\n                          [showHeader]=\"showColumnMenuHeader\"\r\n                          [headerText]=\"columnMenuHeaderText\"\r\n                          [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n                          [showFooter]=\"showColumnMenuFooter\"\r\n                          [footerText]=\"columnMenuFooterText\"\r\n                          [footerTemplate]=\"columnMenuFooterTemplate\"\r\n                          [pinOptions]=\"columnPinOptions\"\r\n                          (columnChange)=\"_onColumnChange($event)\">\r\n    </mtx-grid-column-menu>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n  <!-- Table content -->\r\n  <div class=\"mtx-grid-content mtx-grid-layout\">\r\n    <div #tableContainer class=\"mat-table-container\"\r\n         [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n      <table mat-table *ngIf=\"!columnResizable\"\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_onSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col | colClass\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n                         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n                         focusable=\"false\">\r\n                      <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n                    </svg>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectedChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n                        mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n                  <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n                       width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n                    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n                  </svg>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n                               (rowDataChange)=\"_onRowDataChange($event)\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n                               [placeholder]=\"emptyValuePlaceholder\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n              [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\r\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n\r\n      <!-- TODO: Use flexbox-based mat-table -->\r\n      <table mat-table *ngIf=\"columnResizable\"\r\n             columnResize\r\n             [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n             [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n             matSort\r\n             [matSortActive]=\"sortActive\"\r\n             [matSortDirection]=\"sortDirection\"\r\n             [matSortDisableClear]=\"sortDisableClear\"\r\n             [matSortDisabled]=\"sortDisabled\"\r\n             [matSortStart]=\"sortStart\"\r\n             (matSortChange)=\"_onSortChange($event)\"\r\n             [trackBy]=\"trackBy\">\r\n\r\n        <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n                      matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n          <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"multiSelectable\"\r\n                          [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n                          [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n                          (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n            </mat-checkbox>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n              class=\"mtx-grid-checkbox-cell\">\r\n            <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n                          [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n                          [checked]=\"rowSelection.isSelected(row)\"\r\n                          (click)=\"$event.stopPropagation()\"\r\n                          (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n            </mat-checkbox>\r\n          </td>\r\n          <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let col of columns;\">\r\n          <ng-container [matColumnDef]=\"col.field\"\r\n                        [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n            <th mat-header-cell *matHeaderCellDef\r\n                [class]=\"col | colClass\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                [resizable]=\"col.resizable\"\r\n                [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n              <div class=\"mat-header-cell-inner\">\r\n                <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #headerTpl>\r\n                  <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n                                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n                <ng-template #defaultHeaderTpl>\r\n                  <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n                       [disabled]=\"!col.sortable\"\r\n                       [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [start]=\"col.sortProp?.start!\">\r\n                    <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n                    <span>{{col.header | toObservable | async}}</span>\r\n                    <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n                         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n                         focusable=\"false\">\r\n                      <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n                    </svg>\r\n                  </div>\r\n                  <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </div>\r\n            </th>\r\n\r\n            <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n                [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n                mtx-grid-selectable-cell (cellSelectedChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #cellTpl>\r\n                <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #colDefCellTpl>\r\n                <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n                             [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultCellTpl>\r\n                <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n                        mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n                  <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n                       width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n                    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n                  </svg>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n                               (rowDataChange)=\"_onRowDataChange($event)\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td mat-footer-cell *matFooterCellDef\r\n                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n              <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n              <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #summaryTpl>\r\n                <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n                               [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-template>\r\n              <ng-template #defaultSummaryTpl>\r\n                <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n                               [placeholder]=\"emptyValuePlaceholder\">\r\n                </mtx-grid-cell>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n        </ng-template>\r\n        <ng-template #defaultHeaderRowTpl>\r\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n        <ng-template #defaultRowTpl>\r\n          <tr mat-row\r\n              *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n              [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n              [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n              (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\r\n              (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\r\n          </tr>\r\n        </ng-template>\r\n\r\n        <ng-template [ngIf]=\"_whetherShowSummary\">\r\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n        </ng-template>\r\n        <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n        <ng-container *ngIf=\"expandable\">\r\n          <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n          <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n            <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n                [attr.colspan]=\"displayedColumns.length\">\r\n              <div class=\"mtx-grid-expansion-detail\"\r\n                   [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n                <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n                             [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n                </ng-template>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-row\r\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n              [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </div>\r\n\r\n    <!-- No result -->\r\n    <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n      <ng-template [ngIf]=\"noResultTemplate\" [ngIfElse]=\"defaultNoResultTpl\">\r\n        <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n      </ng-template>\r\n      <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Tool sidebar -->\r\n  <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n    <ng-template [ngIf]=\"sidebarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n  <!-- Status Bar -->\r\n  <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n    <ng-template [ngIf]=\"statusbarTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n    </ng-template>\r\n  </div>\r\n\r\n  <!-- Pagination -->\r\n  <div class=\"mtx-grid-pagination\">\r\n    <ng-template [ngIf]=\"paginationTemplate\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n      <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n    </ng-template>\r\n    <ng-template #defaultPaginationTemplate>\r\n      <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\r\n                     [showFirstLastButtons]=\"showFirstLastButtons\"\r\n                     [length]=\"length\"\r\n                     [pageIndex]=\"pageIndex\"\r\n                     [pageSize]=\"pageSize\"\r\n                     [pageSizeOptions]=\"pageSizeOptions\"\r\n                     [hidePageSize]=\"hidePageSize\"\r\n                     (page)=\"_onPage($event)\"\r\n                     [disabled]=\"pageDisabled\">\r\n      </mat-paginator>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n  <ng-template [ngIf]=\"headerExtraTemplate | isTemplateRef\" [ngIfElse]=\"headerExtraTpl\">\r\n    <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n                 [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template #headerExtraTpl>\r\n    <ng-template [ngIf]=\"$any(headerExtraTemplate)?.[col.field] | isTemplateRef\">\r\n      <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n                   [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-template>\r\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;border:1px solid var(--mtx-grid-outline-color)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:var(--mtx-grid-table-row-selected-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color)}.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: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-header-cell,.mtx-grid .mat-mdc-footer-cell,.mtx-grid .mat-mdc-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.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)}.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-mdc-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin:0 4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color)}.mtx-grid .mat-paginator-hidden{display:none}.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:48px;padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color)}.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)}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color)}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px;border-top:1px solid var(--mtx-grid-outline-color)}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:60px;min-width:60px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mtx-grid-row-expand-button.mat-mdc-icon-button{width:40px;height:40px;padding:8px;vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button+mtx-grid-cell{vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-icon{width:20px;height:20px;font-size:20px}.mtx-grid-column-menu-item,.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu-header{border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{border-top:1px solid var(--mtx-grid-column-menu-divider-color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: MtxGridUtils }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    ], 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 #columnMenu\n          [columns]=\"columns\"\n          [buttonText]=\"columnMenuButtonText\"\n          [buttonType]=\"columnMenuButtonType\"\n          [buttonColor]=\"columnMenuButtonColor\"\n          [buttonClass]=\"columnMenuButtonClass\"\n          [buttonIcon]=\"columnMenuButtonIcon\"\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          [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n          [dataSource]=\"dataSource\" [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) {\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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, '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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\n                mtx-grid-selectable-cell (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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, '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\"\n                  [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n                  <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                  </ng-template>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              [ngClass]=\"['mtx-grid-expansion', 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          [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n          [dataSource]=\"dataSource\" [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) {\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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\n                [resizable]=\"col.resizable\"\n                [matResizableMinWidthPx]=\"col.minWidth\" [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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\n                mtx-grid-selectable-cell (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                [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\n                [ngStyle]=\"{'width': col.width, 'left': col.left, '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\"\n                  [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n                  <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n                  </ng-template>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-row\n              *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n              [ngClass]=\"['mtx-grid-expansion', 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%;border:1px solid var(--mtx-grid-outline-color);border-radius:var(--mtx-grid-container-shape)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-row.selected,.mtx-grid .mat-mdc-table .mat-mdc-row.mat-row-odd.selected{background-color:var(--mtx-grid-table-row-selected-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color)}.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)}.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)}.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:0 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);border-bottom-left-radius:var(--mtx-grid-container-shape);border-bottom-right-radius:var(--mtx-grid-container-shape)}.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)) / 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:48px;padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color)}.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)}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color)}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px;border-top:1px solid var(--mtx-grid-outline-color)}.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(--mtx-grid-row-expand-button-size);height:var(--mtx-grid-row-expand-button-size)}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:var(--mat-table-row-item-container-height);overflow:hidden}.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}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"] }]
+        }], ctorParameters: () => [{ type: MtxGridUtils }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MTX_GRID_DEFAULT_OPTIONS]
-                }] }]; }, propDecorators: { table: [{
+                }] }], propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]
             }], paginator: [{
@@ -1194,21 +1194,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], length: [{
                 type: Input
             }], loading: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], trackBy: [{
                 type: Input
             }], columnResizable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], emptyValuePlaceholder: [{
                 type: Input
             }], pageOnFront: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showPaginator: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], pageDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showFirstLastButtons: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], pageIndex: [{
                 type: Input
             }], pageSize: [{
@@ -1216,49 +1222,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], pageSizeOptions: [{
                 type: Input
             }], hidePageSize: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], page: [{
                 type: Output
             }], paginationTemplate: [{
                 type: Input
             }], sortOnFront: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], sortActive: [{
                 type: Input
             }], sortDirection: [{
                 type: Input
             }], sortDisableClear: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], sortDisabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], sortStart: [{
                 type: Input
             }], sortChange: [{
                 type: Output
             }], rowHover: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], rowStriped: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], rowClick: [{
                 type: Output
             }], rowContextMenu: [{
                 type: Output
             }], expandable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], expansionTemplate: [{
                 type: Input
             }], expansionChange: [{
                 type: Output
             }], multiSelectable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], multiSelectionWithClick: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], rowSelectable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], hideRowSelectionCheckbox: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disableRowClickSelection: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], rowSelectionFormatter: [{
                 type: Input
             }], rowClassFormatter: [{
@@ -1268,29 +1286,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], rowSelectedChange: [{
                 type: Output
             }], cellSelectable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cellSelectedChange: [{
                 type: Output
             }], showToolbar: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], toolbarTitle: [{
                 type: Input
             }], toolbarTemplate: [{
                 type: Input
             }], columnHideable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnHideableChecked: [{
                 type: Input
             }], columnSortable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnPinnable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnChange: [{
                 type: Output
             }], columnPinOptions: [{
                 type: Input
             }], showColumnMenuButton: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnMenuButtonText: [{
                 type: Input
             }], columnMenuButtonType: [{
@@ -1302,13 +1326,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], columnMenuButtonIcon: [{
                 type: Input
             }], showColumnMenuHeader: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnMenuHeaderText: [{
                 type: Input
             }], columnMenuHeaderTemplate: [{
                 type: Input
             }], showColumnMenuFooter: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], columnMenuFooterText: [{
                 type: Input
             }], columnMenuFooterTemplate: [{
@@ -1324,21 +1350,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], cellTemplate: [{
                 type: Input
             }], useContentRowTemplate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], useContentHeaderRowTemplate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], useContentFooterRowTemplate: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], showSummary: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], summaryTemplate: [{
                 type: Input
             }], showSidebar: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], sidebarTemplate: [{
                 type: Input
             }], showStatusbar: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], statusbarTemplate: [{
                 type: Input
             }] } });
@@ -1377,15 +1409,15 @@ class MtxGridSelectableCell {
         this._selected = !this._selected;
         this.cellSelectedChange.emit(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridSelectableCell, deps: [{ token: MtxGrid }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: MtxGridSelectableCell, selector: "[mtx-grid-selectable-cell]", inputs: { mtxSelectableRowData: "mtxSelectableRowData" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "this.selected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridSelectableCell, deps: [{ token: MtxGrid }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.7", type: MtxGridSelectableCell, selector: "[mtx-grid-selectable-cell]", inputs: { mtxSelectableRowData: "mtxSelectableRowData" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "this.selected" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridSelectableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridSelectableCell, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtx-grid-selectable-cell]',
                 }]
-        }], ctorParameters: function () { return [{ type: MtxGrid }]; }, propDecorators: { selected: [{
+        }], ctorParameters: () => [{ type: MtxGrid }], propDecorators: { selected: [{
                 type: HostBinding,
                 args: ['class.selected']
             }], mtxSelectableRowData: [{
@@ -1398,8 +1430,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }] } });
 
 class MtxGridModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxGridModule, declarations: [MtxGrid,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxGridModule, declarations: [MtxGrid,
             MtxGridCell,
             MtxGridColumnMenu,
             MtxGridExpansionToggle,
@@ -1441,7 +1473,7 @@ class MtxGridModule {
             MtxGridCellActionBadgePipe,
             MtxGridCellActionDisablePipe,
             MtxGridCellSummaryPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridModule, providers: [MtxGridUtils], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridModule, providers: [MtxGridUtils], imports: [CommonModule,
             FormsModule,
             MatTableModule,
             MatSortModule,
@@ -1461,7 +1493,7 @@ class MtxGridModule {
             MtxDialogModule,
             MtxPipesModule, MatColumnResizeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [