@ng-matero/extensions 16.1.2 → 16.1.3

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.
Files changed (8) hide show
  1. package/README.md +2 -2
  2. package/esm2022/grid/cell.mjs +2 -2
  3. package/esm2022/grid/grid.mjs +3 -3
  4. package/fesm2022/mtxGrid.mjs +4 -4
  5. package/fesm2022/mtxGrid.mjs.map +1 -1
  6. package/grid/cell.scss +2 -1
  7. package/grid/grid.scss +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  [![CodeFactor](https://www.codefactor.io/repository/github/ng-matero/extensions/badge)](https://www.codefactor.io/repository/github/ng-matero/extensions)
4
4
  [![npm](https://img.shields.io/npm/v/@ng-matero/extensions.svg)](https://www.npmjs.com/package/@ng-matero/extensions)
5
5
  [![GitHub Release Date](https://img.shields.io/github/release-date/ng-matero/extensions)](https://github.com/ng-matero/extensions/releases)
6
- [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/ng-matero/extensions/blob/dev/LICENSE)
6
+ [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/ng-matero/extensions/blob/main/LICENSE)
7
7
  [![Gitter](https://img.shields.io/gitter/room/ng-matero/extensions.svg)](https://gitter.im/matero-io/extensions)
8
8
 
9
9
  The Ng-Matero Extensions is an extended component library for Angular Material.
@@ -41,7 +41,7 @@ export class YourAppModule {
41
41
 
42
42
  ## Theming
43
43
 
44
- After import modules, you must define a theme. [More details about theming](https://material.angular.io/guide/theming).
44
+ After import modules, you must define a theme. [More about theming](https://material.angular.io/guide/theming).
45
45
 
46
46
  ```scss
47
47
  @use '@ng-matero/extensions' as mtx;
package/esm2022/grid/cell.mjs CHANGED
@@ -105,11 +105,11 @@ export class MtxGridCell {
105
105
  const photoviewer = new PhotoViewer(imgs, options);
106
106
  }
107
107
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCell, deps: [{ token: i1.MtxDialog }, { token: i2.MtxGridUtils }, { token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
108
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxGridCell, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\r\n [innerHTML]=\"_getText((data | cellSummary: 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 <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container\r\n *ngFor=\"let btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <ng-container [ngSwitch]=\"btn.type\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'fab'\">\r\n <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'mini-fab'\">\r\n <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchDefault>\r\n <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-listbox *ngIf=\"colDef.tag && colDef.tag[_value]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\r\n {{colDef.tag[_value].text}}\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n <ng-template #tagEmptyTpl>{{_value}}</ng-template>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_value\" (click)=\"_onImagePreview(_value)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | currency: colDef.typeParameter?.currencyCode:\r\n colDef.typeParameter?.display:\r\n colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | percent: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | date: colDef.typeParameter?.format:\r\n colDef.typeParameter?.timezone:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:block;width:32px;border-radius:4px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.PercentPipe, name: "percent" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i9.MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: i10.MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: i10.MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: i10.MtxGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: i10.MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: i10.MtxGridCellSummaryPipe, name: "cellSummary" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
108
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxGridCell, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\r\n [innerHTML]=\"_getText((data | cellSummary: 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 <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container\r\n *ngFor=\"let btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <ng-container [ngSwitch]=\"btn.type\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'fab'\">\r\n <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'mini-fab'\">\r\n <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchDefault>\r\n <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-listbox *ngIf=\"colDef.tag && colDef.tag[_value]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\r\n {{colDef.tag[_value].text}}\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n <ng-template #tagEmptyTpl>{{_value}}</ng-template>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_value\" (click)=\"_onImagePreview(_value)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | currency: colDef.typeParameter?.currencyCode:\r\n colDef.typeParameter?.display:\r\n colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | percent: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | date: colDef.typeParameter?.format:\r\n colDef.typeParameter?.timezone:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.PercentPipe, name: "percent" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i9.MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: i10.MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: i10.MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: i10.MtxGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: i10.MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: i10.MtxGridCellSummaryPipe, name: "cellSummary" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
109
109
  }
110
110
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxGridCell, decorators: [{
111
111
  type: Component,
112
- args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\r\n [innerHTML]=\"_getText((data | cellSummary: 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 <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container\r\n *ngFor=\"let btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <ng-container [ngSwitch]=\"btn.type\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'fab'\">\r\n <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'mini-fab'\">\r\n <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchDefault>\r\n <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-listbox *ngIf=\"colDef.tag && colDef.tag[_value]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\r\n {{colDef.tag[_value].text}}\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n <ng-template #tagEmptyTpl>{{_value}}</ng-template>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_value\" (click)=\"_onImagePreview(_value)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | currency: colDef.typeParameter?.currencyCode:\r\n colDef.typeParameter?.display:\r\n colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | percent: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | date: colDef.typeParameter?.format:\r\n colDef.typeParameter?.timezone:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:block;width:32px;border-radius:4px;cursor:pointer}\n"] }]
112
+ args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"summary; else customCellFormattingTpl\"\r\n [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\r\n [innerHTML]=\"_getText((data | cellSummary: 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 <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <ng-container\r\n *ngFor=\"let btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue\">\r\n <ng-container *ngIf=\"!btn.iif || btn.iif(rowData)\">\r\n <ng-container [ngSwitch]=\"btn.type\">\r\n <ng-container *ngSwitchCase=\"'raised'\">\r\n <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'stroked'\">\r\n <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'flat'\">\r\n <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'fab'\">\r\n <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchCase=\"'mini-fab'\">\r\n <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 *ngSwitchDefault>\r\n <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\r\n [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\r\n [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\r\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\r\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\r\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\r\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\r\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\r\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\r\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\r\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\r\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\r\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\r\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\r\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\r\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\r\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\r\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\r\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\r\n (click)=\"_onActionClick($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 </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Tag -->\r\n <ng-container *ngSwitchCase=\"'tag'\">\r\n <mat-chip-listbox *ngIf=\"colDef.tag && colDef.tag[_value]; else tagEmptyTpl\">\r\n <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\r\n {{colDef.tag[_value].text}}\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n <ng-template #tagEmptyTpl>{{_value}}</ng-template>\r\n </ng-container>\r\n <!-- Link -->\r\n <ng-container *ngSwitchCase=\"'link'\">\r\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\r\n </ng-container>\r\n <!-- Image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img class=\"mtx-grid-img\" [src]=\"_value\" (click)=\"_onImagePreview(_value)\">\r\n </ng-container>\r\n <!-- Boolean -->\r\n <ng-container *ngSwitchCase=\"'boolean'\">\r\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n <!-- Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | currency: colDef.typeParameter?.currencyCode:\r\n colDef.typeParameter?.display:\r\n colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | percent: colDef.typeParameter?.digitsInfo:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value | date: colDef.typeParameter?.format:\r\n colDef.typeParameter?.timezone:\r\n colDef.typeParameter?.locale)\">\r\n {{_getText(_value | 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(_value)\">{{_getText(_value)}}</span>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle;cursor:pointer}\n"] }]
113
113
  }], ctorParameters: function () { return [{ type: i1.MtxDialog }, { type: i2.MtxGridUtils }, { type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { rowData: [{
114
114
  type: Input
115
115
  }], colDef: [{