@ng-matero/extensions 17.3.4 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/README.md +11 -0
  2. package/_index.scss +6 -0
  3. package/alert/_alert-theme.scss +2 -3
  4. package/colorpicker/_colorpicker-theme.scss +2 -3
  5. package/colorpicker/colorpicker.d.ts +4 -4
  6. package/{experimental/theming/_color-api-back-compat.scss → core/theming/_color-api-backwards-compatibility.scss} +1 -1
  7. package/{experimental → core}/theming/_config-validation.scss +11 -5
  8. package/{experimental → core}/theming/_definition.scss +4 -2
  9. package/core/theming/prebuilt/azure-blue.scss +26 -0
  10. package/core/theming/prebuilt/cyan-orange.scss +26 -0
  11. package/core/theming/prebuilt/deeppurple-amber.scss +4 -4
  12. package/core/theming/prebuilt/indigo-pink.scss +4 -4
  13. package/core/theming/prebuilt/magenta-violet.scss +26 -0
  14. package/core/theming/prebuilt/pink-bluegrey.scss +4 -4
  15. package/core/theming/prebuilt/purple-green.scss +4 -4
  16. package/core/theming/prebuilt/rose-red.scss +26 -0
  17. package/{experimental/theming/_m3-density.scss → core/tokens/_density.scss} +0 -1
  18. package/core/tokens/_m3-tokens.scss +350 -0
  19. package/core/tokens/_token-utils.scss +164 -40
  20. package/core/tokens/m2/_index.scss +2 -3
  21. package/core/tokens/m2/mdc/_plain-tooltip.scss +1 -2
  22. package/core/tokens/m2/mtx/_alert.scss +5 -6
  23. package/core/tokens/m2/mtx/_colorpicker.scss +2 -3
  24. package/core/tokens/m2/mtx/_datetimepicker.scss +7 -8
  25. package/core/tokens/m2/mtx/_drawer.scss +3 -2
  26. package/core/tokens/m2/mtx/_grid.scss +4 -3
  27. package/core/tokens/m2/mtx/_loader.scss +2 -3
  28. package/core/tokens/m2/mtx/_popover.scss +1 -2
  29. package/core/tokens/m2/mtx/_progress.scss +5 -6
  30. package/core/tokens/m2/mtx/_select.scss +3 -2
  31. package/core/tokens/m2/mtx/_split.scss +2 -3
  32. package/core/tokens/m3/index.scss +45 -0
  33. package/core/tokens/m3/mtx/_alert.scss +31 -0
  34. package/core/tokens/m3/mtx/_colorpicker.scss +19 -0
  35. package/{experimental/theming/_custom-tokens.scss → core/tokens/m3/mtx/_datetimepicker.scss} +15 -191
  36. package/core/tokens/m3/mtx/_drawer.scss +22 -0
  37. package/core/tokens/m3/mtx/_grid.scss +34 -0
  38. package/core/tokens/m3/mtx/_loader.scss +22 -0
  39. package/core/tokens/m3/mtx/_popover.scss +22 -0
  40. package/core/tokens/m3/mtx/_progress.scss +31 -0
  41. package/core/tokens/m3/mtx/_select.scss +72 -0
  42. package/core/tokens/m3/mtx/_split.scss +30 -0
  43. package/datetimepicker/_datetimepicker-theme.scss +3 -4
  44. package/datetimepicker/calendar-body.scss +2 -2
  45. package/datetimepicker/calendar.d.ts +1 -0
  46. package/datetimepicker/datetimepicker-content.scss +0 -2
  47. package/datetimepicker/datetimepicker.d.ts +4 -4
  48. package/drawer/_drawer-theme.scss +2 -3
  49. package/drawer/drawer-container.scss +1 -2
  50. package/esm2022/alert/alert-module.mjs +4 -4
  51. package/esm2022/alert/alert.mjs +3 -3
  52. package/esm2022/button/button-loading.mjs +3 -3
  53. package/esm2022/button/button-module.mjs +4 -4
  54. package/esm2022/checkbox-group/checkbox-group-module.mjs +4 -4
  55. package/esm2022/checkbox-group/checkbox-group.mjs +3 -3
  56. package/esm2022/colorpicker/colorpicker-input.mjs +3 -3
  57. package/esm2022/colorpicker/colorpicker-module.mjs +4 -4
  58. package/esm2022/colorpicker/colorpicker-toggle.mjs +6 -6
  59. package/esm2022/colorpicker/colorpicker.mjs +14 -12
  60. package/esm2022/column-resize/column-resize-directives/column-resize-flex.mjs +3 -3
  61. package/esm2022/column-resize/column-resize-directives/column-resize.mjs +3 -3
  62. package/esm2022/column-resize/column-resize-module.mjs +4 -4
  63. package/esm2022/column-resize/column-resize-notifier.mjs +6 -6
  64. package/esm2022/column-resize/column-resize.mjs +3 -3
  65. package/esm2022/column-resize/column-size-store.mjs +3 -3
  66. package/esm2022/column-resize/event-dispatcher.mjs +3 -3
  67. package/esm2022/column-resize/overlay-handle.mjs +3 -3
  68. package/esm2022/column-resize/resizable.mjs +3 -3
  69. package/esm2022/column-resize/resize-strategy.mjs +9 -9
  70. package/esm2022/core/datetime/datetime.module.mjs +8 -8
  71. package/esm2022/core/datetime/native-datetime-adapter.mjs +3 -3
  72. package/esm2022/core/pipes/is-template-ref.pipe.mjs +3 -3
  73. package/esm2022/core/pipes/pipes.module.mjs +4 -4
  74. package/esm2022/core/pipes/to-observable.pipe.mjs +3 -3
  75. package/esm2022/datetimepicker/calendar-body.mjs +3 -3
  76. package/esm2022/datetimepicker/calendar.mjs +9 -14
  77. package/esm2022/datetimepicker/clock.mjs +5 -5
  78. package/esm2022/datetimepicker/datetimepicker-input.mjs +3 -3
  79. package/esm2022/datetimepicker/datetimepicker-intl.mjs +3 -3
  80. package/esm2022/datetimepicker/datetimepicker-module.mjs +4 -4
  81. package/esm2022/datetimepicker/datetimepicker-toggle.mjs +6 -6
  82. package/esm2022/datetimepicker/datetimepicker.mjs +15 -13
  83. package/esm2022/datetimepicker/month-view.mjs +3 -3
  84. package/esm2022/datetimepicker/multi-year-view.mjs +3 -3
  85. package/esm2022/datetimepicker/time.mjs +6 -6
  86. package/esm2022/datetimepicker/year-view.mjs +3 -3
  87. package/esm2022/dialog/dialog-container.mjs +3 -3
  88. package/esm2022/dialog/dialog-module.mjs +4 -4
  89. package/esm2022/dialog/dialog.mjs +3 -3
  90. package/esm2022/drawer/drawer-container.mjs +5 -5
  91. package/esm2022/drawer/drawer-module.mjs +4 -4
  92. package/esm2022/drawer/drawer.mjs +3 -3
  93. package/esm2022/grid/cell.mjs +3 -3
  94. package/esm2022/grid/column-menu.mjs +5 -5
  95. package/esm2022/grid/column-resize/column-resize-directives/column-resize-flex.mjs +3 -3
  96. package/esm2022/grid/column-resize/column-resize-directives/column-resize.mjs +3 -3
  97. package/esm2022/grid/column-resize/column-resize-module.mjs +8 -8
  98. package/esm2022/grid/column-resize/overlay-handle.mjs +3 -3
  99. package/esm2022/grid/column-resize/resizable-directives/resizable.mjs +3 -3
  100. package/esm2022/grid/column-resize/resize-strategy.mjs +3 -3
  101. package/esm2022/grid/expansion-toggle.mjs +3 -3
  102. package/esm2022/grid/grid-module.mjs +4 -4
  103. package/esm2022/grid/grid-pipes.mjs +21 -21
  104. package/esm2022/grid/grid-utils.mjs +3 -3
  105. package/esm2022/grid/grid.mjs +3 -3
  106. package/esm2022/grid/selectable-cell.mjs +3 -3
  107. package/esm2022/loader/loader-module.mjs +4 -4
  108. package/esm2022/loader/loader.mjs +3 -3
  109. package/esm2022/photoviewer/photoviewer-module.mjs +4 -4
  110. package/esm2022/photoviewer/photoviewer.mjs +3 -3
  111. package/esm2022/popover/popover-content.mjs +6 -6
  112. package/esm2022/popover/popover-module.mjs +4 -4
  113. package/esm2022/popover/popover-target.mjs +3 -3
  114. package/esm2022/popover/popover-trigger.mjs +6 -8
  115. package/esm2022/popover/popover.mjs +6 -6
  116. package/esm2022/progress/progress-module.mjs +4 -4
  117. package/esm2022/progress/progress.mjs +3 -3
  118. package/esm2022/select/option.mjs +3 -3
  119. package/esm2022/select/select-module.mjs +4 -4
  120. package/esm2022/select/select.mjs +37 -24
  121. package/esm2022/select/templates.mjs +33 -33
  122. package/esm2022/split/split-module.mjs +4 -4
  123. package/esm2022/split/split-pane.mjs +37 -28
  124. package/esm2022/split/split.mjs +55 -49
  125. package/esm2022/split/utils.mjs +1 -4
  126. package/esm2022/tooltip/tooltip-module.mjs +4 -4
  127. package/esm2022/tooltip/tooltip.mjs +6 -6
  128. package/fesm2022/mtxAlert.mjs +7 -7
  129. package/fesm2022/mtxButton.mjs +7 -7
  130. package/fesm2022/mtxCheckboxGroup.mjs +7 -7
  131. package/fesm2022/mtxColorpicker.mjs +27 -25
  132. package/fesm2022/mtxColorpicker.mjs.map +1 -1
  133. package/fesm2022/mtxColumnResize.mjs +40 -40
  134. package/fesm2022/mtxCore.mjs +21 -21
  135. package/fesm2022/mtxDatetimepicker.mjs +61 -63
  136. package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
  137. package/fesm2022/mtxDialog.mjs +10 -10
  138. package/fesm2022/mtxDrawer.mjs +13 -13
  139. package/fesm2022/mtxDrawer.mjs.map +1 -1
  140. package/fesm2022/mtxGrid.mjs +68 -68
  141. package/fesm2022/mtxGrid.mjs.map +1 -1
  142. package/fesm2022/mtxLoader.mjs +7 -7
  143. package/fesm2022/mtxPhotoviewer.mjs +7 -7
  144. package/fesm2022/mtxPopover.mjs +24 -26
  145. package/fesm2022/mtxPopover.mjs.map +1 -1
  146. package/fesm2022/mtxProgress.mjs +7 -7
  147. package/fesm2022/mtxSelect.mjs +76 -63
  148. package/fesm2022/mtxSelect.mjs.map +1 -1
  149. package/fesm2022/mtxSplit.mjs +92 -80
  150. package/fesm2022/mtxSplit.mjs.map +1 -1
  151. package/fesm2022/mtxTooltip.mjs +12 -12
  152. package/grid/_grid-theme.scss +3 -4
  153. package/grid/column-menu.scss +15 -9
  154. package/grid/grid.scss +2 -2
  155. package/loader/_loader-theme.scss +2 -3
  156. package/package.json +14 -14
  157. package/popover/_popover-theme.scss +2 -3
  158. package/popover/popover.d.ts +2 -2
  159. package/prebuilt-themes/azure-blue.css +1 -0
  160. package/prebuilt-themes/cyan-orange.css +1 -0
  161. package/prebuilt-themes/deeppurple-amber.css +1 -1
  162. package/prebuilt-themes/indigo-pink.css +1 -1
  163. package/prebuilt-themes/magenta-violet.css +1 -0
  164. package/prebuilt-themes/pink-bluegrey.css +1 -1
  165. package/prebuilt-themes/purple-green.css +1 -1
  166. package/prebuilt-themes/rose-red.css +1 -0
  167. package/progress/_progress-theme.scss +3 -4
  168. package/select/_select-theme.scss +3 -4
  169. package/select/select.d.ts +17 -2
  170. package/select/select.scss +2 -4
  171. package/split/_split-theme.scss +2 -3
  172. package/split/split-pane.d.ts +29 -13
  173. package/split/split.d.ts +44 -20
  174. package/split/utils.d.ts +0 -1
  175. package/tooltip/_tooltip-theme.scss +4 -5
  176. package/core/style/_sass-utils.scss +0 -80
  177. package/experimental/_index.scss +0 -5
  178. package/experimental/theming/_m3-tokens.scss +0 -308
  179. /package/{experimental/theming → core/tokens}/_format-tokens.scss +0 -0
