<c8y-stepper
  [customClasses]="['p-t-32', 'p-b-32', 'm-l-48', 'm-r-48']"
  class="d-flex d-col fit-h"
  [disableDefaultIcons]="{ edit: true, done: false }"
>
  <cdk-step
    *ngFor="let step of steps"
    [label]="step.label"
    [state]="step.state"
    [completed]="step.completed"
    [optional]="!step.required"
  >
    <ng-container *c8yComponentOutlet="step.component; environmentInjector: step.injector"></ng-container>
    <c8y-stepper-buttons *ngIf="showDefaultButtons"></c8y-stepper-buttons>
    <ng-template c8yStepperIcon="error">
      <span c8yIcon="error"></span>
    </ng-template>
    <ng-template c8yStepperIcon="warning">
      <span c8yIcon="warning"></span>
    </ng-template>
    <ng-template c8yStepperIcon="done">
      <span c8yIcon="check"></span>
    </ng-template>
  </cdk-step>
</c8y-stepper>