@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.
- package/LICENSE +1 -1
- package/autocomplete/autocomplete-trigger.d.ts +1 -1
- package/button/button.d.ts +11 -5
- package/core/focus-indicators/_focus-indicators.scss +4 -0
- package/core/option/index.d.ts +1 -1
- package/core/option/option.d.ts +11 -11
- package/core/ripple/_ripple.scss +4 -1
- package/core/selection/index.d.ts +8 -8
- package/core/selection/pseudo-checkbox/pseudo-checkbox-module.d.ts +8 -0
- package/core/theming/_palette.scss +1 -1
- package/core/theming/_theming.scss +15 -4
- package/esm2020/autocomplete/autocomplete-module.mjs +5 -5
- package/esm2020/autocomplete/autocomplete-origin.mjs +7 -7
- package/esm2020/autocomplete/autocomplete-trigger.mjs +20 -18
- package/esm2020/autocomplete/autocomplete.mjs +7 -7
- package/esm2020/badge/badge-module.mjs +5 -5
- package/esm2020/badge/badge.mjs +4 -4
- package/esm2020/bottom-sheet/bottom-sheet-container.mjs +4 -4
- package/esm2020/bottom-sheet/bottom-sheet-module.mjs +5 -5
- package/esm2020/bottom-sheet/bottom-sheet.mjs +4 -4
- package/esm2020/button/button-module.mjs +5 -5
- package/esm2020/button/button.mjs +35 -15
- package/esm2020/button-toggle/button-toggle-module.mjs +5 -5
- package/esm2020/button-toggle/button-toggle.mjs +7 -7
- package/esm2020/card/card-module.mjs +5 -5
- package/esm2020/card/card.mjs +44 -44
- package/esm2020/checkbox/checkbox-module.mjs +9 -9
- package/esm2020/checkbox/checkbox-required-validator.mjs +4 -4
- package/esm2020/checkbox/checkbox.mjs +4 -4
- package/esm2020/chips/chip-input.mjs +4 -4
- package/esm2020/chips/chip-list.mjs +4 -4
- package/esm2020/chips/chip.mjs +13 -16
- package/esm2020/chips/chips-module.mjs +5 -5
- package/esm2020/core/common-behaviors/common-module.mjs +7 -11
- package/esm2020/core/datetime/index.mjs +9 -9
- package/esm2020/core/datetime/native-date-adapter.mjs +4 -4
- package/esm2020/core/error/error-options.mjs +7 -7
- package/esm2020/core/line/line.mjs +8 -8
- package/esm2020/core/option/index.mjs +5 -5
- package/esm2020/core/option/optgroup.mjs +7 -7
- package/esm2020/core/option/option.mjs +7 -7
- package/esm2020/core/ripple/index.mjs +5 -5
- package/esm2020/core/ripple/ripple-renderer.mjs +4 -2
- package/esm2020/core/ripple/ripple.mjs +4 -4
- package/esm2020/core/selection/index.mjs +2 -18
- package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +25 -0
- package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +4 -4
- package/esm2020/core/version.mjs +1 -1
- package/esm2020/datepicker/calendar-body.mjs +6 -6
- package/esm2020/datepicker/calendar.mjs +7 -7
- package/esm2020/datepicker/date-range-input-parts.mjs +10 -10
- package/esm2020/datepicker/date-range-input.mjs +4 -4
- package/esm2020/datepicker/date-range-picker.mjs +4 -4
- package/esm2020/datepicker/date-range-selection-strategy.mjs +4 -4
- package/esm2020/datepicker/date-selection-model.mjs +10 -10
- package/esm2020/datepicker/datepicker-actions.mjs +10 -10
- package/esm2020/datepicker/datepicker-base.mjs +7 -7
- package/esm2020/datepicker/datepicker-input-base.mjs +4 -4
- package/esm2020/datepicker/datepicker-input.mjs +4 -4
- package/esm2020/datepicker/datepicker-intl.mjs +4 -4
- package/esm2020/datepicker/datepicker-module.mjs +5 -5
- package/esm2020/datepicker/datepicker-toggle.mjs +7 -7
- package/esm2020/datepicker/datepicker.mjs +4 -4
- package/esm2020/datepicker/month-view.mjs +4 -4
- package/esm2020/datepicker/multi-year-view.mjs +4 -4
- package/esm2020/datepicker/testing/calendar-cell-harness.mjs +2 -2
- package/esm2020/datepicker/year-view.mjs +4 -4
- package/esm2020/dialog/dialog-container.mjs +7 -7
- package/esm2020/dialog/dialog-content-directives.mjs +13 -13
- package/esm2020/dialog/dialog-module.mjs +5 -5
- package/esm2020/dialog/dialog.mjs +7 -7
- package/esm2020/divider/divider-module.mjs +5 -5
- package/esm2020/divider/divider.mjs +4 -4
- package/esm2020/expansion/accordion.mjs +4 -4
- package/esm2020/expansion/expansion-module.mjs +5 -5
- package/esm2020/expansion/expansion-panel-content.mjs +4 -4
- package/esm2020/expansion/expansion-panel-header.mjs +11 -11
- package/esm2020/expansion/expansion-panel.mjs +7 -7
- package/esm2020/form-field/error.mjs +4 -4
- package/esm2020/form-field/form-field-control.mjs +4 -4
- package/esm2020/form-field/form-field-module.mjs +5 -5
- package/esm2020/form-field/form-field.mjs +17 -13
- package/esm2020/form-field/hint.mjs +4 -4
- package/esm2020/form-field/label.mjs +4 -4
- package/esm2020/form-field/placeholder.mjs +4 -4
- package/esm2020/form-field/prefix.mjs +4 -4
- package/esm2020/form-field/suffix.mjs +4 -4
- package/esm2020/grid-list/grid-list-module.mjs +5 -5
- package/esm2020/grid-list/grid-list.mjs +4 -4
- package/esm2020/grid-list/grid-tile.mjs +16 -16
- package/esm2020/icon/icon-module.mjs +5 -5
- package/esm2020/icon/icon-registry.mjs +4 -4
- package/esm2020/icon/icon.mjs +4 -4
- package/esm2020/icon/testing/fake-icon-registry.mjs +8 -8
- package/esm2020/input/input-module.mjs +5 -5
- package/esm2020/input/input.mjs +7 -4
- package/esm2020/list/list-module.mjs +5 -5
- package/esm2020/list/list.mjs +22 -22
- package/esm2020/list/selection-list.mjs +8 -8
- package/esm2020/list/testing/list-item-harness-base.mjs +5 -1
- package/esm2020/list/testing/selection-list-harness.mjs +1 -5
- package/esm2020/menu/menu-content.mjs +8 -10
- package/esm2020/menu/menu-item.mjs +7 -20
- package/esm2020/menu/menu-module.mjs +5 -5
- package/esm2020/menu/menu-trigger.mjs +9 -12
- package/esm2020/menu/menu.mjs +11 -7
- package/esm2020/paginator/paginator-intl.mjs +4 -4
- package/esm2020/paginator/paginator-module.mjs +5 -5
- package/esm2020/paginator/paginator.mjs +7 -7
- package/esm2020/progress-bar/progress-bar-module.mjs +5 -5
- package/esm2020/progress-bar/progress-bar.mjs +21 -11
- package/esm2020/progress-spinner/progress-spinner-module.mjs +5 -5
- package/esm2020/progress-spinner/progress-spinner.mjs +56 -18
- package/esm2020/radio/radio-module.mjs +5 -5
- package/esm2020/radio/radio.mjs +13 -13
- package/esm2020/select/select-module.mjs +5 -5
- package/esm2020/select/select.mjs +14 -11
- package/esm2020/sidenav/drawer.mjs +60 -14
- package/esm2020/sidenav/sidenav-module.mjs +5 -5
- package/esm2020/sidenav/sidenav.mjs +25 -14
- package/esm2020/slide-toggle/slide-toggle-module.mjs +9 -9
- package/esm2020/slide-toggle/slide-toggle-required-validator.mjs +4 -4
- package/esm2020/slide-toggle/slide-toggle.mjs +5 -5
- package/esm2020/slider/slider-module.mjs +5 -5
- package/esm2020/slider/slider.mjs +14 -6
- package/esm2020/snack-bar/simple-snack-bar.mjs +5 -5
- package/esm2020/snack-bar/snack-bar-container.mjs +4 -4
- package/esm2020/snack-bar/snack-bar-module.mjs +5 -5
- package/esm2020/snack-bar/snack-bar.mjs +28 -14
- package/esm2020/sort/sort-header-intl.mjs +4 -4
- package/esm2020/sort/sort-header.mjs +4 -4
- package/esm2020/sort/sort-module.mjs +5 -5
- package/esm2020/sort/sort.mjs +4 -4
- package/esm2020/stepper/step-content.mjs +4 -4
- package/esm2020/stepper/step-header.mjs +5 -5
- package/esm2020/stepper/step-label.mjs +4 -4
- package/esm2020/stepper/stepper-button.mjs +7 -7
- package/esm2020/stepper/stepper-icon.mjs +4 -4
- package/esm2020/stepper/stepper-intl.mjs +4 -4
- package/esm2020/stepper/stepper-module.mjs +5 -5
- package/esm2020/stepper/stepper.mjs +17 -17
- package/esm2020/table/cell.mjs +22 -22
- package/esm2020/table/row.mjs +22 -22
- package/esm2020/table/table-data-source.mjs +2 -1
- package/esm2020/table/table-module.mjs +5 -5
- package/esm2020/table/table.mjs +9 -9
- package/esm2020/table/text-column.mjs +4 -4
- package/esm2020/tabs/ink-bar.mjs +4 -4
- package/esm2020/tabs/paginated-tab-header.mjs +4 -4
- package/esm2020/tabs/public-api.mjs +2 -2
- package/esm2020/tabs/tab-body.mjs +10 -10
- package/esm2020/tabs/tab-content.mjs +4 -4
- package/esm2020/tabs/tab-group.mjs +21 -9
- package/esm2020/tabs/tab-header.mjs +7 -7
- package/esm2020/tabs/tab-label-wrapper.mjs +4 -4
- package/esm2020/tabs/tab-label.mjs +4 -4
- package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +97 -15
- package/esm2020/tabs/tab.mjs +8 -4
- package/esm2020/tabs/tabs-module.mjs +10 -6
- package/esm2020/tabs/testing/tab-harness-filters.mjs +1 -1
- package/esm2020/tabs/testing/tab-nav-bar-harness.mjs +13 -1
- package/esm2020/tabs/testing/tab-nav-panel-harness.mjs +27 -0
- package/esm2020/toolbar/toolbar-module.mjs +5 -5
- package/esm2020/toolbar/toolbar.mjs +7 -7
- package/esm2020/tooltip/tooltip-module.mjs +5 -5
- package/esm2020/tooltip/tooltip.mjs +23 -28
- package/esm2020/tree/node.mjs +10 -10
- package/esm2020/tree/outlet.mjs +4 -4
- package/esm2020/tree/padding.mjs +4 -4
- package/esm2020/tree/toggle.mjs +4 -4
- package/esm2020/tree/tree-module.mjs +5 -5
- package/esm2020/tree/tree.mjs +4 -4
- package/fesm2015/autocomplete.mjs +35 -33
- package/fesm2015/autocomplete.mjs.map +1 -1
- package/fesm2015/badge.mjs +7 -7
- package/fesm2015/badge.mjs.map +1 -1
- package/fesm2015/bottom-sheet.mjs +10 -10
- package/fesm2015/bottom-sheet.mjs.map +1 -1
- package/fesm2015/button-toggle.mjs +10 -10
- package/fesm2015/button-toggle.mjs.map +1 -1
- package/fesm2015/button.mjs +37 -17
- package/fesm2015/button.mjs.map +1 -1
- package/fesm2015/card.mjs +47 -47
- package/fesm2015/card.mjs.map +1 -1
- package/fesm2015/checkbox.mjs +14 -14
- package/fesm2015/checkbox.mjs.map +1 -1
- package/fesm2015/chips.mjs +22 -25
- package/fesm2015/chips.mjs.map +1 -1
- package/fesm2015/core.mjs +74 -69
- package/fesm2015/core.mjs.map +1 -1
- package/fesm2015/datepicker/testing.mjs +1 -1
- package/fesm2015/datepicker/testing.mjs.map +1 -1
- package/fesm2015/datepicker.mjs +84 -84
- package/fesm2015/datepicker.mjs.map +1 -1
- package/fesm2015/dialog.mjs +28 -28
- package/fesm2015/dialog.mjs.map +1 -1
- package/fesm2015/divider.mjs +7 -7
- package/fesm2015/divider.mjs.map +1 -1
- package/fesm2015/expansion.mjs +26 -26
- package/fesm2015/expansion.mjs.map +1 -1
- package/fesm2015/form-field.mjs +41 -37
- package/fesm2015/form-field.mjs.map +1 -1
- package/fesm2015/grid-list.mjs +22 -22
- package/fesm2015/grid-list.mjs.map +1 -1
- package/fesm2015/icon/testing.mjs +7 -7
- package/fesm2015/icon/testing.mjs.map +1 -1
- package/fesm2015/icon.mjs +10 -10
- package/fesm2015/icon.mjs.map +1 -1
- package/fesm2015/input.mjs +10 -7
- package/fesm2015/input.mjs.map +1 -1
- package/fesm2015/list/testing.mjs +6 -6
- package/fesm2015/list/testing.mjs.map +1 -1
- package/fesm2015/list.mjs +32 -32
- package/fesm2015/list.mjs.map +1 -1
- package/fesm2015/menu.mjs +36 -48
- package/fesm2015/menu.mjs.map +1 -1
- package/fesm2015/paginator.mjs +13 -13
- package/fesm2015/paginator.mjs.map +1 -1
- package/fesm2015/progress-bar.mjs +25 -13
- package/fesm2015/progress-bar.mjs.map +1 -1
- package/fesm2015/progress-spinner.mjs +58 -20
- package/fesm2015/progress-spinner.mjs.map +1 -1
- package/fesm2015/radio.mjs +16 -16
- package/fesm2015/radio.mjs.map +1 -1
- package/fesm2015/select.mjs +17 -14
- package/fesm2015/select.mjs.map +1 -1
- package/fesm2015/sidenav.mjs +88 -31
- package/fesm2015/sidenav.mjs.map +1 -1
- package/fesm2015/slide-toggle.mjs +15 -15
- package/fesm2015/slide-toggle.mjs.map +1 -1
- package/fesm2015/slider.mjs +17 -9
- package/fesm2015/slider.mjs.map +1 -1
- package/fesm2015/snack-bar.mjs +41 -25
- package/fesm2015/snack-bar.mjs.map +1 -1
- package/fesm2015/sort.mjs +13 -13
- package/fesm2015/sort.mjs.map +1 -1
- package/fesm2015/stepper.mjs +42 -42
- package/fesm2015/stepper.mjs.map +1 -1
- package/fesm2015/table.mjs +58 -57
- package/fesm2015/table.mjs.map +1 -1
- package/fesm2015/tabs/testing.mjs +34 -0
- package/fesm2015/tabs/testing.mjs.map +1 -1
- package/fesm2015/tabs.mjs +162 -60
- package/fesm2015/tabs.mjs.map +1 -1
- package/fesm2015/toolbar.mjs +10 -10
- package/fesm2015/toolbar.mjs.map +1 -1
- package/fesm2015/tooltip.mjs +26 -31
- package/fesm2015/tooltip.mjs.map +1 -1
- package/fesm2015/tree.mjs +25 -25
- package/fesm2015/tree.mjs.map +1 -1
- package/fesm2020/autocomplete.mjs +35 -33
- package/fesm2020/autocomplete.mjs.map +1 -1
- package/fesm2020/badge.mjs +7 -7
- package/fesm2020/badge.mjs.map +1 -1
- package/fesm2020/bottom-sheet.mjs +10 -10
- package/fesm2020/bottom-sheet.mjs.map +1 -1
- package/fesm2020/button-toggle.mjs +10 -10
- package/fesm2020/button-toggle.mjs.map +1 -1
- package/fesm2020/button.mjs +37 -17
- package/fesm2020/button.mjs.map +1 -1
- package/fesm2020/card.mjs +47 -47
- package/fesm2020/card.mjs.map +1 -1
- package/fesm2020/checkbox.mjs +14 -14
- package/fesm2020/checkbox.mjs.map +1 -1
- package/fesm2020/chips.mjs +22 -25
- package/fesm2020/chips.mjs.map +1 -1
- package/fesm2020/core.mjs +74 -69
- package/fesm2020/core.mjs.map +1 -1
- package/fesm2020/datepicker/testing.mjs +1 -1
- package/fesm2020/datepicker/testing.mjs.map +1 -1
- package/fesm2020/datepicker.mjs +84 -84
- package/fesm2020/datepicker.mjs.map +1 -1
- package/fesm2020/dialog.mjs +28 -28
- package/fesm2020/dialog.mjs.map +1 -1
- package/fesm2020/divider.mjs +7 -7
- package/fesm2020/divider.mjs.map +1 -1
- package/fesm2020/expansion.mjs +26 -26
- package/fesm2020/expansion.mjs.map +1 -1
- package/fesm2020/form-field.mjs +41 -37
- package/fesm2020/form-field.mjs.map +1 -1
- package/fesm2020/grid-list.mjs +22 -22
- package/fesm2020/grid-list.mjs.map +1 -1
- package/fesm2020/icon/testing.mjs +7 -7
- package/fesm2020/icon/testing.mjs.map +1 -1
- package/fesm2020/icon.mjs +10 -10
- package/fesm2020/icon.mjs.map +1 -1
- package/fesm2020/input.mjs +10 -7
- package/fesm2020/input.mjs.map +1 -1
- package/fesm2020/list/testing.mjs +4 -4
- package/fesm2020/list/testing.mjs.map +1 -1
- package/fesm2020/list.mjs +32 -32
- package/fesm2020/list.mjs.map +1 -1
- package/fesm2020/menu.mjs +34 -48
- package/fesm2020/menu.mjs.map +1 -1
- package/fesm2020/paginator.mjs +13 -13
- package/fesm2020/paginator.mjs.map +1 -1
- package/fesm2020/progress-bar.mjs +23 -13
- package/fesm2020/progress-bar.mjs.map +1 -1
- package/fesm2020/progress-spinner.mjs +57 -20
- package/fesm2020/progress-spinner.mjs.map +1 -1
- package/fesm2020/radio.mjs +16 -16
- package/fesm2020/radio.mjs.map +1 -1
- package/fesm2020/select.mjs +17 -14
- package/fesm2020/select.mjs.map +1 -1
- package/fesm2020/sidenav.mjs +87 -30
- package/fesm2020/sidenav.mjs.map +1 -1
- package/fesm2020/slide-toggle.mjs +15 -15
- package/fesm2020/slide-toggle.mjs.map +1 -1
- package/fesm2020/slider.mjs +17 -9
- package/fesm2020/slider.mjs.map +1 -1
- package/fesm2020/snack-bar.mjs +39 -25
- package/fesm2020/snack-bar.mjs.map +1 -1
- package/fesm2020/sort.mjs +13 -13
- package/fesm2020/sort.mjs.map +1 -1
- package/fesm2020/stepper.mjs +42 -42
- package/fesm2020/stepper.mjs.map +1 -1
- package/fesm2020/table.mjs +58 -57
- package/fesm2020/table.mjs.map +1 -1
- package/fesm2020/tabs/testing.mjs +37 -0
- package/fesm2020/tabs/testing.mjs.map +1 -1
- package/fesm2020/tabs.mjs +161 -60
- package/fesm2020/tabs.mjs.map +1 -1
- package/fesm2020/toolbar.mjs +10 -10
- package/fesm2020/toolbar.mjs.map +1 -1
- package/fesm2020/tooltip.mjs +26 -31
- package/fesm2020/tooltip.mjs.map +1 -1
- package/fesm2020/tree.mjs +25 -25
- package/fesm2020/tree.mjs.map +1 -1
- package/input/input.d.ts +6 -1
- package/list/_list-theme.scss +4 -3
- package/list/testing/list-item-harness-base.d.ts +2 -0
- package/list/testing/selection-list-harness.d.ts +0 -2
- package/menu/menu-content.d.ts +5 -1
- package/menu/menu-item.d.ts +3 -12
- package/menu/menu-trigger.d.ts +6 -2
- package/package.json +3 -2
- package/paginator/paginator.d.ts +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/progress-bar/progress-bar.d.ts +13 -3
- package/progress-spinner/progress-spinner.d.ts +20 -8
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-update/migrations/hammer-gestures-v9/import-manager.js +1 -2
- package/schematics/ng-update/migrations/hammer-gestures-v9/import-manager.mjs +1 -2
- package/schematics/tsconfig.json +1 -0
- package/sidenav/drawer.d.ts +16 -3
- package/slider/_slider-theme.scss +12 -10
- package/snack-bar/snack-bar.d.ts +18 -10
- package/table/_table-flex-styles.scss +0 -9
- package/tabs/public-api.d.ts +1 -1
- package/tabs/tab-group.d.ts +10 -1
- package/tabs/tab-nav-bar/tab-nav-bar.d.ts +29 -2
- package/tabs/tab.d.ts +11 -1
- package/tabs/tabs-module.d.ts +1 -1
- package/tabs/testing/tab-harness-filters.d.ts +3 -0
- package/tabs/testing/tab-nav-bar-harness.d.ts +3 -0
- package/tabs/testing/tab-nav-panel-harness.d.ts +23 -0
- 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
|
|
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 `
|
|
79
|
+
* @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`
|
|
80
|
+
* parameters to become required.
|
|
78
81
|
* @breaking-change 14.0.0
|
|
79
82
|
*/
|
|
80
|
-
|
|
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.
|
|
206
|
-
MatProgressSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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;
|
|
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
|
-
|
|
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.
|
|
258
|
-
MatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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;
|
|
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.
|
|
294
|
-
MatProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
295
|
-
MatProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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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"}
|
package/fesm2020/radio.mjs
CHANGED
|
@@ -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.
|
|
243
|
-
_MatRadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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.
|
|
269
|
-
MatRadioGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
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.
|
|
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.
|
|
501
|
-
_MatRadioButtonBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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.
|
|
544
|
-
MatRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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\"> </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.
|
|
596
|
-
MatRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
597
|
-
MatRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
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],
|