@ng-matero/extensions
Version:
Angular Material Extensions
690 lines (673 loc) • 201 kB
JavaScript
import { moveItemInArray, CdkDrag, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
import { NgTemplateOutlet, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, ElementRef, NgZone, Directive, DOCUMENT, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, ViewContainerRef, ChangeDetectorRef, Input, NgModule, Pipe, KeyValueDiffers, EventEmitter, Output, InjectionToken, booleanAttribute, ContentChildren } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { MatBadge, MatBadgeModule } from '@angular/material/badge';
import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipListbox, MatChip, MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatSort, MatSortHeader, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatTableModule } from '@angular/material/table';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
import { CdkFlexTableResizeStrategy, ResizeStrategy, ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeNotifierSource, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, ColumnResize, ResizeOverlayHandle, ResizeRef, Resizable } from '@ng-matero/extensions/column-resize';
export { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER } from '@ng-matero/extensions/column-resize';
import { Directionality } from '@angular/cdk/bidi';
import { CdkColumnDef } from '@angular/cdk/table';
import { MtxToObservablePipe, MtxIsTemplateRefPipe, MtxPipesModule } from '@ng-matero/extensions/core';
import { MtxDialog, MtxDialogModule } from '@ng-matero/extensions/dialog';
import { SelectionModel } from '@angular/cdk/collections';
import { _animationsDisabled } from '@angular/material/core';
import { isObservable } from 'rxjs';
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
/**
* Overrides CdkFlexTableResizeStrategy to match mat-column elements.
*/
class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
getColumnCssClass(cssFriendlyColumnName) {
return `mat-column-${cssFriendlyColumnName}`;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatFlexTableResizeStrategy }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
type: Injectable
}] });
const FLEX_RESIZE_STRATEGY_PROVIDER = {
provide: ResizeStrategy,
useClass: MatFlexTableResizeStrategy,
};
const PROVIDERS = [
ColumnResizeNotifier,
HeaderRowEventDispatcher,
ColumnResizeNotifierSource,
{ provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },
];
const TABLE_PROVIDERS = [
...PROVIDERS,
TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,
];
const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
const TABLE_HOST_BINDINGS = {
class: 'mat-column-resize-table',
};
const FLEX_HOST_BINDINGS = {
class: 'mat-column-resize-flex',
};
class AbstractMatColumnResize extends ColumnResize {
getTableHeight() {
const table = this.elementRef.nativeElement;
const tableParent = table.parentNode;
const isTableContainer = tableParent.classList.contains('mat-table-container');
return isTableContainer ? tableParent.offsetHeight : table.offsetHeight;
}
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
/**
* Explicitly enables column resizing for a table-based mat-table.
* Individual columns must be annotated specifically.
*/
class MatColumnResize extends AbstractMatColumnResize {
constructor() {
super(...arguments);
this.columnResizeNotifier = inject(ColumnResizeNotifier);
this.elementRef = inject(ElementRef);
this.eventDispatcher = inject(HeaderRowEventDispatcher);
this.ngZone = inject(NgZone);
this.notifier = inject(ColumnResizeNotifierSource);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MatColumnResize, isStandalone: true, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResize, decorators: [{
type: Directive,
args: [{
selector: 'table[mat-table][columnResize]',
host: TABLE_HOST_BINDINGS,
providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }],
}]
}] });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
/**
* Explicitly enables column resizing for a flexbox-based mat-table.
* Individual columns must be annotated specifically.
*/
class MatColumnResizeFlex extends AbstractMatColumnResize {
constructor() {
super(...arguments);
this.columnResizeNotifier = inject(ColumnResizeNotifier);
this.elementRef = inject(ElementRef);
this.eventDispatcher = inject(HeaderRowEventDispatcher);
this.ngZone = inject(NgZone);
this.notifier = inject(ColumnResizeNotifierSource);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MatColumnResizeFlex, isStandalone: true, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
type: Directive,
args: [{
selector: 'mat-table[columnResize]',
host: FLEX_HOST_BINDINGS,
providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }],
}]
}] });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
/**
* Component shown over the edge of a resizable column that is responsible
* for handling column resize mouse events and displaying a vertical line along the column edge.
*/
class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
constructor() {
super(...arguments);
this.columnDef = inject(CdkColumnDef);
this.columnResize = inject(ColumnResize);
this.directionality = inject(Directionality);
this.elementRef = inject(ElementRef);
this.eventDispatcher = inject(HeaderRowEventDispatcher);
this.ngZone = inject(NgZone);
this.resizeNotifier = inject(ColumnResizeNotifierSource);
this.resizeRef = inject(ResizeRef);
this.styleScheduler = inject(_COALESCED_STYLE_SCHEDULER);
this.document = inject(DOCUMENT);
}
updateResizeActive(active) {
super.updateResizeActive(active);
const originHeight = this.resizeRef.origin.nativeElement.offsetHeight;
this.topElement.nativeElement.style.height = `${originHeight}px`;
this.resizeRef.overlayRef.updateSize({
height: active
? this.columnResize.getTableHeight()
: originHeight,
});
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: MatColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: { class: 'mat-column-resize-overlay-thumb' },
template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>',
}]
}], propDecorators: { topElement: [{
type: ViewChild,
args: ['top', { static: true }]
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
class AbstractMatResizable extends Resizable {
constructor() {
super(...arguments);
this.minWidthPxInternal = 32;
}
getInlineHandleCssClassName() {
return 'mat-resizable-handle';
}
getOverlayHandleComponentType() {
return MatColumnResizeOverlayHandle;
}
}
const RESIZABLE_HOST_BINDINGS = {
class: 'mat-resizable',
};
const RESIZABLE_INPUTS = [
'minWidthPx: matResizableMinWidthPx',
'maxWidthPx: matResizableMaxWidthPx',
];
/**
* Explicitly enables column resizing for a mat-header-cell.
*/
class MatResizable extends AbstractMatResizable {
constructor() {
super(...arguments);
this.columnDef = inject(CdkColumnDef);
this.columnResize = inject(ColumnResize);
this.directionality = inject(Directionality);
this.elementRef = inject(ElementRef);
this.eventDispatcher = inject(HeaderRowEventDispatcher);
this.injector = inject(Injector);
this.ngZone = inject(NgZone);
this.overlay = inject(Overlay);
this.resizeNotifier = inject(ColumnResizeNotifierSource);
this.resizeStrategy = inject(ResizeStrategy);
this.styleScheduler = inject(_COALESCED_STYLE_SCHEDULER);
this.viewContainerRef = inject(ViewContainerRef);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.document = inject(DOCUMENT);
this.isResizable = true;
}
get resizableClass() {
return this.isResizable ? RESIZABLE_HOST_BINDINGS.class : '';
}
get resizable() {
return this.isResizable;
}
set resizable(newValue) {
this.isResizable = newValue == null || newValue === '' || newValue;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "resizableClass" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatResizable, decorators: [{
type: Directive,
args: [{
selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
host: {
'[class]': 'resizableClass',
},
inputs: RESIZABLE_INPUTS,
}]
}], propDecorators: { resizable: [{
type: Input
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
class MatColumnResizeCommonModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeCommonModule, imports: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeCommonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
type: NgModule,
args: [{
imports: ENTRY_COMMON_COMPONENTS,
exports: ENTRY_COMMON_COMPONENTS,
}]
}] });
const IMPORTS = [OverlayModule, MatColumnResizeCommonModule];
class MatColumnResizeModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeModule, imports: [OverlayModule, MatColumnResizeCommonModule, MatColumnResize, MatColumnResizeFlex, MatResizable], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MatColumnResizeModule, decorators: [{
type: NgModule,
args: [{
imports: [...IMPORTS, MatColumnResize, MatColumnResizeFlex, MatResizable],
exports: [MatColumnResize, MatColumnResizeFlex, MatResizable],
}]
}] });
class MtxGridUtils {
constructor() { }
/**
* Get cell's value based on the data and column's field (e.g. `a.b.c`)
* @param rowData Row data
* @param colDef Column definition
* @returns
*/
getCellValue(rowData, colDef) {
const keyArr = colDef.field ? colDef.field.split('.') : [];
let tmp = '';
keyArr.forEach((key, i) => {
if (i === 0) {
tmp = rowData[key];
}
else {
tmp = tmp && tmp[key];
}
});
return tmp;
}
/**
* Get all data of a col
* @param data All data
* @param colDef Column definition
* @returns
*/
getColData(data, colDef) {
return data.map(rowData => this.getCellValue(rowData, colDef));
}
/**
* Whether the value is empty (`null`, `undefined`, `''`, `[]`)
* @param value
* @returns
*/
isEmpty(value) {
return value == null || value.toString() === '';
}
/**
* Whether the value contain HTML
* @param value
* @returns
*/
isContainHTML(value) {
return /<\/?[a-z][\s\S]*>/i.test(value);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridUtils, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridUtils, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [] });
class MtxGridColClassPipe {
transform(colDef, rowData, rowChangeRecord, currentValue) {
if (typeof colDef.class === 'string') {
return colDef.class;
}
else if (typeof colDef.class === 'function') {
return colDef.class(rowData, colDef);
}
return '';
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridColClassPipe, isStandalone: true, name: "colClass" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
type: Pipe,
args: [{ name: 'colClass' }]
}] });
class MtxGridRowClassPipe {
transform(rowData, index, dataIndex, rowClassFormatter) {
const rowIndex = index === undefined ? dataIndex : index;
const classList = rowIndex % 2 === 1 ? ['mat-row-odd'] : [];
if (rowClassFormatter) {
for (const key of Object.keys(rowClassFormatter)) {
if (rowClassFormatter[key](rowData, rowIndex)) {
classList.push(key);
}
}
}
return classList.join(' ');
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridRowClassPipe, isStandalone: true, name: "rowClass" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
type: Pipe,
args: [{ name: 'rowClass' }]
}] });
class MtxGridCellActionsPipe {
transform(btns, rowData, rowChangeRecord, currentValue) {
if (typeof btns === 'function') {
return btns(rowData);
}
else if (Array.isArray(btns)) {
return btns;
}
return [];
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionsPipe, isStandalone: true, name: "cellActions" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActions' }]
}] });
class MtxGridCellActionTooltipPipe {
transform(btn) {
if (typeof btn.tooltip === 'string' || isObservable(btn.tooltip)) {
return { message: btn.tooltip };
}
else {
return btn.tooltip || { message: '' };
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActionTooltip' }]
}] });
class MtxGridCellActionBadgePipe {
transform(btn) {
if (typeof btn.badge === 'number' || typeof btn.badge === 'string' || isObservable(btn.badge)) {
return { content: btn.badge };
}
else {
return btn.badge || { content: '' };
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActionBadge' }]
}] });
class MtxGridCellActionDisablePipe {
transform(btn, rowData, rowChangeRecord, currentValue) {
if (typeof btn.disabled === 'boolean') {
return btn.disabled;
}
else if (typeof btn.disabled === 'function') {
return btn.disabled(rowData);
}
else {
return false;
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActionDisable' }]
}] });
class MtxGridCellSummaryPipe {
constructor() {
this.utils = inject(MtxGridUtils);
}
transform(data, colDef) {
if (typeof colDef.summary === 'string') {
return colDef.summary;
}
else if (typeof colDef.summary === 'function') {
return colDef.summary(this.utils.getColData(data, colDef), colDef);
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellSummaryPipe, isStandalone: true, name: "cellSummary" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
type: Pipe,
args: [{ name: 'cellSummary' }]
}] });
class MtxGridMenu {
constructor() {
this.items = [];
this.data = {};
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MtxGridMenu, isStandalone: true, selector: "mtx-grid-menu", inputs: { items: "items", data: "data" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, static: true }], exportAs: ["mtxGridMenu"], ngImport: i0, template: `
<mat-menu class="mtx-grid-menu">
@for (item of items; track $index) {
@if (!item.iif || item.iif(data)) {
@if (item.children && item.children.length > 0) {
<button
mat-menu-item
[matMenuTriggerFor]="gridMenu.menu"
[disabled]="item | cellActionDisable: data"
[class]="item.class"
(click)="item.click?.(data)"
>
<mat-icon *ngTemplateOutlet="iconTpl; context: { $implicit: item }" />
<span>{{ item.text }}</span>
</button>
<mtx-grid-menu #gridMenu [items]="item.children" [data]="data" />
} @else {
<button
mat-menu-item
[disabled]="item | cellActionDisable: data"
[class]="item.class"
(click)="item.click?.(data)"
>
<mat-icon *ngTemplateOutlet="iconTpl; context: { $implicit: item }" />
<span>{{ item.text }}</span>
</button>
}
}
}
</mat-menu>
<ng-template #iconTpl let-item>
@if (item.icon) {
<mat-icon class="mtx-grid-icon">{{ item.icon }}</mat-icon>
} @else if (item.fontIcon) {
<mat-icon class="mtx-grid-icon" [fontIcon]="item.fontIcon"></mat-icon>
} @else if (item.svgIcon) {
<mat-icon class="mtx-grid-icon" [svgIcon]="item.svgIcon"></mat-icon>
}
</ng-template>
`, isInline: true, dependencies: [{ kind: "component", type: MtxGridMenu, selector: "mtx-grid-menu", inputs: ["items", "data"], exportAs: ["mtxGridMenu"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridMenu, decorators: [{
type: Component,
args: [{
selector: 'mtx-grid-menu',
exportAs: 'mtxGridMenu',
template: `
<mat-menu class="mtx-grid-menu">
@for (item of items; track $index) {
@if (!item.iif || item.iif(data)) {
@if (item.children && item.children.length > 0) {
<button
mat-menu-item
[matMenuTriggerFor]="gridMenu.menu"
[disabled]="item | cellActionDisable: data"
[class]="item.class"
(click)="item.click?.(data)"
>
<mat-icon *ngTemplateOutlet="iconTpl; context: { $implicit: item }" />
<span>{{ item.text }}</span>
</button>
<mtx-grid-menu #gridMenu [items]="item.children" [data]="data" />
} @else {
<button
mat-menu-item
[disabled]="item | cellActionDisable: data"
[class]="item.class"
(click)="item.click?.(data)"
>
<mat-icon *ngTemplateOutlet="iconTpl; context: { $implicit: item }" />
<span>{{ item.text }}</span>
</button>
}
}
}
</mat-menu>
<ng-template #iconTpl let-item>
@if (item.icon) {
<mat-icon class="mtx-grid-icon">{{ item.icon }}</mat-icon>
} @else if (item.fontIcon) {
<mat-icon class="mtx-grid-icon" [fontIcon]="item.fontIcon"></mat-icon>
} @else if (item.svgIcon) {
<mat-icon class="mtx-grid-icon" [svgIcon]="item.svgIcon"></mat-icon>
}
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
NgTemplateOutlet,
MatMenu,
MatMenuItem,
MatMenuTrigger,
MatIcon,
MtxGridMenu,
MtxGridCellActionDisablePipe,
],
}]
}], propDecorators: { menu: [{
type: ViewChild,
args: [MatMenu, { static: true }]
}], items: [{
type: Input
}], data: [{
type: Input
}] } });
class MtxGridCell {
constructor() {
this._dialog = inject(MtxDialog);
this._utils = inject(MtxGridUtils);
this._differs = inject(KeyValueDiffers);
this._changeDetectorRef = inject(ChangeDetectorRef);
/** Row data */
this.rowData = {};
/** Table data */
this.data = [];
/** Whether show summary */
this.summary = false;
/** Placeholder for the empty value (`null`, `''`, `[]`) */
this.placeholder = '--';
this.rowDataChange = new EventEmitter();
}
get _value() {
return this._utils.getCellValue(this.rowData, this.colDef);
}
ngOnInit() {
this.rowDataDiffer = this._differs.find(this.rowData).create();
}
ngDoCheck() {
const changes = this.rowDataDiffer?.diff(this.rowData);
if (changes) {
this._applyChanges(changes);
}
}
_applyChanges(changes) {
changes.forEachChangedItem(record => {
this.rowChangeRecord = record;
this.rowDataChange.emit(record);
this._changeDetectorRef.markForCheck();
});
}
_getText(value) {
return value === undefined ? '' : this._utils.isEmpty(value) ? this.placeholder : value;
}
_getTooltip(value) {
return this._utils.isEmpty(value) ? '' : value;
}
_getFormatterTooltip(value) {
return this._utils.isContainHTML(value) || this._utils.isEmpty(value) ? '' : value;
}
_onActionClick(event, btn, rowData) {
event.preventDefault();
event.stopPropagation();
if (typeof btn.pop === 'string' || isObservable(btn.pop)) {
this._dialog.open({
title: btn.pop,
buttons: [
{ color: 'primary', text: 'OK', onClick: () => btn.click?.(rowData) || {} },
{ text: 'CLOSE' },
],
});
}
else if (typeof btn.pop === 'object') {
this._dialog.open({
title: btn.pop?.title,
description: btn.pop?.description,
buttons: [
{
color: btn.pop?.okColor || 'primary',
text: btn.pop?.okText || 'OK',
onClick: () => btn.click?.(rowData) || {},
},
{
color: btn.pop?.closeColor,
text: btn.pop?.closeText || 'CLOSE',
},
],
});
}
else {
btn.click?.(rowData);
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MtxGridCell, isStandalone: true, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "@if (summary) {\n <span\n [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n </span>\n} @else {\n <!-- Custom formatting -->\n @if (colDef.formatter) {\n <span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n </span>\n } @else {\n <!-- Default formatting -->\n @switch (colDef.type) {\n <!-- Buttons -->\n @case ('button') {\n @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n @if (!btn.iif || btn.iif(rowData)) {\n @if(btn.children && btn.children.length>0){\n @if (btn.type === 'icon') {\n <button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"mtx-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"btn | cellActionDisable: rowData : rowChangeRecord : rowChangeRecord?.currentValue\"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"btn.children && btn.children.length>0 ? gridMenu.menu : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n </button>\n\n <mtx-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n } @else {\n <button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"mtx-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"btn | cellActionDisable: rowData : rowChangeRecord : rowChangeRecord?.currentValue\"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"btn.children && btn.children.length>0 ? gridMenu.menu : null\"\n (click)=\"$event.stopPropagation()\"\n >\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n </button>\n\n <mtx-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData\" />\n }\n }@else {\n @if (btn.type === 'icon') {\n <button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"mtx-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"btn | cellActionDisable: rowData : rowChangeRecord : rowChangeRecord?.currentValue\"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n >\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n </button>\n } @else {\n <button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"mtx-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"btn | cellActionDisable: rowData : rowChangeRecord : rowChangeRecord?.currentValue\"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData)\"\n >\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{ btn.text | toObservable | async }}</span>\n </button>\n }\n }\n }\n }\n }\n <!-- Tag -->\n @case ('tag') {\n @if (colDef.tag && colDef.tag[_value]) {\n <mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{colDef.tag[_value].text}}\n </mat-chip>\n </mat-chip-listbox>\n } @else {\n {{_value}}\n }\n }\n <!-- Link -->\n @case ('link') {\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n }\n <!-- Image -->\n @case ('image') {\n <img class=\"mtx-grid-img\" [src]=\"_value\" alt=\"\">\n }\n <!-- Boolean -->\n @case ('boolean') {\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n }\n <!-- Number -->\n @case ('number') {\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Currency -->\n @case ('currency') {\n <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Percent -->\n @case ('percent') {\n <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Date -->\n @case ('date') {\n <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Default -->\n @default {\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n }\n }\n }\n}\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n } @else if(btn.fontIcon) {\n <mat-icon class=\"mtx-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if(btn.svgIcon) {\n <mat-icon class=\"mtx-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MtxGridMenu, selector: "mtx-grid-menu", inputs: ["items", "data"], exportAs: ["mtxGridMenu"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxGridCell, decorators: [{
type: Component,
args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
AsyncPipe,
CurrencyPipe,
DatePipe,
DecimalPipe,
NgTemplateOutlet,
PercentPipe,