@ng-matero/extensions 19.3.3 → 20.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 (283) hide show
  1. package/_index.scss +1 -1
  2. package/alert/_alert-theme.scss +26 -31
  3. package/alert/_m2-alert.scss +59 -0
  4. package/alert/_m3-alert.scss +41 -0
  5. package/alert/alert.scss +27 -31
  6. package/alert/index.d.ts +30 -5
  7. package/button/index.d.ts +31 -5
  8. package/checkbox-group/index.d.ts +117 -5
  9. package/colorpicker/_colorpicker-theme.scss +31 -36
  10. package/{core/tokens/m2/mtx/_colorpicker.scss → colorpicker/_m2-colorpicker.scss} +6 -10
  11. package/colorpicker/_m3-colorpicker.scss +23 -0
  12. package/colorpicker/colorpicker-toggle.scss +4 -9
  13. package/colorpicker/index.d.ts +285 -3
  14. package/column-resize/index.d.ts +456 -3
  15. package/core/index.d.ts +147 -5
  16. package/core/theming/_color-api-backwards-compatibility.scss +8 -15
  17. package/core/theming/_definition.scss +81 -75
  18. package/core/theming/_palettes.scss +1036 -0
  19. package/core/tokens/{m2/_index.scss → _m2-tokens.scss} +22 -22
  20. package/core/tokens/_m2-utils.scss +108 -0
  21. package/core/tokens/_m3-system.scss +128 -106
  22. package/core/tokens/_m3-tokens.scss +36 -282
  23. package/core/tokens/_m3-utils.scss +48 -0
  24. package/core/tokens/_token-utils.scss +67 -239
  25. package/core/tokens/m3/_index.scss +7 -0
  26. package/core/tokens/m3/_md-sys-color.scss +156 -0
  27. package/core/tokens/m3/_md-sys-elevation.scss +15 -0
  28. package/core/tokens/m3/_md-sys-motion.scss +35 -0
  29. package/core/tokens/m3/_md-sys-shape.scss +21 -0
  30. package/core/tokens/m3/_md-sys-state.scss +13 -0
  31. package/core/tokens/m3/_md-sys-typescale.scss +128 -0
  32. package/core/tokens/m3/_theme.scss +47 -0
  33. package/datetimepicker/_datetimepicker-theme.scss +29 -39
  34. package/datetimepicker/_m2-datetimepicker.scss +149 -0
  35. package/datetimepicker/_m3-datetimepicker.scss +81 -0
  36. package/datetimepicker/calendar-body.scss +31 -56
  37. package/datetimepicker/calendar.scss +43 -79
  38. package/datetimepicker/clock.scss +28 -47
  39. package/datetimepicker/datetimepicker-content.scss +9 -15
  40. package/datetimepicker/datetimepicker-toggle.scss +4 -9
  41. package/datetimepicker/index.d.ts +1208 -3
  42. package/datetimepicker/time-view.scss +26 -32
  43. package/dialog/index.d.ts +54 -5
  44. package/drawer/_drawer-theme.scss +25 -30
  45. package/{core/tokens/m2/mtx/_drawer.scss → drawer/_m2-drawer.scss} +9 -12
  46. package/drawer/_m3-drawer.scss +24 -0
  47. package/drawer/drawer-container.scss +13 -24
  48. package/drawer/index.d.ts +221 -3
  49. package/fesm2022/mtxAlert.mjs +12 -15
  50. package/fesm2022/mtxAlert.mjs.map +1 -1
  51. package/fesm2022/mtxButton.mjs +7 -7
  52. package/fesm2022/mtxCheckboxGroup.mjs +7 -7
  53. package/fesm2022/mtxColorpicker.mjs +21 -21
  54. package/fesm2022/mtxColorpicker.mjs.map +1 -1
  55. package/fesm2022/mtxColumnResize.mjs +232 -103
  56. package/fesm2022/mtxColumnResize.mjs.map +1 -1
  57. package/fesm2022/mtxCore.mjs +21 -21
  58. package/fesm2022/mtxDatetimepicker.mjs +63 -63
  59. package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
  60. package/fesm2022/mtxDialog.mjs +10 -10
  61. package/fesm2022/mtxDialog.mjs.map +1 -1
  62. package/fesm2022/mtxDrawer.mjs +10 -10
  63. package/fesm2022/mtxGrid.mjs +99 -106
  64. package/fesm2022/mtxGrid.mjs.map +1 -1
  65. package/fesm2022/mtxLoader.mjs +7 -7
  66. package/fesm2022/mtxPhotoviewer.mjs +11 -11
  67. package/fesm2022/mtxPhotoviewer.mjs.map +1 -1
  68. package/fesm2022/mtxPopover.mjs +24 -25
  69. package/fesm2022/mtxPopover.mjs.map +1 -1
  70. package/fesm2022/mtxProgress.mjs +7 -7
  71. package/fesm2022/mtxSelect.mjs +54 -54
  72. package/fesm2022/mtxSelect.mjs.map +1 -1
  73. package/fesm2022/mtxSplit.mjs +10 -10
  74. package/fesm2022/mtxTooltip.mjs +13 -13
  75. package/fesm2022/mtxTooltip.mjs.map +1 -1
  76. package/grid/_grid-theme.scss +22 -35
  77. package/grid/_m2-grid.scss +66 -0
  78. package/grid/_m3-grid.scss +35 -0
  79. package/grid/column-menu.scss +6 -23
  80. package/grid/column-resize/_column-resize.scss +35 -30
  81. package/grid/grid.scss +41 -73
  82. package/grid/index.d.ts +799 -3
  83. package/index.d.ts +2 -5
  84. package/loader/_loader-theme.scss +26 -31
  85. package/{core/tokens/m2/mtx/_loader.scss → loader/_m2-loader.scss} +5 -10
  86. package/loader/_m3-loader.scss +20 -0
  87. package/loader/index.d.ts +43 -5
  88. package/loader/loader.scss +4 -5
  89. package/package.json +29 -29
  90. package/photoviewer/index.d.ts +26 -5
  91. package/{core/tokens/m2/mtx/_popover.scss → popover/_m2-popover.scss} +9 -12
  92. package/popover/_m3-popover.scss +26 -0
  93. package/popover/_popover-theme.scss +26 -31
  94. package/popover/index.d.ts +399 -3
  95. package/popover/popover.scss +23 -29
  96. package/prebuilt-themes/azure-blue.css +1 -1
  97. package/prebuilt-themes/cyan-orange.css +1 -1
  98. package/prebuilt-themes/deeppurple-amber.css +1 -1
  99. package/prebuilt-themes/indigo-pink.css +1 -1
  100. package/prebuilt-themes/magenta-violet.css +1 -1
  101. package/prebuilt-themes/pink-bluegrey.css +1 -1
  102. package/prebuilt-themes/purple-green.css +1 -1
  103. package/prebuilt-themes/rose-red.css +1 -1
  104. package/progress/_m2-progress.scss +53 -0
  105. package/progress/_m3-progress.scss +33 -0
  106. package/progress/_progress-theme.scss +22 -34
  107. package/progress/index.d.ts +35 -5
  108. package/progress/progress.scss +28 -43
  109. package/select/_m2-select.scss +79 -0
  110. package/select/_m3-select.scss +46 -0
  111. package/select/_select-theme.scss +27 -37
  112. package/select/index.d.ts +381 -3
  113. package/select/select.scss +189 -205
  114. package/{core/tokens/m2/mtx/_split.scss → split/_m2-split.scss} +6 -9
  115. package/split/_m3-split.scss +23 -0
  116. package/split/_split-theme.scss +31 -34
  117. package/split/index.d.ts +255 -3
  118. package/split/split.scss +8 -11
  119. package/tooltip/_m2-tooltip.scss +50 -0
  120. package/tooltip/_m3-tooltip.scss +28 -0
  121. package/tooltip/_tooltip-theme.scss +23 -47
  122. package/tooltip/index.d.ts +345 -3
  123. package/tooltip/tooltip.scss +11 -15
  124. package/alert/alert-module.d.ts +0 -8
  125. package/alert/alert.d.ts +0 -19
  126. package/alert/public-api.d.ts +0 -2
  127. package/button/button-loading.d.ts +0 -19
  128. package/button/button-module.d.ts +0 -10
  129. package/button/public-api.d.ts +0 -2
  130. package/checkbox-group/checkbox-group-module.d.ts +0 -11
  131. package/checkbox-group/checkbox-group.d.ts +0 -86
  132. package/checkbox-group/interfaces.d.ts +0 -17
  133. package/checkbox-group/public-api.d.ts +0 -3
  134. package/colorpicker/colorpicker-animations.d.ts +0 -9
  135. package/colorpicker/colorpicker-input.d.ts +0 -88
  136. package/colorpicker/colorpicker-module.d.ts +0 -15
  137. package/colorpicker/colorpicker-toggle.d.ts +0 -39
  138. package/colorpicker/colorpicker.d.ts +0 -140
  139. package/colorpicker/public-api.d.ts +0 -5
  140. package/column-resize/column-resize-directives/column-resize-flex.d.ts +0 -29
  141. package/column-resize/column-resize-directives/column-resize.d.ts +0 -29
  142. package/column-resize/column-resize-directives/constants.d.ts +0 -10
  143. package/column-resize/column-resize-module.d.ts +0 -12
  144. package/column-resize/column-resize-notifier.d.ts +0 -48
  145. package/column-resize/column-resize.d.ts +0 -39
  146. package/column-resize/column-size-store.d.ts +0 -12
  147. package/column-resize/event-dispatcher.d.ts +0 -35
  148. package/column-resize/overlay-handle.d.ts +0 -43
  149. package/column-resize/polyfill.d.ts +0 -9
  150. package/column-resize/public-api.d.ts +0 -12
  151. package/column-resize/resizable.d.ts +0 -63
  152. package/column-resize/resize-ref.d.ts +0 -17
  153. package/column-resize/resize-strategy.d.ts +0 -84
  154. package/column-resize/selectors.d.ts +0 -10
  155. package/core/datetime/datetime-adapter.d.ts +0 -45
  156. package/core/datetime/datetime-formats.d.ts +0 -22
  157. package/core/datetime/datetime.module.d.ts +0 -15
  158. package/core/datetime/index.d.ts +0 -5
  159. package/core/datetime/native-datetime-adapter.d.ts +0 -40
  160. package/core/datetime/native-datetime-formats.d.ts +0 -2
  161. package/core/pipes/index.d.ts +0 -3
  162. package/core/pipes/is-template-ref.pipe.d.ts +0 -7
  163. package/core/pipes/pipes.module.d.ts +0 -9
  164. package/core/pipes/to-observable.pipe.d.ts +0 -8
  165. package/core/public-api.d.ts +0 -2
  166. package/core/theming/_inspection.scss +0 -38
  167. package/core/theming/_validation.scss +0 -5
  168. package/core/tokens/_density.scss +0 -49
  169. package/core/tokens/_format-tokens.scss +0 -5
  170. package/core/tokens/_token-definition.scss +0 -271
  171. package/core/tokens/m2/mdc/_plain-tooltip.scss +0 -63
  172. package/core/tokens/m2/mtx/_alert.scss +0 -62
  173. package/core/tokens/m2/mtx/_datetimepicker.scss +0 -152
  174. package/core/tokens/m2/mtx/_grid.scss +0 -69
  175. package/core/tokens/m2/mtx/_progress.scss +0 -56
  176. package/core/tokens/m2/mtx/_select.scss +0 -82
  177. package/core/tokens/m3/definitions/_index.scss +0 -9
  178. package/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss +0 -51
  179. package/core/tokens/m3/definitions/_md-ref-palette.scss +0 -100
  180. package/core/tokens/m3/definitions/_md-ref-typeface.scss +0 -14
  181. package/core/tokens/m3/definitions/_md-sys-color.scss +0 -126
  182. package/core/tokens/m3/definitions/_md-sys-elevation.scss +0 -15
  183. package/core/tokens/m3/definitions/_md-sys-motion.scss +0 -46
  184. package/core/tokens/m3/definitions/_md-sys-shape.scss +0 -24
  185. package/core/tokens/m3/definitions/_md-sys-state.scss +0 -13
  186. package/core/tokens/m3/definitions/_md-sys-typescale.scss +0 -308
  187. package/core/tokens/m3/index.scss +0 -47
  188. package/core/tokens/m3/mdc/_plain-tooltip.scss +0 -15
  189. package/core/tokens/m3/mtx/_alert.scss +0 -41
  190. package/core/tokens/m3/mtx/_colorpicker.scss +0 -19
  191. package/core/tokens/m3/mtx/_datetimepicker.scss +0 -140
  192. package/core/tokens/m3/mtx/_drawer.scss +0 -22
  193. package/core/tokens/m3/mtx/_grid.scss +0 -32
  194. package/core/tokens/m3/mtx/_loader.scss +0 -22
  195. package/core/tokens/m3/mtx/_popover.scss +0 -25
  196. package/core/tokens/m3/mtx/_progress.scss +0 -32
  197. package/core/tokens/m3/mtx/_select.scss +0 -76
  198. package/core/tokens/m3/mtx/_split.scss +0 -30
  199. package/datetimepicker/calendar-body.d.ts +0 -66
  200. package/datetimepicker/calendar.d.ts +0 -157
  201. package/datetimepicker/clock.d.ts +0 -101
  202. package/datetimepicker/datetimepicker-actions.d.ts +0 -36
  203. package/datetimepicker/datetimepicker-animations.d.ts +0 -11
  204. package/datetimepicker/datetimepicker-errors.d.ts +0 -2
  205. package/datetimepicker/datetimepicker-filtertype.d.ts +0 -5
  206. package/datetimepicker/datetimepicker-input.d.ts +0 -105
  207. package/datetimepicker/datetimepicker-intl.d.ts +0 -53
  208. package/datetimepicker/datetimepicker-module.d.ts +0 -22
  209. package/datetimepicker/datetimepicker-toggle.d.ts +0 -42
  210. package/datetimepicker/datetimepicker-types.d.ts +0 -6
  211. package/datetimepicker/datetimepicker.d.ts +0 -274
  212. package/datetimepicker/month-view.d.ts +0 -80
  213. package/datetimepicker/multi-year-view.d.ts +0 -86
  214. package/datetimepicker/public-api.d.ts +0 -16
  215. package/datetimepicker/time-view.d.ts +0 -147
  216. package/datetimepicker/year-view.d.ts +0 -68
  217. package/dialog/dialog-config.d.ts +0 -17
  218. package/dialog/dialog-container.d.ts +0 -11
  219. package/dialog/dialog-module.d.ts +0 -12
  220. package/dialog/dialog.d.ts +0 -15
  221. package/dialog/public-api.d.ts +0 -4
  222. package/drawer/drawer-animations.d.ts +0 -8
  223. package/drawer/drawer-config.d.ts +0 -63
  224. package/drawer/drawer-container.d.ts +0 -35
  225. package/drawer/drawer-module.d.ts +0 -10
  226. package/drawer/drawer-ref.d.ts +0 -53
  227. package/drawer/drawer.d.ts +0 -59
  228. package/drawer/public-api.d.ts +0 -6
  229. package/grid/cell.d.ts +0 -32
  230. package/grid/column-menu.d.ts +0 -39
  231. package/grid/column-resize/column-resize-directives/column-resize-flex.d.ts +0 -24
  232. package/grid/column-resize/column-resize-directives/column-resize.d.ts +0 -24
  233. package/grid/column-resize/column-resize-directives/common.d.ts +0 -13
  234. package/grid/column-resize/column-resize-module.d.ts +0 -17
  235. package/grid/column-resize/index.d.ts +0 -7
  236. package/grid/column-resize/overlay-handle.d.ts +0 -32
  237. package/grid/column-resize/resizable-directives/common.d.ts +0 -19
  238. package/grid/column-resize/resizable-directives/resizable.d.ts +0 -32
  239. package/grid/column-resize/resize-strategy.d.ts +0 -20
  240. package/grid/expansion-toggle.d.ts +0 -19
  241. package/grid/grid-module.d.ts +0 -31
  242. package/grid/grid-pipes.d.ts +0 -39
  243. package/grid/grid-utils.d.ts +0 -33
  244. package/grid/grid.d.ts +0 -268
  245. package/grid/interfaces.d.ts +0 -180
  246. package/grid/public-api.d.ts +0 -17
  247. package/grid/selectable-cell.d.ts +0 -16
  248. package/loader/loader-module.d.ts +0 -10
  249. package/loader/loader.d.ts +0 -30
  250. package/loader/public-api.d.ts +0 -2
  251. package/photoviewer/photoviewer-module.d.ts +0 -7
  252. package/photoviewer/photoviewer.d.ts +0 -17
  253. package/photoviewer/public-api.d.ts +0 -2
  254. package/popover/popover-animations.d.ts +0 -11
  255. package/popover/popover-content.d.ts +0 -43
  256. package/popover/popover-errors.d.ts +0 -14
  257. package/popover/popover-interfaces.d.ts +0 -50
  258. package/popover/popover-module.d.ts +0 -13
  259. package/popover/popover-target.d.ts +0 -7
  260. package/popover/popover-trigger.d.ts +0 -132
  261. package/popover/popover-types.d.ts +0 -10
  262. package/popover/popover.d.ts +0 -147
  263. package/popover/public-api.d.ts +0 -8
  264. package/progress/progress-module.d.ts +0 -8
  265. package/progress/progress.d.ts +0 -24
  266. package/progress/public-api.d.ts +0 -2
  267. package/public-api.d.ts +0 -2
  268. package/select/option.d.ts +0 -21
  269. package/select/public-api.d.ts +0 -5
  270. package/select/select-intl.d.ts +0 -18
  271. package/select/select-module.d.ts +0 -12
  272. package/select/select.d.ts +0 -270
  273. package/select/templates.d.ts +0 -67
  274. package/split/interfaces.d.ts +0 -52
  275. package/split/public-api.d.ts +0 -5
  276. package/split/split-module.d.ts +0 -9
  277. package/split/split-pane.d.ts +0 -53
  278. package/split/split.d.ts +0 -133
  279. package/split/utils.d.ts +0 -13
  280. package/tooltip/public-api.d.ts +0 -3
  281. package/tooltip/tooltip-animations.d.ts +0 -9
  282. package/tooltip/tooltip-module.d.ts +0 -13
  283. package/tooltip/tooltip.d.ts +0 -321
