@angular/material 19.0.0-next.8 → 19.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_index.scss +1 -2
- package/autocomplete/_autocomplete-theme.scss +37 -24
- package/autocomplete/index.d.ts +5 -6
- package/badge/_badge-theme.scss +38 -24
- package/bottom-sheet/_bottom-sheet-theme.scss +32 -20
- package/button/_button-theme.scss +229 -105
- package/button/_fab-theme.scss +95 -44
- package/button/_icon-button-theme.scss +38 -25
- package/button/index.d.ts +3 -3
- package/button-toggle/_button-toggle-theme.scss +62 -37
- package/card/_card-theme.scss +79 -38
- package/card/index.d.ts +2 -3
- package/checkbox/_checkbox-theme.scss +16 -10
- package/chips/_chips-theme.scss +64 -30
- package/core/_core-theme.scss +55 -37
- package/core/_core.scss +3 -6
- package/core/option/_optgroup-theme.scss +29 -18
- package/core/option/_option-theme.scss +34 -21
- package/core/ripple/_ripple-theme.scss +33 -21
- package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +49 -23
- package/core/theming/_config-validation.scss +4 -4
- package/core/theming/_definition.scss +12 -2
- package/core/tokens/_m3-system.scss +86 -42
- package/core/tokens/_token-utils.scss +91 -34
- package/core/tokens/m2/mat/_badge.scss +12 -3
- package/core/tokens/m2/mdc/_radio.scss +1 -1
- package/core/tokens/m3/definitions/_md-comp-elevated-card.scss +1 -1
- package/core/tokens/m3/mat/_badge.scss +6 -3
- package/datepicker/_datepicker-theme.scss +53 -32
- package/datepicker/index.d.ts +33 -34
- package/dialog/_dialog-theme.scss +46 -23
- package/divider/_divider-theme.scss +28 -17
- package/expansion/_expansion-theme.scss +36 -24
- package/fesm2022/autocomplete/testing.mjs +2 -5
- package/fesm2022/autocomplete/testing.mjs.map +1 -1
- package/fesm2022/autocomplete.mjs +225 -148
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge/testing.mjs +2 -5
- package/fesm2022/badge/testing.mjs.map +1 -1
- package/fesm2022/badge.mjs +45 -35
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet/testing.mjs +1 -1
- package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +80 -58
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button/testing.mjs +2 -2
- package/fesm2022/button/testing.mjs.map +1 -1
- package/fesm2022/button-toggle/testing.mjs +4 -7
- package/fesm2022/button-toggle/testing.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +82 -45
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +106 -79
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card/testing.mjs +3 -6
- package/fesm2022/card/testing.mjs.map +1 -1
- package/fesm2022/card.mjs +56 -69
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox/testing.mjs +4 -7
- package/fesm2022/checkbox/testing.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +104 -62
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips/testing.mjs +11 -14
- package/fesm2022/chips/testing.mjs.map +1 -1
- package/fesm2022/chips.mjs +322 -276
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core/testing.mjs +5 -11
- package/fesm2022/core/testing.mjs.map +1 -1
- package/fesm2022/core.mjs +242 -187
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker/testing.mjs +13 -22
- package/fesm2022/datepicker/testing.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +827 -582
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog/testing.mjs +15 -10
- package/fesm2022/dialog/testing.mjs.map +1 -1
- package/fesm2022/dialog.mjs +221 -156
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider/testing.mjs +1 -1
- package/fesm2022/divider/testing.mjs.map +1 -1
- package/fesm2022/divider.mjs +10 -12
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion/testing.mjs +7 -10
- package/fesm2022/expansion/testing.mjs.map +1 -1
- package/fesm2022/expansion.mjs +86 -80
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field/testing.mjs +12 -15
- package/fesm2022/form-field/testing.mjs.map +1 -1
- package/fesm2022/form-field.mjs +179 -132
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list/testing.mjs +11 -17
- package/fesm2022/grid-list/testing.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +75 -56
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +8 -8
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +66 -46
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input/testing.mjs +3 -3
- package/fesm2022/input/testing.mjs.map +1 -1
- package/fesm2022/input.mjs +103 -72
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list/testing.mjs +21 -38
- package/fesm2022/list/testing.mjs.map +1 -1
- package/fesm2022/list.mjs +197 -195
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu/testing.mjs +3 -6
- package/fesm2022/menu/testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +178 -127
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator/testing.mjs +10 -13
- package/fesm2022/paginator/testing.mjs.map +1 -1
- package/fesm2022/paginator.mjs +83 -58
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar/testing.mjs +1 -1
- package/fesm2022/progress-bar/testing.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +36 -35
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner/testing.mjs +1 -1
- package/fesm2022/progress-spinner/testing.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +28 -14
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio/testing.mjs +6 -12
- package/fesm2022/radio/testing.mjs.map +1 -1
- package/fesm2022/radio.mjs +123 -87
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select/testing.mjs +6 -9
- package/fesm2022/select/testing.mjs.map +1 -1
- package/fesm2022/select.mjs +219 -182
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav/testing.mjs +6 -6
- package/fesm2022/sidenav/testing.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +136 -125
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle/testing.mjs +3 -6
- package/fesm2022/slide-toggle/testing.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +77 -47
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider/testing.mjs +2 -2
- package/fesm2022/slider/testing.mjs.map +1 -1
- package/fesm2022/slider.mjs +262 -194
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar/testing.mjs +4 -7
- package/fesm2022/snack-bar/testing.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +143 -111
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort/testing.mjs +3 -6
- package/fesm2022/sort/testing.mjs.map +1 -1
- package/fesm2022/sort.mjs +94 -74
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper/testing.mjs +4 -4
- package/fesm2022/stepper/testing.mjs.map +1 -1
- package/fesm2022/stepper.mjs +146 -113
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table/testing.mjs +13 -25
- package/fesm2022/table/testing.mjs.map +1 -1
- package/fesm2022/table.mjs +183 -194
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs/testing.mjs +5 -5
- package/fesm2022/tabs/testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +329 -251
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker/testing.mjs +7 -16
- package/fesm2022/timepicker/testing.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +160 -155
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar/testing.mjs +2 -5
- package/fesm2022/toolbar/testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +26 -17
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip/testing.mjs +6 -9
- package/fesm2022/tooltip/testing.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +97 -74
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree/testing.mjs +3 -6
- package/fesm2022/tree/testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +57 -61
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +114 -61
- package/form-field/index.d.ts +9 -10
- package/grid-list/_grid-list-theme.scss +25 -15
- package/icon/_icon-theme.scss +22 -14
- package/input/_input-theme.scss +18 -11
- package/list/_list-theme.scss +89 -47
- package/list/index.d.ts +20 -21
- package/menu/_menu-theme.scss +33 -21
- package/menu/index.d.ts +8 -9
- package/package.json +2 -2
- package/paginator/_paginator-theme.scss +39 -23
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +20 -16
- package/progress-spinner/_progress-spinner-theme.scss +41 -25
- package/progress-spinner/index.d.ts +3 -4
- package/radio/_radio-theme.scss +60 -32
- package/radio/index.d.ts +2 -3
- package/schematics/collection.json +3 -3
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-add/theming/create-custom-theme.js +1 -6
- package/schematics/ng-add/theming/create-custom-theme.mjs +1 -6
- package/schematics/ng-generate/{m3-theme → theme-color}/index_bundled.js +480 -288
- package/schematics/ng-generate/theme-color/index_bundled.js.map +7 -0
- package/schematics/ng-generate/{m3-theme → theme-color}/schema.json +7 -13
- package/schematics/ng-update/index_bundled.js +6 -1
- package/schematics/ng-update/index_bundled.js.map +1 -1
- package/select/_select-theme.scss +38 -25
- package/select/index.d.ts +6 -7
- package/sidenav/_sidenav-theme.scss +28 -17
- package/slide-toggle/_slide-toggle-theme.scss +52 -28
- package/slider/_slider-theme.scss +62 -38
- package/snack-bar/_snack-bar-theme.scss +29 -17
- package/sort/_sort-theme.scss +33 -21
- package/stepper/_stepper-theme.scss +40 -27
- package/stepper/index.d.ts +14 -15
- package/table/_table-theme.scss +36 -23
- package/tabs/_tabs-theme.scss +97 -50
- package/tabs/index.d.ts +2 -2
- package/timepicker/_timepicker-theme.scss +37 -24
- package/toolbar/_toolbar-theme.scss +35 -22
- package/tooltip/_tooltip-theme.scss +18 -15
- package/tooltip/index.d.ts +5 -6
- package/tree/_tree-theme.scss +33 -21
- package/schematics/ng-generate/m3-theme/index_bundled.js.map +0 -7
package/fesm2022/stepper.mjs
CHANGED
|
@@ -1,48 +1,45 @@
|
|
|
1
1
|
import { TemplatePortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
2
2
|
import { CdkStepLabel, CdkStepHeader, CdkStep, CdkStepper, CdkStepperNext, CdkStepperPrevious, CdkStepperModule } from '@angular/cdk/stepper';
|
|
3
|
-
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
4
3
|
import * as i0 from '@angular/core';
|
|
5
4
|
import { Directive, Injectable, Optional, SkipSelf, inject, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, TemplateRef, ViewContainerRef, ContentChild, QueryList, EventEmitter, ElementRef, ViewChildren, ContentChildren, Output, NgModule } from '@angular/core';
|
|
6
5
|
import { _StructuralStylesLoader, MatRipple, ErrorStateMatcher, MatCommonModule, MatRippleModule } from '@angular/material/core';
|
|
7
6
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
8
7
|
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
9
8
|
import { Subject, Subscription } from 'rxjs';
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
9
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
10
|
+
import { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';
|
|
11
|
+
import { switchMap, map, startWith, takeUntil } from 'rxjs/operators';
|
|
12
12
|
import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
|
13
13
|
import { Platform } from '@angular/cdk/platform';
|
|
14
14
|
|
|
15
15
|
class MatStepLabel extends CdkStepLabel {
|
|
16
|
-
static
|
|
17
|
-
static
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
17
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatStepLabel, isStandalone: true, selector: "[matStepLabel]", usesInheritance: true, ngImport: i0 });
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepLabel, decorators: [{
|
|
20
20
|
type: Directive,
|
|
21
21
|
args: [{
|
|
22
22
|
selector: '[matStepLabel]',
|
|
23
|
-
standalone: true,
|
|
24
23
|
}]
|
|
25
24
|
}] });
|
|
26
25
|
|
|
27
26
|
/** Stepper data that is required for internationalization. */
|
|
28
27
|
class MatStepperIntl {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.8", ngImport: i0, type: MatStepperIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
43
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0-next.8", ngImport: i0, type: MatStepperIntl, providedIn: 'root' }); }
|
|
28
|
+
/**
|
|
29
|
+
* Stream that emits whenever the labels here are changed. Use this to notify
|
|
30
|
+
* components if the labels have changed after initialization.
|
|
31
|
+
*/
|
|
32
|
+
changes = new Subject();
|
|
33
|
+
/** Label that is rendered below optional steps. */
|
|
34
|
+
optionalLabel = 'Optional';
|
|
35
|
+
/** Label that is used to indicate step as completed to screen readers. */
|
|
36
|
+
completedLabel = 'Completed';
|
|
37
|
+
/** Label that is used to indicate step as editable to screen readers. */
|
|
38
|
+
editableLabel = 'Editable';
|
|
39
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
40
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperIntl, providedIn: 'root' });
|
|
44
41
|
}
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperIntl, decorators: [{
|
|
46
43
|
type: Injectable,
|
|
47
44
|
args: [{ providedIn: 'root' }]
|
|
48
45
|
}] });
|
|
@@ -58,11 +55,39 @@ const MAT_STEPPER_INTL_PROVIDER = {
|
|
|
58
55
|
};
|
|
59
56
|
|
|
60
57
|
class MatStepHeader extends CdkStepHeader {
|
|
58
|
+
_intl = inject(MatStepperIntl);
|
|
59
|
+
_focusMonitor = inject(FocusMonitor);
|
|
60
|
+
_intlSubscription;
|
|
61
|
+
/** State of the given step. */
|
|
62
|
+
state;
|
|
63
|
+
/** Label of the given step. */
|
|
64
|
+
label;
|
|
65
|
+
/** Error message to display when there's an error. */
|
|
66
|
+
errorMessage;
|
|
67
|
+
/** Overrides for the header icons, passed in via the stepper. */
|
|
68
|
+
iconOverrides;
|
|
69
|
+
/** Index of the given step. */
|
|
70
|
+
index;
|
|
71
|
+
/** Whether the given step is selected. */
|
|
72
|
+
selected;
|
|
73
|
+
/** Whether the given step label is active. */
|
|
74
|
+
active;
|
|
75
|
+
/** Whether the given step is optional. */
|
|
76
|
+
optional;
|
|
77
|
+
/** Whether the ripple should be disabled. */
|
|
78
|
+
disableRipple;
|
|
79
|
+
/**
|
|
80
|
+
* Theme color of the step header. This API is supported in M2 themes only, it
|
|
81
|
+
* has no effect in M3 themes.
|
|
82
|
+
*
|
|
83
|
+
* For information on applying color variants in M3, see
|
|
84
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
85
|
+
*/
|
|
86
|
+
color;
|
|
61
87
|
constructor() {
|
|
62
88
|
super();
|
|
63
|
-
this._intl = inject(MatStepperIntl);
|
|
64
|
-
this._focusMonitor = inject(FocusMonitor);
|
|
65
89
|
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
|
|
90
|
+
inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
|
|
66
91
|
const changeDetectorRef = inject(ChangeDetectorRef);
|
|
67
92
|
this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck());
|
|
68
93
|
}
|
|
@@ -114,16 +139,16 @@ class MatStepHeader extends CdkStepHeader {
|
|
|
114
139
|
}
|
|
115
140
|
return state;
|
|
116
141
|
}
|
|
117
|
-
static
|
|
118
|
-
static
|
|
142
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
143
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: MatStepHeader, isStandalone: true, selector: "mat-step-header", inputs: { state: "state", label: "label", errorMessage: "errorMessage", iconOverrides: "iconOverrides", index: "index", selected: "selected", active: "active", optional: "optional", disableRipple: "disableRipple", color: "color" }, host: { attributes: { "role": "tab" }, properties: { "class": "\"mat-\" + (color || \"primary\")" }, classAttribute: "mat-step-header" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mat-step-header-ripple mat-focus-indicator\" matRipple\n [matRippleTrigger]=\"_getHostElement()\"\n [matRippleDisabled]=\"disableRipple\"></div>\n\n<div class=\"mat-step-icon-state-{{state}} mat-step-icon\" [class.mat-step-icon-selected]=\"selected\">\n <div class=\"mat-step-icon-content\">\n @if (iconOverrides && iconOverrides[state]) {\n <ng-container\n [ngTemplateOutlet]=\"iconOverrides[state]\"\n [ngTemplateOutletContext]=\"_getIconContext()\"></ng-container>\n } @else {\n @switch (state) {\n @case ('number') {\n <span aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</span>\n }\n\n @default {\n @if (state === 'done') {\n <span class=\"cdk-visually-hidden\">{{_intl.completedLabel}}</span>\n } @else if (state === 'edit') {\n <span class=\"cdk-visually-hidden\">{{_intl.editableLabel}}</span>\n }\n\n <mat-icon aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</mat-icon>\n }\n }\n }\n </div>\n</div>\n<div class=\"mat-step-label\"\n [class.mat-step-label-active]=\"active\"\n [class.mat-step-label-selected]=\"selected\"\n [class.mat-step-label-error]=\"state == 'error'\">\n @if (_templateLabel(); as templateLabel) {\n <!-- If there is a label template, use it. -->\n <div class=\"mat-step-text-label\">\n <ng-container [ngTemplateOutlet]=\"templateLabel.template\"></ng-container>\n </div>\n } @else if (_stringLabel()) {\n <!-- If there is no label template, fall back to the text label. -->\n <div class=\"mat-step-text-label\">{{label}}</div>\n }\n\n @if (optional && state != 'error') {\n <div class=\"mat-step-optional\">{{_intl.optionalLabel}}</div>\n }\n\n @if (state === 'error') {\n <div class=\"mat-step-sub-label-error\">{{errorMessage}}</div>\n }\n</div>\n\n", styles: [".mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-step-header:focus .mat-focus-indicator::before{content:\"\"}.mat-step-header:hover[aria-disabled=true]{cursor:default}.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium))}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused{background-color:var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium))}@media(hover: none){.mat-step-header:hover{background:none}}@media(forced-colors: active){.mat-step-header{outline:solid 1px}.mat-step-header[aria-selected=true] .mat-step-label{text-decoration:underline}.mat-step-header[aria-disabled=true]{outline-color:GrayText}.mat-step-header[aria-disabled=true] .mat-step-label,.mat-step-header[aria-disabled=true] .mat-step-icon,.mat-step-header[aria-disabled=true] .mat-step-optional{color:GrayText}}.mat-step-optional{font-size:12px;color:var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-sub-label-error{font-size:12px;font-weight:normal}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;color:var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface));background-color:var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant))}.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error{background-color:var(--mat-stepper-header-error-state-icon-background-color, transparent);color:var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error))}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-active{color:var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-error{color:var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error));font-size:var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size))}.mat-step-label.mat-step-label-selected{font-size:var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight))}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-step-icon-selected{background-color:var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-done{background-color:var(--mat-stepper-header-done-state-icon-background-color);color:var(--mat-stepper-header-done-state-icon-foreground-color)}.mat-step-icon-state-edit{background-color:var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary))}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
119
144
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepHeader, decorators: [{
|
|
121
146
|
type: Component,
|
|
122
147
|
args: [{ selector: 'mat-step-header', host: {
|
|
123
148
|
'class': 'mat-step-header',
|
|
124
149
|
'[class]': '"mat-" + (color || "primary")',
|
|
125
150
|
'role': 'tab',
|
|
126
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
151
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, NgTemplateOutlet, MatIcon], template: "<div class=\"mat-step-header-ripple mat-focus-indicator\" matRipple\n [matRippleTrigger]=\"_getHostElement()\"\n [matRippleDisabled]=\"disableRipple\"></div>\n\n<div class=\"mat-step-icon-state-{{state}} mat-step-icon\" [class.mat-step-icon-selected]=\"selected\">\n <div class=\"mat-step-icon-content\">\n @if (iconOverrides && iconOverrides[state]) {\n <ng-container\n [ngTemplateOutlet]=\"iconOverrides[state]\"\n [ngTemplateOutletContext]=\"_getIconContext()\"></ng-container>\n } @else {\n @switch (state) {\n @case ('number') {\n <span aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</span>\n }\n\n @default {\n @if (state === 'done') {\n <span class=\"cdk-visually-hidden\">{{_intl.completedLabel}}</span>\n } @else if (state === 'edit') {\n <span class=\"cdk-visually-hidden\">{{_intl.editableLabel}}</span>\n }\n\n <mat-icon aria-hidden=\"true\">{{_getDefaultTextForState(state)}}</mat-icon>\n }\n }\n }\n </div>\n</div>\n<div class=\"mat-step-label\"\n [class.mat-step-label-active]=\"active\"\n [class.mat-step-label-selected]=\"selected\"\n [class.mat-step-label-error]=\"state == 'error'\">\n @if (_templateLabel(); as templateLabel) {\n <!-- If there is a label template, use it. -->\n <div class=\"mat-step-text-label\">\n <ng-container [ngTemplateOutlet]=\"templateLabel.template\"></ng-container>\n </div>\n } @else if (_stringLabel()) {\n <!-- If there is no label template, fall back to the text label. -->\n <div class=\"mat-step-text-label\">{{label}}</div>\n }\n\n @if (optional && state != 'error') {\n <div class=\"mat-step-optional\">{{_intl.optionalLabel}}</div>\n }\n\n @if (state === 'error') {\n <div class=\"mat-step-sub-label-error\">{{errorMessage}}</div>\n }\n</div>\n\n", styles: [".mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-step-header:focus .mat-focus-indicator::before{content:\"\"}.mat-step-header:hover[aria-disabled=true]{cursor:default}.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium))}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused{background-color:var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium))}@media(hover: none){.mat-step-header:hover{background:none}}@media(forced-colors: active){.mat-step-header{outline:solid 1px}.mat-step-header[aria-selected=true] .mat-step-label{text-decoration:underline}.mat-step-header[aria-disabled=true]{outline-color:GrayText}.mat-step-header[aria-disabled=true] .mat-step-label,.mat-step-header[aria-disabled=true] .mat-step-icon,.mat-step-header[aria-disabled=true] .mat-step-optional{color:GrayText}}.mat-step-optional{font-size:12px;color:var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-sub-label-error{font-size:12px;font-weight:normal}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;color:var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface));background-color:var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant))}.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error{background-color:var(--mat-stepper-header-error-state-icon-background-color, transparent);color:var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error))}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-active{color:var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-error{color:var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error));font-size:var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size))}.mat-step-label.mat-step-label-selected{font-size:var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight))}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-step-icon-selected{background-color:var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-done{background-color:var(--mat-stepper-header-done-state-icon-background-color);color:var(--mat-stepper-header-done-state-icon-foreground-color)}.mat-step-icon-state-edit{background-color:var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary))}"] }]
|
|
127
152
|
}], ctorParameters: () => [], propDecorators: { state: [{
|
|
128
153
|
type: Input
|
|
129
154
|
}], label: [{
|
|
@@ -189,17 +214,17 @@ const matStepperAnimations = {
|
|
|
189
214
|
* Template to be used to override the icons inside the step header.
|
|
190
215
|
*/
|
|
191
216
|
class MatStepperIcon {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
static
|
|
217
|
+
templateRef = inject(TemplateRef);
|
|
218
|
+
/** Name of the icon to be overridden. */
|
|
219
|
+
name;
|
|
220
|
+
constructor() { }
|
|
221
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
222
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatStepperIcon, isStandalone: true, selector: "ng-template[matStepperIcon]", inputs: { name: ["matStepperIcon", "name"] }, ngImport: i0 });
|
|
197
223
|
}
|
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperIcon, decorators: [{
|
|
199
225
|
type: Directive,
|
|
200
226
|
args: [{
|
|
201
227
|
selector: 'ng-template[matStepperIcon]',
|
|
202
|
-
standalone: true,
|
|
203
228
|
}]
|
|
204
229
|
}], ctorParameters: () => [], propDecorators: { name: [{
|
|
205
230
|
type: Input,
|
|
@@ -210,30 +235,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
210
235
|
* Content for a `mat-step` that will be rendered lazily.
|
|
211
236
|
*/
|
|
212
237
|
class MatStepContent {
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
}
|
|
216
|
-
static
|
|
217
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.8", type: MatStepContent, isStandalone: true, selector: "ng-template[matStepContent]", ngImport: i0 }); }
|
|
238
|
+
_template = inject(TemplateRef);
|
|
239
|
+
constructor() { }
|
|
240
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
241
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatStepContent, isStandalone: true, selector: "ng-template[matStepContent]", ngImport: i0 });
|
|
218
242
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepContent, decorators: [{
|
|
220
244
|
type: Directive,
|
|
221
245
|
args: [{
|
|
222
246
|
selector: 'ng-template[matStepContent]',
|
|
223
|
-
standalone: true,
|
|
224
247
|
}]
|
|
225
248
|
}], ctorParameters: () => [] });
|
|
226
249
|
|
|
227
250
|
class MatStep extends CdkStep {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
251
|
+
_errorStateMatcher = inject(ErrorStateMatcher, { skipSelf: true });
|
|
252
|
+
_viewContainerRef = inject(ViewContainerRef);
|
|
253
|
+
_isSelected = Subscription.EMPTY;
|
|
254
|
+
/** Content for step label given by `<ng-template matStepLabel>`. */
|
|
255
|
+
// We need an initializer here to avoid a TS error.
|
|
256
|
+
stepLabel = undefined;
|
|
257
|
+
/**
|
|
258
|
+
* Theme color for the particular step. This API is supported in M2 themes
|
|
259
|
+
* only, it has no effect in M3 themes.
|
|
260
|
+
*
|
|
261
|
+
* For information on applying color variants in M3, see
|
|
262
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
263
|
+
*/
|
|
264
|
+
color;
|
|
265
|
+
/** Content that will be rendered lazily. */
|
|
266
|
+
_lazyContent;
|
|
267
|
+
/** Currently-attached portal containing the lazy content. */
|
|
268
|
+
_portal;
|
|
237
269
|
ngAfterContentInit() {
|
|
238
270
|
this._isSelected = this._stepper.steps.changes
|
|
239
271
|
.pipe(switchMap(() => {
|
|
@@ -257,18 +289,18 @@ class MatStep extends CdkStep {
|
|
|
257
289
|
const customErrorState = !!(control && control.invalid && this.interacted);
|
|
258
290
|
return originalErrorState || customErrorState;
|
|
259
291
|
}
|
|
260
|
-
static
|
|
261
|
-
static
|
|
292
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStep, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
293
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatStep, isStandalone: true, selector: "mat-step", inputs: { color: "color" }, host: { attributes: { "hidden": "" } }, providers: [
|
|
262
294
|
{ provide: ErrorStateMatcher, useExisting: MatStep },
|
|
263
295
|
{ provide: CdkStep, useExisting: MatStep },
|
|
264
|
-
], queries: [{ propertyName: "stepLabel", first: true, predicate: MatStepLabel, descendants: true }, { propertyName: "_lazyContent", first: true, predicate: MatStepContent, descendants: true }], exportAs: ["matStep"], usesInheritance: true, ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
296
|
+
], queries: [{ propertyName: "stepLabel", first: true, predicate: MatStepLabel, descendants: true }, { propertyName: "_lazyContent", first: true, predicate: MatStepContent, descendants: true }], exportAs: ["matStep"], usesInheritance: true, ngImport: i0, template: "<ng-template>\n <ng-content></ng-content>\n <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
265
297
|
}
|
|
266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStep, decorators: [{
|
|
267
299
|
type: Component,
|
|
268
300
|
args: [{ selector: 'mat-step', providers: [
|
|
269
301
|
{ provide: ErrorStateMatcher, useExisting: MatStep },
|
|
270
302
|
{ provide: CdkStep, useExisting: MatStep },
|
|
271
|
-
], encapsulation: ViewEncapsulation.None, exportAs: 'matStep', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
303
|
+
], encapsulation: ViewEncapsulation.None, exportAs: 'matStep', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkPortalOutlet], host: {
|
|
272
304
|
'hidden': '', // Hide the steps so they don't affect the layout.
|
|
273
305
|
}, template: "<ng-template>\n <ng-content></ng-content>\n <ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>\n</ng-template>\n" }]
|
|
274
306
|
}], propDecorators: { stepLabel: [{
|
|
@@ -281,6 +313,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
281
313
|
args: [MatStepContent, { static: false }]
|
|
282
314
|
}] } });
|
|
283
315
|
class MatStepper extends CdkStepper {
|
|
316
|
+
/** The list of step headers of the steps in the stepper. */
|
|
317
|
+
// We need an initializer here to avoid a TS error.
|
|
318
|
+
_stepHeader = undefined;
|
|
319
|
+
/** Full list of steps inside the stepper, including inside nested steppers. */
|
|
320
|
+
// We need an initializer here to avoid a TS error.
|
|
321
|
+
_steps = undefined;
|
|
322
|
+
/** Steps that belong to the current stepper, excluding ones from nested steppers. */
|
|
323
|
+
steps = new QueryList();
|
|
324
|
+
/** Custom icon overrides passed in by the consumer. */
|
|
325
|
+
_icons;
|
|
326
|
+
/** Event emitted when the current step is done transitioning in. */
|
|
327
|
+
animationDone = new EventEmitter();
|
|
328
|
+
/** Whether ripples should be disabled for the step headers. */
|
|
329
|
+
disableRipple;
|
|
330
|
+
/**
|
|
331
|
+
* Theme color for all of the steps in stepper. This API is supported in M2
|
|
332
|
+
* themes only, it has no effect in M3 themes.
|
|
333
|
+
*
|
|
334
|
+
* For information on applying color variants in M3, see
|
|
335
|
+
* https://material.angular.io/guide/theming#using-component-color-variants.
|
|
336
|
+
*/
|
|
337
|
+
color;
|
|
338
|
+
/**
|
|
339
|
+
* Whether the label should display in bottom or end position.
|
|
340
|
+
* Only applies in the `horizontal` orientation.
|
|
341
|
+
*/
|
|
342
|
+
labelPosition = 'end';
|
|
343
|
+
/**
|
|
344
|
+
* Position of the stepper's header.
|
|
345
|
+
* Only applies in the `horizontal` orientation.
|
|
346
|
+
*/
|
|
347
|
+
headerPosition = 'top';
|
|
348
|
+
/** Consumer-specified template-refs to be used to override the header icons. */
|
|
349
|
+
_iconOverrides = {};
|
|
350
|
+
/** Stream of animation `done` events when the body expands/collapses. */
|
|
351
|
+
_animationDone = new Subject();
|
|
284
352
|
/** Duration for the animation. Will be normalized to milliseconds if no units are set. */
|
|
285
353
|
get animationDuration() {
|
|
286
354
|
return this._animationDuration;
|
|
@@ -288,35 +356,11 @@ class MatStepper extends CdkStepper {
|
|
|
288
356
|
set animationDuration(value) {
|
|
289
357
|
this._animationDuration = /^\d+$/.test(value) ? value + 'ms' : value;
|
|
290
358
|
}
|
|
359
|
+
_animationDuration = '';
|
|
360
|
+
/** Whether the stepper is rendering on the server. */
|
|
361
|
+
_isServer = !inject(Platform).isBrowser;
|
|
291
362
|
constructor() {
|
|
292
363
|
super();
|
|
293
|
-
/** The list of step headers of the steps in the stepper. */
|
|
294
|
-
// We need an initializer here to avoid a TS error.
|
|
295
|
-
this._stepHeader = undefined;
|
|
296
|
-
/** Full list of steps inside the stepper, including inside nested steppers. */
|
|
297
|
-
// We need an initializer here to avoid a TS error.
|
|
298
|
-
this._steps = undefined;
|
|
299
|
-
/** Steps that belong to the current stepper, excluding ones from nested steppers. */
|
|
300
|
-
this.steps = new QueryList();
|
|
301
|
-
/** Event emitted when the current step is done transitioning in. */
|
|
302
|
-
this.animationDone = new EventEmitter();
|
|
303
|
-
/**
|
|
304
|
-
* Whether the label should display in bottom or end position.
|
|
305
|
-
* Only applies in the `horizontal` orientation.
|
|
306
|
-
*/
|
|
307
|
-
this.labelPosition = 'end';
|
|
308
|
-
/**
|
|
309
|
-
* Position of the stepper's header.
|
|
310
|
-
* Only applies in the `horizontal` orientation.
|
|
311
|
-
*/
|
|
312
|
-
this.headerPosition = 'top';
|
|
313
|
-
/** Consumer-specified template-refs to be used to override the header icons. */
|
|
314
|
-
this._iconOverrides = {};
|
|
315
|
-
/** Stream of animation `done` events when the body expands/collapses. */
|
|
316
|
-
this._animationDone = new Subject();
|
|
317
|
-
this._animationDuration = '';
|
|
318
|
-
/** Whether the stepper is rendering on the server. */
|
|
319
|
-
this._isServer = !inject(Platform).isBrowser;
|
|
320
364
|
const elementRef = inject(ElementRef);
|
|
321
365
|
const nodeName = elementRef.nativeElement.nodeName.toLowerCase();
|
|
322
366
|
this.orientation = nodeName === 'mat-vertical-stepper' ? 'vertical' : 'horizontal';
|
|
@@ -328,13 +372,7 @@ class MatStepper extends CdkStepper {
|
|
|
328
372
|
this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
|
329
373
|
this._stateChanged();
|
|
330
374
|
});
|
|
331
|
-
this._animationDone
|
|
332
|
-
.pipe(
|
|
333
|
-
// This needs a `distinctUntilChanged` in order to avoid emitting the same event twice due
|
|
334
|
-
// to a bug in animations where the `.done` callback gets invoked twice on some browsers.
|
|
335
|
-
// See https://github.com/angular/angular/issues/24084
|
|
336
|
-
distinctUntilChanged((x, y) => x.fromState === y.fromState && x.toState === y.toState), takeUntil(this._destroyed))
|
|
337
|
-
.subscribe(event => {
|
|
375
|
+
this._animationDone.pipe(takeUntil(this._destroyed)).subscribe(event => {
|
|
338
376
|
if (event.toState === 'current') {
|
|
339
377
|
this.animationDone.emit();
|
|
340
378
|
}
|
|
@@ -351,13 +389,13 @@ class MatStepper extends CdkStepper {
|
|
|
351
389
|
? DEFAULT_HORIZONTAL_ANIMATION_DURATION
|
|
352
390
|
: DEFAULT_VERTICAL_ANIMATION_DURATION;
|
|
353
391
|
}
|
|
354
|
-
static
|
|
355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.8", type: MatStepper, isStandalone: true, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: { disableRipple: "disableRipple", color: "color", labelPosition: "labelPosition", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.mat-stepper-horizontal": "orientation === \"horizontal\"", "class.mat-stepper-vertical": "orientation === \"vertical\"", "class.mat-stepper-label-position-end": "orientation === \"horizontal\" && labelPosition == \"end\"", "class.mat-stepper-label-position-bottom": "orientation === \"horizontal\" && labelPosition == \"bottom\"", "class.mat-stepper-header-position-bottom": "headerPosition === \"bottom\"", "attr.aria-orientation": "orientation" } }, providers: [{ provide: CdkStepper, useExisting: MatStepper }], queries: [{ propertyName: "_steps", predicate: MatStep, descendants: true }, { propertyName: "_icons", predicate: MatStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: MatStepHeader, descendants: true }], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n@switch (orientation) {\n @case ('horizontal') {\n <div class=\"mat-horizontal-stepper-wrapper\">\n <div class=\"mat-horizontal-stepper-header-container\">\n @for (step of steps; track step; let i = $index, isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n @if (!isLast) {\n <div class=\"mat-stepper-horizontal-line\"></div>\n }\n }\n </div>\n\n <div class=\"mat-horizontal-content-container\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"mat-horizontal-stepper-content\" role=\"tabpanel\"\n [@horizontalStepTransition]=\"{\n 'value': _getAnimationDirection(i),\n 'params': {'animationDuration': _getAnimationDuration()}\n }\"\n (@horizontalStepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [class.mat-horizontal-stepper-content-inactive]=\"selectedIndex !== i\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('vertical') {\n @for (step of steps; track step; let i = $index, isLast = $last) {\n <div class=\"mat-step\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n <div class=\"mat-vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div class=\"mat-vertical-stepper-content\" role=\"tabpanel\"\n [@verticalStepTransition]=\"{\n 'value': _getAnimationDirection(i),\n 'params': {'animationDuration': _getAnimationDuration()}\n }\"\n (@verticalStepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [class.mat-vertical-stepper-content-inactive]=\"selectedIndex !== i\">\n <div class=\"mat-vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n }\n }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n <mat-step-header\n [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n [id]=\"_getStepLabelId(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"_getStepContentId(i)\"\n [attr.aria-selected]=\"selectedIndex == i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n [index]=\"i\"\n [state]=\"_getIndicatorType(i, step.state)\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"_stepIsNavigable(i, step)\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [iconOverrides]=\"_iconOverrides\"\n [disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\n [color]=\"step.color || color\"></mat-step-header>\n</ng-template>\n", styles: [".mat-stepper-vertical,.mat-stepper-horizontal{display:block;font-family:var(--mat-stepper-container-text-font, var(--mat-app-body-medium-font));background:var(--mat-stepper-container-color, var(--mat-app-surface))}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container{order:1}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--mat-stepper-line-color, var(--mat-app-outline))}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px;height:var(--mat-stepper-header-height, 72px)}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after{border-top-color:var(--mat-stepper-line-color, var(--mat-app-outline))}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after{top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;height:24px;padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-wrapper{display:flex;flex-direction:column}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-inactive{height:0;overflow:hidden}.mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){visibility:inherit !important}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}@media(forced-colors: active){.mat-horizontal-content-container{outline:solid 1px}}.mat-stepper-header-position-bottom .mat-horizontal-content-container{padding:24px 24px 0 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--mat-stepper-line-color, var(--mat-app-outline));top:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));bottom:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2))}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0}.mat-vertical-stepper-content:not(.mat-vertical-stepper-content-inactive){visibility:inherit !important}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatStepHeader, selector: "mat-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple", "color"] }], animations: [
|
|
392
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
393
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: MatStepper, isStandalone: true, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: { disableRipple: "disableRipple", color: "color", labelPosition: "labelPosition", headerPosition: "headerPosition", animationDuration: "animationDuration" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.mat-stepper-horizontal": "orientation === \"horizontal\"", "class.mat-stepper-vertical": "orientation === \"vertical\"", "class.mat-stepper-label-position-end": "orientation === \"horizontal\" && labelPosition == \"end\"", "class.mat-stepper-label-position-bottom": "orientation === \"horizontal\" && labelPosition == \"bottom\"", "class.mat-stepper-header-position-bottom": "headerPosition === \"bottom\"", "attr.aria-orientation": "orientation" } }, providers: [{ provide: CdkStepper, useExisting: MatStepper }], queries: [{ propertyName: "_steps", predicate: MatStep, descendants: true }, { propertyName: "_icons", predicate: MatStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: MatStepHeader, descendants: true }], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n@switch (orientation) {\n @case ('horizontal') {\n <div class=\"mat-horizontal-stepper-wrapper\">\n <div class=\"mat-horizontal-stepper-header-container\">\n @for (step of steps; track step; let i = $index, isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n @if (!isLast) {\n <div class=\"mat-stepper-horizontal-line\"></div>\n }\n }\n </div>\n\n <div class=\"mat-horizontal-content-container\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"mat-horizontal-stepper-content\" role=\"tabpanel\"\n [@horizontalStepTransition]=\"{\n 'value': _getAnimationDirection(i),\n 'params': {'animationDuration': _getAnimationDuration()}\n }\"\n (@horizontalStepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [class.mat-horizontal-stepper-content-inactive]=\"selectedIndex !== i\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('vertical') {\n @for (step of steps; track step; let i = $index, isLast = $last) {\n <div class=\"mat-step\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n <div class=\"mat-vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div class=\"mat-vertical-stepper-content\" role=\"tabpanel\"\n [@verticalStepTransition]=\"{\n 'value': _getAnimationDirection(i),\n 'params': {'animationDuration': _getAnimationDuration()}\n }\"\n (@verticalStepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [class.mat-vertical-stepper-content-inactive]=\"selectedIndex !== i\">\n <div class=\"mat-vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n }\n }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n <mat-step-header\n [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n [id]=\"_getStepLabelId(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"_getStepContentId(i)\"\n [attr.aria-selected]=\"selectedIndex == i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n [index]=\"i\"\n [state]=\"_getIndicatorType(i, step.state)\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"_stepIsNavigable(i, step)\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [iconOverrides]=\"_iconOverrides\"\n [disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\n [color]=\"step.color || color\"></mat-step-header>\n</ng-template>\n", styles: [".mat-stepper-vertical,.mat-stepper-horizontal{display:block;font-family:var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));background:var(--mat-stepper-container-color, var(--mat-sys-surface))}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container{order:1}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px;height:var(--mat-stepper-header-height, 72px)}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after{border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after{top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;height:24px;padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-wrapper{display:flex;flex-direction:column}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-inactive{height:0;overflow:hidden}.mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){visibility:inherit !important}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}@media(forced-colors: active){.mat-horizontal-content-container{outline:solid 1px}}.mat-stepper-header-position-bottom .mat-horizontal-content-container{padding:24px 24px 0 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--mat-stepper-line-color, var(--mat-sys-outline));top:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));bottom:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2))}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0}.mat-vertical-stepper-content:not(.mat-vertical-stepper-content-inactive){visibility:inherit !important}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatStepHeader, selector: "mat-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple", "color"] }], animations: [
|
|
356
394
|
matStepperAnimations.horizontalStepTransition,
|
|
357
395
|
matStepperAnimations.verticalStepTransition,
|
|
358
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
396
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
359
397
|
}
|
|
360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepper, decorators: [{
|
|
361
399
|
type: Component,
|
|
362
400
|
args: [{ selector: 'mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]', exportAs: 'matStepper, matVerticalStepper, matHorizontalStepper', host: {
|
|
363
401
|
'[class.mat-stepper-horizontal]': 'orientation === "horizontal"',
|
|
@@ -370,7 +408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
370
408
|
}, animations: [
|
|
371
409
|
matStepperAnimations.horizontalStepTransition,
|
|
372
410
|
matStepperAnimations.verticalStepTransition,
|
|
373
|
-
], providers: [{ provide: CdkStepper, useExisting: MatStepper }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
411
|
+
], providers: [{ provide: CdkStepper, useExisting: MatStepper }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MatStepHeader], template: "<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n@switch (orientation) {\n @case ('horizontal') {\n <div class=\"mat-horizontal-stepper-wrapper\">\n <div class=\"mat-horizontal-stepper-header-container\">\n @for (step of steps; track step; let i = $index, isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n @if (!isLast) {\n <div class=\"mat-stepper-horizontal-line\"></div>\n }\n }\n </div>\n\n <div class=\"mat-horizontal-content-container\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"mat-horizontal-stepper-content\" role=\"tabpanel\"\n [@horizontalStepTransition]=\"{\n 'value': _getAnimationDirection(i),\n 'params': {'animationDuration': _getAnimationDuration()}\n }\"\n (@horizontalStepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [class.mat-horizontal-stepper-content-inactive]=\"selectedIndex !== i\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('vertical') {\n @for (step of steps; track step; let i = $index, isLast = $last) {\n <div class=\"mat-step\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n <div class=\"mat-vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n <div class=\"mat-vertical-stepper-content\" role=\"tabpanel\"\n [@verticalStepTransition]=\"{\n 'value': _getAnimationDirection(i),\n 'params': {'animationDuration': _getAnimationDuration()}\n }\"\n (@verticalStepTransition.done)=\"_animationDone.next($event)\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n [class.mat-vertical-stepper-content-inactive]=\"selectedIndex !== i\">\n <div class=\"mat-vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n }\n }\n}\n\n<!-- Common step templating -->\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n <mat-step-header\n [class.mat-horizontal-stepper-header]=\"orientation === 'horizontal'\"\n [class.mat-vertical-stepper-header]=\"orientation === 'vertical'\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n [id]=\"_getStepLabelId(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"_getStepContentId(i)\"\n [attr.aria-selected]=\"selectedIndex == i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n [index]=\"i\"\n [state]=\"_getIndicatorType(i, step.state)\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"_stepIsNavigable(i, step)\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [iconOverrides]=\"_iconOverrides\"\n [disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\n [color]=\"step.color || color\"></mat-step-header>\n</ng-template>\n", styles: [".mat-stepper-vertical,.mat-stepper-horizontal{display:block;font-family:var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));background:var(--mat-stepper-container-color, var(--mat-sys-surface))}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container{order:1}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px;height:var(--mat-stepper-header-height, 72px)}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after{border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after{top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;height:24px;padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-wrapper{display:flex;flex-direction:column}.mat-horizontal-stepper-content{outline:0}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-inactive{height:0;overflow:hidden}.mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){visibility:inherit !important}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}@media(forced-colors: active){.mat-horizontal-content-container{outline:solid 1px}}.mat-stepper-header-position-bottom .mat-horizontal-content-container{padding:24px 24px 0 24px}.mat-vertical-content-container{margin-left:36px;border:0;position:relative}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}.mat-stepper-vertical-line::before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--mat-stepper-line-color, var(--mat-sys-outline));top:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));bottom:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2))}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0}.mat-vertical-stepper-content:not(.mat-vertical-stepper-content-inactive){visibility:inherit !important}.mat-vertical-content{padding:0 24px 24px 24px}.mat-step:last-child .mat-vertical-content-container{border:none}"] }]
|
|
374
412
|
}], ctorParameters: () => [], propDecorators: { _stepHeader: [{
|
|
375
413
|
type: ViewChildren,
|
|
376
414
|
args: [MatStepHeader]
|
|
@@ -396,10 +434,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
396
434
|
|
|
397
435
|
/** Button that moves to the next step in a stepper workflow. */
|
|
398
436
|
class MatStepperNext extends CdkStepperNext {
|
|
399
|
-
static
|
|
400
|
-
static
|
|
437
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
438
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatStepperNext, isStandalone: true, selector: "button[matStepperNext]", host: { properties: { "type": "type" }, classAttribute: "mat-stepper-next" }, usesInheritance: true, ngImport: i0 });
|
|
401
439
|
}
|
|
402
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperNext, decorators: [{
|
|
403
441
|
type: Directive,
|
|
404
442
|
args: [{
|
|
405
443
|
selector: 'button[matStepperNext]',
|
|
@@ -407,15 +445,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
407
445
|
'class': 'mat-stepper-next',
|
|
408
446
|
'[type]': 'type',
|
|
409
447
|
},
|
|
410
|
-
standalone: true,
|
|
411
448
|
}]
|
|
412
449
|
}] });
|
|
413
450
|
/** Button that moves to the previous step in a stepper workflow. */
|
|
414
451
|
class MatStepperPrevious extends CdkStepperPrevious {
|
|
415
|
-
static
|
|
416
|
-
static
|
|
452
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperPrevious, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
453
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatStepperPrevious, isStandalone: true, selector: "button[matStepperPrevious]", host: { properties: { "type": "type" }, classAttribute: "mat-stepper-previous" }, usesInheritance: true, ngImport: i0 });
|
|
417
454
|
}
|
|
418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperPrevious, decorators: [{
|
|
419
456
|
type: Directive,
|
|
420
457
|
args: [{
|
|
421
458
|
selector: 'button[matStepperPrevious]',
|
|
@@ -423,14 +460,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.8",
|
|
|
423
460
|
'class': 'mat-stepper-previous',
|
|
424
461
|
'[type]': 'type',
|
|
425
462
|
},
|
|
426
|
-
standalone: true,
|
|
427
463
|
}]
|
|
428
464
|
}] });
|
|
429
465
|
|
|
430
466
|
class MatStepperModule {
|
|
431
|
-
static
|
|
432
|
-
static
|
|
433
|
-
CommonModule,
|
|
467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
468
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperModule, imports: [MatCommonModule,
|
|
434
469
|
PortalModule,
|
|
435
470
|
CdkStepperModule,
|
|
436
471
|
MatIconModule,
|
|
@@ -450,22 +485,20 @@ class MatStepperModule {
|
|
|
450
485
|
MatStepperPrevious,
|
|
451
486
|
MatStepHeader,
|
|
452
487
|
MatStepperIcon,
|
|
453
|
-
MatStepContent] });
|
|
454
|
-
static
|
|
455
|
-
CommonModule,
|
|
488
|
+
MatStepContent] });
|
|
489
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperModule, providers: [MAT_STEPPER_INTL_PROVIDER, ErrorStateMatcher], imports: [MatCommonModule,
|
|
456
490
|
PortalModule,
|
|
457
491
|
CdkStepperModule,
|
|
458
492
|
MatIconModule,
|
|
459
493
|
MatRippleModule,
|
|
460
494
|
MatStepper,
|
|
461
|
-
MatStepHeader, MatCommonModule] });
|
|
495
|
+
MatStepHeader, MatCommonModule] });
|
|
462
496
|
}
|
|
463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatStepperModule, decorators: [{
|
|
464
498
|
type: NgModule,
|
|
465
499
|
args: [{
|
|
466
500
|
imports: [
|
|
467
501
|
MatCommonModule,
|
|
468
|
-
CommonModule,
|
|
469
502
|
PortalModule,
|
|
470
503
|
CdkStepperModule,
|
|
471
504
|
MatIconModule,
|