43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
@if (onboarding.currentStep(); as step) {
|
|
<div class="onboarding-layer">
|
|
@if (targetBox(); as box) {
|
|
<div class="onboarding-marker" [style]="markerStyle()"></div>
|
|
}
|
|
|
|
<section
|
|
class="onboarding-panel"
|
|
[class.mobile-panel]="isMobile()"
|
|
[style]="panelStyle()"
|
|
aria-live="polite"
|
|
>
|
|
<div class="step-line">
|
|
<span>Schritt {{ onboarding.currentStepNumber() }} von {{ onboarding.totalSteps }}</span>
|
|
<button mat-icon-button type="button" aria-label="Onboarding schließen" (click)="onboarding.skip()">
|
|
<mat-icon aria-hidden="true">close</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<h2>{{ step.title }}</h2>
|
|
<p>{{ step.body }}</p>
|
|
|
|
<div class="onboarding-actions">
|
|
@if (!hasTarget() && step.key !== 'complete') {
|
|
<button mat-stroked-button type="button" (click)="goToCurrentStep()">
|
|
<mat-icon aria-hidden="true">my_location</mat-icon>
|
|
Zum Schritt
|
|
</button>
|
|
}
|
|
|
|
@if (step.key === 'complete') {
|
|
<button mat-flat-button type="button" (click)="onboarding.finish()">
|
|
<mat-icon aria-hidden="true">check</mat-icon>
|
|
Fertig
|
|
</button>
|
|
} @else {
|
|
<button mat-button type="button" (click)="onboarding.skip()">Überspringen</button>
|
|
}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
}
|