@ng-matero/extensions 12.9.1 → 12.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/alert/alert.component.d.ts +1 -1
  2. package/alert/mtxAlert.metadata.json +1 -1
  3. package/bundles/mtxAlert.umd.js +2 -2
  4. package/bundles/mtxAlert.umd.js.map +1 -1
  5. package/bundles/mtxCore.umd.js.map +1 -1
  6. package/bundles/mtxDatetimepicker.umd.js +5 -0
  7. package/bundles/mtxDatetimepicker.umd.js.map +1 -1
  8. package/bundles/mtxFormGroup.umd.js +1 -1
  9. package/bundles/mtxFormGroup.umd.js.map +1 -1
  10. package/bundles/mtxGrid.umd.js +51 -54
  11. package/bundles/mtxGrid.umd.js.map +1 -1
  12. package/bundles/mtxPopover.umd.js +997 -803
  13. package/bundles/mtxPopover.umd.js.map +1 -1
  14. package/bundles/mtxSelect.umd.js +237 -156
  15. package/bundles/mtxSelect.umd.js.map +1 -1
  16. package/core/datetime/datetime-formats.d.ts +2 -0
  17. package/esm2015/alert/alert.component.js +3 -3
  18. package/esm2015/core/datetime/datetime-formats.js +1 -1
  19. package/esm2015/datetimepicker/datetimepicker-input.js +6 -1
  20. package/esm2015/form-group/form-group.component.js +2 -2
  21. package/esm2015/grid/cell.component.js +32 -32
  22. package/esm2015/grid/column-menu.component.js +10 -14
  23. package/esm2015/grid/grid.component.js +12 -7
  24. package/esm2015/popover/popover-animations.js +10 -13
  25. package/esm2015/popover/popover-content.js +99 -0
  26. package/esm2015/popover/popover-interfaces.js +1 -1
  27. package/esm2015/popover/popover-module.js +7 -5
  28. package/esm2015/popover/popover-target.js +3 -3
  29. package/esm2015/popover/popover-trigger.js +210 -172
  30. package/esm2015/popover/popover-types.js +1 -1
  31. package/esm2015/popover/popover.js +173 -125
  32. package/esm2015/popover/public-api.js +2 -1
  33. package/esm2015/select/option.component.js +4 -6
  34. package/esm2015/select/select.component.js +111 -31
  35. package/fesm2015/mtxAlert.js +2 -2
  36. package/fesm2015/mtxAlert.js.map +1 -1
  37. package/fesm2015/mtxCore.js.map +1 -1
  38. package/fesm2015/mtxDatetimepicker.js +5 -0
  39. package/fesm2015/mtxDatetimepicker.js.map +1 -1
  40. package/fesm2015/mtxFormGroup.js +1 -1
  41. package/fesm2015/mtxFormGroup.js.map +1 -1
  42. package/fesm2015/mtxGrid.js +51 -50
  43. package/fesm2015/mtxGrid.js.map +1 -1
  44. package/fesm2015/mtxPopover.js +526 -351
  45. package/fesm2015/mtxPopover.js.map +1 -1
  46. package/fesm2015/mtxSelect.js +169 -92
  47. package/fesm2015/mtxSelect.js.map +1 -1
  48. package/form-group/mtxFormGroup.metadata.json +1 -1
  49. package/grid/cell.component.d.ts +5 -8
  50. package/grid/column-menu.component.d.ts +3 -5
  51. package/grid/grid.component.d.ts +6 -4
  52. package/grid/mtxGrid.metadata.json +1 -1
  53. package/package.json +1 -1
  54. package/popover/mtxPopover.metadata.json +1 -1
  55. package/popover/popover-animations.d.ts +1 -1
  56. package/popover/popover-content.d.ts +38 -0
  57. package/popover/popover-interfaces.d.ts +37 -31
  58. package/popover/popover-target.d.ts +2 -2
  59. package/popover/popover-trigger.d.ts +65 -60
  60. package/popover/popover-types.d.ts +6 -1
  61. package/popover/popover.d.ts +97 -69
  62. package/popover/popover.scss +2 -0
  63. package/popover/public-api.d.ts +1 -0
  64. package/select/mtxSelect.metadata.json +1 -1
  65. package/select/option.component.d.ts +7 -6
  66. package/select/select.component.d.ts +59 -20
