@angular/material 17.1.1 → 17.2.0-next.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 (304) hide show
  1. package/_index.scss +4 -4
  2. package/badge/_badge-theme.scss +30 -11
  3. package/button/_button-base.scss +50 -10
  4. package/button/_button-theme.scss +92 -51
  5. package/button/_fab-theme.scss +82 -15
  6. package/button/_icon-button-theme.scss +11 -4
  7. package/button-toggle/_button-toggle-theme.scss +26 -11
  8. package/checkbox/_checkbox-theme.scss +41 -23
  9. package/chips/_chips-theme.scss +25 -9
  10. package/core/_core-theme.scss +85 -38
  11. package/core/mdc-helpers/_mdc-helpers.scss +0 -8
  12. package/core/option/_option-theme.scss +24 -10
  13. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +64 -24
  14. package/core/tokens/_token-utils.scss +22 -0
  15. package/core/tokens/m2/_index.scss +16 -0
  16. package/core/tokens/m2/mat/_badge.scss +27 -1
  17. package/core/tokens/m2/mat/_checkbox.scss +45 -0
  18. package/core/tokens/m2/mat/_dialog.scss +49 -0
  19. package/core/tokens/m2/mat/_fab-small.scss +95 -0
  20. package/core/tokens/m2/mat/_fab.scss +6 -1
  21. package/core/tokens/m2/mat/_filled-button.scss +17 -2
  22. package/core/tokens/m2/mat/_icon-button.scss +6 -1
  23. package/core/tokens/m2/mat/_outlined-button.scss +17 -2
  24. package/core/tokens/m2/mat/_protected-button.scss +17 -2
  25. package/core/tokens/m2/mat/_radio.scss +6 -1
  26. package/core/tokens/m2/mat/_stepper.scss +6 -1
  27. package/core/tokens/m2/mat/_text-button.scss +20 -2
  28. package/core/tokens/m2/mdc/_extended-fab.scss +3 -2
  29. package/core/tokens/m2/mdc/_fab-small.scss +90 -0
  30. package/core/tokens/m2/mdc/_fab.scss +0 -11
  31. package/core/tokens/m2/mdc/_icon-button.scss +15 -7
  32. package/datepicker/_datepicker-theme.scss +25 -9
  33. package/dialog/_dialog-theme.scss +10 -0
  34. package/dialog/index.d.ts +28 -9
  35. package/esm2022/autocomplete/autocomplete-origin.mjs +4 -4
  36. package/esm2022/autocomplete/autocomplete-trigger.mjs +4 -4
  37. package/esm2022/autocomplete/autocomplete.mjs +4 -4
  38. package/esm2022/autocomplete/module.mjs +5 -5
  39. package/esm2022/badge/badge-module.mjs +5 -5
  40. package/esm2022/badge/badge.mjs +8 -8
  41. package/esm2022/bottom-sheet/bottom-sheet-container.mjs +4 -4
  42. package/esm2022/bottom-sheet/bottom-sheet-module.mjs +5 -5
  43. package/esm2022/bottom-sheet/bottom-sheet.mjs +4 -4
  44. package/esm2022/button/button-base.mjs +7 -7
  45. package/esm2022/button/button.mjs +9 -9
  46. package/esm2022/button/fab.mjs +17 -17
  47. package/esm2022/button/icon-button.mjs +9 -9
  48. package/esm2022/button/module.mjs +5 -5
  49. package/esm2022/button-toggle/button-toggle-module.mjs +5 -5
  50. package/esm2022/button-toggle/button-toggle.mjs +7 -7
  51. package/esm2022/card/card.mjs +43 -43
  52. package/esm2022/card/module.mjs +5 -5
  53. package/esm2022/checkbox/checkbox-required-validator.mjs +4 -4
  54. package/esm2022/checkbox/checkbox.mjs +6 -6
  55. package/esm2022/checkbox/module.mjs +9 -9
  56. package/esm2022/chips/chip-action.mjs +4 -4
  57. package/esm2022/chips/chip-edit-input.mjs +4 -4
  58. package/esm2022/chips/chip-grid.mjs +4 -4
  59. package/esm2022/chips/chip-icons.mjs +10 -10
  60. package/esm2022/chips/chip-input.mjs +4 -4
  61. package/esm2022/chips/chip-listbox.mjs +4 -4
  62. package/esm2022/chips/chip-option.mjs +4 -4
  63. package/esm2022/chips/chip-row.mjs +4 -4
  64. package/esm2022/chips/chip-set.mjs +4 -4
  65. package/esm2022/chips/chip.mjs +4 -4
  66. package/esm2022/chips/module.mjs +5 -5
  67. package/esm2022/core/common-behaviors/common-module.mjs +5 -5
  68. package/esm2022/core/datetime/index.mjs +9 -9
  69. package/esm2022/core/datetime/native-date-adapter.mjs +4 -4
  70. package/esm2022/core/error/error-options.mjs +7 -7
  71. package/esm2022/core/internal-form-field/internal-form-field.mjs +4 -4
  72. package/esm2022/core/line/line.mjs +8 -8
  73. package/esm2022/core/option/index.mjs +5 -5
  74. package/esm2022/core/option/optgroup.mjs +4 -4
  75. package/esm2022/core/option/option.mjs +4 -4
  76. package/esm2022/core/private/ripple-loader.mjs +4 -4
  77. package/esm2022/core/ripple/index.mjs +5 -5
  78. package/esm2022/core/ripple/ripple.mjs +4 -4
  79. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +5 -5
  80. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +4 -4
  81. package/esm2022/core/version.mjs +1 -1
  82. package/esm2022/datepicker/calendar-body.mjs +4 -4
  83. package/esm2022/datepicker/calendar.mjs +7 -7
  84. package/esm2022/datepicker/date-range-input-parts.mjs +10 -10
  85. package/esm2022/datepicker/date-range-input.mjs +4 -4
  86. package/esm2022/datepicker/date-range-picker.mjs +4 -4
  87. package/esm2022/datepicker/date-range-selection-strategy.mjs +4 -4
  88. package/esm2022/datepicker/date-selection-model.mjs +10 -10
  89. package/esm2022/datepicker/datepicker-actions.mjs +10 -10
  90. package/esm2022/datepicker/datepicker-base.mjs +7 -7
  91. package/esm2022/datepicker/datepicker-input-base.mjs +4 -4
  92. package/esm2022/datepicker/datepicker-input.mjs +4 -4
  93. package/esm2022/datepicker/datepicker-intl.mjs +4 -4
  94. package/esm2022/datepicker/datepicker-module.mjs +5 -5
  95. package/esm2022/datepicker/datepicker-toggle.mjs +7 -7
  96. package/esm2022/datepicker/datepicker.mjs +4 -4
  97. package/esm2022/datepicker/month-view.mjs +4 -4
  98. package/esm2022/datepicker/multi-year-view.mjs +4 -4
  99. package/esm2022/datepicker/year-view.mjs +4 -4
  100. package/esm2022/dialog/dialog-config.mjs +1 -3
  101. package/esm2022/dialog/dialog-container.mjs +16 -5
  102. package/esm2022/dialog/dialog-content-directives.mjs +49 -31
  103. package/esm2022/dialog/dialog-ref.mjs +3 -1
  104. package/esm2022/dialog/dialog.mjs +4 -4
  105. package/esm2022/dialog/module.mjs +5 -5
  106. package/esm2022/dialog/public-api.mjs +2 -2
  107. package/esm2022/divider/divider-module.mjs +5 -5
  108. package/esm2022/divider/divider.mjs +4 -4
  109. package/esm2022/expansion/accordion.mjs +4 -4
  110. package/esm2022/expansion/expansion-module.mjs +5 -5
  111. package/esm2022/expansion/expansion-panel-content.mjs +4 -4
  112. package/esm2022/expansion/expansion-panel-header.mjs +10 -10
  113. package/esm2022/expansion/expansion-panel.mjs +7 -7
  114. package/esm2022/form-field/directives/error.mjs +4 -4
  115. package/esm2022/form-field/directives/floating-label.mjs +4 -4
  116. package/esm2022/form-field/directives/hint.mjs +4 -4
  117. package/esm2022/form-field/directives/label.mjs +4 -4
  118. package/esm2022/form-field/directives/line-ripple.mjs +4 -4
  119. package/esm2022/form-field/directives/notched-outline.mjs +4 -4
  120. package/esm2022/form-field/directives/prefix.mjs +4 -4
  121. package/esm2022/form-field/directives/suffix.mjs +4 -4
  122. package/esm2022/form-field/form-field-control.mjs +4 -4
  123. package/esm2022/form-field/form-field.mjs +4 -4
  124. package/esm2022/form-field/module.mjs +5 -5
  125. package/esm2022/grid-list/grid-list-module.mjs +5 -5
  126. package/esm2022/grid-list/grid-list.mjs +4 -4
  127. package/esm2022/grid-list/grid-tile.mjs +16 -16
  128. package/esm2022/icon/icon-module.mjs +5 -5
  129. package/esm2022/icon/icon-registry.mjs +4 -4
  130. package/esm2022/icon/icon.mjs +4 -4
  131. package/esm2022/icon/testing/fake-icon-registry.mjs +8 -8
  132. package/esm2022/input/input.mjs +4 -4
  133. package/esm2022/input/module.mjs +5 -5
  134. package/esm2022/list/action-list.mjs +4 -4
  135. package/esm2022/list/list-base.mjs +7 -7
  136. package/esm2022/list/list-item-sections.mjs +19 -19
  137. package/esm2022/list/list-module.mjs +5 -5
  138. package/esm2022/list/list-option.mjs +4 -4
  139. package/esm2022/list/list.mjs +7 -7
  140. package/esm2022/list/nav-list.mjs +4 -4
  141. package/esm2022/list/selection-list.mjs +4 -4
  142. package/esm2022/list/subheader.mjs +4 -4
  143. package/esm2022/menu/menu-content.mjs +4 -4
  144. package/esm2022/menu/menu-item.mjs +4 -4
  145. package/esm2022/menu/menu-trigger.mjs +4 -4
  146. package/esm2022/menu/menu.mjs +4 -4
  147. package/esm2022/menu/module.mjs +5 -5
  148. package/esm2022/paginator/module.mjs +5 -5
  149. package/esm2022/paginator/paginator-intl.mjs +4 -4
  150. package/esm2022/paginator/paginator.mjs +4 -4
  151. package/esm2022/progress-bar/module.mjs +5 -5
  152. package/esm2022/progress-bar/progress-bar.mjs +4 -4
  153. package/esm2022/progress-spinner/module.mjs +5 -5
  154. package/esm2022/progress-spinner/progress-spinner.mjs +4 -4
  155. package/esm2022/radio/module.mjs +5 -5
  156. package/esm2022/radio/radio.mjs +8 -8
  157. package/esm2022/select/module.mjs +5 -5
  158. package/esm2022/select/select.mjs +7 -7
  159. package/esm2022/sidenav/drawer.mjs +10 -10
  160. package/esm2022/sidenav/sidenav-module.mjs +5 -5
  161. package/esm2022/sidenav/sidenav.mjs +10 -10
  162. package/esm2022/slide-toggle/module.mjs +9 -9
  163. package/esm2022/slide-toggle/slide-toggle-required-validator.mjs +4 -4
  164. package/esm2022/slide-toggle/slide-toggle.mjs +4 -4
  165. package/esm2022/slider/module.mjs +5 -5
  166. package/esm2022/slider/slider-input.mjs +7 -7
  167. package/esm2022/slider/slider-thumb.mjs +4 -4
  168. package/esm2022/slider/slider.mjs +4 -4
  169. package/esm2022/snack-bar/module.mjs +5 -5
  170. package/esm2022/snack-bar/simple-snack-bar.mjs +4 -4
  171. package/esm2022/snack-bar/snack-bar-container.mjs +4 -4
  172. package/esm2022/snack-bar/snack-bar-content.mjs +10 -10
  173. package/esm2022/snack-bar/snack-bar.mjs +4 -4
  174. package/esm2022/sort/sort-header-intl.mjs +4 -4
  175. package/esm2022/sort/sort-header.mjs +4 -4
  176. package/esm2022/sort/sort-module.mjs +5 -5
  177. package/esm2022/sort/sort.mjs +4 -4
  178. package/esm2022/stepper/step-content.mjs +4 -4
  179. package/esm2022/stepper/step-header.mjs +5 -5
  180. package/esm2022/stepper/step-label.mjs +4 -4
  181. package/esm2022/stepper/stepper-button.mjs +7 -7
  182. package/esm2022/stepper/stepper-icon.mjs +4 -4
  183. package/esm2022/stepper/stepper-intl.mjs +4 -4
  184. package/esm2022/stepper/stepper-module.mjs +5 -5
  185. package/esm2022/stepper/stepper.mjs +7 -7
  186. package/esm2022/table/cell.mjs +22 -22
  187. package/esm2022/table/module.mjs +5 -5
  188. package/esm2022/table/row.mjs +22 -22
  189. package/esm2022/table/table.mjs +7 -7
  190. package/esm2022/table/text-column.mjs +4 -4
  191. package/esm2022/tabs/module.mjs +5 -5
  192. package/esm2022/tabs/paginated-tab-header.mjs +4 -4
  193. package/esm2022/tabs/tab-body.mjs +7 -7
  194. package/esm2022/tabs/tab-content.mjs +4 -4
  195. package/esm2022/tabs/tab-group.mjs +4 -4
  196. package/esm2022/tabs/tab-header.mjs +4 -4
  197. package/esm2022/tabs/tab-label-wrapper.mjs +4 -4
  198. package/esm2022/tabs/tab-label.mjs +4 -4
  199. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +10 -10
  200. package/esm2022/tabs/tab.mjs +4 -4
  201. package/esm2022/toolbar/toolbar-module.mjs +5 -5
  202. package/esm2022/toolbar/toolbar.mjs +7 -7
  203. package/esm2022/tooltip/module.mjs +5 -5
  204. package/esm2022/tooltip/tooltip.mjs +7 -7
  205. package/esm2022/tree/node.mjs +10 -10
  206. package/esm2022/tree/outlet.mjs +4 -4
  207. package/esm2022/tree/padding.mjs +4 -4
  208. package/esm2022/tree/toggle.mjs +4 -4
  209. package/esm2022/tree/tree-module.mjs +5 -5
  210. package/esm2022/tree/tree.mjs +4 -4
  211. package/fesm2022/autocomplete.mjs +13 -13
  212. package/fesm2022/autocomplete.mjs.map +1 -1
  213. package/fesm2022/badge.mjs +11 -11
  214. package/fesm2022/badge.mjs.map +1 -1
  215. package/fesm2022/bottom-sheet.mjs +10 -10
  216. package/fesm2022/bottom-sheet.mjs.map +1 -1
  217. package/fesm2022/button-toggle.mjs +10 -10
  218. package/fesm2022/button-toggle.mjs.map +1 -1
  219. package/fesm2022/button.mjs +42 -42
  220. package/fesm2022/button.mjs.map +1 -1
  221. package/fesm2022/card.mjs +46 -46
  222. package/fesm2022/card.mjs.map +1 -1
  223. package/fesm2022/checkbox.mjs +16 -16
  224. package/fesm2022/checkbox.mjs.map +1 -1
  225. package/fesm2022/chips.mjs +40 -40
  226. package/fesm2022/chips.mjs.map +1 -1
  227. package/fesm2022/core.mjs +59 -59
  228. package/fesm2022/core.mjs.map +1 -1
  229. package/fesm2022/datepicker.mjs +82 -82
  230. package/fesm2022/datepicker.mjs.map +1 -1
  231. package/fesm2022/dialog.mjs +72 -43
  232. package/fesm2022/dialog.mjs.map +1 -1
  233. package/fesm2022/divider.mjs +7 -7
  234. package/fesm2022/divider.mjs.map +1 -1
  235. package/fesm2022/expansion.mjs +25 -25
  236. package/fesm2022/expansion.mjs.map +1 -1
  237. package/fesm2022/form-field.mjs +34 -34
  238. package/fesm2022/form-field.mjs.map +1 -1
  239. package/fesm2022/grid-list.mjs +22 -22
  240. package/fesm2022/grid-list.mjs.map +1 -1
  241. package/fesm2022/icon/testing.mjs +7 -7
  242. package/fesm2022/icon/testing.mjs.map +1 -1
  243. package/fesm2022/icon.mjs +10 -10
  244. package/fesm2022/icon.mjs.map +1 -1
  245. package/fesm2022/input.mjs +7 -7
  246. package/fesm2022/input.mjs.map +1 -1
  247. package/fesm2022/list.mjs +49 -49
  248. package/fesm2022/list.mjs.map +1 -1
  249. package/fesm2022/menu.mjs +16 -16
  250. package/fesm2022/menu.mjs.map +1 -1
  251. package/fesm2022/paginator.mjs +10 -10
  252. package/fesm2022/paginator.mjs.map +1 -1
  253. package/fesm2022/progress-bar.mjs +7 -7
  254. package/fesm2022/progress-bar.mjs.map +1 -1
  255. package/fesm2022/progress-spinner.mjs +7 -7
  256. package/fesm2022/progress-spinner.mjs.map +1 -1
  257. package/fesm2022/radio.mjs +11 -11
  258. package/fesm2022/radio.mjs.map +1 -1
  259. package/fesm2022/select.mjs +10 -10
  260. package/fesm2022/select.mjs.map +1 -1
  261. package/fesm2022/sidenav.mjs +22 -22
  262. package/fesm2022/sidenav.mjs.map +1 -1
  263. package/fesm2022/slide-toggle.mjs +14 -14
  264. package/fesm2022/slide-toggle.mjs.map +1 -1
  265. package/fesm2022/slider.mjs +16 -16
  266. package/fesm2022/slider.mjs.map +1 -1
  267. package/fesm2022/snack-bar.mjs +22 -22
  268. package/fesm2022/snack-bar.mjs.map +1 -1
  269. package/fesm2022/sort.mjs +13 -13
  270. package/fesm2022/sort.mjs.map +1 -1
  271. package/fesm2022/stepper.mjs +32 -32
  272. package/fesm2022/stepper.mjs.map +1 -1
  273. package/fesm2022/table.mjs +55 -55
  274. package/fesm2022/table.mjs.map +1 -1
  275. package/fesm2022/tabs.mjs +40 -40
  276. package/fesm2022/tabs.mjs.map +1 -1
  277. package/fesm2022/toolbar.mjs +10 -10
  278. package/fesm2022/toolbar.mjs.map +1 -1
  279. package/fesm2022/tooltip.mjs +10 -10
  280. package/fesm2022/tooltip.mjs.map +1 -1
  281. package/fesm2022/tree.mjs +25 -25
  282. package/fesm2022/tree.mjs.map +1 -1
  283. package/form-field/_form-field-theme.scss +31 -14
  284. package/icon/_icon-theme.scss +2 -2
  285. package/package.json +7 -7
  286. package/paginator/_paginator-theme.scss +10 -16
  287. package/prebuilt-themes/deeppurple-amber.css +1 -1
  288. package/prebuilt-themes/indigo-pink.css +1 -1
  289. package/prebuilt-themes/pink-bluegrey.css +1 -1
  290. package/prebuilt-themes/purple-green.css +1 -1
  291. package/progress-bar/_progress-bar-theme.scss +27 -9
  292. package/progress-spinner/_progress-spinner-theme.scss +38 -17
  293. package/radio/_radio-theme.scss +34 -18
  294. package/schematics/ng-add/index.js +2 -2
  295. package/schematics/ng-add/index.mjs +2 -2
  296. package/schematics/ng-add/setup-project.js +7 -75
  297. package/schematics/ng-add/setup-project.mjs +7 -75
  298. package/schematics/ng-generate/mdc-migration/index_bundled.js +122 -115
  299. package/schematics/ng-generate/mdc-migration/index_bundled.js.map +4 -4
  300. package/select/_select-theme.scss +24 -10
  301. package/slide-toggle/_slide-toggle-theme.scss +29 -9
  302. package/slider/_slider-theme.scss +28 -11
  303. package/stepper/_stepper-theme.scss +28 -7
  304. package/tabs/_tabs-theme.scss +32 -14
