@ng-matero/extensions 11.5.1 → 11.5.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/mtxCheckboxGroup.umd.js +7 -5
- package/bundles/mtxCheckboxGroup.umd.js.map +1 -1
- package/bundles/mtxCheckboxGroup.umd.min.js +1 -1
- package/bundles/mtxCheckboxGroup.umd.min.js.map +1 -1
- package/bundles/mtxGrid.umd.js +30 -37
- package/bundles/mtxGrid.umd.js.map +1 -1
- package/bundles/mtxGrid.umd.min.js +3 -3
- package/bundles/mtxGrid.umd.min.js.map +1 -1
- package/bundles/mtxPopover.umd.js +5 -8
- package/bundles/mtxPopover.umd.js.map +1 -1
- package/bundles/mtxPopover.umd.min.js +1 -1
- package/bundles/mtxPopover.umd.min.js.map +1 -1
- package/bundles/mtxSelect.umd.js +1 -0
- package/bundles/mtxSelect.umd.js.map +1 -1
- package/bundles/mtxSelect.umd.min.js +1 -1
- package/bundles/mtxSelect.umd.min.js.map +1 -1
- package/bundles/mtxSplit.umd.js +1 -1
- package/bundles/mtxSplit.umd.js.map +1 -1
- package/bundles/mtxSplit.umd.min.js +1 -1
- package/bundles/mtxSplit.umd.min.js.map +1 -1
- package/checkbox-group/checkbox-group.component.d.ts +4 -4
- package/checkbox-group/mtxCheckboxGroup.metadata.json +1 -1
- package/data-grid/cell.component.d.ts +3 -8
- package/data-grid/mtxGrid.metadata.json +1 -1
- package/esm2015/checkbox-group/checkbox-group.component.js +11 -9
- package/esm2015/data-grid/cell.component.js +28 -31
- package/esm2015/data-grid/column-menu.component.js +2 -2
- package/esm2015/data-grid/grid.component.js +3 -3
- package/esm2015/popover/popover.js +5 -9
- package/esm2015/select/select.component.js +2 -1
- package/esm2015/split-pane/split.component.js +2 -2
- package/fesm2015/mtxCheckboxGroup.js +8 -6
- package/fesm2015/mtxCheckboxGroup.js.map +1 -1
- package/fesm2015/mtxGrid.js +30 -33
- package/fesm2015/mtxGrid.js.map +1 -1
- package/fesm2015/mtxPopover.js +4 -8
- package/fesm2015/mtxPopover.js.map +1 -1
- package/fesm2015/mtxSelect.js +1 -0
- package/fesm2015/mtxSelect.js.map +1 -1
- package/fesm2015/mtxSplit.js +1 -1
- package/fesm2015/mtxSplit.js.map +1 -1
- package/package.json +1 -1
- package/popover/popover.d.ts +0 -4
- package/select/mtxSelect.metadata.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mtxCheckboxGroup.js","sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n forwardRef,\n AfterViewInit,\n ContentChildren,\n QueryList,\n ElementRef,\n OnDestroy,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n selector: 'mtx-checkbox-group',\n exportAs: 'mtxCheckboxGroup',\n host: {\n class: 'mtx-checkbox-group',\n },\n templateUrl: './checkbox-group.component.html',\n styleUrls: ['./checkbox-group.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n multi: true,\n },\n ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n _checkboxes: QueryList<MatCheckbox>;\n\n @Input()\n get items() {\n return this._items;\n }\n set items(value: any[]) {\n // TODO: Deep clone\n this._originalItems = JSON.parse(JSON.stringify(value));\n this._items = value.map(option => {\n return option instanceof Object ? option : new MtxCheckboxBase(option, option);\n });\n }\n private _items: any[] = [];\n private _originalItems: any[] = [];\n\n @Input() bindLabel = 'label';\n\n @Input() bindValue = 'value';\n\n @Input()\n get showSelectAll(): boolean {\n return this._showSelectAll;\n }\n set showSelectAll(value: boolean) {\n this._showSelectAll = coerceBooleanProperty(value);\n }\n private _showSelectAll = false;\n\n @Input() selectAllLabel = 'Select All';\n\n @Input()\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn: (o1: any, o2: any) => boolean) {\n if (typeof fn !== 'function') {\n throw Error('`compareWith` must be a function.');\n }\n\n if (fn) {\n this._compareWith = fn;\n }\n }\n private _compareWith: (o1: any, o2: any) => boolean;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n }\n private _disabled = false;\n\n @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n selectAll = false;\n selectAllIndeterminate = false;\n\n selectedItems: MtxCheckboxGroupOption[] = [];\n\n _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n _onTouched: () => void = () => null;\n\n constructor(\n private _changeDetectorRef: ChangeDetectorRef,\n private _focusMonitor: FocusMonitor,\n private _elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit() {\n this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n if (!focusOrigin) {\n // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n // Angular does not expect events to be raised during change detection, so any state change\n // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n // telling the form control it has been touched until the next tick.\n Promise.resolve().then(() => {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n });\n }\n });\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: MtxCheckboxGroupOption) {\n const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n try {\n const compareValue = option[this.bindValue] === value;\n return this._compareWith ? this._compareWith(option, value) : compareValue;\n } catch (error) {\n console.warn(error);\n return false;\n }\n });\n\n if (correspondingOption) {\n correspondingOption.checked = true;\n }\n\n return correspondingOption;\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: any[]): void {\n if (value) {\n if (!Array.isArray(value)) {\n throw Error('Value must be an array.');\n }\n\n value.forEach((currentValue: any) => this._selectValue(currentValue));\n this.selectedItems = value;\n }\n\n this._checkMasterCheckboxState();\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: () => {}): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this._disabled = isDisabled;\n }\n\n private _checkMasterCheckboxState() {\n if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => !option.checked)\n ) {\n this.selectAll = false;\n this.selectAllIndeterminate = false;\n } else if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => option.checked)\n ) {\n this.selectAll = true;\n this.selectAllIndeterminate = false;\n } else {\n this.selectAllIndeterminate = true;\n }\n }\n\n private _getSelectedItems(index: number) {\n this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n if (this._compareWith) {\n this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n this.selectedItems.find(selectedOption => this._compareWith(option, selectedOption))\n );\n } else {\n this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n }\n\n this._onChange(this.selectedItems);\n\n this.change.emit({ model: this.selectedItems, index });\n }\n\n /** Handle normal checkbox toggle */\n _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n this._checkMasterCheckboxState();\n this._getSelectedItems(index);\n }\n\n /** Handle master checkbox toggle */\n _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n this.selectAll = !this.selectAll;\n this.selectAllIndeterminate = false;\n\n if (this.selectAll) {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = true));\n } else {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = !!option.disabled));\n }\n\n this._getSelectedItems(index);\n }\n\n static ngAcceptInputType_showSelectAll: BooleanInput;\n static ngAcceptInputType_disabled: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n exports: [MtxCheckboxGroupComponent],\n declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mtxCheckboxGroup.js","sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n forwardRef,\n Input,\n OnDestroy,\n Output,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n selector: 'mtx-checkbox-group',\n exportAs: 'mtxCheckboxGroup',\n host: {\n class: 'mtx-checkbox-group',\n },\n templateUrl: './checkbox-group.component.html',\n styleUrls: ['./checkbox-group.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n multi: true,\n },\n ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n _checkboxes: QueryList<MatCheckbox>;\n\n @Input()\n get items() {\n return this._items;\n }\n set items(value: any[]) {\n // store the original data with deep clone\n this._originalItems = JSON.parse(JSON.stringify(value));\n this._items = value.map(option => {\n return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n });\n }\n private _items: any[] = [];\n private _originalItems: any[] = [];\n\n @Input() bindLabel = 'label';\n\n @Input() bindValue = 'value';\n\n @Input()\n get showSelectAll(): boolean {\n return this._showSelectAll;\n }\n set showSelectAll(value: boolean) {\n this._showSelectAll = coerceBooleanProperty(value);\n }\n private _showSelectAll = false;\n\n @Input() selectAllLabel = 'Select All';\n\n @Input()\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n if (fn != null && typeof fn !== 'function') {\n throw Error('`compareWith` must be a function.');\n }\n\n if (fn) {\n this._compareWith = fn;\n }\n }\n private _compareWith!: (o1: any, o2: any) => boolean;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n this._changeDetectorRef.markForCheck();\n }\n private _disabled = false;\n\n @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n selectAll = false;\n selectAllIndeterminate = false;\n\n selectedItems: MtxCheckboxGroupOption[] = [];\n\n _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n _onTouched: () => void = () => null;\n\n constructor(\n private _changeDetectorRef: ChangeDetectorRef,\n private _focusMonitor: FocusMonitor,\n private _elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit() {\n this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n if (!focusOrigin) {\n // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n // Angular does not expect events to be raised during change detection, so any state change\n // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n // telling the form control it has been touched until the next tick.\n Promise.resolve().then(() => {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n });\n }\n });\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: MtxCheckboxGroupOption) {\n const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n try {\n const compareValue = option[this.bindValue] === value;\n return this._compareWith ? this._compareWith(option, value) : compareValue;\n } catch (error) {\n console.warn(error);\n return false;\n }\n });\n\n if (correspondingOption) {\n correspondingOption.checked = true;\n }\n\n return correspondingOption;\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: any[]): void {\n this.items.forEach(item => (item.checked = false));\n\n if (value) {\n if (!Array.isArray(value)) {\n throw Error('Value must be an array.');\n }\n\n value.forEach(currentValue => this._selectValue(currentValue));\n this.selectedItems = value;\n }\n\n this._checkMasterCheckboxState();\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: () => {}): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n private _checkMasterCheckboxState() {\n if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => !option.checked)\n ) {\n this.selectAll = false;\n this.selectAllIndeterminate = false;\n } else if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => option.checked)\n ) {\n this.selectAll = true;\n this.selectAllIndeterminate = false;\n } else {\n this.selectAllIndeterminate = true;\n }\n }\n\n private _getSelectedItems(index: number) {\n this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n if (this._compareWith) {\n this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n );\n } else {\n this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n }\n\n this._onChange(this.selectedItems);\n\n this.change.emit({ model: this.selectedItems, index });\n }\n\n /** Handle normal checkbox toggle */\n _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n this._checkMasterCheckboxState();\n this._getSelectedItems(index);\n }\n\n /** Handle master checkbox toggle */\n _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n this.selectAll = !this.selectAll;\n this.selectAllIndeterminate = false;\n\n if (this.selectAll) {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = true));\n } else {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = !!option.disabled));\n }\n\n this._getSelectedItems(index);\n }\n\n static ngAcceptInputType_showSelectAll: BooleanInput;\n static ngAcceptInputType_disabled: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n exports: [MtxCheckboxGroupComponent],\n declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/fesm2015/mtxGrid.js
CHANGED
|
@@ -348,7 +348,7 @@ MtxGridComponent.decorators = [
|
|
|
348
348
|
{ type: Component, args: [{
|
|
349
349
|
selector: 'mtx-grid',
|
|
350
350
|
exportAs: 'mtxGrid',
|
|
351
|
-
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]=\"columnMenuData\"\r\n [buttonText]=\"columnMenuButtonText\"\r\n [buttonType]=\"columnMenuButtonType\"\r\n [buttonColor]=\"columnMenuButtonColor\"\r\n [buttonClass]=\"columnMenuButtonClass\"\r\n [buttonIcon]=\"columnMenuButtonIcon\"\r\n [selectable]=\"columnHideable\"\r\n [selectableChecked]=\"columnHideableChecked\"\r\n [sortable]=\"columnMovable\"\r\n (selectionChange)=\"_handleColumnChange($event)\"\r\n (sortChange)=\"_handleColumnChange($event)\"\r\n [showHeader]=\"showColumnMenuHeader\"\r\n [headerText]=\"columnMenuHeaderText\"\r\n [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n [showFooter]=\"showColumnMenuFooter\"\r\n [footerText]=\"columnMenuFooterText\"\r\n [footerTemplate]=\"columnMenuFooterTemplate\">\r\n </mtx-grid-column-menu>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n <!-- Table content -->\r\n <div class=\"mtx-grid-content mtx-grid-layout\">\r\n <div #tableContainer class=\"mat-table-container\"\r\n [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n <table mat-table *ngIf=\"!columnResizable\"\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_handleSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition\"\r\n [disableClear]=\"col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n <ng-container *ngIf=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n <!-- TODO: Use flexbox-based mat-table -->\r\n <table mat-table *ngIf=\"columnResizable\"\r\n columnResize\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_handleSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n [resizable]=\"col.resizable\"\r\n [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition\"\r\n [disableClear]=\"col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button *ngIf=\"col.showExpand\" mat-icon-button mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n <ng-container *ngIf=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n\r\n <!-- No result -->\r\n <div class=\"mtx-grid-no-result\" *ngIf=\"_hasNoResult\">\r\n <ng-template [ngIf]=\"_isTemplateRef(noResultTemplate)\" [ngIfElse]=\"defaultNoResultTpl\">\r\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Tool sidebar -->\r\n <div class=\"mtx-grid-sidebar\" *ngIf=\"showSidebar\">\r\n <ng-template [ngIf]=\"_isTemplateRef(sidebarTemplate)\">\r\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-footer\">\r\n <!-- Status Bar -->\r\n <div class=\"mtx-grid-statusbar\" *ngIf=\"showStatusbar\">\r\n <ng-template [ngIf]=\"_isTemplateRef(statusbarTemplate)\">\r\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Pagination -->\r\n <div class=\"mtx-grid-pagination\">\r\n <ng-template [ngIf]=\"_isTemplateRef(paginationTemplate)\" [ngIfElse]=\"defaultPaginationTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultPaginationTemplate>\r\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator || _hasNoResult\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_handlePage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n </mat-paginator>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerExtraTemplate)\" [ngIfElse]=\"headerExtraTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerExtraTpl>\r\n <ng-template [ngIf]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n</ng-template>\r\n",
|
|
351
|
+
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]=\"columnMenuData\"\r\n [buttonText]=\"columnMenuButtonText\"\r\n [buttonType]=\"columnMenuButtonType\"\r\n [buttonColor]=\"columnMenuButtonColor\"\r\n [buttonClass]=\"columnMenuButtonClass\"\r\n [buttonIcon]=\"columnMenuButtonIcon\"\r\n [selectable]=\"columnHideable\"\r\n [selectableChecked]=\"columnHideableChecked\"\r\n [sortable]=\"columnMovable\"\r\n (selectionChange)=\"_handleColumnChange($event)\"\r\n (sortChange)=\"_handleColumnChange($event)\"\r\n [showHeader]=\"showColumnMenuHeader\"\r\n [headerText]=\"columnMenuHeaderText\"\r\n [headerTemplate]=\"columnMenuHeaderTemplate\"\r\n [showFooter]=\"showColumnMenuFooter\"\r\n [footerText]=\"columnMenuFooterText\"\r\n [footerTemplate]=\"columnMenuFooterTemplate\">\r\n </mtx-grid-column-menu>\r\n </div>\r\n</div>\r\n\r\n<div class=\"mtx-grid-main mtx-grid-layout\">\r\n <!-- Table content -->\r\n <div class=\"mtx-grid-content mtx-grid-layout\">\r\n <div #tableContainer class=\"mat-table-container\"\r\n [ngClass]=\"{'mat-table-with-data': !_hasNoResult}\">\r\n <table mat-table *ngIf=\"!columnResizable\"\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_handleSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition\"\r\n [disableClear]=\"col.sortProp?.disableClear == null ? sortDisableClear : col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button *ngIf=\"col.showExpand\" mat-icon-button type=\"button\"\r\n mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n <ng-container *ngIf=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\r\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\r\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\r\n [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"mtx-grid-expansion-detail\"\r\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\r\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\r\n </ng-template>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row\r\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\r\n [ngClass]=\"['mtx-grid-expansion', expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed']\">\r\n </tr>\r\n </ng-container>\r\n </table>\r\n\r\n <!-- TODO: Use flexbox-based mat-table -->\r\n <table mat-table *ngIf=\"columnResizable\"\r\n columnResize\r\n [ngClass]=\"{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\r\n [dataSource]=\"dataSource\" [multiTemplateDataRows]=\"expandable\"\r\n matSort\r\n [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\"\r\n [matSortDisableClear]=\"sortDisableClear\"\r\n [matSortDisabled]=\"sortDisabled\"\r\n [matSortStart]=\"sortStart\"\r\n (matSortChange)=\"_handleSortChange($event)\"\r\n [trackBy]=\"trackBy\">\r\n\r\n <ng-container *ngIf=\"rowSelectable && !hideRowSelectionCheckbox\"\r\n matColumnDef=\"MtxGridCheckboxColumnDef\">\r\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"multiSelectable\"\r\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\r\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\r\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n class=\"mtx-grid-checkbox-cell\">\r\n <mat-checkbox *ngIf=\"!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox!(row, _getIndex(index, dataIndex)))\"\r\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled!(row, _getIndex(index, dataIndex))\"\r\n [checked]=\"rowSelection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let col of columns;\">\r\n <ng-container [matColumnDef]=\"col.field\"\r\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n [resizable]=\"col.resizable\"\r\n [matResizableMinWidthPx]=\"col.minWidth\" [matResizableMaxWidthPx]=\"col.maxWidth\">\r\n <div class=\"mat-header-cell-inner\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerTemplate)\" [ngIfElse]=\"headerTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerTpl>\r\n <ng-template [ngIf]=\"headerTemplate && _isTemplateRef(headerTemplate[col.field])\"\r\n [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>\r\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\r\n [disabled]=\"!col.sortable\"\r\n [arrowPosition]=\"col.sortProp?.arrowPosition\"\r\n [disableClear]=\"col.sortProp?.disableClear == null ? sortDisableClear : col.sortProp?.disableClear\"\r\n [start]=\"col.sortProp?.start\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n <span>{{col.header | toObservable | async}}</span>\r\n <mat-icon class=\"mat-sort-header-icon\" *ngIf=\"col.sortable\">sort</mat-icon>\r\n </div>\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\r\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </div>\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\r\n [class]=\"col.class\"\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\"\r\n mtx-grid-selectable-cell (cellSelectionChange)=\"_selectCell($event, row, col)\">\r\n <ng-template [ngIf]=\"_isTemplateRef(cellTemplate)\" [ngIfElse]=\"cellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #cellTpl>\r\n <ng-template [ngIf]=\"cellTemplate && _isTemplateRef(cellTemplate[col.field])\"\r\n [ngIfElse]=\"colDefCellTpl\">\r\n <ng-template [ngTemplateOutlet]=\"cellTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #colDefCellTpl>\r\n <ng-template [ngIf]=\"col.cellTemplate\" [ngIfElse]=\"defaultCellTpl\"\r\n [ngTemplateOutlet]=\"col.cellTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultCellTpl>\r\n <button *ngIf=\"col.showExpand\" mat-icon-button type=\"button\"\r\n mtx-grid-expansion-toggle\r\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\r\n (toggleChange)=\"_handleExpansionChange($event, row, col, dataIndex);\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n\r\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\"></mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef\r\n [ngClass]=\"{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}\"\r\n [ngStyle]=\"{'width': col.width, 'left': col.left, 'right': col.right}\">\r\n <span class=\"mtx-grid-expansion-placeholder\" *ngIf=\"col.showExpand\"></span>\r\n\r\n <ng-template [ngIf]=\"_isTemplateRef(summaryTemplate)\" [ngIfElse]=\"summaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #summaryTpl>\r\n <ng-template [ngIf]=\"summaryTemplate && _isTemplateRef(summaryTemplate[col.field])\"\r\n [ngIfElse]=\"defaultSummaryTpl\">\r\n <ng-template [ngTemplateOutlet]=\"summaryTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #defaultSummaryTpl>\r\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\">\r\n </mtx-grid-cell>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr mat-row\r\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\r\n [ngClass]=\"_getRowClassList(row, _getIndex(index, dataIndex))\"\r\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\">\r\n </tr>\r\n <ng-container *ngIf=\"_whetherShowSummary\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"expandable\">\r\n <!-- 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\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_handlePage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n </mat-paginator>\r\n </ng-template>\r\n </div>\r\n</div>\r\n\r\n<!-- Header template for extra content -->\r\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\r\n <ng-template [ngIf]=\"_isTemplateRef(headerExtraTemplate)\" [ngIfElse]=\"headerExtraTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #headerExtraTpl>\r\n <ng-template [ngIf]=\"headerExtraTemplate && _isTemplateRef(headerExtraTemplate[col.field])\">\r\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-template>\r\n</ng-template>\r\n",
|
|
352
352
|
host: {
|
|
353
353
|
class: 'mtx-grid',
|
|
354
354
|
},
|
|
@@ -356,7 +356,7 @@ MtxGridComponent.decorators = [
|
|
|
356
356
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
357
357
|
animations: [
|
|
358
358
|
trigger('expansion', [
|
|
359
|
-
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
359
|
+
state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
360
360
|
state('expanded', style({ height: '*', visibility: 'visible' })),
|
|
361
361
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
362
362
|
]),
|
|
@@ -460,12 +460,6 @@ class MtxGridCellComponent {
|
|
|
460
460
|
get _colValue() {
|
|
461
461
|
return this._dataGridSrv.getCellValue(this.rowData, this.colDef);
|
|
462
462
|
}
|
|
463
|
-
_isString(fn) {
|
|
464
|
-
return Object.prototype.toString.call(fn) === '[object String]';
|
|
465
|
-
}
|
|
466
|
-
_isFunction(fn) {
|
|
467
|
-
return Object.prototype.toString.call(fn) === '[object Function]';
|
|
468
|
-
}
|
|
469
463
|
_isEmptyValue(value) {
|
|
470
464
|
return value == null || value.toString() === '';
|
|
471
465
|
}
|
|
@@ -473,7 +467,7 @@ class MtxGridCellComponent {
|
|
|
473
467
|
return /<\/?[a-z][\s\S]*>/i.test(value);
|
|
474
468
|
}
|
|
475
469
|
_getText(value) {
|
|
476
|
-
return this._isEmptyValue(value) ? '--' : value;
|
|
470
|
+
return value === undefined ? '' : this._isEmptyValue(value) ? '--' : value;
|
|
477
471
|
}
|
|
478
472
|
_getTooltip(value) {
|
|
479
473
|
return this._isEmptyValue(value) ? '' : value;
|
|
@@ -482,38 +476,41 @@ class MtxGridCellComponent {
|
|
|
482
476
|
return this._isContainHTML(value) || this._isEmptyValue(value) ? '' : value;
|
|
483
477
|
}
|
|
484
478
|
_formatSummary(data, colDef) {
|
|
485
|
-
if (
|
|
479
|
+
if (typeof colDef.summary === 'string') {
|
|
486
480
|
return colDef.summary;
|
|
487
481
|
}
|
|
488
|
-
else if (
|
|
482
|
+
else if (typeof colDef.summary === 'function') {
|
|
489
483
|
return colDef.summary(this._dataGridSrv.getColData(data, colDef), colDef);
|
|
490
484
|
}
|
|
491
485
|
}
|
|
492
|
-
_handleActionConfirm(event, title, description = '', okColor = 'primary', okText = 'OK', closeColor, closeText = 'CLOSE', fn, data) {
|
|
493
|
-
event.preventDefault();
|
|
494
|
-
event.stopPropagation();
|
|
495
|
-
this._dialog.open({
|
|
496
|
-
title,
|
|
497
|
-
description,
|
|
498
|
-
buttons: [
|
|
499
|
-
{
|
|
500
|
-
color: okColor,
|
|
501
|
-
text: okText,
|
|
502
|
-
onClick: () => (fn ? fn(data) : {}),
|
|
503
|
-
},
|
|
504
|
-
{ color: closeColor, text: closeText, onClick: () => { } },
|
|
505
|
-
],
|
|
506
|
-
});
|
|
507
|
-
}
|
|
508
486
|
_handleActionClick(event, btn, rowData) {
|
|
487
|
+
var _a;
|
|
509
488
|
event.preventDefault();
|
|
510
489
|
event.stopPropagation();
|
|
511
|
-
if (btn.
|
|
512
|
-
|
|
490
|
+
if (btn.pop) {
|
|
491
|
+
this._dialog.open({
|
|
492
|
+
title: btn.popTitle,
|
|
493
|
+
description: btn.popDescription,
|
|
494
|
+
buttons: [
|
|
495
|
+
{
|
|
496
|
+
color: btn.popOkColor || 'primary',
|
|
497
|
+
text: btn.popOkText || 'OK',
|
|
498
|
+
onClick: () => (btn.click ? btn.click(rowData) : {}),
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
color: btn.popCloseColor,
|
|
502
|
+
text: btn.popCloseText || 'CLOSE',
|
|
503
|
+
onClick: () => { },
|
|
504
|
+
},
|
|
505
|
+
],
|
|
506
|
+
});
|
|
507
|
+
}
|
|
508
|
+
else {
|
|
509
|
+
(_a = btn.click) === null || _a === void 0 ? void 0 : _a.call(btn, rowData);
|
|
513
510
|
}
|
|
514
511
|
}
|
|
515
512
|
/** Preview enlarged image */
|
|
516
|
-
|
|
513
|
+
_handleImagePreview(urlStr) {
|
|
517
514
|
const imgs = [];
|
|
518
515
|
this._dataGridSrv.str2arr(urlStr).forEach((url, index) => {
|
|
519
516
|
imgs.push({ title: index + 1 + '', src: url });
|
|
@@ -525,14 +522,14 @@ class MtxGridCellComponent {
|
|
|
525
522
|
title: imgs.length > 1,
|
|
526
523
|
footerToolbar,
|
|
527
524
|
};
|
|
528
|
-
const
|
|
525
|
+
const photoviewer = new PhotoViewer(imgs, options);
|
|
529
526
|
}
|
|
530
527
|
}
|
|
531
528
|
MtxGridCellComponent.decorators = [
|
|
532
529
|
{ type: Component, args: [{
|
|
533
530
|
selector: 'mtx-grid-cell',
|
|
534
531
|
exportAs: 'mtxGridCell',
|
|
535
|
-
template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n [innerHTML]=\"_getText(_formatSummary(data, colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(colDef.formatter
|
|
532
|
+
template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(_formatSummary(data, colDef))\"\r\n [innerHTML]=\"_getText(_formatSummary(data, colDef))\">\r\n</span>\r\n\r\n<!-- Custom formatting -->\r\n<ng-template #customCellFormattingTpl>\r\n <span *ngIf=\"colDef.formatter; else defaultCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\r\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\r\n </span>\r\n</ng-template>\r\n\r\n<!-- Default formatting -->\r\n<ng-template #defaultCellFormattingTpl>\r\n <ng-container [ngSwitch]=\"colDef.type\">\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-list *ngIf=\"colDef.tag && colDef.tag[_colValue]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_colValue].color]\">\r\n {{colDef.tag[_colValue].text}}\r\n </mat-chip>\r\n </mat-chip-list>\r\n <ng-template #tagEmptyTpl>{{_colValue}}</ng-template>\r\n </ng-container>\r\n <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container *ngFor=\"let btn of colDef.buttons;\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <button *ngIf=\"btn.type==='basic'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n mat-button [color]=\"btn.color || 'primary'\" [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionClick($event, btn, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\" *ngIf=\"btn.icon\">{{btn.icon}}</mat-icon>\r\n <span>{{btn.text | toObservable | async}}</span>\r\n </button>\r\n <button *ngIf=\"!btn.type || btn.type==='icon'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class||'']\"\r\n mat-icon-button [color]=\"btn.color || 'primary'\" [disabled]=\"btn.disabled\"\r\n [matTooltip]=\"btn.tooltip | toObservable | async\"\r\n (click)=\"_handleActionClick($event, btn, rowData)\">\r\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_colValue\" target=\"_blank\">{{_colValue}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_colValue\" (click)=\"_handleImagePreview(_colValue)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span [title]=\"_getTooltip(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | number: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Currency -->\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <span [title]=\"_getTooltip(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n colDef.typeParameter?.display :\r\n colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | currency: colDef.typeParameter?.currencyCode :\r\n colDef.typeParameter?.display :\r\n colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Percent -->\r\n <ng-container *ngSwitchCase=\"'percent'\">\r\n <span [title]=\"_getTooltip(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | percent: colDef.typeParameter?.digitsInfo :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <span [title]=\"_getTooltip(_colValue | date: colDef.typeParameter?.format :\r\n colDef.typeParameter?.timezone :\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_colValue | date: colDef.typeParameter?.format :\r\n colDef.typeParameter?.timezone :\r\n colDef.typeParameter?.locale)}}\r\n </span>\r\n </ng-container>\r\n <!-- Default -->\r\n <ng-container *ngSwitchDefault>\r\n <span [title]=\"_getTooltip(_colValue)\">{{_getText(_colValue)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n",
|
|
536
533
|
encapsulation: ViewEncapsulation.None,
|
|
537
534
|
styles: [".mtx-grid-action-button .mat-icon{width:18px;height:18px;font-size:18px;line-height:18px}.mtx-grid-img{display:block;width:30px;border-radius:4px;cursor:pointer}"]
|
|
538
535
|
},] }
|
|
@@ -587,7 +584,7 @@ MtxGridColumnMenuComponent.decorators = [
|
|
|
587
584
|
{ type: Component, args: [{
|
|
588
585
|
selector: 'mtx-grid-column-menu',
|
|
589
586
|
exportAs: 'mtxGridColumnMenu',
|
|
590
|
-
template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\"\r\n *ngIf=\"sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <mat-icon cdkDragHandle>drag_handle</mat-icon>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\r\n *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\"\r\n [disabled]=\"col.disabled\"\r\n (change)=\"_handleSelection($event)\">\r\n {{col.label | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.label | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n",
|
|
587
|
+
template: "<ng-container [ngSwitch]=\"buttonType\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'mini-fab'\">\r\n <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\r\n [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\" [matMenuTriggerFor]=\"menu\">\r\n <mat-icon *ngIf=\"buttonIcon\">{{buttonIcon}}</mat-icon> {{buttonText}}\r\n </button>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\r\n <div class=\"mtx-grid-column-menu-content\"\r\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\r\n <div class=\"mtx-grid-column-menu-header\" *ngIf=\"showHeader\">\r\n <ng-template [ngIf]=\"headerTemplate\" [ngIfElse]=\"defaultHeaderTpl\">\r\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultHeaderTpl>{{headerText}}</ng-template>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-body\">\r\n <div class=\"mtx-grid-column-menu-list\"\r\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\"\r\n *ngIf=\"sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\"\r\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\r\n <mat-icon cdkDragHandle>drag_handle</mat-icon>\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-list\" *ngIf=\"!sortable\">\r\n <div class=\"mtx-grid-column-menu-item\" *ngFor=\"let col of columns\">\r\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\r\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mtx-grid-column-menu-footer\" *ngIf=\"showFooter\">\r\n <ng-template [ngIf]=\"footerTemplate\" [ngIfElse]=\"defaultFooterTpl\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\r\n </ng-template>\r\n <ng-template #defaultFooterTpl>{{footerText}}</ng-template>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n\r\n<ng-template #checkboxList let-col>\r\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\r\n *ngIf=\"selectable\"\r\n [(ngModel)]=\"col[selectableChecked]\"\r\n [disabled]=\"col.disabled\"\r\n (change)=\"_handleSelection($event)\">\r\n {{col.label | toObservable | async}}\r\n </mat-checkbox>\r\n <span class=\"mtx-grid-column-menu-item-label\" *ngIf=\"!selectable\">\r\n {{col.label | toObservable | async}}\r\n </span>\r\n</ng-template>\r\n",
|
|
591
588
|
encapsulation: ViewEncapsulation.None,
|
|
592
589
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
593
590
|
styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:16px}.mtx-grid-column-menu-footer,.mtx-grid-column-menu-header{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center;padding:4px 0}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}"]
|