@ng-matero/extensions 15.4.2 → 15.5.1

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 (32) hide show
  1. package/core/mdc-helpers/_mdc-helpers.scss +242 -0
  2. package/esm2020/grid/grid.mjs +8 -3
  3. package/esm2020/grid/interfaces.mjs +1 -1
  4. package/esm2020/select/select.mjs +2 -2
  5. package/esm2020/tooltip/tooltip-animations.mjs +9 -11
  6. package/esm2020/tooltip/tooltip-module.mjs +4 -4
  7. package/esm2020/tooltip/tooltip.mjs +437 -183
  8. package/fesm2015/mtxGrid.mjs +27 -22
  9. package/fesm2015/mtxGrid.mjs.map +1 -1
  10. package/fesm2015/mtxSelect.mjs +2 -2
  11. package/fesm2015/mtxSelect.mjs.map +1 -1
  12. package/fesm2015/mtxTooltip.mjs +466 -203
  13. package/fesm2015/mtxTooltip.mjs.map +1 -1
  14. package/fesm2020/mtxGrid.mjs +7 -2
  15. package/fesm2020/mtxGrid.mjs.map +1 -1
  16. package/fesm2020/mtxSelect.mjs +2 -2
  17. package/fesm2020/mtxSelect.mjs.map +1 -1
  18. package/fesm2020/mtxTooltip.mjs +455 -203
  19. package/fesm2020/mtxTooltip.mjs.map +1 -1
  20. package/grid/grid.d.ts +3 -1
  21. package/grid/interfaces.d.ts +1 -0
  22. package/package.json +1 -1
  23. package/prebuilt-themes/deeppurple-amber.css +1 -1
  24. package/prebuilt-themes/indigo-pink.css +1 -1
  25. package/prebuilt-themes/pink-bluegrey.css +1 -1
  26. package/prebuilt-themes/purple-green.css +1 -1
  27. package/select/select.scss +0 -7
  28. package/tooltip/_tooltip-theme.import.scss +1 -3
  29. package/tooltip/_tooltip-theme.scss +26 -29
  30. package/tooltip/tooltip-animations.d.ts +2 -2
  31. package/tooltip/tooltip.d.ts +130 -48
  32. package/tooltip/tooltip.scss +91 -27
package/fesm2015/mtxGrid.mjs CHANGED
@@ -725,7 +725,7 @@ class MtxGrid {
725
725
  return this.showSummary;
726
726
  }