@@ -0,0 +1,90 @@
1
+ @use '../../../theming/inspection';
2
+ @use '../../token-utils';
3
+
4
+ @use 'sass:map';
5
+
6
+ // The prefix used to generate the fully qualified name for tokens in this file.
7
+ $prefix: (mdc, fab-small);
8
+
9
+ @function get-unthemable-tokens() {
10
+ @return (
11
+ container-shape: 50%,
12
+ icon-size: 24px,
13
+
14
+ // We don't use this token, because it doesn't set the color of any text inside the FAB.
15
+ // We create a custom token for it instead.
16
+ icon-color: null,
17
+
18
+ // =============================================================================================
19
+ // = TOKENS NOT USED IN ANGULAR MATERIAL =
20
+ // =============================================================================================
21
+ container-height: null,
22
+ container-width: null,
23
+
24
+ focus-icon-color: null,
25
+ focus-outline-color: null,
26
+ focus-outline-width: null,
27
+ focus-state-layer-color: null,
28
+ focus-state-layer-opacity: null,
29
+
30
+ hover-icon-color: null,
31
+ hover-state-layer-color: null,
32
+ hover-state-layer-opacity: null,
33
+
34
+ lowered-container-elevation: null,
35
+ lowered-focus-container-elevation: null,
36
+ lowered-hover-container-elevation: null,
37
+ lowered-pressed-container-elevation: null,
38
+
39
+ pressed-icon-color: null,
40
+ pressed-ripple-color: null,
41
+ pressed-ripple-opacity: null,
42
+ pressed-state-layer-color: null,
43
+ pressed-state-layer-opacity: null
44
+ );
45
+ }
46
+
47
+ // Tokens that can be configured through Angular Material's color theming API.
48
+ @function get-color-tokens($theme) {
49
+ @return (
50
+ // Background color of the FAB.
51
+ container-color: inspection.get-theme-color($theme, background, card),
52
+ container-elevation: 6,
53
+ focus-container-elevation: 8,
54
+ hover-container-elevation: 8,
55
+ pressed-container-elevation: 12,
56
+ container-shadow-color: #000,
57
+ );
58
+ }
59
+
60
+ // Generates the mapping for the properties that change based on the FAB palette color.
61
+ @function private-get-color-palette-color-tokens($theme, $palette-name) {
62
+ @return (
63
+ container-color: inspection.get-theme-color($theme, $palette-name, default),
64
+ );
65
+ }
66
+
67
+ // Tokens that can be configured through Angular Material's typography theming API.
68
+ @function get-typography-tokens($theme) {
69
+ @return ();
70
+ }
71
+
72
+ // Tokens that can be configured through Angular Material's density theming API.
73
+ @function get-density-tokens($theme) {
74
+ @return ();
75
+ }
76
+
77
+ // Combines the tokens generated by the above functions into a single map with placeholder values.
78
+ // This is used to create token slots.
79
+ @function get-token-slots() {
80
+ @return map.merge(
81
+ get-unthemable-tokens(),
82
+ map.merge(
83
+ get-color-tokens(token-utils.$placeholder-color-config),
84
+ map.merge(
85
+ get-typography-tokens(token-utils.$placeholder-typography-config),
86
+ get-density-tokens(token-utils.$placeholder-density-config)
87
+ )
88
+ )
89
+ );
90
+ }
@@ -6,17 +6,6 @@
6
6
  // The prefix used to generate the fully qualified name for tokens in this file.
