@ng-matero/extensions
Version:
Angular Material Extensions
597 lines (586 loc) • 204 kB
JavaScript
import { moveItemInArray, CdkDrag, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
import { DOCUMENT, AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, PercentPipe, NgTemplateOutlet, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { CSP_NONCE, Injectable, Inject, Optional, Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, HostBinding, Input, NgModule, Pipe, EventEmitter, Output, HostListener, InjectionToken, booleanAttribute, ContentChildren } from '@angular/core';
import * as i1$2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { MatBadge, MatBadgeModule } from '@angular/material/badge';
import { MatButton, MatIconButton, MatFabButton, MatMiniFabButton, 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 { MatMenuTrigger, MatMenu, MatMenuItem, 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, MatRowDef, MatHeaderRowDef, MatFooterRow, MatTable, MatColumnDef, MatHeaderRow, MatRow, MatFooterRowDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatTableModule } from '@angular/material/table';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import * as i4 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatCommonModule } from '@angular/material/core';
import * as i2 from '@ng-matero/extensions/column-resize';
import { CdkFlexTableResizeStrategy, ResizeStrategy, ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeNotifierSource, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, ColumnResize, ResizeOverlayHandle, Resizable } from '@ng-matero/extensions/column-resize';
export { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER as MAT_TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER } from '@ng-matero/extensions/column-resize';
import * as i1 from '@angular/cdk/table';
import { _COALESCED_STYLE_SCHEDULER } from '@angular/cdk/table';
import * as i3 from '@angular/cdk/bidi';
import { MtxToObservablePipe, MtxIsTemplateRefPipe, MtxPipesModule } from '@ng-matero/extensions/core';
import * as i1$1 from '@ng-matero/extensions/dialog';
import { MtxDialogModule } from '@ng-matero/extensions/dialog';
import { isObservable } from 'rxjs';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
/**
* @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.io/license
*/
/**
* Overrides CdkFlexTableResizeStrategy to match mat-column elements.
*/
class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
constructor(columnResize, styleScheduler, table, document, nonce) {
super(columnResize, styleScheduler, table, document, nonce);
}
getColumnCssClass(cssFriendlyColumnName) {
return `mat-column-${cssFriendlyColumnName}`;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i2.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i1.CdkTable }, { token: DOCUMENT }, { token: CSP_NONCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatFlexTableResizeStrategy }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i2.ColumnResize }, { type: i1._CoalescedStyleScheduler, decorators: [{
type: Inject,
args: [_COALESCED_STYLE_SCHEDULER]
}] }, { type: i1.CdkTable }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [CSP_NONCE]
}, {
type: Optional
}] }] });
const FLEX_RESIZE_STRATEGY_PROVIDER = {
provide: ResizeStrategy,
useClass: MatFlexTableResizeStrategy,
};
const PROVIDERS = [
ColumnResizeNotifier,
HeaderRowEventDispatcher,
ColumnResizeNotifierSource,
];
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.io/license
*/
/**
* Explicitly enables column resizing for a table-based mat-table.
* Individual columns must be annotated specifically.
*/
class MatColumnResize extends AbstractMatColumnResize {
constructor(columnResizeNotifier, elementRef, eventDispatcher, ngZone, notifier) {
super();
this.columnResizeNotifier = columnResizeNotifier;
this.elementRef = elementRef;
this.eventDispatcher = eventDispatcher;
this.ngZone = ngZone;
this.notifier = notifier;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResize, deps: [{ token: i2.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", 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: "18.2.0", ngImport: i0, type: MatColumnResize, decorators: [{
type: Directive,
args: [{
selector: 'table[mat-table][columnResize]',
host: TABLE_HOST_BINDINGS,
providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }],
standalone: true,
}]
}], ctorParameters: () => [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }] });
/**
* @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.io/license
*/
/**
* Explicitly enables column resizing for a flexbox-based mat-table.
* Individual columns must be annotated specifically.
*/
class MatColumnResizeFlex extends AbstractMatColumnResize {
constructor(columnResizeNotifier, elementRef, eventDispatcher, ngZone, notifier) {
super();
this.columnResizeNotifier = columnResizeNotifier;
this.elementRef = elementRef;
this.eventDispatcher = eventDispatcher;
this.ngZone = ngZone;
this.notifier = notifier;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeFlex, deps: [{ token: i2.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", 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: "18.2.0", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
type: Directive,
args: [{
selector: 'mat-table[columnResize]',
host: FLEX_HOST_BINDINGS,
providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }],
standalone: true,
}]
}], ctorParameters: () => [{ type: i2.ColumnResizeNotifier }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }] });
/**
* @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.io/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(columnDef, columnResize, directionality, elementRef, eventDispatcher, ngZone, resizeNotifier, resizeRef, styleScheduler, document) {
super();
this.columnDef = columnDef;
this.columnResize = columnResize;
this.directionality = directionality;
this.elementRef = elementRef;
this.eventDispatcher = eventDispatcher;
this.ngZone = ngZone;
this.resizeNotifier = resizeNotifier;
this.resizeRef = resizeRef;
this.styleScheduler = styleScheduler;
this.document = 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: "18.2.0", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeRef }, { token: _COALESCED_STYLE_SCHEDULER }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", 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: "18.2.0", 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>',
standalone: true,
}]
}], ctorParameters: () => [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.NgZone }, { type: i2.ColumnResizeNotifierSource }, { type: i2.ResizeRef }, { type: i1._CoalescedStyleScheduler, decorators: [{
type: Inject,
args: [_COALESCED_STYLE_SCHEDULER]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], 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.io/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 {
get hasResizableClass() {
return this.isResizable ? RESIZABLE_HOST_BINDINGS.class : '';
}
get resizable() {
return this.isResizable;
}
set resizable(newValue) {
this.isResizable = newValue == null || newValue === '' || newValue;
}
constructor(columnDef, columnResize, directionality, document, elementRef, eventDispatcher, injector, ngZone, overlay, resizeNotifier, resizeStrategy, styleScheduler, viewContainerRef, changeDetectorRef) {
super();
this.columnDef = columnDef;
this.columnResize = columnResize;
this.directionality = directionality;
this.elementRef = elementRef;
this.eventDispatcher = eventDispatcher;
this.injector = injector;
this.ngZone = ngZone;
this.overlay = overlay;
this.resizeNotifier = resizeNotifier;
this.resizeStrategy = resizeStrategy;
this.styleScheduler = styleScheduler;
this.viewContainerRef = viewContainerRef;
this.changeDetectorRef = changeDetectorRef;
this.isResizable = true;
this.document = document;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatResizable, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i4.Overlay }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeStrategy }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", 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": "this.hasResizableClass" }, classAttribute: "mat-resizable" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatResizable, decorators: [{
type: Directive,
args: [{
selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
host: RESIZABLE_HOST_BINDINGS,
inputs: RESIZABLE_INPUTS,
standalone: true,
}]
}], ctorParameters: () => [{ type: i1.CdkColumnDef }, { type: i2.ColumnResize }, { type: i3.Directionality }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.ElementRef }, { type: i2.HeaderRowEventDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: i4.Overlay }, { type: i2.ColumnResizeNotifierSource }, { type: i2.ResizeStrategy }, { type: i1._CoalescedStyleScheduler, decorators: [{
type: Inject,
args: [_COALESCED_STYLE_SCHEDULER]
}] }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { hasResizableClass: [{
type: HostBinding,
args: ['class']
}], 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.io/license
*/
const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
class MatColumnResizeCommonModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeCommonModule, imports: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeCommonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
type: NgModule,
args: [{
imports: ENTRY_COMMON_COMPONENTS,
exports: ENTRY_COMMON_COMPONENTS,
}]
}] });
const IMPORTS = [MatCommonModule, OverlayModule, MatColumnResizeCommonModule];
class MatColumnResizeModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeModule, imports: [MatCommonModule, OverlayModule, MatColumnResizeCommonModule, MatColumnResize, MatColumnResizeFlex, MatResizable], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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: "18.2.0", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridUtils, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", 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: "18.2.0", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridColClassPipe, isStandalone: true, name: "colClass" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
type: Pipe,
args: [{ name: 'colClass', standalone: true }]
}] });
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: "18.2.0", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridRowClassPipe, isStandalone: true, name: "rowClass" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
type: Pipe,
args: [{ name: 'rowClass', standalone: true }]
}] });
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: "18.2.0", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionsPipe, isStandalone: true, name: "cellActions" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActions', standalone: true }]
}] });
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: "18.2.0", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActionTooltip', standalone: true }]
}] });
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: "18.2.0", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActionBadge', standalone: true }]
}] });
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: "18.2.0", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
type: Pipe,
args: [{ name: 'cellActionDisable', standalone: true }]
}] });
class MtxGridCellSummaryPipe {
constructor(utils) {
this.utils = utils;
}
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: "18.2.0", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [{ token: MtxGridUtils }], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellSummaryPipe, isStandalone: true, name: "cellSummary" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
type: Pipe,
args: [{ name: 'cellSummary', standalone: true }]
}], ctorParameters: () => [{ type: MtxGridUtils }] });
class MtxGridCell {
get _value() {
return this._utils.getCellValue(this.rowData, this.colDef);
}
constructor(_dialog, _utils, _differs, _changeDetectorRef) {
this._dialog = _dialog;
this._utils = _utils;
this._differs = _differs;
this._changeDetectorRef = _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();
}
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: "18.2.0", ngImport: i0, type: MtxGridCell, deps: [{ token: i1$1.MtxDialog }, { token: MtxGridUtils }, { token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 @switch (btn.type) {\n @case ('raised') {\n <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n }\n <span>{{btn.text | toObservable | async}}</span>\n </button>\n }\n @case ('stroked') {\n <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n }\n <span>{{btn.text | toObservable | async}}</span>\n </button>\n }\n @case ('flat') {\n <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n }\n <span>{{btn.text | toObservable | async}}</span>\n </button>\n }\n @case ('icon') {\n <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n </button>\n }\n @case ('fab') {\n <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n </button>\n }\n @case ('mini-fab') {\n <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n </button>\n }\n @default {\n <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n class=\"mtx-grid-action-button\" [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 @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n }\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\">\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", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ 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: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "compo