package/fesm2022/mtxDatetimepicker.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import { CdkMonitorFocus, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
2
2
  import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
3
3
  import { ComponentPortal, CdkPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
4
- import { DOCUMENT, CommonModule } from '@angular/common';
4
+ import { CommonModule } from '@angular/common';
5
5
  import * as i0 from '@angular/core';
6
- import { Injectable, inject, ElementRef, NgZone, Injector, EventEmitter, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, booleanAttribute, ViewChild, ChangeDetectorRef, Directive, InjectionToken, ANIMATION_MODULE_TYPE, Renderer2, ViewContainerRef, numberAttribute, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
6
+ import { Injectable, inject, ElementRef, NgZone, Injector, EventEmitter, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, booleanAttribute, ViewChild, ChangeDetectorRef, DOCUMENT, Directive, InjectionToken, ANIMATION_MODULE_TYPE, Renderer2, ViewContainerRef, numberAttribute, forwardRef, HostAttributeToken, ContentChild, TemplateRef, NgModule } from '@angular/core';
7
7
  import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
8
8
  import { DatetimeAdapter, MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
9
9
  import { Subject, Subscription, merge, of } from 'rxjs';
@@ -87,10 +87,10 @@ class MtxDatetimepickerIntl {
87
87
  formatYearRangeLabel(start, end) {
88
88
  return `${start} to ${end}`;
89
89
  }
90
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
91
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' }); }
90
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
91
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerIntl, providedIn: 'root' }); }
92
92
  }
93
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
93
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerIntl, decorators: [{
94
94
  type: Injectable,
95
95
  args: [{ providedIn: 'root' }]
96
96
  }] });