727
727
  constructor(_utils, _changeDetectorRef, _defaultOptions) {
728
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56;
728
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58;
729
729
  this._utils = _utils;
730
730
  this._changeDetectorRef = _changeDetectorRef;
731
731
  this._defaultOptions = _defaultOptions;
@@ -809,6 +809,8 @@ class MtxGrid {
809
809
  this.rowSelectable = (_17 = (_16 = this._defaultOptions) === null || _16 === void 0 ? void 0 : _16.rowSelectable) !== null && _17 !== void 0 ? _17 : false;
810
810
  /** Whether to hide the row selection checkbox. */
811
811
  this.hideRowSelectionCheckbox = (_19 = (_18 = this._defaultOptions) === null || _18 === void 0 ? void 0 : _18.hideRowSelectionCheckbox) !== null && _19 !== void 0 ? _19 : false;
812
+ /** Whether disable rows to be selected when clicked. */
813
+ this.disableRowClickSelection = (_21 = (_20 = this._defaultOptions) === null || _20 === void 0 ? void 0 : _20.disableRowClickSelection) !== null && _21 !== void 0 ? _21 : false;
812
814
  /** The formatter to disable the row selection or hide the row's checkbox. */
813
815
  this.rowSelectionFormatter = {};
814
816
  /** Event emitted when the row is selected. */
@@ -816,50 +818,50 @@ class MtxGrid {
816
818
  // ===== Cell Selection =====
817
819
  this.cellSelection = [];
818
820
  /** Whether the cell is selectable. */
819
- this.cellSelectable = (_21 = (_20 = this._defaultOptions) === null || _20 === void 0 ? void 0 : _20.cellSelectable) !== null && _21 !== void 0 ? _21 : true;
821
+ this.cellSelectable = (_23 = (_22 = this._defaultOptions) === null || _22 === void 0 ? void 0 : _22.cellSelectable) !== null && _23 !== void 0 ? _23 : true;
820
822
  /** Event emitted when the cell is selected. */
821
823
  this.cellSelectionChange = new EventEmitter();
822
824
  // ===== Toolbar =====
823
825
  /** Whether to show the toolbar. */
824
- this.showToolbar = (_23 = (_22 = this._defaultOptions) === null || _22 === void 0 ? void 0 : _22.showToolbar) !== null && _23 !== void 0 ? _23 : false;
826
+ this.showToolbar = (_25 = (_24 = this._defaultOptions) === null || _24 === void 0 ? void 0 : _24.showToolbar) !== null && _25 !== void 0 ? _25 : false;
825
827
  /** The text of the toolbar's title. */
826
- this.toolbarTitle = (_25 = (_24 = this._defaultOptions) === null || _24 === void 0 ? void 0 : _24.toolbarTitle) !== null && _25 !== void 0 ? _25 : '';
828
+ this.toolbarTitle = (_27 = (_26 = this._defaultOptions) === null || _26 === void 0 ? void 0 : _26.toolbarTitle) !== null && _27 !== void 0 ? _27 : '';
827
829
  // ===== Column Menu =====
828
830
  /** Whether the column is hideable. */
829
- this.columnHideable = (_27 = (_26 = this._defaultOptions) === null || _26 === void 0 ? void 0 : _26.columnHideable) !== null && _27 !== void 0 ? _27 : true;
831
+ this.columnHideable = (_29 = (_28 = this._defaultOptions) === null || _28 === void 0 ? void 0 : _28.columnHideable) !== null && _29 !== void 0 ? _29 : true;
830
832
  /** Hide or show when the column's checkbox is checked. */
831
- this.columnHideableChecked = (_29 = (_28 = this._defaultOptions) === null || _28 === void 0 ? void 0 : _28.columnHideableChecked) !== null && _29 !== void 0 ? _29 : 'show';
833
+ this.columnHideableChecked = (_31 = (_30 = this._defaultOptions) === null || _30 === void 0 ? void 0 : _30.columnHideableChecked) !== null && _31 !== void 0 ? _31 : 'show';
832
834
  /** Whether the column is sortable. */
833
- this.columnSortable = (_31 = (_30 = this._defaultOptions) === null || _30 === void 0 ? void 0 : _30.columnSortable) !== null && _31 !== void 0 ? _31 : true;
835
+ this.columnSortable = (_33 = (_32 = this._defaultOptions) === null || _32 === void 0 ? void 0 : _32.columnSortable) !== null && _33 !== void 0 ? _33 : true;
834
836
  /** Whether the column is pinnable. */
835
- this.columnPinnable = (_33 = (_32 = this._defaultOptions) === null || _32 === void 0 ? void 0 : _32.columnPinnable) !== null && _33 !== void 0 ? _33 : true;
837
+ this.columnPinnable = (_35 = (_34 = this._defaultOptions) === null || _34 === void 0 ? void 0 : _34.columnPinnable) !== null && _35 !== void 0 ? _35 : true;
836
838
  /** Event emitted when the column is hided or is sorted. */
837
839
  this.columnChange = new EventEmitter();
838
840
  /** The options for the column pin list. */
839
- this.columnPinOptions = (_35 = (_34 = this._defaultOptions) === null || _34 === void 0 ? void 0 : _34.columnPinOptions) !== null && _35 !== void 0 ? _35 : [];
841
+ this.columnPinOptions = (_37 = (_36 = this._defaultOptions) === null || _36 === void 0 ? void 0 : _36.columnPinOptions) !== null && _37 !== void 0 ? _37 : [];
840
842
  /** Whether to show the column menu button. */
841
- this.showColumnMenuButton = (_37 = (_36 = this._defaultOptions) === null || _36 === void 0 ? void 0 : _36.showColumnMenuButton) !== null && _37 !== void 0 ? _37 : true;
843
+ this.showColumnMenuButton = (_39 = (_38 = this._defaultOptions) === null || _38 === void 0 ? void 0 : _38.showColumnMenuButton) !== null && _39 !== void 0 ? _39 : true;
842
844
  /** The text for the column menu button. */
843
- this.columnMenuButtonText = (_39 = (_38 = this._defaultOptions) === null || _38 === void 0 ? void 0 : _38.columnMenuButtonText) !== null && _39 !== void 0 ? _39 : '';
845
+ this.columnMenuButtonText = (_41 = (_40 = this._defaultOptions) === null || _40 === void 0 ? void 0 : _40.columnMenuButtonText) !== null && _41 !== void 0 ? _41 : '';
844
846
  /** The type for the column menu button. */
845
- this.columnMenuButtonType = (_41 = (_40 = this._defaultOptions) === null || _40 === void 0 ? void 0 : _40.columnMenuButtonType) !== null && _41 !== void 0 ? _41 : 'stroked';
847
+ this.columnMenuButtonType = (_43 = (_42 = this._defaultOptions) === null || _42 === void 0 ? void 0 : _42.columnMenuButtonType) !== null && _43 !== void 0 ? _43 : 'stroked';
846
848
  /** The color for the column menu button. */
847
- this.columnMenuButtonColor = (_42 = this._defaultOptions) === null || _42 === void 0 ? void 0 : _42.columnMenuButtonColor;
849
+ this.columnMenuButtonColor = (_44 = this._defaultOptions) === null || _44 === void 0 ? void 0 : _44.columnMenuButtonColor;
848
850
  /** The class for the column menu button. */
849
- this.columnMenuButtonClass = (_44 = (_43 = this._defaultOptions) === null || _43 === void 0 ? void 0 : _43.columnMenuButtonClass) !== null && _44 !== void 0 ? _44 : '';
851
+ this.columnMenuButtonClass = (_46 = (_45 = this._defaultOptions) === null || _45 === void 0 ? void 0 : _45.columnMenuButtonClass) !== null && _46 !== void 0 ? _46 : '';
850
852
  /** The icon for the column menu button. */
851
- this.columnMenuButtonIcon = (_46 = (_45 = this._defaultOptions) === null || _45 === void 0 ? void 0 : _45.columnMenuButtonIcon) !== null && _46 !== void 0 ? _46 : '';
853
+ this.columnMenuButtonIcon = (_48 = (_47 = this._defaultOptions) === null || _47 === void 0 ? void 0 : _47.columnMenuButtonIcon) !== null && _48 !== void 0 ? _48 : '';
852
854
  /** Whether to show the column-menu's header. */
853
- this.showColumnMenuHeader = (_48 = (_47 = this._defaultOptions) === null || _47 === void 0 ? void 0 : _47.showColumnMenuHeader) !== null && _48 !== void 0 ? _48 : false;
855
+ this.showColumnMenuHeader = (_50 = (_49 = this._defaultOptions) === null || _49 === void 0 ? void 0 : _49.showColumnMenuHeader) !== null && _50 !== void 0 ? _50 : false;
854
856
  /** The text for the column-menu's header. */
855
- this.columnMenuHeaderText = (_50 = (_49 = this._defaultOptions) === null || _49 === void 0 ? void 0 : _49.columnMenuHeaderText) !== null && _50 !== void 0 ? _50 : 'Columns Header';
857
+ this.columnMenuHeaderText = (_52 = (_51 = this._defaultOptions) === null || _51 === void 0 ? void 0 : _51.columnMenuHeaderText) !== null && _52 !== void 0 ? _52 : 'Columns Header';
856
858
  /** Whether to show the the column-menu's footer. */
857
- this.showColumnMenuFooter = (_52 = (_51 = this._defaultOptions) === null || _51 === void 0 ? void 0 : _51.showColumnMenuFooter) !== null && _52 !== void 0 ? _52 : false;
859
+ this.showColumnMenuFooter = (_54 = (_53 = this._defaultOptions) === null || _53 === void 0 ? void 0 : _53.showColumnMenuFooter) !== null && _54 !== void 0 ? _54 : false;
858
860
  /** The text for the column-menu's footer. */
859
- this.columnMenuFooterText = (_54 = (_53 = this._defaultOptions) === null || _53 === void 0 ? void 0 : _53.columnMenuFooterText) !== null && _54 !== void 0 ? _54 : 'Columns Footer';
861
+ this.columnMenuFooterText = (_56 = (_55 = this._defaultOptions) === null || _55 === void 0 ? void 0 : _55.columnMenuFooterText) !== null && _56 !== void 0 ? _56 : 'Columns Footer';
860
862
  // ===== No Result =====
861
863
  /** The displayed text for the empty data. */
862
- this.noResultText = (_56 = (_55 = this._defaultOptions) === null || _55 === void 0 ? void 0 : _55.noResultText) !== null && _56 !== void 0 ? _56 : 'No records found';
864
+ this.noResultText = (_58 = (_57 = this._defaultOptions) === null || _57 === void 0 ? void 0 : _57.noResultText) !== null && _58 !== void 0 ? _58 : 'No records found';
863
865
  // ===== Row Templates =====
864
866
  /** Whether to use custom row template. If true, you should define a matRowDef. */
865
867
  this.useContentRowTemplate = false;
@@ -984,7 +986,8 @@ class MtxGrid {
984
986
  var _a, _b, _c, _d;
985
987
  if (this.rowSelectable &&
986
988
  !((_b = (_a = this.rowSelectionFormatter).disabled) === null || _b === void 0 ? void 0 : _b.call(_a, rowData, index)) &&
987
- !((_d = (_c = this.rowSelectionFormatter).hideCheckbox) === null || _d === void 0 ? void 0 : _d.call(_c, rowData, index))) {
989
+ !((_d = (_c = this.rowSelectionFormatter).hideCheckbox) === null || _d === void 0 ? void 0 : _d.call(_c, rowData, index)) &&
990
+ !this.disableRowClickSelection) {
988
991
  // metaKey -> command key
989
992
  if (!this.multiSelectionWithClick && !event.ctrlKey && !event.metaKey) {
990
993
  this.rowSelection.clear();
@@ -1065,7 +1068,7 @@ class MtxGrid {
1065
1068
  }
1066
1069
  }
1067
1070
  /** @nocollapse */ MtxGrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxGrid, deps: [{ token: MtxGridUtils }, { token: i0.ChangeDetectorRef }, { token: MTX_GRID_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1068
- /** @nocollapse */ MtxGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: MtxGrid, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: "loading", trackBy: "trackBy", columnResizable: "columnResizable", emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: "pageOnFront", showPaginator: "showPaginator", pageDisabled: "pageDisabled", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: "hidePageSize", paginationTemplate: "paginationTemplate", sortOnFront: "sortOnFront", sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: "sortDisableClear", sortDisabled: "sortDisabled", sortStart: "sortStart", rowHover: "rowHover", rowStriped: "rowStriped", expandable: "expandable", expansionTemplate: "expansionTemplate", multiSelectable: "multiSelectable", multiSelectionWithClick: "multiSelectionWithClick", rowSelected: "rowSelected", rowSelectable: "rowSelectable", hideRowSelectionCheckbox: "hideRowSelectionCheckbox", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", cellSelectable: "cellSelectable", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: "columnHideable", columnHideableChecked: "columnHideableChecked", columnSortable: "columnSortable", columnPinnable: "columnPinnable", columnPinOptions: "columnPinOptions", showColumnMenuButton: "showColumnMenuButton", columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", showColumnMenuHeader: "showColumnMenuHeader", columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: "showColumnMenuFooter", columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: "useContentRowTemplate", useContentHeaderRowTemplate: "useContentHeaderRowTemplate", useContentFooterRowTemplate: "useContentFooterRowTemplate", showSummary: "showSummary", summaryTemplate: "summaryTemplate", showSidebar: "showSidebar", sidebarTemplate: "sidebarTemplate", showStatusbar: "showStatusbar", statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", expansionChange: "expansionChange", rowSelectionChange: "rowSelectionChange", cellSelectionChange: "cellSelectionChange", columnChange: "columnChange" }, host: { classAttribute: "mtx-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n <div class=\"mtx-grid-toolbar-content\">\r\n <ng-template [ngIf]=\"toolbarTemplate\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultToolbarTemplate>\r\n <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"mtx-grid-toolbar-actions\">\r\n <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n [columns]=\"columns\"\r\n [buttonText]=\"columnMenuButtonText\"\r\n [buttonType]=\"columnMenuButtonType\"\r\n [buttonColor]=\"columnMenuButtonColor\"\r\n [buttonClass]=\"columnMenuButtonClass\"\r\n [buttonIcon]=\"columnMenuButtonIcon\"\r\n [selectable]=\"columnHideable\"\r\n [selectableChecked]=\"columnHideableChecked\"\r\n [sortable]=\"columnSortable\"\r\n [pinnable]=\"columnPinnable\"\r\n [showHeader]=\"showColumnMenuHeader\"\r\n [headerText]=\"columnMenuHeaderText\"\r\n [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n [showFooter]=\"showColumnMenuFooter\"\r\n [footerText]=\"columnMenuFooterText\"\r\n [footerTemplate]=\"columnMenuFooterTemplate\"\r\n [pinOptions]=\"columnPinOptions\"\r\n (columnChange)=\"_onColumnChange($event)\">\r\n </mtx-grid-column-menu>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n <!-- Table content -->\r\n <div class=\"mtx-grid-content mtx-grid-layout\">\r\n <div #tableContainer class=\"mat-table-container\"\r\n [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n <table mat-table *ngIf=\"!columnResizable\"\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_onSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col | colClass\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n (rowDataChange)=\"_onRowDataChange($event)\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n [placeholder]=\"emptyValuePlaceholder\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n <!-- TODO: Use flexbox-based mat-table -->\r\n <table mat-table *ngIf=\"columnResizable\"\r\n columnResize\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_onSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col | colClass\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n [resizable]=\"col.resizable\"\r\n [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n (rowDataChange)=\"_onRowDataChange($event)\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n [placeholder]=\"emptyValuePlaceholder\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n\r\n <!-- No result -->\r\n <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n <ng-template [ngIf]=\"noResultTemplate\" [ngIfElse]=\"defaultNoResultTpl\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tool sidebar -->\r\n <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n <ng-template [ngIf]=\"sidebarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n <!-- Status Bar -->\r\n <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n <ng-template [ngIf]=\"statusbarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"mtx-grid-pagination\">\r\n <ng-template [ngIf]=\"paginationTemplate\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultPaginationTemplate>\r\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_onPage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n </mat-paginator>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n <ng-template [ngIf]=\"headerExtraTemplate | isTemplateRef\" [ngIfElse]=\"headerExtraTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerExtraTpl>\r\n <ng-template [ngIf]=\"$any(headerExtraTemplate)?.[col.field] | isTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-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-mdc-header-cell,.mtx-grid .mat-mdc-footer-cell,.mtx-grid .mat-mdc-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-mdc-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin:0 4px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px;box-sizing:border-box}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:60px;min-width:60px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mtx-grid-row-expand-button.mat-mdc-icon-button{width:40px;height:40px;padding:8px;vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button+mtx-grid-cell{vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i3$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterCellDef; }), selector: "[matFooterCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterRowDef; }), selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterCell; }), selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatFooterRow; }), selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i8$1.MatProgressBar; }), selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i0.forwardRef(function () { return MatColumnResize; }), selector: "table[mat-table][columnResize]" }, { kind: "directive", type: i0.forwardRef(function () { return MatResizable; }), selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridCell; }), selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridColumnMenu; }), selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridExpansionToggle; }), selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridSelectableCell; }), selector: "[mtx-grid-selectable-cell]", inputs: ["mtxSelectableRowData"], outputs: ["cellSelectionChange"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3$1.AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return i8.MtxToObservablePipe; }), name: "toObservable" }, { kind: "pipe", type: i0.forwardRef(function () { return i8.MtxIsTemplateRefPipe; }), name: "isTemplateRef" }, { kind: "pipe", type: i0.forwardRef(function () { return MtxGridRowClassPipe; }), name: "rowClass" }, { kind: "pipe", type: i0.forwardRef(function () { return MtxGridColClassPipe; }), name: "colClass" }], animations: [
1071
+ /** @nocollapse */ MtxGrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: MtxGrid, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: "loading", trackBy: "trackBy", columnResizable: "columnResizable", emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: "pageOnFront", showPaginator: "showPaginator", pageDisabled: "pageDisabled", showFirstLastButtons: "showFirstLastButtons", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: "hidePageSize", paginationTemplate: "paginationTemplate", sortOnFront: "sortOnFront", sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: "sortDisableClear", sortDisabled: "sortDisabled", sortStart: "sortStart", rowHover: "rowHover", rowStriped: "rowStriped", expandable: "expandable", expansionTemplate: "expansionTemplate", multiSelectable: "multiSelectable", multiSelectionWithClick: "multiSelectionWithClick", rowSelected: "rowSelected", rowSelectable: "rowSelectable", hideRowSelectionCheckbox: "hideRowSelectionCheckbox", disableRowClickSelection: "disableRowClickSelection", rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", cellSelectable: "cellSelectable", showToolbar: "showToolbar", toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: "columnHideable", columnHideableChecked: "columnHideableChecked", columnSortable: "columnSortable", columnPinnable: "columnPinnable", columnPinOptions: "columnPinOptions", showColumnMenuButton: "showColumnMenuButton", columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", showColumnMenuHeader: "showColumnMenuHeader", columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: "showColumnMenuFooter", columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: "useContentRowTemplate", useContentHeaderRowTemplate: "useContentHeaderRowTemplate", useContentFooterRowTemplate: "useContentFooterRowTemplate", showSummary: "showSummary", summaryTemplate: "summaryTemplate", showSidebar: "showSidebar", sidebarTemplate: "sidebarTemplate", showStatusbar: "showStatusbar", statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", expansionChange: "expansionChange", rowSelectionChange: "rowSelectionChange", cellSelectionChange: "cellSelectionChange", columnChange: "columnChange" }, host: { classAttribute: "mtx-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\r\n<div class=\"mtx-grid-progress\" *ngIf=\"loading\">\r\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- Toolbar -->\r\n<div class=\"mtx-grid-toolbar\" *ngIf=\"showToolbar\">\r\n <div class=\"mtx-grid-toolbar-content\">\r\n <ng-template [ngIf]=\"toolbarTemplate\" [ngIfElse]=\"defaultToolbarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultToolbarTemplate>\r\n <div class=\"mtx-grid-toolbar-title\" *ngIf=\"toolbarTitle\">{{toolbarTitle}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"mtx-grid-toolbar-actions\">\r\n <mtx-grid-column-menu *ngIf=\"showColumnMenuButton\" #columnMenu\r\n [columns]=\"columns\"\r\n [buttonText]=\"columnMenuButtonText\"\r\n [buttonType]=\"columnMenuButtonType\"\r\n [buttonColor]=\"columnMenuButtonColor\"\r\n [buttonClass]=\"columnMenuButtonClass\"\r\n [buttonIcon]=\"columnMenuButtonIcon\"\r\n [selectable]=\"columnHideable\"\r\n [selectableChecked]=\"columnHideableChecked\"\r\n [sortable]=\"columnSortable\"\r\n [pinnable]=\"columnPinnable\"\r\n [showHeader]=\"showColumnMenuHeader\"\r\n [headerText]=\"columnMenuHeaderText\"\r\n [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n [showFooter]=\"showColumnMenuFooter\"\r\n [footerText]=\"columnMenuFooterText\"\r\n [footerTemplate]=\"columnMenuFooterTemplate\"\r\n [pinOptions]=\"columnPinOptions\"\r\n (columnChange)=\"_onColumnChange($event)\">\r\n </mtx-grid-column-menu>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n <!-- Table content -->\r\n <div class=\"mtx-grid-content mtx-grid-layout\">\r\n <div #tableContainer class=\"mat-table-container\"\r\n [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n <table mat-table *ngIf=\"!columnResizable\"\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_onSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col | colClass\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n (rowDataChange)=\"_onRowDataChange($event)\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n [placeholder]=\"emptyValuePlaceholder\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n <!-- TODO: Use flexbox-based mat-table -->\r\n <table mat-table *ngIf=\"columnResizable\"\r\n columnResize\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_onSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col | colClass\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n [resizable]=\"col.resizable\"\r\n [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"headerTemplate | isTemplateRef\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"$any(headerTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\r\n [start]=\"col.sortProp?.start!\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" *ngIf=\"col.sortable\"\r\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\"\r\n focusable=\"false\">\r\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\"></path>\r\n </svg>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"cellTemplate | isTemplateRef\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"$any(cellTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate!\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button class=\"mtx-grid-row-expand-button\" *ngIf=\"col.showExpand\"\r\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\r\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\r\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\r\n </svg>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\r\n (rowDataChange)=\"_onRowDataChange($event)\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"summaryTemplate | isTemplateRef\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"$any(summaryTemplate)?.[col.field] | isTemplateRef\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\r\n [placeholder]=\"emptyValuePlaceholder\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template [ngIf]=\"useContentHeaderRowTemplate\" [ngIfElse]=\"defaultHeaderRowTpl\">\r\n </ng-template>\r\n <ng-template #defaultHeaderRowTpl>\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"useContentRowTemplate\" [ngIfElse]=\"defaultRowTpl\"></ng-template>\r\n <ng-template #defaultRowTpl>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\r\n [ngClass]=\"{'selected': rowSelection.isSelected(row)}\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n </ng-template>\r\n\r\n <ng-template [ngIf]=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-template>\r\n <ng-template [ngIf]=\"useContentFooterRowTemplate\"></ng-template>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n\r\n <!-- No result -->\r\n <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n <ng-template [ngIf]=\"noResultTemplate\" [ngIfElse]=\"defaultNoResultTpl\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tool sidebar -->\r\n <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n <ng-template [ngIf]=\"sidebarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n <!-- Status Bar -->\r\n <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n <ng-template [ngIf]=\"statusbarTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"mtx-grid-pagination\">\r\n <ng-template [ngIf]=\"paginationTemplate\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultPaginationTemplate>\r\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_onPage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n </mat-paginator>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n <ng-template [ngIf]=\"headerExtraTemplate | isTemplateRef\" [ngIfElse]=\"headerExtraTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerExtraTpl>\r\n <ng-template [ngIf]=\"$any(headerExtraTemplate)?.[col.field] | isTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n</ng-template>\r\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:80px}.mtx-grid .mat-table-sticky-left{border-right-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-mdc-header-cell,.mtx-grid .mat-mdc-footer-cell,.mtx-grid .mat-mdc-cell{padding:4px 10px;box-sizing:border-box}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:24px}.mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,.mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type){padding-left:10px;padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-footer-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell,[dir=rtl] .mtx-grid .mat-mdc-cell:first-of-type:not(:only-of-type).mtx-grid-checkbox-cell{padding-left:10px;padding-right:10px}.mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),.mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-right:24px}[dir=rtl] .mtx-grid .mat-mdc-header-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-footer-cell:last-of-type:not(:only-of-type),[dir=rtl] .mtx-grid .mat-mdc-cell:last-of-type:not(:only-of-type){padding-left:24px;padding-right:10px}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-mdc-row:last-of-type .mat-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin:0 4px}.mtx-grid .mat-header-cell-inner{display:flex;align-items:center}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px;box-sizing:border-box}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left-width:1px;border-left-style:solid}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right-width:1px;border-right-style:solid}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:56px;padding:8px}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;width:40px;height:40px;vertical-align:middle}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:48px;overflow:hidden}.mtx-grid-checkbox-cell{flex:none;justify-content:center;width:60px;min-width:60px}.mtx-grid-checkbox-cell .mat-checkbox{display:flex;margin:0 10px}.mtx-grid-checkbox-cell .mat-checkbox-inner-container{margin-left:0}.mtx-grid-row-expand-button.mat-mdc-icon-button{width:40px;height:40px;padding:8px;vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button+mtx-grid-cell{vertical-align:middle}.mtx-grid-row-expand-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i3$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatTable; }), selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderCellDef; }), selector: "[matHeaderCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderRowDef; }), selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatColumnDef; }), selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatCellDef; }), selector: "[matCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatRowDef; }), selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterCellDef; }), selector: "[matFooterCellDef]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterRowDef; }), selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatHeaderCell; }), selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatCell; }), selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$3.MatFooterCell; }), selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatHeaderRow; }), selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatRow; }), selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i0.forwardRef(function () { return i3$3.MatFooterRow; }), selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatSort; }), selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatSortHeader; }), selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatPaginator; }), selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i0.forwardRef(function () { return i3$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatIconButton; }), selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i8$1.MatProgressBar; }), selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i0.forwardRef(function () { return MatColumnResize; }), selector: "table[mat-table][columnResize]" }, { kind: "directive", type: i0.forwardRef(function () { return MatResizable; }), selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridCell; }), selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: i0.forwardRef(function () { return MtxGridColumnMenu; }), selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridExpansionToggle; }), selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "directive", type: i0.forwardRef(function () { return MtxGridSelectableCell; }), selector: "[mtx-grid-selectable-cell]", inputs: ["mtxSelectableRowData"], outputs: ["cellSelectionChange"] }, { kind: "pipe", type: i0.forwardRef(function () { return i3$1.AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return i8.MtxToObservablePipe; }), name: "toObservable" }, { kind: "pipe", type: i0.forwardRef(function () { return i8.MtxIsTemplateRefPipe; }), name: "isTemplateRef" }, { kind: "pipe", type: i0.forwardRef(function () { return MtxGridRowClassPipe; }), name: "rowClass" }, { kind: "pipe", type: i0.forwardRef(function () { return MtxGridColClassPipe; }), name: "colClass" }], animations: [
1069
1072
  trigger('expansion', [
1070
1073
  state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
1071
1074
  state('expanded', style({ height: '*', visibility: 'visible' })),
@@ -1188,6 +1191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
1188
1191
  type: Input
1189
1192
  }], hideRowSelectionCheckbox: [{
1190
1193
  type: Input
1194
+ }], disableRowClickSelection: [{
1195
+ type: Input
1191
1196
  }], rowSelectionFormatter: [{
1192
1197
  type: Input
1193
1198
  }], rowClassFormatter: [{