package/fesm2015/mtxFormGroup.js CHANGED
@@ -26,7 +26,7 @@ MtxFormGroupComponent.decorators = [
26
26
  host: {
27
27
  class: 'mtx-form-group',
28
28
  },
29
- template: "<div class=\"mtx-form-field-layout mtx-form-field-appearance-fluent\">\r\n <label *ngIf=\"label\"\r\n class=\"mtx-form-label\"\r\n [class.mtx-form-label-marker]=\"showRequiredMarker\">{{label}}</label>\r\n <ng-content></ng-content>\r\n</div>\r\n",
29
+ template: "<div class=\"mtx-form-field-layout mtx-form-field-appearance-fluent\">\r\n <label *ngIf=\"label\" class=\"mtx-form-label\"\r\n [class.mtx-form-label-marker]=\"showRequiredMarker\">{{label}}</label>\r\n <ng-content></ng-content>\r\n</div>\r\n",
30
30
  exportAs: 'mtxFormGroup',
31
31
  encapsulation: ViewEncapsulation.None,
32
32
  changeDetection: ChangeDetectionStrategy.OnPush,
package/fesm2015/mtxFormGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mtxFormGroup.js","sources":["../../../projects/extensions/form-group/form-group.component.ts","../../../projects/extensions/form-group/form-group.module.ts","../../../projects/extensions/form-group/mtxFormGroup.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n Input,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MatFormField } from '@angular/material/form-field';\n\n@Component({\n selector: 'mtx-form-group',\n host: {\n class: 'mtx-form-group',\n },\n templateUrl: './form-group.component.html',\n styleUrls: ['./form-group.component.scss'],\n exportAs: 'mtxFormGroup',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MtxFormGroupComponent implements AfterContentInit {\n @ContentChildren(MatFormField) formFields!: QueryList<MatFormField>;\n\n @Input() label!: string;\n @Input()\n get showRequiredMarker(): boolean {\n return this._showRequiredMarker;\n }\n set showRequiredMarker(value: boolean) {\n this._showRequiredMarker = coerceBooleanProperty(value);\n }\n private _showRequiredMarker = false;\n\n ngAfterContentInit() {\n this.formFields.forEach(item => {\n item.appearance = 'standard';\n });\n }\n\n static ngAcceptInputType_showRequiredMarker: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxFormGroupComponent } from './form-group.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MtxFormGroupComponent],\n declarations: [MtxFormGroupComponent],\n})\nexport class MtxFormGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAuBa,qBAAqB;IAXlC;QAsBU,wBAAmB,GAAG,KAAK,CAAC;KASrC;IAhBC,IACI,kBAAkB;QACpB,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IACD,IAAI,kBAAkB,CAAC,KAAc;QACnC,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACzD;IAGD,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC1B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;SAC9B,CAAC,CAAC;KACJ;;;;YA5BF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,KAAK,EAAE,gBAAgB;iBACxB;gBACD,mRAA0C;gBAE1C,QAAQ,EAAE,cAAc;gBACxB,aAAa,EAAE,iBAAiB,CAAC,IAAI;gBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;yBAEE,eAAe,SAAC,YAAY;oBAE5B,KAAK;iCACL,KAAK;;;MCjBK,kBAAkB;;;;YAL9B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;gBAChC,YAAY,EAAE,CAAC,qBAAqB,CAAC;aACtC;;;ACTD;;;;;;"}
1
+ {"version":3,"file":"mtxFormGroup.js","sources":["../../../projects/extensions/form-group/form-group.component.ts","../../../projects/extensions/form-group/form-group.module.ts","../../../projects/extensions/form-group/mtxFormGroup.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n Input,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MatFormField } from '@angular/material/form-field';\n\n@Component({\n selector: 'mtx-form-group',\n host: {\n class: 'mtx-form-group',\n },\n templateUrl: './form-group.component.html',\n styleUrls: ['./form-group.component.scss'],\n exportAs: 'mtxFormGroup',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MtxFormGroupComponent implements AfterContentInit {\n @ContentChildren(MatFormField) formFields!: QueryList<MatFormField>;\n\n @Input() label!: string;\n\n @Input()\n get showRequiredMarker(): boolean {\n return this._showRequiredMarker;\n }\n set showRequiredMarker(value: boolean) {\n this._showRequiredMarker = coerceBooleanProperty(value);\n }\n private _showRequiredMarker = false;\n\n ngAfterContentInit() {\n this.formFields.forEach(item => {\n item.appearance = 'standard';\n });\n }\n\n static ngAcceptInputType_showRequiredMarker: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxFormGroupComponent } from './form-group.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MtxFormGroupComponent],\n declarations: [MtxFormGroupComponent],\n})\nexport class MtxFormGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAuBa,qBAAqB;IAXlC;QAuBU,wBAAmB,GAAG,KAAK,CAAC;KASrC;IAhBC,IACI,kBAAkB;QACpB,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IACD,IAAI,kBAAkB,CAAC,KAAc;QACnC,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACzD;IAGD,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC1B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;SAC9B,CAAC,CAAC;KACJ;;;;YA7BF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,KAAK,EAAE,gBAAgB;iBACxB;gBACD,uQAA0C;gBAE1C,QAAQ,EAAE,cAAc;gBACxB,aAAa,EAAE,iBAAiB,CAAC,IAAI;gBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;yBAEE,eAAe,SAAC,YAAY;oBAE5B,KAAK;iCAEL,KAAK;;;MClBK,kBAAkB;;;;YAL9B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;gBAChC,YAAY,EAAE,CAAC,qBAAqB,CAAC;aACtC;;;ACTD;;;;;;"}
package/fesm2015/mtxGrid.js CHANGED
@@ -79,11 +79,14 @@ class MtxGridComponent {
79
79
  this._dataGridSrv = _dataGridSrv;
80
80
  this._changeDetectorRef = _changeDetectorRef;
81
81
  this.dataSource = new MatTableDataSource();
82
+ this.displayedColumns = [];
82
83
  this.columns = [];
83
84
  this.data = [];
84
85
  this.length = 0;
85
86
  this.loading = false;
86
87
  this.columnResizable = false;
88
+ /** Placeholder for the empty value (`null`, `''`, `[]`) */
89
+ this.emptyValuePlaceholder = '--';
87
90
  // ===== Page =====
88
91
  this.pageOnFront = true;
89
92
  this.showPaginator = true;
@@ -255,11 +258,11 @@ class MtxGridComponent {
255
258
  _getIndex(index, dataIndex) {
256
259
  return typeof index === 'undefined' ? dataIndex : index;
257
260
  }
258
- _handleSortChange(sort) {
261
+ _onSortChange(sort) {
259
262
  this.sortChange.emit(sort);
260
263
  }
261
264
  /** Expansion change event */
262
- _handleExpansionChange(expansionRef, rowData, column, index) {
265
+ _onExpansionChange(expansionRef, rowData, column, index) {
263
266
  this.expansionChange.emit({ expanded: expansionRef.expanded, data: rowData, index, column });
264
267
  }
265
268
  /** Cell select event */
@@ -314,7 +317,7 @@ class MtxGridComponent {
314
317
  this.rowSelectionChange.emit(this.rowSelection.selected);
315
318
  }
316
319
  /** Column change event */
317
- _handleColumnChange(columns) {
320
+ _onColumnChange(columns) {
318
321
  this.columnChange.emit(columns);
319
322
  this.displayedColumns = Object.assign([], this.getDisplayedColumnFields(columns));
320
323
  if (this.rowSelectable && !this.hideRowSelectionCheckbox) {
@@ -336,7 +339,7 @@ class MtxGridComponent {
336
339
  return this.expansionRowStates[index].expanded;
337
340
  }
338
341
  /** Scroll to top when turn to the next page. */
339
- _handlePage(e) {
342
+ _onPage(e) {
340
343
  if (this.pageOnFront) {
341
344
  this.scrollTop(0);
342
345
  }
@@ -366,7 +369,7 @@ MtxGridComponent.decorators = [
366
369
  { type: Component, args: [{
367
370
  selector: 'mtx-grid',
368
371
  exportAs: 'mtxGrid',
369
- template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n <div class=\"mtx-grid-toolbar-content\">\r\n <ng-template [ngIf]=\"_isTemplateRef(toolbarTemplate)\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultToolbarTemplate>\r\n <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"mtx-grid-toolbar-actions\">\r\n <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n [columns]=\"columns\"\r\n [buttonText]=\"columnMenuButtonText\"\r\n [buttonType]=\"columnMenuButtonType\"\r\n [buttonColor]=\"columnMenuButtonColor\"\r\n [buttonClass]=\"columnMenuButtonClass\"\r\n [buttonIcon]=\"columnMenuButtonIcon\"\r\n [selectable]=\"columnHideable\"\r\n [selectableChecked]=\"columnHideableChecked\"\r\n (selectionChange)=\"_handleColumnChange($event)\"\r\n [sortable]=\"columnSortable\"\r\n (sortChange)=\"_handleColumnChange($event)\"\r\n [pinnable]=\"columnPinnable\"\r\n (pinChange)=\"_handleColumnChange($event)\"\r\n [showHeader]=\"showColumnMenuHeader\"\r\n [headerText]=\"columnMenuHeaderText\"\r\n [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n [showFooter]=\"showColumnMenuFooter\"\r\n [footerText]=\"columnMenuFooterText\"\r\n [footerTemplate]=\"columnMenuFooterTemplate\"\r\n [pinOptions]=\"columnPinOptions\">\r\n </mtx-grid-column-menu>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n <!-- Table content -->\r\n <div class=\"mtx-grid-content mtx-grid-layout\">\r\n <div #tableContainer class=\"mat-table-container\"\r\n [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n <table mat-table *ngIf=\"!columnResizable\"\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_handleSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [disableClear]=\"col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n <!-- TODO: Use flexbox-based mat-table -->\r\n <table mat-table *ngIf=\"columnResizable\"\r\n columnResize\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_handleSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n [resizable]=\"col.resizable\"\r\n [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [disableClear]=\"col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n\r\n <!-- No result -->\r\n <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n <ng-template [ngIf]=\"_isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tool sidebar -->\r\n <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n <ng-template [ngIf]=\"_isTemplateRef(sidebarTemplate)\">\r\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n <!-- Status Bar -->\r\n <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n <ng-template [ngIf]=\"_isTemplateRef(statusbarTemplate)\">\r\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"mtx-grid-pagination\">\r\n <ng-template [ngIf]=\"_isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultPaginationTemplate>\r\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator || _hasNoResult\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_handlePage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n </mat-paginator>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerExtraTemplate)\" [ngIfElse]=\"headerExtraTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerExtraTpl>\r\n <ng-template [ngIf]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n</ng-template>\r\n",
372
+ template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n <div class=\"mtx-grid-toolbar-content\">\r\n <ng-template [ngIf]=\"_isTemplateRef(toolbarTemplate)\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultToolbarTemplate>\r\n <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"mtx-grid-toolbar-actions\">\r\n <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n [columns]=\"columns\"\r\n [buttonText]=\"columnMenuButtonText\"\r\n [buttonType]=\"columnMenuButtonType\"\r\n [buttonColor]=\"columnMenuButtonColor\"\r\n [buttonClass]=\"columnMenuButtonClass\"\r\n [buttonIcon]=\"columnMenuButtonIcon\"\r\n [selectable]=\"columnHideable\"\r\n [selectableChecked]=\"columnHideableChecked\"\r\n [sortable]=\"columnSortable\"\r\n [pinnable]=\"columnPinnable\"\r\n [showHeader]=\"showColumnMenuHeader\"\r\n [headerText]=\"columnMenuHeaderText\"\r\n [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n [showFooter]=\"showColumnMenuFooter\"\r\n [footerText]=\"columnMenuFooterText\"\r\n [footerTemplate]=\"columnMenuFooterTemplate\"\r\n [pinOptions]=\"columnPinOptions\"\r\n (columnChange)=\"_onColumnChange($event)\">\r\n </mtx-grid-column-menu>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n <!-- Table content -->\r\n <div class=\"mtx-grid-content mtx-grid-layout\">\r\n <div #tableContainer class=\"mat-table-container\"\r\n [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n <table mat-table *ngIf=\"!columnResizable\"\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_onSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [disableClear]=\"col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\">\r\n </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 [placeholder]=\"emptyValuePlaceholder\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n <!-- TODO: Use flexbox-based mat-table -->\r\n <table mat-table *ngIf=\"columnResizable\"\r\n columnResize\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_onSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n [resizable]=\"col.resizable\"\r\n [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [disableClear]=\"col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class!\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\">\r\n </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 [placeholder]=\"emptyValuePlaceholder\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n\r\n <!-- No result -->\r\n <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n <ng-template [ngIf]=\"_isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tool sidebar -->\r\n <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n <ng-template [ngIf]=\"_isTemplateRef(sidebarTemplate)\">\r\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n <!-- Status Bar -->\r\n <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n <ng-template [ngIf]=\"_isTemplateRef(statusbarTemplate)\">\r\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"mtx-grid-pagination\">\r\n <ng-template [ngIf]=\"_isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultPaginationTemplate>\r\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator || _hasNoResult\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_onPage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n </mat-paginator>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n <ng-template [ngIf]=\"_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",
370
373
  host: {
371
374
  class: 'mtx-grid',
372
375
  },
@@ -374,9 +377,10 @@ MtxGridComponent.decorators = [
374
377
  changeDetection: ChangeDetectionStrategy.OnPush,
375
378
  animations: [
376
379
  trigger('expansion', [
377
- state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
380
+ state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
378
381
  state('expanded', style({ height: '*', visibility: 'visible' })),
379
382
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
383
+ transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
380
384
  ]),
381
385
  ],
382
386
  styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-table:not(.mat-column-resize-table) .mat-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-width:1px;border-right-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left-width:1px;border-left-style:solid}.mtx-grid .mat-table-sticky-right{border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid .mat-header-cell,.mtx-grid .mat-footer-cell,.mtx-grid .mat-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-row.mtx-grid-expansion .mat-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-row.mtx-grid-expansion.collapsed .mat-cell{border-bottom-width:0}.mtx-grid .mat-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin:0 4px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mat-icon-button i,.mtx-grid .mat-icon-button .mat-icon{line-height:20px}.mtx-grid .mat-icon{width:20px;height:20px;font-size:20px}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px;box-sizing:border-box}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:56px;min-width:56px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mtx-grid-row-expand-button{width:32px;height:32px;line-height:32px}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"]
@@ -410,6 +414,7 @@ MtxGridComponent.propDecorators = {
410
414
  loading: [{ type: Input }],
411
415
  trackBy: [{ type: Input }],
412
416
  columnResizable: [{ type: Input }],
417
+ emptyValuePlaceholder: [{ type: Input }],
413
418
  pageOnFront: [{ type: Input }],
414
419
  showPaginator: [{ type: Input }],
415
420
  pageDisabled: [{ type: Input }],
@@ -486,20 +491,16 @@ class MtxGridCellComponent {
486
491
  this._dataGridSrv = _dataGridSrv;
487
492
  /** Row data */
488
493
  this.rowData = {};
489
- /** All data */
494
+ /** Table data */
490
495
  this.data = [];
491
496
  /** Whether show summary */
492
497
  this.summary = false;
498
+ /** Placeholder for the empty value (`null`, `''`, `[]`) */
499
+ this.placeholder = '--';
493
500
  }
494
501
  get _colValue() {
495
502
  return this._dataGridSrv.getCellValue(this.rowData, this.colDef);
496
503
  }
497
- _isString(fn) {
498
- return Object.prototype.toString.call(fn) === '[object String]';
499
- }
500
- _isFunction(fn) {
501
- return Object.prototype.toString.call(fn) === '[object Function]';
502
- }
503
504
  _isEmptyValue(value) {
504
505
  return value == null || value.toString() === '';
505
506
  }
@@ -507,7 +508,7 @@ class MtxGridCellComponent {
507
508
  return /<\/?[a-z][\s\S]*>/i.test(value);
508
509
  }
509
510
  _getText(value) {
510
- return this._isEmptyValue(value) ? '--' : value;
511
+ return value === undefined ? '' : this._isEmptyValue(value) ? this.placeholder : value;
511
512
  }
512
513
  _getTooltip(value) {
513
514
  return this._isEmptyValue(value) ? '' : value;
@@ -516,34 +517,37 @@ class MtxGridCellComponent {
516
517
  return this._isContainHTML(value) || this._isEmptyValue(value) ? '' : value;
517
518
  }
518
519
  _formatSummary(data, colDef) {
519
- if (this._isString(colDef.summary)) {
520
+ if (typeof colDef.summary === 'string') {
520
521
  return colDef.summary;
521
522
  }
522
- else if (this._isFunction(colDef.summary)) {
523
+ else if (typeof colDef.summary === 'function') {
523
524
  return colDef.summary(this._dataGridSrv.getColData(data, colDef), colDef);
524
525
  }
525
526
  }
526
- _handleActionConfirm(event, title, description = '', okColor = 'primary', okText = 'OK', closeColor, closeText = 'CLOSE', fn, data) {
527
- event.preventDefault();
528
- event.stopPropagation();
529
- this._dialog.open({
530
- title,
531
- description,
532
- buttons: [
533
- {
534
- color: okColor,
535
- text: okText,
536
- onClick: () => (fn ? fn(data) : {}),
537
- },
538
- { color: closeColor, text: closeText, onClick: () => { } },
539
- ],
540
- });
541
- }
542
527
  _handleActionClick(event, btn, rowData) {
528
+ var _a;
543
529
  event.preventDefault();
544
530
  event.stopPropagation();
545
- if (btn.click) {
546
- btn.click(rowData);
531
+ if (btn.pop) {
532
+ this._dialog.open({
533
+ title: btn.popTitle,
534
+ description: btn.popDescription,
535
+ buttons: [
536
+ {
537
+ color: btn.popOkColor || 'primary',
538
+ text: btn.popOkText || 'OK',
539
+ onClick: () => { var _a; return ((_a = btn.click) === null || _a === void 0 ? void 0 : _a.call(btn, rowData)) || {}; },
540
+ },
541
+ {
542
+ color: btn.popCloseColor,
543
+ text: btn.popCloseText || 'CLOSE',
544
+ onClick: () => { },
545
+ },
546
+ ],
547
+ });
548
+ }
549
+ else {
550
+ (_a = btn.click) === null || _a === void 0 ? void 0 : _a.call(btn, rowData);
547
551
  }
548
552
  }
549
553
  /** Preview enlarged image */
@@ -559,7 +563,7 @@ class MtxGridCellComponent {
559
563
  title: imgs.length > 1,
560
564
  footerToolbar,
561
565
  };
562
- const viewer = new PhotoViewer(imgs, options);
566
+ const photoviewer = new PhotoViewer(imgs, options);
563
567
  }
564
568
  }
565
569
  /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
@@ -567,7 +571,7 @@ MtxGridCellComponent.decorators = [
567
571
  { type: Component, args: [{
568
572
  selector: 'mtx-grid-cell',
569
573
  exportAs: 'mtxGridCell',
570
- template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n [innerHTML]=\"_getText(_formatSummary(data, colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n <ng-container [ngSwitch]=\"colDef.type\">\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n {{colDef.tag[_colValue].text}}\r\n </mat-chip>\r\n </mat-chip-list>\r\n <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n </ng-container>\r\n <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <ng-container *ngIf=\"btn.pop; else btnDefaultTpl\">\r\n <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n *ngIf=\"btn.type==='basic'\"\r\n mat-button\r\n [color]=\"btn.color || 'primary'\"\r\n [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n btn.popOkColor, btn.popOkText,\r\n btn.popCloseColor, btn.popCloseText,\r\n btn.click, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n <span>{{btn.text | toObservable | async}}</span>\r\n </button>\r\n <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n *ngIf=\"!btn.type || btn.type==='icon'\"\r\n mat-icon-button\r\n [color]=\"btn.color || 'primary'\"\r\n [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionConfirm($event, btn.popTitle!, btn.popDescription,\r\n btn.popOkColor, btn.popOkText,\r\n btn.popCloseColor, btn.popCloseText,\r\n btn.click, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #btnDefaultTpl>\r\n <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n *ngIf=\"btn.type==='basic'\"\r\n mat-button\r\n [color]=\"btn.color || 'primary'\"\r\n [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionClick($event, btn, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n <span>{{btn.text | toObservable | async}}</span>\r\n </button>\r\n <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n *ngIf=\"!btn.type || btn.type==='icon'\"\r\n mat-icon-button\r\n [color]=\"btn.color || 'primary'\"\r\n [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionClick($event, btn, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span\r\n [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Currency -->\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <span\r\n [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode : colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n colDef.typeParameter?.display : colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Percent -->\r\n <ng-container *ngSwitchCase=\"'percent'\">\r\n <span\r\n [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo : colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <span\r\n [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone : colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | date: colDef.typeParameter?.format : colDef.typeParameter?.timezone :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Default -->\r\n <ng-container *ngSwitchDefault>\r\n <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n",
574
+ template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n [innerHTML]=\"_getText(_formatSummary(data, colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n <ng-container [ngSwitch]=\"colDef.type\">\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n {{colDef.tag[_colValue].text}}\r\n </mat-chip>\r\n </mat-chip-list>\r\n <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n </ng-container>\r\n <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n *ngIf=\"btn.type==='basic'\"\r\n mat-button\r\n [color]=\"btn.color || 'primary'\"\r\n [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionClick($event, btn, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n <span>{{btn.text | toObservable | async}}</span>\r\n </button>\r\n <button [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n *ngIf=\"!btn.type || btn.type==='icon'\"\r\n mat-icon-button\r\n [color]=\"btn.color || 'primary'\"\r\n [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionClick($event, btn, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Currency -->\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <span [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n colDef.typeParameter?.display :\r\n colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n colDef.typeParameter?.display :\r\n colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Percent -->\r\n <ng-container *ngSwitchCase=\"'percent'\">\r\n <span [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <span [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format :\r\n colDef.typeParameter?.timezone :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | date: colDef.typeParameter?.format :\r\n colDef.typeParameter?.timezone :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Default -->\r\n <ng-container *ngSwitchDefault>\r\n <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n",
571
575
  encapsulation: ViewEncapsulation.None,
572
576
  styles: [".mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}\n"]
573
577
  },] }
@@ -588,7 +592,8 @@ MtxGridCellComponent.propDecorators = {
588
592
  rowData: [{ type: Input }],
589
593
  colDef: [{ type: Input }],
590
594
  data: [{ type: Input }],
591
- summary: [{ type: Input }]
595
+ summary: [{ type: Input }],
596
+ placeholder: [{ type: Input }]
592
597
  };
593
598
 
594
599
  class MtxGridColumnMenuComponent {
@@ -606,9 +611,7 @@ class MtxGridColumnMenuComponent {
606
611
  this.headerText = 'Columns Header';
607
612
  this.showFooter = false;
608
613
  this.footerText = 'Columns Footer';
609
- this.selectionChange = new EventEmitter();
610
- this.sortChange = new EventEmitter();
611
- this.pinChange = new EventEmitter();
614
+ this.columnChange = new EventEmitter();
612
615
  this._pinOptions = [
613
616
  { label: 'Pin Left', value: 'left' },
614
617
  { label: 'Pin Right', value: 'right' },
@@ -630,17 +633,17 @@ class MtxGridColumnMenuComponent {
630
633
  this._pinOptions = value;
631
634
  }
632
635
  }
633
- _handleDroped(event) {
634
- moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
635
- this.sortChange.emit(this.columns);
636
+ _handleDroped(e) {
637
+ moveItemInArray(this.columns, e.previousIndex, e.currentIndex);
638
+ this.columnChange.emit(this.columns);
636
639
  }
637
- _handleSelection(e) {
638
- this.selectionChange.emit(this.columns);
640
+ _handleChecked(e) {
641
+ this.columnChange.emit(this.columns);
639
642
  }
640
643
  _handlePinSelect(col, val) {
641
644
  if (col.pinned != val) {
642
645
  col.pinned = val;
643
- this.pinChange.emit(this.columns);
646
+ this.columnChange.emit(this.columns);
644
647
  }
645
648
  }
646
649
  }
@@ -649,7 +652,7 @@ MtxGridColumnMenuComponent.decorators = [
649
652
  { type: Component, args: [{
650
653
  selector: 'mtx-grid-column-menu',
651
654
  exportAs: 'mtxGridColumnMenu',
652
- template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n </path>\r\n </svg>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <ng-container *ngIf=\"pinnable\">\r\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button [matMenuTriggerFor]=\"pinList\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n </svg>\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n </svg>\r\n </button>\r\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n <button class=\"mtx-grid-column-pin-option\" *ngFor=\"let item of pinOptions\" mat-menu-item\r\n (click)=\"_handlePinSelect(col, item.value)\">\r\n <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n </span>\r\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n (change)=\"_handleSelection($event)\">\r\n {{col.header | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.header | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n",
655
+ template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"sortable\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\">\r\n </path>\r\n </svg>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <ng-container *ngIf=\"pinnable\">\r\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button [matMenuTriggerFor]=\"pinList\">\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\" *ngIf=\"col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\r\n </svg>\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\" *ngIf=\"!col.pinned\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path\r\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\r\n </svg>\r\n </button>\r\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\r\n <button class=\"mtx-grid-column-pin-option\" *ngFor=\"let item of pinOptions\" mat-menu-item\r\n (click)=\"_handlePinSelect(col, item.value)\">\r\n <span class=\"mtx-grid-column-pin-option-placeholder\">\r\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\r\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\" *ngIf=\"col.pinned==item.value\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n </span>\r\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\" *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\r\n (change)=\"_handleChecked($event)\">\r\n {{col.header | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.header | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n",
653
656
  encapsulation: ViewEncapsulation.None,
654
657
  changeDetection: ChangeDetectionStrategy.OnPush,
655
658
  styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:8px 16px}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-icon-button{width:32px;height:32px;line-height:32px}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px}.mtx-grid-column-pin-option-text{padding:0 8px}.mtx-grid-column-drag-handle-icon:hover{cursor:move}\n"]
@@ -675,9 +678,7 @@ MtxGridColumnMenuComponent.propDecorators = {
675
678
  showFooter: [{ type: Input }],
676
679
  footerText: [{ type: Input }],
677
680
  footerTemplate: [{ type: Input }],
678
- selectionChange: [{ type: Output }],
679
- sortChange: [{ type: Output }],
680
- pinChange: [{ type: Output }],
681
+ columnChange: [{ type: Output }],
681
682
  pinOptions: [{ type: Input }]
682
683
  };
683
684