@@ -181,16 +181,16 @@ class MtxCalendarBody {
181
181
  });
182
182
  }, { injector: this._injector });
183
183
  }
184
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
185
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", cellAspectRatio: "cellAspectRatio", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { attributes: { "role": "grid", "aria-readonly": "true" }, classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ label }}\n </td>\n </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (row[0].isWeekNumber) {\n <th\n class=\"mtx-calendar-body-week-number\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.aria-label]=\"row[0].ariaLabel\"\n >\n {{ row[0].displayValue }}\n </th>\n }\n\n <!--\n This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n table cells is maintained by setting the top and bottom padding as a percentage of the width\n (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n <!--\n Each gridcell in the calendar contains a button, which signals to assistive technology that the\n cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n background.\n -->\n @for (item of row; track item.id; let colIndex = $index) {\n @if (!item.isWeekNumber) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mtx-calendar-body-cell\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\"\n >\n <span\n class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n >\n {{ item.displayValue }}\n </span>\n </button>\n </td>\n }\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-week-number{height:0;line-height:0;font-weight:400;color:var(--mtx-datetimepicker-calendar-body-week-number-text-color, var(--mat-sys-secondary))}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;font-family:inherit;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
184
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
185
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", cellAspectRatio: "cellAspectRatio", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { attributes: { "role": "grid", "aria-readonly": "true" }, classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ label }}\n </td>\n </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (row[0].isWeekNumber) {\n <th\n class=\"mtx-calendar-body-week-number\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.aria-label]=\"row[0].ariaLabel\"\n >\n {{ row[0].displayValue }}\n </th>\n }\n\n <!--\n This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n table cells is maintained by setting the top and bottom padding as a percentage of the width\n (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n <!--\n Each gridcell in the calendar contains a button, which signals to assistive technology that the\n cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n background.\n -->\n @for (item of row; track item.id; let colIndex = $index) {\n @if (!item.isWeekNumber) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mtx-calendar-body-cell\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\"\n >\n <span\n class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n >\n {{ item.displayValue }}\n </span>\n </button>\n </td>\n }\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-week-number{height:0;line-height:0;font-weight:400;color:var(--mtx-datetimepicker-calendar-body-week-number-text-color, var(--mat-sys-secondary))}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
186
186
  }
