38 lines
1.0 KiB
HTML
38 lines
1.0 KiB
HTML
<div class="stepper-container">
|
|
|
|
<!-- Horizontal indicator bar -->
|
|
<div class="stepper-header">
|
|
@for (step of steps(); track step; let i = $index; let last = $last) {
|
|
<div
|
|
class="stepper-header__item"
|
|
[ngClass]="{
|
|
'is-active': currentStepIndex() === i,
|
|
'is-completed': currentStepIndex() > i
|
|
}"
|
|
>
|
|
<!-- Connecting line before (except first) -->
|
|
@if (i > 0) {
|
|
<div class="stepper-header__line" [ngClass]="{ 'is-completed': currentStepIndex() > i - 1 }"></div>
|
|
}
|
|
|
|
<!-- Circle indicator -->
|
|
<div
|
|
class="stepper-header__circle"
|
|
[attr.aria-label]="step.label()"
|
|
[class.is-clickable]="currentStepIndex() > i"
|
|
(click)="goToStep(i)"
|
|
></div>
|
|
|
|
<!-- Label -->
|
|
<span class="stepper-header__label">{{ step.label() }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Step content panel: only renders the active step's projected content -->
|
|
<div class="stepper-body">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
|
|
</div>
|