@ng-matero/extensions 13.1.0 → 14.0.0

package/fesm2020/mtxGrid.mjs

@@ -1,32 +1,32 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, Output, Directive, HostBinding, HostListener, Inject, TemplateRef, ContentChildren, NgModule } from '@angular/core';
-import * as i6 from '@angular/common';
+import { Injectable, Inject, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, EventEmitter, ViewChild, Output, HostListener, TemplateRef, ContentChildren, NgModule } from '@angular/core';
+import * as i3$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i7 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4$2 from '@angular/material/table';
+import * as i3$3 from '@angular/material/table';
 import { MatTableDataSource, MatRowDef, MatHeaderRowDef, MatFooterRow, MatTable, MatTableModule } from '@angular/material/table';
-import * as i6$2 from '@angular/material/sort';
+import * as i4$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i10 from '@angular/material/paginator';
+import * as i5$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i4 from '@angular/material/checkbox';
+import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1 from '@angular/material/button';
+import * as i4$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$2 from '@angular/material/progress-bar';
+import * as i8$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i3$1 from '@angular/material/chips';
+import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i7$1 from '@angular/material/tooltip';
+import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@angular/material/icon';
+import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/menu';
+import * as i6$1 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i6$1 from '@angular/cdk/drag-drop';
+import * as i7$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i8 from '@ng-matero/extensions/core';
 import { MtxPipesModule } from '@ng-matero/extensions/core';
@@ -34,15 +34,15 @@ 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 { SelectionModel } from '@angular/cdk/collections';
-import PhotoViewer from 'photoviewer';
-import * as i2$1 from '@ng-matero/extensions/column-resize';
+import * as i2 from '@ng-matero/extensions/column-resize';
 import { CdkFlexTableResizeStrategy, ResizeStrategy, ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeNotifierSource, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, ColumnResize, ResizeOverlayHandle, Resizable } from '@ng-matero/extensions/column-resize';
 export { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER as MAT_TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER } from '@ng-matero/extensions/column-resize';
-import * as i1$2 from '@angular/cdk/table';
+import * as i1 from '@angular/cdk/table';
 import { _COALESCED_STYLE_SCHEDULER } from '@angular/cdk/table';