package/esm2022/grid/column-resize/column-resize-module.mjs CHANGED
@@ -15,11 +15,11 @@ import { MatResizable } from './resizable-directives/resizable';
15
15
  import * as i0 from "@angular/core";
16
16
  const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
17
17
  export class MatColumnResizeCommonModule {
18
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
19
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeCommonModule, imports: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
20
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeCommonModule }); }
18
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
19
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeCommonModule, imports: [MatColumnResizeOverlayHandle], exports: [MatColumnResizeOverlayHandle] }); }
20
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeCommonModule }); }
21
21
  }
22
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
22
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeCommonModule, decorators: [{
23
23
  type: NgModule,
24
24
  args: [{
25
25
  imports: ENTRY_COMMON_COMPONENTS,
@@ -28,11 +28,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
28
28
  }] });
29
29
  const IMPORTS = [MatCommonModule, OverlayModule, MatColumnResizeCommonModule];
30
30
  export class MatColumnResizeModule {
31
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
32
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeModule, imports: [MatCommonModule, OverlayModule, MatColumnResizeCommonModule, MatColumnResize, MatColumnResizeFlex, MatResizable], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
33
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
31
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
32
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeModule, imports: [MatCommonModule, OverlayModule, MatColumnResizeCommonModule, MatColumnResize, MatColumnResizeFlex, MatResizable], exports: [MatColumnResize, MatColumnResizeFlex, MatResizable] }); }
33
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeModule, imports: [IMPORTS] }); }
34
34
  }
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeModule, decorators: [{
35
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeModule, decorators: [{
36
36
  type: NgModule,
37
37
  args: [{
38
38
  imports: [...IMPORTS, MatColumnResize, MatColumnResizeFlex, MatResizable],
package/esm2022/grid/column-resize/overlay-handle.mjs CHANGED
@@ -41,10 +41,10 @@ export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
41
41
  : originHeight,
42
42
  });
43
43
  }
44
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeRef }, { token: _COALESCED_STYLE_SCHEDULER }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
45
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: MatColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "mat-column-resize-overlay-thumb" }, viewQueries: [{ propertyName: "topElement", first: true, predicate: ["top"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: '<div #top class="mat-column-resize-overlay-thumb-top"></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
44
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeOverlayHandle, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeRef }, { token: _COALESCED_STYLE_SCHEDULER }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
45
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
46
46
  }
47
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatColumnResizeOverlayHandle, decorators: [{
48
48
  type: Component,
49
49
  args: [{
50
50
  changeDetection: ChangeDetectionStrategy.OnPush,
package/esm2022/grid/column-resize/resizable-directives/resizable.mjs CHANGED
@@ -38,10 +38,10 @@ export class MatResizable extends AbstractMatResizable {
38
38
  this.isResizable = true;
39
39
  this.document = document;
40
40
  }
41
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatResizable, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i4.Overlay }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeStrategy }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
42
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: MatResizable, isStandalone: true, selector: "mat-header-cell[resizable], th[mat-header-cell][resizable]", inputs: { minWidthPx: ["matResizableMinWidthPx", "minWidthPx"], maxWidthPx: ["matResizableMaxWidthPx", "maxWidthPx"], resizable: "resizable" }, host: { properties: { "class": "this.hasResizableClass" }, classAttribute: "mat-resizable" }, usesInheritance: true, ngImport: i0 }); }
41
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatResizable, deps: [{ token: i1.CdkColumnDef }, { token: i2.ColumnResize }, { token: i3.Directionality }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i2.HeaderRowEventDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: i4.Overlay }, { token: i2.ColumnResizeNotifierSource }, { token: i2.ResizeStrategy }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
42
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
43
43
  }
