quickTour.template.html

<mat-card
    iav-window-resize
    [iav-window-resize-time]="64"
    (iav-window-resize-event)="handleWindowResize()"
    [style.width]="tourCardWidth"
    [style.transform]="tourCardTransform"
    #quickTourDialog>
    <mat-card-content>
        <markdown-dom *ngIf="descriptionMd$ | async as md; else plainTxtTmpl"
            [markdown]="md">
        </markdown-dom>
        <ng-template #plainTxtTmpl>
            {{ description$ | async }}
        </ng-template>
    </mat-card-content>
    <mat-card-actions>
        <button  mat-icon-button
            (click)="prevSlide()"
            [disabled]="isFirst$ | async"
            matTooltip="Previous [LEFT ARROW]">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button mat-icon-button
            (click)="nextSlide()"
            [disabled]="isLast$ | async"
            matTooltip="Next [RIGHT ARROW]">
            <i class="fas fa-chevron-right"></i>
        </button>

        <!-- dismiss (last) -->
        <ng-template [ngIf]="isLast$ | async" [ngIfElse]="notLastTmpl">
            <button mat-stroked-button
                color="primary"
                (click)="endTour()"
                matTooltip="Dismiss [ESC]">
                <i class="m-1 fas fa-check"></i>
                <span>complete</span>
            </button>
        </ng-template>

        <!-- dismiss (not last) -->
        <ng-template #notLastTmpl>
            <button mat-icon-button
                (click)="endTour()"
                matTooltip="Dismiss [ESC]">
                <i class="fas fa-times"></i>
            </button>
        </ng-template>

        <!-- progress dots -->
        <span class="muted d-inline-flex align-items-center">
            <i *ngFor="let active of quickTourProgress$ | async; let index = index"
                (click)="ff(index)"
                [ngClass]="{ 'fa-xs muted-3': !active }"
                class="ml-1 fas fa-circle cursor-pointer progress-dot"></i>
        </span>
    </mat-card-actions>
</mat-card>

<div *ngIf="arrowTmpl" [style.transform]="customArrowTransform"
    class="custom-svg">
    <ng-container *ngTemplateOutlet="arrowTmpl">
    </ng-container>
</div>

<ng-template [ngIf]="arrowSrc">
    arrow src not yet implmented
</ng-template>

<quick-tour-arrow
    *ngIf="!arrowTmpl && !arrowSrc"
    [quick-tour-arrow-to]="arrowTo"
    [quick-tour-arrow-from]="arrowFrom"
    [quick-tour-arrow-type]="arrowType">
</quick-tour-arrow>