@ng-matero/extensions 19.0.1 → 19.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/tokens/m3/mtx/_datetimepicker.scss +2 -2
- package/datetimepicker/datetimepicker-content.scss +3 -3
- package/fesm2022/mtxAlert.mjs +7 -7
- package/fesm2022/mtxButton.mjs +7 -7
- package/fesm2022/mtxCheckboxGroup.mjs +7 -7
- package/fesm2022/mtxColorpicker.mjs +19 -19
- package/fesm2022/mtxColumnResize.mjs +40 -40
- package/fesm2022/mtxCore.mjs +21 -21
- package/fesm2022/mtxDatetimepicker.mjs +61 -61
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2022/mtxDialog.mjs +10 -10
- package/fesm2022/mtxDrawer.mjs +10 -10
- package/fesm2022/mtxGrid.mjs +66 -66
- package/fesm2022/mtxLoader.mjs +7 -7
- package/fesm2022/mtxPhotoviewer.mjs +7 -7
- package/fesm2022/mtxPopover.mjs +19 -19
- package/fesm2022/mtxProgress.mjs +7 -7
- package/fesm2022/mtxSelect.mjs +49 -49
- package/fesm2022/mtxSplit.mjs +10 -10
- package/fesm2022/mtxTooltip.mjs +10 -10
- package/package.json +5 -5
package/fesm2022/mtxGrid.mjs
CHANGED
|
@@ -43,10 +43,10 @@ class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
|
|
|
43
43
|
getColumnCssClass(cssFriendlyColumnName) {
|
|
44
44
|
return `mat-column-${cssFriendlyColumnName}`;
|
|
45
45
|
}
|
|
46
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
47
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.
|
|
46
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
47
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatFlexTableResizeStrategy }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
|
|
50
50
|
type: Injectable
|
|
51
51
|
}] });
|
|
52
52
|
const FLEX_RESIZE_STRATEGY_PROVIDER = {
|
|
@@ -99,10 +99,10 @@ class MatColumnResize extends AbstractMatColumnResize {
|
|
|
99
99
|
this.ngZone = inject(NgZone);
|
|
100
100
|
this.notifier = inject(ColumnResizeNotifierSource);
|
|
101
101
|
}
|
|
102
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
103
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
102
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
103
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: MatColumnResize, isStandalone: true, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 }); }
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResize, decorators: [{
|
|
106
106
|
type: Directive,
|
|
107
107
|
args: [{
|
|
108
108
|
selector: 'table[mat-table][columnResize]',
|
|
@@ -131,10 +131,10 @@ class MatColumnResizeFlex extends AbstractMatColumnResize {
|
|
|
131
131
|
this.ngZone = inject(NgZone);
|
|
132
132
|
this.notifier = inject(ColumnResizeNotifierSource);
|
|
133
133
|
}
|
|
134
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
135
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
134
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
135
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: MatColumnResizeFlex, isStandalone: true, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
|
|
136
136
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
|
|
138
138
|
type: Directive,
|
|
139
139
|
args: [{
|
|
140
140
|
selector: 'mat-table[columnResize]',
|
|
@@ -178,10 +178,10 @@ class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
|
|
|
178
178
|
: originHeight,
|
|
179
179
|
});
|
|
180
180
|
}
|
|
181
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
182
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
181
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
182
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: MatColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
183
183
|
}
|
|
184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
|
|
185
185
|
type: Component,
|
|
186
186
|
args: [{
|
|
187
187
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -252,10 +252,10 @@ class MatResizable extends AbstractMatResizable {
|
|
|
252
252
|
set resizable(newValue) {
|
|
253
253
|
this.isResizable = newValue == null || newValue === '' || newValue;
|
|
254
254
|
}
|
|
255
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
256
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
255
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatResizable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
256
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "this.hasResizableClass" }, classAttribute: "mat-resizable" }, usesInheritance: true, ngImport: i0 }); }
|
|
257
257
|
}
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatResizable, decorators: [{
|
|
259
259
|
type: Directive,
|
|
260
260
|
args: [{
|
|
261
261
|
selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
|
|
@@ -278,11 +278,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
278
278
|
*/
|
|
279
279
|
const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
|
|
280
280
|
class MatColumnResizeCommonModule {
|
|
281
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
282
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.
|
|
283
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.
|
|
281
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
282
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeCommonModule, imports: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
|
|
283
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeCommonModule }); }
|
|
284
284
|
}
|
|
285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
|
|
286
286
|
type: NgModule,
|
|
287
287
|
args: [{
|
|
288
288
|
imports: ENTRY_COMMON_COMPONENTS,
|
|
@@ -291,11 +291,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
291
291
|
}] });
|
|
292
292
|
const IMPORTS = [MatCommonModule, OverlayModule, MatColumnResizeCommonModule];
|
|
293
293
|
class MatColumnResizeModule {
|
|
294
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
295
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.
|
|
296
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.
|
|
294
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
295
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeModule, imports: [MatCommonModule, OverlayModule, MatColumnResizeCommonModule, MatColumnResize, MatColumnResizeFlex, MatResizable], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
|
|
296
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
|
|
297
297
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MatColumnResizeModule, decorators: [{
|
|
299
299
|
type: NgModule,
|
|
300
300
|
args: [{
|
|
301
301
|
imports: [...IMPORTS, MatColumnResize, MatColumnResizeFlex, MatResizable],
|
|
@@ -349,10 +349,10 @@ class MtxGridUtils {
|
|
|
349
349
|
isContainHTML(value) {
|
|
350
350
|
return /<\/?[a-z][\s\S]*>/i.test(value);
|
|
351
351
|
}
|
|
352
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
353
|
-
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.
|
|
352
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
353
|
+
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridUtils, providedIn: 'root' }); }
|
|
354
354
|
}
|
|
355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridUtils, decorators: [{
|
|
356
356
|
type: Injectable,
|
|
357
357
|
args: [{ providedIn: 'root' }]
|
|
358
358
|
}], ctorParameters: () => [] });
|
|
@@ -367,10 +367,10 @@ class MtxGridColClassPipe {
|
|
|
367
367
|
}
|
|
368
368
|
return '';
|
|
369
369
|
}
|
|
370
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
371
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
370
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
371
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridColClassPipe, isStandalone: true, name: "colClass" }); }
|
|
372
372
|
}
|
|
373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
|
|
374
374
|
type: Pipe,
|
|
375
375
|
args: [{ name: 'colClass' }]
|
|
376
376
|
}] });
|
|
@@ -387,10 +387,10 @@ class MtxGridRowClassPipe {
|
|
|
387
387
|
}
|
|
388
388
|
return classList.join(' ');
|
|
389
389
|
}
|
|
390
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
391
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
390
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
391
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridRowClassPipe, isStandalone: true, name: "rowClass" }); }
|
|
392
392
|
}
|
|
393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
|
|
394
394
|
type: Pipe,
|
|
395
395
|
args: [{ name: 'rowClass' }]
|
|
396
396
|
}] });
|
|
@@ -404,10 +404,10 @@ class MtxGridCellActionsPipe {
|
|
|
404
404
|
}
|
|
405
405
|
return [];
|
|
406
406
|
}
|
|
407
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
408
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
407
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
408
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionsPipe, isStandalone: true, name: "cellActions" }); }
|
|
409
409
|
}
|
|
410
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
|
|
411
411
|
type: Pipe,
|
|
412
412
|
args: [{ name: 'cellActions' }]
|
|
413
413
|
}] });
|
|
@@ -420,10 +420,10 @@ class MtxGridCellActionTooltipPipe {
|
|
|
420
420
|
return btn.tooltip || { message: '' };
|
|
421
421
|
}
|
|
422
422
|
}
|
|
423
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
424
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
423
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
424
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" }); }
|
|
425
425
|
}
|
|
426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
|
|
427
427
|
type: Pipe,
|
|
428
428
|
args: [{ name: 'cellActionTooltip' }]
|
|
429
429
|
}] });
|
|
@@ -436,10 +436,10 @@ class MtxGridCellActionBadgePipe {
|
|
|
436
436
|
return btn.badge || { content: '' };
|
|
437
437
|
}
|
|
438
438
|
}
|
|
439
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
440
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
439
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
440
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" }); }
|
|
441
441
|
}
|
|
442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
|
|
443
443
|
type: Pipe,
|
|
444
444
|
args: [{ name: 'cellActionBadge' }]
|
|
445
445
|
}] });
|
|
@@ -455,10 +455,10 @@ class MtxGridCellActionDisablePipe {
|
|
|
455
455
|
return false;
|
|
456
456
|
}
|
|
457
457
|
}
|
|
458
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
459
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
458
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
459
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" }); }
|
|
460
460
|
}
|
|
461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
|
|
462
462
|
type: Pipe,
|
|
463
463
|
args: [{ name: 'cellActionDisable' }]
|
|
464
464
|
}] });
|
|
@@ -474,10 +474,10 @@ class MtxGridCellSummaryPipe {
|
|
|
474
474
|
return colDef.summary(this.utils.getColData(data, colDef), colDef);
|
|
475
475
|
}
|
|
476
476
|
}
|
|
477
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
478
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
477
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
478
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellSummaryPipe, isStandalone: true, name: "cellSummary" }); }
|
|
479
479
|
}
|
|
480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
|
|
481
481
|
type: Pipe,
|
|
482
482
|
args: [{ name: 'cellSummary' }]
|
|
483
483
|
}] });
|
|
@@ -559,10 +559,10 @@ class MtxGridCell {
|
|
|
559
559
|
btn.click?.(rowData);
|
|
560
560
|
}
|
|
561
561
|
}
|
|
562
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
563
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\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 *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></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 *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></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 *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{btn.text | toObservable | async}}</span>\n </button>\n }\n }\n }\n }\n }\n <!-- Tag -->\n @case ('tag') {\n @if (colDef.tag && colDef.tag[_value]) {\n <mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{colDef.tag[_value].text}}\n </mat-chip>\n </mat-chip-listbox>\n } @else {\n {{_value}}\n }\n }\n <!-- Link -->\n @case ('link') {\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n }\n <!-- Image -->\n @case ('image') {\n <img class=\"mtx-grid-img\" [src]=\"_value\" alt=\"\">\n }\n <!-- Boolean -->\n @case ('boolean') {\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n }\n <!-- Number -->\n @case ('number') {\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Currency -->\n @case ('currency') {\n <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Percent -->\n @case ('percent') {\n <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Date -->\n @case ('date') {\n <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Default -->\n @default {\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n }\n }\n }\n}\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n } @else if(btn.fontIcon) {\n <mat-icon class=\"mtx-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if(btn.svgIcon) {\n <mat-icon class=\"mtx-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
562
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
563
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: MtxGridCell, isStandalone: true, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "@if (summary) {\n <span\n [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n </span>\n} @else {\n <!-- Custom formatting -->\n @if (colDef.formatter) {\n <span\n [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n </span>\n } @else {\n <!-- Default formatting -->\n @switch (colDef.type) {\n <!-- Buttons -->\n @case ('button') {\n @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n @if (!btn.iif || btn.iif(rowData)) {\n @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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\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 *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></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 *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></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 *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></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 <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\"></mat-icon>\n <span>{{btn.text | toObservable | async}}</span>\n </button>\n }\n }\n }\n }\n }\n <!-- Tag -->\n @case ('tag') {\n @if (colDef.tag && colDef.tag[_value]) {\n <mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef.tag[_value].color\">\n {{colDef.tag[_value].text}}\n </mat-chip>\n </mat-chip-listbox>\n } @else {\n {{_value}}\n }\n }\n <!-- Link -->\n @case ('link') {\n <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n }\n <!-- Image -->\n @case ('image') {\n <img class=\"mtx-grid-img\" [src]=\"_value\" alt=\"\">\n }\n <!-- Boolean -->\n @case ('boolean') {\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n }\n <!-- Number -->\n @case ('number') {\n <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Currency -->\n @case ('currency') {\n <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Percent -->\n @case ('percent') {\n <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Date -->\n @case ('date') {\n <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n </span>\n }\n <!-- Default -->\n @default {\n <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n }\n }\n }\n}\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n } @else if(btn.fontIcon) {\n <mat-icon class=\"mtx-grid-icon\" [fontIcon]=\"btn.fontIcon\"></mat-icon>\n } @else if(btn.svgIcon) {\n <mat-icon class=\"mtx-grid-icon\" [svgIcon]=\"btn.svgIcon\"></mat-icon>\n }\n</ng-template>\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
564
564
|
}
|
|
565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridCell, decorators: [{
|
|
566
566
|
type: Component,
|
|
567
567
|
args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
568
568
|
AsyncPipe,
|
|
@@ -657,10 +657,10 @@ class MtxGridColumnMenu {
|
|
|
657
657
|
this.columnChange.emit(this.columns);
|
|
658
658
|
}
|
|
659
659
|
}
|
|
660
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
661
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxGridColumnMenu, isStandalone: true, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "@switch (buttonType) {\n @case ('raised') {\n <button [class]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('stroked') {\n <button [class]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('flat') {\n <button [class]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('icon') {\n <button [class]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n </button>\n }\n @case ('fab') {\n <button [class]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('mini-fab') {\n <button [class]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @default {\n <button [class]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div class=\"mtx-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n @if (showHeader) {\n <div class=\"mtx-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else {\n {{headerText}}\n }\n </div>\n }\n\n <div class=\"mtx-grid-column-menu-body\">\n @if (sortable) {\n <div class=\"mtx-grid-column-menu-list\"\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n @for (col of columns; track col.field) {\n <div class=\"mtx-grid-column-menu-item\"\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n </svg>\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (!sortable) {\n <div class=\"mtx-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"mtx-grid-column-menu-item\">\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"mtx-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n {{footerText}}\n }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n [matMenuTriggerFor]=\"pinList\">\n @if (col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n }\n @if (!col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\">\n <span class=\"mtx-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n }\n\n @if (selectable) {\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n } @else {\n <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".mtx-grid-column-menu,.mtx-grid-column-pin-list{color:var(--mtx-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
660
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
661
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: MtxGridColumnMenu, isStandalone: true, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: MatMenu, descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "@switch (buttonType) {\n @case ('raised') {\n <button [class]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('stroked') {\n <button [class]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('flat') {\n <button [class]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('icon') {\n <button [class]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n </button>\n }\n @case ('fab') {\n <button [class]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @case ('mini-fab') {\n <button [class]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n @default {\n <button [class]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n [matMenuTriggerFor]=\"menu\">\n @if (buttonIcon) {\n <mat-icon>{{buttonIcon}}</mat-icon>\n }\n {{buttonText}}\n </button>\n }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div class=\"mtx-grid-column-menu-content\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n @if (showHeader) {\n <div class=\"mtx-grid-column-menu-header\">\n @if (headerTemplate) {\n <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n } @else {\n {{headerText}}\n }\n </div>\n }\n\n <div class=\"mtx-grid-column-menu-body\">\n @if (sortable) {\n <div class=\"mtx-grid-column-menu-list\"\n cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n @for (col of columns; track col.field) {\n <div class=\"mtx-grid-column-menu-item\"\n cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n </svg>\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (!sortable) {\n <div class=\"mtx-grid-column-menu-list\">\n @for (col of columns; track col.field) {\n <div class=\"mtx-grid-column-menu-item\">\n <ng-template [ngTemplateOutlet]=\"checkboxList\"\n [ngTemplateOutletContext]=\"{ $implicit: col }\">\n </ng-template>\n </div>\n }\n </div>\n }\n </div>\n\n @if (showFooter) {\n <div class=\"mtx-grid-column-menu-footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n {{footerText}}\n }\n </div>\n }\n </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n @if (pinnable) {\n <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n [matMenuTriggerFor]=\"pinList\">\n @if (col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n </svg>\n }\n @if (!col.pinned) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n </svg>\n }\n </button>\n <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n @for (item of pinOptions; track item) {\n <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n mat-menu-item\n (click)=\"_handlePinSelect(col, item.value)\">\n <span class=\"mtx-grid-column-pin-option-placeholder\">\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n @if (col.pinned==item.value) {\n <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </svg>\n }\n </span>\n <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n </button>\n }\n </mat-menu>\n }\n\n @if (selectable) {\n <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n } @else {\n <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n }\n</ng-template>\n", styles: [".mtx-grid-column-menu,.mtx-grid-column-pin-list{color:var(--mtx-grid-column-menu-text-color, var(--mat-sys-on-surface-variant))}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color, var(--mat-sys-outline-variant))}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 1px var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
662
662
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridColumnMenu, decorators: [{
|
|
664
664
|
type: Component,
|
|
665
665
|
args: [{ selector: 'mtx-grid-column-menu', exportAs: 'mtxGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
666
666
|
AsyncPipe,
|
|
@@ -758,10 +758,10 @@ class MtxGridExpansionToggle {
|
|
|
758
758
|
this.opened = !this.opened;
|
|
759
759
|
this.toggleChange.emit(this);
|
|
760
760
|
}
|
|
761
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
762
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
761
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
762
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: MtxGridExpansionToggle, isStandalone: true, selector: "[mtx-grid-expansion-toggle]", inputs: { opened: "opened", expandableRow: "expandableRow", template: ["expansionRowTpl", "template"] }, outputs: { openedChange: "openedChange", toggleChange: "toggleChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.expanded": "this.expanded" } }, ngImport: i0 }); }
|
|
763
763
|
}
|
|
764
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridExpansionToggle, decorators: [{
|
|
765
765
|
type: Directive,
|
|
766
766
|
args: [{
|
|
767
767
|
selector: '[mtx-grid-expansion-toggle]',
|
|
@@ -815,10 +815,10 @@ class MtxGridSelectableCell {
|
|
|
815
815
|
this._selected = !this._selected;
|
|
816
816
|
this.cellSelectedChange.emit(this);
|
|
817
817
|
}
|
|
818
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
819
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
818
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridSelectableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
819
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: MtxGridSelectableCell, isStandalone: true, selector: "[mtx-grid-selectable-cell]", inputs: { cellSelectable: "cellSelectable" }, outputs: { cellSelectedChange: "cellSelectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.selected": "this.selected" } }, ngImport: i0 }); }
|
|
820
820
|
}
|
|
821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridSelectableCell, decorators: [{
|
|
822
822
|
type: Directive,
|
|
823
823
|
args: [{
|
|
824
824
|
selector: '[mtx-grid-selectable-cell]',
|
|
@@ -1188,8 +1188,8 @@ class MtxGrid {
|
|
|
1188
1188
|
_contextmenu(event, rowData, index) {
|
|
1189
1189
|
this.rowContextMenu.emit({ event, rowData, index });
|
|
1190
1190
|
}
|
|
1191
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
1192
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxGrid, isStandalone: true, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: ["loading", "loading", booleanAttribute], trackBy: "trackBy", columnResizable: ["columnResizable", "columnResizable", booleanAttribute], emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: ["pageOnFront", "pageOnFront", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute], pageDisabled: ["pageDisabled", "pageDisabled", booleanAttribute], showFirstLastButtons: ["showFirstLastButtons", "showFirstLastButtons", booleanAttribute], pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: ["hidePageSize", "hidePageSize", booleanAttribute], paginationTemplate: "paginationTemplate", sortOnFront: ["sortOnFront", "sortOnFront", booleanAttribute], sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: ["sortDisableClear", "sortDisableClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], sortStart: "sortStart", rowHover: ["rowHover", "rowHover", booleanAttribute], rowStriped: ["rowStriped", "rowStriped", booleanAttribute], expandable: ["expandable", "expandable", booleanAttribute], expansionTemplate: "expansionTemplate", multiSelectable: ["multiSelectable", "multiSelectable", booleanAttribute], multiSelectionWithClick: ["multiSelectionWithClick", "multiSelectionWithClick", booleanAttribute], rowSelectable: ["rowSelectable", "rowSelectable", booleanAttribute], hideRowSelectionCheckbox: ["hideRowSelectionCheckbox", "hideRowSelectionCheckbox", booleanAttribute], disableRowClickSelection: ["disableRowClickSelection", "disableRowClickSelection", booleanAttribute], rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", rowSelected: "rowSelected", cellSelectable: ["cellSelectable", "cellSelectable", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: ["columnHideable", "columnHideable", booleanAttribute], columnHideableChecked: "columnHideableChecked", columnSortable: ["columnSortable", "columnSortable", booleanAttribute], columnPinnable: ["columnPinnable", "columnPinnable", booleanAttribute], columnPinOptions: "columnPinOptions", showColumnMenuButton: ["showColumnMenuButton", "showColumnMenuButton", booleanAttribute], columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", showColumnMenuHeader: ["showColumnMenuHeader", "showColumnMenuHeader", booleanAttribute], columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: ["showColumnMenuFooter", "showColumnMenuFooter", booleanAttribute], columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: ["useContentRowTemplate", "useContentRowTemplate", booleanAttribute], useContentHeaderRowTemplate: ["useContentHeaderRowTemplate", "useContentHeaderRowTemplate", booleanAttribute], useContentFooterRowTemplate: ["useContentFooterRowTemplate", "useContentFooterRowTemplate", booleanAttribute], showSummary: ["showSummary", "showSummary", booleanAttribute], summaryTemplate: "summaryTemplate", showSidebar: ["showSidebar", "showSidebar", booleanAttribute], sidebarTemplate: "sidebarTemplate", showStatusbar: ["showStatusbar", "showStatusbar", booleanAttribute], statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange" }, host: { classAttribute: "mtx-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: MtxGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n <div class=\"mtx-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n <div class=\"mtx-grid-toolbar\">\n <div class=\"mtx-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else {\n @if (toolbarTitle) {\n <div class=\"mtx-grid-toolbar-title\">{{toolbarTitle}}</div>\n }\n }\n </div>\n <div class=\"mtx-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <mtx-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\">\n </mtx-grid-column-menu>\n }\n </div>\n </div>\n}\n\n<div class=\"mtx-grid-main mtx-grid-layout\">\n <!-- Table content -->\n <div class=\"mtx-grid-content mtx-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\">\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\n </mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n class=\"mtx-grid-checkbox-cell\">\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n <mat-checkbox\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n </mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n </ng-container>\n }\n @for (col of columns; track col.field) {\n <ng-container [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n <th mat-header-cell *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\">\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n <span>{{col.header | toObservable | async}}</span>\n @if (col.sortable) {\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n </ng-template>\n }\n }\n </div>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\">\n @if (cellTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.showExpand) {\n <button class=\"mtx-grid-row-expand-button\"\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n }\n }\n }\n </td>\n <td mat-footer-cell *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n @if (summaryTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n </ng-template>\n } @else {\n @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n </ng-template>\n } @else {\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n }\n }\n </td>\n </ng-container>\n }\n @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (!useContentRowTemplate) {\n <tr mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n </tr>\n }\n @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\">\n <div class=\"mtx-grid-expansion-detail\"\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n </ng-template>\n </div>\n </td>\n </ng-container>\n <tr mat-row\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"mtx-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n </tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\">\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\n </mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n class=\"mtx-grid-checkbox-cell\">\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n <mat-checkbox\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n </mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n </ng-container>\n }\n @for (col of columns; track col.field) {\n <ng-container [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n <th mat-header-cell *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\">\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n <span>{{col.header | toObservable | async}}</span>\n @if (col.sortable) {\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n </ng-template>\n }\n }\n </div>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\">\n @if (cellTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.showExpand) {\n <button class=\"mtx-grid-row-expand-button\"\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n }\n }\n }\n </td>\n <td mat-footer-cell *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n @if (summaryTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n </ng-template>\n } @else {\n @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n </ng-template>\n } @else {\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n }\n }\n </td>\n </ng-container>\n }\n @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (!useContentRowTemplate) {\n <tr mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n </tr>\n }\n @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\">\n <div class=\"mtx-grid-expansion-detail\"\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n </ng-template>\n </div>\n </td>\n </ng-container>\n <tr mat-row\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"mtx-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n </tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"mtx-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else {\n {{noResultText}}\n }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"mtx-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"mtx-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"mtx-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"mtx-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\">\n </mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n }\n }\n</ng-template>\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:var(--mtx-grid-table-cell-min-width, 80px)}.mtx-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--mtx-grid-table-footer-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .mtx-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mtx-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2)}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-toolbar-content{flex:1;width:0;padding:0 8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px))}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:var(--mat-table-row-item-container-height, 52px);overflow:hidden}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button,.mtx-grid-row-expand-button+mtx-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: MtxGridCell, selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: MtxGridColumnMenu, selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: MtxGridSelectableCell, selector: "[mtx-grid-selectable-cell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: MtxGridExpansionToggle, selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: MtxGridColClassPipe, name: "colClass" }, { kind: "pipe", type: MtxGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], animations: [
|
|
1191
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1192
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: MtxGrid, isStandalone: true, selector: "mtx-grid", inputs: { displayedColumns: "displayedColumns", columns: "columns", data: "data", length: "length", loading: ["loading", "loading", booleanAttribute], trackBy: "trackBy", columnResizable: ["columnResizable", "columnResizable", booleanAttribute], emptyValuePlaceholder: "emptyValuePlaceholder", pageOnFront: ["pageOnFront", "pageOnFront", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute], pageDisabled: ["pageDisabled", "pageDisabled", booleanAttribute], showFirstLastButtons: ["showFirstLastButtons", "showFirstLastButtons", booleanAttribute], pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hidePageSize: ["hidePageSize", "hidePageSize", booleanAttribute], paginationTemplate: "paginationTemplate", sortOnFront: ["sortOnFront", "sortOnFront", booleanAttribute], sortActive: "sortActive", sortDirection: "sortDirection", sortDisableClear: ["sortDisableClear", "sortDisableClear", booleanAttribute], sortDisabled: ["sortDisabled", "sortDisabled", booleanAttribute], sortStart: "sortStart", rowHover: ["rowHover", "rowHover", booleanAttribute], rowStriped: ["rowStriped", "rowStriped", booleanAttribute], expandable: ["expandable", "expandable", booleanAttribute], expansionTemplate: "expansionTemplate", multiSelectable: ["multiSelectable", "multiSelectable", booleanAttribute], multiSelectionWithClick: ["multiSelectionWithClick", "multiSelectionWithClick", booleanAttribute], rowSelectable: ["rowSelectable", "rowSelectable", booleanAttribute], hideRowSelectionCheckbox: ["hideRowSelectionCheckbox", "hideRowSelectionCheckbox", booleanAttribute], disableRowClickSelection: ["disableRowClickSelection", "disableRowClickSelection", booleanAttribute], rowSelectionFormatter: "rowSelectionFormatter", rowClassFormatter: "rowClassFormatter", rowSelected: "rowSelected", cellSelectable: ["cellSelectable", "cellSelectable", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], toolbarTitle: "toolbarTitle", toolbarTemplate: "toolbarTemplate", columnHideable: ["columnHideable", "columnHideable", booleanAttribute], columnHideableChecked: "columnHideableChecked", columnSortable: ["columnSortable", "columnSortable", booleanAttribute], columnPinnable: ["columnPinnable", "columnPinnable", booleanAttribute], columnPinOptions: "columnPinOptions", showColumnMenuButton: ["showColumnMenuButton", "showColumnMenuButton", booleanAttribute], columnMenuButtonText: "columnMenuButtonText", columnMenuButtonType: "columnMenuButtonType", columnMenuButtonColor: "columnMenuButtonColor", columnMenuButtonClass: "columnMenuButtonClass", columnMenuButtonIcon: "columnMenuButtonIcon", showColumnMenuHeader: ["showColumnMenuHeader", "showColumnMenuHeader", booleanAttribute], columnMenuHeaderText: "columnMenuHeaderText", columnMenuHeaderTemplate: "columnMenuHeaderTemplate", showColumnMenuFooter: ["showColumnMenuFooter", "showColumnMenuFooter", booleanAttribute], columnMenuFooterText: "columnMenuFooterText", columnMenuFooterTemplate: "columnMenuFooterTemplate", noResultText: "noResultText", noResultTemplate: "noResultTemplate", headerTemplate: "headerTemplate", headerExtraTemplate: "headerExtraTemplate", cellTemplate: "cellTemplate", useContentRowTemplate: ["useContentRowTemplate", "useContentRowTemplate", booleanAttribute], useContentHeaderRowTemplate: ["useContentHeaderRowTemplate", "useContentHeaderRowTemplate", booleanAttribute], useContentFooterRowTemplate: ["useContentFooterRowTemplate", "useContentFooterRowTemplate", booleanAttribute], showSummary: ["showSummary", "showSummary", booleanAttribute], summaryTemplate: "summaryTemplate", showSidebar: ["showSidebar", "showSidebar", booleanAttribute], sidebarTemplate: "sidebarTemplate", showStatusbar: ["showStatusbar", "showStatusbar", booleanAttribute], statusbarTemplate: "statusbarTemplate" }, outputs: { page: "page", sortChange: "sortChange", rowClick: "rowClick", rowContextMenu: "rowContextMenu", expansionChange: "expansionChange", rowSelectedChange: "rowSelectedChange", cellSelectedChange: "cellSelectedChange", columnChange: "columnChange" }, host: { classAttribute: "mtx-grid" }, queries: [{ propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "footerRowDefs", predicate: MatFooterRow }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "columnResize", first: true, predicate: ColumnResize, descendants: true }, { propertyName: "columnMenu", first: true, predicate: MtxGridColumnMenu, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], exportAs: ["mtxGrid"], usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar-->\n@if (loading) {\n <div class=\"mtx-grid-progress\">\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </div>\n}\n\n<!-- Toolbar -->\n@if (showToolbar) {\n <div class=\"mtx-grid-toolbar\">\n <div class=\"mtx-grid-toolbar-content\">\n @if (toolbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"toolbarTemplate\"></ng-template>\n } @else {\n @if (toolbarTitle) {\n <div class=\"mtx-grid-toolbar-title\">{{toolbarTitle}}</div>\n }\n }\n </div>\n <div class=\"mtx-grid-toolbar-actions\">\n @if (showColumnMenuButton) {\n <mtx-grid-column-menu\n [columns]=\"columns\"\n [buttonText]=\"columnMenuButtonText\"\n [buttonType]=\"columnMenuButtonType\"\n [buttonColor]=\"columnMenuButtonColor\"\n [buttonClass]=\"columnMenuButtonClass\"\n [buttonIcon]=\"columnMenuButtonIcon\"\n [selectable]=\"columnHideable\"\n [selectableChecked]=\"columnHideableChecked\"\n [sortable]=\"columnSortable\"\n [pinnable]=\"columnPinnable\"\n [showHeader]=\"showColumnMenuHeader\"\n [headerText]=\"columnMenuHeaderText\"\n [headerTemplate]=\"columnMenuHeaderTemplate\"\n [showFooter]=\"showColumnMenuFooter\"\n [footerText]=\"columnMenuFooterText\"\n [footerTemplate]=\"columnMenuFooterTemplate\"\n [pinOptions]=\"columnPinOptions\"\n (columnChange)=\"_onColumnChange($event)\">\n </mtx-grid-column-menu>\n }\n </div>\n </div>\n}\n\n<div class=\"mtx-grid-main mtx-grid-layout\">\n <!-- Table content -->\n <div class=\"mtx-grid-content mtx-grid-layout\">\n <div #tableContainer class=\"mat-table-container\" [class.mat-table-with-data]=\"!_hasNoResult\">\n @if (!columnResizable) {\n <table mat-table\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\">\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\n </mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n class=\"mtx-grid-checkbox-cell\">\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n <mat-checkbox\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n </mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n </ng-container>\n }\n @for (col of columns; track col.field) {\n <ng-container [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n <th mat-header-cell *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\">\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n <span>{{col.header | toObservable | async}}</span>\n @if (col.sortable) {\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n </ng-template>\n }\n }\n </div>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n [class]=\"col | colClass: row: rowChangeRecord: rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\">\n @if (cellTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.showExpand) {\n <button class=\"mtx-grid-row-expand-button\"\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n }\n }\n }\n </td>\n <td mat-footer-cell *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.min-width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n @if (summaryTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n </ng-template>\n } @else {\n @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n </ng-template>\n } @else {\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n }\n }\n </td>\n </ng-container>\n }\n @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (!useContentRowTemplate) {\n <tr mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n </tr>\n }\n @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\">\n <div class=\"mtx-grid-expansion-detail\"\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n </ng-template>\n </div>\n </td>\n </ng-container>\n <tr mat-row\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"mtx-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n </tr>\n }\n </table>\n } @else {\n <!-- TODO: Use flexbox-based mat-table -->\n <table mat-table\n columnResize\n [class.mat-table-hover]=\"rowHover\"\n [class.mat-table-striped]=\"rowStriped\"\n [class.mat-table-expandable]=\"expandable\"\n [dataSource]=\"dataSource\"\n [multiTemplateDataRows]=\"expandable\"\n matSort\n [matSortActive]=\"sortActive\"\n [matSortDirection]=\"sortDirection\"\n [matSortDisableClear]=\"sortDisableClear\"\n [matSortDisabled]=\"sortDisabled\"\n [matSortStart]=\"sortStart\"\n (matSortChange)=\"_onSortChange($event)\"\n [trackBy]=\"trackBy\">\n @if (rowSelectable && !hideRowSelectionCheckbox) {\n <ng-container matColumnDef=\"MtxGridCheckboxColumnDef\">\n <th mat-header-cell *matHeaderCellDef class=\"mtx-grid-checkbox-cell\">\n @if (multiSelectable) {\n <mat-checkbox\n [checked]=\"rowSelection.hasValue() && _isAllSelected()\"\n [indeterminate]=\"rowSelection.hasValue() && !_isAllSelected()\"\n (change)=\"$event ? _toggleMasterCheckbox() : null\">\n </mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n class=\"mtx-grid-checkbox-cell\">\n @if (!(rowSelectionFormatter.hideCheckbox && rowSelectionFormatter.hideCheckbox(row, _getIndex(index, dataIndex)))) {\n <mat-checkbox\n [disabled]=\"rowSelectionFormatter.disabled && rowSelectionFormatter.disabled(row, _getIndex(index, dataIndex))\"\n [checked]=\"rowSelection.isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? _toggleNormalCheckbox(row) : null\">\n </mat-checkbox>\n }\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"mtx-grid-checkbox-cell\"></td>\n </ng-container>\n }\n @for (col of columns; track col.field) {\n <ng-container [matColumnDef]=\"col.field\"\n [sticky]=\"col.pinned==='left'\" [stickyEnd]=\"col.pinned==='right'\">\n <th mat-header-cell *matHeaderCellDef\n [class]=\"col | colClass\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\"\n [matResizableMaxWidthPx]=\"col.maxWidth\">\n <div class=\"mat-header-cell-inner\">\n @if (headerTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(headerTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(headerTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n <div [mat-sort-header]=\"col.sortProp?.id || col.field\"\n [disabled]=\"!col.sortable\"\n [disableClear]=\"col.sortProp?.disableClear ?? sortDisableClear\"\n [arrowPosition]=\"col.sortProp?.arrowPosition!\"\n [start]=\"col.sortProp?.start!\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n <span>{{col.header | toObservable | async}}</span>\n @if (col.sortable) {\n <svg class=\"mtx-grid-icon mat-sort-header-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M3,13H15V11H3M3,6V8H21V6M3,18H9V16H3V18Z\" />\n </svg>\n }\n </div>\n <ng-template [ngTemplateOutlet]=\"headerExtraTplBase\"\n [ngTemplateOutletContext]=\"{ $implicit: headerExtraTemplate, colDef: col }\">\n </ng-template>\n }\n }\n </div>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index; let dataIndex = dataIndex;\"\n [class]=\"col | colClass: row: rowChangeRecord :rowChangeRecord?.currentValue\"\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\"\n mtx-grid-selectable-cell [cellSelectable]=\"cellSelectable\"\n (cellSelectedChange)=\"_selectCell($event, row, col)\">\n @if (cellTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(cellTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(cellTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.cellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"col.cellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: _getIndex(index, dataIndex), colDef: col }\">\n </ng-template>\n } @else {\n @if (col.showExpand) {\n <button class=\"mtx-grid-row-expand-button\"\n mat-icon-button mtx-grid-expansion-toggle type=\"button\"\n [(opened)]=\"expansionRowStates[dataIndex].expanded\"\n (toggleChange)=\"_onExpansionChange($event, row, col, dataIndex);\">\n <svg class=\"mtx-grid-icon mtx-grid-row-expand-icon\" viewBox=\"0 0 24 24\"\n width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n }\n <mtx-grid-cell [rowData]=\"row\" [colDef]=\"col\" [placeholder]=\"emptyValuePlaceholder\"\n (rowDataChange)=\"_onRowDataChange($event)\"></mtx-grid-cell>\n }\n }\n }\n </td>\n <td mat-footer-cell *matFooterCellDef\n [class.mat-table-sticky-left]=\"col.pinned === 'left'\"\n [class.mat-table-sticky-right]=\"col.pinned === 'right'\"\n [style.width]=\"col.width\"\n [style.left]=\"col.left\"\n [style.right]=\"col.right\">\n @if (col.showExpand) {\n <span class=\"mtx-grid-expansion-placeholder\"></span>\n }\n @if (summaryTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col, data: data }\">\n </ng-template>\n } @else {\n @if ($any(summaryTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"$any(summaryTemplate)[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: _getColData(data, col), colData: _getColData(data, col), colDef: col }\">\n </ng-template>\n } @else {\n <mtx-grid-cell [summary]=\"true\" [data]=\"data\" [colDef]=\"col\"\n [placeholder]=\"emptyValuePlaceholder\"></mtx-grid-cell>\n }\n }\n </td>\n </ng-container>\n }\n @if (!useContentHeaderRowTemplate) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (!useContentRowTemplate) {\n <tr mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;\"\n [class]=\"row | rowClass: index: dataIndex: rowClassFormatter\"\n [class.selected]=\"rowSelection.isSelected(row)\"\n (click)=\"_selectRow($event, row, _getIndex(index, dataIndex))\"\n (contextmenu)=\"_contextmenu($event, row, _getIndex(index, dataIndex))\">\n </tr>\n }\n @if (_whetherShowSummary) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n }\n @if (expandable) {\n <!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"MtxGridExpansionColumnDef\">\n <td mat-cell *matCellDef=\"let row; let dataIndex = dataIndex\"\n [attr.colspan]=\"displayedColumns.length\">\n <div class=\"mtx-grid-expansion-detail\"\n [@expansion]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n <ng-template [ngTemplateOutlet]=\"expansionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, rowData: row, index: dataIndex, expanded: expansionRowStates[dataIndex].expanded }\">\n </ng-template>\n </div>\n </td>\n </ng-container>\n <tr mat-row\n *matRowDef=\"let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex\"\n class=\"mtx-grid-expansion\"\n [class]=\"expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'\">\n </tr>\n }\n </table>\n }\n </div>\n\n <!-- No result -->\n @if (_hasNoResult) {\n <div class=\"mtx-grid-no-result\">\n @if (noResultTemplate) {\n <ng-template [ngTemplateOutlet]=\"noResultTemplate\"></ng-template>\n } @else {\n {{noResultText}}\n }\n </div>\n }\n </div>\n\n <!-- Tool sidebar -->\n @if (showSidebar) {\n <div class=\"mtx-grid-sidebar\">\n @if (sidebarTemplate) {\n <ng-template [ngTemplateOutlet]=\"sidebarTemplate\"></ng-template>\n }\n </div>\n }\n</div>\n\n<div class=\"mtx-grid-footer\">\n <!-- Status Bar -->\n @if (showStatusbar) {\n <div class=\"mtx-grid-statusbar\">\n @if (statusbarTemplate) {\n <ng-template [ngTemplateOutlet]=\"statusbarTemplate\"></ng-template>\n }\n </div>\n }\n\n <!-- Pagination -->\n <div class=\"mtx-grid-pagination\">\n @if (paginationTemplate) {\n <ng-template [ngTemplateOutlet]=\"paginationTemplate\"></ng-template>\n } @else {\n <mat-paginator [class.mat-paginator-hidden]=\"!showPaginator\"\n [showFirstLastButtons]=\"showFirstLastButtons\"\n [length]=\"length\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [hidePageSize]=\"hidePageSize\"\n (page)=\"_onPage($event)\"\n [disabled]=\"pageDisabled\">\n </mat-paginator>\n }\n </div>\n</div>\n\n<!-- Header template for extra content -->\n<ng-template #headerExtraTplBase let-headerExtraTemplate let-col=\"colDef\">\n @if (headerExtraTemplate | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n } @else {\n @if ($any(headerExtraTemplate)?.[col.field] | isTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"headerExtraTemplate[col.field]\"\n [ngTemplateOutletContext]=\"{ $implicit: col, colDef: col }\">\n </ng-template>\n }\n }\n</ng-template>\n", styles: [".mtx-grid{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-mdc-table{--mat-table-row-item-outline-color: var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color, var(--mat-sys-primary-container))}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color, var(--mat-sys-secondary-container))}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color, var(--mat-sys-primary))}.mtx-grid .mat-table-container{overflow:auto}.mtx-grid .mat-table-container.mat-table-with-data{flex:1}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table){min-width:100%;border-collapse:separate}.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-header-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-footer-cell:not(.mtx-grid-checkbox-cell),.mtx-grid .mat-mdc-table:not(.mat-column-resize-table) .mat-mdc-cell:not(.mtx-grid-checkbox-cell){min-width:var(--mtx-grid-table-cell-min-width, 80px)}.mtx-grid .mat-table-sticky-left{border-right:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-left{border-right-width:0;border-left:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-table-sticky-right{border-left:1px solid var(--mat-table-row-item-outline-color)}[dir=rtl] .mtx-grid .mat-table-sticky-right{border-left-width:0;border-right:1px solid var(--mat-table-row-item-outline-color)}.mtx-grid .mat-mdc-footer-cell{border-top:1px solid var(--mat-table-row-item-outline-color);background-color:var(--mtx-grid-table-footer-background-color, var(--mat-sys-surface-container))}.mtx-grid .mat-mdc-row.mtx-grid-expansion{height:0;overflow:hidden}.mtx-grid .mat-mdc-row.mtx-grid-expansion .mat-mdc-cell{padding-top:0;padding-bottom:0}.mtx-grid .mat-mdc-row.mtx-grid-expansion.collapsed .mat-mdc-cell{border-bottom-width:0}.mtx-grid .mat-sort-header-icon{margin-left:4px}[dir=rtl] .mtx-grid .mat-sort-header-icon{margin-left:0;margin-right:4px}.mtx-grid .mat-header-cell-inner{display:inline-flex;align-items:center;vertical-align:middle}.mtx-grid .mat-mdc-paginator{border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant));border-bottom-left-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium));border-bottom-right-radius:var(--mtx-grid-container-shape, var(--mat-sys-corner-medium))}.mtx-grid .mat-paginator-hidden{display:none}.mtx-grid .mtx-grid-checkbox-cell{width:60px;min-width:60px;padding:0 calc((60px - var(--mdc-checkbox-state-layer-size, 40px)) / 2)}.mtx-grid-progress{position:absolute;top:0;z-index:120;width:100%}.mtx-grid-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-toolbar-content{flex:1;width:0;padding:0 8px}.mtx-grid-layout{display:flex;flex:1 1 auto;overflow:auto}.mtx-grid-content{flex-direction:column;width:0}.mtx-grid-sidebar{max-width:50%;border-left:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height, 56px);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color, var(--mat-sys-outline-variant))}.mtx-grid-no-result{display:flex;justify-content:center;align-items:center;flex:1;min-height:150px}.mtx-grid-expansion-placeholder{display:inline-block;vertical-align:middle;width:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size, 40px))}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:var(--mat-table-row-item-container-height, 52px);overflow:hidden}.mtx-grid-row-expand-button.expanded .mtx-grid-row-expand-icon{transform:rotate(90deg)}.mtx-grid-row-expand-button.mat-mdc-icon-button,.mtx-grid-row-expand-button+mtx-grid-cell{vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: MatResizable, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: ["matResizableMinWidthPx", "matResizableMaxWidthPx", "resizable"] }, { kind: "directive", type: MatColumnResize, selector: "table[mat-table][columnResize]" }, { kind: "component", type: MtxGridCell, selector: "mtx-grid-cell", inputs: ["rowData", "colDef", "data", "summary", "placeholder"], outputs: ["rowDataChange"], exportAs: ["mtxGridCell"] }, { kind: "component", type: MtxGridColumnMenu, selector: "mtx-grid-column-menu", inputs: ["columns", "selectable", "selectableChecked", "sortable", "pinnable", "buttonText", "buttonType", "buttonColor", "buttonClass", "buttonIcon", "showHeader", "headerText", "headerTemplate", "showFooter", "footerText", "footerTemplate", "pinOptions"], outputs: ["columnChange"], exportAs: ["mtxGridColumnMenu"] }, { kind: "directive", type: MtxGridSelectableCell, selector: "[mtx-grid-selectable-cell]", inputs: ["cellSelectable"], outputs: ["cellSelectedChange"] }, { kind: "directive", type: MtxGridExpansionToggle, selector: "[mtx-grid-expansion-toggle]", inputs: ["opened", "expandableRow", "expansionRowTpl"], outputs: ["openedChange", "toggleChange"] }, { kind: "pipe", type: MtxIsTemplateRefPipe, name: "isTemplateRef" }, { kind: "pipe", type: MtxGridColClassPipe, name: "colClass" }, { kind: "pipe", type: MtxGridRowClassPipe, name: "rowClass" }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], animations: [
|
|
1193
1193
|
trigger('expansion', [
|
|
1194
1194
|
state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
1195
1195
|
state('expanded', style({ height: '*', visibility: 'visible' })),
|
|
@@ -1198,7 +1198,7 @@ class MtxGrid {
|
|
|
1198
1198
|
]),
|
|
1199
1199
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1200
1200
|
}
|
|
1201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
1201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGrid, decorators: [{
|
|
1202
1202
|
type: Component,
|
|
1203
1203
|
args: [{ selector: 'mtx-grid', exportAs: 'mtxGrid', host: {
|
|
1204
1204
|
class: 'mtx-grid',
|
|
@@ -1461,8 +1461,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
1461
1461
|
}] } });
|
|
1462
1462
|
|
|
1463
1463
|
class MtxGridModule {
|
|
1464
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
1465
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.
|
|
1464
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1465
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MtxGridModule, imports: [CommonModule,
|
|
1466
1466
|
FormsModule,
|
|
1467
1467
|
MatTableModule,
|
|
1468
1468
|
MatSortModule,
|
|
@@ -1505,7 +1505,7 @@ class MtxGridModule {
|
|
|
1505
1505
|
MtxGridCellActionBadgePipe,
|
|
1506
1506
|
MtxGridCellActionDisablePipe,
|
|
1507
1507
|
MtxGridCellSummaryPipe] }); }
|
|
1508
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.
|
|
1508
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridModule, providers: [MtxGridUtils], imports: [CommonModule,
|
|
1509
1509
|
FormsModule,
|
|
1510
1510
|
MatTableModule,
|
|
1511
1511
|
MatSortModule,
|
|
@@ -1528,7 +1528,7 @@ class MtxGridModule {
|
|
|
1528
1528
|
MtxGridCell,
|
|
1529
1529
|
MtxGridColumnMenu, MatColumnResizeModule] }); }
|
|
1530
1530
|
}
|
|
1531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
1531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MtxGridModule, decorators: [{
|
|
1532
1532
|
type: NgModule,
|
|
1533
1533
|
args: [{
|
|
1534
1534
|
imports: [
|