44
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatResizable, decorators: [{
44
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatResizable, decorators: [{
45
45
  type: Directive,
46
46
  args: [{
47
47
  selector: 'mat-header-cell[resizable], th[mat-header-cell][resizable]',
package/esm2022/grid/column-resize/resize-strategy.mjs CHANGED
@@ -23,10 +23,10 @@ export class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
23
23
  getColumnCssClass(cssFriendlyColumnName) {
24
24
  return `mat-column-${cssFriendlyColumnName}`;
25
25
  }
26
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i1.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i2.CdkTable }, { token: DOCUMENT }, { token: CSP_NONCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
27
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatFlexTableResizeStrategy }); }
26
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatFlexTableResizeStrategy, deps: [{ token: i1.ColumnResize }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i2.CdkTable }, { token: DOCUMENT }, { token: CSP_NONCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
27
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatFlexTableResizeStrategy }); }
28
28
  }
29
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
29
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatFlexTableResizeStrategy, decorators: [{
30
30
  type: Injectable
31
31
  }], ctorParameters: () => [{ type: i1.ColumnResize }, { type: i2._CoalescedStyleScheduler, decorators: [{
32
32
  type: Inject,
package/esm2022/grid/expansion-toggle.mjs CHANGED
@@ -35,10 +35,10 @@ export class MtxGridExpansionToggle {
35
35
  this.opened = !this.opened;
36
36
  this.toggleChange.emit(this);
37
37
  }
38
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
39
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", 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 }); }
38
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridExpansionToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
39
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
40
40
  }
41
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridExpansionToggle, decorators: [{
41
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridExpansionToggle, decorators: [{
42
42
  type: Directive,
43
43
  args: [{
44
44
  selector: '[mtx-grid-expansion-toggle]',
package/esm2022/grid/grid-module.mjs CHANGED
@@ -27,8 +27,8 @@ import { MtxGridUtils } from './grid-utils';
27
27
  import { MtxGridSelectableCell } from './selectable-cell';
28
28
  import * as i0 from "@angular/core";
29
29
  export class MtxGridModule {
30
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
31
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridModule, imports: [CommonModule,
30
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
31
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridModule, imports: [CommonModule,
32
32
  FormsModule,
33
33
  MatTableModule,
34
34
  MatSortModule,
@@ -71,7 +71,7 @@ export class MtxGridModule {
71
71
  MtxGridCellActionBadgePipe,
72
72
  MtxGridCellActionDisablePipe,
73
73
  MtxGridCellSummaryPipe] }); }
74
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridModule, providers: [MtxGridUtils], imports: [CommonModule,
74
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridModule, providers: [MtxGridUtils], imports: [CommonModule,
75
75
  FormsModule,
76
76
  MatTableModule,
77
77
  MatSortModule,
@@ -94,7 +94,7 @@ export class MtxGridModule {
94
94
  MtxGridCell,
95
95
  MtxGridColumnMenu, MatColumnResizeModule] }); }
96
96
  }
97
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridModule, decorators: [{
97
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridModule, decorators: [{
98
98
  type: NgModule,
99
99
  args: [{
100
100
  imports: [
package/esm2022/grid/grid-pipes.mjs CHANGED
@@ -12,10 +12,10 @@ export class MtxGridColClassPipe {
12
12
  }
13
13
  return '';
14
14
  }
15
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
16
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridColClassPipe, isStandalone: true, name: "colClass" }); }
15
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridColClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
16
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridColClassPipe, isStandalone: true, name: "colClass" }); }
17
17
  }
18
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
18
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridColClassPipe, decorators: [{
19
19
  type: Pipe,
20
20
  args: [{ name: 'colClass', standalone: true }]
21
21
  }] });
@@ -32,10 +32,10 @@ export class MtxGridRowClassPipe {
32
32
  }
33
33
  return classList.join(' ');
34
34
  }
35
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
36
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridRowClassPipe, isStandalone: true, name: "rowClass" }); }
35
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
36
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridRowClassPipe, isStandalone: true, name: "rowClass" }); }
37
37
  }