187
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendarBody, decorators: [{
187
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxCalendarBody, decorators: [{
188
188
  type: Component,
189
189
  args: [{ selector: '[mtx-calendar-body]', host: {
190
190
  'class': 'mtx-calendar-body',
191
191
  'role': 'grid',
192
192
  'aria-readonly': 'true',
193
- }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ label }}\n </td>\n </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (row[0].isWeekNumber) {\n <th\n class=\"mtx-calendar-body-week-number\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.aria-label]=\"row[0].ariaLabel\"\n >\n {{ row[0].displayValue }}\n </th>\n }\n\n <!--\n This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n table cells is maintained by setting the top and bottom padding as a percentage of the width\n (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n <!--\n Each gridcell in the calendar contains a button, which signals to assistive technology that the\n cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n background.\n -->\n @for (item of row; track item.id; let colIndex = $index) {\n @if (!item.isWeekNumber) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mtx-calendar-body-cell\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\"\n >\n <span\n class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n >\n {{ item.displayValue }}\n </span>\n </button>\n </td>\n }\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-week-number{height:0;line-height:0;font-weight:400;color:var(--mtx-datetimepicker-calendar-body-week-number-text-color, var(--mat-sys-secondary))}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;font-family:inherit;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"] }]
193
+ }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ label }}\n </td>\n </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n @if (row[0].isWeekNumber) {\n <th\n class=\"mtx-calendar-body-week-number\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.aria-label]=\"row[0].ariaLabel\"\n >\n {{ row[0].displayValue }}\n </th>\n }\n\n <!--\n This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n table cells is maintained by setting the top and bottom padding as a percentage of the width\n (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n >\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n <!--\n Each gridcell in the calendar contains a button, which signals to assistive technology that the\n cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n background.\n -->\n @for (item of row; track item.id; let colIndex = $index) {\n @if (!item.isWeekNumber) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mtx-calendar-body-cell\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\"\n >\n <span\n class=\"mtx-calendar-body-cell-content mat-focus-indicator\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n >\n {{ item.displayValue }}\n </span>\n </button>\n </td>\n }\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-week-number{height:0;line-height:0;font-weight:400;color:var(--mtx-datetimepicker-calendar-body-week-number-text-color, var(--mat-sys-secondary))}.mtx-calendar-body-cell-container{position:relative;height:0;line-height:0}.mtx-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;margin:0;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent}.mtx-calendar-body-cell::-moz-focus-inner{border:0}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media (forced-colors: active){.mtx-calendar-body-disabled{opacity:.5}}.mtx-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border:1px;border-style:solid;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color, transparent)}.mtx-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media (forced-colors: active){.mtx-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected),.cdk-program-focused .mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}\n"] }]
194
194
  }], propDecorators: { label: [{
195
195
  type: Input
196
196
  }], rows: [{
@@ -400,10 +400,10 @@ class MtxMonthView {
400
400
  _isRtl() {
401
401
  return this._dir && this._dir.value === 'rtl';
402
402
  }
403
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
404
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMonthView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\">\n <tr>\n @if (showWeekNumbers) {\n <th></th>\n }\n @for (day of _weekdays; track day.id) {\n <th [attr.aria-label]=\"day.long\">{{ day.narrow }}</th>\n }\n </tr>\n </thead>\n <tbody\n mtx-calendar-body\n [rows]=\"_weeks\"\n [numCols]=\"showWeekNumbers ? 8 : 7\"\n [todayValue]=\"_todayDate!\"\n [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n [selectedValue]=\"_selectedDate!\"\n (selectedValueChange)=\"_dateSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"\n ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
403
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
404
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMonthView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\">\n <tr>\n @if (showWeekNumbers) {\n <th></th>\n }\n @for (day of _weekdays; track day.id) {\n <th [attr.aria-label]=\"day.long\">{{ day.narrow }}</th>\n }\n </tr>\n </thead>\n <tbody\n mtx-calendar-body\n [rows]=\"_weeks\"\n [numCols]=\"showWeekNumbers ? 8 : 7\"\n [todayValue]=\"_todayDate!\"\n [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n [selectedValue]=\"_selectedDate!\"\n (selectedValueChange)=\"_dateSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"\n ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
405
405
  }
406
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMonthView, decorators: [{
406
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxMonthView, decorators: [{
407
407
  type: Component,
408
408
  args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\">\n <tr>\n @if (showWeekNumbers) {\n <th></th>\n }\n @for (day of _weekdays; track day.id) {\n <th [attr.aria-label]=\"day.long\">{{ day.narrow }}</th>\n }\n </tr>\n </thead>\n <tbody\n mtx-calendar-body\n [rows]=\"_weeks\"\n [numCols]=\"showWeekNumbers ? 8 : 7\"\n [todayValue]=\"_todayDate!\"\n [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n [selectedValue]=\"_selectedDate!\"\n (selectedValueChange)=\"_dateSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"\n ></tbody>\n</table>\n" }]
409
409
  }], ctorParameters: () => [], propDecorators: { type: [{
@@ -610,10 +610,10 @@ class MtxMultiYearView {
610
610
  _isRtl() {
611
611
  return this._dir && this._dir.value === 'rtl';
612
612
  }
613
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
614
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\"></thead>\n <tbody mtx-calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_getActiveCell()\"\n [allowDisabledSelection]=\"true\"\n [selectedValue]=\"_selectedYear!\"\n (selectedValueChange)=\"_yearSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
613
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
614
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\"></thead>\n <tbody mtx-calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_getActiveCell()\"\n [allowDisabledSelection]=\"true\"\n [selectedValue]=\"_selectedYear!\"\n (selectedValueChange)=\"_yearSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
615
615
  }
616
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxMultiYearView, decorators: [{
616
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxMultiYearView, decorators: [{
617
617
  type: Component,
618
618
  args: [{ selector: 'mtx-multi-year-view', exportAs: 'mtxMultiYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\"></thead>\n <tbody mtx-calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_getActiveCell()\"\n [allowDisabledSelection]=\"true\"\n [selectedValue]=\"_selectedYear!\"\n (selectedValueChange)=\"_yearSelected($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
619
619
  }], ctorParameters: () => [], propDecorators: { type: [{
@@ -968,10 +968,10 @@ class MtxClock {
968
968
  this._changeDetectorRef.markForCheck();
969
969
  this.activeDateChange.emit(this.activeDate);
970
970
  }
971
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxClock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
972
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxClock, isStandalone: true, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", actionButtons: "actionButtons", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n <div class=\"mtx-clock-center\"></div>\n <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n @for (item of _hours; track item.value) {\n <div\n class=\"mtx-clock-cell\"\n [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n [style.fontSize]=\"item.fontSize\"\n [style.left]=\"item.left+'%'\"\n [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n }\n </div>\n <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n @for (item of _minutes; track item.value) {\n <div\n class=\"mtx-clock-cell\"\n [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n [style.left]=\"item.left+'%'\"\n [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n }\n </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-sys-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-sys-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
971
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxClock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
972
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: MtxClock, isStandalone: true, selector: "mtx-clock", inputs: { dateFilter: "dateFilter", interval: "interval", actionButtons: "actionButtons", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection" }, host: { attributes: { "role": "clock" }, listeners: { "mousedown": "_pointerDown($event)", "touchstart": "_pointerDown($event)" }, classAttribute: "mtx-clock" }, exportAs: ["mtxClock"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-clock-wrapper\">\n <div class=\"mtx-clock-center\"></div>\n <div class=\"mtx-clock-hand\" [style]=\"_hand\"></div>\n <div class=\"mtx-clock-hours\" [class.active]=\"_hourView\">\n @for (item of _hours; track item.value) {\n <div\n class=\"mtx-clock-cell\"\n [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n [style.fontSize]=\"item.fontSize\"\n [style.left]=\"item.left+'%'\"\n [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n }\n </div>\n <div class=\"mtx-clock-minutes\" [class.active]=\"!_hourView\">\n @for (item of _minutes; track item.value) {\n <div\n class=\"mtx-clock-cell\"\n [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n [style.left]=\"item.left+'%'\"\n [style.top]=\"item.top+'%'\">{{ item.displayValue }}</div>\n }\n </div>\n</div>\n", styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;font-size:var(--mtx-datetimepicker-clock-text-size, var(--mat-sys-title-small-size))}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-dial-background-color, var(--mat-sys-surface-container-highest))}.mtx-clock-center{position:absolute;top:50%;left:50%;width:3%;height:3%;margin:-1.5%;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand{position:absolute;inset:0;width:2px;margin:0 auto;transform-origin:bottom;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer;color:var(--mtx-datetimepicker-clock-cell-text-color, var(--mat-sys-on-surface))}.mtx-clock-cell.mtx-clock-cell-selected{color:#fff;background-color:var(--mtx-datetimepicker-clock-hand-background-color, var(--mat-sys-primary))}.mtx-clock-cell:not(.mtx-clock-cell-selected,.mtx-clock-cell-disabled):hover{background-color:var(--mtx-datetimepicker-clock-cell-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none;color:var(--mtx-datetimepicker-clock-cell-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
973
973
  }
974
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxClock, decorators: [{
974
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxClock, decorators: [{
975
975
  type: Component,
976
976
  args: [{ selector: 'mtx-clock', host: {
977
977
  'role': 'clock',
@@ -1183,10 +1183,10 @@ class MtxTimeInput {
1183
1183
  this.inputElement.removeEventListener('keypress', this.keyPressListener);
1184
1184
  this.inputElement.removeEventListener('input', this.inputEventListener);
1185
1185
  }
1186
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1187
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
1186
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1187
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
1188
1188
  }
1189
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeInput, decorators: [{
1189
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxTimeInput, decorators: [{
1190
1190
  type: Directive,
1191
1191
  args: [{
1192
1192
  selector: 'input.mtx-time-input',
@@ -1504,16 +1504,16 @@ class MtxTimeView {
1504
1504
  this._elementRef.nativeElement.focus();
1505
1505
  }
1506
1506
  }
1507
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1508
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxTimeView, isStandalone: true, selector: "mtx-time-view", inputs: { dateFilter: "dateFilter", timeInput: ["timeInput", "timeInput", booleanAttribute], interval: "interval", actionsPortal: "actionsPortal", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-time-view" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "@if (timeInput) {\n <div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"_handleHourInputChange($event)\"\n (focus)=\"_handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"_handleFocus('minute')\" />\n\n @if (twelvehour) {\n <div class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n }\n </div>\n </div>\n}\n\n<mtx-clock\n (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (_userSelection)=\"_handleSelection()\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [actionButtons]=\"!!actionsPortal\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n <div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n [disabled]=\"_minuteInputDirective?.invalid || _hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1507
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxTimeView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1508
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: MtxTimeView, isStandalone: true, selector: "mtx-time-view", inputs: { dateFilter: "dateFilter", timeInput: ["timeInput", "timeInput", booleanAttribute], interval: "interval", actionsPortal: "actionsPortal", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], autoFocus: ["autoFocus", "autoFocus", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, classAttribute: "mtx-time-view" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "@if (timeInput) {\n <div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"_handleHourInputChange($event)\"\n (focus)=\"_handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"_handleFocus('minute')\" />\n\n @if (twelvehour) {\n <div class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n }\n </div>\n </div>\n}\n\n<mtx-clock\n (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (_userSelection)=\"_handleSelection()\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [actionButtons]=\"!!actionsPortal\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n <div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n [disabled]=\"_minuteInputDirective?.invalid || _hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mat-button-text-label-text-weight: 400;--mat-button-text-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mat-button-text-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mat-button-text-label-text-weight: 500;--mat-button-text-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1509
1509
  }
1510
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxTimeView, decorators: [{
1510
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxTimeView, decorators: [{
1511
1511
  type: Component,
1512
1512
  args: [{ selector: 'mtx-time-view', exportAs: 'mtxTime', host: {
1513
1513
  'class': 'mtx-time-view',
1514
1514
  'tabindex': '0',
1515
1515
  '(keydown)': '_handleCalendarBodyKeydown($event)',
1516
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MtxClock, MtxTimeInput], template: "@if (timeInput) {\n <div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"_handleHourInputChange($event)\"\n (focus)=\"_handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"_handleFocus('minute')\" />\n\n @if (twelvehour) {\n <div class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n }\n </div>\n </div>\n}\n\n<mtx-clock\n (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (_userSelection)=\"_handleSelection()\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [actionButtons]=\"!!actionsPortal\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n <div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n [disabled]=\"_minuteInputDirective?.invalid || _hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
1516
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MtxClock, MtxTimeInput], template: "@if (timeInput) {\n <div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"_handleHourInputChange($event)\"\n (focus)=\"_handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"_handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"_handleFocus('minute')\" />\n\n @if (twelvehour) {\n <div class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n }\n </div>\n </div>\n}\n\n<mtx-clock\n (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (_userSelection)=\"_handleSelection()\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [actionButtons]=\"!!actionsPortal\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n@if (timeInput && !actionsPortal) {\n <div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"_handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"_handleOk()\"\n [disabled]=\"_minuteInputDirective?.invalid || _hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n </div>\n}\n", styles: [".mtx-time-view{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border:2px solid transparent;appearance:none;outline:none;border-radius:var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-datetimepicker-time-input-background-color, var(--mat-sys-surface-container-highest));color:var(--mtx-datetimepicker-time-input-text-color, var(--mat-sys-on-surface))}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color, var(--mat-sys-primary-container));color:var(--mtx-datetimepicker-time-input-active-state-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-outline-color, var(--mat-sys-primary));background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color, var(--mat-sys-primary-container))}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color, var(--mat-sys-on-primary-container))}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-outline-color, var(--mat-sys-error))}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mat-button-text-label-text-weight: 400;--mat-button-text-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color, var(--mat-sys-on-surface));--mat-button-text-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid;border-color:var(--mtx-datetimepicker-time-ampm-outline-color, var(--mat-sys-outline))}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mat-button-text-label-text-weight: 500;--mat-button-text-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color, var(--mat-sys-on-tertiary-container));background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color, var(--mat-sys-tertiary-container))}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-bottom-left-radius:0;border-bottom-right-radius:0}.mtx-time-ampm .mtx-time-pm{border-top-left-radius:0;border-top-right-radius:0;border-top-width:0}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
1517
1517
  }], ctorParameters: () => [], propDecorators: { selectedChange: [{
1518
1518
  type: Output
1519
1519
  }], activeDateChange: [{
@@ -1723,10 +1723,10 @@ class MtxYearView {
1723
1723
  _isRtl() {
1724
1724
  return this._dir && this._dir.value === 'rtl';
1725
1725
  }
1726
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1727
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\"></thead>\n <tbody mtx-calendar-body\n [label]=\"_yearLabel\"\n [rows]=\"_months\"\n [todayValue]=\"_todayMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_adapter.getMonth(activeDate)\"\n [selectedValue]=\"_selectedMonth!\"\n (selectedValueChange)=\"_monthSelected($event)\"\n [allowDisabledSelection]=\"true\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1726
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxYearView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1727
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_mtxCalendarBody", first: true, predicate: MtxCalendarBody, descendants: true }], exportAs: ["mtxYearView"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\"></thead>\n <tbody mtx-calendar-body\n [label]=\"_yearLabel\"\n [rows]=\"_months\"\n [todayValue]=\"_todayMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_adapter.getMonth(activeDate)\"\n [selectedValue]=\"_selectedMonth!\"\n (selectedValueChange)=\"_monthSelected($event)\"\n [allowDisabledSelection]=\"true\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "cellAspectRatio", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1728
1728
  }
1729
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxYearView, decorators: [{
1729
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxYearView, decorators: [{
1730
1730
  type: Component,
1731
1731
  args: [{ selector: 'mtx-year-view', exportAs: 'mtxYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MtxCalendarBody], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<table class=\"mtx-calendar-table\" role=\"grid\">\n <thead class=\"mtx-calendar-table-header\"></thead>\n <tbody mtx-calendar-body\n [label]=\"_yearLabel\"\n [rows]=\"_months\"\n [todayValue]=\"_todayMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_adapter.getMonth(activeDate)\"\n [selectedValue]=\"_selectedMonth!\"\n (selectedValueChange)=\"_monthSelected($event)\"\n [allowDisabledSelection]=\"true\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\"></tbody>\n</table>\n" }]
1732
1732
  }], ctorParameters: () => [], propDecorators: { type: [{
@@ -2141,10 +2141,10 @@ class MtxCalendar {
2141
2141
  focusActiveCell() {
2142
2142
  this._getCurrentViewComponent()._focusActiveCell(false);
2143
2143
  }
2144
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2145
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: MtxMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: MtxYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: MtxMultiYearView, descendants: true }, { propertyName: "timeView", first: true, predicate: MtxTimeView, descendants: true }], exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n @if (_calendarHeaderPortal) {\n <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n } @else {\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n [attr.aria-label]=\"_yearButtonLabel\"\n (click)=\"_yearClicked()\">\n <span>{{ _yearButtonText }}</span>\n @if (multiYearSelector || type === 'year') {\n <svg\n class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M7,10L12,15L17,10H7Z\" />\n </svg>\n }\n </button>\n }\n @if (type !== 'year') {\n <div class=\"mtx-calendar-header-date-time\">\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n [class.active]=\"currentView === 'month'\"\n [class.not-clickable]=\"type === 'month'\"\n [attr.aria-label]=\"_dateButtonLabel\"\n (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n }\n @if (type.endsWith('time')) {\n <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n <span class=\"mtx-calendar-header-hour-minute-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n [class.active]=\"_clockView === 'hour'\"\n [attr.aria-label]=\"_hourButtonLabel\"\n (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n [class.active]=\"_clockView === 'minute'\"\n [attr.aria-label]=\"_minuteButtonLabel\"\n (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n </span>\n @if (twelvehour) {\n <span class=\"mtx-calendar-header-ampm-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n (click)=\"_ampmClicked('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n (click)=\"_ampmClicked('PM')\">PM</button>\n </span>\n }\n </span>\n }\n </div>\n }\n }\n</div>\n\n<div class=\"mtx-calendar-content\">\n @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n <div class=\"mtx-calendar-controls\">\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-previous-button\"\n [class.disabled]=\"!_previousEnabled()\"\n [attr.aria-disabled]=\"!_previousEnabled()\"\n [attr.aria-label]=\"_prevButtonLabel\"\n (click)=\"_previousClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n </svg>\n </button>\n <div class=\"mtx-calendar-period-button\">\n <strong>{{ _yearPeriodText }}</strong>\n </div>\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-next-button\"\n [class.disabled]=\"!_nextEnabled()\"\n [attr.aria-disabled]=\"!_nextEnabled()\"\n [attr.aria-label]=\"_nextButtonLabel\"\n (click)=\"_nextClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n </div>\n }\n\n <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n @switch (currentView) {\n @case ('month') {\n <mtx-month-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_dateSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [type]=\"type\">\n </mtx-month-view>\n }\n @case ('year') {\n <mtx-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_monthSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-year-view>\n }\n @case ('multi-year') {\n <mtx-multi-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_yearSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-multi-year-view>\n }\n @default {\n <mtx-time-view\n (_userSelection)=\"_userSelected()\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (selectedChange)=\"_timeSelected($event)\"\n [AMPM]=\"_AMPM\"\n (ampmChange)=\"_ampmClicked($event)\"\n [clockView]=\"_clockView\"\n (clockViewChange)=\"_clockView = $event\"\n [twelvehour]=\"twelvehour\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"timeInterval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(selected)]=\"_activeDate\"\n [actionsPortal]=\"actionsPortal\"\n [autoFocus]=\"timeInputAutoFocus\"\n [timeInput]=\"timeInput\"\n [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n </mtx-time-view>\n }\n }\n </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "showWeekNumbers", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTimeView, selector: "mtx-time-view", inputs: ["dateFilter", "timeInput", "interval", "actionsPortal", "preventSameDateTimeSelection", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2144
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2145
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: MtxMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: MtxYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: MtxMultiYearView, descendants: true }, { propertyName: "timeView", first: true, predicate: MtxTimeView, descendants: true }], exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n @if (_calendarHeaderPortal) {\n <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n } @else {\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n [attr.aria-label]=\"_yearButtonLabel\"\n (click)=\"_yearClicked()\">\n <span>{{ _yearButtonText }}</span>\n @if (multiYearSelector || type === 'year') {\n <svg\n class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M7,10L12,15L17,10H7Z\" />\n </svg>\n }\n </button>\n }\n @if (type !== 'year') {\n <div class=\"mtx-calendar-header-date-time\">\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n [class.active]=\"currentView === 'month'\"\n [class.not-clickable]=\"type === 'month'\"\n [attr.aria-label]=\"_dateButtonLabel\"\n (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n }\n @if (type.endsWith('time')) {\n <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n <span class=\"mtx-calendar-header-hour-minute-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n [class.active]=\"_clockView === 'hour'\"\n [attr.aria-label]=\"_hourButtonLabel\"\n (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n [class.active]=\"_clockView === 'minute'\"\n [attr.aria-label]=\"_minuteButtonLabel\"\n (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n </span>\n @if (twelvehour) {\n <span class=\"mtx-calendar-header-ampm-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n (click)=\"_ampmClicked('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n (click)=\"_ampmClicked('PM')\">PM</button>\n </span>\n }\n </span>\n }\n </div>\n }\n }\n</div>\n\n<div class=\"mtx-calendar-content\">\n @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n <div class=\"mtx-calendar-controls\">\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-previous-button\"\n [class.disabled]=\"!_previousEnabled()\"\n [attr.aria-disabled]=\"!_previousEnabled()\"\n [attr.aria-label]=\"_prevButtonLabel\"\n (click)=\"_previousClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n </svg>\n </button>\n <div class=\"mtx-calendar-period-button\">\n <strong>{{ _yearPeriodText }}</strong>\n </div>\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-next-button\"\n [class.disabled]=\"!_nextEnabled()\"\n [attr.aria-disabled]=\"!_nextEnabled()\"\n [attr.aria-label]=\"_nextButtonLabel\"\n (click)=\"_nextClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n </div>\n }\n\n <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n @switch (currentView) {\n @case ('month') {\n <mtx-month-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_dateSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [type]=\"type\">\n </mtx-month-view>\n }\n @case ('year') {\n <mtx-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_monthSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-year-view>\n }\n @case ('multi-year') {\n <mtx-multi-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_yearSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-multi-year-view>\n }\n @default {\n <mtx-time-view\n (_userSelection)=\"_userSelected()\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (selectedChange)=\"_timeSelected($event)\"\n [AMPM]=\"_AMPM\"\n (ampmChange)=\"_ampmClicked($event)\"\n [clockView]=\"_clockView\"\n (clockViewChange)=\"_clockView = $event\"\n [twelvehour]=\"twelvehour\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"timeInterval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(selected)]=\"_activeDate\"\n [actionsPortal]=\"actionsPortal\"\n [autoFocus]=\"timeInputAutoFocus\"\n [timeInput]=\"timeInput\"\n [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n </mtx-time-view>\n }\n }\n </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{--mat-button-text-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;overflow-wrap:anywhere}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0 0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-radius:0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0 0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-radius:0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "showWeekNumbers", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection", "activeDateChange"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTimeView, selector: "mtx-time-view", inputs: ["dateFilter", "timeInput", "interval", "actionsPortal", "preventSameDateTimeSelection", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2146
2146
  }
2147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCalendar, decorators: [{
2147
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxCalendar, decorators: [{
2148
2148
  type: Component,
2149
2149
  args: [{ selector: 'mtx-calendar', host: {
2150
2150
  'class': 'mtx-calendar',
@@ -2158,7 +2158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
2158
2158
  MtxYearView,
2159
2159
  MtxMultiYearView,
2160
2160
  MtxTimeView,
2161
- ], template: "<div class=\"mtx-calendar-header\">\n @if (_calendarHeaderPortal) {\n <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n } @else {\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n [attr.aria-label]=\"_yearButtonLabel\"\n (click)=\"_yearClicked()\">\n <span>{{ _yearButtonText }}</span>\n @if (multiYearSelector || type === 'year') {\n <svg\n class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M7,10L12,15L17,10H7Z\" />\n </svg>\n }\n </button>\n }\n @if (type !== 'year') {\n <div class=\"mtx-calendar-header-date-time\">\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n [class.active]=\"currentView === 'month'\"\n [class.not-clickable]=\"type === 'month'\"\n [attr.aria-label]=\"_dateButtonLabel\"\n (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n }\n @if (type.endsWith('time')) {\n <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n <span class=\"mtx-calendar-header-hour-minute-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n [class.active]=\"_clockView === 'hour'\"\n [attr.aria-label]=\"_hourButtonLabel\"\n (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n [class.active]=\"_clockView === 'minute'\"\n [attr.aria-label]=\"_minuteButtonLabel\"\n (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n </span>\n @if (twelvehour) {\n <span class=\"mtx-calendar-header-ampm-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n (click)=\"_ampmClicked('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n (click)=\"_ampmClicked('PM')\">PM</button>\n </span>\n }\n </span>\n }\n </div>\n }\n }\n</div>\n\n<div class=\"mtx-calendar-content\">\n @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n <div class=\"mtx-calendar-controls\">\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-previous-button\"\n [class.disabled]=\"!_previousEnabled()\"\n [attr.aria-disabled]=\"!_previousEnabled()\"\n [attr.aria-label]=\"_prevButtonLabel\"\n (click)=\"_previousClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n </svg>\n </button>\n <div class=\"mtx-calendar-period-button\">\n <strong>{{ _yearPeriodText }}</strong>\n </div>\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-next-button\"\n [class.disabled]=\"!_nextEnabled()\"\n [attr.aria-disabled]=\"!_nextEnabled()\"\n [attr.aria-label]=\"_nextButtonLabel\"\n (click)=\"_nextClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n </div>\n }\n\n <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n @switch (currentView) {\n @case ('month') {\n <mtx-month-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_dateSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [type]=\"type\">\n </mtx-month-view>\n }\n @case ('year') {\n <mtx-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_monthSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-year-view>\n }\n @case ('multi-year') {\n <mtx-multi-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_yearSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-multi-year-view>\n }\n @default {\n <mtx-time-view\n (_userSelection)=\"_userSelected()\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (selectedChange)=\"_timeSelected($event)\"\n [AMPM]=\"_AMPM\"\n (ampmChange)=\"_ampmClicked($event)\"\n [clockView]=\"_clockView\"\n (clockViewChange)=\"_clockView = $event\"\n [twelvehour]=\"twelvehour\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"timeInterval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(selected)]=\"_activeDate\"\n [actionsPortal]=\"actionsPortal\"\n [autoFocus]=\"timeInputAutoFocus\"\n [timeInput]=\"timeInput\"\n [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n </mtx-time-view>\n }\n }\n </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
2161
+ ], template: "<div class=\"mtx-calendar-header\">\n @if (_calendarHeaderPortal) {\n <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n } @else {\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n [attr.aria-label]=\"_yearButtonLabel\"\n (click)=\"_yearClicked()\">\n <span>{{ _yearButtonText }}</span>\n @if (multiYearSelector || type === 'year') {\n <svg\n class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M7,10L12,15L17,10H7Z\" />\n </svg>\n }\n </button>\n }\n @if (type !== 'year') {\n <div class=\"mtx-calendar-header-date-time\">\n @if (type !== 'time') {\n <button\n mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n [class.active]=\"currentView === 'month'\"\n [class.not-clickable]=\"type === 'month'\"\n [attr.aria-label]=\"_dateButtonLabel\"\n (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n }\n @if (type.endsWith('time')) {\n <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n <span class=\"mtx-calendar-header-hour-minute-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n [class.active]=\"_clockView === 'hour'\"\n [attr.aria-label]=\"_hourButtonLabel\"\n (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n [class.active]=\"_clockView === 'minute'\"\n [attr.aria-label]=\"_minuteButtonLabel\"\n (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n </span>\n @if (twelvehour) {\n <span class=\"mtx-calendar-header-ampm-container\">\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n (click)=\"_ampmClicked('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n (click)=\"_ampmClicked('PM')\">PM</button>\n </span>\n }\n </span>\n }\n </div>\n }\n }\n</div>\n\n<div class=\"mtx-calendar-content\">\n @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n <div class=\"mtx-calendar-controls\">\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-previous-button\"\n [class.disabled]=\"!_previousEnabled()\"\n [attr.aria-disabled]=\"!_previousEnabled()\"\n [attr.aria-label]=\"_prevButtonLabel\"\n (click)=\"_previousClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n </svg>\n </button>\n <div class=\"mtx-calendar-period-button\">\n <strong>{{ _yearPeriodText }}</strong>\n </div>\n <button mat-icon-button type=\"button\"\n class=\"mtx-calendar-next-button\"\n [class.disabled]=\"!_nextEnabled()\"\n [attr.aria-disabled]=\"!_nextEnabled()\"\n [attr.aria-label]=\"_nextButtonLabel\"\n (click)=\"_nextClicked()\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n </svg>\n </button>\n </div>\n }\n\n <div class=\"mtx-calendar-view\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n @switch (currentView) {\n @case ('month') {\n <mtx-month-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_dateSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [showWeekNumbers]=\"showWeekNumbers\"\n [type]=\"type\">\n </mtx-month-view>\n }\n @case ('year') {\n <mtx-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_monthSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-year-view>\n }\n @case ('multi-year') {\n <mtx-multi-year-view\n (_userSelection)=\"_userSelected()\"\n (selectedChange)=\"_yearSelected($event)\"\n [(activeDate)]=\"_activeDate\"\n [dateFilter]=\"_dateFilterForViews\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [type]=\"type\">\n </mtx-multi-year-view>\n }\n @default {\n <mtx-time-view\n (_userSelection)=\"_userSelected()\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n (selectedChange)=\"_timeSelected($event)\"\n [AMPM]=\"_AMPM\"\n (ampmChange)=\"_ampmClicked($event)\"\n [clockView]=\"_clockView\"\n (clockViewChange)=\"_clockView = $event\"\n [twelvehour]=\"twelvehour\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"timeInterval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(selected)]=\"_activeDate\"\n [actionsPortal]=\"actionsPortal\"\n [autoFocus]=\"timeInputAutoFocus\"\n [timeInput]=\"timeInput\"\n [preventSameDateTimeSelection]=\"preventSameDateTimeSelection\">\n </mtx-time-view>\n }\n }\n </div>\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mtx-calendar-header{--mat-button-text-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-sys-corner-small));box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;overflow-wrap:anywhere}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0 0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-radius:0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0 0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-radius:0 var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large)) 0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color, transparent);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-sys-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-sys-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
2162
2162
  }], ctorParameters: () => [], propDecorators: { multiYearSelector: [{
2163
2163
  type: Input,
2164
2164
  args: [{ transform: booleanAttribute }]
@@ -2348,10 +2348,10 @@ class MtxDatetimepickerContent {
2348
2348
  this._changeDetectorRef.detectChanges();
2349
2349
  }
2350
2350
  }
2351
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2352
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "class.mtx-datetimepicker-content-animations-enabled": "!_animationsDisabled", "attr.mode": "datetimepicker.mode" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n [attr.mode]=\"datetimepicker.mode\"\n class=\"mtx-datetimepicker-content-container\"\n [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\"\n>\n <mtx-calendar\n [id]=\"datetimepicker.id\"\n [class]=\"datetimepicker.panelClass\"\n [attr.mode]=\"datetimepicker.mode\"\n [type]=\"datetimepicker.type\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [showWeekNumbers]=\"datetimepicker.showWeekNumbers\"\n [selected]=\"datetimepicker._selected\"\n [timeInput]=\"datetimepicker.timeInput\"\n [actionsPortal]=\"_actionsPortal\"\n [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n (selectedChange)=\"datetimepicker._select($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n (viewChanged)=\"_viewChanged($event)\"\n (_userSelection)=\"_handleUserSelection()\"\n ></mtx-calendar>\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n class=\"mtx-datetimepicker-close-button\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"datetimepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: ["@keyframes _mtx-datetimepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-dialog-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.mtx-datetimepicker-content-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}.mtx-datetimepicker-content-exit.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-exit .1s linear}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "showWeekNumbers", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2351
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2352
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "class.mtx-datetimepicker-content-animations-enabled": "!_animationsDisabled", "attr.mode": "datetimepicker.mode" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n [attr.mode]=\"datetimepicker.mode\"\n class=\"mtx-datetimepicker-content-container\"\n [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\"\n>\n <mtx-calendar\n [id]=\"datetimepicker.id\"\n [class]=\"datetimepicker.panelClass\"\n [attr.mode]=\"datetimepicker.mode\"\n [type]=\"datetimepicker.type\"\n [startAt]=\"datetimepicker.startAt\"\n [startView]=\"datetimepicker.startView\"\n [maxDate]=\"datetimepicker._maxDate\"\n [minDate]=\"datetimepicker._minDate\"\n [dateFilter]=\"datetimepicker._dateFilter\"\n [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n [timeInterval]=\"datetimepicker.timeInterval\"\n [twelvehour]=\"datetimepicker.twelvehour\"\n [showWeekNumbers]=\"datetimepicker.showWeekNumbers\"\n [selected]=\"datetimepicker._selected\"\n [timeInput]=\"datetimepicker.timeInput\"\n [actionsPortal]=\"_actionsPortal\"\n [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n (selectedChange)=\"datetimepicker._select($event)\"\n (viewChanged)=\"datetimepicker._viewChanged($event)\"\n (viewChanged)=\"_viewChanged($event)\"\n (_userSelection)=\"_handleUserSelection()\"\n ></mtx-calendar>\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n class=\"mtx-datetimepicker-close-button\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"datetimepicker.close()\"\n >\n {{ _closeButtonText }}\n </button>\n</div>\n", styles: ["@keyframes _mtx-datetimepicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-dialog-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _mtx-datetimepicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-sys-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-sys-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));color:var(--mtx-datetimepicker-container-text-color, var(--mat-sys-on-surface))}.mtx-datetimepicker-content.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content .mtx-datetimepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.mtx-datetimepicker-content-animating .mtx-datetimepicker-content .mtx-datetimepicker-close-button{display:none}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12));border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-dialog-enter .15s cubic-bezier(0,0,.2,1)}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}.mtx-datetimepicker-content-exit.mtx-datetimepicker-content-animations-enabled{animation:_mtx-datetimepicker-content-exit .1s linear}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "showWeekNumbers", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2353
2353
  }
2354
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
2354
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerContent, decorators: [{
2355
2355
  type: Component,
2356
2356
  args: [{ selector: 'mtx-datetimepicker-content', host: {
2357
2357
  'class': 'mtx-datetimepicker-content',
@@ -2760,10 +2760,10 @@ class MtxDatetimepicker {
2760
2760
  this._componentRef?.instance._assignActions(null, true);
2761
2761
  }
2762
2762
  }
2763
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2764
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: MtxDatetimepicker, isStandalone: true, selector: "mtx-datetimepicker", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", mode: "mode", timeInterval: ["timeInterval", "timeInterval", numberAttribute], preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], calendarHeaderComponent: "calendarHeaderComponent", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute], color: "color", startAt: "startAt", type: "type", touchUi: ["touchUi", "touchUi", booleanAttribute], timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2763
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2764
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.1", type: MtxDatetimepicker, isStandalone: true, selector: "mtx-datetimepicker", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], showWeekNumbers: ["showWeekNumbers", "showWeekNumbers", booleanAttribute], startView: "startView", mode: "mode", timeInterval: ["timeInterval", "timeInterval", numberAttribute], preventSameDateTimeSelection: ["preventSameDateTimeSelection", "preventSameDateTimeSelection", booleanAttribute], calendarHeaderComponent: "calendarHeaderComponent", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute], color: "color", startAt: "startAt", type: "type", touchUi: ["touchUi", "touchUi", booleanAttribute], timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute] }, outputs: { selectedChanged: "selectedChanged", openedStream: "opened", closedStream: "closed", viewChanged: "viewChanged" }, exportAs: ["mtxDatetimepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
2765
2765
  }
2766
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepicker, decorators: [{
2766
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepicker, decorators: [{
2767
2767
  type: Component,
2768
2768
  args: [{
2769
2769
  selector: 'mtx-datetimepicker',
@@ -3117,14 +3117,14 @@ class MtxDatetimepickerInput {
3117
3117
  getThemePalette() {
3118
3118
  return this._formField ? this._formField.color : undefined;
3119
3119
  }
3120
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3121
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: MtxDatetimepickerInput, isStandalone: true, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(_datetimepicker?.opened && _datetimepicker.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
3120
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3121
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.1", type: MtxDatetimepickerInput, isStandalone: true, selector: "input[mtxDatetimepicker]", inputs: { mtxDatetimepicker: "mtxDatetimepicker", mtxDatetimepickerFilter: "mtxDatetimepickerFilter", value: "value", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(_datetimepicker?.opened && _datetimepicker.id) || null", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
3122
3122
  MAT_DATETIMEPICKER_VALUE_ACCESSOR,
3123
3123
  MAT_DATETIMEPICKER_VALIDATORS,
3124
3124
  { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxDatetimepickerInput },
3125
3125
  ], exportAs: ["mtxDatetimepickerInput"], ngImport: i0 }); }
3126
3126
  }
3127
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
3127
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerInput, decorators: [{
3128
3128
  type: Directive,
3129
3129
  args: [{
3130
3130
  selector: 'input[mtxDatetimepicker]',
@@ -3167,10 +3167,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
3167
3167
 
3168
3168
  /** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
3169
3169
  class MtxDatetimepickerToggleIcon {
3170
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3171
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerToggleIcon, isStandalone: true, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 }); }
3170
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3171
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: MtxDatetimepickerToggleIcon, isStandalone: true, selector: "[mtxDatetimepickerToggleIcon]", ngImport: i0 }); }
3172
3172
  }
3173
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
3173
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerToggleIcon, decorators: [{
3174
3174
  type: Directive,
3175
3175
  args: [{
3176
3176
  selector: '[mtxDatetimepickerToggleIcon]',
@@ -3222,10 +3222,10 @@ class MtxDatetimepickerToggle {
3222
3222
  this._stateChanges.unsubscribe();
3223
3223
  this._stateChanges = merge(this._intl.changes, datetimepickerDisabled, inputDisabled, datetimepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
3224
3224
  }
3225
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3226
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxDatetimepickerToggle, isStandalone: true, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\">\n\n @if (!_customIcon) {\n @switch (datetimepicker.type) {\n @case ('time') {\n <svg\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n </svg>\n }\n @case ('datetime') {\n <svg\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n </svg>\n }\n @default {\n <svg\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n </svg>\n }\n }\n }\n\n <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-datetimepicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3225
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3226
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.1", type: MtxDatetimepickerToggle, isStandalone: true, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\">\n\n @if (!_customIcon) {\n @switch (datetimepicker.type) {\n @case ('time') {\n <svg\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\n </svg>\n }\n @case ('datetime') {\n <svg\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\" />\n </svg>\n }\n @default {\n <svg\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n </svg>\n }\n }\n }\n\n <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-datetimepicker-toggle{pointer-events:auto;color:var(--mtx-datetimepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-datetimepicker-toggle-active{color:var(--mtx-datetimepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-datetimepicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3227
3227
  }
3228
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
3228
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
3229
3229
  type: Component,
3230
3230
  args: [{ selector: 'mtx-datetimepicker-toggle', host: {
3231
3231
  'class': 'mtx-datetimepicker-toggle',
@@ -3266,10 +3266,10 @@ class MtxDatetimepickerApply {
3266
3266
  constructor() {
3267
3267
  this._datetimepicker = inject(MtxDatetimepicker);
3268
3268
  }
3269
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3270
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerApply, isStandalone: true, selector: "[mtxDatetimepickerApply]", host: { listeners: { "click": "_datetimepicker._selectManually()" } }, ngImport: i0 }); }
3269
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3270
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: MtxDatetimepickerApply, isStandalone: true, selector: "[mtxDatetimepickerApply]", host: { listeners: { "click": "_datetimepicker._selectManually()" } }, ngImport: i0 }); }
3271
3271
  }
3272
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerApply, decorators: [{
3272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerApply, decorators: [{
3273
3273
  type: Directive,
3274
3274
  args: [{
3275
3275
  selector: '[mtxDatetimepickerApply]',
@@ -3280,10 +3280,10 @@ class MtxDatetimepickerCancel {
3280
3280
  constructor() {
3281
3281
  this._datetimepicker = inject(MtxDatetimepicker);
3282
3282
  }
3283
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3284
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerCancel, isStandalone: true, selector: "[mtxDatetimepickerCancel]", host: { listeners: { "click": "_datetimepicker.close()" } }, ngImport: i0 }); }
3283
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3284
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: MtxDatetimepickerCancel, isStandalone: true, selector: "[mtxDatetimepickerCancel]", host: { listeners: { "click": "_datetimepicker.close()" } }, ngImport: i0 }); }
3285
3285
  }
3286
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerCancel, decorators: [{
3286
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerCancel, decorators: [{
3287
3287
  type: Directive,
3288
3288
  args: [{
3289
3289
  selector: '[mtxDatetimepickerCancel]',
@@ -3294,10 +3294,10 @@ class MtxDatetimepickerClear {
3294
3294
  constructor() {
3295
3295
  this._datetimepicker = inject(MtxDatetimepicker);
3296
3296
  }
3297
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3298
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerClear, isStandalone: true, selector: "[mtxDatetimepickerClear]", host: { listeners: { "click": "_datetimepicker._clearSelected()" } }, ngImport: i0 }); }
3297
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerClear, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
3298
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: MtxDatetimepickerClear, isStandalone: true, selector: "[mtxDatetimepickerClear]", host: { listeners: { "click": "_datetimepicker._clearSelected()" } }, ngImport: i0 }); }
3299
3299
  }
3300
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerClear, decorators: [{
3300
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerClear, decorators: [{
3301
3301
  type: Directive,
3302
3302
  args: [{
3303
3303
  selector: '[mtxDatetimepickerClear]',
@@ -3320,8 +3320,8 @@ class MtxDatetimepickerActions {
3320
3320
  this._portal?.detach();
3321
3321
  }
3322
3322
  }
3323
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3324
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MtxDatetimepickerActions, isStandalone: true, selector: "mtx-datetimepicker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
3323
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3324
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: MtxDatetimepickerActions, isStandalone: true, selector: "mtx-datetimepicker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
3325
3325
  <ng-template>
3326
3326
  <div class="mtx-datetimepicker-actions">
3327
3327
  <ng-content></ng-content>
@@ -3329,7 +3329,7 @@ class MtxDatetimepickerActions {
3329
3329
  </ng-template>
3330
3330
  `, isInline: true, styles: [".mtx-datetimepicker-actions{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px}.mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-datetimepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
3331
3331
  }
3332
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerActions, decorators: [{
3332
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerActions, decorators: [{
3333
3333
  type: Component,
3334
3334
  args: [{ selector: 'mtx-datetimepicker-actions', template: `
3335
3335
  <ng-template>
@@ -3344,8 +3344,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
3344
3344
  }] } });
3345
3345
 
3346
3346
  class MtxDatetimepickerModule {
3347
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3348
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, imports: [CommonModule,
3347
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3348
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerModule, imports: [CommonModule,
3349
3349
  OverlayModule,
3350
3350
  A11yModule,
3351
3351
  PortalModule,
@@ -3382,7 +3382,7 @@ class MtxDatetimepickerModule {
3382
3382
  MtxDatetimepickerCancel,
3383
3383
  MtxDatetimepickerClear,
3384
3384
  MtxDatetimepickerActions] }); }
3385
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
3385
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerModule, providers: [MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
3386
3386
  OverlayModule,
3387
3387
  A11yModule,
3388
3388
  PortalModule,
@@ -3392,7 +3392,7 @@ class MtxDatetimepickerModule {
3392
3392
  MtxDatetimepickerToggle,
3393
3393
  MtxDatetimepickerContent] }); }
3394
3394
  }
3395
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
3395
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: MtxDatetimepickerModule, decorators: [{
3396
3396
  type: NgModule,
3397
3397
  args: [{
3398
3398
  imports: [