@ng-matero/extensions 11.5.0 → 11.5.2

package/bundles/mtxGrid.umd.min.js

@@ -1,4 +1,4 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/table"),require("@angular/material/sort"),require("@angular/material/paginator"),require("@angular/material/checkbox"),require("@angular/material/button"),require("@angular/material/progress-bar"),require("@angular/material/chips"),require("@angular/material/tooltip"),require("@angular/material/icon"),require("@angular/material/select"),require("@angular/material/form-field"),require("@angular/material/menu"),require("@angular/cdk/drag-drop"),require("@ng-matero/extensions/utils"),require("@ng-matero/extensions/dialog"),require("@angular/animations"),require("@angular/cdk/collections"),require("photoviewer"),require("@angular/cdk/overlay"),require("@ng-matero/extensions/column-resize"),require("@angular/cdk/table"),require("@angular/cdk/bidi")):"function"==typeof define&&define.amd?define("@ng-matero/extensions/data-grid",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/table","@angular/material/sort","@angular/material/paginator","@angular/material/checkbox","@angular/material/button","@angular/material/progress-bar","@angular/material/chips","@angular/material/tooltip","@angular/material/icon","@angular/material/select","@angular/material/form-field","@angular/material/menu","@angular/cdk/drag-drop","@ng-matero/extensions/utils","@ng-matero/extensions/dialog","@angular/animations","@angular/cdk/collections","photoviewer","@angular/cdk/overlay","@ng-matero/extensions/column-resize","@angular/cdk/table","@angular/cdk/bidi"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-matero"]=e["ng-matero"]||{},e["ng-matero"].extensions=e["ng-matero"].extensions||{},e["ng-matero"].extensions["data-grid"]={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.table,e.ng.material.sort,e.ng.material.paginator,e.ng.material.checkbox,e.ng.material.button,e.ng.material.progressBar,e.ng.material.chips,e.ng.material.tooltip,e.ng.material.icon,e.ng.material.select,e.ng.material.formField,e.ng.material.menu,e.ng.cdk.dragDrop,e["ng-matero"].extensions.utils,e["ng-matero"].extensions.dialog,e.ng.animations,e.ng.cdk.collections,e.PhotoViewer,e.ng.cdk.overlay,e["ng-matero"].extensions["column-resize"],e.ng.cdk.table,e.ng.cdk.bidi)}(this,(function(e,t,n,r,o,a,l,i,c,s,p,m,d,u,g,h,f,x,b,y,C,w,T,I,S,v){"use strict";function D(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _=D(w),k=function(e,t){return(k=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/material/table"),require("@angular/material/sort"),require("@angular/material/paginator"),require("@angular/material/checkbox"),require("@angular/material/button"),require("@angular/material/progress-bar"),require("@angular/material/chips"),require("@angular/material/tooltip"),require("@angular/material/icon"),require("@angular/material/select"),require("@angular/material/form-field"),require("@angular/material/menu"),require("@angular/cdk/drag-drop"),require("@ng-matero/extensions/utils"),require("@ng-matero/extensions/dialog"),require("@angular/animations"),require("@angular/cdk/collections"),require("photoviewer"),require("@angular/cdk/overlay"),require("@ng-matero/extensions/column-resize"),require("@angular/cdk/table"),require("@angular/cdk/bidi")):"function"==typeof define&&define.amd?define("@ng-matero/extensions/data-grid",["exports","@angular/core","@angular/common","@angular/forms","@angular/material/table","@angular/material/sort","@angular/material/paginator","@angular/material/checkbox","@angular/material/button","@angular/material/progress-bar","@angular/material/chips","@angular/material/tooltip","@angular/material/icon","@angular/material/select","@angular/material/form-field","@angular/material/menu","@angular/cdk/drag-drop","@ng-matero/extensions/utils","@ng-matero/extensions/dialog","@angular/animations","@angular/cdk/collections","photoviewer","@angular/cdk/overlay","@ng-matero/extensions/column-resize","@angular/cdk/table","@angular/cdk/bidi"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-matero"]=e["ng-matero"]||{},e["ng-matero"].extensions=e["ng-matero"].extensions||{},e["ng-matero"].extensions["data-grid"]={}),e.ng.core,e.ng.common,e.ng.forms,e.ng.material.table,e.ng.material.sort,e.ng.material.paginator,e.ng.material.checkbox,e.ng.material.button,e.ng.material.progressBar,e.ng.material.chips,e.ng.material.tooltip,e.ng.material.icon,e.ng.material.select,e.ng.material.formField,e.ng.material.menu,e.ng.cdk.dragDrop,e["ng-matero"].extensions.utils,e["ng-matero"].extensions.dialog,e.ng.animations,e.ng.cdk.collections,e.PhotoViewer,e.ng.cdk.overlay,e["ng-matero"].extensions["column-resize"],e.ng.cdk.table,e.ng.cdk.bidi)}(this,(function(e,t,n,r,a,o,l,i,c,s,p,m,d,u,g,h,f,x,b,y,C,w,T,I,S,v){"use strict";function D(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _=D(w),R=function(e,t){return(R=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};
 /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -12,7 +12,7 @@
     LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */function R(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}k(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function E(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function O(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,a=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(r=a.next()).done;)l.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return l}function M(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(O(arguments[t]));return e}Object.create;var P=function(){function e(){}return e.prototype.getCellValue=function(e,t){var n=t.field?t.field.split("."):[],r="";return n.forEach((function(t,n){r=0===n?e[t]:r&&r[t]})),r},e.prototype.getColData=function(e,t){var n=this;return e.map((function(e){return n.getCellValue(e,t)}))},e.prototype.str2arr=function(e){return e.replace(/[\r\n\s]/g,"").split(",")},e}();P.decorators=[{type:t.Injectable}],P.ctorParameters=function(){return[]};var z=function(){function e(e,n){this._dataGridSrv=e,this._changeDetectorRef=n,this.dataSource=new o.MatTableDataSource,this.columns=[],this.data=[],this.length=0,this.loading=!1,this.columnResizable=!1,this.pageOnFront=!0,this.showPaginator=!0,this.pageDisabled=!1,this.showFirstLastButtons=!0,this.pageIndex=0,this.pageSize=10,this.pageSizeOptions=[10,50,100],this.hidePageSize=!1,this.page=new t.EventEmitter,this.sortOnFront=!0,this.sortDisableClear=!1,this.sortDisabled=!1,this.sortStart="asc",this.sortChange=new t.EventEmitter,this.rowHover=!1,this.rowStriped=!1,this.rowClick=new t.EventEmitter,this.expansionRowStates=[],this.expandable=!1,this.expansionChange=new t.EventEmitter,this.multiSelectable=!0,this.rowSelection=new C.SelectionModel(!0,[]),this.rowSelected=[],this.rowSelectable=!1,this.hideRowSelectionCheckbox=!1,this.rowSelectionFormatter={},this.rowSelectionChange=new t.EventEmitter,this.cellSelection=[],this.cellSelectable=!0,this.cellSelectionChange=new t.EventEmitter,this.showToolbar=!1,this.toolbarTitle="",this.columnMenuData=[],this.showColumnMenuButton=!0,this.columnMenuButtonText="",this.columnMenuButtonType="stroked",this.columnMenuButtonClass="",this.columnMenuButtonIcon="",this.columnHideable=!0,this.columnHideableChecked="show",this.columnMovable=!0,this.columnPinnable=!0,this.columnChange=new t.EventEmitter,this.showColumnMenuHeader=!1,this.columnMenuHeaderText="Columns Header",this.showColumnMenuFooter=!1,this.columnMenuFooterText="Columns Footer",this.noResultText="No records found",this.showSummary=!1,this.showSidebar=!1,this.showStatusbar=!1}return Object.defineProperty(e.prototype,"_hasNoResult",{get:function(){return!(this.data&&0!==this.data.length||this.loading)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_whetherShowSummary",{get:function(){return this.showSummary},enumerable:!1,configurable:!0}),e.prototype.detectChanges=function(){this._changeDetectorRef.detectChanges()},e.prototype._isTemplateRef=function(e){return e instanceof t.TemplateRef},e.prototype._getColData=function(e,t){return this._dataGridSrv.getColData(e,t)},e.prototype._getRowClassList=function(e,t){var n,r,o={selected:this.rowSelection.isSelected(e),"mat-row-odd":t%2};if(this.rowClassFormatter)try{for(var a=E(Object.keys(this.rowClassFormatter)),l=a.next();!l.done;l=a.next()){var i=l.value;o[i]=this.rowClassFormatter[i](e,t)}}catch(e){n={error:e}}finally{try{l&&!l.done&&(r=a.return)&&r.call(a)}finally{if(n)throw n.error}}return o},e.prototype.ngOnInit=function(){},e.prototype.ngOnChanges=function(e){var t,n=this;this._countPinnedPosition(),this.displayedColumns=this.columns.filter((function(e){return!e.hide})).map((function(e){return e.field})),this.showColumnMenuButton&&(this.columnMenuData=this.columns.map((function(e){var t={label:e.header,field:e.field,disabled:e.disabled};return"show"===n.columnHideableChecked?t.show=!e.hide:t.hide=e.hide,t}))),this.rowSelectable&&!this.hideRowSelectionCheckbox&&this.displayedColumns.unshift("MtxGridCheckboxColumnDef"),this.expandable&&(this.expansionRowStates=[],null===(t=this.data)||void 0===t||t.forEach((function(e){n.expansionRowStates.push({expanded:!1})}))),this.rowSelectable&&(this.rowSelection=new C.SelectionModel(this.multiSelectable,this.rowSelected)),this.dataSource=new o.MatTableDataSource(this.data),this.dataSource.paginator=this.pageOnFront?this.paginator:null,this.dataSource.sort=this.sortOnFront?this.sort:null,e.data&&this.scrollTop(0)},e.prototype.ngAfterViewInit=function(){this.pageOnFront&&(this.dataSource.paginator=this.paginator),this.sortOnFront&&(this.dataSource.sort=this.sort)},e.prototype.ngOnDestroy=function(){},e.prototype._countPinnedPosition=function(){var e=function(e,t){return e+parseFloat(t.width||"80px")},t=this.columns.filter((function(e){return e.pinned&&"left"===e.pinned}));t.forEach((function(n,r){n.left=t.slice(0,r).reduce(e,0)+"px"}));var n=this.columns.filter((function(e){return e.pinned&&"right"===e.pinned})).reverse();n.forEach((function(t,r){t.right=n.slice(0,r).reduce(e,0)+"px"}))},e.prototype._getIndex=function(e,t){return void 0===e?t:e},e.prototype._handleSortChange=function(e){this.sortChange.emit(e)},e.prototype._handleExpansionChange=function(e,t,n,r){this.expansionChange.emit({expanded:e.expanded,data:t,index:r,column:n})},e.prototype._selectCell=function(e,t,n){if(this._selectedCell!==e){var r=this._dataGridSrv.getCellValue(t,n);this.cellSelection=[],this.cellSelection.push({cellData:r,rowData:t,colDef:n}),this.cellSelectionChange.emit(this.cellSelection),this._selectedCell&&this._selectedCell.deselect()}this._selectedCell=e.selected?e:void 0},e.prototype._selectRow=function(e,t,n){var r,o,a,l;!this.rowSelectable||(null===(o=(r=this.rowSelectionFormatter).disabled)||void 0===o?void 0:o.call(r,t,n))||(null===(l=(a=this.rowSelectionFormatter).hideCheckbox)||void 0===l?void 0:l.call(a,t,n))||(e.ctrlKey||e.metaKey||this.rowSelection.clear(),this._toggleNormalCheckbox(t)),this.rowClick.emit({rowData:t,index:n})},e.prototype._isAllSelected=function(){var e=this;return this.rowSelection.selected.length===this.dataSource.data.filter((function(t,n){var r,o;return!(null===(o=(r=e.rowSelectionFormatter).disabled)||void 0===o?void 0:o.call(r,t,n))})).length},e.prototype._toggleMasterCheckbox=function(){var e=this;this._isAllSelected()?this.rowSelection.clear():this.dataSource.data.forEach((function(t,n){var r,o;(null===(o=(r=e.rowSelectionFormatter).disabled)||void 0===o?void 0:o.call(r,t,n))||e.rowSelection.select(t)})),this.rowSelectionChange.emit(this.rowSelection.selected)},e.prototype._toggleNormalCheckbox=function(e){this.rowSelection.toggle(e),this.rowSelectionChange.emit(this.rowSelection.selected)},e.prototype._handleColumnChange=function(e){this.columnChange.emit(e),this.displayedColumns=Object.assign([],this.getDisplayedColumnFields(e)),this.rowSelectable&&!this.hideRowSelectionCheckbox&&this.displayedColumns.unshift("MtxGridCheckboxColumnDef")},e.prototype.getDisplayedColumnFields=function(e){var t=this;return e.filter((function(e){return"show"===t.columnHideableChecked?e.show:!e.hide})).map((function(e){return e.field}))},e.prototype.toggleExpansion=function(e){if(!this.expandable)throw new Error("The `expandable` should be set true.");return this.expansionRowStates[e].expanded=!this.expansionRowStates[e].expanded,this.expansionRowStates[e].expanded},e.prototype._handlePage=function(e){this.pageOnFront&&this.scrollTop(0),this.page.emit(e)},e.prototype.scrollTop=function(e){var t;if(null==e)return null===(t=this.tableContainer)||void 0===t?void 0:t.nativeElement.scrollTop;this.tableContainer&&!this.loading&&(this.tableContainer.nativeElement.scrollTop=e)},e.prototype.scrollLeft=function(e){var t;if(null==e)return null===(t=this.tableContainer)||void 0===t?void 0:t.nativeElement.scrollLeft;this.tableContainer&&!this.loading&&(this.tableContainer.nativeElement.scrollLeft=e)},e}();z.decorators=[{type:t.Component,args:[{selector:"mtx-grid",exportAs:"mtxGrid",template:'\x3c!-- Progress bar--\x3e\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\x3c!-- Toolbar --\x3e\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  \x3c!-- Table content --\x3e\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        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>\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-container *ngIf="_whetherShowSummary">\r\n          <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf="expandable">\r\n          \x3c!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns --\x3e\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      \x3c!-- TODO: Use flexbox-based mat-table --\x3e\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        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>\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-container *ngIf="_whetherShowSummary">\r\n          <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf="expandable">\r\n          \x3c!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns --\x3e\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    \x3c!-- No result --\x3e\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  \x3c!-- Tool sidebar --\x3e\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  \x3c!-- Status Bar --\x3e\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  \x3c!-- Pagination --\x3e\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\x3c!-- Header template for extra content --\x3e\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',host:{class:"mtx-grid"},encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,animations:[y.trigger("expansion",[y.state("collapsed",y.style({height:"0",minHeight:"0",visibility:"hidden"})),y.state("expanded",y.style({height:"*",visibility:"visible"})),y.transition("expanded <=> collapsed",y.animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)"))])],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-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-header-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-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-header-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-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-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-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-header-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-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-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-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-header-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}"]}]}],z.ctorParameters=function(){return[{type:P},{type:t.ChangeDetectorRef}]},z.propDecorators={paginator:[{type:t.ViewChild,args:[l.MatPaginator]}],sort:[{type:t.ViewChild,args:[a.MatSort]}],columnMenu:[{type:t.ViewChild,args:["columnMenu"]}],tableContainer:[{type:t.ViewChild,args:["tableContainer"]}],displayedColumns:[{type:t.Input}],columns:[{type:t.Input}],data:[{type:t.Input}],length:[{type:t.Input}],loading:[{type:t.Input}],trackBy:[{type:t.Input}],columnResizable:[{type:t.Input}],pageOnFront:[{type:t.Input}],showPaginator:[{type:t.Input}],pageDisabled:[{type:t.Input}],showFirstLastButtons:[{type:t.Input}],pageIndex:[{type:t.Input}],pageSize:[{type:t.Input}],pageSizeOptions:[{type:t.Input}],hidePageSize:[{type:t.Input}],page:[{type:t.Output}],paginationTemplate:[{type:t.Input}],sortOnFront:[{type:t.Input}],sortActive:[{type:t.Input}],sortDirection:[{type:t.Input}],sortDisableClear:[{type:t.Input}],sortDisabled:[{type:t.Input}],sortStart:[{type:t.Input}],sortChange:[{type:t.Output}],rowHover:[{type:t.Input}],rowStriped:[{type:t.Input}],rowClick:[{type:t.Output}],expandable:[{type:t.Input}],expansionTemplate:[{type:t.Input}],expansionChange:[{type:t.Output}],multiSelectable:[{type:t.Input}],rowSelected:[{type:t.Input}],rowSelectable:[{type:t.Input}],hideRowSelectionCheckbox:[{type:t.Input}],rowSelectionFormatter:[{type:t.Input}],rowClassFormatter:[{type:t.Input}],rowSelectionChange:[{type:t.Output}],cellSelectable:[{type:t.Input}],cellSelectionChange:[{type:t.Output}],showToolbar:[{type:t.Input}],toolbarTitle:[{type:t.Input}],toolbarTemplate:[{type:t.Input}],showColumnMenuButton:[{type:t.Input}],columnMenuButtonText:[{type:t.Input}],columnMenuButtonType:[{type:t.Input}],columnMenuButtonColor:[{type:t.Input}],columnMenuButtonClass:[{type:t.Input}],columnMenuButtonIcon:[{type:t.Input}],columnHideable:[{type:t.Input}],columnHideableChecked:[{type:t.Input}],columnMovable:[{type:t.Input}],columnPinnable:[{type:t.Input}],columnChange:[{type:t.Output}],showColumnMenuHeader:[{type:t.Input}],columnMenuHeaderText:[{type:t.Input}],columnMenuHeaderTemplate:[{type:t.Input}],showColumnMenuFooter:[{type:t.Input}],columnMenuFooterText:[{type:t.Input}],columnMenuFooterTemplate:[{type:t.Input}],noResultText:[{type:t.Input}],noResultTemplate:[{type:t.Input}],headerTemplate:[{type:t.Input}],headerExtraTemplate:[{type:t.Input}],cellTemplate:[{type:t.Input}],showSummary:[{type:t.Input}],summaryTemplate:[{type:t.Input}],showSidebar:[{type:t.Input}],sidebarTemplate:[{type:t.Input}],showStatusbar:[{type:t.Input}],statusbarTemplate:[{type:t.Input}]};var F=function(){function e(e,t){this._dialog=e,this._dataGridSrv=t,this.rowData={},this.data=[],this.summary=!1}return Object.defineProperty(e.prototype,"_colValue",{get:function(){return this._dataGridSrv.getCellValue(this.rowData,this.colDef)},enumerable:!1,configurable:!0}),e.prototype._isString=function(e){return"[object String]"===Object.prototype.toString.call(e)},e.prototype._isFunction=function(e){return"[object Function]"===Object.prototype.toString.call(e)},e.prototype._isEmptyValue=function(e){return null==e||""===e.toString()},e.prototype._isContainHTML=function(e){return/<\/?[a-z][\s\S]*>/i.test(e)},e.prototype._getText=function(e){return this._isEmptyValue(e)?"--":e},e.prototype._getTooltip=function(e){return this._isEmptyValue(e)?"":e},e.prototype._getFormatterTooltip=function(e){return this._isContainHTML(e)||this._isEmptyValue(e)?"":e},e.prototype._formatSummary=function(e,t){return this._isString(t.summary)?t.summary:this._isFunction(t.summary)?t.summary(this._dataGridSrv.getColData(e,t),t):void 0},e.prototype._handleActionConfirm=function(e,t,n,r,o,a,l,i,c){void 0===n&&(n=""),void 0===r&&(r="primary"),void 0===o&&(o="OK"),void 0===l&&(l="CLOSE"),e.preventDefault(),e.stopPropagation(),this._dialog.open({title:t,description:n,buttons:[{color:r,text:o,onClick:function(){return i?i(c):{}}},{color:a,text:l,onClick:function(){}}]})},e.prototype._handleActionClick=function(e,t,n){e.preventDefault(),e.stopPropagation(),t.click&&t.click(n)},e.prototype._onPreview=function(e){var t=[];this._dataGridSrv.str2arr(e).forEach((function(e,n){t.push({title:n+1+"",src:e})}));var n=t.length>1?["zoomIn","zoomOut","prev","next","rotateRight","rotateLeft","actualSize"]:["zoomIn","zoomOut","rotateRight","rotateLeft","actualSize"],r={title:t.length>1,footerToolbar:n};new _.default(t,r)},e}();F.decorators=[{type:t.Component,args:[{selector:"mtx-grid-cell",exportAs:"mtxGridCell",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\x3c!-- Custom formatting --\x3e\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\x3c!-- Default formatting --\x3e\r\n<ng-template #defaultCellFormattingTpl>\r\n  <ng-container [ngSwitch]="colDef.type">\r\n    \x3c!-- Tag --\x3e\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    \x3c!-- Buttons --\x3e\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    \x3c!-- Link --\x3e\r\n    <ng-container *ngSwitchCase="\'link\'">\r\n      <a [href]="_colValue" target="_blank">{{_colValue}}</a>\r\n    </ng-container>\r\n    \x3c!-- Image --\x3e\r\n    <ng-container *ngSwitchCase="\'image\'">\r\n      <img class="mtx-grid-img" [src]="_colValue" (click)="_onPreview(_colValue)">\r\n    </ng-container>\r\n    \x3c!-- Boolean --\x3e\r\n    <ng-container *ngSwitchCase="\'boolean\'">\r\n      <span [title]="_getTooltip(_colValue)">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    \x3c!-- Number --\x3e\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    \x3c!-- Currency --\x3e\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    \x3c!-- Percent --\x3e\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    \x3c!-- Date --\x3e\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    \x3c!-- Default --\x3e\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',encapsulation:t.ViewEncapsulation.None,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}"]}]}],F.ctorParameters=function(){return[{type:b.MtxDialog},{type:P}]},F.propDecorators={rowData:[{type:t.Input}],colDef:[{type:t.Input}],data:[{type:t.Input}],summary:[{type:t.Input}]};var H=function(){function e(){this.columns=[],this.selectable=!0,this.selectableChecked="show",this.sortable=!0,this.dndSortable=!0,this._buttonText="",this.buttonType="stroked",this.buttonClass="",this.buttonIcon="",this.showHeader=!1,this.headerText="Columns Header",this.showFooter=!1,this.footerText="Columns Footer",this.selectionChange=new t.EventEmitter,this.sortChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"buttonText",{get:function(){var e="Columns "+("show"===this.selectableChecked?"Shown":"Hidden");return this._buttonText?this._buttonText:e},set:function(e){this._buttonText=e},enumerable:!1,configurable:!0}),e.prototype._handleDroped=function(e){f.moveItemInArray(this.columns,e.previousIndex,e.currentIndex),this.sortChange.emit(this.columns)},e.prototype._handleSelection=function(e){this.selectionChange.emit(this.columns)},e}();H.decorators=[{type:t.Component,args:[{selector:"mtx-grid-column-menu",exportAs:"mtxGridColumnMenu",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',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:16px}.mtx-grid-column-menu-footer,.mtx-grid-column-menu-header{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 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.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)}"]}]}],H.propDecorators={menuPanel:[{type:t.ViewChild,args:["menu",{static:!0}]}],menuTrigger:[{type:t.ViewChild,args:[h.MatMenuTrigger]}],columns:[{type:t.Input}],selectable:[{type:t.Input}],selectableChecked:[{type:t.Input}],sortable:[{type:t.Input}],dndSortable:[{type:t.Input}],buttonText:[{type:t.Input}],buttonType:[{type:t.Input}],buttonColor:[{type:t.Input}],buttonClass:[{type:t.Input}],buttonIcon:[{type:t.Input}],showHeader:[{type:t.Input}],headerText:[{type:t.Input}],headerTemplate:[{type:t.Input}],showFooter:[{type:t.Input}],footerText:[{type:t.Input}],footerTemplate:[{type:t.Input}],selectionChange:[{type:t.Output}],sortChange:[{type:t.Output}]};var A=function(){function e(){this._opened=!1,this.openedChange=new t.EventEmitter,this.toggleChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"opened",{get:function(){return this._opened},set:function(e){this._opened=e,this.openedChange.emit(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"expanded",{get:function(){return this._opened},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"expandableRow",{set:function(e){e!==this._row&&(this._row=e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"template",{set:function(e){e!==this._tplRef&&(this._tplRef=e)},enumerable:!1,configurable:!0}),e.prototype.onClick=function(e){e.preventDefault(),e.stopPropagation(),this.toggle()},e.prototype.toggle=function(){this.opened=!this.opened,this.toggleChange.emit(this)},e}();A.decorators=[{type:t.Directive,args:[{selector:"[mtx-grid-expansion-toggle]"}]}],A.ctorParameters=function(){return[]},A.propDecorators={opened:[{type:t.Input}],openedChange:[{type:t.Output}],expanded:[{type:t.HostBinding,args:["class.expanded"]}],expandableRow:[{type:t.Input}],template:[{type:t.Input,args:["expansionRowTpl"]}],toggleChange:[{type:t.Output}],onClick:[{type:t.HostListener,args:["click",["$event"]]}]};var V=function(){function e(e){this._dataGrid=e,this._selected=!1,this.shiftKeyPressed=!1,this.ctrlKeyPressed=!1,this.cellSelectionChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"selected",{get:function(){return this._selected},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"matSelectableRowData",{set:function(e){e!==this._rowData&&(this._rowData=e)},enumerable:!1,configurable:!0}),e.prototype.onClick=function(e){this.ctrlKeyPressed=e.ctrlKey,this.shiftKeyPressed=e.shiftKey,this._dataGrid.cellSelectable&&this.select()},e.prototype.select=function(){this._selected=!0,this.cellSelectionChange.emit(this)},e.prototype.deselect=function(){this._selected=!1,this.cellSelectionChange.emit(this)},e.prototype.toggle=function(){this._selected=!this._selected,this.cellSelectionChange.emit(this)},e}();V.decorators=[{type:t.Directive,args:[{selector:"[mtx-grid-selectable-cell]"}]}],V.ctorParameters=function(){return[{type:z}]},V.propDecorators={selected:[{type:t.HostBinding,args:["class.selected"]}],matSelectableRowData:[{type:t.Input}],cellSelectionChange:[{type:t.Output}],onClick:[{type:t.HostListener,args:["click",["$event"]]}]};var B=function(e){function t(t,n,r,o){return e.call(this,t,n,r,o)||this}return R(t,e),t.prototype.getColumnCssClass=function(e){return"mat-column-"+e},t}(I.CdkFlexTableResizeStrategy);B.decorators=[{type:t.Injectable}],B.ctorParameters=function(){return[{type:I.ColumnResize},{type:S._CoalescedStyleScheduler,decorators:[{type:t.Inject,args:[S._COALESCED_STYLE_SCHEDULER]}]},{type:S.CdkTable},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]}]};var $={provide:I.ResizeStrategy,useClass:B},L=[I.ColumnResizeNotifier,I.HeaderRowEventDispatcher,I.ColumnResizeNotifierSource],N=M(L,[I.TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER]),j=M(L,[$]),G={class:"mat-column-resize-table"},q={class:"mat-column-resize-flex"},Z=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return R(t,e),t.prototype.getTableHeight=function(){var e=this.elementRef.nativeElement,t=e.parentNode;return t.classList.contains("mat-table-container")?t.offsetHeight:e.offsetHeight},t}(I.ColumnResize),U=function(e){function t(t,n,r,o,a){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=r,l.ngZone=o,l.notifier=a,l}return R(t,e),t}(Z);U.decorators=[{type:t.Directive,args:[{selector:"table[mat-table][columnResize]",host:G,providers:M(N,[{provide:I.ColumnResize,useExisting:U}])}]}],U.ctorParameters=function(){return[{type:I.ColumnResizeNotifier},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource}]};var Y=function(e){function t(t,n,r,o,a){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=r,l.ngZone=o,l.notifier=a,l}return R(t,e),t}(Z);Y.decorators=[{type:t.Directive,args:[{selector:"mat-table[columnResize]",host:q,providers:M(j,[{provide:I.ColumnResize,useExisting:Y}])}]}],Y.ctorParameters=function(){return[{type:I.ColumnResizeNotifier},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource}]};var K=function(e){function t(t,n,r,o,a,l,i,c,s,p){var m=e.call(this)||this;return m.columnDef=t,m.columnResize=n,m.directionality=r,m.elementRef=o,m.eventDispatcher=a,m.ngZone=l,m.resizeNotifier=i,m.resizeRef=c,m.styleScheduler=s,m.document=p,m}return R(t,e),t.prototype.updateResizeActive=function(t){e.prototype.updateResizeActive.call(this,t),this.resizeRef.overlayRef.updateSize({height:t?this.columnResize.getTableHeight():this.resizeRef.origin.nativeElement.offsetHeight})},t}(I.ResizeOverlayHandle);K.decorators=[{type:t.Component,args:[{changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,host:{class:"mat-column-resize-overlay-thumb"},template:""}]}],K.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:v.Directionality},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource},{type:I.ResizeRef},{type:S._CoalescedStyleScheduler,decorators:[{type:t.Inject,args:[S._COALESCED_STYLE_SCHEDULER]}]},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]}]};var W=function(e){function t(){var t=e.apply(this,M(arguments))||this;return t.minWidthPxInternal=32,t}return R(t,e),t.prototype.getInlineHandleCssClassName=function(){return"mat-resizable-handle"},t.prototype.getOverlayHandleComponentType=function(){return K},t}(I.Resizable),X={class:"mat-resizable"},J=["minWidthPx: matResizableMinWidthPx","maxWidthPx: matResizableMaxWidthPx"],Q=function(e){function t(t,n,r,o,a,l,i,c,s,p,m,d,u,g){var h=e.call(this)||this;return h.columnDef=t,h.columnResize=n,h.directionality=r,h.elementRef=a,h.eventDispatcher=l,h.injector=i,h.ngZone=c,h.overlay=s,h.resizeNotifier=p,h.resizeStrategy=m,h.styleScheduler=d,h.viewContainerRef=u,h.changeDetectorRef=g,h.isResizable=!0,h.document=o,h}return R(t,e),Object.defineProperty(t.prototype,"hasResizableClass",{get:function(){return this.isResizable?X.class:""},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"resizable",{get:function(){return this.isResizable},set:function(e){this.isResizable=null==e||""===e||e},enumerable:!1,configurable:!0}),t}(W);Q.decorators=[{type:t.Directive,args:[{selector:"mat-header-cell[resizable], th[mat-header-cell][resizable]",inputs:J}]}],Q.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:v.Directionality},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.Injector},{type:t.NgZone},{type:T.Overlay},{type:I.ColumnResizeNotifierSource},{type:I.ResizeStrategy},{type:S._CoalescedStyleScheduler,decorators:[{type:t.Inject,args:[S._COALESCED_STYLE_SCHEDULER]}]},{type:t.ViewContainerRef},{type:t.ChangeDetectorRef}]},Q.propDecorators={hasResizableClass:[{type:t.HostBinding,args:["class"]}],resizable:[{type:t.Input}]};
