91c9690953
- Added RoomBasicCreationComponent for creating a room with optional name prefix. - Integrated basic creation into RoomWizardComponent, allowing users to switch to advanced mode. - Updated wizard navigation to include 'back' functionality and adjusted visibility of navigation buttons. - Created RoomDetailsComponent for configuring room details, including auto-deletion date and time. - Enhanced styling for new components and ensured responsive design. - Updated wizard state service to manage new steps and handle edit mode appropriately.
95 lines
2.3 KiB
HTML
95 lines
2.3 KiB
HTML
<nav class="wizard-navigation" [class.loading]="false" [class.compact]="false" id="wizard-navigation">
|
|
<div class="nav-buttons">
|
|
<!-- Cancel Button -->
|
|
@if (config.showCancel) {
|
|
<button
|
|
mat-stroked-button
|
|
class="cancel-btn"
|
|
id="wizard-cancel-btn"
|
|
(click)="onCancel()"
|
|
[attr.aria-label]="'Cancel wizard and return to previous page'"
|
|
>
|
|
<mat-icon class="leading-icon">close</mat-icon>
|
|
{{ config.cancelLabel || 'Cancel' }}
|
|
</button>
|
|
}
|
|
|
|
@if (config.showBack) {
|
|
<!-- Back Button -->
|
|
<button
|
|
mat-stroked-button
|
|
class="back-btn"
|
|
id="wizard-back-btn"
|
|
(click)="onBack()"
|
|
[attr.aria-label]="'Go back'"
|
|
>
|
|
<mat-icon class="leading-icon">arrow_back</mat-icon>
|
|
{{ backButtonText }}
|
|
</button>
|
|
}
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<!-- Navigation Group -->
|
|
<div class="nav-group">
|
|
<!-- Previous Button -->
|
|
@if (config.showPrevious) {
|
|
<button
|
|
mat-stroked-button
|
|
class="prev-btn"
|
|
id="wizard-previous-btn"
|
|
(click)="onPrevious()"
|
|
[attr.aria-label]="'Go to previous step'"
|
|
>
|
|
<mat-icon class="leading-icon">chevron_left</mat-icon>
|
|
{{ config.previousLabel || 'Previous' }}
|
|
</button>
|
|
}
|
|
|
|
@if (config.showSkipAndFinish) {
|
|
<!-- Skip Wizard Button -->
|
|
<button
|
|
mat-raised-button
|
|
class="finish-btn"
|
|
id="wizard-quick-create-btn"
|
|
[disabled]="config.disableFinish ?? false"
|
|
(click)="skipAndFinish()"
|
|
[attr.aria-label]="'Skip wizard and finish'"
|
|
>
|
|
<mat-icon>bolt</mat-icon>
|
|
{{ config.skipAndFinishLabel || 'Skip and Finish' }}
|
|
</button>
|
|
}
|
|
|
|
<!-- Next Button -->
|
|
@if (config.showNext) {
|
|
<button
|
|
mat-raised-button
|
|
class="next-btn"
|
|
id="wizard-next-btn"
|
|
(click)="onNext()"
|
|
[attr.aria-label]="'Continue to next step'"
|
|
>
|
|
{{ config.nextLabel || 'Next' }}
|
|
<mat-icon class="trailing-icon">chevron_right</mat-icon>
|
|
</button>
|
|
}
|
|
|
|
<!-- Finish Button -->
|
|
@if (config.showFinish) {
|
|
<button
|
|
mat-raised-button
|
|
class="finish-btn"
|
|
id="wizard-finish-btn"
|
|
[disabled]="config.disableFinish ?? false"
|
|
(click)="onFinish()"
|
|
[attr.aria-label]="'Complete wizard and save changes'"
|
|
>
|
|
<mat-icon class="leading-icon">check</mat-icon>
|
|
{{ config.finishLabel || 'Finish' }}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</nav>
|