@ng-matero/extensions 10.16.1 → 10.16.5

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("rxjs"),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","rxjs","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.rxjs,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,o,r,a,l,i,c,s,p,d,m,u,g,h,f,b,x,y,w,C,v,T,I,S,D){"use strict";function _(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var k=_(v),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)};
+!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("rxjs"),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","rxjs","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.rxjs,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,o,r,a,l,i,s,c,p,d,m,u,g,h,f,x,b,y,w,C,v,T,I,S,D){"use strict";function _(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var k=_(v),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,5 +12,5 @@
     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 E(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 z(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],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 o,r,a=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)l.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.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("."):[],o="";return n.forEach((function(t,n){o=0===n?e[t]:o&&o[t]})),o},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 F=function(){function e(e,n){this._dataGridSrv=e,this._changeDetectorRef=n,this.dataSource=new r.MatTableDataSource([]),this.columns=[],this.data=[],this.length=0,this.loading=!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 w.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.columnMenuButtonColor="",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.columnResizable=!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._isObservable=function(e){return C.isObservable(e)},e.prototype._getColData=function(e,t){return this._dataGridSrv.getColData(e,t)},e.prototype._getRowClassList=function(e,t){var n,o,r={selected:this.rowSelection.isSelected(e),"mat-row-odd":t%2};if(this.rowClassFormatter)try{for(var a=z(Object.keys(this.rowClassFormatter)),l=a.next();!l.done;l=a.next()){var i=l.value;r[i]=this.rowClassFormatter[i](e,t)}}catch(e){n={error:e}}finally{try{l&&!l.done&&(o=a.return)&&o.call(a)}finally{if(n)throw n.error}}return r},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 w.SelectionModel(this.multiSelectable,this.rowSelected)),this.dataSource=new r.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,o){n.left=t.slice(0,o).reduce(e,0)+"px"}));var n=this.columns.filter((function(e){return e.pinned&&"right"===e.pinned})).reverse();n.forEach((function(t,o){t.right=n.slice(0,o).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,o){this.expansionChange.emit({expanded:e.expanded,data:t,index:o,column:n})},e.prototype._selectCell=function(e,t,n){if(this._selectedCell!==e){var o=this._dataGridSrv.getCellValue(t,n);this.cellSelection=[],this.cellSelection.push({cellData:o,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 o,r,a,l;!this.rowSelectable||(null===(r=(o=this.rowSelectionFormatter).disabled)||void 0===r?void 0:r.call(o,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 o,r;return!(null===(r=(o=e.rowSelectionFormatter).disabled)||void 0===r?void 0:r.call(o,t,n))})).length},e.prototype._toggleMasterCheckbox=function(){var e=this;this._isAllSelected()?this.rowSelection.clear():this.dataSource.data.forEach((function(t,n){var o,r;(null===(r=(o=e.rowSelectionFormatter).disabled)||void 0===r?void 0:r.call(o,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}();F.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\x3c!-- Paginator --\x3e\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\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{display:flex;flex-direction:column;position:relative;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){border-collapse:separate;min-width:100%}.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-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-header-cell{box-sizing:border-box;padding:4px 10px}.mtx-grid .mat-cell.mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell.mtx-grid-checkbox-cell,.mtx-grid .mat-header-cell.mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell.mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell.mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-header-cell.mtx-grid-checkbox-cell{padding-left:10px;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-bottom:0;padding-top:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell,.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{font-size:18px;height:18px;margin:0 4px;width:18px}.mtx-grid .mat-header-cell-inner{align-items:center;display:flex}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid-progress{position:absolute;top:0;width:100%;z-index:120}.mtx-grid-toolbar{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;min-height:48px;padding:8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%}.mtx-grid-no-result{align-items:center;display:flex;flex:1;justify-content:center;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;height:40px;vertical-align:middle;width:40px}.mtx-grid-expansion-detail{align-items:center;display:flex;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;min-width:56px;width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mat-table-sticky{position:-webkit-sticky!important;position:sticky!important}"]}]}],F.ctorParameters=function(){return[{type:P},{type:t.ChangeDetectorRef}]},F.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}],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}],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}],columnResizable:[{type:t.Input}]};var H=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,o,r,a,l,i,c){void 0===n&&(n=""),void 0===o&&(o="primary"),void 0===r&&(r="OK"),void 0===a&&(a=""),void 0===l&&(l="CLOSE"),e.preventDefault(),e.stopPropagation(),this._dialog.open({title:t,description:n,buttons:[{color:o,text:r,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"],o={title:t.length>1,footerToolbar:n};new k.default(t,o)},e}();H.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:['.photoviewer-modal{color:#333;cursor:default;height:320px;outline:none;overflow:visible!important;position:absolute;width:320px;z-index:1090}.photoviewer-inner{background-color:hsla(0,0%,100%,.92);border:1px solid rgba(0,0,0,.64);border-radius:6px;bottom:-1px;box-shadow:0 2px 10px 2px rgba(0,0,0,.32);cursor:inherit;left:-1px;overflow:hidden;position:absolute;right:-1px;top:-1px}.photoviewer-maximize{height:100%;left:0;position:fixed;top:0;width:100%}.photoviewer-maximize .photoviewer-inner{border-radius:0}.photoviewer-maximize .photoviewer-resizable-handle{display:none}.photoviewer-toolbar{font-size:0}.photoviewer-button{background:none;border-radius:0;border-width:0;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-block;font-size:16px;height:40px;line-height:1;margin:0;min-width:40px;outline:none;text-align:center}.photoviewer-button:hover{color:#111}.photoviewer-button:focus{background-color:rgba(0,0,0,.08)}.photoviewer-button svg{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.photoviewer-header{height:30px;position:relative;z-index:2}.photoviewer-header .photoviewer-toolbar{float:right}[dir=rtl] .photoviewer-header .photoviewer-toolbar{float:left}.photoviewer-header .photoviewer-button{height:30px}.photoviewer-header .photoviewer-button:hover{background-color:rgba(0,0,0,.08)}.photoviewer-header .photoviewer-button-close:hover{background-color:#ff4545;color:#fff}.photoviewer-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;font-size:14px;line-height:1;overflow:hidden;padding:8px 10px;text-overflow:ellipsis;user-select:none;white-space:nowrap}.photoviewer-stage{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.64);border-top:1px solid rgba(0,0,0,.64);bottom:40px;left:0;overflow:hidden;position:absolute;right:0;top:30px;z-index:1}.photoviewer-stage.stage-ready{font-size:0;text-align:center}.photoviewer-stage.stage-ready:before{content:"";display:inline-block;height:100%;overflow:hidden;vertical-align:middle}.photoviewer-image{display:inline-block;max-width:none;min-width:auto;position:absolute}.photoviewer-image.image-ready{max-height:100%;max-width:100%;position:static;vertical-align:middle}.photoviewer-footer{bottom:0;height:40px;position:absolute;text-align:center;width:100%;z-index:2}.photoviewer-footer .photoviewer-toolbar{display:inline-block}.photoviewer-resizable-handle{position:absolute;z-index:10}.photoviewer-resizable-handle-e{bottom:0;cursor:e-resize;left:auto;right:-5px;top:0;width:10px}.photoviewer-resizable-handle-s{bottom:-5px;cursor:s-resize;height:10px;left:0;right:0;top:auto}.photoviewer-resizable-handle-w{bottom:0;cursor:w-resize;left:-5px;right:auto;top:0;width:10px}.photoviewer-resizable-handle-n{bottom:auto;cursor:n-resize;height:10px;left:0;right:0;top:-5px}.photoviewer-resizable-handle-se{bottom:-5px;cursor:se-resize;height:10px;left:auto;right:-5px;top:auto;width:10px}.photoviewer-resizable-handle-sw{bottom:-5px;cursor:sw-resize;height:10px;left:-5px;right:auto;top:auto;width:10px}.photoviewer-resizable-handle-nw{bottom:auto;cursor:nw-resize;height:10px;left:-5px;right:auto;top:-5px;width:10px}.photoviewer-resizable-handle-ne{bottom:auto;cursor:ne-resize;height:10px;left:auto;right:-5px;top:-5px;width:10px}:-moz-full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-moz-full-screen .photoviewer-footer,:-moz-full-screen .photoviewer-header,:-moz-full-screen .photoviewer-resizable-handle{display:none}:-moz-full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:full-screen .photoviewer-footer,:full-screen .photoviewer-header,:full-screen .photoviewer-resizable-handle{display:none}:full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:-webkit-full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-ms-fullscreen{height:100%!important;left:0!important;top:0!important;width:100%!important}:fullscreen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-webkit-full-screen .photoviewer-footer,:-webkit-full-screen .photoviewer-header,:-webkit-full-screen .photoviewer-resizable-handle{display:none}:-ms-fullscreen .photoviewer-footer,:-ms-fullscreen .photoviewer-header,:-ms-fullscreen .photoviewer-resizable-handle{display:none}:fullscreen .photoviewer-footer,:fullscreen .photoviewer-header,:fullscreen .photoviewer-resizable-handle{display:none}:-webkit-full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:-ms-fullscreen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:fullscreen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}::-webkit-backdrop{background-color:#000}::backdrop{background-color:#000}::-ms-backdrop{background-color:#000}.is-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.is-grabbing{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.photoviewer-loader{bottom:40px;color:#333;left:0;position:absolute;right:0;text-align:center;top:30px;z-index:2}.photoviewer-loader:before{-webkit-animation:photoviewerLoading 1s linear infinite;animation:photoviewerLoading 1s linear infinite;border:5px solid rgba(0,0,0,.5);border-left-color:hsla(0,0%,100%,.5);border-radius:100%;box-sizing:border-box;height:36px;position:relative;width:36px}.photoviewer-loader:after,.photoviewer-loader:before{content:"";display:inline-block;vertical-align:middle}.photoviewer-loader:after{height:100%;overflow:hidden;width:0}@-webkit-keyframes photoviewerLoading{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}@keyframes photoviewerLoading{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}.mtx-grid-action-button .mat-icon{font-size:18px;height:18px;line-height:18px;width:18px}.mtx-grid-img{border-radius:4px;cursor:pointer;display:block;width:30px}']}]}],H.ctorParameters=function(){return[{type:x.MtxDialog},{type:P}]},H.propDecorators={rowData:[{type:t.Input}],colDef:[{type:t.Input}],data:[{type:t.Input}],summary:[{type:t.Input}]};var A=function(){function e(){this.columns=[],this.selectable=!0,this.selectableChecked="show",this.sortable=!0,this.dndSortable=!0,this._buttonText="",this.buttonType="stroked",this.buttonColor="",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}();A.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{padding:8px 16px;position:-webkit-sticky;position:sticky;z-index:1}.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{align-items:center;display:flex;flex-direction:row;padding:4px 0}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{cursor:no-drop;opacity:.35}.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)}"]}]}],A.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 L=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}();L.decorators=[{type:t.Directive,args:[{selector:"[mtx-grid-selectable-cell]"}]}],L.ctorParameters=function(){return[{type:F}]},L.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,o,r){return e.call(this,t,n,o,r)||this}return E(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},N=[I.ColumnResizeNotifier,I.HeaderRowEventDispatcher,I.ColumnResizeNotifierSource],j=M(N,[I.TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER]),G=M(N,[$]),q={class:"mat-column-resize-table"},Z={class:"mat-column-resize-flex"},U=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return E(t,e),t.prototype.getTableHeight=function(){return this.elementRef.nativeElement.offsetHeight},t}(I.ColumnResize),Y=function(e){function t(t,n,o,r,a){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=o,l.ngZone=r,l.notifier=a,l}return E(t,e),t}(U);Y.decorators=[{type:t.Directive,args:[{selector:"table[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,o,r,a){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=o,l.ngZone=r,l.notifier=a,l}return E(t,e),t}(U);K.decorators=[{type:t.Directive,args:[{selector:"mat-table[columnResize]",host:Z,providers:M(G,[{provide:I.ColumnResize,useExisting:K}])}]}],K.ctorParameters=function(){return[{type:I.ColumnResizeNotifier},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource}]};var W=function(e){function t(t,n,o,r,a,l,i,c,s,p){var d=e.call(this)||this;return d.columnDef=t,d.columnResize=n,d.directionality=o,d.elementRef=r,d.eventDispatcher=a,d.ngZone=l,d.resizeNotifier=i,d.resizeRef=c,d.styleScheduler=s,d.document=p,d}return E(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);W.decorators=[{type:t.Component,args:[{changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,host:{class:"mat-column-resize-overlay-thumb"},template:""}]}],W.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:D.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 X=function(e){function t(){var t=e.apply(this,M(arguments))||this;return t.minWidthPxInternal=32,t}return E(t,e),t.prototype.getInlineHandleCssClassName=function(){return"mat-resizable-handle"},t.prototype.getOverlayHandleComponentType=function(){return W},t}(I.Resizable);var J={class:"mat-resizable"},Q=["minWidthPx: matResizableMinWidthPx","maxWidthPx: matResizableMaxWidthPx"],ee=function(e){function t(t,n,o,r,a,l,i,c,s,p,d,m,u,g){var h=e.call(this)||this;return h.columnDef=t,h.columnResize=n,h.directionality=o,h.elementRef=a,h.eventDispatcher=l,h.injector=i,h.ngZone=c,h.overlay=s,h.resizeNotifier=p,h.resizeStrategy=d,h.styleScheduler=m,h.viewContainerRef=u,h.changeDetectorRef=g,h.isResizable=!0,h.document=r,h}return E(t,e),Object.defineProperty(t.prototype,"hasResizableClass",{get:function(){return this.isResizable?J.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}(X);ee.decorators=[{type:t.Directive,args:[{selector:"mat-header-cell[resizable], th[mat-header-cell][resizable]",inputs:Q}]}],ee.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:D.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}]},ee.propDecorators={hasResizableClass:[{type:t.HostBinding,args:["class"]}],resizable:[{type:t.Input}]};var te=[W],ne=function(){};ne.decorators=[{type:t.NgModule,args:[{declarations:te,exports:te,entryComponents:te}]}];var oe=[T.OverlayModule,ne],re=function(){};re.decorators=[{type:t.NgModule,args:[{imports:oe,declarations:[Y,K,ee],exports:[Y,K,ee]}]}];var ae=function(){};ae.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,r.MatTableModule,a.MatSortModule,l.MatPaginatorModule,i.MatCheckboxModule,c.MatButtonModule,s.MatProgressBarModule,p.MatChipsModule,d.MatTooltipModule,m.MatIconModule,u.MatSelectModule,g.MatFormFieldModule,h.MatMenuModule,f.DragDropModule,x.MtxDialogModule,b.MtxUtilsModule,re],exports:[F,H,A,V,L,re],declarations:[F,H,A,V,L],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=U,e.AbstractMatResizable=X,e.MAT_FLEX_HOST_BINDINGS=Z,e.MAT_FLEX_PROVIDERS=G,e.MAT_FLEX_RESIZE_STRATEGY_PROVIDER=$,e.MAT_RESIZABLE_HOST_BINDINGS=J,e.MAT_RESIZABLE_INPUTS=Q,e.MAT_TABLE_HOST_BINDINGS=q,e.MAT_TABLE_PROVIDERS=j,e.MatColumnResize=Y,e.MatColumnResizeCommonModule=ne,e.MatColumnResizeFlex=K,e.MatColumnResizeModule=re,e.MatColumnResizeOverlayHandle=W,e.MatFlexTableResizeStrategy=B,e.MatResizable=ee,e.MtxGridCellComponent=H,e.MtxGridCellSelectionDirective=L,e.MtxGridColumnMenuComponent=A,e.MtxGridComponent=F,e.MtxGridExpansionToggleDirective=V,e.MtxGridModule=ae,e.MtxGridService=P,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */function E(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 z(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],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 o,r,a=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)l.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.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("."):[],o="";return n.forEach((function(t,n){o=0===n?e[t]:o&&o[t]})),o},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 F=function(){function e(e,n){this._dataGridSrv=e,this._changeDetectorRef=n,this.dataSource=new r.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 w.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}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._isObservable=function(e){return C.isObservable(e)},e.prototype._getColData=function(e,t){return this._dataGridSrv.getColData(e,t)},e.prototype._getRowClassList=function(e,t){var n,o,r={selected:this.rowSelection.isSelected(e),"mat-row-odd":t%2};if(this.rowClassFormatter)try{for(var a=z(Object.keys(this.rowClassFormatter)),l=a.next();!l.done;l=a.next()){var i=l.value;r[i]=this.rowClassFormatter[i](e,t)}}catch(e){n={error:e}}finally{try{l&&!l.done&&(o=a.return)&&o.call(a)}finally{if(n)throw n.error}}return r},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 w.SelectionModel(this.multiSelectable,this.rowSelected)),this.dataSource=new r.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,o){n.left=t.slice(0,o).reduce(e,0)+"px"}));var n=this.columns.filter((function(e){return e.pinned&&"right"===e.pinned})).reverse();n.forEach((function(t,o){t.right=n.slice(0,o).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,o){this.expansionChange.emit({expanded:e.expanded,data:t,index:o,column:n})},e.prototype._selectCell=function(e,t,n){if(this._selectedCell!==e){var o=this._dataGridSrv.getCellValue(t,n);this.cellSelection=[],this.cellSelection.push({cellData:o,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 o,r,a,l;!this.rowSelectable||(null===(r=(o=this.rowSelectionFormatter).disabled)||void 0===r?void 0:r.call(o,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 o,r;return!(null===(r=(o=e.rowSelectionFormatter).disabled)||void 0===r?void 0:r.call(o,t,n))})).length},e.prototype._toggleMasterCheckbox=function(){var e=this;this._isAllSelected()?this.rowSelection.clear():this.dataSource.data.forEach((function(t,n){var o,r;(null===(r=(o=e.rowSelectionFormatter).disabled)||void 0===r?void 0:r.call(o,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}();F.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\x3c!-- Paginator --\x3e\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\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{display:flex;flex-direction:column;position:relative;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){border-collapse:separate;min-width:100%}.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-style:solid;border-right-width:1px}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0}.mtx-grid .mat-table-sticky-right,[dir=rtl] .mtx-grid .mat-table-sticky-left{border-left-style:solid;border-left-width:1px}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-style:solid;border-right-width:1px}.mtx-grid .mat-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-header-cell{box-sizing:border-box;padding:4px 10px}.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-bottom:0;padding-top:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell,.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{font-size:18px;height:18px;margin:0 4px;width:18px}.mtx-grid .mat-header-cell-inner{align-items:center;display:flex}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid-progress{position:absolute;top:0;width:100%;z-index:120}.mtx-grid-toolbar{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;min-height:48px;padding:8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{border-left-style:solid;border-left-width:1px;max-width:50%}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-style:solid;border-right-width:1px}.mtx-grid-no-result{align-items:center;display:flex;flex:1;justify-content:center;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;height:40px;vertical-align:middle;width:40px}.mtx-grid-expansion-detail{align-items:center;display:flex;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;min-width:56px;width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mat-table-sticky{position:-webkit-sticky!important;position:sticky!important}"]}]}],F.ctorParameters=function(){return[{type:P},{type:t.ChangeDetectorRef}]},F.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}],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}]};var H=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,o,r,a,l,i,s){void 0===n&&(n=""),void 0===o&&(o="primary"),void 0===r&&(r="OK"),void 0===l&&(l="CLOSE"),e.preventDefault(),e.stopPropagation(),this._dialog.open({title:t,description:n,buttons:[{color:o,text:r,onClick:function(){return i?i(s):{}}},{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"],o={title:t.length>1,footerToolbar:n};new k.default(t,o)},e}();H.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:['.photoviewer-modal{color:#333;cursor:default;height:320px;outline:none;overflow:visible!important;position:absolute;width:320px;z-index:1090}.photoviewer-inner{background-color:hsla(0,0%,100%,.92);border:1px solid rgba(0,0,0,.64);border-radius:6px;bottom:-1px;box-shadow:0 2px 10px 2px rgba(0,0,0,.32);cursor:inherit;left:-1px;overflow:hidden;position:absolute;right:-1px;top:-1px}.photoviewer-maximize{height:100%;left:0;position:fixed;top:0;width:100%}.photoviewer-maximize .photoviewer-inner{border-radius:0}.photoviewer-maximize .photoviewer-resizable-handle{display:none}.photoviewer-toolbar{font-size:0}.photoviewer-button{background:none;border-radius:0;border-width:0;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-block;font-size:16px;height:40px;line-height:1;margin:0;min-width:40px;outline:none;text-align:center}.photoviewer-button:hover{color:#111}.photoviewer-button:focus{background-color:rgba(0,0,0,.08)}.photoviewer-button svg{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.photoviewer-header{height:30px;position:relative;z-index:2}.photoviewer-header .photoviewer-toolbar{float:right}[dir=rtl] .photoviewer-header .photoviewer-toolbar{float:left}.photoviewer-header .photoviewer-button{height:30px}.photoviewer-header .photoviewer-button:hover{background-color:rgba(0,0,0,.08)}.photoviewer-header .photoviewer-button-close:hover{background-color:#ff4545;color:#fff}.photoviewer-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;font-size:14px;line-height:1;overflow:hidden;padding:8px 10px;text-overflow:ellipsis;user-select:none;white-space:nowrap}.photoviewer-stage{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.64);border-top:1px solid rgba(0,0,0,.64);bottom:40px;left:0;overflow:hidden;position:absolute;right:0;top:30px;z-index:1}.photoviewer-stage.stage-ready{font-size:0;text-align:center}.photoviewer-stage.stage-ready:before{content:"";display:inline-block;height:100%;overflow:hidden;vertical-align:middle}.photoviewer-image{display:inline-block;max-width:none;min-width:auto;position:absolute}.photoviewer-image.image-ready{max-height:100%;max-width:100%;position:static;vertical-align:middle}.photoviewer-footer{bottom:0;height:40px;position:absolute;text-align:center;width:100%;z-index:2}.photoviewer-footer .photoviewer-toolbar{display:inline-block}.photoviewer-resizable-handle{position:absolute;z-index:10}.photoviewer-resizable-handle-e{bottom:0;cursor:e-resize;left:auto;right:-5px;top:0;width:10px}.photoviewer-resizable-handle-s{bottom:-5px;cursor:s-resize;height:10px;left:0;right:0;top:auto}.photoviewer-resizable-handle-w{bottom:0;cursor:w-resize;left:-5px;right:auto;top:0;width:10px}.photoviewer-resizable-handle-n{bottom:auto;cursor:n-resize;height:10px;left:0;right:0;top:-5px}.photoviewer-resizable-handle-se{bottom:-5px;cursor:se-resize;height:10px;left:auto;right:-5px;top:auto;width:10px}.photoviewer-resizable-handle-sw{bottom:-5px;cursor:sw-resize;height:10px;left:-5px;right:auto;top:auto;width:10px}.photoviewer-resizable-handle-nw{bottom:auto;cursor:nw-resize;height:10px;left:-5px;right:auto;top:-5px;width:10px}.photoviewer-resizable-handle-ne{bottom:auto;cursor:ne-resize;height:10px;left:auto;right:-5px;top:-5px;width:10px}:-moz-full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-moz-full-screen .photoviewer-footer,:-moz-full-screen .photoviewer-header,:-moz-full-screen .photoviewer-resizable-handle{display:none}:-moz-full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:full-screen .photoviewer-footer,:full-screen .photoviewer-header,:full-screen .photoviewer-resizable-handle{display:none}:full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:-webkit-full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-ms-fullscreen{height:100%!important;left:0!important;top:0!important;width:100%!important}:fullscreen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-webkit-full-screen .photoviewer-footer,:-webkit-full-screen .photoviewer-header,:-webkit-full-screen .photoviewer-resizable-handle{display:none}:-ms-fullscreen .photoviewer-footer,:-ms-fullscreen .photoviewer-header,:-ms-fullscreen .photoviewer-resizable-handle{display:none}:fullscreen .photoviewer-footer,:fullscreen .photoviewer-header,:fullscreen .photoviewer-resizable-handle{display:none}:-webkit-full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:-ms-fullscreen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:fullscreen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}::-webkit-backdrop{background-color:#000}::backdrop{background-color:#000}::-ms-backdrop{background-color:#000}.is-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.is-grabbing{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.photoviewer-loader{bottom:40px;color:#333;left:0;position:absolute;right:0;text-align:center;top:30px;z-index:2}.photoviewer-loader:before{-webkit-animation:photoviewerLoading 1s linear infinite;animation:photoviewerLoading 1s linear infinite;border:5px solid rgba(0,0,0,.5);border-left-color:hsla(0,0%,100%,.5);border-radius:100%;box-sizing:border-box;height:36px;position:relative;width:36px}.photoviewer-loader:after,.photoviewer-loader:before{content:"";display:inline-block;vertical-align:middle}.photoviewer-loader:after{height:100%;overflow:hidden;width:0}@-webkit-keyframes photoviewerLoading{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}@keyframes photoviewerLoading{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}.mtx-grid-action-button .mat-icon{font-size:18px;height:18px;line-height:18px;width:18px}.mtx-grid-img{border-radius:4px;cursor:pointer;display:block;width:30px}']}]}],H.ctorParameters=function(){return[{type:b.MtxDialog},{type:P}]},H.propDecorators={rowData:[{type:t.Input}],colDef:[{type:t.Input}],data:[{type:t.Input}],summary:[{type:t.Input}]};var A=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}();A.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{padding:8px 16px;position:-webkit-sticky;position:sticky;z-index:1}.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{align-items:center;display:flex;flex-direction:row;padding:4px 0}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{cursor:no-drop;opacity:.35}.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)}"]}]}],A.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 L=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}();L.decorators=[{type:t.Directive,args:[{selector:"[mtx-grid-selectable-cell]"}]}],L.ctorParameters=function(){return[{type:F}]},L.propDecorators={selected:[{type:t.HostBinding,args:["class.selected"]}],matSelectableRowData:[{type:t.Input}],cellSelectionChange:[{type:t.Output}],onClick:[{type:t.HostListener,args:["click",["$event"]]}]};var $=function(e){function t(t,n,o,r){return e.call(this,t,n,o,r)||this}return E(t,e),t.prototype.getColumnCssClass=function(e){return"mat-column-"+e},t}(I.CdkFlexTableResizeStrategy);$.decorators=[{type:t.Injectable}],$.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 B={provide:I.ResizeStrategy,useClass:$},N=[I.ColumnResizeNotifier,I.HeaderRowEventDispatcher,I.ColumnResizeNotifierSource],j=M(N,[I.TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER]),G=M(N,[B]),q={class:"mat-column-resize-table"},Z={class:"mat-column-resize-flex"},U=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return E(t,e),t.prototype.getTableHeight=function(){return this.elementRef.nativeElement.offsetHeight},t}(I.ColumnResize),Y=function(e){function t(t,n,o,r,a){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=o,l.ngZone=r,l.notifier=a,l}return E(t,e),t}(U);Y.decorators=[{type:t.Directive,args:[{selector:"table[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,o,r,a){var l=e.call(this)||this;return l.columnResizeNotifier=t,l.elementRef=n,l.eventDispatcher=o,l.ngZone=r,l.notifier=a,l}return E(t,e),t}(U);K.decorators=[{type:t.Directive,args:[{selector:"mat-table[columnResize]",host:Z,providers:M(G,[{provide:I.ColumnResize,useExisting:K}])}]}],K.ctorParameters=function(){return[{type:I.ColumnResizeNotifier},{type:t.ElementRef},{type:I.HeaderRowEventDispatcher},{type:t.NgZone},{type:I.ColumnResizeNotifierSource}]};var W=function(e){function t(t,n,o,r,a,l,i,s,c,p){var d=e.call(this)||this;return d.columnDef=t,d.columnResize=n,d.directionality=o,d.elementRef=r,d.eventDispatcher=a,d.ngZone=l,d.resizeNotifier=i,d.resizeRef=s,d.styleScheduler=c,d.document=p,d}return E(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);W.decorators=[{type:t.Component,args:[{changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,host:{class:"mat-column-resize-overlay-thumb"},template:""}]}],W.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:D.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 X=function(e){function t(){var t=e.apply(this,M(arguments))||this;return t.minWidthPxInternal=32,t}return E(t,e),t.prototype.getInlineHandleCssClassName=function(){return"mat-resizable-handle"},t.prototype.getOverlayHandleComponentType=function(){return W},t}(I.Resizable);var J={class:"mat-resizable"},Q=["minWidthPx: matResizableMinWidthPx","maxWidthPx: matResizableMaxWidthPx"],ee=function(e){function t(t,n,o,r,a,l,i,s,c,p,d,m,u,g){var h=e.call(this)||this;return h.columnDef=t,h.columnResize=n,h.directionality=o,h.elementRef=a,h.eventDispatcher=l,h.injector=i,h.ngZone=s,h.overlay=c,h.resizeNotifier=p,h.resizeStrategy=d,h.styleScheduler=m,h.viewContainerRef=u,h.changeDetectorRef=g,h.isResizable=!0,h.document=r,h}return E(t,e),Object.defineProperty(t.prototype,"hasResizableClass",{get:function(){return this.isResizable?J.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}(X);ee.decorators=[{type:t.Directive,args:[{selector:"mat-header-cell[resizable], th[mat-header-cell][resizable]",inputs:Q}]}],ee.ctorParameters=function(){return[{type:S.CdkColumnDef},{type:I.ColumnResize},{type:D.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}]},ee.propDecorators={hasResizableClass:[{type:t.HostBinding,args:["class"]}],resizable:[{type:t.Input}]};var te=[W],ne=function(){};ne.decorators=[{type:t.NgModule,args:[{declarations:te,exports:te,entryComponents:te}]}];var oe=[T.OverlayModule,ne],re=function(){};re.decorators=[{type:t.NgModule,args:[{imports:oe,declarations:[Y,K,ee],exports:[Y,K,ee]}]}];var ae=function(){};ae.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,r.MatTableModule,a.MatSortModule,l.MatPaginatorModule,i.MatCheckboxModule,s.MatButtonModule,c.MatProgressBarModule,p.MatChipsModule,d.MatTooltipModule,m.MatIconModule,u.MatSelectModule,g.MatFormFieldModule,h.MatMenuModule,f.DragDropModule,b.MtxDialogModule,x.MtxUtilsModule,re],exports:[F,H,A,V,L,re],declarations:[F,H,A,V,L],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=U,e.AbstractMatResizable=X,e.MAT_FLEX_HOST_BINDINGS=Z,e.MAT_FLEX_PROVIDERS=G,e.MAT_FLEX_RESIZE_STRATEGY_PROVIDER=B,e.MAT_RESIZABLE_HOST_BINDINGS=J,e.MAT_RESIZABLE_INPUTS=Q,e.MAT_TABLE_HOST_BINDINGS=q,e.MAT_TABLE_PROVIDERS=j,e.MatColumnResize=Y,e.MatColumnResizeCommonModule=ne,e.MatColumnResizeFlex=K,e.MatColumnResizeModule=re,e.MatColumnResizeOverlayHandle=W,e.MatFlexTableResizeStrategy=$,e.MatResizable=ee,e.MtxGridCellComponent=H,e.MtxGridCellSelectionDirective=L,e.MtxGridColumnMenuComponent=A,e.MtxGridComponent=F,e.MtxGridExpansionToggleDirective=V,e.MtxGridModule=ae,e.MtxGridService=P,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mtxGrid.umd.min.js.map