@ng-matero/extensions 12.10.1 → 12.10.2
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.
- package/bundles/mtxGrid.umd.js +1 -1
- package/bundles/mtxGrid.umd.js.map +1 -1
- package/esm2015/grid/grid.component.js +2 -2
- package/fesm2015/mtxGrid.js +1 -1
- package/fesm2015/mtxGrid.js.map +1 -1
- package/grid/grid.component.d.ts +9 -9
- package/grid/mtxGrid.metadata.json +1 -1
- package/package.json +1 -1
package/bundles/mtxGrid.umd.js
CHANGED
|
@@ -698,7 +698,7 @@
|
|
|
698
698
|
{ type: core.Component, args: [{
|
|
699
699
|
selector: 'mtx-grid',
|
|
700
700
|
exportAs: 'mtxGrid',
|
|
701
|
-
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",
|
|
701
|
+
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.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]=\"$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]=\"_isTemplateRef($any(headerTemplate)?.[col.field])\"\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 [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]=\"$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]=\"_isTemplateRef($any(cellTemplate)?.[col.field])\"\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\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]=\"$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]=\"_isTemplateRef($any(summaryTemplate)?.[col.field])\"\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 [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]=\"$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]=\"_isTemplateRef($any(headerTemplate)?.[col.field])\"\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 [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]=\"$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]=\"_isTemplateRef($any(cellTemplate)?.[col.field])\"\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\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]=\"$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]=\"_isTemplateRef($any(summaryTemplate)?.[col.field])\"\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 [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]=\"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]=\"_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]=\"_isTemplateRef($any(headerExtraTemplate)?.[col.field])\">\r\n <ng-template [ngTemplateOutlet]=\"$any(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",
|
|
702
702
|
host: {
|
|
703
703
|
class: 'mtx-grid',
|
|
704
704
|
},
|