7
7
  $prefix: (mdc, fab);
8
8
 
9
- // Tokens that can't be configured through Angular Material's current theming API,
10
- // but may be in a future version of the theming API.
11
- //
12
- // Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
13
- // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
14
- // our CSS.
15
- $height: 56px;
16
- $mini-height: 40px;
17
- $shape-radius: 50%;
18
- $ripple-target: '.mdc-fab__ripple';
19
-
20
9
  @function get-unthemable-tokens() {
21
10
  @return (
22
11
  container-shape: 50%,
@@ -1,4 +1,6 @@
1
+ @use 'sass:map';
1
2
  @use '../../../style/sass-utils';
3
+ @use '../../../theming/theming';
2
4
  @use '../../../theming/inspection';
3
5
  @use '../../token-utils';
4
6
 
@@ -13,12 +15,6 @@ $prefix: (mdc, icon-button);
13
15
  // our CSS.
14
16
  @function get-unthemable-tokens() {
15
17
  @return (
16
- // =============================================================================================
17
- // = TOKENS THAT SHOULD NOT BE CUSTOMIZABLE =
18
- // =============================================================================================
19
- // Determines the size of the icon. Name is inaccurate - applies to the whole component,
20
- // not just the state layer.
21
- state-layer-size: 48px,
22
18
  // MDC's icon size applied to svg and img elements inside the component
23
19
  icon-size: 24px,
24
20
 
@@ -68,7 +64,19 @@ $prefix: (mdc, icon-button);
68
64
 
69
65
  // Tokens that can be configured through Angular Material's density theming API.
70
66
  @function get-density-tokens($theme) {
71
- @return ();
67
+ $scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
68
+
69
+ @return (
70
+ // The diameter of the checkbox's ripple.
71
+ state-layer-size: map.get((
72
+ 0: 48px,
73
+ -1: 44px,
74
+ -2: 40px,
75
+ -3: 36px,
76
+ -4: 32px,
77
+ -5: 28px,
78
+ ), $scale)
79
+ );
72
80
  }
73
81
 
74
82
  // Combines the tokens generated by the above functions into a single map with placeholder values.
@@ -27,6 +27,9 @@ $calendar-weekday-table-font-size: 11px !default;
27
27
  map.merge($calendar-tokens, $range-tokens));
28
28
  }
29
29
 
30
+ /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
31
+ /// for the mat-datepicker.
32
+ /// @param {Map} $theme The theme to generate base styles for.
30
33
  @mixin base($theme) {
31
34
  @if inspection.get-theme-version($theme) == 1 {
32
35
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
@@ -34,9 +37,14 @@ $calendar-weekday-table-font-size: 11px !default;
34
37
  @else {}
35
38
  }
36
39
 
37
- @mixin color($theme) {
40
+ /// Outputs color theme styles for the mat-datepicker.
41
+ /// @param {Map} $theme The theme to generate color styles for.
42
+ /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
43
+ /// $color-variant: The color variant to use for the main selection: primary, secondary, tertiary,
44
+ /// or error (If not specified, default primary color will be used).
45
+ @mixin color($theme, $options...) {
38
46
  @if inspection.get-theme-version($theme) == 1 {
39
- @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
47
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
40
48
  }
41
49
  @else {
42
50
  @include sass-utils.current-selector-or-root() {
@@ -70,6 +78,8 @@ $calendar-weekday-table-font-size: 11px !default;
70
78
  }
71
79
  }
72
80
 
81
+ /// Outputs typography theme styles for the mat-datepicker.
82
+ /// @param {Map} $theme The theme to generate typography styles for.
73
83
  @mixin typography($theme) {
74
84
  @if inspection.get-theme-version($theme) == 1 {
75
85
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -100,6 +110,8 @@ $calendar-weekday-table-font-size: 11px !default;
100
110
  }
101
111
  }
102
112
 
113
+ /// Outputs density theme styles for the mat-datepicker.
114
+ /// @param {Map} $theme The theme to generate density styles for.
103
115
  @mixin density($theme) {
104
116
  @if inspection.get-theme-version($theme) == 1 {
105
117
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -116,10 +128,15 @@ $calendar-weekday-table-font-size: 11px !default;
116
128
  }
117
129
  }
118
130
 
119
- @mixin theme($theme) {
131
+ /// Outputs all (base, color, typography, and density) theme styles for the mat-datepicker.
132
+ /// @param {Map} $theme The theme to generate styles for.
133
+ /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
134
+ /// $color-variant: The color variant to use for the main selection: primary, secondary, tertiary,
135
+ /// or error (If not specified, default primary color will be used).
136
+ @mixin theme($theme, $options...) {
120
137
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
121
138
  @if inspection.get-theme-version($theme) == 1 {
122
- @include _theme-from-tokens(inspection.get-theme-tokens($theme));
139
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
123
140
  }
124
141
  @else {
125
142
  @include base($theme);
@@ -136,9 +153,8 @@ $calendar-weekday-table-font-size: 11px !default;
136
153
  }
137
154
  }
138
155
 
139
- @mixin _theme-from-tokens($tokens) {
140
- @if ($tokens != ()) {
141
- @include token-utils.create-token-values(
142
- tokens-mat-datepicker.$prefix, map.get($tokens, tokens-mat-datepicker.$prefix));
143
- }
156
+ @mixin _theme-from-tokens($tokens, $options...) {
157
+ $mat-datepicker-tokens:
158
+ token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...);
159
+ @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
144
160
  }
@@ -2,6 +2,8 @@
2
2
  @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
3
3
  @use '../core/style/sass-utils';
4
4
  @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
5
+ @use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
6
+ @use '../core/tokens/token-utils';
5
7
  @use '../core/theming/theming';
6
8
  @use '../core/theming/inspection';
7
9
  @use '../core/typography/typography';
@@ -14,6 +16,8 @@
14
16
  // Add default values for tokens not related to color, typography, or density.
15
17
  @include sass-utils.current-selector-or-root() {
16
18
  @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
19
+ @include token-utils.create-token-values(
20
+ tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
17
21
  }
18
22
  }
19
23
  }
@@ -25,6 +29,8 @@
25
29
  @else {
26
30
  @include sass-utils.current-selector-or-root() {
27
31
  @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme));
32
+ @include token-utils.create-token-values(
33
+ tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
28
34
  }
29
35
  }
30
36
  }
@@ -36,6 +42,8 @@
36
42
  @else {
37
43
  @include sass-utils.current-selector-or-root() {
38
44
  @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme));
45
+ @include token-utils.create-token-values(
46
+ tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
39
47
  }
40
48
  }
41
49
  }
@@ -70,5 +78,7 @@
70
78
  @mixin _theme-from-tokens($tokens) {
71
79
  @if ($tokens != ()) {
72
80
  @include mdc-dialog-theme.theme(map.get($tokens, tokens-mdc-dialog.$prefix));
81
+ @include token-utils.create-token-values(
82
+ tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix));
73
83
  }
74
84
  }
