@angular/material 13.2.0-next.1 → 13.2.2
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/autocomplete/autocomplete-trigger.d.ts +1 -1
- package/button/button.d.ts +11 -5
- package/core/option/option.d.ts +11 -11
- package/core/theming/_palette.scss +1 -1
- package/core/theming/_theming.scss +15 -4
- package/datepicker/datepicker-base.d.ts +2 -0
- package/esm2020/autocomplete/autocomplete-module.mjs +4 -4
- package/esm2020/autocomplete/autocomplete-origin.mjs +6 -6
- package/esm2020/autocomplete/autocomplete-trigger.mjs +20 -18
- package/esm2020/autocomplete/autocomplete.mjs +6 -6
- package/esm2020/badge/badge-module.mjs +4 -4
- package/esm2020/badge/badge.mjs +3 -3
- package/esm2020/bottom-sheet/bottom-sheet-container.mjs +3 -3
- package/esm2020/bottom-sheet/bottom-sheet-module.mjs +4 -4
- package/esm2020/bottom-sheet/bottom-sheet.mjs +3 -3
- package/esm2020/button/button-module.mjs +4 -4
- package/esm2020/button/button.mjs +35 -15
- package/esm2020/button-toggle/button-toggle-module.mjs +4 -4
- package/esm2020/button-toggle/button-toggle.mjs +6 -6
- package/esm2020/card/card-module.mjs +4 -4
- package/esm2020/card/card.mjs +43 -43
- package/esm2020/checkbox/checkbox-module.mjs +8 -8
- package/esm2020/checkbox/checkbox-required-validator.mjs +3 -3
- package/esm2020/checkbox/checkbox.mjs +3 -3
- package/esm2020/chips/chip-input.mjs +3 -3
- package/esm2020/chips/chip-list.mjs +3 -3
- package/esm2020/chips/chip.mjs +13 -16
- package/esm2020/chips/chips-module.mjs +4 -4
- package/esm2020/core/common-behaviors/common-module.mjs +7 -11
- package/esm2020/core/datetime/index.mjs +8 -8
- package/esm2020/core/datetime/native-date-adapter.mjs +3 -3
- package/esm2020/core/error/error-options.mjs +6 -6
- package/esm2020/core/line/line.mjs +7 -7
- package/esm2020/core/option/index.mjs +4 -4
- package/esm2020/core/option/optgroup.mjs +6 -6
- package/esm2020/core/option/option.mjs +7 -7
- package/esm2020/core/ripple/index.mjs +4 -4
- package/esm2020/core/ripple/ripple.mjs +3 -3
- package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +4 -4
- package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
- 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 +9 -9
- package/esm2020/datepicker/date-range-input.mjs +3 -3
- package/esm2020/datepicker/date-range-picker.mjs +3 -3
- package/esm2020/datepicker/date-range-selection-strategy.mjs +3 -3
- package/esm2020/datepicker/date-selection-model.mjs +9 -9
- package/esm2020/datepicker/datepicker-actions.mjs +9 -9
- package/esm2020/datepicker/datepicker-base.mjs +9 -17
- package/esm2020/datepicker/datepicker-input-base.mjs +3 -3
- package/esm2020/datepicker/datepicker-input.mjs +3 -3
- package/esm2020/datepicker/datepicker-intl.mjs +3 -3
- package/esm2020/datepicker/datepicker-module.mjs +4 -4
- package/esm2020/datepicker/datepicker-toggle.mjs +6 -6
- package/esm2020/datepicker/datepicker.mjs +3 -3
- package/esm2020/datepicker/month-view.mjs +5 -5
- package/esm2020/datepicker/multi-year-view.mjs +3 -3
- package/esm2020/datepicker/testing/calendar-cell-harness.mjs +2 -2
- package/esm2020/datepicker/year-view.mjs +3 -3
- package/esm2020/dialog/dialog-container.mjs +6 -6
- package/esm2020/dialog/dialog-content-directives.mjs +12 -12
- package/esm2020/dialog/dialog-module.mjs +4 -4
- package/esm2020/dialog/dialog.mjs +6 -6
- package/esm2020/divider/divider-module.mjs +4 -4
- package/esm2020/divider/divider.mjs +3 -3
- package/esm2020/expansion/accordion.mjs +3 -3
- package/esm2020/expansion/expansion-module.mjs +4 -4
- package/esm2020/expansion/expansion-panel-content.mjs +3 -3
- package/esm2020/expansion/expansion-panel-header.mjs +11 -11
- package/esm2020/expansion/expansion-panel.mjs +6 -6
- package/esm2020/form-field/error.mjs +3 -3
- package/esm2020/form-field/form-field-control.mjs +3 -3
- package/esm2020/form-field/form-field-module.mjs +4 -4
- package/esm2020/form-field/form-field.mjs +17 -13
- package/esm2020/form-field/hint.mjs +3 -3
- package/esm2020/form-field/label.mjs +3 -3
- package/esm2020/form-field/placeholder.mjs +3 -3
- package/esm2020/form-field/prefix.mjs +3 -3
- package/esm2020/form-field/suffix.mjs +3 -3
- package/esm2020/grid-list/grid-list-module.mjs +4 -4
- package/esm2020/grid-list/grid-list.mjs +3 -3
- package/esm2020/grid-list/grid-tile.mjs +15 -15
- package/esm2020/icon/icon-module.mjs +4 -4
- package/esm2020/icon/icon-registry.mjs +3 -3
- package/esm2020/icon/icon.mjs +3 -3
- package/esm2020/icon/testing/fake-icon-registry.mjs +7 -7
- package/esm2020/input/input-module.mjs +4 -4
- package/esm2020/input/input.mjs +7 -4
- package/esm2020/list/list-module.mjs +4 -4
- package/esm2020/list/list.mjs +22 -22
- package/esm2020/list/selection-list.mjs +7 -7
- 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 +6 -6
- package/esm2020/menu/menu-item.mjs +3 -3
- package/esm2020/menu/menu-module.mjs +4 -4
- package/esm2020/menu/menu-trigger.mjs +15 -8
- package/esm2020/menu/menu.mjs +11 -7
- package/esm2020/paginator/paginator-intl.mjs +3 -3
- package/esm2020/paginator/paginator-module.mjs +4 -4
- package/esm2020/paginator/paginator.mjs +7 -7
- package/esm2020/progress-bar/progress-bar-module.mjs +4 -4
- package/esm2020/progress-bar/progress-bar.mjs +21 -11
- package/esm2020/progress-spinner/progress-spinner-module.mjs +4 -4
- package/esm2020/progress-spinner/progress-spinner.mjs +56 -18
- package/esm2020/radio/radio-module.mjs +4 -4
- package/esm2020/radio/radio.mjs +12 -12
- package/esm2020/select/select-module.mjs +4 -4
- package/esm2020/select/select.mjs +14 -11
- package/esm2020/sidenav/drawer.mjs +60 -14
- package/esm2020/sidenav/sidenav-module.mjs +4 -4
- package/esm2020/sidenav/sidenav.mjs +25 -14
- package/esm2020/slide-toggle/slide-toggle-module.mjs +8 -8
- package/esm2020/slide-toggle/slide-toggle-required-validator.mjs +3 -3
- package/esm2020/slide-toggle/slide-toggle.mjs +5 -5
- package/esm2020/slider/slider-module.mjs +4 -4
- package/esm2020/slider/slider.mjs +24 -9
- package/esm2020/snack-bar/simple-snack-bar.mjs +5 -5
- package/esm2020/snack-bar/snack-bar-container.mjs +3 -3
- package/esm2020/snack-bar/snack-bar-module.mjs +4 -4
- package/esm2020/snack-bar/snack-bar.mjs +28 -14
- package/esm2020/sort/sort-header-intl.mjs +3 -3
- package/esm2020/sort/sort-header.mjs +3 -3
- package/esm2020/sort/sort-module.mjs +4 -4
- package/esm2020/sort/sort.mjs +3 -3
- package/esm2020/stepper/step-content.mjs +3 -3
- package/esm2020/stepper/step-header.mjs +3 -3
- package/esm2020/stepper/step-label.mjs +3 -3
- package/esm2020/stepper/stepper-button.mjs +6 -6
- package/esm2020/stepper/stepper-icon.mjs +3 -3
- package/esm2020/stepper/stepper-intl.mjs +3 -3
- package/esm2020/stepper/stepper-module.mjs +4 -4
- package/esm2020/stepper/stepper.mjs +15 -15
- package/esm2020/table/cell.mjs +21 -21
- package/esm2020/table/row.mjs +21 -21
- package/esm2020/table/table-data-source.mjs +2 -1
- package/esm2020/table/table-module.mjs +4 -4
- package/esm2020/table/table.mjs +6 -6
- package/esm2020/table/text-column.mjs +3 -3
- package/esm2020/tabs/ink-bar.mjs +3 -3
- package/esm2020/tabs/paginated-tab-header.mjs +3 -3
- package/esm2020/tabs/tab-body.mjs +9 -9
- package/esm2020/tabs/tab-content.mjs +3 -3
- package/esm2020/tabs/tab-group.mjs +21 -9
- package/esm2020/tabs/tab-header.mjs +7 -7
- package/esm2020/tabs/tab-label-wrapper.mjs +3 -3
- package/esm2020/tabs/tab-label.mjs +3 -3
- package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +17 -17
- package/esm2020/tabs/tab.mjs +8 -4
- package/esm2020/tabs/tabs-module.mjs +4 -4
- package/esm2020/toolbar/toolbar-module.mjs +4 -4
- package/esm2020/toolbar/toolbar.mjs +6 -6
- package/esm2020/tooltip/tooltip-module.mjs +4 -4
- package/esm2020/tooltip/tooltip.mjs +23 -28
- package/esm2020/tree/node.mjs +9 -9
- package/esm2020/tree/outlet.mjs +3 -3
- package/esm2020/tree/padding.mjs +3 -3
- package/esm2020/tree/toggle.mjs +3 -3
- package/esm2020/tree/tree-module.mjs +4 -4
- package/esm2020/tree/tree.mjs +3 -3
- package/fesm2015/autocomplete.mjs +35 -33
- package/fesm2015/autocomplete.mjs.map +1 -1
- package/fesm2015/badge.mjs +7 -7
- package/fesm2015/bottom-sheet.mjs +10 -10
- package/fesm2015/button-toggle.mjs +10 -10
- package/fesm2015/button.mjs +37 -17
- package/fesm2015/button.mjs.map +1 -1
- package/fesm2015/card.mjs +47 -47
- package/fesm2015/checkbox.mjs +14 -14
- package/fesm2015/chips.mjs +22 -25
- package/fesm2015/chips.mjs.map +1 -1
- package/fesm2015/core.mjs +63 -68
- 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 +88 -96
- package/fesm2015/datepicker.mjs.map +1 -1
- package/fesm2015/dialog.mjs +28 -28
- package/fesm2015/divider.mjs +7 -7
- 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/icon/testing.mjs +7 -7
- package/fesm2015/icon.mjs +10 -10
- 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 +38 -27
- 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/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 +27 -12
- 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/stepper.mjs +40 -40
- package/fesm2015/table.mjs +56 -55
- package/fesm2015/table.mjs.map +1 -1
- package/fesm2015/tabs.mjs +78 -62
- package/fesm2015/tabs.mjs.map +1 -1
- package/fesm2015/toolbar.mjs +10 -10
- package/fesm2015/tooltip.mjs +26 -31
- package/fesm2015/tooltip.mjs.map +1 -1
- package/fesm2015/tree.mjs +25 -25
- package/fesm2020/autocomplete.mjs +35 -33
- package/fesm2020/autocomplete.mjs.map +1 -1
- package/fesm2020/badge.mjs +7 -7
- package/fesm2020/bottom-sheet.mjs +10 -10
- package/fesm2020/button-toggle.mjs +10 -10
- package/fesm2020/button.mjs +37 -17
- package/fesm2020/button.mjs.map +1 -1
- package/fesm2020/card.mjs +47 -47
- package/fesm2020/checkbox.mjs +14 -14
- package/fesm2020/chips.mjs +22 -25
- package/fesm2020/chips.mjs.map +1 -1
- package/fesm2020/core.mjs +63 -68
- 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 +88 -96
- package/fesm2020/datepicker.mjs.map +1 -1
- package/fesm2020/dialog.mjs +28 -28
- package/fesm2020/divider.mjs +7 -7
- 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/icon/testing.mjs +7 -7
- package/fesm2020/icon.mjs +10 -10
- 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 +38 -27
- 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/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 +27 -12
- 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/stepper.mjs +40 -40
- package/fesm2020/table.mjs +56 -55
- package/fesm2020/table.mjs.map +1 -1
- package/fesm2020/tabs.mjs +78 -62
- package/fesm2020/tabs.mjs.map +1 -1
- package/fesm2020/toolbar.mjs +10 -10
- package/fesm2020/tooltip.mjs +26 -31
- package/fesm2020/tooltip.mjs.map +1 -1
- package/fesm2020/tree.mjs +25 -25
- 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.d.ts +1 -1
- package/package.json +2 -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-add/schema.json +17 -5
- package/schematics/ng-generate/address-form/schema.json +1 -1
- package/schematics/ng-generate/dashboard/schema.json +1 -1
- package/schematics/ng-generate/navigation/schema.json +1 -1
- package/schematics/ng-generate/table/schema.json +1 -1
- package/schematics/ng-generate/tree/schema.json +1 -1
- package/schematics/tsconfig.json +2 -4
- package/sidenav/drawer.d.ts +16 -3
- package/slider/_slider-theme.scss +12 -10
- package/snack-bar/snack-bar.d.ts +18 -10
- package/tabs/_tabs-common.scss +9 -0
- package/tabs/tab-group.d.ts +10 -1
- package/tabs/tab.d.ts +11 -1
- 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
9
|
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
|
|
10
|
+
import { Subscription } from 'rxjs';
|
|
11
|
+
import * as i2 from '@angular/cdk/scrolling';
|
|
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,16 @@ 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
|
+
var _a;
|
|
189
|
+
// Safari has an issue where the `transform-origin` doesn't work as expected when the page
|
|
190
|
+
// has a different zoom level from the default. The problem appears to be that a zoom
|
|
191
|
+
// is applied on the `svg` node itself. We can work around it by calculating the origin
|
|
192
|
+
// based on the zoom level. On all other browsers the `currentScale` appears to always be 1.
|
|
193
|
+
const scale = ((_a = svg.currentScale) !== null && _a !== void 0 ? _a : 1) * 50;
|
|
194
|
+
return `${scale}% ${scale}%`;
|
|
195
|
+
}
|
|
164
196
|
/** Dynamically generates a style tag containing the correct animation for this diameter. */
|
|
165
197
|
_attachStyleNode() {
|
|
166
198
|
const styleRoot = this._styleRoot;
|
|
@@ -202,9 +234,9 @@ class MatProgressSpinner extends _MatProgressSpinnerBase {
|
|
|
202
234
|
* than the document head.
|
|
203
235
|
*/
|
|
204
236
|
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.
|
|
237
|
+
MatProgressSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatProgressSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }, { token: i0.ChangeDetectorRef }, { token: i2.ViewportRuler }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
238
|
+
MatProgressSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MatProgressSpinner, selector: "mat-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", mode: "mode", value: "value" }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter", "attr.aria-valuemin": "mode === \"determinate\" ? 0 : null", "attr.aria-valuemax": "mode === \"determinate\" ? 100 : null", "attr.aria-valuenow": "mode === \"determinate\" ? value : null", "attr.mode": "mode" }, classAttribute: "mat-progress-spinner" }, exportAs: ["matProgressSpinner"], usesInheritance: true, ngImport: i0, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #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 });
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatProgressSpinner, decorators: [{
|
|
208
240
|
type: Component,
|
|
209
241
|
args: [{ selector: 'mat-progress-spinner', exportAs: 'matProgressSpinner', host: {
|
|
210
242
|
'role': 'progressbar',
|
|
@@ -219,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
219
251
|
'[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
|
|
220
252
|
'[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
|
|
221
253
|
'[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;
|
|
254
|
+
}, 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
255
|
}], ctorParameters: function () {
|
|
224
256
|
return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
|
|
225
257
|
type: Optional
|
|
@@ -234,7 +266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
234
266
|
}] }, { type: undefined, decorators: [{
|
|
235
267
|
type: Inject,
|
|
236
268
|
args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS]
|
|
237
|
-
}] }];
|
|
269
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: i2.ViewportRuler }, { type: i0.NgZone }];
|
|
238
270
|
}, propDecorators: { diameter: [{
|
|
239
271
|
type: Input
|
|
240
272
|
}], strokeWidth: [{
|
|
@@ -251,14 +283,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
251
283
|
* indeterminate `<mat-progress-spinner>` instance.
|
|
252
284
|
*/
|
|
253
285
|
class MatSpinner extends MatProgressSpinner {
|
|
254
|
-
constructor(elementRef, platform, document, animationMode, defaults
|
|
255
|
-
|
|
286
|
+
constructor(elementRef, platform, document, animationMode, defaults,
|
|
287
|
+
/**
|
|
288
|
+
* @deprecated `changeDetectorRef`, `viewportRuler` and `ngZone`
|
|
289
|
+
* parameters to become required.
|
|
290
|
+
* @breaking-change 14.0.0
|
|
291
|
+
*/
|
|
292
|
+
changeDetectorRef, viewportRuler, ngZone) {
|
|
293
|
+
super(elementRef, platform, document, animationMode, defaults, changeDetectorRef, viewportRuler, ngZone);
|
|
256
294
|
this.mode = 'indeterminate';
|
|
257
295
|
}
|
|
258
296
|
}
|
|
259
|
-
MatSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
260
|
-
MatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
297
|
+
MatSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatSpinner, deps: [{ token: i0.ElementRef }, { token: i1.Platform }, { token: DOCUMENT, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS }, { token: i0.ChangeDetectorRef }, { token: i2.ViewportRuler }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
298
|
+
MatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MatSpinner, selector: "mat-spinner", inputs: { color: "color" }, host: { attributes: { "role": "progressbar", "mode": "indeterminate" }, properties: { "class._mat-animation-noopable": "_noopAnimations", "style.width.px": "diameter", "style.height.px": "diameter" }, classAttribute: "mat-spinner mat-progress-spinner" }, usesInheritance: true, ngImport: i0, template: "<!--\n preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's\n center. The center of the circle will remain at the center of the mat-progress-spinner\n element containing the SVG.\n-->\n<!--\n All children need to be hidden for screen readers in order to support ChromeVox.\n More context in the issue: https://github.com/angular/components/issues/22165.\n-->\n<svg\n [style.width.px]=\"diameter\"\n [style.height.px]=\"diameter\"\n [attr.viewBox]=\"_getViewBox()\"\n preserveAspectRatio=\"xMidYMid meet\"\n focusable=\"false\"\n [ngSwitch]=\"mode === 'indeterminate'\"\n aria-hidden=\"true\"\n #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 });
|
|
299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatSpinner, decorators: [{
|
|
262
300
|
type: Component,
|
|
263
301
|
args: [{ selector: 'mat-spinner', host: {
|
|
264
302
|
'role': 'progressbar',
|
|
@@ -267,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
267
305
|
'[class._mat-animation-noopable]': `_noopAnimations`,
|
|
268
306
|
'[style.width.px]': 'diameter',
|
|
269
307
|
'[style.height.px]': 'diameter',
|
|
270
|
-
}, 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;
|
|
308
|
+
}, 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"] }]
|
|
271
309
|
}], ctorParameters: function () {
|
|
272
310
|
return [{ type: i0.ElementRef }, { type: i1.Platform }, { type: undefined, decorators: [{
|
|
273
311
|
type: Optional
|
|
@@ -282,7 +320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
282
320
|
}] }, { type: undefined, decorators: [{
|
|
283
321
|
type: Inject,
|
|
284
322
|
args: [MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS]
|
|
285
|
-
}] }];
|
|
323
|
+
}] }, { type: i0.ChangeDetectorRef }, { type: i2.ViewportRuler }, { type: i0.NgZone }];
|
|
286
324
|
} });
|
|
287
325
|
|
|
288
326
|
/**
|
|
@@ -294,10 +332,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
294
332
|
*/
|
|
295
333
|
class MatProgressSpinnerModule {
|
|
296
334
|
}
|
|
297
|
-
MatProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
298
|
-
MatProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
299
|
-
MatProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
335
|
+
MatProgressSpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatProgressSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
336
|
+
MatProgressSpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatProgressSpinnerModule, declarations: [MatProgressSpinner, MatSpinner], imports: [MatCommonModule, CommonModule], exports: [MatProgressSpinner, MatSpinner, MatCommonModule] });
|
|
337
|
+
MatProgressSpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatProgressSpinnerModule, imports: [[MatCommonModule, CommonModule], MatCommonModule] });
|
|
338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatProgressSpinnerModule, decorators: [{
|
|
301
339
|
type: NgModule,
|
|
302
340
|
args: [{
|
|
303
341
|
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/fesm2015/radio.mjs
CHANGED
|
@@ -232,9 +232,9 @@ class _MatRadioGroupBase {
|
|
|
232
232
|
this._changeDetector.markForCheck();
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
|
-
_MatRadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
236
|
-
_MatRadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
235
|
+
_MatRadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _MatRadioGroupBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
236
|
+
_MatRadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: _MatRadioGroupBase, inputs: { color: "color", name: "name", labelPosition: "labelPosition", value: "value", selected: "selected", disabled: "disabled", required: "required" }, outputs: { change: "change" }, ngImport: i0 });
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _MatRadioGroupBase, decorators: [{
|
|
238
238
|
type: Directive
|
|
239
239
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
|
|
240
240
|
type: Output
|
|
@@ -258,12 +258,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
258
258
|
*/
|
|
259
259
|
class MatRadioGroup extends _MatRadioGroupBase {
|
|
260
260
|
}
|
|
261
|
-
MatRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
262
|
-
MatRadioGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
261
|
+
MatRadioGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
262
|
+
MatRadioGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: MatRadioGroup, selector: "mat-radio-group", host: { attributes: { "role": "radiogroup" }, classAttribute: "mat-radio-group" }, providers: [
|
|
263
263
|
MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
|
|
264
264
|
{ provide: MAT_RADIO_GROUP, useExisting: MatRadioGroup },
|
|
265
265
|
], queries: [{ propertyName: "_radios", predicate: i0.forwardRef(function () { return MatRadioButton; }), descendants: true }], exportAs: ["matRadioGroup"], usesInheritance: true, ngImport: i0 });
|
|
266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioGroup, decorators: [{
|
|
267
267
|
type: Directive,
|
|
268
268
|
args: [{
|
|
269
269
|
selector: 'mat-radio-group',
|
|
@@ -490,9 +490,9 @@ class _MatRadioButtonBase extends _MatRadioButtonMixinBase {
|
|
|
490
490
|
}
|
|
491
491
|
}
|
|
492
492
|
}
|
|
493
|
-
_MatRadioButtonBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
494
|
-
_MatRadioButtonBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.
|
|
495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
493
|
+
_MatRadioButtonBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _MatRadioButtonBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
|
|
494
|
+
_MatRadioButtonBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: _MatRadioButtonBase, inputs: { id: "id", name: "name", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], checked: "checked", value: "value", labelPosition: "labelPosition", disabled: "disabled", required: "required", color: "color" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _MatRadioButtonBase, decorators: [{
|
|
496
496
|
type: Directive
|
|
497
497
|
}], 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: [{
|
|
498
498
|
type: Input
|
|
@@ -533,9 +533,9 @@ class MatRadioButton extends _MatRadioButtonBase {
|
|
|
533
533
|
super(radioGroup, elementRef, changeDetector, focusMonitor, radioDispatcher, animationMode, providerOverride, tabIndex);
|
|
534
534
|
}
|
|
535
535
|
}
|
|
536
|
-
MatRadioButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
537
|
-
MatRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
|
|
538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
536
|
+
MatRadioButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioButton, deps: [{ token: MAT_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RADIO_DEFAULT_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
+
MatRadioButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MatRadioButton, selector: "mat-radio-button", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.mat-radio-checked": "checked", "class.mat-radio-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "mat-radio-button" }, exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<!-- TODO(jelbourn): render the radio on either side of the content -->\n<!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->\n<label [attr.for]=\"inputId\" class=\"mat-radio-label\" #label>\n <!-- The actual 'radio' part of the control. -->\n <span class=\"mat-radio-container\">\n <span class=\"mat-radio-outer-circle\"></span>\n <span class=\"mat-radio-inner-circle\"></span>\n <input #input class=\"mat-radio-input cdk-visually-hidden\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n (change)=\"_onInputInteraction($event)\"\n (click)=\"_onInputClick($event)\">\n\n <!-- The ripple comes after the input so that we can target it with a CSS\n sibling selector when the input is focused. -->\n <span mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"label\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\"\n [matRippleRadius]=\"20\"\n [matRippleAnimation]=\"{enterDuration: _noopAnimations ? 0 : 150}\">\n\n <span class=\"mat-ripple-element mat-radio-persistent-ripple\"></span>\n </span>\n </span>\n\n <!-- The label content for radio control. -->\n <span class=\"mat-radio-label-content\" [class.mat-radio-label-before]=\"labelPosition == 'before'\">\n <!-- Add an invisible span so JAWS can read the label -->\n <span style=\"display:none\"> </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 });
|
|
538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioButton, decorators: [{
|
|
539
539
|
type: Component,
|
|
540
540
|
args: [{ selector: 'mat-radio-button', inputs: ['disableRipple', 'tabIndex'], encapsulation: ViewEncapsulation.None, exportAs: 'matRadioButton', host: {
|
|
541
541
|
'class': 'mat-radio-button',
|
|
@@ -587,10 +587,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImpor
|
|
|
587
587
|
*/
|
|
588
588
|
class MatRadioModule {
|
|
589
589
|
}
|
|
590
|
-
MatRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.
|
|
591
|
-
MatRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
592
|
-
MatRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
593
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.
|
|
590
|
+
MatRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
591
|
+
MatRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioModule, declarations: [MatRadioGroup, MatRadioButton], imports: [MatRippleModule, MatCommonModule], exports: [MatRadioGroup, MatRadioButton, MatCommonModule] });
|
|
592
|
+
MatRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioModule, imports: [[MatRippleModule, MatCommonModule], MatCommonModule] });
|
|
593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatRadioModule, decorators: [{
|
|
594
594
|
type: NgModule,
|
|
595
595
|
args: [{
|
|
596
596
|
imports: [MatRippleModule, MatCommonModule],
|