@angular/material 19.2.0-next.1 → 19.2.0-next.3
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/bottom-sheet/index.d.ts +18 -8
- package/button/_button-base.scss +4 -4
- package/checkbox/_checkbox-common.scss +38 -25
- package/chips/index.d.ts +0 -2
- package/core/index.d.ts +1 -0
- package/datepicker/index.d.ts +3 -3
- package/dialog/index.d.ts +10 -3
- package/expansion/index.d.ts +7 -4
- package/fesm2022/autocomplete.mjs +13 -13
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +10 -10
- 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 +138 -50
- package/fesm2022/bottom-sheet.mjs.map +1 -1
- package/fesm2022/button-toggle.mjs +14 -14
- package/fesm2022/button-toggle.mjs.map +1 -1
- package/fesm2022/button.mjs +42 -42
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card.mjs +46 -46
- package/fesm2022/card.mjs.map +1 -1
- package/fesm2022/checkbox.mjs +16 -16
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +52 -53
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +74 -76
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +205 -131
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog.mjs +123 -43
- package/fesm2022/dialog.mjs.map +1 -1
- package/fesm2022/divider.mjs +7 -7
- package/fesm2022/divider.mjs.map +1 -1
- package/fesm2022/expansion.mjs +97 -41
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field.mjs +68 -43
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +22 -22
- package/fesm2022/grid-list.mjs.map +1 -1
- package/fesm2022/icon/testing.mjs +7 -7
- package/fesm2022/icon/testing.mjs.map +1 -1
- package/fesm2022/icon.mjs +10 -10
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input.mjs +7 -7
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list.mjs +51 -51
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +111 -51
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +10 -10
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +7 -7
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +7 -7
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +10 -10
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +174 -69
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +94 -44
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +14 -14
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider.mjs +16 -16
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +179 -91
- package/fesm2022/snack-bar.mjs.map +1 -1
- package/fesm2022/sort.mjs +299 -56
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper.mjs +169 -60
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +55 -55
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs.mjs +171 -73
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +36 -43
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +10 -10
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +46 -19
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree.mjs +25 -25
- package/fesm2022/tree.mjs.map +1 -1
- package/form-field/index.d.ts +1 -2
- package/menu/index.d.ts +5 -10
- package/package.json +2 -2
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +2 -2
- package/select/index.d.ts +12 -11
- package/sidenav/index.d.ts +1 -2
- package/snack-bar/index.d.ts +9 -8
- package/sort/index.d.ts +6 -7
- package/stepper/index.d.ts +2 -3
- package/tabs/index.d.ts +1 -2
- package/timepicker/index.d.ts +4 -1
- package/tooltip/index.d.ts +1 -2
package/fesm2022/stepper.mjs
CHANGED
|
@@ -10,13 +10,12 @@ import { NgTemplateOutlet } from '@angular/common';
|
|
|
10
10
|
import { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/private';
|
|
11
11
|
import { Platform } from '@angular/cdk/platform';
|
|
12
12
|
import { switchMap, map, startWith, takeUntil } from 'rxjs/operators';
|
|
13
|
-
import { trigger, state, style, transition, group, animate, query, animateChild } from '@angular/animations';
|
|
14
13
|
|
|
15
14
|
class MatStepLabel extends CdkStepLabel {
|
|
16
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
17
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
16
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatStepLabel, isStandalone: true, selector: "[matStepLabel]", usesInheritance: true, ngImport: i0 });
|
|
18
17
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepLabel, decorators: [{
|
|
20
19
|
type: Directive,
|
|
21
20
|
args: [{
|
|
22
21
|
selector: '[matStepLabel]',
|
|
@@ -36,10 +35,10 @@ class MatStepperIntl {
|
|
|
36
35
|
completedLabel = 'Completed';
|
|
37
36
|
/** Label that is used to indicate step as editable to screen readers. */
|
|
38
37
|
editableLabel = 'Editable';
|
|
39
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
40
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.
|
|
38
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
39
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperIntl, providedIn: 'root' });
|
|
41
40
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperIntl, decorators: [{
|
|
43
42
|
type: Injectable,
|
|
44
43
|
args: [{ providedIn: 'root' }]
|
|
45
44
|
}] });
|
|
@@ -139,10 +138,10 @@ class MatStepHeader extends CdkStepHeader {
|
|
|
139
138
|
}
|
|
140
139
|
return state;
|
|
141
140
|
}
|
|
142
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
143
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", 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 });
|
|
144
143
|
}
|
|
145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepHeader, decorators: [{
|
|
146
145
|
type: Component,
|
|
147
146
|
args: [{ selector: 'mat-step-header', host: {
|
|
148
147
|
'class': 'mat-step-header',
|
|
@@ -179,10 +178,10 @@ class MatStepperIcon {
|
|
|
179
178
|
/** Name of the icon to be overridden. */
|
|
180
179
|
name;
|
|
181
180
|
constructor() { }
|
|
182
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
183
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
181
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
182
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatStepperIcon, isStandalone: true, selector: "ng-template[matStepperIcon]", inputs: { name: ["matStepperIcon", "name"] }, ngImport: i0 });
|
|
184
183
|
}
|
|
185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperIcon, decorators: [{
|
|
186
185
|
type: Directive,
|
|
187
186
|
args: [{
|
|
188
187
|
selector: 'ng-template[matStepperIcon]',
|
|
@@ -198,10 +197,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
198
197
|
class MatStepContent {
|
|
199
198
|
_template = inject(TemplateRef);
|
|
200
199
|
constructor() { }
|
|
201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
202
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
201
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatStepContent, isStandalone: true, selector: "ng-template[matStepContent]", ngImport: i0 });
|
|
203
202
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepContent, decorators: [{
|
|
205
204
|
type: Directive,
|
|
206
205
|
args: [{
|
|
207
206
|
selector: 'ng-template[matStepContent]',
|
|
@@ -250,13 +249,13 @@ class MatStep extends CdkStep {
|
|
|
250
249
|
const customErrorState = !!(control && control.invalid && this.interacted);
|
|
251
250
|
return originalErrorState || customErrorState;
|
|
252
251
|
}
|
|
253
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.
|
|
252
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStep, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: MatStep, isStandalone: true, selector: "mat-step", inputs: { color: "color" }, host: { attributes: { "hidden": "" } }, providers: [
|
|
255
254
|
{ provide: ErrorStateMatcher, useExisting: MatStep },
|
|
256
255
|
{ provide: CdkStep, useExisting: MatStep },
|
|
257
256
|
], 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 });
|
|
258
257
|
}
|
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStep, decorators: [{
|
|
260
259
|
type: Component,
|
|
261
260
|
args: [{ selector: 'mat-step', providers: [
|
|
262
261
|
{ provide: ErrorStateMatcher, useExisting: MatStep },
|
|
@@ -422,10 +421,10 @@ class MatStepper extends CdkStepper {
|
|
|
422
421
|
this._isAnimating.set(false);
|
|
423
422
|
this.animationDone.emit();
|
|
424
423
|
}
|
|
425
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-rc.0", 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\"", "class.mat-stepper-animating": "_isAnimating()", "style.--mat-stepper-animation-duration": "_getAnimationDuration()", "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 }, { propertyName: "_animatedContainers", predicate: ["animatedContainer"], 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) {\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step, i: $index}\"/>\n @if (!$last) {\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) {\n <div\n #animatedContainer\n class=\"mat-horizontal-stepper-content\"\n role=\"tabpanel\"\n [id]=\"_getStepContentId($index)\"\n [attr.aria-labelledby]=\"_getStepLabelId($index)\"\n [class]=\"'mat-horizontal-stepper-content-' + _getAnimationDirection($index)\"\n [attr.inert]=\"selectedIndex === $index ? null : ''\">\n <ng-container [ngTemplateOutlet]=\"step.content\"/>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('vertical') {\n @for (step of steps; track step) {\n <div class=\"mat-step\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step, i: $index}\"/>\n <div\n #animatedContainer\n class=\"mat-vertical-content-container\"\n [class.mat-stepper-vertical-line]=\"!$last\"\n [class.mat-vertical-content-container-active]=\"selectedIndex === $index\"\n [attr.inert]=\"selectedIndex === $index ? null : ''\">\n <div class=\"mat-vertical-stepper-content\"\n role=\"tabpanel\"\n [id]=\"_getStepContentId($index)\"\n [attr.aria-labelledby]=\"_getStepLabelId($index)\">\n <div class=\"mat-vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"/>\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\"/>\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{visibility:hidden;overflow:hidden;outline:0;height:0}.mat-stepper-animations-enabled .mat-horizontal-stepper-content{transition:transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous{transform:translate3d(-100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next{transform:translate3d(100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{overflow:visible}.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{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.mat-stepper-animations-enabled .mat-vertical-content-container{transition:grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1)}.mat-vertical-content-container.mat-vertical-content-container-active{grid-template-rows:1fr}.mat-step:last-child .mat-vertical-content-container{border:none}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.mat-vertical-content-container{height:0}.mat-vertical-content-container.mat-vertical-content-container-active{height:auto}}.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;visibility:hidden}.mat-stepper-animations-enabled .mat-vertical-stepper-content{transition:visibility var(--mat-stepper-animation-duration, 0) linear}.mat-vertical-content-container-active>.mat-vertical-stepper-content{visibility:visible}.mat-vertical-content{padding:0 24px 24px 24px}"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
424
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", 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\"", "class.mat-stepper-animating": "_isAnimating()", "style.--mat-stepper-animation-duration": "_getAnimationDuration()", "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 }, { propertyName: "_animatedContainers", predicate: ["animatedContainer"], 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) {\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step, i: $index}\"/>\n @if (!$last) {\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) {\n <div\n #animatedContainer\n class=\"mat-horizontal-stepper-content\"\n role=\"tabpanel\"\n [id]=\"_getStepContentId($index)\"\n [attr.aria-labelledby]=\"_getStepLabelId($index)\"\n [class]=\"'mat-horizontal-stepper-content-' + _getAnimationDirection($index)\"\n [attr.inert]=\"selectedIndex === $index ? null : ''\">\n <ng-container [ngTemplateOutlet]=\"step.content\"/>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('vertical') {\n @for (step of steps; track step) {\n <div class=\"mat-step\">\n <ng-container\n [ngTemplateOutlet]=\"stepTemplate\"\n [ngTemplateOutletContext]=\"{step, i: $index}\"/>\n <div\n #animatedContainer\n class=\"mat-vertical-content-container\"\n [class.mat-stepper-vertical-line]=\"!$last\"\n [class.mat-vertical-content-container-active]=\"selectedIndex === $index\"\n [attr.inert]=\"selectedIndex === $index ? null : ''\">\n <div class=\"mat-vertical-stepper-content\"\n role=\"tabpanel\"\n [id]=\"_getStepContentId($index)\"\n [attr.aria-labelledby]=\"_getStepLabelId($index)\">\n <div class=\"mat-vertical-content\">\n <ng-container [ngTemplateOutlet]=\"step.content\"/>\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\"/>\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{visibility:hidden;overflow:hidden;outline:0;height:0}.mat-stepper-animations-enabled .mat-horizontal-stepper-content{transition:transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous{transform:translate3d(-100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next{transform:translate3d(100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{overflow:visible}.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{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.mat-stepper-animations-enabled .mat-vertical-content-container{transition:grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1)}.mat-vertical-content-container.mat-vertical-content-container-active{grid-template-rows:1fr}.mat-step:last-child .mat-vertical-content-container{border:none}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.mat-vertical-content-container{height:0}.mat-vertical-content-container.mat-vertical-content-container-active{height:auto}}.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;visibility:hidden}.mat-stepper-animations-enabled .mat-vertical-stepper-content{transition:visibility var(--mat-stepper-animation-duration, 0) linear}.mat-vertical-content-container-active>.mat-vertical-stepper-content{visibility:visible}.mat-vertical-content{padding:0 24px 24px 24px}"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
427
426
|
}
|
|
428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepper, decorators: [{
|
|
429
428
|
type: Component,
|
|
430
429
|
args: [{ selector: 'mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]', exportAs: 'matStepper, matVerticalStepper, matHorizontalStepper', host: {
|
|
431
430
|
'[class.mat-stepper-horizontal]': 'orientation === "horizontal"',
|
|
@@ -466,10 +465,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
466
465
|
|
|
467
466
|
/** Button that moves to the next step in a stepper workflow. */
|
|
468
467
|
class MatStepperNext extends CdkStepperNext {
|
|
469
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
470
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
468
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
469
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatStepperNext, isStandalone: true, selector: "button[matStepperNext]", host: { properties: { "type": "type" }, classAttribute: "mat-stepper-next" }, usesInheritance: true, ngImport: i0 });
|
|
471
470
|
}
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperNext, decorators: [{
|
|
473
472
|
type: Directive,
|
|
474
473
|
args: [{
|
|
475
474
|
selector: 'button[matStepperNext]',
|
|
@@ -481,10 +480,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
481
480
|
}] });
|
|
482
481
|
/** Button that moves to the previous step in a stepper workflow. */
|
|
483
482
|
class MatStepperPrevious extends CdkStepperPrevious {
|
|
484
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
485
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.
|
|
483
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperPrevious, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
484
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: MatStepperPrevious, isStandalone: true, selector: "button[matStepperPrevious]", host: { properties: { "type": "type" }, classAttribute: "mat-stepper-previous" }, usesInheritance: true, ngImport: i0 });
|
|
486
485
|
}
|
|
487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperPrevious, decorators: [{
|
|
488
487
|
type: Directive,
|
|
489
488
|
args: [{
|
|
490
489
|
selector: 'button[matStepperPrevious]',
|
|
@@ -496,8 +495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
496
495
|
}] });
|
|
497
496
|
|
|
498
497
|
class MatStepperModule {
|
|
499
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.
|
|
500
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.
|
|
498
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
499
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: MatStepperModule, imports: [MatCommonModule,
|
|
501
500
|
PortalModule,
|
|
502
501
|
CdkStepperModule,
|
|
503
502
|
MatIconModule,
|
|
@@ -518,7 +517,7 @@ class MatStepperModule {
|
|
|
518
517
|
MatStepHeader,
|
|
519
518
|
MatStepperIcon,
|
|
520
519
|
MatStepContent] });
|
|
521
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.
|
|
520
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperModule, providers: [MAT_STEPPER_INTL_PROVIDER, ErrorStateMatcher], imports: [MatCommonModule,
|
|
522
521
|
PortalModule,
|
|
523
522
|
CdkStepperModule,
|
|
524
523
|
MatIconModule,
|
|
@@ -526,7 +525,7 @@ class MatStepperModule {
|
|
|
526
525
|
MatStepper,
|
|
527
526
|
MatStepHeader, MatCommonModule] });
|
|
528
527
|
}
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.
|
|
528
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MatStepperModule, decorators: [{
|
|
530
529
|
type: NgModule,
|
|
531
530
|
args: [{
|
|
532
531
|
imports: [
|
|
@@ -566,36 +565,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-rc.0", ng
|
|
|
566
565
|
* @breaking-change 21.0.0
|
|
567
566
|
*/
|
|
568
567
|
const matStepperAnimations = {
|
|
568
|
+
// Represents:
|
|
569
|
+
// trigger('horizontalStepTransition', [
|
|
570
|
+
// state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
|
|
571
|
+
// // Transition to `inherit`, rather than `visible`,
|
|
572
|
+
// // because visibility on a child element the one from the parent,
|
|
573
|
+
// // making this element focusable inside of a `hidden` element.
|
|
574
|
+
// state('current', style({transform: 'none', visibility: 'inherit'})),
|
|
575
|
+
// state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
|
|
576
|
+
// transition(
|
|
577
|
+
// '* => *',
|
|
578
|
+
// group([
|
|
579
|
+
// animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
|
|
580
|
+
// query('@*', animateChild(), {optional: true}),
|
|
581
|
+
// ]),
|
|
582
|
+
// {
|
|
583
|
+
// params: {animationDuration: '500ms'},
|
|
584
|
+
// },
|
|
585
|
+
// ),
|
|
586
|
+
// ])
|
|
569
587
|
/** Animation that transitions the step along the X axis in a horizontal stepper. */
|
|
570
|
-
horizontalStepTransition:
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
588
|
+
horizontalStepTransition: {
|
|
589
|
+
type: 7,
|
|
590
|
+
name: 'horizontalStepTransition',
|
|
591
|
+
definitions: [
|
|
592
|
+
{
|
|
593
|
+
type: 0,
|
|
594
|
+
name: 'previous',
|
|
595
|
+
styles: {
|
|
596
|
+
type: 6,
|
|
597
|
+
styles: { transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden' },
|
|
598
|
+
offset: null,
|
|
599
|
+
},
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
type: 0,
|
|
603
|
+
name: 'current',
|
|
604
|
+
styles: {
|
|
605
|
+
type: 6,
|
|
606
|
+
styles: { transform: 'none', visibility: 'inherit' },
|
|
607
|
+
offset: null,
|
|
608
|
+
},
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
type: 0,
|
|
612
|
+
name: 'next',
|
|
613
|
+
styles: {
|
|
614
|
+
type: 6,
|
|
615
|
+
styles: { transform: 'translate3d(100%, 0, 0)', visibility: 'hidden' },
|
|
616
|
+
offset: null,
|
|
617
|
+
},
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
type: 1,
|
|
621
|
+
expr: '* => *',
|
|
622
|
+
animation: {
|
|
623
|
+
type: 3,
|
|
624
|
+
steps: [
|
|
625
|
+
{
|
|
626
|
+
type: 4,
|
|
627
|
+
styles: null,
|
|
628
|
+
timings: '{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)',
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
type: 11,
|
|
632
|
+
selector: '@*',
|
|
633
|
+
animation: { type: 9, options: null },
|
|
634
|
+
options: { optional: true },
|
|
635
|
+
},
|
|
636
|
+
],
|
|
637
|
+
options: null,
|
|
638
|
+
},
|
|
639
|
+
options: { params: { animationDuration: '500ms' } },
|
|
640
|
+
},
|
|
641
|
+
],
|
|
642
|
+
options: {},
|
|
643
|
+
},
|
|
644
|
+
// Represents:
|
|
645
|
+
// trigger('verticalStepTransition', [
|
|
646
|
+
// state('previous', style({height: '0px', visibility: 'hidden'})),
|
|
647
|
+
// state('next', style({height: '0px', visibility: 'hidden'})),
|
|
648
|
+
// // Transition to `inherit`, rather than `visible`,
|
|
649
|
+
// // because visibility on a child element the one from the parent,
|
|
650
|
+
// // making this element focusable inside of a `hidden` element.
|
|
651
|
+
// state('current', style({height: '*', visibility: 'inherit'})),
|
|
652
|
+
// transition(
|
|
653
|
+
// '* <=> current',
|
|
654
|
+
// group([
|
|
655
|
+
// animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'),
|
|
656
|
+
// query('@*', animateChild(), {optional: true}),
|
|
657
|
+
// ]),
|
|
658
|
+
// {
|
|
659
|
+
// params: {animationDuration: '225ms'},
|
|
660
|
+
// },
|
|
661
|
+
// ),
|
|
662
|
+
// ])
|
|
584
663
|
/** Animation that transitions the step along the Y axis in a vertical stepper. */
|
|
585
|
-
verticalStepTransition:
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
664
|
+
verticalStepTransition: {
|
|
665
|
+
type: 7,
|
|
666
|
+
name: 'verticalStepTransition',
|
|
667
|
+
definitions: [
|
|
668
|
+
{
|
|
669
|
+
type: 0,
|
|
670
|
+
name: 'previous',
|
|
671
|
+
styles: { type: 6, styles: { 'height': '0px', visibility: 'hidden' }, offset: null },
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
type: 0,
|
|
675
|
+
name: 'next',
|
|
676
|
+
styles: { type: 6, styles: { 'height': '0px', visibility: 'hidden' }, offset: null },
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
type: 0,
|
|
680
|
+
name: 'current',
|
|
681
|
+
styles: { type: 6, styles: { 'height': '*', visibility: 'inherit' }, offset: null },
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
type: 1,
|
|
685
|
+
expr: '* <=> current',
|
|
686
|
+
animation: {
|
|
687
|
+
type: 3,
|
|
688
|
+
steps: [
|
|
689
|
+
{
|
|
690
|
+
type: 4,
|
|
691
|
+
styles: null,
|
|
692
|
+
timings: '{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)',
|
|
693
|
+
},
|
|
694
|
+
{
|
|
695
|
+
type: 11,
|
|
696
|
+
selector: '@*',
|
|
697
|
+
animation: { type: 9, options: null },
|
|
698
|
+
options: { optional: true },
|
|
699
|
+
},
|
|
700
|
+
],
|
|
701
|
+
options: null,
|
|
702
|
+
},
|
|
703
|
+
options: { params: { animationDuration: '225ms' } },
|
|
704
|
+
},
|
|
705
|
+
],
|
|
706
|
+
options: {},
|
|
707
|
+
},
|
|
599
708
|
};
|
|
600
709
|
|
|
601
710
|
/**
|