+    ***************************************************************************** */function k(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}R(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function E(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function M(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,a,o=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)l.push(r.value)}catch(e){a={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return l}function O(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(M(arguments[t]));return e}Object.create;var P=function(){function e(){}return e.prototype.getCellValue=function(e,t){var n=t.field?t.field.split("."):[],r="";return n.forEach((function(t,n){r=0===n?e[t]:r&&r[t]})),r},e.prototype.getColData=function(e,t){var n=this;return e.map((function(e){return n.getCellValue(e,t)}))},e.prototype.str2arr=function(e){return e.replace(/[\r\n\s]/g,"").split(",")},e}();P.decorators=[{type:t.Injectable}],P.ctorParameters=function(){return[]};var z=function(){function e(e,n){this._dataGridSrv=e,this._changeDetectorRef=n,this.dataSource=new a.MatTableDataSource,this.columns=[],this.data=[],this.length=0,this.loading=!1,this.columnResizable=!1,this.pageOnFront=!0,this.showPaginator=!0,this.pageDisabled=!1,this.showFirstLastButtons=!0,this.pageIndex=0,this.pageSize=10,this.pageSizeOptions=[10,50,100],this.hidePageSize=!1,this.page=new t.EventEmitter,this.sortOnFront=!0,this.sortDisableClear=!1,this.sortDisabled=!1,this.sortStart="asc",this.sortChange=new t.EventEmitter,this.rowHover=!1,this.rowStriped=!1,this.rowClick=new t.EventEmitter,this.expansionRowStates=[],this.expandable=!1,this.expansionChange=new t.EventEmitter,this.multiSelectable=!0,this.rowSelection=new C.SelectionModel(!0,[]),this.rowSelected=[],this.rowSelectable=!1,this.hideRowSelectionCheckbox=!1,this.rowSelectionFormatter={},this.rowSelectionChange=new t.EventEmitter,this.cellSelection=[],this.cellSelectable=!0,this.cellSelectionChange=new t.EventEmitter,this.showToolbar=!1,this.toolbarTitle="",this.columnMenuData=[],this.showColumnMenuButton=!0,this.columnMenuButtonText="",this.columnMenuButtonType="stroked",this.columnMenuButtonClass="",this.columnMenuButtonIcon="",this.columnHideable=!0,this.columnHideableChecked="show",this.columnMovable=!0,this.columnPinnable=!0,this.columnChange=new t.EventEmitter,this.showColumnMenuHeader=!1,this.columnMenuHeaderText="Columns Header",this.showColumnMenuFooter=!1,this.columnMenuFooterText="Columns Footer",this.noResultText="No records found",this.showSummary=!1,this.showSidebar=!1,this.showStatusbar=!1}return Object.defineProperty(e.prototype,"_hasNoResult",{get:function(){return!(this.data&&0!==this.data.length||this.loading)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_whetherShowSummary",{get:function(){return this.showSummary},enumerable:!1,configurable:!0}),e.prototype.detectChanges=function(){this._changeDetectorRef.detectChanges()},e.prototype._isTemplateRef=function(e){return e instanceof t.TemplateRef},e.prototype._getColData=function(e,t){return this._dataGridSrv.getColData(e,t)},e.prototype._getRowClassList=function(e,t){var n,r,a={selected:this.rowSelection.isSelected(e),"mat-row-odd":t%2};if(this.rowClassFormatter)try{for(var o=E(Object.keys(this.rowClassFormatter)),l=o.next();!l.done;l=o.next()){var i=l.value;a[i]=this.rowClassFormatter[i](e,t)}}catch(e){n={error:e}}finally{try{l&&!l.done&&(r=o.return)&&r.call(o)}finally{if(n)throw n.error}}return a},e.prototype.ngOnInit=function(){},e.prototype.ngOnChanges=function(e){var t,n=this;this._countPinnedPosition(),this.displayedColumns=this.columns.filter((function(e){return!e.hide})).map((function(e){return e.field})),this.showColumnMenuButton&&(this.columnMenuData=this.columns.map((function(e){var t={label:e.header,field:e.field,disabled:e.disabled};return"show"===n.columnHideableChecked?t.show=!e.hide:t.hide=e.hide,t}))),this.rowSelectable&&!this.hideRowSelectionCheckbox&&this.displayedColumns.unshift("MtxGridCheckboxColumnDef"),this.expandable&&(this.expansionRowStates=[],null===(t=this.data)||void 0===t||t.forEach((function(e){n.expansionRowStates.push({expanded:!1})}))),this.rowSelectable&&(this.rowSelection=new C.SelectionModel(this.multiSelectable,this.rowSelected)),this.dataSource=new a.MatTableDataSource(this.data),this.dataSource.paginator=this.pageOnFront?this.paginator:null,this.dataSource.sort=this.sortOnFront?this.sort:null,e.data&&this.scrollTop(0)},e.prototype.ngAfterViewInit=function(){this.pageOnFront&&(this.dataSource.paginator=this.paginator),this.sortOnFront&&(this.dataSource.sort=this.sort)},e.prototype.ngOnDestroy=function(){},e.prototype._countPinnedPosition=function(){var e=function(e,t){return e+parseFloat(t.width||"80px")},t=this.columns.filter((function(e){return e.pinned&&"left"===e.pinned}));t.forEach((function(n,r){n.left=t.slice(0,r).reduce(e,0)+"px"}));var n=this.columns.filter((function(e){return e.pinned&&"right"===e.pinned})).reverse();n.forEach((function(t,r){t.right=n.slice(0,r).reduce(e,0)+"px"}))},e.prototype._getIndex=function(e,t){return void 0===e?t:e},e.prototype._handleSortChange=function(e){this.sortChange.emit(e)},e.prototype._handleExpansionChange=function(e,t,n,r){this.expansionChange.emit({expanded:e.expanded,data:t,index:r,column:n})},e.prototype._selectCell=function(e,t,n){if(this._selectedCell!==e){var r=this._dataGridSrv.getCellValue(t,n);this.cellSelection=[],this.cellSelection.push({cellData:r,rowData:t,colDef:n}),this.cellSelectionChange.emit(this.cellSelection),this._selectedCell&&this._selectedCell.deselect()}this._selectedCell=e.selected?e:void 0},e.prototype._selectRow=function(e,t,n){var r,a,o,l;!this.rowSelectable||(null===(a=(r=this.rowSelectionFormatter).disabled)||void 0===a?void 0:a.call(r,t,n))||(null===(l=(o=this.rowSelectionFormatter).hideCheckbox)||void 0===l?void 0:l.call(o,t,n))||(e.ctrlKey||e.metaKey||this.rowSelection.clear(),this._toggleNormalCheckbox(t)),this.rowClick.emit({rowData:t,index:n})},e.prototype._isAllSelected=function(){var e=this;return this.rowSelection.selected.length===this.dataSource.data.filter((function(t,n){var r,a;return!(null===(a=(r=e.rowSelectionFormatter).disabled)||void 0===a?void 0:a.call(r,t,n))})).length},e.prototype._toggleMasterCheckbox=function(){var e=this;this._isAllSelected()?this.rowSelection.clear():this.dataSource.data.forEach((function(t,n){var r,a;(null===(a=(r=e.rowSelectionFormatter).disabled)||void 0===a?void 0:a.call(r,t,n))||e.rowSelection.select(t)})),this.rowSelectionChange.emit(this.rowSelection.selected)},e.prototype._toggleNormalCheckbox=function(e){this.rowSelection.toggle(e),this.rowSelectionChange.emit(this.rowSelection.selected)},e.prototype._handleColumnChange=function(e){this.columnChange.emit(e),this.displayedColumns=Object.assign([],this.getDisplayedColumnFields(e)),this.rowSelectable&&!this.hideRowSelectionCheckbox&&this.displayedColumns.unshift("MtxGridCheckboxColumnDef")},e.prototype.getDisplayedColumnFields=function(e){var t=this;return e.filter((function(e){return"show"===t.columnHideableChecked?e.show:!e.hide})).map((function(e){return e.field}))},e.prototype.toggleExpansion=function(e){if(!this.expandable)throw new Error("The `expandable` should be set true.");return this.expansionRowStates[e].expanded=!this.expansionRowStates[e].expanded,this.expansionRowStates[e].expanded},e.prototype._handlePage=function(e){this.pageOnFront&&this.scrollTop(0),this.page.emit(e)},e.prototype.scrollTop=function(e){var t;if(null==e)return null===(t=this.tableContainer)||void 0===t?void 0:t.nativeElement.scrollTop;this.tableContainer&&!this.loading&&(this.tableContainer.nativeElement.scrollTop=e)},e.prototype.scrollLeft=function(e){var t;if(null==e)return null===(t=this.tableContainer)||void 0===t?void 0:t.nativeElement.scrollLeft;this.tableContainer&&!this.loading&&(this.tableContainer.nativeElement.scrollLeft=e)},e}();z.decorators=[{type:t.Component,args:[{selector:"mtx-grid",exportAs:"mtxGrid",template:'\x3c!-- Progress bar--\x3e\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\x3c!-- Toolbar --\x3e\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  \x3c!-- Table content --\x3e\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 == null ? sortDisableClear : 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 type="button"\r\n                        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        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>\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-container *ngIf="_whetherShowSummary">\r\n          <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf="expandable">\r\n          \x3c!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns --\x3e\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      \x3c!-- TODO: Use flexbox-based mat-table --\x3e\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 == null ? sortDisableClear : 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 type="button"\r\n                        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        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>\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-container *ngIf="_whetherShowSummary">\r\n          <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf="expandable">\r\n          \x3c!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns --\x3e\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    \x3c!-- No result --\x3e\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  \x3c!-- Tool sidebar --\x3e\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  \x3c!-- Status Bar --\x3e\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  \x3c!-- Pagination --\x3e\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"\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\x3c!-- Header template for extra content --\x3e\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',host:{class:"mtx-grid"},encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,animations:[y.trigger("expansion",[y.state("collapsed, void",y.style({height:"0",minHeight:"0",visibility:"hidden"})),y.state("expanded",y.style({height:"*",visibility:"visible"})),y.transition("expanded <=> collapsed",y.animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)"))])],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-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-header-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-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-header-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-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-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-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-header-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-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-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-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-header-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}"]}]}],z.ctorParameters=function(){return[{type:P},{type:t.ChangeDetectorRef}]},z.propDecorators={paginator:[{type:t.ViewChild,args:[l.MatPaginator]}],sort:[{type:t.ViewChild,args:[o.MatSort]}],columnMenu:[{type:t.ViewChild,args:["columnMenu"]}],tableContainer:[{type:t.ViewChild,args:["tableContainer"]}],displayedColumns:[{type:t.Input}],columns:[{type:t.Input}],data:[{type:t.Input}],length:[{type:t.Input}],loading:[{type:t.Input}],trackBy:[{type:t.Input}],columnResizable:[{type:t.Input}],pageOnFront:[{type:t.Input}],showPaginator:[{type:t.Input}],pageDisabled:[{type:t.Input}],showFirstLastButtons:[{type:t.Input}],pageIndex:[{type:t.Input}],pageSize:[{type:t.Input}],pageSizeOptions:[{type:t.Input}],hidePageSize:[{type:t.Input}],page:[{type:t.Output}],paginationTemplate:[{type:t.Input}],sortOnFront:[{type:t.Input}],sortActive:[{type:t.Input}],sortDirection:[{type:t.Input}],sortDisableClear:[{type:t.Input}],sortDisabled:[{type:t.Input}],sortStart:[{type:t.Input}],sortChange:[{type:t.Output}],rowHover:[{type:t.Input}],rowStriped:[{type:t.Input}],rowClick:[{type:t.Output}],expandable:[{type:t.Input}],expansionTemplate:[{type:t.Input}],expansionChange:[{type:t.Output}],multiSelectable:[{type:t.Input}],rowSelected:[{type:t.Input}],rowSelectable:[{type:t.Input}],hideRowSelectionCheckbox:[{type:t.Input}],rowSelectionFormatter:[{type:t.Input}],rowClassFormatter:[{type:t.Input}],rowSelectionChange:[{type:t.Output}],cellSelectable:[{type:t.Input}],cellSelectionChange:[{type:t.Output}],showToolbar:[{type:t.Input}],toolbarTitle:[{type:t.Input}],toolbarTemplate:[{type:t.Input}],showColumnMenuButton:[{type:t.Input}],columnMenuButtonText:[{type:t.Input}],columnMenuButtonType:[{type:t.Input}],columnMenuButtonColor:[{type:t.Input}],columnMenuButtonClass:[{type:t.Input}],columnMenuButtonIcon:[{type:t.Input}],columnHideable:[{type:t.Input}],columnHideableChecked:[{type:t.Input}],columnMovable:[{type:t.Input}],columnPinnable:[{type:t.Input}],columnChange:[{type:t.Output}],showColumnMenuHeader:[{type:t.Input}],columnMenuHeaderText:[{type:t.Input}],columnMenuHeaderTemplate:[{type:t.Input}],showColumnMenuFooter:[{type:t.Input}],columnMenuFooterText:[{type:t.Input}],columnMenuFooterTemplate:[{type:t.Input}],noResultText:[{type:t.Input}],noResultTemplate:[{type:t.Input}],headerTemplate:[{type:t.Input}],headerExtraTemplate:[{type:t.Input}],cellTemplate:[{type:t.Input}],showSummary:[{type:t.Input}],summaryTemplate:[{type:t.Input}],showSidebar:[{type:t.Input}],sidebarTemplate:[{type:t.Input}],showStatusbar:[{type:t.Input}],statusbarTemplate:[{type:t.Input}]};var F=function(){function e(e,t){this._dialog=e,this._dataGridSrv=t,this.rowData={},this.data=[],this.summary=!1}return Object.defineProperty(e.prototype,"_colValue",{get:function(){return this._dataGridSrv.getCellValue(this.rowData,this.colDef)},enumerable:!1,configurable:!0}),e.prototype._isEmptyValue=function(e){return null==e||""===e.toString()},e.prototype._isContainHTML=function(e){return/<\/?[a-z][\s\S]*>/i.test(e)},e.prototype._getText=function(e){return void 0===e?"":this._isEmptyValue(e)?"--":e},e.prototype._getTooltip=function(e){return this._isEmptyValue(e)?"":e},e.prototype._getFormatterTooltip=function(e){return this._isContainHTML(e)||this._isEmptyValue(e)?"":e},e.prototype._formatSummary=function(e,t){return"string"==typeof t.summary?t.summary:"function"==typeof t.summary?t.summary(this._dataGridSrv.getColData(e,t),t):void 0},e.prototype._handleActionClick=function(e,t,n){var r;e.preventDefault(),e.stopPropagation(),t.pop?this._dialog.open({title:t.popTitle,description:t.popDescription,buttons:[{color:t.popOkColor||"primary",text:t.popOkText||"OK",onClick:function(){return t.click?t.click(n):{}}},{color:t.popCloseColor,text:t.popCloseText||"CLOSE",onClick:function(){}}]}):null===(r=t.click)||void 0===r||r.call(t,n)},e.prototype._handleImagePreview=function(e){var t=[];this._dataGridSrv.str2arr(e).forEach((function(e,n){t.push({title:n+1+"",src:e})}));var n=t.length>1?["zoomIn","zoomOut","prev","next","rotateRight","rotateLeft","actualSize"]:["zoomIn","zoomOut","rotateRight","rotateLeft","actualSize"],r={title:t.length>1,footerToolbar:n};new _.default(t,r)},e}();F.decorators=[{type:t.Component,args:[{selector:"mtx-grid-cell",exportAs:"mtxGridCell",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\x3c!-- Custom formatting --\x3e\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\x3c!-- Default formatting --\x3e\r\n<ng-template #defaultCellFormattingTpl>\r\n  <ng-container [ngSwitch]="colDef.type">\r\n    \x3c!-- Tag --\x3e\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    \x3c!-- Buttons --\x3e\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          <button *ngIf="btn.type===\'basic\'" type="button"\r\n                  [ngClass]="[\'mtx-grid-action-button\', btn.class||\'\']"\r\n                  mat-button [color]="btn.color || \'primary\'" [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 *ngIf="!btn.type || btn.type===\'icon\'" type="button"\r\n                  [ngClass]="[\'mtx-grid-action-button\', btn.class||\'\']"\r\n                  mat-icon-button [color]="btn.color || \'primary\'" [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-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    \x3c!-- Link --\x3e\r\n    <ng-container *ngSwitchCase="\'link\'">\r\n      <a [href]="_colValue" target="_blank">{{_colValue}}</a>\r\n    </ng-container>\r\n    \x3c!-- Image --\x3e\r\n    <ng-container *ngSwitchCase="\'image\'">\r\n      <img class="mtx-grid-img" [src]="_colValue" (click)="_handleImagePreview(_colValue)">\r\n    </ng-container>\r\n    \x3c!-- Boolean --\x3e\r\n    <ng-container *ngSwitchCase="\'boolean\'">\r\n      <span [title]="_getTooltip(_colValue)">{{_getText(_colValue)}}</span>\r\n    </ng-container>\r\n    \x3c!-- Number --\x3e\r\n    <ng-container *ngSwitchCase="\'number\'">\r\n      <span [title]="_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n      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    \x3c!-- Currency --\x3e\r\n    <ng-container *ngSwitchCase="\'currency\'">\r\n      <span [title]="_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n      colDef.typeParameter?.display :\r\n      colDef.typeParameter?.digitsInfo :\r\n      colDef.typeParameter?.locale)">\r\n        {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n        colDef.typeParameter?.display :\r\n        colDef.typeParameter?.digitsInfo :\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    \x3c!-- Percent --\x3e\r\n    <ng-container *ngSwitchCase="\'percent\'">\r\n      <span [title]="_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n      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    \x3c!-- Date --\x3e\r\n    <ng-container *ngSwitchCase="\'date\'">\r\n      <span [title]="_getTooltip(_colValue | date: colDef.typeParameter?.format :\r\n      colDef.typeParameter?.timezone :\r\n      colDef.typeParameter?.locale)">\r\n        {{_getText(_colValue | date: colDef.typeParameter?.format :\r\n        colDef.typeParameter?.timezone :\r\n        colDef.typeParameter?.locale)}}\r\n      </span>\r\n    </ng-container>\r\n    \x3c!-- Default --\x3e\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',encapsulation:t.ViewEncapsulation.None,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}"]}]}],F.ctorParameters=function(){return[{type:b.MtxDialog},{type:P}]},F.propDecorators={rowData:[{type:t.Input}],colDef:[{type:t.Input}],data:[{type:t.Input}],summary:[{type:t.Input}]};var H=function(){function e(){this.columns=[],this.selectable=!0,this.selectableChecked="show",this.sortable=!0,this.dndSortable=!0,this._buttonText="",this.buttonType="stroked",this.buttonClass="",this.buttonIcon="",this.showHeader=!1,this.headerText="Columns Header",this.showFooter=!1,this.footerText="Columns Footer",this.selectionChange=new t.EventEmitter,this.sortChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"buttonText",{get:function(){var e="Columns "+("show"===this.selectableChecked?"Shown":"Hidden");return this._buttonText?this._buttonText:e},set:function(e){this._buttonText=e},enumerable:!1,configurable:!0}),e.prototype._handleDroped=function(e){f.moveItemInArray(this.columns,e.previousIndex,e.currentIndex),this.sortChange.emit(this.columns)},e.prototype._handleSelection=function(e){this.selectionChange.emit(this.columns)},e}();H.decorators=[{type:t.Component,args:[{selector:"mtx-grid-column-menu",exportAs:"mtxGridColumnMenu",template:'<ng-container [ngSwitch]="buttonType">\r\n  <ng-container *ngSwitchCase="\'raised\'">\r\n    <button [ngClass]="buttonClass" mat-raised-button type="button" [color]="buttonColor"\r\n            [matMenuTriggerFor]="menu">\r\n      <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase="\'stroked\'">\r\n    <button [ngClass]="buttonClass" mat-stroked-button type="button" [color]="buttonColor"\r\n            [matMenuTriggerFor]="menu">\r\n      <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase="\'flat\'">\r\n    <button [ngClass]="buttonClass" mat-flat-button type="button" [color]="buttonColor"\r\n            [matMenuTriggerFor]="menu">\r\n      <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase="\'icon\'">\r\n    <button [ngClass]="buttonClass" mat-icon-button type="button" [color]="buttonColor"\r\n            [matMenuTriggerFor]="menu">\r\n      <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon>\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase="\'fab\'">\r\n    <button [ngClass]="buttonClass" mat-fab type="button" [color]="buttonColor" [matMenuTriggerFor]="menu">\r\n      <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase="\'mini-fab\'">\r\n    <button [ngClass]="buttonClass" mat-mini-fab type="button" [color]="buttonColor"\r\n            [matMenuTriggerFor]="menu">\r\n      <mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n    </button>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <button [ngClass]="buttonClass" mat-button type="button" [color]="buttonColor" [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',encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:16px}.mtx-grid-column-menu-footer,.mtx-grid-column-menu-header{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 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.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)}"]}]}],H.propDecorators={menuPanel:[{type:t.ViewChild,args:["menu",{static:!0}]}],menuTrigger:[{type:t.ViewChild,args:[h.MatMenuTrigger]}],columns:[{type:t.Input}],selectable:[{type:t.Input}],selectableChecked:[{type:t.Input}],sortable:[{type:t.Input}],dndSortable:[{type:t.Input}],buttonText:[{type:t.Input}],buttonType:[{type:t.Input}],buttonColor:[{type:t.Input}],buttonClass:[{type:t.Input}],buttonIcon:[{type:t.Input}],showHeader:[{type:t.Input}],headerText:[{type:t.Input}],headerTemplate:[{type:t.Input}],showFooter:[{type:t.Input}],footerText:[{type:t.Input}],footerTemplate:[{type:t.Input}],selectionChange:[{type:t.Output}],sortChange:[{type:t.Output}]};var V=function(){function e(){this._opened=!1,this.openedChange=new t.EventEmitter,this.toggleChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"opened",{get:function(){return this._opened},set:function(e){this._opened=e,this.openedChange.emit(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"expanded",{get:function(){return this._opened},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"expandableRow",{set:function(e){e!==this._row&&(this._row=e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"template",{set:function(e){e!==this._tplRef&&(this._tplRef=e)},enumerable:!1,configurable:!0}),e.prototype.onClick=function(e){e.preventDefault(),e.stopPropagation(),this.toggle()},e.prototype.toggle=function(){this.opened=!this.opened,this.toggleChange.emit(this)},e}();V.decorators=[{type:t.Directive,args:[{selector:"[mtx-grid-expansion-toggle]"}]}],V.ctorParameters=function(){return[]},V.propDecorators={opened:[{type:t.Input}],openedChange:[{type:t.Output}],expanded:[{type:t.HostBinding,args:["class.expanded"]}],expandableRow:[{type:t.Input}],template:[{type:t.Input,args:["expansionRowTpl"]}],toggleChange:[{type:t.Output}],onClick:[{type:t.HostListener,args:["click",["$event"]]}]};var A=function(){function e(e){this._dataGrid=e,this._selected=!1,this.shiftKeyPressed=!1,this.ctrlKeyPressed=!1,this.cellSelectionChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"selected",{get:function(){return this._selected},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"matSelectableRowData",{set:function(e){e!==this._rowData&&(this._rowData=e)},enumerable:!1,configurable:!0}),e.prototype.onClick=function(e){this.ctrlKeyPressed=e.ctrlKey,this.shiftKeyPressed=e.shiftKey,this._dataGrid.cellSelectable&&this.select()},e.prototype.select=function(){this._selected=!0,this.cellSelectionChange.emit(this)},e.prototype.deselect=function(){this._selected=!1,this.cellSelectionChange.emit(this)},e.prototype.toggle=function(){this._selected=!this._selected,this.cellSelectionChange.emit(this)},e}();A.decorators=[{type:t.Directive,args:[{selector:"[mtx-grid-selectable-cell]"}]}],A.ctorParameters=function(){return[{type:z}]},A.propDecorators={selected:[{type:t.HostBinding,args:["class.selected"]}],matSelectableRowData:[{type:t.Input}],cellSelectionChange:[{type:t.Output}],onClick:[{type:t.HostListener,args:["click",["$event"]]}]};var B=function(e){function t(t,n,r,a){return e.call(this,t,n,r,a)||this}return k(t,e),t.prototype.getColumnCssClass=function(e){return"mat-column-"+e},t}(I.CdkFlexTableResizeStrategy);B.decorators=[{type:t.Injectable}],B.ctorParameters=function(){return[{type:I.ColumnResize},{type:S._CoalescedStyleScheduler,decorators:[{type:t.Inject,args:[S._COALESCED_STYLE_SCHEDULER]}]},{type:S.CdkTable},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]}]};var L={provide:I.ResizeStrategy,useClass:B},N=[I.ColumnResizeNotifier,I.HeaderRowEventDispatcher,I.ColumnResizeNotifierSource],$=O(N,[I.TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER]),j=O(N,[L]),G={class:"mat-column-resize-table"},q={class:"mat-column-resize-flex"},Z=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return k(t,e),t.prototype.getTableHeight=function(){var e=this.elementRef.nativeElement,t=e.parentNode;return t.classList.contains("mat-table-container")?t.offsetHeight:e.offsetHeight},t}(I.ColumnResize),U=function(e){function t(t,n,r,a,o){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=r,l.ngZone=a,l.notifier=o,l}return k(t,e),t}(Z);U.decorators=[{type:t.Directive,args:[{selector:"table[mat-table][columnResize]",host:G,providers:O($,[{provide:I.ColumnResize,useExisting:U}])}]}],U.ctorParameters=function(){return[{type:I.ColumnResizeNotifier},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource}]};var Y=function(e){function t(t,n,r,a,o){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=r,l.ngZone=a,l.notifier=o,l}return k(t,e),t}(Z);Y.decorators=[{type:t.Directive,args:[{selector:"mat-table[columnResize]",host:q,providers:O(j,[{provide:I.ColumnResize,useExisting:Y}])}]}],Y.ctorParameters=function(){return[{type:I.ColumnResizeNotifier},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource}]};var K=function(e){function t(t,n,r,a,o,l,i,c,s,p){var m=e.call(this)||this;return m.columnDef=t,m.columnResize=n,m.directionality=r,m.elementRef=a,m.eventDispatcher=o,m.ngZone=l,m.resizeNotifier=i,m.resizeRef=c,m.styleScheduler=s,m.document=p,m}return k(t,e),t.prototype.updateResizeActive=function(t){e.prototype.updateResizeActive.call(this,t),this.resizeRef.overlayRef.updateSize({height:t?this.columnResize.getTableHeight():this.resizeRef.origin.nativeElement.offsetHeight})},t}(I.ResizeOverlayHandle);K.decorators=[{type:t.Component,args:[{changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,host:{class:"mat-column-resize-overlay-thumb"},template:""}]}],K.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:v.Directionality},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource},{type:I.ResizeRef},{type:S._CoalescedStyleScheduler,decorators:[{type:t.Inject,args:[S._COALESCED_STYLE_SCHEDULER]}]},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]}]};var W=function(e){function t(){var t=e.apply(this,O(arguments))||this;return t.minWidthPxInternal=32,t}return k(t,e),t.prototype.getInlineHandleCssClassName=function(){return"mat-resizable-handle"},t.prototype.getOverlayHandleComponentType=function(){return K},t}(I.Resizable),X={class:"mat-resizable"},J=["minWidthPx: matResizableMinWidthPx","maxWidthPx: matResizableMaxWidthPx"],Q=function(e){function t(t,n,r,a,o,l,i,c,s,p,m,d,u,g){var h=e.call(this)||this;return h.columnDef=t,h.columnResize=n,h.directionality=r,h.elementRef=o,h.eventDispatcher=l,h.injector=i,h.ngZone=c,h.overlay=s,h.resizeNotifier=p,h.resizeStrategy=m,h.styleScheduler=d,h.viewContainerRef=u,h.changeDetectorRef=g,h.isResizable=!0,h.document=a,h}return k(t,e),Object.defineProperty(t.prototype,"hasResizableClass",{get:function(){return this.isResizable?X.class:""},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"resizable",{get:function(){return this.isResizable},set:function(e){this.isResizable=null==e||""===e||e},enumerable:!1,configurable:!0}),t}(W);Q.decorators=[{type:t.Directive,args:[{selector:"mat-header-cell[resizable], th[mat-header-cell][resizable]",inputs:J}]}],Q.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:v.Directionality},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.Injector},{type:t.NgZone},{type:T.Overlay},{type:I.ColumnResizeNotifierSource},{type:I.ResizeStrategy},{type:S._CoalescedStyleScheduler,decorators:[{type:t.Inject,args:[S._COALESCED_STYLE_SCHEDULER]}]},{type:t.ViewContainerRef},{type:t.ChangeDetectorRef}]},Q.propDecorators={hasResizableClass:[{type:t.HostBinding,args:["class"]}],resizable:[{type:t.Input}]};
 /**
      * @license
      * Copyright Google LLC All Rights Reserved.
@@ -20,5 +20,5 @@
      * Use of this source code is governed by an MIT-style license that can be
      * found in the LICENSE file at https://angular.io/license
      */
-var ee=[K],te=function(){};te.decorators=[{type:t.NgModule,args:[{declarations:ee,exports:ee,entryComponents:ee}]}];var ne=[T.OverlayModule,te],re=function(){};re.decorators=[{type:t.NgModule,args:[{imports:ne,declarations:[U,Y,Q],exports:[U,Y,Q]}]}];var oe=function(){};oe.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,o.MatTableModule,a.MatSortModule,l.MatPaginatorModule,i.MatCheckboxModule,c.MatButtonModule,s.MatProgressBarModule,p.MatChipsModule,m.MatTooltipModule,d.MatIconModule,u.MatSelectModule,g.MatFormFieldModule,h.MatMenuModule,f.DragDropModule,b.MtxDialogModule,x.MtxUtilsModule,re],exports:[z,F,H,A,V,re],declarations:[z,F,H,A,V],providers:[P]}]}],Object.defineProperty(e,"MAT_TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER",{enumerable:!0,get:function(){return I.TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER}}),e.AbstractMatColumnResize=Z,e.AbstractMatResizable=W,e.MAT_FLEX_HOST_BINDINGS=q,e.MAT_FLEX_PROVIDERS=j,e.MAT_FLEX_RESIZE_STRATEGY_PROVIDER=$,e.MAT_RESIZABLE_HOST_BINDINGS=X,e.MAT_RESIZABLE_INPUTS=J,e.MAT_TABLE_HOST_BINDINGS=G,e.MAT_TABLE_PROVIDERS=N,e.MatColumnResize=U,e.MatColumnResizeCommonModule=te,e.MatColumnResizeFlex=Y,e.MatColumnResizeModule=re,e.MatColumnResizeOverlayHandle=K,e.MatFlexTableResizeStrategy=B,e.MatResizable=Q,e.MtxGridCellComponent=F,e.MtxGridCellSelectionDirective=V,e.MtxGridColumnMenuComponent=H,e.MtxGridComponent=z,e.MtxGridExpansionToggleDirective=A,e.MtxGridModule=oe,e.MtxGridService=P,Object.defineProperty(e,"__esModule",{value:!0})}));
+var ee=[K],te=function(){};te.decorators=[{type:t.NgModule,args:[{declarations:ee,exports:ee,entryComponents:ee}]}];var ne=[T.OverlayModule,te],re=function(){};re.decorators=[{type:t.NgModule,args:[{imports:ne,declarations:[U,Y,Q],exports:[U,Y,Q]}]}];var ae=function(){};ae.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,a.MatTableModule,o.MatSortModule,l.MatPaginatorModule,i.MatCheckboxModule,c.MatButtonModule,s.MatProgressBarModule,p.MatChipsModule,m.MatTooltipModule,d.MatIconModule,u.MatSelectModule,g.MatFormFieldModule,h.MatMenuModule,f.DragDropModule,b.MtxDialogModule,x.MtxUtilsModule,re],exports:[z,F,H,V,A,re],declarations:[z,F,H,V,A],providers:[P]}]}],Object.defineProperty(e,"MAT_TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER",{enumerable:!0,get:function(){return I.TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER}}),e.AbstractMatColumnResize=Z,e.AbstractMatResizable=W,e.MAT_FLEX_HOST_BINDINGS=q,e.MAT_FLEX_PROVIDERS=j,e.MAT_FLEX_RESIZE_STRATEGY_PROVIDER=L,e.MAT_RESIZABLE_HOST_BINDINGS=X,e.MAT_RESIZABLE_INPUTS=J,e.MAT_TABLE_HOST_BINDINGS=G,e.MAT_TABLE_PROVIDERS=$,e.MatColumnResize=U,e.MatColumnResizeCommonModule=te,e.MatColumnResizeFlex=Y,e.MatColumnResizeModule=re,e.MatColumnResizeOverlayHandle=K,e.MatFlexTableResizeStrategy=B,e.MatResizable=Q,e.MtxGridCellComponent=F,e.MtxGridCellSelectionDirective=A,e.MtxGridColumnMenuComponent=H,e.MtxGridComponent=z,e.MtxGridExpansionToggleDirective=V,e.MtxGridModule=ae,e.MtxGridService=P,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mtxGrid.umd.min.js.map