stepper.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" role="tablist">
        @for (step of steps; track step) {
          <ng-container
            [ngTemplateOutlet]="stepTemplate"
            [ngTemplateOutletContext]="{step, i: $index}"/>
          @if (!$last) {
            <div class="mat-stepper-horizontal-line"></div>
          }
        }
      </div>

      <div class="mat-horizontal-content-container">
        @for (step of steps; track step) {
          <div
            #animatedContainer
            class="mat-horizontal-stepper-content"
            role="tabpanel"
            [id]="_getStepContentId($index)"
            [attr.aria-labelledby]="_getStepLabelId($index)"
            [class]="'mat-horizontal-stepper-content-' + _getAnimationDirection($index)"
            [attr.inert]="selectedIndex === $index ? null : ''">
            <ng-container [ngTemplateOutlet]="step.content"/>
          </div>
        }
      </div>
    </div>
  }

  @case ('vertical') {
    <div class="mat-vertical-stepper-wrapper" role="tree">
      @for (step of steps; track step) {
        <div class="mat-step"
          role="treeitem"
          [attr.aria-setsize]="steps.length"
          [attr.aria-posinset]="$index + 1"
          [attr.aria-selected]="selectedIndex == $index"
          [attr.aria-controls]="_getStepContentId($index)"
          [attr.aria-label]="step.ariaLabel || null"
          [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
          [attr.aria-disabled]="_stepIsNavigable($index, step) ? null : true">
          <ng-container
            [ngTemplateOutlet]="stepTemplate"
            [ngTemplateOutletContext]="{step, i: $index}"/>
          <div
            #animatedContainer
            class="mat-vertical-content-container"
            [class.mat-stepper-vertical-line]="!$last"
            [class.mat-vertical-content-container-active]="selectedIndex === $index"
            [attr.inert]="selectedIndex === $index ? null : ''">
            <div class="mat-vertical-stepper-content"
              [id]="_getStepContentId($index)"
              [attr.aria-labelledby]="_getStepLabelId($index)">
              <div class="mat-vertical-content">
                <ng-container [ngTemplateOutlet]="step.content"/>
              </div>
            </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.role]="orientation === 'horizontal'? 'tab' : undefined"
    [attr.aria-posinset]="orientation === 'horizontal'? i + 1 : undefined"
    [attr.aria-setsize]="orientation === 'horizontal'? steps.length : undefined"
    [attr.aria-controls]="orientation === 'horizontal'? _getStepContentId(i) : undefined"
    [attr.aria-selected]="orientation === 'horizontal'? selectedIndex == i : undefined"
    [attr.aria-label]="step.ariaLabel || null"
    [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
    [attr.aria-disabled]="orientation === 'horizontal'? _stepIsNavigable(i, step) ? null : true : undefined"
    [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"/>
</ng-template>