package/dialog/index.d.ts CHANGED
@@ -85,6 +85,7 @@ declare namespace i5 {
85
85
  declare namespace i6 {
86
86
  export {
87
87
  MatDialogClose,
88
+ MatDialogLayoutSection,
88
89
  MatDialogTitle,
89
90
  MatDialogContent,
90
91
  MatDialogActions
@@ -200,11 +201,13 @@ export declare class MatDialog implements OnDestroy {
200
201
  * Container for the bottom action buttons in a dialog.
201
202
  * Stays fixed to the bottom when scrolling.
202
203
  */
203
- export declare class MatDialogActions {
204
+ export declare class MatDialogActions extends MatDialogLayoutSection {
204
205
  /**
205
206
  * Horizontal alignment of action buttons.
206
207
  */
207
208
  align?: 'start' | 'center' | 'end';
209
+ protected _onAdd(): void;
210
+ protected _onRemove(): void;
208
211
  static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
209
212
  static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
210
213
  }
@@ -336,6 +339,8 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
336
339
  _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
337
340
  /** Whether animations are enabled. */
338
341
  _animationsEnabled: boolean;
342
+ /** Number of actions projected in the dialog. */
343
+ protected _actionSectionCount: number;
339
344
  /** Host element of the dialog container component. */
340
345
  private _hostElement;
341
346
  /** Duration of the dialog open animation. */
@@ -353,6 +358,11 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
353
358
  * called by the dialog ref.
354
359
  */
355
360
  _startExitAnimation(): void;
361
+ /**
362
+ * Updates the number action sections.
363
+ * @param delta Increase/decrease in the number of sections.
364
+ */
365
+ _updateActionSectionCount(delta: number): void;
356
366
  /**
357
367
  * Completes the dialog open by clearing potential animation classes, trapping
358
368
  * focus and emitting an opened event.
@@ -388,6 +398,19 @@ export declare class MatDialogContent {
388
398
  static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogContent, "[mat-dialog-content], mat-dialog-content, [matDialogContent]", never, {}, {}, never, never, true, never>;
389
399
  }
390
400
 
401
+ declare abstract class MatDialogLayoutSection implements OnInit, OnDestroy {
402
+ protected _dialogRef: MatDialogRef<any>;
403
+ private _elementRef;
404
+ private _dialog;
405
+ constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
406
+ protected abstract _onAdd(): void;
407
+ protected abstract _onRemove(): void;
408
+ ngOnInit(): void;
409
+ ngOnDestroy(): void;
410
+ static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogLayoutSection, [{ optional: true; }, null, null]>;
411
+ static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogLayoutSection, never, never, {}, {}, never, never, true, never>;
412
+ }
413
+
391
414
  export declare class MatDialogModule {
392
415
  static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogModule, never>;
393
416
  static ɵmod: i0.ɵɵNgModuleDeclaration<MatDialogModule, never, [typeof i1.DialogModule, typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent], [typeof i4.MatCommonModule, typeof i5.MatDialogContainer, typeof i6.MatDialogClose, typeof i6.MatDialogTitle, typeof i6.MatDialogActions, typeof i6.MatDialogContent]>;
@@ -482,15 +505,11 @@ export declare enum MatDialogState {
482
505
  /**
483
506
  * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
484
507
  */
485
- export declare class MatDialogTitle implements OnInit, OnDestroy {
486
- private _dialogRef;
487
- private _elementRef;
488
- private _dialog;
508
+ export declare class MatDialogTitle extends MatDialogLayoutSection {
489
509
  id: string;
490
- constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
491
- ngOnInit(): void;
492
- ngOnDestroy(): void;
493
- static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
510
+ protected _onAdd(): void;
511
+ protected _onRemove(): void;
512
+ static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, never>;
494
513
  static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
495
514
  }
496
515
 
@@ -17,10 +17,10 @@ export class MatAutocompleteOrigin {
17
17
  elementRef) {
18
18
  this.elementRef = elementRef;
19
19
  }
20
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
21
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0-next.5", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
20
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
21
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0-rc.0", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
22
22
  }
23
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
23
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
24
24
  type: Directive,
25
25
  args: [{
26
26
  selector: '[matAutocompleteOrigin]',
@@ -28,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0-next.5",
28
28
  standalone: true,
29
29
  }]
30
30
  }], ctorParameters: () => [{ type: i0.ElementRef }] });
31
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO3FIQUpPLHFCQUFxQjt5R0FBckIscUJBQXFCOztrR0FBckIscUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4ge1xuICBjb25zdHJ1Y3RvcihcbiAgICAvKiogUmVmZXJlbmNlIHRvIHRoZSBlbGVtZW50IG9uIHdoaWNoIHRoZSBkaXJlY3RpdmUgaXMgYXBwbGllZC4gKi9cbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICkge31cbn1cbiJdfQ==
31
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO21IQUpPLHFCQUFxQjt1R0FBckIscUJBQXFCOztnR0FBckIscUJBQXFCO2tCQUxqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIGFwcGxpZWQgdG8gYW4gZWxlbWVudCB0byBtYWtlIGl0IHVzYWJsZVxuICogYXMgYSBjb25uZWN0aW9uIHBvaW50IGZvciBhbiBhdXRvY29tcGxldGUgcGFuZWwuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttYXRBdXRvY29tcGxldGVPcmlnaW5dJyxcbiAgZXhwb3J0QXM6ICdtYXRBdXRvY29tcGxldGVPcmlnaW4nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRBdXRvY29tcGxldGVPcmlnaW4ge1xuICBjb25zdHJ1Y3RvcihcbiAgICAvKiogUmVmZXJlbmNlIHRvIHRoZSBlbGVtZW50IG9uIHdoaWNoIHRoZSBkaXJlY3RpdmUgaXMgYXBwbGllZC4gKi9cbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICkge31cbn1cbiJdfQ==