96 lines
3.8 KiB
HTML
96 lines
3.8 KiB
HTML
<!--
|
|
We need to project the content somewhere to avoid hydration errors. Some observations:
|
|
1. This is only necessary on the server.
|
|
2. We get a hydration error if there aren't any nodes after the `ng-content`.
|
|
3. We get a hydration error if `ng-content` is wrapped in another element.
|
|
-->
|
|
@if (_isServer) {
|
|
<ng-content/>
|
|
}
|
|
|
|
@switch (orientation) {
|
|
@case ('horizontal') {
|
|
<div class="mat-horizontal-stepper-wrapper">
|
|
<div class="mat-horizontal-stepper-header-container">
|
|
@for (step of steps; track step; let i = $index, isLast = $last) {
|
|
<ng-container
|
|
[ngTemplateOutlet]="stepTemplate"
|
|
[ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
|
|
@if (!isLast) {
|
|
<div class="mat-stepper-horizontal-line"></div>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<div class="mat-horizontal-content-container">
|
|
@for (step of steps; track step; let i = $index) {
|
|
<div class="mat-horizontal-stepper-content" role="tabpanel"
|
|
[@horizontalStepTransition]="{
|
|
'value': _getAnimationDirection(i),
|
|
'params': {'animationDuration': _getAnimationDuration()}
|
|
}"
|
|
(@horizontalStepTransition.done)="_animationDone.next($event)"
|
|
[id]="_getStepContentId(i)"
|
|
[attr.aria-labelledby]="_getStepLabelId(i)"
|
|
[class.mat-horizontal-stepper-content-inactive]="selectedIndex !== i">
|
|
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@case ('vertical') {
|
|
@for (step of steps; track step; let i = $index, isLast = $last) {
|
|
<div class="mat-step">
|
|
<ng-container
|
|
[ngTemplateOutlet]="stepTemplate"
|
|
[ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
|
|
<div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
|
|
<div class="mat-vertical-stepper-content" role="tabpanel"
|
|
[@verticalStepTransition]="{
|
|
'value': _getAnimationDirection(i),
|
|
'params': {'animationDuration': _getAnimationDuration()}
|
|
}"
|
|
(@verticalStepTransition.done)="_animationDone.next($event)"
|
|
[id]="_getStepContentId(i)"
|
|
[attr.aria-labelledby]="_getStepLabelId(i)"
|
|
[class.mat-vertical-stepper-content-inactive]="selectedIndex !== i">
|
|
<div class="mat-vertical-content">
|
|
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
|
|
<!-- Common step templating -->
|
|
<ng-template let-step="step" let-i="i" #stepTemplate>
|
|
<mat-step-header
|
|
[class.mat-horizontal-stepper-header]="orientation === 'horizontal'"
|
|
[class.mat-vertical-stepper-header]="orientation === 'vertical'"
|
|
(click)="step.select()"
|
|
(keydown)="_onKeydown($event)"
|
|
[tabIndex]="_getFocusIndex() === i ? 0 : -1"
|
|
[id]="_getStepLabelId(i)"
|
|
[attr.aria-posinset]="i + 1"
|
|
[attr.aria-setsize]="steps.length"
|
|
[attr.aria-controls]="_getStepContentId(i)"
|
|
[attr.aria-selected]="selectedIndex == i"
|
|
[attr.aria-label]="step.ariaLabel || null"
|
|
[attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
|
|
[attr.aria-disabled]="_stepIsNavigable(i, step) ? null : true"
|
|
[index]="i"
|
|
[state]="_getIndicatorType(i, step.state)"
|
|
[label]="step.stepLabel || step.label"
|
|
[selected]="selectedIndex === i"
|
|
[active]="_stepIsNavigable(i, step)"
|
|
[optional]="step.optional"
|
|
[errorMessage]="step.errorMessage"
|
|
[iconOverrides]="_iconOverrides"
|
|
[disableRipple]="disableRipple || !_stepIsNavigable(i, step)"
|
|
[color]="step.color || color"></mat-step-header>
|
|
</ng-template>
|