paperless-ngx/src-ui/src/app/app.component.html

<app-toasts></app-toasts>

<ngx-file-drop dropZoneClassName="main-dropzone" contentClassName="main-content" [disabled]="!dragDropEnabled"
(onFileDrop)="dropped($event)" (onFileOver)="fileOver()" (onFileLeave)="fileLeave()">
    <ng-template ngx-file-drop-content-tmp>
        <div class="global-dropzone-overlay fade" [class.show]="fileIsOver" [class.hide]="hidden">
            <h2 i18n>Drop files to begin upload</h2>
        </div>
        <div [class.inert]="fileIsOver">
            <router-outlet></router-outlet>
        </div>
    </ng-template>
</ngx-file-drop>

<tour-step-template>
    <ng-template #tourStep let-step="step">
        <p class="tour-step-content" [innerHTML]="step?.content"></p>
        <div class="d-flex justify-content-between align-items-end">
            <span class="badge bg-secondary">{{ tourService.steps?.indexOf(step) + 1 }}/{{ tourService.steps?.length }}</span>
            <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
                <div class="btn-group me-2" role="group" aria-label="Dismiss">
                    <button class="btn btn-outline-danger btn-sm" (click)="tourService.end()">
                        {{ step?.endBtnTitle }}
                    </button>
                </div>
                <div class="btn-group align-self-end" role="group" aria-label="Previous / Next">
                    <button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.prev()">
                        « {{ step?.prevBtnTitle }}
                    </button>
                    <button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.next()">
                        {{ step?.nextBtnTitle }} »
                    </button>
                </div>
            </div>
        </div>
    </ng-template>
</tour-step-template>