@ng-matero/extensions 10.16.5 → 10.16.6
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 +18 -7
- 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 +34 -61
- package/bundles/mtxGrid.umd.js.map +1 -1
- package/bundles/mtxGrid.umd.min.js +2 -2
- package/bundles/mtxGrid.umd.min.js.map +1 -1
- package/bundles/mtxPopover.umd.js +7 -2
- 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 +16 -10
- package/esm2015/data-grid/cell.component.js +34 -57
- package/esm2015/data-grid/column-menu.component.js +2 -2
- package/esm2015/data-grid/grid.component.js +3 -3
- package/esm2015/popover/popover.js +8 -3
- package/esm2015/select/select.component.js +2 -1
- package/esm2015/split-pane/split.component.js +2 -2
- package/fesm2015/mtxCheckboxGroup.js +13 -7
- package/fesm2015/mtxCheckboxGroup.js.map +1 -1
- package/fesm2015/mtxGrid.js +36 -59
- package/fesm2015/mtxGrid.js.map +1 -1
- package/fesm2015/mtxPopover.js +7 -2
- 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/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/checkbox-group.interface.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 { 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","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","export interface MtxCheckboxGroupOption {\n ariaDescribedby?: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n label?: any;\n value?: any;\n color?: string;\n checked?: boolean;\n disabled?: boolean;\n disableRipple?: boolean;\n indeterminate?: boolean;\n labelPosition?: 'before' | 'after';\n id?: string;\n name?: string | null;\n required?: boolean;\n [k: string]: any;\n}\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/checkbox-group.interface.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n QueryList,\n ViewEncapsulation,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } 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","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","export interface MtxCheckboxGroupOption {\n ariaDescribedby?: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n label?: any;\n value?: any;\n color?: string;\n checked?: boolean;\n disabled?: boolean;\n disableRipple?: boolean;\n indeterminate?: boolean;\n labelPosition?: 'before' | 'after';\n id?: string;\n name?: string | null;\n required?: boolean;\n [k: string]: any;\n}\n"],"names":[],"mappings":"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"}
|
package/fesm2015/mtxGrid.js
CHANGED
|
@@ -551,7 +551,7 @@ MtxGridComponent.decorators = [
|
|
|
551
551
|
{ type: Component, args: [{
|
|
552
552
|
selector: 'mtx-grid',
|
|
553
553
|
exportAs: 'mtxGrid',
|
|
554
|
-
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<!-- Paginator -->\r\n<mat-paginator [class.mat-paginator-hidden]=\"!showPaginator || _hasNoResult\"\r\n [showFirstLastButtons]=\"showFirstLastButtons\"\r\n [length]=\"length\"\r\n [pageIndex]=\"pageIndex\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n [hidePageSize]=\"hidePageSize\"\r\n (page)=\"_handlePage($event)\"\r\n [disabled]=\"pageDisabled\">\r\n</mat-paginator>\r\n\r\n<!-- 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",
|
|
554
|
+
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<!-- Paginator -->\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\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",
|
|
555
555
|
host: {
|
|
556
556
|
class: 'mtx-grid',
|
|
557
557
|
},
|
|
@@ -559,7 +559,7 @@ MtxGridComponent.decorators = [
|
|
|
559
559
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
560
560
|
animations: [
|
|
561
561
|
trigger('expansion', [
|
|
562
|
-
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
562
|
+
state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
563
563
|
state('expanded', style({ height: '*', visibility: 'visible' })),
|
|
564
564
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
565
565
|
]),
|
|
@@ -850,20 +850,6 @@ class MtxGridCellComponent {
|
|
|
850
850
|
get _colValue() {
|
|
851
851
|
return this._dataGridSrv.getCellValue(this.rowData, this.colDef);
|
|
852
852
|
}
|
|
853
|
-
/**
|
|
854
|
-
* @param {?} fn
|
|
855
|
-
* @return {?}
|
|
856
|
-
*/
|
|
857
|
-
_isString(fn) {
|
|
858
|
-
return Object.prototype.toString.call(fn) === '[object String]';
|
|
859
|
-
}
|
|
860
|
-
/**
|
|
861
|
-
* @param {?} fn
|
|
862
|
-
* @return {?}
|
|
863
|
-
*/
|
|
864
|
-
_isFunction(fn) {
|
|
865
|
-
return Object.prototype.toString.call(fn) === '[object Function]';
|
|
866
|
-
}
|
|
867
853
|
/**
|
|
868
854
|
* @param {?} value
|
|
869
855
|
* @return {?}
|
|
@@ -883,7 +869,7 @@ class MtxGridCellComponent {
|
|
|
883
869
|
* @return {?}
|
|
884
870
|
*/
|
|
885
871
|
_getText(value) {
|
|
886
|
-
return this._isEmptyValue(value) ? '--' : value;
|
|
872
|
+
return value === undefined ? '' : this._isEmptyValue(value) ? '--' : value;
|
|
887
873
|
}
|
|
888
874
|
/**
|
|
889
875
|
* @param {?} value
|
|
@@ -905,47 +891,13 @@ class MtxGridCellComponent {
|
|
|
905
891
|
* @return {?}
|
|
906
892
|
*/
|
|
907
893
|
_formatSummary(data, colDef) {
|
|
908
|
-
if (
|
|
894
|
+
if (typeof colDef.summary === 'string') {
|
|
909
895
|
return colDef.summary;
|
|
910
896
|
}
|
|
911
|
-
else if (
|
|
897
|
+
else if (typeof colDef.summary === 'function') {
|
|
912
898
|
return ((/** @type {?} */ (colDef.summary)))(this._dataGridSrv.getColData(data, colDef), colDef);
|
|
913
899
|
}
|
|
914
900
|
}
|
|
915
|
-
/**
|
|
916
|
-
* @param {?} event
|
|
917
|
-
* @param {?} title
|
|
918
|
-
* @param {?=} description
|
|
919
|
-
* @param {?=} okColor
|
|
920
|
-
* @param {?=} okText
|
|
921
|
-
* @param {?=} closeColor
|
|
922
|
-
* @param {?=} closeText
|
|
923
|
-
* @param {?=} fn
|
|
924
|
-
* @param {?=} data
|
|
925
|
-
* @return {?}
|
|
926
|
-
*/
|
|
927
|
-
_handleActionConfirm(event, title, description = '', okColor = 'primary', okText = 'OK', closeColor, closeText = 'CLOSE', fn, data) {
|
|
928
|
-
event.preventDefault();
|
|
929
|
-
event.stopPropagation();
|
|
930
|
-
this._dialog.open({
|
|
931
|
-
title,
|
|
932
|
-
description,
|
|
933
|
-
buttons: [
|
|
934
|
-
{
|
|
935
|
-
color: okColor,
|
|
936
|
-
text: okText,
|
|
937
|
-
onClick: (/**
|
|
938
|
-
* @return {?}
|
|
939
|
-
*/
|
|
940
|
-
() => (fn ? fn(data) : {})),
|
|
941
|
-
},
|
|
942
|
-
{ color: closeColor, text: closeText, onClick: (/**
|
|
943
|
-
* @return {?}
|
|
944
|
-
*/
|
|
945
|
-
() => { }) },
|
|
946
|
-
],
|
|
947
|
-
});
|
|
948
|
-
}
|
|
949
901
|
/**
|
|
950
902
|
* @param {?} event
|
|
951
903
|
* @param {?} btn
|
|
@@ -953,10 +905,35 @@ class MtxGridCellComponent {
|
|
|
953
905
|
* @return {?}
|
|
954
906
|
*/
|
|
955
907
|
_handleActionClick(event, btn, rowData) {
|
|
908
|
+
var _a;
|
|
956
909
|
event.preventDefault();
|
|
957
910
|
event.stopPropagation();
|
|
958
|
-
if (btn.
|
|
959
|
-
|
|
911
|
+
if (btn.pop) {
|
|
912
|
+
this._dialog.open({
|
|
913
|
+
title: btn.popTitle,
|
|
914
|
+
description: btn.popDescription,
|
|
915
|
+
buttons: [
|
|
916
|
+
{
|
|
917
|
+
color: btn.popOkColor || 'primary',
|
|
918
|
+
text: btn.popOkText || 'OK',
|
|
919
|
+
onClick: (/**
|
|
920
|
+
* @return {?}
|
|
921
|
+
*/
|
|
922
|
+
() => (btn.click ? btn.click(rowData) : {})),
|
|
923
|
+
},
|
|
924
|
+
{
|
|
925
|
+
color: btn.popCloseColor,
|
|
926
|
+
text: btn.popCloseText || 'CLOSE',
|
|
927
|
+
onClick: (/**
|
|
928
|
+
* @return {?}
|
|
929
|
+
*/
|
|
930
|
+
() => { }),
|
|
931
|
+
},
|
|
932
|
+
],
|
|
933
|
+
});
|
|
934
|
+
}
|
|
935
|
+
else {
|
|
936
|
+
(_a = btn.click) === null || _a === void 0 ? void 0 : _a.call(btn, rowData);
|
|
960
937
|
}
|
|
961
938
|
}
|
|
962
939
|
/**
|
|
@@ -964,7 +941,7 @@ class MtxGridCellComponent {
|
|
|
964
941
|
* @param {?} urlStr
|
|
965
942
|
* @return {?}
|
|
966
943
|
*/
|
|
967
|
-
|
|
944
|
+
_handleImagePreview(urlStr) {
|
|
968
945
|
/** @type {?} */
|
|
969
946
|
const imgs = [];
|
|
970
947
|
this._dataGridSrv.str2arr(urlStr).forEach((/**
|
|
@@ -985,14 +962,14 @@ class MtxGridCellComponent {
|
|
|
985
962
|
footerToolbar,
|
|
986
963
|
};
|
|
987
964
|
/** @type {?} */
|
|
988
|
-
const
|
|
965
|
+
const photoviewer = new PhotoViewer(imgs, options);
|
|
989
966
|
}
|
|
990
967
|
}
|
|
991
968
|
MtxGridCellComponent.decorators = [
|
|
992
969
|
{ type: Component, args: [{
|
|
993
970
|
selector: 'mtx-grid-cell',
|
|
994
971
|
exportAs: 'mtxGridCell',
|
|
995
|
-
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
|
|
972
|
+
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",
|
|
996
973
|
encapsulation: ViewEncapsulation.None,
|
|
997
974
|
styles: [".photoviewer-modal{color:#333;cursor:default;height:320px;outline:none;overflow:visible!important;position:absolute;width:320px;z-index:1090}.photoviewer-inner{background-color:hsla(0,0%,100%,.92);border:1px solid rgba(0,0,0,.64);border-radius:6px;bottom:-1px;box-shadow:0 2px 10px 2px rgba(0,0,0,.32);cursor:inherit;left:-1px;overflow:hidden;position:absolute;right:-1px;top:-1px}.photoviewer-maximize{height:100%;left:0;position:fixed;top:0;width:100%}.photoviewer-maximize .photoviewer-inner{border-radius:0}.photoviewer-maximize .photoviewer-resizable-handle{display:none}.photoviewer-toolbar{font-size:0}.photoviewer-button{background:none;border-radius:0;border-width:0;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-block;font-size:16px;height:40px;line-height:1;margin:0;min-width:40px;outline:none;text-align:center}.photoviewer-button:hover{color:#111}.photoviewer-button:focus{background-color:rgba(0,0,0,.08)}.photoviewer-button svg{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.photoviewer-header{height:30px;position:relative;z-index:2}.photoviewer-header .photoviewer-toolbar{float:right}[dir=rtl] .photoviewer-header .photoviewer-toolbar{float:left}.photoviewer-header .photoviewer-button{height:30px}.photoviewer-header .photoviewer-button:hover{background-color:rgba(0,0,0,.08)}.photoviewer-header .photoviewer-button-close:hover{background-color:#ff4545;color:#fff}.photoviewer-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;font-size:14px;line-height:1;overflow:hidden;padding:8px 10px;text-overflow:ellipsis;user-select:none;white-space:nowrap}.photoviewer-stage{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.64);border-top:1px solid rgba(0,0,0,.64);bottom:40px;left:0;overflow:hidden;position:absolute;right:0;top:30px;z-index:1}.photoviewer-stage.stage-ready{font-size:0;text-align:center}.photoviewer-stage.stage-ready:before{content:\"\";display:inline-block;height:100%;overflow:hidden;vertical-align:middle}.photoviewer-image{display:inline-block;max-width:none;min-width:auto;position:absolute}.photoviewer-image.image-ready{max-height:100%;max-width:100%;position:static;vertical-align:middle}.photoviewer-footer{bottom:0;height:40px;position:absolute;text-align:center;width:100%;z-index:2}.photoviewer-footer .photoviewer-toolbar{display:inline-block}.photoviewer-resizable-handle{position:absolute;z-index:10}.photoviewer-resizable-handle-e{bottom:0;cursor:e-resize;left:auto;right:-5px;top:0;width:10px}.photoviewer-resizable-handle-s{bottom:-5px;cursor:s-resize;height:10px;left:0;right:0;top:auto}.photoviewer-resizable-handle-w{bottom:0;cursor:w-resize;left:-5px;right:auto;top:0;width:10px}.photoviewer-resizable-handle-n{bottom:auto;cursor:n-resize;height:10px;left:0;right:0;top:-5px}.photoviewer-resizable-handle-se{bottom:-5px;cursor:se-resize;height:10px;left:auto;right:-5px;top:auto;width:10px}.photoviewer-resizable-handle-sw{bottom:-5px;cursor:sw-resize;height:10px;left:-5px;right:auto;top:auto;width:10px}.photoviewer-resizable-handle-nw{bottom:auto;cursor:nw-resize;height:10px;left:-5px;right:auto;top:-5px;width:10px}.photoviewer-resizable-handle-ne{bottom:auto;cursor:ne-resize;height:10px;left:auto;right:-5px;top:-5px;width:10px}:-moz-full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-moz-full-screen .photoviewer-footer,:-moz-full-screen .photoviewer-header,:-moz-full-screen .photoviewer-resizable-handle{display:none}:-moz-full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:full-screen .photoviewer-footer,:full-screen .photoviewer-header,:full-screen .photoviewer-resizable-handle{display:none}:full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:-webkit-full-screen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-ms-fullscreen{height:100%!important;left:0!important;top:0!important;width:100%!important}:fullscreen{height:100%!important;left:0!important;top:0!important;width:100%!important}:-webkit-full-screen .photoviewer-footer,:-webkit-full-screen .photoviewer-header,:-webkit-full-screen .photoviewer-resizable-handle{display:none}:-ms-fullscreen .photoviewer-footer,:-ms-fullscreen .photoviewer-header,:-ms-fullscreen .photoviewer-resizable-handle{display:none}:fullscreen .photoviewer-footer,:fullscreen .photoviewer-header,:fullscreen .photoviewer-resizable-handle{display:none}:-webkit-full-screen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:-ms-fullscreen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}:fullscreen .photoviewer-stage{background-color:#000;border-width:0;bottom:0;left:0;right:0;top:0}::-webkit-backdrop{background-color:#000}::backdrop{background-color:#000}::-ms-backdrop{background-color:#000}.is-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.is-grabbing{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.photoviewer-loader{bottom:40px;color:#333;left:0;position:absolute;right:0;text-align:center;top:30px;z-index:2}.photoviewer-loader:before{-webkit-animation:photoviewerLoading 1s linear infinite;animation:photoviewerLoading 1s linear infinite;border:5px solid rgba(0,0,0,.5);border-left-color:hsla(0,0%,100%,.5);border-radius:100%;box-sizing:border-box;height:36px;position:relative;width:36px}.photoviewer-loader:after,.photoviewer-loader:before{content:\"\";display:inline-block;vertical-align:middle}.photoviewer-loader:after{height:100%;overflow:hidden;width:0}@-webkit-keyframes photoviewerLoading{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}@keyframes photoviewerLoading{0%{transform:rotate(0deg) translateZ(0)}to{transform:rotate(1turn) translateZ(0)}}.mtx-grid-action-button .mat-icon{font-size:18px;height:18px;line-height:18px;width:18px}.mtx-grid-img{border-radius:4px;cursor:pointer;display:block;width:30px}"]
|
|
998
975
|
}] }
|
|
@@ -1101,7 +1078,7 @@ MtxGridColumnMenuComponent.decorators = [
|
|
|
1101
1078
|
{ type: Component, args: [{
|
|
1102
1079
|
selector: 'mtx-grid-column-menu',
|
|
1103
1080
|
exportAs: 'mtxGridColumnMenu',
|
|
1104
|
-
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",
|
|
1081
|
+
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",
|
|
1105
1082
|
encapsulation: ViewEncapsulation.None,
|
|
1106
1083
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1107
1084
|
styles: [".mtx-grid-column-menu .mat-menu-content{padding:0}.mtx-grid-column-menu-body{padding:16px}.mtx-grid-column-menu-footer,.mtx-grid-column-menu-header{padding:8px 16px;position:-webkit-sticky;position:sticky;z-index:1}.mtx-grid-column-menu-header{top:0}.mtx-grid-column-menu-footer{bottom:0}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-list.cdk-drop-list .mtx-grid-column-menu-item-label{padding:0 4px}.mtx-grid-column-menu-item{align-items:center;display:flex;flex-direction:row;padding:4px 0}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{cursor:no-drop;opacity:.35}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}"]
|