-import * as i3$2 from '@angular/cdk/bidi';
-import * as i4$1 from '@angular/cdk/overlay';
+import * as i3 from '@angular/cdk/bidi';
+import * as i4 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import PhotoViewer from 'photoviewer';
 
 class MtxGridService {
     constructor() { }
@@ -80,254 +80,12 @@ class MtxGridService {
         return str.replace(/[\r\n\s]/g, '').split(',');
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ MtxGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridService, decorators: [{
+/** @nocollapse */ MtxGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MtxGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class MtxGridColumnMenuComponent {
-    constructor() {
-        this.columns = [];
-        this.selectable = true;
-        this.selectableChecked = 'show';
-        this.sortable = true;
-        this.dndSortable = true;
-        this._buttonText = '';
-        this.buttonType = 'stroked';
-        this.buttonClass = '';
-        this.buttonIcon = '';
-        this.showHeader = false;
-        this.headerText = 'Columns Header';
-        this.showFooter = false;
-        this.footerText = 'Columns Footer';
-        this.selectionChange = new EventEmitter();
-        this.sortChange = new EventEmitter();
-    }
-    get buttonText() {
-        const defaultText = `Columns ${this.selectableChecked === 'show' ? 'Shown' : 'Hidden'}`;
-        const text = this._buttonText ? this._buttonText : defaultText;
-        return text;
-    }
-    set buttonText(value) {
-        this._buttonText = value;
-    }
-    _handleDroped(event) {
-        moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
-        this.sortChange.emit(this.columns);
-    }
-    _handleSelection(e) {
-        this.selectionChange.emit(this.columns);
-    }
-}
-/** @nocollapse */ /** @nocollapse */ MtxGridColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MtxGridColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: MtxGridColumnMenuComponent, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", dndSortable: "dndSortable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate" }, outputs: { selectionChange: "selectionChange", sortChange: "sortChange" }, 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 [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 [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 [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 [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 [color]=\"buttonColor\" [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 [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 [color]=\"buttonColor\" [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\"\r\n           cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\"\r\n           *ngIf=\"sortable\">\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          <mat-icon cdkDragHandle>drag_handle</mat-icon>\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  <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\r\n                *ngIf=\"selectable\"\r\n                [(ngModel)]=\"col[selectableChecked]\"\r\n                [disabled]=\"col.disabled\"\r\n                (change)=\"_handleSelection($event)\">\r\n    {{col.label | toObservable | async}}\r\n  </mat-checkbox>\r\n  <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n    {{col.label | 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: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-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center;padding:4px 0}.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)}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$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"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$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"] }, { type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i6.AsyncPipe, "toObservable": i8.MtxToObservablePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridColumnMenuComponent, 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 [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 [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 [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 [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 [color]=\"buttonColor\" [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 [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 [color]=\"buttonColor\" [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\"\r\n           cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\"\r\n           *ngIf=\"sortable\">\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          <mat-icon cdkDragHandle>drag_handle</mat-icon>\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  <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\r\n                *ngIf=\"selectable\"\r\n                [(ngModel)]=\"col[selectableChecked]\"\r\n                [disabled]=\"col.disabled\"\r\n                (change)=\"_handleSelection($event)\">\r\n    {{col.label | toObservable | async}}\r\n  </mat-checkbox>\r\n  <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n    {{col.label | 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: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-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center;padding:4px 0}.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)}\n"] }]
-        }], propDecorators: { menuPanel: [{
-                type: ViewChild,
-                args: ['menu', { static: true }]
-            }], menuTrigger: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
-            }], columns: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], selectableChecked: [{
-                type: Input
-            }], sortable: [{
-                type: Input
-            }], dndSortable: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], buttonColor: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], buttonIcon: [{
-                type: Input
-            }], showHeader: [{
-                type: Input
-            }], headerText: [{
-                type: Input
-            }], headerTemplate: [{
-                type: Input
-            }], showFooter: [{
-                type: Input
-            }], footerText: [{
-                type: Input
-            }], footerTemplate: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], sortChange: [{
-                type: Output
-            }] } });
-
-class MtxGridCellComponent {
-    constructor(_dialog, _dataGridSrv) {
-        this._dialog = _dialog;
-        this._dataGridSrv = _dataGridSrv;
-        /** Row data */
-        this.rowData = {};
-        /** All data */
-        this.data = [];
-        /** Whether show summary */
-        this.summary = false;
-    }
-    get _colValue() {
-        return this._dataGridSrv.getCellValue(this.rowData, this.colDef);
-    }
-    _isString(fn) {
-        return Object.prototype.toString.call(fn) === '[object String]';
-    }
-    _isFunction(fn) {
-        return Object.prototype.toString.call(fn) === '[object Function]';
-    }
-    _isEmptyValue(value) {
-        return value == null || value.toString() === '';
-    }
-    _isContainHTML(value) {
-        return /<\/?[a-z][\s\S]*>/i.test(value);
-    }
-    _getText(value) {
-        return this._isEmptyValue(value) ? '--' : value;
-    }
-    _getTooltip(value) {
-        return this._isEmptyValue(value) ? '' : value;
-    }
-    _getFormatterTooltip(value) {
-        return this._isContainHTML(value) || this._isEmptyValue(value) ? '' : value;
-    }
-    _formatSummary(data, colDef) {
-        if (this._isString(colDef.summary)) {
-            return colDef.summary;
-        }
-        else if (this._isFunction(colDef.summary)) {
-            return colDef.summary(this._dataGridSrv.getColData(data, colDef), colDef);
-        }
-    }
-    _handleActionConfirm(event, title, description = '', okColor = 'primary', okText = 'OK', closeColor, closeText = 'CLOSE', fn, data) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._dialog.open({
-            title,
-            description,
-            buttons: [
-                {
-                    color: okColor,
-                    text: okText,
-                    onClick: () => (fn ? fn(data) : {}),
-                },
-                { color: closeColor, text: closeText, onClick: () => { } },
-            ],
-        });
-    }
-    _handleActionClick(event, btn, rowData) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (btn.click) {
-            btn.click(rowData);
-        }
-    }
-    /** Preview enlarged image */
-    _handleImagePreview(urlStr) {
-        const imgs = [];
-        this._dataGridSrv.str2arr(urlStr).forEach((url, index) => {
-            imgs.push({ title: index + 1 + '', src: url });
-        });
-        const footerToolbar = imgs.length > 1
-            ? ['zoomIn', 'zoomOut', 'prev', 'next', 'rotateRight', 'rotateLeft', 'actualSize']
-            : ['zoomIn', 'zoomOut', 'rotateRight', 'rotateLeft', 'actualSize'];
-        const options = {
-            title: imgs.length > 1,
-            footerToolbar,
-        };
-        const viewer = new PhotoViewer(imgs, options);
-    }
-}
-/** @nocollapse */ /** @nocollapse */ MtxGridCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridCellComponent, deps: [{ token: i1$1.MtxDialog }, { token: MtxGridService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MtxGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: MtxGridCellComponent, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n      [innerHTML]=\"_getText(_formatSummary(data, 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    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n          {{colDef.tag[_colValue].text}}\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n      <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n    </ng-container>\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon>{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-container>\r\n          <ng-template #btnDefaultTpl>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon>{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Currency -->\r\n    <ng-container *ngSwitchCase=\"'currency'\">\r\n      <span [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Percent -->\r\n    <ng-container *ngSwitchCase=\"'percent'\">\r\n      <span [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Date -->\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <span [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Default -->\r\n    <ng-container *ngSwitchDefault>\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-action-button .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\n"], components: [{ type: i3$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i6.AsyncPipe, "toObservable": i8.MtxToObservablePipe, "number": i6.DecimalPipe, "currency": i6.CurrencyPipe, "percent": i6.PercentPipe, "date": i6.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridCellComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n      [innerHTML]=\"_getText(_formatSummary(data, 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    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n          {{colDef.tag[_colValue].text}}\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n      <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n    </ng-container>\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon>{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-container>\r\n          <ng-template #btnDefaultTpl>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n              <span>{{btn.text | toObservable | async}}</span>\r\n            </button>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon>{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Currency -->\r\n    <ng-container *ngSwitchCase=\"'currency'\">\r\n      <span [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Percent -->\r\n    <ng-container *ngSwitchCase=\"'percent'\">\r\n      <span [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Date -->\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n      <span [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    <!-- Default -->\r\n    <ng-container *ngSwitchDefault>\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-action-button .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MtxDialog }, { type: MtxGridService }]; }, propDecorators: { rowData: [{
-                type: Input
-            }], colDef: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], summary: [{
-                type: Input
-            }] } });
-
-class MtxGridExpansionToggleDirective {
-    constructor() {
-        this._opened = false;
-        this.openedChange = new EventEmitter();
-        this.toggleChange = new EventEmitter();
-    }
-    get opened() {
-        return this._opened;
-    }
-    set opened(newValue) {
-        this._opened = newValue;
-        this.openedChange.emit(newValue);
-    }
-    get expanded() {
-        return this._opened;
-    }
-    set expandableRow(value) {
-        if (value !== this._row) {
-            this._row = value;
-        }
-    }
-    set template(value) {
-        if (value !== this._tplRef) {
-            this._tplRef = value;
-        }
-    }
-    onClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.toggle();
-    }
-    toggle() {
-        this.opened = !this.opened;
-        this.toggleChange.emit(this);
-    }
-}
-/** @nocollapse */ /** @nocollapse */ MtxGridExpansionToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridExpansionToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MtxGridExpansionToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MtxGridExpansionToggleDirective, 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: "13.2.6", ngImport: i0, type: MtxGridExpansionToggleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mtx-grid-expansion-toggle]',
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { opened: [{
-                type: Input
-            }], openedChange: [{
-                type: Output
-            }], expanded: [{
-                type: HostBinding,
-                args: ['class.expanded']
-            }], expandableRow: [{
-                type: Input
-            }], template: [{
-                type: Input,
-                args: ['expansionRowTpl']
-            }], toggleChange: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -346,14 +104,14 @@ class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
         return `mat-column-${cssFriendlyColumnName}`;
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatFlexTableResizeStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i2$1.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1$2.CdkTable }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ MatFlexTableResizeStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatFlexTableResizeStrategy });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
+/** @nocollapse */ MatFlexTableResizeStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i2.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1.CdkTable }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MatFlexTableResizeStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatFlexTableResizeStrategy });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2$1.ColumnResize }, { type: i1$2._CoalescedStyleScheduler, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2.ColumnResize }, { type: i1._CoalescedStyleScheduler, decorators: [{
                     type: Inject,
                     args: [_COALESCED_STYLE_SCHEDULER]
-                }] }, { type: i1$2.CdkTable }, { type: undefined, decorators: [{
+                }] }, { type: i1.CdkTable }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }]; } });
@@ -415,16 +173,16 @@ class MatColumnResize extends AbstractMatColumnResize {
         this.notifier = notifier;
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatColumnResize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResize, deps: [{ token: i2$1.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2$1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2$1.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MatColumnResize.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", 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: "13.2.6", ngImport: i0, type: MatColumnResize, decorators: [{
+/** @nocollapse */ MatColumnResize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", 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 */ MatColumnResize.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", 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: "14.0.3", 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$1.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2$1.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2$1.ColumnResizeNotifierSource }]; } });
+        }], ctorParameters: function () { return [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }]; } });
 
 /**
  * @license
@@ -460,9 +218,9 @@ class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
         });
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeOverlayHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: [{ token: i1$2.CdkColumnDef }, { token: i2$1.ColumnResize }, { token: i3$2.Directionality }, { token: i0.ElementRef }, { token: i2$1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2$1.ColumnResizeNotifierSource }, { token: i2$1.ResizeRef }, { token: _COALESCED_STYLE_SCHEDULER }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeOverlayHandle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: MatColumnResizeOverlayHandle, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
+/** @nocollapse */ MatColumnResizeOverlayHandle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", 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 */ MatColumnResizeOverlayHandle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MatColumnResizeOverlayHandle, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -470,7 +228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                     host: { class: 'mat-column-resize-overlay-thumb' },
                     template: '',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.CdkColumnDef }, { type: i2$1.ColumnResize }, { type: i3$2.Directionality }, { type: i0.ElementRef }, { type: i2$1.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2$1.ColumnResizeNotifierSource }, { type: i2$1.ResizeRef }, { type: i1$2._CoalescedStyleScheduler, decorators: [{
+        }], 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: [{
                     type: Inject,
                     args: [_COALESCED_STYLE_SCHEDULER]
                 }] }, { type: undefined, decorators: [{
@@ -537,18 +295,18 @@ class MatResizable extends AbstractMatResizable {
         this.isResizable = newValue == null || newValue === '' || newValue;
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatResizable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatResizable, deps: [{ token: i1$2.CdkColumnDef }, { token: i2$1.ColumnResize }, { token: i3$2.Directionality }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i2$1.HeaderRowEventDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i4$1.Overlay }, { token: i2$1.ColumnResizeNotifierSource }, { token: i2$1.ResizeStrategy }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MatResizable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", 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" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatResizable, decorators: [{
+/** @nocollapse */ MatResizable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", 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 */ MatResizable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", 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" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatResizable, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
                     inputs: RESIZABLE_INPUTS,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.CdkColumnDef }, { type: i2$1.ColumnResize }, { type: i3$2.Directionality }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i2$1.HeaderRowEventDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: i4$1.Overlay }, { type: i2$1.ColumnResizeNotifierSource }, { type: i2$1.ResizeStrategy }, { type: i1$2._CoalescedStyleScheduler, decorators: [{
+                }] }, { 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: [{
@@ -558,6 +316,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: Input
             }] } });
 
+class MtxGridCellComponent {
+    constructor(_dialog, _dataGridSrv) {
+        this._dialog = _dialog;
+        this._dataGridSrv = _dataGridSrv;
+        /** Row data */
+        this.rowData = {};
+        /** All data */
+        this.data = [];
+        /** Whether show summary */
+        this.summary = false;
+    }
+    get _colValue() {
+        return this._dataGridSrv.getCellValue(this.rowData, this.colDef);
+    }
+    _isString(fn) {
+        return Object.prototype.toString.call(fn) === '[object String]';
+    }
+    _isFunction(fn) {
+        return Object.prototype.toString.call(fn) === '[object Function]';
+    }
+    _isEmptyValue(value) {
+        return value == null || value.toString() === '';
+    }
+    _isContainHTML(value) {
+        return /<\/?[a-z][\s\S]*>/i.test(value);
+    }
+    _getText(value) {
+        return this._isEmptyValue(value) ? '--' : value;
+    }
+    _getTooltip(value) {
+        return this._isEmptyValue(value) ? '' : value;
+    }
+    _getFormatterTooltip(value) {
+        return this._isContainHTML(value) || this._isEmptyValue(value) ? '' : value;
+    }
+    _formatSummary(data, colDef) {
+        if (this._isString(colDef.summary)) {
+            return colDef.summary;
+        }
+        else if (this._isFunction(colDef.summary)) {
+            return colDef.summary(this._dataGridSrv.getColData(data, colDef), colDef);
+        }
+    }
+    _handleActionConfirm(event, title, description = '', okColor = 'primary', okText = 'OK', closeColor, closeText = 'CLOSE', fn, data) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._dialog.open({
+            title,
+            description,
+            buttons: [
+                {
+                    color: okColor,
+                    text: okText,
+                    onClick: () => (fn ? fn(data) : {}),
+                },
+                { color: closeColor, text: closeText, onClick: () => { } },
+            ],
+        });
+    }
+    _handleActionClick(event, btn, rowData) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (btn.click) {
+            btn.click(rowData);
+        }
+    }
+    /** Preview enlarged image */
+    _handleImagePreview(urlStr) {
+        const imgs = [];
+        this._dataGridSrv.str2arr(urlStr).forEach((url, index) => {
+            imgs.push({ title: index + 1 + '', src: url });
+        });
+        const footerToolbar = imgs.length > 1
+            ? ['zoomIn', 'zoomOut', 'prev', 'next', 'rotateRight', 'rotateLeft', 'actualSize']
+            : ['zoomIn', 'zoomOut', 'rotateRight', 'rotateLeft', 'actualSize'];
+        const options = {
+            title: imgs.length > 1,
+            footerToolbar,
+        };
+        const viewer = new PhotoViewer(imgs, options);
+    }
+}
+/** @nocollapse */ MtxGridCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridCellComponent, deps: [{ token: i1$1.MtxDialog }, { token: MtxGridService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxGridCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MtxGridCellComponent, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n      [innerHTML]=\"_getText(_formatSummary(data, 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    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n          {{colDef.tag[_colValue].text}}\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n      <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n    </ng-container>\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, 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            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-container>\r\n          <ng-template #btnDefaultTpl>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($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            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span\r\n            [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | 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\r\n            [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n        colDef.typeParameter?.display : 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\r\n            [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | 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\r\n            [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format : 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(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7.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: i8.MtxToObservablePipe, name: "toObservable" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n      [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n      [innerHTML]=\"_getText(_formatSummary(data, 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    <!-- Tag -->\r\n    <ng-container *ngSwitchCase=\"'tag'\">\r\n      <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n        <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n          {{colDef.tag[_colValue].text}}\r\n        </mat-chip>\r\n      </mat-chip-list>\r\n      <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n    </ng-container>\r\n    <!-- Buttons -->\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n      <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n        <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n          <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, 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            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n                                                          btn.popOkColor, btn.popOkText,\r\n                                                          btn.popCloseColor, btn.popCloseText,\r\n                                                          btn.click, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-container>\r\n          <ng-template #btnDefaultTpl>\r\n            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"btn.type==='basic'\"\r\n                    mat-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($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            <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n                    *ngIf=\"!btn.type || btn.type==='icon'\"\r\n                    mat-icon-button\r\n                    [color]=\"btn.color || 'primary'\"\r\n                    [disabled]=\"btn.disabled\"\r\n                    [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n                    (click)=\"_handleActionClick($event, btn, rowData)\">\r\n              <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n            </button>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- Link -->\r\n    <ng-container *ngSwitchCase=\"'link'\">\r\n      <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n    </ng-container>\r\n    <!-- Image -->\r\n    <ng-container *ngSwitchCase=\"'image'\">\r\n      <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n    </ng-container>\r\n    <!-- Boolean -->\r\n    <ng-container *ngSwitchCase=\"'boolean'\">\r\n      <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    <!-- Number -->\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n      <span\r\n            [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | 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\r\n            [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n        colDef.typeParameter?.display : 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\r\n            [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | 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\r\n            [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format : 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(_colValue)\">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.MtxDialog }, { type: MtxGridService }]; }, propDecorators: { rowData: [{
+                type: Input
+            }], colDef: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], summary: [{
+                type: Input
+            }] } });
+
+class MtxGridColumnMenuComponent {
+    constructor() {
+        this.columns = [];
+        this.selectable = true;
+        this.selectableChecked = 'show';
+        this.sortable = true;
+        this.pinnable = true;
+        this._buttonText = '';
+        this.buttonType = 'stroked';
+        this.buttonClass = '';
+        this.buttonIcon = '';
+        this.showHeader = false;
+        this.headerText = 'Columns Header';
+        this.showFooter = false;
+        this.footerText = 'Columns Footer';
+        this.selectionChange = new EventEmitter();
+        this.sortChange = new EventEmitter();
+        this.pinChange = new EventEmitter();
+        this._pinOptions = [
+            { label: 'Pin Left', value: 'left' },
+            { label: 'Pin Right', value: 'right' },
+            { label: 'No Pin', value: null },
+        ];
+    }
+    get buttonText() {
+        const defaultText = `Columns ${this.selectableChecked === 'show' ? 'Shown' : 'Hidden'}`;
+        return this._buttonText ? this._buttonText : defaultText;
+    }
+    set buttonText(value) {
+        this._buttonText = value;
+    }
+    get pinOptions() {
+        return this._pinOptions;
+    }
+    set pinOptions(value) {
+        if (value.length > 0) {
+            this._pinOptions = value;
+        }
+    }
+    _handleDroped(event) {
+        moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
+        this.sortChange.emit(this.columns);
+    }
+    _handleSelection(e) {
+        this.selectionChange.emit(this.columns);
+    }
+    _handlePinSelect(col, val) {
+        if (col.pinned != val) {
+            col.pinned = val;
+            this.pinChange.emit(this.columns);
+        }
+    }
+}
+/** @nocollapse */ MtxGridColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridColumnMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxGridColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MtxGridColumnMenuComponent, 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: { selectionChange: "selectionChange", sortChange: "sortChange", pinChange: "pinChange" }, 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 [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 [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 [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 [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 [color]=\"buttonColor\" [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 [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 [color]=\"buttonColor\" [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 [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\" *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)=\"_handleSelection($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-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.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-icon-button{width:32px;height:32px;line-height:32px}.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}.mtx-grid-column-pin-option-text{padding:0 8px}.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.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: i8.MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridColumnMenuComponent, 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 [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 [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 [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 [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 [color]=\"buttonColor\" [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 [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 [color]=\"buttonColor\" [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 [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\" *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)=\"_handleSelection($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-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.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-icon-button{width:32px;height:32px;line-height:32px}.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}.mtx-grid-column-pin-option-text{padding:0 8px}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"] }]
+        }], propDecorators: { menuPanel: [{
+                type: ViewChild,
+                args: ['menu', { static: true }]
+            }], menuTrigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }], columns: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], selectableChecked: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], pinnable: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], buttonColor: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], buttonIcon: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], headerText: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], footerText: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], pinChange: [{
+                type: Output
+            }], pinOptions: [{
+                type: Input
+            }] } });
+
+class MtxGridExpansionToggleDirective {
+    constructor() {
+        this._opened = false;
+        this.openedChange = new EventEmitter();
+        this.toggleChange = new EventEmitter();
+    }
+    get opened() {
+        return this._opened;
+    }
+    set opened(newValue) {
+        this._opened = newValue;
+        this.openedChange.emit(newValue);
+    }
+    get expanded() {
+        return this._opened;
+    }
+    set expandableRow(value) {
+        if (value !== this._row) {
+            this._row = value;
+        }
+    }
+    set template(value) {
+        if (value !== this._tplRef) {
+            this._tplRef = value;
+        }
+    }
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
+    }
+    toggle() {
+        this.opened = !this.opened;
+        this.toggleChange.emit(this);
+    }
+}
+/** @nocollapse */ MtxGridExpansionToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridExpansionToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MtxGridExpansionToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: MtxGridExpansionToggleDirective, 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: "14.0.3", ngImport: i0, type: MtxGridExpansionToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mtx-grid-expansion-toggle]',
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { opened: [{
+                type: Input
+            }], openedChange: [{
+                type: Output
+            }], expanded: [{
+                type: HostBinding,
+                args: ['class.expanded']
+            }], expandableRow: [{
+                type: Input
+            }], template: [{
+                type: Input,
+                args: ['expansionRowTpl']
+            }], toggleChange: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class MtxGridComponent {
     constructor(_dataGridSrv, _changeDetectorRef) {
         this._dataGridSrv = _dataGridSrv;
@@ -610,7 +633,6 @@ class MtxGridComponent {
         this.showToolbar = false;
         this.toolbarTitle = '';
         // ===== Column Menu =====
-        this.columnMenuData = [];
         this.showColumnMenuButton = true;
         this.columnMenuButtonText = '';
         this.columnMenuButtonType = 'stroked';
@@ -618,13 +640,14 @@ class MtxGridComponent {
         this.columnMenuButtonIcon = '';
         this.columnHideable = true;
         this.columnHideableChecked = 'show';
-        this.columnMovable = true;
+        this.columnSortable = true;
         this.columnPinnable = true;
         this.columnChange = new EventEmitter();
         this.showColumnMenuHeader = false;
         this.columnMenuHeaderText = 'Columns Header';
         this.showColumnMenuFooter = false;
         this.columnMenuFooterText = 'Columns Footer';
+        this.columnPinOptions = [];
         // ===== No Result =====
         this.noResultText = 'No records found';
         // ===== Row Templates =====
@@ -673,19 +696,13 @@ class MtxGridComponent {
         this._countPinnedPosition();
         this.displayedColumns = this.columns.filter(item => !item.hide).map(item => item.field);
         if (this.showColumnMenuButton) {
-            this.columnMenuData = this.columns.map(item => {
-                const newItem = {
-                    label: item.header,
-                    field: item.field,
-                    disabled: item.disabled,
-                };
+            this.columns.forEach(item => {
                 if (this.columnHideableChecked === 'show') {
-                    newItem.show = !item.hide;
+                    item.show = !item.hide;
                 }
                 else {
-                    newItem.hide = item.hide;
+                    item.hide = !!item.hide;
                 }
-                return newItem;
             });
         }
         if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
@@ -809,8 +826,8 @@ class MtxGridComponent {
     }
     getDisplayedColumnFields(columns) {
         const fields = columns
-            .filter((item) => this.columnHideableChecked === 'show' ? item.show : !item.hide)
-            .map((item) => item.field);
+            .filter(item => (this.columnHideableChecked === 'show' ? item.show : !item.hide))
+            .map(item => item.field);
         return fields;
     }
     /** Customize expansion event */
@@ -845,15 +862,15 @@ class MtxGridComponent {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridComponent, deps: [{ token: MtxGridService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MtxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: MtxGridComponent, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: "loading", trackBy: "trackBy", columnResizable: "columnResizable", 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", rowSelected: "rowSelected", rowSelectable: "rowSelectable", hideRowSelectionCheckbox: "hideRowSelectionCheckbox", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", cellSelectable: "cellSelectable", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", showColumnMenuButton: "showColumnMenuButton", columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", columnHideable: "columnHideable", columnHideableChecked: "columnHideableChecked", columnMovable: "columnMovable", columnPinnable: "columnPinnable", 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", expansionChange: "expansionChange", rowSelectionChange: "rowSelectionChange", cellSelectionChange: "cellSelectionChange", 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]=\"_isTemplateRef(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]=\"columnMenuData\"\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]=\"columnMovable\"\r\n                          (selectionChange)=\"_handleColumnChange($event)\"\r\n                          (sortChange)=\"_handleColumnChange($event)\"\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    </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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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                    <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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 *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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                    <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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 *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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 || _hasNoResult\"\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)=\"_handlePage($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]=\"_isTemplateRef(headerExtraTemplate)\" [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]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\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%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-cell .mat-icon-button.expanded .mat-icon{transform:rotate(90deg)}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{width:18px;height:18px;margin:0 4px;font-size:18px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.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}.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-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.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:56px;min-width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}\n"], components: [{ type: i0.forwardRef(function () { return i2$2.MatProgressBar; }), selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i0.forwardRef(function () { return MtxGridColumnMenuComponent; }), selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "dndSortable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate"], outputs: ["selectionChange", "sortChange"], exportAs: ["mtxGridColumnMenu"] }, { type: i0.forwardRef(function () { return i4$2.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i0.forwardRef(function () { return i4.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i0.forwardRef(function () { return i6$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i0.forwardRef(function () { return i2.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i0.forwardRef(function () { return i1.MatButton; }), selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i0.forwardRef(function () { return MtxGridCellComponent; }), selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary"], exportAs: ["mtxGridCell"] }, { type: i0.forwardRef(function () { return i4$2.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i0.forwardRef(function () { return i4$2.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i0.forwardRef(function () { return i4$2.MatFooterRow; }), selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: i0.forwardRef(function () { return i10.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i0.forwardRef(function () { return i6.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i6.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i6.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i6$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i0.forwardRef(function () { return i4$2.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i0.forwardRef(function () { return i4$2.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { type: i0.forwardRef(function () { return i4$2.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { type: i0.forwardRef(function () { return i4$2.MatCellDef; }), selector: "[matCellDef]" }, { type: i0.forwardRef(function () { return i4$2.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { type: i0.forwardRef(function () { return i4$2.MatFooterCellDef; }), selector: "[matFooterCellDef]" }, { type: i0.forwardRef(function () { return i4$2.MatFooterCell; }), selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i0.forwardRef(function () { return i6.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i6.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return MtxGridCellSelectionDirective; }), selector: "[mtx-grid-selectable-cell]", inputs: ["mtxSelectableRowData"], outputs: ["cellSelectionChange"] }, { type: i0.forwardRef(function () { return MtxGridExpansionToggleDirective; }), selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { type: i0.forwardRef(function () { return i4$2.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i0.forwardRef(function () { return i4$2.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i0.forwardRef(function () { return i4$2.MatFooterRowDef; }), selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { type: i0.forwardRef(function () { return MatColumnResize; }), selector: "table[mat-table][columnResize]" }, { type: i0.forwardRef(function () { return MatResizable; }), selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }], pipes: { "async": i0.forwardRef(function () { return i6.AsyncPipe; }), "toObservable": i0.forwardRef(function () { return i8.MtxToObservablePipe; }) }, animations: [
+/** @nocollapse */ MtxGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridComponent, deps: [{ token: MtxGridService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: MtxGridComponent, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: "loading", trackBy: "trackBy", columnResizable: "columnResizable", 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", rowSelected: "rowSelected", rowSelectable: "rowSelectable", hideRowSelectionCheckbox: "hideRowSelectionCheckbox", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", cellSelectable: "cellSelectable", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", showColumnMenuButton: "showColumnMenuButton", columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", columnHideable: "columnHideable", columnHideableChecked: "columnHideableChecked", columnSortable: "columnSortable", columnPinnable: "columnPinnable", showColumnMenuHeader: "showColumnMenuHeader", columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: "showColumnMenuFooter", columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", columnPinOptions: "columnPinOptions", 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", expansionChange: "expansionChange", rowSelectionChange: "rowSelectionChange", cellSelectionChange: "cellSelectionChange", 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]=\"_isTemplateRef(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                          (selectionChange)=\"_handleColumnChange($event)\"\r\n                          [sortable]=\"columnSortable\"\r\n                          (sortChange)=\"_handleColumnChange($event)\"\r\n                          [pinnable]=\"columnPinnable\"\r\n                          (pinChange)=\"_handleColumnChange($event)\"\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    </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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($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\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($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\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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 || _hasNoResult\"\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)=\"_handlePage($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]=\"_isTemplateRef(headerExtraTemplate)\" [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]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\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%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-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:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mat-icon-button i,.mtx-grid .mat-icon-button .mat-icon{line-height:20px}.mtx-grid .mat-icon{width:20px;height:20px;font-size:20px}.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}.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-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.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:56px;min-width:56px}.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{width:32px;height:32px;line-height:32px}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\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.MatButton; }), selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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 MtxGridCellComponent; }), selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary"], exportAs: ["mtxGridCell"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridColumnMenuComponent; }), selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["selectionChange", "sortChange", "pinChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridExpansionToggleDirective; }), selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridCellSelectionDirective; }), selector: "[mtx-grid-selectable-cell]", inputs: ["mtxSelectableRowData"], outputs: ["cellSelectionChange"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3$1.AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return i8.MtxToObservablePipe; }), name: "toObservable" }], animations: [
         trigger('expansion', [
             state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
             state('expanded', style({ height: '*', visibility: 'visible' })),
             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-grid', exportAs: 'mtxGrid', host: {
                         class: 'mtx-grid',
@@ -863,7 +880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                             state('expanded', style({ height: '*', visibility: 'visible' })),
                             transition('expanded <=> collapsed', 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]=\"_isTemplateRef(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]=\"columnMenuData\"\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]=\"columnMovable\"\r\n                          (selectionChange)=\"_handleColumnChange($event)\"\r\n                          (sortChange)=\"_handleColumnChange($event)\"\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    </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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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                    <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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 *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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                    <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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 *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n                  <mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n\r\n                <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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 || _hasNoResult\"\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)=\"_handlePage($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]=\"_isTemplateRef(headerExtraTemplate)\" [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]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\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%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-cell .mat-icon-button.expanded .mat-icon{transform:rotate(90deg)}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{width:18px;height:18px;margin:0 4px;font-size:18px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.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}.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-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.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:56px;min-width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}\n"] }]
+                    ], 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]=\"_isTemplateRef(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                          (selectionChange)=\"_handleColumnChange($event)\"\r\n                          [sortable]=\"columnSortable\"\r\n                          (sortChange)=\"_handleColumnChange($event)\"\r\n                          [pinnable]=\"columnPinnable\"\r\n                          (pinChange)=\"_handleColumnChange($event)\"\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    </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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($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\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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)=\"_handleSortChange($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.class!\"\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]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n                               [ngIfElse]=\"defaultHeaderTpl\">\r\n                    <ng-template [ngTemplateOutlet]=\"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                       [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n                       [disableClear]=\"col.sortProp?.disableClear\"\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.class!\"\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 (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n              <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n                             [ngIfElse]=\"colDefCellTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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\r\n                        [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n                        (toggleChange)=\"_handleExpansionChange($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\"></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]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n                <ng-template [ngTemplateOutlet]=\"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]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n                             [ngIfElse]=\"defaultSummaryTpl\">\r\n                  <ng-template [ngTemplateOutlet]=\"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                </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              [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n              (click)=\"_selectRow($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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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]=\"_isTemplateRef(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 || _hasNoResult\"\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)=\"_handlePage($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]=\"_isTemplateRef(headerExtraTemplate)\" [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]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\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%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-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:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mat-icon-button i,.mtx-grid .mat-icon-button .mat-icon{line-height:20px}.mtx-grid .mat-icon{width:20px;height:20px;font-size:20px}.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}.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-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.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:56px;min-width:56px}.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{width:32px;height:32px;line-height:32px}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: MtxGridService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]
@@ -990,7 +1007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: Input
             }], columnHideableChecked: [{
                 type: Input
-            }], columnMovable: [{
+            }], columnSortable: [{
                 type: Input
             }], columnPinnable: [{
                 type: Input
@@ -1008,6 +1025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: Input
             }], columnMenuFooterTemplate: [{
                 type: Input
+            }], columnPinOptions: [{
+                type: Input
             }], noResultText: [{
                 type: Input
             }], noResultTemplate: [{
@@ -1073,9 +1092,9 @@ class MtxGridCellSelectionDirective {
         this.cellSelectionChange.emit(this);
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxGridCellSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridCellSelectionDirective, deps: [{ token: MtxGridComponent }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MtxGridCellSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MtxGridCellSelectionDirective, selector: "[mtx-grid-selectable-cell]", inputs: { mtxSelectableRowData: "mtxSelectableRowData" }, outputs: { cellSelectionChange: "cellSelectionChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "this.selected" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridCellSelectionDirective, decorators: [{
+/** @nocollapse */ MtxGridCellSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridCellSelectionDirective, deps: [{ token: MtxGridComponent }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MtxGridCellSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: MtxGridCellSelectionDirective, selector: "[mtx-grid-selectable-cell]", inputs: { mtxSelectableRowData: "mtxSelectableRowData" }, outputs: { cellSelectionChange: "cellSelectionChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "this.selected" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridCellSelectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtx-grid-selectable-cell]',
@@ -1113,16 +1132,16 @@ class MatColumnResizeFlex extends AbstractMatColumnResize {
         this.notifier = notifier;
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeFlex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeFlex, deps: [{ token: i2$1.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2$1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2$1.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeFlex.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", 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: "13.2.6", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
+/** @nocollapse */ MatColumnResizeFlex.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", 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 */ MatColumnResizeFlex.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", 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: "14.0.3", 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$1.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2$1.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2$1.ColumnResizeNotifierSource }]; } });
+        }], ctorParameters: function () { return [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }]; } });
 
 /**
  * @license
@@ -1134,10 +1153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
 const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
 class MatColumnResizeCommonModule {
 }
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeCommonModule, declarations: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] });
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeCommonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
+/** @nocollapse */ MatColumnResizeCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ MatColumnResizeCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeCommonModule, declarations: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] });
+/** @nocollapse */ MatColumnResizeCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeCommonModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: ENTRY_COMMON_COMPONENTS,
@@ -1147,10 +1166,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
 const IMPORTS = [OverlayModule, MatColumnResizeCommonModule];
 class MatColumnResizeModule {
 }
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeModule, declarations: [MatColumnResize, MatColumnResizeFlex, MatResizable], imports: [OverlayModule, MatColumnResizeCommonModule], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] });
-/** @nocollapse */ /** @nocollapse */ MatColumnResizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatColumnResizeModule, decorators: [{
+/** @nocollapse */ MatColumnResizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ MatColumnResizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeModule, declarations: [MatColumnResize, MatColumnResizeFlex, MatResizable], imports: [OverlayModule, MatColumnResizeCommonModule], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] });
+/** @nocollapse */ MatColumnResizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MatColumnResizeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: IMPORTS,
@@ -1161,8 +1180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
 
 class MtxGridModule {
 }
-/** @nocollapse */ /** @nocollapse */ MtxGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MtxGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridModule, declarations: [MtxGridComponent,
+/** @nocollapse */ MtxGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ MtxGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.3", ngImport: i0, type: MtxGridModule, declarations: [MtxGridComponent,
         MtxGridCellComponent,
         MtxGridColumnMenuComponent,
         MtxGridExpansionToggleDirective,
@@ -1189,27 +1208,25 @@ class MtxGridModule {
         MtxGridExpansionToggleDirective,
         MtxGridCellSelectionDirective,
         MatColumnResizeModule] });
-/** @nocollapse */ /** @nocollapse */ MtxGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridModule, providers: [MtxGridService], imports: [[
-            CommonModule,
-            FormsModule,
-            MatTableModule,
-            MatSortModule,
-            MatPaginatorModule,
-            MatCheckboxModule,
-            MatButtonModule,
-            MatProgressBarModule,
-            MatChipsModule,
-            MatTooltipModule,
-            MatIconModule,
-            MatSelectModule,
-            MatFormFieldModule,
-            MatMenuModule,
-            DragDropModule,
-            MtxDialogModule,
-            MtxPipesModule,
-            MatColumnResizeModule,
-        ], MatColumnResizeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxGridModule, decorators: [{
+/** @nocollapse */ MtxGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridModule, providers: [MtxGridService], imports: [CommonModule,
+        FormsModule,
+        MatTableModule,
+        MatSortModule,
+        MatPaginatorModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatProgressBarModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatMenuModule,
+        DragDropModule,
+        MtxDialogModule,
+        MtxPipesModule,
+        MatColumnResizeModule, MatColumnResizeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: MtxGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [