@angular/material 13.2.0-next.0 → 14.0.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 (361) hide show
  1. package/LICENSE +1 -1
  2. package/autocomplete/autocomplete-trigger.d.ts +1 -1
  3. package/button/button.d.ts +11 -5
  4. package/core/focus-indicators/_focus-indicators.scss +4 -0
  5. package/core/option/index.d.ts +1 -1
  6. package/core/option/option.d.ts +11 -11
  7. package/core/ripple/_ripple.scss +4 -1
  8. package/core/selection/index.d.ts +8 -8
  9. package/core/selection/pseudo-checkbox/pseudo-checkbox-module.d.ts +8 -0
  10. package/core/theming/_palette.scss +1 -1
  11. package/core/theming/_theming.scss +15 -4
  12. package/esm2020/autocomplete/autocomplete-module.mjs +5 -5
  13. package/esm2020/autocomplete/autocomplete-origin.mjs +7 -7
  14. package/esm2020/autocomplete/autocomplete-trigger.mjs +20 -18
  15. package/esm2020/autocomplete/autocomplete.mjs +7 -7
  16. package/esm2020/badge/badge-module.mjs +5 -5
  17. package/esm2020/badge/badge.mjs +4 -4
  18. package/esm2020/bottom-sheet/bottom-sheet-container.mjs +4 -4
  19. package/esm2020/bottom-sheet/bottom-sheet-module.mjs +5 -5
  20. package/esm2020/bottom-sheet/bottom-sheet.mjs +4 -4
  21. package/esm2020/button/button-module.mjs +5 -5
  22. package/esm2020/button/button.mjs +35 -15
  23. package/esm2020/button-toggle/button-toggle-module.mjs +5 -5
  24. package/esm2020/button-toggle/button-toggle.mjs +7 -7
  25. package/esm2020/card/card-module.mjs +5 -5
  26. package/esm2020/card/card.mjs +44 -44
  27. package/esm2020/checkbox/checkbox-module.mjs +9 -9
  28. package/esm2020/checkbox/checkbox-required-validator.mjs +4 -4
  29. package/esm2020/checkbox/checkbox.mjs +4 -4
  30. package/esm2020/chips/chip-input.mjs +4 -4
  31. package/esm2020/chips/chip-list.mjs +4 -4
  32. package/esm2020/chips/chip.mjs +13 -16
  33. package/esm2020/chips/chips-module.mjs +5 -5
  34. package/esm2020/core/common-behaviors/common-module.mjs +7 -11
  35. package/esm2020/core/datetime/index.mjs +9 -9
  36. package/esm2020/core/datetime/native-date-adapter.mjs +4 -4
  37. package/esm2020/core/error/error-options.mjs +7 -7
  38. package/esm2020/core/line/line.mjs +8 -8
  39. package/esm2020/core/option/index.mjs +5 -5
  40. package/esm2020/core/option/optgroup.mjs +7 -7
  41. package/esm2020/core/option/option.mjs +7 -7
  42. package/esm2020/core/ripple/index.mjs +5 -5
  43. package/esm2020/core/ripple/ripple-renderer.mjs +4 -2
  44. package/esm2020/core/ripple/ripple.mjs +4 -4
  45. package/esm2020/core/selection/index.mjs +2 -18
  46. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +25 -0
  47. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +4 -4
  48. package/esm2020/core/version.mjs +1 -1
  49. package/esm2020/datepicker/calendar-body.mjs +6 -6
  50. package/esm2020/datepicker/calendar.mjs +7 -7
  51. package/esm2020/datepicker/date-range-input-parts.mjs +10 -10
  52. package/esm2020/datepicker/date-range-input.mjs +4 -4
  53. package/esm2020/datepicker/date-range-picker.mjs +4 -4
  54. package/esm2020/datepicker/date-range-selection-strategy.mjs +4 -4
  55. package/esm2020/datepicker/date-selection-model.mjs +10 -10
  56. package/esm2020/datepicker/datepicker-actions.mjs +10 -10
  57. package/esm2020/datepicker/datepicker-base.mjs +7 -7
  58. package/esm2020/datepicker/datepicker-input-base.mjs +4 -4
  59. package/esm2020/datepicker/datepicker-input.mjs +4 -4
  60. package/esm2020/datepicker/datepicker-intl.mjs +4 -4
  61. package/esm2020/datepicker/datepicker-module.mjs +5 -5
  62. package/esm2020/datepicker/datepicker-toggle.mjs +7 -7
  63. package/esm2020/datepicker/datepicker.mjs +4 -4
  64. package/esm2020/datepicker/month-view.mjs +4 -4
  65. package/esm2020/datepicker/multi-year-view.mjs +4 -4
  66. package/esm2020/datepicker/testing/calendar-cell-harness.mjs +2 -2
  67. package/esm2020/datepicker/year-view.mjs +4 -4
  68. package/esm2020/dialog/dialog-container.mjs +7 -7
  69. package/esm2020/dialog/dialog-content-directives.mjs +13 -13
  70. package/esm2020/dialog/dialog-module.mjs +5 -5
  71. package/esm2020/dialog/dialog.mjs +7 -7
  72. package/esm2020/divider/divider-module.mjs +5 -5
  73. package/esm2020/divider/divider.mjs +4 -4
  74. package/esm2020/expansion/accordion.mjs +4 -4
  75. package/esm2020/expansion/expansion-module.mjs +5 -5
  76. package/esm2020/expansion/expansion-panel-content.mjs +4 -4
  77. package/esm2020/expansion/expansion-panel-header.mjs +11 -11
  78. package/esm2020/expansion/expansion-panel.mjs +7 -7
  79. package/esm2020/form-field/error.mjs +4 -4
  80. package/esm2020/form-field/form-field-control.mjs +4 -4
  81. package/esm2020/form-field/form-field-module.mjs +5 -5
  82. package/esm2020/form-field/form-field.mjs +17 -13
  83. package/esm2020/form-field/hint.mjs +4 -4
  84. package/esm2020/form-field/label.mjs +4 -4
  85. package/esm2020/form-field/placeholder.mjs +4 -4
  86. package/esm2020/form-field/prefix.mjs +4 -4
  87. package/esm2020/form-field/suffix.mjs +4 -4
  88. package/esm2020/grid-list/grid-list-module.mjs +5 -5
  89. package/esm2020/grid-list/grid-list.mjs +4 -4
  90. package/esm2020/grid-list/grid-tile.mjs +16 -16
  91. package/esm2020/icon/icon-module.mjs +5 -5
  92. package/esm2020/icon/icon-registry.mjs +4 -4
  93. package/esm2020/icon/icon.mjs +4 -4
  94. package/esm2020/icon/testing/fake-icon-registry.mjs +8 -8
  95. package/esm2020/input/input-module.mjs +5 -5
  96. package/esm2020/input/input.mjs +7 -4
  97. package/esm2020/list/list-module.mjs +5 -5
  98. package/esm2020/list/list.mjs +22 -22
  99. package/esm2020/list/selection-list.mjs +8 -8
  100. package/esm2020/list/testing/list-item-harness-base.mjs +5 -1
  101. package/esm2020/list/testing/selection-list-harness.mjs +1 -5
  102. package/esm2020/menu/menu-content.mjs +8 -10
  103. package/esm2020/menu/menu-item.mjs +7 -20
  104. package/esm2020/menu/menu-module.mjs +5 -5
  105. package/esm2020/menu/menu-trigger.mjs +9 -12
  106. package/esm2020/menu/menu.mjs +11 -7
  107. package/esm2020/paginator/paginator-intl.mjs +4 -4
  108. package/esm2020/paginator/paginator-module.mjs +5 -5
  109. package/esm2020/paginator/paginator.mjs +7 -7
  110. package/esm2020/progress-bar/progress-bar-module.mjs +5 -5
  111. package/esm2020/progress-bar/progress-bar.mjs +21 -11
  112. package/esm2020/progress-spinner/progress-spinner-module.mjs +5 -5
  113. package/esm2020/progress-spinner/progress-spinner.mjs +56 -18
  114. package/esm2020/radio/radio-module.mjs +5 -5
  115. package/esm2020/radio/radio.mjs +13 -13
  116. package/esm2020/select/select-module.mjs +5 -5
  117. package/esm2020/select/select.mjs +14 -11
  118. package/esm2020/sidenav/drawer.mjs +60 -14
  119. package/esm2020/sidenav/sidenav-module.mjs +5 -5
  120. package/esm2020/sidenav/sidenav.mjs +25 -14
  121. package/esm2020/slide-toggle/slide-toggle-module.mjs +9 -9
  122. package/esm2020/slide-toggle/slide-toggle-required-validator.mjs +4 -4
  123. package/esm2020/slide-toggle/slide-toggle.mjs +5 -5
  124. package/esm2020/slider/slider-module.mjs +5 -5
  125. package/esm2020/slider/slider.mjs +14 -6
  126. package/esm2020/snack-bar/simple-snack-bar.mjs +5 -5
  127. package/esm2020/snack-bar/snack-bar-container.mjs +4 -4
  128. package/esm2020/snack-bar/snack-bar-module.mjs +5 -5
  129. package/esm2020/snack-bar/snack-bar.mjs +28 -14
  130. package/esm2020/sort/sort-header-intl.mjs +4 -4
  131. package/esm2020/sort/sort-header.mjs +4 -4
  132. package/esm2020/sort/sort-module.mjs +5 -5
  133. package/esm2020/sort/sort.mjs +4 -4
  134. package/esm2020/stepper/step-content.mjs +4 -4
  135. package/esm2020/stepper/step-header.mjs +5 -5
  136. package/esm2020/stepper/step-label.mjs +4 -4
  137. package/esm2020/stepper/stepper-button.mjs +7 -7
  138. package/esm2020/stepper/stepper-icon.mjs +4 -4
  139. package/esm2020/stepper/stepper-intl.mjs +4 -4
  140. package/esm2020/stepper/stepper-module.mjs +5 -5
  141. package/esm2020/stepper/stepper.mjs +17 -17
  142. package/esm2020/table/cell.mjs +22 -22
  143. package/esm2020/table/row.mjs +22 -22
  144. package/esm2020/table/table-data-source.mjs +2 -1
  145. package/esm2020/table/table-module.mjs +5 -5
  146. package/esm2020/table/table.mjs +9 -9
  147. package/esm2020/table/text-column.mjs +4 -4
  148. package/esm2020/tabs/ink-bar.mjs +4 -4
  149. package/esm2020/tabs/paginated-tab-header.mjs +4 -4
  150. package/esm2020/tabs/public-api.mjs +2 -2
  151. package/esm2020/tabs/tab-body.mjs +10 -10
  152. package/esm2020/tabs/tab-content.mjs +4 -4
  153. package/esm2020/tabs/tab-group.mjs +21 -9
  154. package/esm2020/tabs/tab-header.mjs +7 -7
  155. package/esm2020/tabs/tab-label-wrapper.mjs +4 -4
  156. package/esm2020/tabs/tab-label.mjs +4 -4
  157. package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +97 -15
  158. package/esm2020/tabs/tab.mjs +8 -4
  159. package/esm2020/tabs/tabs-module.mjs +10 -6
  160. package/esm2020/tabs/testing/tab-harness-filters.mjs +1 -1
  161. package/esm2020/tabs/testing/tab-nav-bar-harness.mjs +13 -1
  162. package/esm2020/tabs/testing/tab-nav-panel-harness.mjs +27 -0
  163. package/esm2020/toolbar/toolbar-module.mjs +5 -5
  164. package/esm2020/toolbar/toolbar.mjs +7 -7
  165. package/esm2020/tooltip/tooltip-module.mjs +5 -5
  166. package/esm2020/tooltip/tooltip.mjs +23 -28
  167. package/esm2020/tree/node.mjs +10 -10
  168. package/esm2020/tree/outlet.mjs +4 -4
  169. package/esm2020/tree/padding.mjs +4 -4
  170. package/esm2020/tree/toggle.mjs +4 -4
  171. package/esm2020/tree/tree-module.mjs +5 -5
  172. package/esm2020/tree/tree.mjs +4 -4
  173. package/fesm2015/autocomplete.mjs +35 -33
  174. package/fesm2015/autocomplete.mjs.map +1 -1
  175. package/fesm2015/badge.mjs +7 -7
  176. package/fesm2015/badge.mjs.map +1 -1
  177. package/fesm2015/bottom-sheet.mjs +10 -10
  178. package/fesm2015/bottom-sheet.mjs.map +1 -1
  179. package/fesm2015/button-toggle.mjs +10 -10
  180. package/fesm2015/button-toggle.mjs.map +1 -1
  181. package/fesm2015/button.mjs +37 -17
  182. package/fesm2015/button.mjs.map +1 -1
  183. package/fesm2015/card.mjs +47 -47
  184. package/fesm2015/card.mjs.map +1 -1
  185. package/fesm2015/checkbox.mjs +14 -14
  186. package/fesm2015/checkbox.mjs.map +1 -1
  187. package/fesm2015/chips.mjs +22 -25
  188. package/fesm2015/chips.mjs.map +1 -1
  189. package/fesm2015/core.mjs +74 -69
  190. package/fesm2015/core.mjs.map +1 -1
  191. package/fesm2015/datepicker/testing.mjs +1 -1
  192. package/fesm2015/datepicker/testing.mjs.map +1 -1
  193. package/fesm2015/datepicker.mjs +84 -84
  194. package/fesm2015/datepicker.mjs.map +1 -1
  195. package/fesm2015/dialog.mjs +28 -28
  196. package/fesm2015/dialog.mjs.map +1 -1
  197. package/fesm2015/divider.mjs +7 -7
  198. package/fesm2015/divider.mjs.map +1 -1
  199. package/fesm2015/expansion.mjs +26 -26
  200. package/fesm2015/expansion.mjs.map +1 -1
  201. package/fesm2015/form-field.mjs +41 -37
  202. package/fesm2015/form-field.mjs.map +1 -1
  203. package/fesm2015/grid-list.mjs +22 -22
  204. package/fesm2015/grid-list.mjs.map +1 -1
  205. package/fesm2015/icon/testing.mjs +7 -7
  206. package/fesm2015/icon/testing.mjs.map +1 -1
  207. package/fesm2015/icon.mjs +10 -10
  208. package/fesm2015/icon.mjs.map +1 -1
  209. package/fesm2015/input.mjs +10 -7
  210. package/fesm2015/input.mjs.map +1 -1
  211. package/fesm2015/list/testing.mjs +6 -6
  212. package/fesm2015/list/testing.mjs.map +1 -1
  213. package/fesm2015/list.mjs +32 -32
  214. package/fesm2015/list.mjs.map +1 -1
  215. package/fesm2015/menu.mjs +36 -48
  216. package/fesm2015/menu.mjs.map +1 -1
  217. package/fesm2015/paginator.mjs +13 -13
  218. package/fesm2015/paginator.mjs.map +1 -1
  219. package/fesm2015/progress-bar.mjs +25 -13
  220. package/fesm2015/progress-bar.mjs.map +1 -1
  221. package/fesm2015/progress-spinner.mjs +58 -20
  222. package/fesm2015/progress-spinner.mjs.map +1 -1
  223. package/fesm2015/radio.mjs +16 -16
  224. package/fesm2015/radio.mjs.map +1 -1
  225. package/fesm2015/select.mjs +17 -14
  226. package/fesm2015/select.mjs.map +1 -1
  227. package/fesm2015/sidenav.mjs +88 -31
  228. package/fesm2015/sidenav.mjs.map +1 -1
  229. package/fesm2015/slide-toggle.mjs +15 -15
  230. package/fesm2015/slide-toggle.mjs.map +1 -1
  231. package/fesm2015/slider.mjs +17 -9
  232. package/fesm2015/slider.mjs.map +1 -1
  233. package/fesm2015/snack-bar.mjs +41 -25
  234. package/fesm2015/snack-bar.mjs.map +1 -1
  235. package/fesm2015/sort.mjs +13 -13
  236. package/fesm2015/sort.mjs.map +1 -1
  237. package/fesm2015/stepper.mjs +42 -42
  238. package/fesm2015/stepper.mjs.map +1 -1
  239. package/fesm2015/table.mjs +58 -57
  240. package/fesm2015/table.mjs.map +1 -1
  241. package/fesm2015/tabs/testing.mjs +34 -0
  242. package/fesm2015/tabs/testing.mjs.map +1 -1
  243. package/fesm2015/tabs.mjs +162 -60
  244. package/fesm2015/tabs.mjs.map +1 -1
  245. package/fesm2015/toolbar.mjs +10 -10
  246. package/fesm2015/toolbar.mjs.map +1 -1
  247. package/fesm2015/tooltip.mjs +26 -31
  248. package/fesm2015/tooltip.mjs.map +1 -1
  249. package/fesm2015/tree.mjs +25 -25
  250. package/fesm2015/tree.mjs.map +1 -1
  251. package/fesm2020/autocomplete.mjs +35 -33
  252. package/fesm2020/autocomplete.mjs.map +1 -1
  253. package/fesm2020/badge.mjs +7 -7
  254. package/fesm2020/badge.mjs.map +1 -1
  255. package/fesm2020/bottom-sheet.mjs +10 -10
  256. package/fesm2020/bottom-sheet.mjs.map +1 -1
  257. package/fesm2020/button-toggle.mjs +10 -10
  258. package/fesm2020/button-toggle.mjs.map +1 -1
  259. package/fesm2020/button.mjs +37 -17
  260. package/fesm2020/button.mjs.map +1 -1
  261. package/fesm2020/card.mjs +47 -47
  262. package/fesm2020/card.mjs.map +1 -1
  263. package/fesm2020/checkbox.mjs +14 -14
  264. package/fesm2020/checkbox.mjs.map +1 -1
  265. package/fesm2020/chips.mjs +22 -25
  266. package/fesm2020/chips.mjs.map +1 -1
  267. package/fesm2020/core.mjs +74 -69
  268. package/fesm2020/core.mjs.map +1 -1
  269. package/fesm2020/datepicker/testing.mjs +1 -1
  270. package/fesm2020/datepicker/testing.mjs.map +1 -1
  271. package/fesm2020/datepicker.mjs +84 -84
  272. package/fesm2020/datepicker.mjs.map +1 -1
  273. package/fesm2020/dialog.mjs +28 -28
  274. package/fesm2020/dialog.mjs.map +1 -1
  275. package/fesm2020/divider.mjs +7 -7
  276. package/fesm2020/divider.mjs.map +1 -1
  277. package/fesm2020/expansion.mjs +26 -26
  278. package/fesm2020/expansion.mjs.map +1 -1
  279. package/fesm2020/form-field.mjs +41 -37
  280. package/fesm2020/form-field.mjs.map +1 -1
  281. package/fesm2020/grid-list.mjs +22 -22
  282. package/fesm2020/grid-list.mjs.map +1 -1
  283. package/fesm2020/icon/testing.mjs +7 -7
  284. package/fesm2020/icon/testing.mjs.map +1 -1
  285. package/fesm2020/icon.mjs +10 -10
  286. package/fesm2020/icon.mjs.map +1 -1
  287. package/fesm2020/input.mjs +10 -7
  288. package/fesm2020/input.mjs.map +1 -1
  289. package/fesm2020/list/testing.mjs +4 -4
  290. package/fesm2020/list/testing.mjs.map +1 -1
  291. package/fesm2020/list.mjs +32 -32
  292. package/fesm2020/list.mjs.map +1 -1
  293. package/fesm2020/menu.mjs +34 -48
  294. package/fesm2020/menu.mjs.map +1 -1
  295. package/fesm2020/paginator.mjs +13 -13
  296. package/fesm2020/paginator.mjs.map +1 -1
  297. package/fesm2020/progress-bar.mjs +23 -13
  298. package/fesm2020/progress-bar.mjs.map +1 -1
  299. package/fesm2020/progress-spinner.mjs +57 -20
  300. package/fesm2020/progress-spinner.mjs.map +1 -1
  301. package/fesm2020/radio.mjs +16 -16
  302. package/fesm2020/radio.mjs.map +1 -1
  303. package/fesm2020/select.mjs +17 -14
  304. package/fesm2020/select.mjs.map +1 -1
  305. package/fesm2020/sidenav.mjs +87 -30
  306. package/fesm2020/sidenav.mjs.map +1 -1
  307. package/fesm2020/slide-toggle.mjs +15 -15
  308. package/fesm2020/slide-toggle.mjs.map +1 -1
  309. package/fesm2020/slider.mjs +17 -9
  310. package/fesm2020/slider.mjs.map +1 -1
  311. package/fesm2020/snack-bar.mjs +39 -25
  312. package/fesm2020/snack-bar.mjs.map +1 -1
  313. package/fesm2020/sort.mjs +13 -13
  314. package/fesm2020/sort.mjs.map +1 -1
  315. package/fesm2020/stepper.mjs +42 -42
  316. package/fesm2020/stepper.mjs.map +1 -1
  317. package/fesm2020/table.mjs +58 -57
  318. package/fesm2020/table.mjs.map +1 -1
  319. package/fesm2020/tabs/testing.mjs +37 -0
  320. package/fesm2020/tabs/testing.mjs.map +1 -1
  321. package/fesm2020/tabs.mjs +161 -60
  322. package/fesm2020/tabs.mjs.map +1 -1
  323. package/fesm2020/toolbar.mjs +10 -10
  324. package/fesm2020/toolbar.mjs.map +1 -1
  325. package/fesm2020/tooltip.mjs +26 -31
  326. package/fesm2020/tooltip.mjs.map +1 -1
  327. package/fesm2020/tree.mjs +25 -25
  328. package/fesm2020/tree.mjs.map +1 -1
  329. package/input/input.d.ts +6 -1
  330. package/list/_list-theme.scss +4 -3
  331. package/list/testing/list-item-harness-base.d.ts +2 -0
  332. package/list/testing/selection-list-harness.d.ts +0 -2
  333. package/menu/menu-content.d.ts +5 -1
  334. package/menu/menu-item.d.ts +3 -12
  335. package/menu/menu-trigger.d.ts +6 -2
  336. package/package.json +3 -2
  337. package/paginator/paginator.d.ts +1 -1
  338. package/prebuilt-themes/deeppurple-amber.css +1 -1
  339. package/prebuilt-themes/indigo-pink.css +1 -1
  340. package/prebuilt-themes/pink-bluegrey.css +1 -1
  341. package/prebuilt-themes/purple-green.css +1 -1
  342. package/progress-bar/progress-bar.d.ts +13 -3
  343. package/progress-spinner/progress-spinner.d.ts +20 -8
  344. package/schematics/ng-add/index.js +1 -1
  345. package/schematics/ng-add/index.mjs +1 -1
  346. package/schematics/ng-update/migrations/hammer-gestures-v9/import-manager.js +1 -2
  347. package/schematics/ng-update/migrations/hammer-gestures-v9/import-manager.mjs +1 -2
  348. package/schematics/tsconfig.json +1 -0
  349. package/sidenav/drawer.d.ts +16 -3
  350. package/slider/_slider-theme.scss +12 -10
  351. package/snack-bar/snack-bar.d.ts +18 -10
  352. package/table/_table-flex-styles.scss +0 -9
  353. package/tabs/public-api.d.ts +1 -1
  354. package/tabs/tab-group.d.ts +10 -1
  355. package/tabs/tab-nav-bar/tab-nav-bar.d.ts +29 -2
  356. package/tabs/tab.d.ts +11 -1
  357. package/tabs/tabs-module.d.ts +1 -1
  358. package/tabs/testing/tab-harness-filters.d.ts +3 -0
  359. package/tabs/testing/tab-nav-bar-harness.d.ts +3 -0
  360. package/tabs/testing/tab-nav-panel-harness.d.ts +23 -0
  361. package/tooltip/tooltip.d.ts +0 -5
@@ -1,12 +1,14 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, Input, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
3
+ import * as i3 from '@angular/common';
4
4
  import { DOCUMENT, CommonModule } from '@angular/common';
5
5
  import { mixinColor, MatCommonModule } from '@angular/material/core';
6
6
  import { coerceNumberProperty } from '@angular/cdk/coercion';
7
7
  import * as i1 from '@angular/cdk/platform';
8
8
  import { _getShadowRoot } from '@angular/cdk/platform';
9
+ import * as i2 from '@angular/cdk/scrolling';
9
10
  import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
11
+ import { Subscription } from 'rxjs';
10
12
 
11
13
  /**
12
14
  * @license
@@ -72,16 +74,18 @@ const INDETERMINATE_ANIMATION_TEMPLATE = `
72
74
  * `<mat-progress-spinner>` component.
73
75
  */
74
76
  class MatProgressSpinner extends _MatProgressSpinnerBase {
75
- constructor(elementRef,
77
+ constructor(elementRef, _platform, _document, animationMode, defaults,
76
78
  /**
77
- * @deprecated `_platform` parameter no longer being used.
79
+ * @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`
80
+ * parameters to become required.
78
81
  * @breaking-change 14.0.0
79
82
  */
80
- _platform, _document, animationMode, defaults) {
83
+ changeDetectorRef, viewportRuler, ngZone) {
81
84
  super(elementRef);
82
85
  this._document = _document;
83
86
  this._diameter = BASE_SIZE;
84
87
  this._value = 0;
88
+ this._resizeSubscription = Subscription.EMPTY;
85
89
  /** Mode of the progress circle */
86
90
  this.mode = 'determinate';
87
91
  const trackedDiameters = MatProgressSpinner._diameters;
@@ -101,6 +105,21 @@ class MatProgressSpinner extends _MatProgressSpinnerBase {
101
105
  this.strokeWidth = defaults.strokeWidth;
102
106
  }
103
107
  }
108
+ // Safari has an issue where the circle isn't positioned correctly when the page has a
109
+ // different zoom level from the default. This handler triggers a recalculation of the
110
+ // `transform-origin` when the page zoom level changes.
111
+ // See `_getCircleTransformOrigin` for more info.
112
+ // @breaking-change 14.0.0 Remove null checks for `_changeDetectorRef`,
113
+ // `viewportRuler` and `ngZone`.
114
+ if (_platform.isBrowser && _platform.SAFARI && viewportRuler && changeDetectorRef && ngZone) {
115
+ this._resizeSubscription = viewportRuler.change(150).subscribe(() => {
116
+ // When the window is resize while the spinner is in `indeterminate` mode, we
117
+ // have to mark for check so the transform origin of the circle can be recomputed.
118
+ if (this.mode === 'indeterminate') {
119
+ ngZone.run(() => changeDetectorRef.markForCheck());
120
+ }
121
+ });
122
+ }
104
123
  }
105
124
  /** The diameter of the progress spinner (will set width and height of svg). */
106
125
  get diameter() {
@@ -137,6 +156,9 @@ class MatProgressSpinner extends _MatProgressSpinnerBase {
137
156
  this._attachStyleNode();
138
157
  element.classList.add('mat-progress-spinner-indeterminate-animation');
139
158
  }
159
+ ngOnDestroy() {
160
+ this._resizeSubscription.unsubscribe();
161
+ }
140
162
  /** The radius of the spinner, adjusted for stroke width. */
141
163
  _getCircleRadius() {
142
164
  return (this.diameter - BASE_STROKE_WIDTH) / 2;
@@ -161,6 +183,15 @@ class MatProgressSpinner extends _MatProgressSpinnerBase {
161
183
  _getCircleStrokeWidth() {
162
184
  return (this.strokeWidth / this.diameter) * 100;
163
185
  }
186
+ /** Gets the `transform-origin` for the inner circle element. */
187
+ _getCircleTransformOrigin(svg) {
188
+ // Safari has an issue where the `transform-origin` doesn't work as expected when the page
189
+ // has a different zoom level from the default. The problem appears to be that a zoom
190
+ // is applied on the `svg` node itself. We can work around it by calculating the origin
191
+ // based on the zoom level. On all other browsers the `currentScale` appears to always be 1.
192
+ const scale = (svg.currentScale ?? 1) * 50;
193
+ return `${scale}% ${scale}%`;
194
+ }
164
195
  /** Dynamically generates a style tag containing the correct animation for this diameter. */
165
196
  _attachStyleNode() {
166
197
  const styleRoot = this._styleRoot;
@@ -202,9 +233,9 @@ class MatProgressSpinner extends _MatProgressSpinnerBase {
202
233
  * than the document head.
203
234
  */
204
235
  MatProgressSpinner._diameters = new WeakMap();
205
- MatProgressSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatProgressSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
206
- MatProgressSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatProgressSpinner, selector: "mat-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", mode: "mode", value: "value" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "mode === \"determinate\" ? 0 : null", "attr.aria-valuemax": "mode === \"determinate\" ? 100 : null", "attr.aria-valuenow": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "mat-progress-spinner" }, exportAs: ["matProgressSpinner"], usesInheritance: true, ngImport: i0, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\">\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
207
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatProgressSpinner, decorators: [{
236
+ MatProgressSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatProgressSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }, { token: i0.ChangeDetectorRef }, { token: i2.ViewportRuler }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
237
+ MatProgressSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatProgressSpinner, selector: "mat-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", mode: "mode", value: "value" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "mode === \"determinate\" ? 0 : null", "attr.aria-valuemax": "mode === \"determinate\" ? 100 : null", "attr.aria-valuenow": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "mat-progress-spinner" }, exportAs: ["matProgressSpinner"], usesInheritance: true, ngImport: i0, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #svg>\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
238
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatProgressSpinner, decorators: [{
208
239
  type: Component,
209
240
  args: [{ selector: 'mat-progress-spinner', exportAs: 'matProgressSpinner', host: {
210
241
  'role': 'progressbar',
@@ -219,7 +250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
219
250
  '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
220
251
  '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
221
252
  '[attr.mode]': 'mode',
222
- }, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\">\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"] }]
253
+ }, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #svg>\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"] }]
223
254
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
224
255
  type: Optional
225
256
  }, {
@@ -233,7 +264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
233
264
  }] }, { type: undefined, decorators: [{
234
265
  type: Inject,
235
266
  args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS]
236
- }] }]; }, propDecorators: { diameter: [{
267
+ }] }, { type: i0.ChangeDetectorRef }, { type: i2.ViewportRuler }, { type: i0.NgZone }]; }, propDecorators: { diameter: [{
237
268
  type: Input
238
269
  }], strokeWidth: [{
239
270
  type: Input
@@ -249,14 +280,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
249
280
  * indeterminate `<mat-progress-spinner>` instance.
250
281
  */
251
282
  class MatSpinner extends MatProgressSpinner {
252
- constructor(elementRef, platform, document, animationMode, defaults) {
253
- super(elementRef, platform, document, animationMode, defaults);
283
+ constructor(elementRef, platform, document, animationMode, defaults,
284
+ /**
285
+ * @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`
286
+ * parameters to become required.
287
+ * @breaking-change 14.0.0
288
+ */
289
+ changeDetectorRef, viewportRuler, ngZone) {
290
+ super(elementRef, platform, document, animationMode, defaults, changeDetectorRef, viewportRuler, ngZone);
254
291
  this.mode = 'indeterminate';
255
292
  }
256
293
  }
257
- MatSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
258
- MatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatSpinner, selector: "mat-spinner", inputs: { color: "color" }, host: { attributes: { "role": "progressbar", "mode": "indeterminate" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter" }, classAttribute: "mat-spinner mat-progress-spinner" }, usesInheritance: true, ngImport: i0, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\">\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
259
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatSpinner, decorators: [{
294
+ MatSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }, { token: i0.ChangeDetectorRef }, { token: i2.ViewportRuler }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
295
+ MatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatSpinner, selector: "mat-spinner", inputs: { color: "color" }, host: { attributes: { "role": "progressbar", "mode": "indeterminate" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter" }, classAttribute: "mat-spinner mat-progress-spinner" }, usesInheritance: true, ngImport: i0, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #svg>\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
296
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatSpinner, decorators: [{
260
297
  type: Component,
261
298
  args: [{ selector: 'mat-spinner', host: {
262
299
  'role': 'progressbar',
@@ -265,7 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
265
302
  '[class._mat-animation-noopable]': `_noopAnimations`,
266
303
  '[style.width.px]': 'diameter',
267
304
  '[style.height.px]': 'diameter',
268
- }, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\">\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transform-origin:center;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"] }]
305
+ }, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #svg>\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n</svg>\n", styles: [".mat-progress-spinner{display:block;position:relative;overflow:hidden}.mat-progress-spinner svg{position:absolute;transform:rotate(-90deg);top:0;left:0;transform-origin:center;overflow:visible}.mat-progress-spinner circle{fill:transparent;transition:stroke-dashoffset 225ms linear}._mat-animation-noopable.mat-progress-spinner circle{transition:none;animation:none}.cdk-high-contrast-active .mat-progress-spinner circle{stroke:CanvasText}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{animation:mat-progress-spinner-linear-rotate 2000ms linear infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] svg{transition:none;animation:none}.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition-property:stroke;animation-duration:4000ms;animation-timing-function:cubic-bezier(0.35, 0, 0.25, 1);animation-iteration-count:infinite}._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle{transition:none;animation:none}@keyframes mat-progress-spinner-linear-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mat-progress-spinner-stroke-rotate-100{0%{stroke-dashoffset:268.606171575px;transform:rotate(0)}12.5%{stroke-dashoffset:56.5486677px;transform:rotate(0)}12.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(72.5deg)}25%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(72.5deg)}25.0001%{stroke-dashoffset:268.606171575px;transform:rotate(270deg)}37.5%{stroke-dashoffset:56.5486677px;transform:rotate(270deg)}37.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(161.5deg)}50%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(161.5deg)}50.0001%{stroke-dashoffset:268.606171575px;transform:rotate(180deg)}62.5%{stroke-dashoffset:56.5486677px;transform:rotate(180deg)}62.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(251.5deg)}75%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(251.5deg)}75.0001%{stroke-dashoffset:268.606171575px;transform:rotate(90deg)}87.5%{stroke-dashoffset:56.5486677px;transform:rotate(90deg)}87.5001%{stroke-dashoffset:56.5486677px;transform:rotateX(180deg) rotate(341.5deg)}100%{stroke-dashoffset:268.606171575px;transform:rotateX(180deg) rotate(341.5deg)}}\n"] }]
269
306
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
270
307
  type: Optional
271
308
  }, {
@@ -279,7 +316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
279
316
  }] }, { type: undefined, decorators: [{
280
317
  type: Inject,
281
318
  args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS]
282
- }] }]; } });
319
+ }] }, { type: i0.ChangeDetectorRef }, { type: i2.ViewportRuler }, { type: i0.NgZone }]; } });
283
320
 
284
321
  /**
285
322
  * @license
@@ -290,10 +327,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
290
327
  */
291
328
  class MatProgressSpinnerModule {
292
329
  }
293
- MatProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
294
- MatProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatProgressSpinnerModule, declarations: [MatProgressSpinner, MatSpinner], imports: [MatCommonModule, CommonModule], exports: [MatProgressSpinner, MatSpinner, MatCommonModule] });
295
- MatProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatProgressSpinnerModule, imports: [[MatCommonModule, CommonModule], MatCommonModule] });
296
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatProgressSpinnerModule, decorators: [{
330
+ MatProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
331
+ MatProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatProgressSpinnerModule, declarations: [MatProgressSpinner, MatSpinner], imports: [MatCommonModule, CommonModule], exports: [MatProgressSpinner, MatSpinner, MatCommonModule] });
332
+ MatProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatProgressSpinnerModule, imports: [[MatCommonModule, CommonModule], MatCommonModule] });
333
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatProgressSpinnerModule, decorators: [{
297
334
  type: NgModule,
298
335
  args: [{
299
336
  imports: [MatCommonModule, CommonModule],
@@ -1 +1 @@
1
- {"version":3,"file":"progress-spinner.mjs","sources":["../../../../../../src/material/progress-spinner/progress-spinner.ts","../../../../../../src/material/progress-spinner/progress-spinner.html","../../../../../../src/material/progress-spinner/progress-spinner-module.ts","../../../../../../src/material/progress-spinner/public-api.ts","../../../../../../src/material/progress-spinner/index.ts","../../../../../../src/material/progress-spinner/progress-spinner_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';\nimport {Platform, _getShadowRoot} from '@angular/cdk/platform';\nimport {DOCUMENT} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Inject,\n InjectionToken,\n Input,\n Optional,\n ViewEncapsulation,\n OnInit,\n} from '@angular/core';\nimport {CanColor, mixinColor} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\n\n/** Possible mode for a progress spinner. */\nexport type ProgressSpinnerMode = 'determinate' | 'indeterminate';\n\n/**\n * Base reference size of the spinner.\n * @docs-private\n */\nconst BASE_SIZE = 100;\n\n/**\n * Base reference stroke width of the spinner.\n * @docs-private\n */\nconst BASE_STROKE_WIDTH = 10;\n\n// Boilerplate for applying mixins to MatProgressSpinner.\n/** @docs-private */\nconst _MatProgressSpinnerBase = mixinColor(\n class {\n constructor(public _elementRef: ElementRef) {}\n },\n 'primary',\n);\n\n/** Default `mat-progress-spinner` options that can be overridden. */\nexport interface MatProgressSpinnerDefaultOptions {\n /** Diameter of the spinner. */\n diameter?: number;\n /** Width of the spinner's stroke. */\n strokeWidth?: number;\n /**\n * Whether the animations should be force to be enabled, ignoring if the current environment is\n * using NoopAnimationsModule.\n */\n _forceAnimations?: boolean;\n}\n\n/** Injection token to be used to override the default options for `mat-progress-spinner`. */\nexport const MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS =\n new InjectionToken<MatProgressSpinnerDefaultOptions>('mat-progress-spinner-default-options', {\n providedIn: 'root',\n factory: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,\n });\n\n/** @docs-private */\nexport function MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY(): MatProgressSpinnerDefaultOptions {\n return {diameter: BASE_SIZE};\n}\n\n// .0001 percentage difference is necessary in order to avoid unwanted animation frames\n// for example because the animation duration is 4 seconds, .1% accounts to 4ms\n// which are enough to see the flicker described in\n// https://github.com/angular/components/issues/8984\nconst INDETERMINATE_ANIMATION_TEMPLATE = `\n @keyframes mat-progress-spinner-stroke-rotate-DIAMETER {\n 0% { stroke-dashoffset: START_VALUE; transform: rotate(0); }\n 12.5% { stroke-dashoffset: END_VALUE; transform: rotate(0); }\n 12.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(72.5deg); }\n 25% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(72.5deg); }\n\n 25.0001% { stroke-dashoffset: START_VALUE; transform: rotate(270deg); }\n 37.5% { stroke-dashoffset: END_VALUE; transform: rotate(270deg); }\n 37.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(161.5deg); }\n 50% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(161.5deg); }\n\n 50.0001% { stroke-dashoffset: START_VALUE; transform: rotate(180deg); }\n 62.5% { stroke-dashoffset: END_VALUE; transform: rotate(180deg); }\n 62.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(251.5deg); }\n 75% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(251.5deg); }\n\n 75.0001% { stroke-dashoffset: START_VALUE; transform: rotate(90deg); }\n 87.5% { stroke-dashoffset: END_VALUE; transform: rotate(90deg); }\n 87.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(341.5deg); }\n 100% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(341.5deg); }\n }\n`;\n\n/**\n * `<mat-progress-spinner>` component.\n */\n@Component({\n selector: 'mat-progress-spinner',\n exportAs: 'matProgressSpinner',\n host: {\n 'role': 'progressbar',\n 'class': 'mat-progress-spinner',\n // set tab index to -1 so screen readers will read the aria-label\n // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n 'tabindex': '-1',\n '[class._mat-animation-noopable]': `_noopAnimations`,\n '[style.width.px]': 'diameter',\n '[style.height.px]': 'diameter',\n '[attr.aria-valuemin]': 'mode === \"determinate\" ? 0 : null',\n '[attr.aria-valuemax]': 'mode === \"determinate\" ? 100 : null',\n '[attr.aria-valuenow]': 'mode === \"determinate\" ? value : null',\n '[attr.mode]': 'mode',\n },\n inputs: ['color'],\n templateUrl: 'progress-spinner.html',\n styleUrls: ['progress-spinner.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class MatProgressSpinner extends _MatProgressSpinnerBase implements OnInit, CanColor {\n private _diameter = BASE_SIZE;\n private _value = 0;\n private _strokeWidth: number;\n\n /**\n * Element to which we should add the generated style tags for the indeterminate animation.\n * For most elements this is the document, but for the ones in the Shadow DOM we need to\n * use the shadow root.\n */\n private _styleRoot: Node;\n\n /**\n * Tracks diameters of existing instances to de-dupe generated styles (default d = 100).\n * We need to keep track of which elements the diameters were attached to, because for\n * elements in the Shadow DOM the style tags are attached to the shadow root, rather\n * than the document head.\n */\n private static _diameters = new WeakMap<Node, Set<number>>();\n\n /** Whether the _mat-animation-noopable class should be applied, disabling animations. */\n _noopAnimations: boolean;\n\n /** A string that is used for setting the spinner animation-name CSS property */\n _spinnerAnimationLabel: string;\n\n /** The diameter of the progress spinner (will set width and height of svg). */\n @Input()\n get diameter(): number {\n return this._diameter;\n }\n set diameter(size: NumberInput) {\n this._diameter = coerceNumberProperty(size);\n this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();\n\n // If this is set before `ngOnInit`, the style root may not have been resolved yet.\n if (this._styleRoot) {\n this._attachStyleNode();\n }\n }\n\n /** Stroke width of the progress spinner. */\n @Input()\n get strokeWidth(): number {\n return this._strokeWidth || this.diameter / 10;\n }\n set strokeWidth(value: NumberInput) {\n this._strokeWidth = coerceNumberProperty(value);\n }\n\n /** Mode of the progress circle */\n @Input() mode: ProgressSpinnerMode = 'determinate';\n\n /** Value of the progress circle. */\n @Input()\n get value(): number {\n return this.mode === 'determinate' ? this._value : 0;\n }\n set value(newValue: NumberInput) {\n this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));\n }\n\n constructor(\n elementRef: ElementRef<HTMLElement>,\n /**\n * @deprecated `_platform` parameter no longer being used.\n * @breaking-change 14.0.0\n */\n _platform: Platform,\n @Optional() @Inject(DOCUMENT) private _document: any,\n @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,\n @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)\n defaults?: MatProgressSpinnerDefaultOptions,\n ) {\n super(elementRef);\n\n const trackedDiameters = MatProgressSpinner._diameters;\n this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();\n\n // The base size is already inserted via the component's structural styles. We still\n // need to track it so we don't end up adding the same styles again.\n if (!trackedDiameters.has(_document.head)) {\n trackedDiameters.set(_document.head, new Set<number>([BASE_SIZE]));\n }\n\n this._noopAnimations =\n animationMode === 'NoopAnimations' && !!defaults && !defaults._forceAnimations;\n\n if (defaults) {\n if (defaults.diameter) {\n this.diameter = defaults.diameter;\n }\n\n if (defaults.strokeWidth) {\n this.strokeWidth = defaults.strokeWidth;\n }\n }\n }\n\n ngOnInit() {\n const element = this._elementRef.nativeElement;\n\n // Note that we need to look up the root node in ngOnInit, rather than the constructor, because\n // Angular seems to create the element outside the shadow root and then moves it inside, if the\n // node is inside an `ngIf` and a ShadowDom-encapsulated component.\n this._styleRoot = _getShadowRoot(element) || this._document.head;\n this._attachStyleNode();\n element.classList.add('mat-progress-spinner-indeterminate-animation');\n }\n\n /** The radius of the spinner, adjusted for stroke width. */\n _getCircleRadius() {\n return (this.diameter - BASE_STROKE_WIDTH) / 2;\n }\n\n /** The view box of the spinner's svg element. */\n _getViewBox() {\n const viewBox = this._getCircleRadius() * 2 + this.strokeWidth;\n return `0 0 ${viewBox} ${viewBox}`;\n }\n\n /** The stroke circumference of the svg circle. */\n _getStrokeCircumference(): number {\n return 2 * Math.PI * this._getCircleRadius();\n }\n\n /** The dash offset of the svg circle. */\n _getStrokeDashOffset() {\n if (this.mode === 'determinate') {\n return (this._getStrokeCircumference() * (100 - this._value)) / 100;\n }\n\n return null;\n }\n\n /** Stroke width of the circle in percent. */\n _getCircleStrokeWidth() {\n return (this.strokeWidth / this.diameter) * 100;\n }\n\n /** Dynamically generates a style tag containing the correct animation for this diameter. */\n private _attachStyleNode(): void {\n const styleRoot = this._styleRoot;\n const currentDiameter = this._diameter;\n const diameters = MatProgressSpinner._diameters;\n let diametersForElement = diameters.get(styleRoot);\n\n if (!diametersForElement || !diametersForElement.has(currentDiameter)) {\n const styleTag: HTMLStyleElement = this._document.createElement('style');\n styleTag.setAttribute('mat-spinner-animation', this._spinnerAnimationLabel);\n styleTag.textContent = this._getAnimationText();\n styleRoot.appendChild(styleTag);\n\n if (!diametersForElement) {\n diametersForElement = new Set<number>();\n diameters.set(styleRoot, diametersForElement);\n }\n\n diametersForElement.add(currentDiameter);\n }\n }\n\n /** Generates animation styles adjusted for the spinner's diameter. */\n private _getAnimationText(): string {\n const strokeCircumference = this._getStrokeCircumference();\n return (\n INDETERMINATE_ANIMATION_TEMPLATE\n // Animation should begin at 5% and end at 80%\n .replace(/START_VALUE/g, `${0.95 * strokeCircumference}`)\n .replace(/END_VALUE/g, `${0.2 * strokeCircumference}`)\n .replace(/DIAMETER/g, `${this._spinnerAnimationLabel}`)\n );\n }\n\n /** Returns the circle diameter formatted for use with the animation-name CSS property. */\n private _getSpinnerAnimationLabel(): string {\n // The string of a float point number will include a period ‘.’ character,\n // which is not valid for a CSS animation-name.\n return this.diameter.toString().replace('.', '_');\n }\n}\n\n/**\n * `<mat-spinner>` component.\n *\n * This is a component definition to be used as a convenience reference to create an\n * indeterminate `<mat-progress-spinner>` instance.\n */\n@Component({\n selector: 'mat-spinner',\n host: {\n 'role': 'progressbar',\n 'mode': 'indeterminate',\n 'class': 'mat-spinner mat-progress-spinner',\n '[class._mat-animation-noopable]': `_noopAnimations`,\n '[style.width.px]': 'diameter',\n '[style.height.px]': 'diameter',\n },\n inputs: ['color'],\n templateUrl: 'progress-spinner.html',\n styleUrls: ['progress-spinner.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class MatSpinner extends MatProgressSpinner {\n constructor(\n elementRef: ElementRef<HTMLElement>,\n platform: Platform,\n @Optional() @Inject(DOCUMENT) document: any,\n @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,\n @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)\n defaults?: MatProgressSpinnerDefaultOptions,\n ) {\n super(elementRef, platform, document, animationMode, defaults);\n this.mode = 'indeterminate';\n }\n}\n","<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\">\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"></circle>\n</svg>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatCommonModule} from '@angular/material/core';\nimport {MatProgressSpinner, MatSpinner} from './progress-spinner';\n\n@NgModule({\n imports: [MatCommonModule, CommonModule],\n exports: [MatProgressSpinner, MatSpinner, MatCommonModule],\n declarations: [MatProgressSpinner, MatSpinner],\n})\nexport class MatProgressSpinnerModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './progress-spinner-module';\nexport {\n MatProgressSpinner,\n MatSpinner,\n MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,\n ProgressSpinnerMode,\n MatProgressSpinnerDefaultOptions,\n MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,\n} from './progress-spinner';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"progress-spinner.mjs","sources":["../../../../../../src/material/progress-spinner/progress-spinner.ts","../../../../../../src/material/progress-spinner/progress-spinner.html","../../../../../../src/material/progress-spinner/progress-spinner-module.ts","../../../../../../src/material/progress-spinner/public-api.ts","../../../../../../src/material/progress-spinner/index.ts","../../../../../../src/material/progress-spinner/progress-spinner_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';\nimport {Platform, _getShadowRoot} from '@angular/cdk/platform';\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {DOCUMENT} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Inject,\n InjectionToken,\n Input,\n Optional,\n ViewEncapsulation,\n OnInit,\n ChangeDetectorRef,\n OnDestroy,\n NgZone,\n} from '@angular/core';\nimport {CanColor, mixinColor} from '@angular/material/core';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\nimport {Subscription} from 'rxjs';\n\n/** Possible mode for a progress spinner. */\nexport type ProgressSpinnerMode = 'determinate' | 'indeterminate';\n\n/**\n * Base reference size of the spinner.\n * @docs-private\n */\nconst BASE_SIZE = 100;\n\n/**\n * Base reference stroke width of the spinner.\n * @docs-private\n */\nconst BASE_STROKE_WIDTH = 10;\n\n// Boilerplate for applying mixins to MatProgressSpinner.\n/** @docs-private */\nconst _MatProgressSpinnerBase = mixinColor(\n class {\n constructor(public _elementRef: ElementRef) {}\n },\n 'primary',\n);\n\n/** Default `mat-progress-spinner` options that can be overridden. */\nexport interface MatProgressSpinnerDefaultOptions {\n /** Diameter of the spinner. */\n diameter?: number;\n /** Width of the spinner's stroke. */\n strokeWidth?: number;\n /**\n * Whether the animations should be force to be enabled, ignoring if the current environment is\n * using NoopAnimationsModule.\n */\n _forceAnimations?: boolean;\n}\n\n/** Injection token to be used to override the default options for `mat-progress-spinner`. */\nexport const MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS =\n new InjectionToken<MatProgressSpinnerDefaultOptions>('mat-progress-spinner-default-options', {\n providedIn: 'root',\n factory: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,\n });\n\n/** @docs-private */\nexport function MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY(): MatProgressSpinnerDefaultOptions {\n return {diameter: BASE_SIZE};\n}\n\n// .0001 percentage difference is necessary in order to avoid unwanted animation frames\n// for example because the animation duration is 4 seconds, .1% accounts to 4ms\n// which are enough to see the flicker described in\n// https://github.com/angular/components/issues/8984\nconst INDETERMINATE_ANIMATION_TEMPLATE = `\n @keyframes mat-progress-spinner-stroke-rotate-DIAMETER {\n 0% { stroke-dashoffset: START_VALUE; transform: rotate(0); }\n 12.5% { stroke-dashoffset: END_VALUE; transform: rotate(0); }\n 12.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(72.5deg); }\n 25% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(72.5deg); }\n\n 25.0001% { stroke-dashoffset: START_VALUE; transform: rotate(270deg); }\n 37.5% { stroke-dashoffset: END_VALUE; transform: rotate(270deg); }\n 37.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(161.5deg); }\n 50% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(161.5deg); }\n\n 50.0001% { stroke-dashoffset: START_VALUE; transform: rotate(180deg); }\n 62.5% { stroke-dashoffset: END_VALUE; transform: rotate(180deg); }\n 62.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(251.5deg); }\n 75% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(251.5deg); }\n\n 75.0001% { stroke-dashoffset: START_VALUE; transform: rotate(90deg); }\n 87.5% { stroke-dashoffset: END_VALUE; transform: rotate(90deg); }\n 87.5001% { stroke-dashoffset: END_VALUE; transform: rotateX(180deg) rotate(341.5deg); }\n 100% { stroke-dashoffset: START_VALUE; transform: rotateX(180deg) rotate(341.5deg); }\n }\n`;\n\n/**\n * `<mat-progress-spinner>` component.\n */\n@Component({\n selector: 'mat-progress-spinner',\n exportAs: 'matProgressSpinner',\n host: {\n 'role': 'progressbar',\n 'class': 'mat-progress-spinner',\n // set tab index to -1 so screen readers will read the aria-label\n // Note: there is a known issue with JAWS that does not read progressbar aria labels on FireFox\n 'tabindex': '-1',\n '[class._mat-animation-noopable]': `_noopAnimations`,\n '[style.width.px]': 'diameter',\n '[style.height.px]': 'diameter',\n '[attr.aria-valuemin]': 'mode === \"determinate\" ? 0 : null',\n '[attr.aria-valuemax]': 'mode === \"determinate\" ? 100 : null',\n '[attr.aria-valuenow]': 'mode === \"determinate\" ? value : null',\n '[attr.mode]': 'mode',\n },\n inputs: ['color'],\n templateUrl: 'progress-spinner.html',\n styleUrls: ['progress-spinner.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class MatProgressSpinner\n extends _MatProgressSpinnerBase\n implements OnInit, OnDestroy, CanColor\n{\n private _diameter = BASE_SIZE;\n private _value = 0;\n private _strokeWidth: number;\n private _resizeSubscription = Subscription.EMPTY;\n\n /**\n * Element to which we should add the generated style tags for the indeterminate animation.\n * For most elements this is the document, but for the ones in the Shadow DOM we need to\n * use the shadow root.\n */\n private _styleRoot: Node;\n\n /**\n * Tracks diameters of existing instances to de-dupe generated styles (default d = 100).\n * We need to keep track of which elements the diameters were attached to, because for\n * elements in the Shadow DOM the style tags are attached to the shadow root, rather\n * than the document head.\n */\n private static _diameters = new WeakMap<Node, Set<number>>();\n\n /** Whether the _mat-animation-noopable class should be applied, disabling animations. */\n _noopAnimations: boolean;\n\n /** A string that is used for setting the spinner animation-name CSS property */\n _spinnerAnimationLabel: string;\n\n /** The diameter of the progress spinner (will set width and height of svg). */\n @Input()\n get diameter(): number {\n return this._diameter;\n }\n set diameter(size: NumberInput) {\n this._diameter = coerceNumberProperty(size);\n this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();\n\n // If this is set before `ngOnInit`, the style root may not have been resolved yet.\n if (this._styleRoot) {\n this._attachStyleNode();\n }\n }\n\n /** Stroke width of the progress spinner. */\n @Input()\n get strokeWidth(): number {\n return this._strokeWidth || this.diameter / 10;\n }\n set strokeWidth(value: NumberInput) {\n this._strokeWidth = coerceNumberProperty(value);\n }\n\n /** Mode of the progress circle */\n @Input() mode: ProgressSpinnerMode = 'determinate';\n\n /** Value of the progress circle. */\n @Input()\n get value(): number {\n return this.mode === 'determinate' ? this._value : 0;\n }\n set value(newValue: NumberInput) {\n this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));\n }\n\n constructor(\n elementRef: ElementRef<HTMLElement>,\n _platform: Platform,\n @Optional() @Inject(DOCUMENT) private _document: any,\n @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,\n @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)\n defaults?: MatProgressSpinnerDefaultOptions,\n /**\n * @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`\n * parameters to become required.\n * @breaking-change 14.0.0\n */\n changeDetectorRef?: ChangeDetectorRef,\n viewportRuler?: ViewportRuler,\n ngZone?: NgZone,\n ) {\n super(elementRef);\n\n const trackedDiameters = MatProgressSpinner._diameters;\n this._spinnerAnimationLabel = this._getSpinnerAnimationLabel();\n\n // The base size is already inserted via the component's structural styles. We still\n // need to track it so we don't end up adding the same styles again.\n if (!trackedDiameters.has(_document.head)) {\n trackedDiameters.set(_document.head, new Set<number>([BASE_SIZE]));\n }\n\n this._noopAnimations =\n animationMode === 'NoopAnimations' && !!defaults && !defaults._forceAnimations;\n\n if (defaults) {\n if (defaults.diameter) {\n this.diameter = defaults.diameter;\n }\n\n if (defaults.strokeWidth) {\n this.strokeWidth = defaults.strokeWidth;\n }\n }\n\n // Safari has an issue where the circle isn't positioned correctly when the page has a\n // different zoom level from the default. This handler triggers a recalculation of the\n // `transform-origin` when the page zoom level changes.\n // See `_getCircleTransformOrigin` for more info.\n // @breaking-change 14.0.0 Remove null checks for `_changeDetectorRef`,\n // `viewportRuler` and `ngZone`.\n if (_platform.isBrowser && _platform.SAFARI && viewportRuler && changeDetectorRef && ngZone) {\n this._resizeSubscription = viewportRuler.change(150).subscribe(() => {\n // When the window is resize while the spinner is in `indeterminate` mode, we\n // have to mark for check so the transform origin of the circle can be recomputed.\n if (this.mode === 'indeterminate') {\n ngZone.run(() => changeDetectorRef.markForCheck());\n }\n });\n }\n }\n\n ngOnInit() {\n const element = this._elementRef.nativeElement;\n\n // Note that we need to look up the root node in ngOnInit, rather than the constructor, because\n // Angular seems to create the element outside the shadow root and then moves it inside, if the\n // node is inside an `ngIf` and a ShadowDom-encapsulated component.\n this._styleRoot = _getShadowRoot(element) || this._document.head;\n this._attachStyleNode();\n element.classList.add('mat-progress-spinner-indeterminate-animation');\n }\n\n ngOnDestroy() {\n this._resizeSubscription.unsubscribe();\n }\n\n /** The radius of the spinner, adjusted for stroke width. */\n _getCircleRadius() {\n return (this.diameter - BASE_STROKE_WIDTH) / 2;\n }\n\n /** The view box of the spinner's svg element. */\n _getViewBox() {\n const viewBox = this._getCircleRadius() * 2 + this.strokeWidth;\n return `0 0 ${viewBox} ${viewBox}`;\n }\n\n /** The stroke circumference of the svg circle. */\n _getStrokeCircumference(): number {\n return 2 * Math.PI * this._getCircleRadius();\n }\n\n /** The dash offset of the svg circle. */\n _getStrokeDashOffset() {\n if (this.mode === 'determinate') {\n return (this._getStrokeCircumference() * (100 - this._value)) / 100;\n }\n\n return null;\n }\n\n /** Stroke width of the circle in percent. */\n _getCircleStrokeWidth() {\n return (this.strokeWidth / this.diameter) * 100;\n }\n\n /** Gets the `transform-origin` for the inner circle element. */\n _getCircleTransformOrigin(svg: HTMLElement): string {\n // Safari has an issue where the `transform-origin` doesn't work as expected when the page\n // has a different zoom level from the default. The problem appears to be that a zoom\n // is applied on the `svg` node itself. We can work around it by calculating the origin\n // based on the zoom level. On all other browsers the `currentScale` appears to always be 1.\n const scale = ((svg as unknown as SVGSVGElement).currentScale ?? 1) * 50;\n return `${scale}% ${scale}%`;\n }\n\n /** Dynamically generates a style tag containing the correct animation for this diameter. */\n private _attachStyleNode(): void {\n const styleRoot = this._styleRoot;\n const currentDiameter = this._diameter;\n const diameters = MatProgressSpinner._diameters;\n let diametersForElement = diameters.get(styleRoot);\n\n if (!diametersForElement || !diametersForElement.has(currentDiameter)) {\n const styleTag: HTMLStyleElement = this._document.createElement('style');\n styleTag.setAttribute('mat-spinner-animation', this._spinnerAnimationLabel);\n styleTag.textContent = this._getAnimationText();\n styleRoot.appendChild(styleTag);\n\n if (!diametersForElement) {\n diametersForElement = new Set<number>();\n diameters.set(styleRoot, diametersForElement);\n }\n\n diametersForElement.add(currentDiameter);\n }\n }\n\n /** Generates animation styles adjusted for the spinner's diameter. */\n private _getAnimationText(): string {\n const strokeCircumference = this._getStrokeCircumference();\n return (\n INDETERMINATE_ANIMATION_TEMPLATE\n // Animation should begin at 5% and end at 80%\n .replace(/START_VALUE/g, `${0.95 * strokeCircumference}`)\n .replace(/END_VALUE/g, `${0.2 * strokeCircumference}`)\n .replace(/DIAMETER/g, `${this._spinnerAnimationLabel}`)\n );\n }\n\n /** Returns the circle diameter formatted for use with the animation-name CSS property. */\n private _getSpinnerAnimationLabel(): string {\n // The string of a float point number will include a period ‘.’ character,\n // which is not valid for a CSS animation-name.\n return this.diameter.toString().replace('.', '_');\n }\n}\n\n/**\n * `<mat-spinner>` component.\n *\n * This is a component definition to be used as a convenience reference to create an\n * indeterminate `<mat-progress-spinner>` instance.\n */\n@Component({\n selector: 'mat-spinner',\n host: {\n 'role': 'progressbar',\n 'mode': 'indeterminate',\n 'class': 'mat-spinner mat-progress-spinner',\n '[class._mat-animation-noopable]': `_noopAnimations`,\n '[style.width.px]': 'diameter',\n '[style.height.px]': 'diameter',\n },\n inputs: ['color'],\n templateUrl: 'progress-spinner.html',\n styleUrls: ['progress-spinner.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class MatSpinner extends MatProgressSpinner {\n constructor(\n elementRef: ElementRef<HTMLElement>,\n platform: Platform,\n @Optional() @Inject(DOCUMENT) document: any,\n @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,\n @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)\n defaults?: MatProgressSpinnerDefaultOptions,\n /**\n * @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`\n * parameters to become required.\n * @breaking-change 14.0.0\n */\n changeDetectorRef?: ChangeDetectorRef,\n viewportRuler?: ViewportRuler,\n ngZone?: NgZone,\n ) {\n super(\n elementRef,\n platform,\n document,\n animationMode,\n defaults,\n changeDetectorRef,\n viewportRuler,\n ngZone,\n );\n this.mode = 'indeterminate';\n }\n}\n","<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #svg>\n\n <!--\n Technically we can reuse the same `circle` element, however Safari has an issue that breaks\n the SVG rendering in determinate mode, after switching between indeterminate and determinate.\n Using a different element avoids the issue. An alternative to this is adding `display: none`\n for a split second and then removing it when switching between modes, but it's hard to know\n for how long to hide the element and it can cause the UI to blink.\n -->\n <circle\n *ngSwitchCase=\"true\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.animation-name]=\"'mat-progress-spinner-stroke-rotate-' + _spinnerAnimationLabel\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n\n <circle\n *ngSwitchCase=\"false\"\n cx=\"50%\"\n cy=\"50%\"\n [attr.r]=\"_getCircleRadius()\"\n [style.stroke-dashoffset.px]=\"_getStrokeDashOffset()\"\n [style.stroke-dasharray.px]=\"_getStrokeCircumference()\"\n [style.stroke-width.%]=\"_getCircleStrokeWidth()\"\n [style.transform-origin]=\"_getCircleTransformOrigin(svg)\"></circle>\n</svg>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MatCommonModule} from '@angular/material/core';\nimport {MatProgressSpinner, MatSpinner} from './progress-spinner';\n\n@NgModule({\n imports: [MatCommonModule, CommonModule],\n exports: [MatProgressSpinner, MatSpinner, MatCommonModule],\n declarations: [MatProgressSpinner, MatSpinner],\n})\nexport class MatProgressSpinnerModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './progress-spinner-module';\nexport {\n MatProgressSpinner,\n MatSpinner,\n MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,\n ProgressSpinnerMode,\n MatProgressSpinnerDefaultOptions,\n MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY,\n} from './progress-spinner';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -239,9 +239,9 @@ class _MatRadioGroupBase {
239
239
  this._changeDetector.markForCheck();
240
240
  }
241
241
  }
242
- _MatRadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: _MatRadioGroupBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
243
- _MatRadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: _MatRadioGroupBase, inputs: { color: "color", name: "name", labelPosition: "labelPosition", value: "value", selected: "selected", disabled: "disabled", required: "required" }, outputs: { change: "change" }, ngImport: i0 });
244
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: _MatRadioGroupBase, decorators: [{
242
+ _MatRadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatRadioGroupBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
243
+ _MatRadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: _MatRadioGroupBase, inputs: { color: "color", name: "name", labelPosition: "labelPosition", value: "value", selected: "selected", disabled: "disabled", required: "required" }, outputs: { change: "change" }, ngImport: i0 });
244
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatRadioGroupBase, decorators: [{
245
245
  type: Directive
246
246
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
247
247
  type: Output
@@ -265,12 +265,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
265
265
  */
266
266
  class MatRadioGroup extends _MatRadioGroupBase {
267
267
  }
268
- MatRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Directive });
269
- MatRadioGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatRadioGroup, selector: "mat-radio-group", host: { attributes: { "role": "radiogroup" }, classAttribute: "mat-radio-group" }, providers: [
268
+ MatRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Directive });
269
+ MatRadioGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatRadioGroup, selector: "mat-radio-group", host: { attributes: { "role": "radiogroup" }, classAttribute: "mat-radio-group" }, providers: [
270
270
  MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
271
271
  { provide: MAT_RADIO_GROUP, useExisting: MatRadioGroup },
272
272
  ], queries: [{ propertyName: "_radios", predicate: i0.forwardRef(function () { return MatRadioButton; }), descendants: true }], exportAs: ["matRadioGroup"], usesInheritance: true, ngImport: i0 });