38
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
38
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridRowClassPipe, decorators: [{
39
39
  type: Pipe,
40
40
  args: [{ name: 'rowClass', standalone: true }]
41
41
  }] });
@@ -49,10 +49,10 @@ export class MtxGridCellActionsPipe {
49
49
  }
50
50
  return [];
51
51
  }
52
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
53
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionsPipe, isStandalone: true, name: "cellActions" }); }
52
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
53
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionsPipe, isStandalone: true, name: "cellActions" }); }
54
54
  }
55
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
55
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionsPipe, decorators: [{
56
56
  type: Pipe,
57
57
  args: [{ name: 'cellActions', standalone: true }]
58
58
  }] });
@@ -65,10 +65,10 @@ export class MtxGridCellActionTooltipPipe {
65
65
  return btn.tooltip || { message: '' };
66
66
  }
67
67
  }
68
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
69
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" }); }
68
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
69
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionTooltipPipe, isStandalone: true, name: "cellActionTooltip" }); }
70
70
  }
71
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
71
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionTooltipPipe, decorators: [{
72
72
  type: Pipe,
73
73
  args: [{ name: 'cellActionTooltip', standalone: true }]
74
74
  }] });
@@ -81,10 +81,10 @@ export class MtxGridCellActionBadgePipe {
81
81
  return btn.badge || { content: '' };
82
82
  }