273
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioGroup, decorators: [{
273
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioGroup, decorators: [{
274
274
  type: Directive,
275
275
  args: [{
276
276
  selector: 'mat-radio-group',
@@ -497,9 +497,9 @@ class _MatRadioButtonBase extends _MatRadioButtonMixinBase {
497
497
  }
498
498
  }
499
499
  }
500
- _MatRadioButtonBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: _MatRadioButtonBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
501
- _MatRadioButtonBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: _MatRadioButtonBase, inputs: { id: "id", name: "name", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], checked: "checked", value: "value", labelPosition: "labelPosition", disabled: "disabled", required: "required", color: "color" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
502
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: _MatRadioButtonBase, decorators: [{
500
+ _MatRadioButtonBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatRadioButtonBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
501
+ _MatRadioButtonBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: _MatRadioButtonBase, inputs: { id: "id", name: "name", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], checked: "checked", value: "value", labelPosition: "labelPosition", disabled: "disabled", required: "required", color: "color" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
502
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: _MatRadioButtonBase, decorators: [{
503
503
  type: Directive
504
504
  }], ctorParameters: function () { return [{ type: _MatRadioGroupBase }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }, { type: undefined }, { type: undefined }, { type: undefined }]; }, propDecorators: { id: [{
505
505
  type: Input
@@ -540,9 +540,9 @@ class MatRadioButton extends _MatRadioButtonBase {
540
540
  super(radioGroup, elementRef, changeDetector, focusMonitor, radioDispatcher, animationMode, providerOverride, tabIndex);
541
541
  }
542
542
  }
543
- MatRadioButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioButton, deps: [{ token: MAT_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RADIO_DEFAULT_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
544
- MatRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MatRadioButton, selector: "mat-radio-button", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.mat-radio-checked": "checked", "class.mat-radio-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "mat-radio-button" }, exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<!-- TODO(jelbourn): render the radio on either side of the content -->\n<!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->\n<label [attr.for]=\"inputId\" class=\"mat-radio-label\" #label>\n <!-- The actual 'radio' part of the control. -->\n <span class=\"mat-radio-container\">\n <span class=\"mat-radio-outer-circle\"></span>\n <span class=\"mat-radio-inner-circle\"></span>\n <input #input class=\"mat-radio-input cdk-visually-hidden\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n (change)=\"_onInputInteraction($event)\"\n (click)=\"_onInputClick($event)\">\n\n <!-- The ripple comes after the input so that we can target it with a CSS\n sibling selector when the input is focused. -->\n <span mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"label\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\"\n [matRippleRadius]=\"20\"\n [matRippleAnimation]=\"{enterDuration: _noopAnimations ? 0 : 150}\">\n\n <span class=\"mat-ripple-element mat-radio-persistent-ripple\"></span>\n </span>\n </span>\n\n <!-- The label content for radio control. -->\n <span class=\"mat-radio-label-content\" [class.mat-radio-label-before]=\"labelPosition == 'before'\">\n <!-- Add an invisible span so JAWS can read the label -->\n <span style=\"display:none\">&nbsp;</span>\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".mat-radio-button{display:inline-block;-webkit-tap-highlight-color:transparent;outline:0}.mat-radio-label{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%}.mat-radio-container{box-sizing:border-box;display:inline-block;position:relative;width:20px;height:20px;flex-shrink:0}.mat-radio-outer-circle{box-sizing:border-box;display:block;height:20px;left:0;position:absolute;top:0;transition:border-color ease 280ms;width:20px;border-width:2px;border-style:solid;border-radius:50%}._mat-animation-noopable .mat-radio-outer-circle{transition:none}.mat-radio-inner-circle{border-radius:50%;box-sizing:border-box;display:block;height:20px;left:0;position:absolute;top:0;opacity:0;transition:transform ease 280ms,background-color ease 280ms,opacity linear 1ms 280ms;width:20px;transform:scale(0.001);-webkit-print-color-adjust:exact;color-adjust:exact}.mat-radio-checked .mat-radio-inner-circle{transform:scale(0.5);opacity:1;transition:transform ease 280ms,background-color ease 280ms}.cdk-high-contrast-active .mat-radio-checked .mat-radio-inner-circle{border:solid 10px}._mat-animation-noopable .mat-radio-inner-circle{transition:none}.mat-radio-label-content{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto;display:inline-block;order:0;line-height:inherit;padding-left:8px;padding-right:0}[dir=rtl] .mat-radio-label-content{padding-right:8px;padding-left:0}.mat-radio-label-content.mat-radio-label-before{order:-1;padding-left:0;padding-right:8px}[dir=rtl] .mat-radio-label-content.mat-radio-label-before{padding-right:0;padding-left:8px}.mat-radio-disabled,.mat-radio-disabled .mat-radio-label{cursor:default}.mat-radio-button .mat-radio-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-radio-button .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple){opacity:.16}.mat-radio-persistent-ripple{width:100%;height:100%;transform:none;top:0;left:0}.mat-radio-container:hover .mat-radio-persistent-ripple{opacity:.04}.mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused .mat-radio-persistent-ripple,.mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-persistent-ripple{opacity:.12}.mat-radio-persistent-ripple,.mat-radio-disabled .mat-radio-container:hover .mat-radio-persistent-ripple{opacity:0}@media(hover: none){.mat-radio-container:hover .mat-radio-persistent-ripple{display:none}}.mat-radio-input{bottom:0;left:50%}.cdk-high-contrast-active .mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused .mat-radio-ripple,.cdk-high-contrast-active .mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-ripple{outline:solid 3px}.cdk-high-contrast-active .mat-radio-disabled{opacity:.5}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
545
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioButton, decorators: [{
543
+ MatRadioButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioButton, deps: [{ token: MAT_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RADIO_DEFAULT_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
544
+ MatRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0-rc.1", type: MatRadioButton, selector: "mat-radio-button", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.mat-radio-checked": "checked", "class.mat-radio-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "mat-radio-button" }, exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<!-- TODO(jelbourn): render the radio on either side of the content -->\n<!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->\n<label [attr.for]=\"inputId\" class=\"mat-radio-label\" #label>\n <!-- The actual 'radio' part of the control. -->\n <span class=\"mat-radio-container\">\n <span class=\"mat-radio-outer-circle\"></span>\n <span class=\"mat-radio-inner-circle\"></span>\n <input #input class=\"mat-radio-input cdk-visually-hidden\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n (change)=\"_onInputInteraction($event)\"\n (click)=\"_onInputClick($event)\">\n\n <!-- The ripple comes after the input so that we can target it with a CSS\n sibling selector when the input is focused. -->\n <span mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"label\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\"\n [matRippleRadius]=\"20\"\n [matRippleAnimation]=\"{enterDuration: _noopAnimations ? 0 : 150}\">\n\n <span class=\"mat-ripple-element mat-radio-persistent-ripple\"></span>\n </span>\n </span>\n\n <!-- The label content for radio control. -->\n <span class=\"mat-radio-label-content\" [class.mat-radio-label-before]=\"labelPosition == 'before'\">\n <!-- Add an invisible span so JAWS can read the label -->\n <span style=\"display:none\">&nbsp;</span>\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".mat-radio-button{display:inline-block;-webkit-tap-highlight-color:transparent;outline:0}.mat-radio-label{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%}.mat-radio-container{box-sizing:border-box;display:inline-block;position:relative;width:20px;height:20px;flex-shrink:0}.mat-radio-outer-circle{box-sizing:border-box;display:block;height:20px;left:0;position:absolute;top:0;transition:border-color ease 280ms;width:20px;border-width:2px;border-style:solid;border-radius:50%}._mat-animation-noopable .mat-radio-outer-circle{transition:none}.mat-radio-inner-circle{border-radius:50%;box-sizing:border-box;display:block;height:20px;left:0;position:absolute;top:0;opacity:0;transition:transform ease 280ms,background-color ease 280ms,opacity linear 1ms 280ms;width:20px;transform:scale(0.001);-webkit-print-color-adjust:exact;color-adjust:exact}.mat-radio-checked .mat-radio-inner-circle{transform:scale(0.5);opacity:1;transition:transform ease 280ms,background-color ease 280ms}.cdk-high-contrast-active .mat-radio-checked .mat-radio-inner-circle{border:solid 10px}._mat-animation-noopable .mat-radio-inner-circle{transition:none}.mat-radio-label-content{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto;display:inline-block;order:0;line-height:inherit;padding-left:8px;padding-right:0}[dir=rtl] .mat-radio-label-content{padding-right:8px;padding-left:0}.mat-radio-label-content.mat-radio-label-before{order:-1;padding-left:0;padding-right:8px}[dir=rtl] .mat-radio-label-content.mat-radio-label-before{padding-right:0;padding-left:8px}.mat-radio-disabled,.mat-radio-disabled .mat-radio-label{cursor:default}.mat-radio-button .mat-radio-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-radio-button .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple){opacity:.16}.mat-radio-persistent-ripple{width:100%;height:100%;transform:none;top:0;left:0}.mat-radio-container:hover .mat-radio-persistent-ripple{opacity:.04}.mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused .mat-radio-persistent-ripple,.mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-persistent-ripple{opacity:.12}.mat-radio-persistent-ripple,.mat-radio-disabled .mat-radio-container:hover .mat-radio-persistent-ripple{opacity:0}@media(hover: none){.mat-radio-container:hover .mat-radio-persistent-ripple{display:none}}.mat-radio-input{bottom:0;left:50%}.cdk-high-contrast-active .mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused .mat-radio-ripple,.cdk-high-contrast-active .mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-ripple{outline:solid 3px}.cdk-high-contrast-active .mat-radio-disabled{opacity:.5}\n"], directives: [{ type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
545
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioButton, decorators: [{
546
546
  type: Component,
547
547
  args: [{ selector: 'mat-radio-button', inputs: ['disableRipple', 'tabIndex'], encapsulation: ViewEncapsulation.None, exportAs: 'matRadioButton', host: {
548
548
  'class': 'mat-radio-button',
@@ -592,10 +592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
592
592
  */
593
593
  class MatRadioModule {
594
594
  }
595
- MatRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
596
- MatRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioModule, declarations: [MatRadioGroup, MatRadioButton], imports: [MatRippleModule, MatCommonModule], exports: [MatRadioGroup, MatRadioButton, MatCommonModule] });
597
- MatRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioModule, imports: [[MatRippleModule, MatCommonModule], MatCommonModule] });
598
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatRadioModule, decorators: [{
595
+ MatRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
596
+ MatRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioModule, declarations: [MatRadioGroup, MatRadioButton], imports: [MatRippleModule, MatCommonModule], exports: [MatRadioGroup, MatRadioButton, MatCommonModule] });
597
+ MatRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioModule, imports: [[MatRippleModule, MatCommonModule], MatCommonModule] });
598
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0-rc.1", ngImport: i0, type: MatRadioModule, decorators: [{
599
599
  type: NgModule,
600
600
  args: [{
601
601
  imports: [MatRippleModule, MatCommonModule],