83
83
  }
84
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
85
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" }); }
84
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionBadgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
85
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionBadgePipe, isStandalone: true, name: "cellActionBadge" }); }
86
86
  }
87
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
87
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionBadgePipe, decorators: [{
88
88
  type: Pipe,
89
89
  args: [{ name: 'cellActionBadge', standalone: true }]
90
90
  }] });
@@ -100,10 +100,10 @@ export class MtxGridCellActionDisablePipe {
100
100
  return false;
101
101
  }
102
102
  }
103
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
104
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" }); }
103
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionDisablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
104
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionDisablePipe, isStandalone: true, name: "cellActionDisable" }); }
105
105
  }
106
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
106
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellActionDisablePipe, decorators: [{
107
107
  type: Pipe,
108
108
  args: [{ name: 'cellActionDisable', standalone: true }]
109
109
  }] });
@@ -119,10 +119,10 @@ export class MtxGridCellSummaryPipe {
119
119
  return colDef.summary(this.utils.getColData(data, colDef), colDef);
120
120
  }
121
121
  }
122
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [{ token: i1.MtxGridUtils }], target: i0.ɵɵFactoryTarget.Pipe }); }
123
- /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellSummaryPipe, isStandalone: true, name: "cellSummary" }); }
122
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellSummaryPipe, deps: [{ token: i1.MtxGridUtils }], target: i0.ɵɵFactoryTarget.Pipe }); }
123
+ /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellSummaryPipe, isStandalone: true, name: "cellSummary" }); }
124
124
  }
125
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
125
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridCellSummaryPipe, decorators: [{
126
126
  type: Pipe,
127
127
  args: [{ name: 'cellSummary', standalone: true }]
128
128
  }], ctorParameters: () => [{ type: i1.MtxGridUtils }] });
package/esm2022/grid/grid-utils.mjs CHANGED
@@ -46,10 +46,10 @@ export class MtxGridUtils {
46
46
  isContainHTML(value) {
47
47
  return /<\/?[a-z][\s\S]*>/i.test(value);
48
48
  }
49
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
50
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridUtils, providedIn: 'root' }); }
49
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
50
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridUtils, providedIn: 'root' }); }
51
51
  }
52
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridUtils, decorators: [{
52
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridUtils, decorators: [{
53
53
  type: Injectable,
54
54
  args: [{ providedIn: 'root' }]
55
55
  }], ctorParameters: () => [] });
package/esm2022/grid/grid.mjs CHANGED
@@ -368,8 +368,8 @@ export class MtxGrid {
368
368
  _contextmenu(event, rowData, index) {
369
369
  this.rowContextMenu.emit({ event, rowData, index });
370
370
  }
371
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGrid, deps: [{ token: i1.MtxGridUtils }, { token: i0.ChangeDetectorRef }, { token: MTX_GRID_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
372
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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: "columnMenu", first: true, predicate: ["columnMenu"], 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 #columnMenu\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, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n [dataSource]=\"dataSource\" [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) {\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, 'min-width': col.width, 'left': col.left, '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, 'min-width': col.width, 'left': col.left, '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, 'min-width': col.width, 'left': col.left, '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, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n [dataSource]=\"dataSource\" [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) {\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, 'left': col.left, 'right': col.right}\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\" [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, 'left': col.left, '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, 'left': col.left, '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);border-radius:var(--mtx-grid-container-shape)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color)}.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)}.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)}.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:0 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);border-bottom-left-radius:var(--mtx-grid-container-shape);border-bottom-right-radius:var(--mtx-grid-container-shape)}.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)) / 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);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color)}.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)}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color)}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color)}.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));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size))}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:var(--mat-table-row-item-container-height);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}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\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", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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: [
371
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGrid, deps: [{ token: i1.MtxGridUtils }, { token: i0.ChangeDetectorRef }, { token: MTX_GRID_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
372
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", 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: "columnMenu", first: true, predicate: ["columnMenu"], 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 #columnMenu\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, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n [dataSource]=\"dataSource\" [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) {\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, 'min-width': col.width, 'left': col.left, '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, 'min-width': col.width, 'left': col.left, '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, 'min-width': col.width, 'left': col.left, '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, 'mat-table-striped': rowStriped, 'mat-table-expandable': expandable}\"\n [dataSource]=\"dataSource\" [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) {\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, 'left': col.left, 'right': col.right}\"\n [resizable]=\"col.resizable\"\n [matResizableMinWidthPx]=\"col.minWidth\" [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, 'left': col.left, '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, 'left': col.left, '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);border-radius:var(--mtx-grid-container-shape)}.mtx-grid .mat-mdc-table.mat-table-striped .mat-row-odd{background-color:var(--mtx-grid-table-row-striped-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row:hover{background-color:var(--mtx-grid-table-row-hover-background-color)}.mtx-grid .mat-mdc-table.mat-table-hover .mat-mdc-row.selected:hover{background-color:var(--mtx-grid-table-row-selected-hover-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-row.selected{background-color:var(--mtx-grid-table-row-selected-background-color)}.mtx-grid .mat-mdc-table .mat-mdc-cell.selected{box-shadow:inset 0 0 0 1px var(--mtx-grid-table-cell-selected-outline-color)}.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)}.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)}.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:0 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);border-bottom-left-radius:var(--mtx-grid-container-shape);border-bottom-right-radius:var(--mtx-grid-container-shape)}.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)) / 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);padding:8px;box-sizing:border-box;border-bottom:1px solid var(--mtx-grid-outline-color)}.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)}[dir=rtl] .mtx-grid-sidebar{border-left-width:0;border-right:1px solid var(--mtx-grid-outline-color)}.mtx-grid-footer{position:relative;z-index:1}.mtx-grid-statusbar{display:flex;align-items:center;min-height:var(--mat-table-header-container-height);padding:8px;box-sizing:border-box;border-top:1px solid var(--mtx-grid-outline-color)}.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));height:var(--mdc-icon-button-state-layer-size, var(--mtx-grid-row-expand-button-size))}.mtx-grid-expansion-detail{display:flex;align-items:center;min-height:var(--mat-table-row-item-container-height);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}.mtx-grid-icon{width:20px;height:20px;font-size:20px}\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", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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: [
373
373
  trigger('expansion', [
374
374
  state('collapsed, void', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
375
375
  state('expanded', style({ height: '*', visibility: 'visible' })),
@@ -378,7 +378,7 @@ export class MtxGrid {
378
378
  ]),
379
379
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
380
380
  }
381
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGrid, decorators: [{
381
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGrid, decorators: [{
382
382
  type: Component,
383
383
  args: [{ selector: 'mtx-grid', exportAs: 'mtxGrid', host: {
384
384
  class: 'mtx-grid',
package/esm2022/grid/selectable-cell.mjs CHANGED
@@ -30,10 +30,10 @@ export class MtxGridSelectableCell {
30
30
  this._selected = !this._selected;
31
31
  this.cellSelectedChange.emit(this);
32
32
  }
33
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridSelectableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
34
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", 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 }); }
33
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridSelectableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
34
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", 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 }); }
35
35
  }
36
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridSelectableCell, decorators: [{
36
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxGridSelectableCell, decorators: [{
37
37
  type: Directive,
38
38
  args: [{
39
39
  selector: '[mtx-grid-selectable-cell]',
package/esm2022/loader/loader-module.mjs CHANGED
@@ -5,11 +5,11 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
5
5
  import { MtxLoader } from './loader';
6
6
  import * as i0 from "@angular/core";
7
7
  export class MtxLoaderModule {
8
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
9
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader], exports: [MtxLoader] }); }
10
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader] }); }
8
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
9
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader], exports: [MtxLoader] }); }
10
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader] }); }
11
11
  }
12
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxLoaderModule, decorators: [{
12
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxLoaderModule, decorators: [{
13
13
  type: NgModule,
14
14
  args: [{
15
15
  imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader],
package/esm2022/loader/loader.mjs CHANGED
@@ -24,10 +24,10 @@ export class MtxLoader {
24
24
  /** Whether the loader has a backdrop. */
25
25
  this.hasBackdrop = true;
26
26
  }
27
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxLoader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
28
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxLoader, isStandalone: true, selector: "mtx-loader", inputs: { type: "type", color: "color", mode: "mode", strokeWidth: "strokeWidth", diameter: "diameter", bufferValue: "bufferValue", value: "value", loading: ["loading", "loading", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute] }, host: { properties: { "class.mtx-loader-loading": "loading" }, classAttribute: "mtx-loader" }, exportAs: ["mtxLoader"], ngImport: i0, template: "@if (loading && hasBackdrop) {\n <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n <div class=\"mtx-loader-main\">\n @if (type==='spinner') {\n <mat-spinner\n [color]=\"color\"\n [strokeWidth]=\"strokeWidth\"\n [diameter]=\"diameter\"\n [mode]=\"$any(mode)\"\n [value]=\"value\">\n </mat-spinner>\n }\n @if (type==='progressbar') {\n <mat-progress-bar\n [color]=\"color\"\n [mode]=\"$any(mode)\"\n [value]=\"value\"\n [bufferValue]=\"bufferValue\">\n </mat-progress-bar>\n }\n </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:2;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:1;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color)}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
27
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxLoader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
28
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: MtxLoader, isStandalone: true, selector: "mtx-loader", inputs: { type: "type", color: "color", mode: "mode", strokeWidth: "strokeWidth", diameter: "diameter", bufferValue: "bufferValue", value: "value", loading: ["loading", "loading", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute] }, host: { properties: { "class.mtx-loader-loading": "loading" }, classAttribute: "mtx-loader" }, exportAs: ["mtxLoader"], ngImport: i0, template: "@if (loading && hasBackdrop) {\n <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n <div class=\"mtx-loader-main\">\n @if (type==='spinner') {\n <mat-spinner\n [color]=\"color\"\n [strokeWidth]=\"strokeWidth\"\n [diameter]=\"diameter\"\n [mode]=\"$any(mode)\"\n [value]=\"value\">\n </mat-spinner>\n }\n @if (type==='progressbar') {\n <mat-progress-bar\n [color]=\"color\"\n [mode]=\"$any(mode)\"\n [value]=\"value\"\n [bufferValue]=\"bufferValue\">\n </mat-progress-bar>\n }\n </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:2;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:1;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color)}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
29
29
  }
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxLoader, decorators: [{
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxLoader, decorators: [{
31
31
  type: Component,
32
32
  args: [{ selector: 'mtx-loader', exportAs: 'mtxLoader', host: {
33
33
  'class': 'mtx-loader',
package/esm2022/photoviewer/photoviewer-module.mjs CHANGED
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
2
2
  import { MtxPhotoviewer } from './photoviewer';
3
3
  import * as i0 from "@angular/core";
4
4
  export class MtxPhotoviewerModule {
5
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxPhotoviewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxPhotoviewerModule, imports: [MtxPhotoviewer], exports: [MtxPhotoviewer] }); }
7
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxPhotoviewerModule }); }
5
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxPhotoviewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
6
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxPhotoviewerModule, imports: [MtxPhotoviewer], exports: [MtxPhotoviewer] }); }
7
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxPhotoviewerModule }); }
8
8
  }
9
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxPhotoviewerModule, decorators: [{
9
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxPhotoviewerModule, decorators: [{
10
10
  type: NgModule,
11
11
  args: [{
12
12
  imports: [MtxPhotoviewer],