ngx-ui-tour-ngx-bootstrap/esm2022/lib/tour-step-template/tour-step-template.component.mjs

UI tour library for Angular 12+

import { Component, ContentChild, inject, Input, TemplateRef, ViewChild } from '@angular/core';
import { TourHotkeyListenerComponent } from 'ngx-ui-tour-core';
import { TourStepTemplateService } from '../tour-step-template.service';
import { NgxbTourService } from '../ngx-bootstrap-tour.service';
import * as i0 from "@angular/core";
export class TourStepTemplateComponent extends TourHotkeyListenerComponent {
    constructor() {
        super(...arguments);
        this.tourStepTemplateService = inject(TourStepTemplateService);
        this.tourService = inject(NgxbTourService);
    }
    ngAfterContentInit() {
        this.tourStepTemplateService.template =
            this.stepTemplate ||
                this.stepTemplateContent ||
                this.defaultTourStepTemplate;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourStepTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TourStepTemplateComponent, isStandalone: true, selector: "tour-step-template", inputs: { stepTemplate: "stepTemplate" }, queries: [{ propertyName: "stepTemplateContent", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "defaultTourStepTemplate", first: true, predicate: ["tourStep"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #tourStep let-step=\"step\">\n    <div\n        [style.width]=\"step.stepDimensions?.width\"\n        [style.min-width]=\"step.stepDimensions?.minWidth\"\n        [style.max-width]=\"step.stepDimensions?.maxWidth\"\n        class=\"main-container\"\n    >\n        @if (!step?.useLegacyTitle && step?.title) {\n            <div class=\"title-container\">\n                <h5>{{ step?.title }}</h5>\n                <button\n                    type=\"button\"\n                    class=\"btn-close\"\n                    aria-label=\"Close\"\n                    (click)=\"tourService.end()\"\n                ></button>\n            </div>\n        }\n        <p\n            class=\"card-text\"\n            [innerHTML]=\"step?.content\"\n        ></p>\n        <div class=\"buttons\">\n            <button\n                [disabled]=\"!tourService.hasPrev(step)\"\n                class=\"btn btn-sm btn-outline-secondary prev\"\n                (click)=\"tourService.prev()\"\n            >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                    <path d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n                </svg>\n                {{ step?.prevBtnTitle }}\n            </button>\n            @if (step.showProgress) {\n                <div class=\"progress\">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</div>\n            }\n            @if (tourService.hasNext(step) && !step.nextOnAnchorClick) {\n                <button\n                    class=\"btn btn-sm btn-outline-primary next\"\n                    (click)=\"tourService.next()\"\n                >\n                    {{ step?.nextBtnTitle }}\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                        <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n                    </svg>\n                </button>\n            }\n            @if (!tourService.hasNext(step)) {\n                <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"tourService.end()\"\n                >\n                    {{ step?.endBtnTitle }}\n                </button>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep .tour-step .popover-body{padding:0}.main-container{padding:.5rem 1rem .75rem}.title-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;gap:.25rem}.title-container h5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0;line-height:1.5}.buttons{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.buttons>*{max-width:-moz-fit-content;max-width:fit-content}.buttons>*:last-child{justify-self:flex-end}.buttons .progress{font-size:12px;font-weight:700;color:#00000073;white-space:nowrap}.buttons .btn{display:flex;align-items:center;gap:.25rem}.buttons .btn.prev{padding-left:.25rem}.buttons .btn.next{padding-right:.25rem}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourStepTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tour-step-template', standalone: true, template: "<ng-template #tourStep let-step=\"step\">\n    <div\n        [style.width]=\"step.stepDimensions?.width\"\n        [style.min-width]=\"step.stepDimensions?.minWidth\"\n        [style.max-width]=\"step.stepDimensions?.maxWidth\"\n        class=\"main-container\"\n    >\n        @if (!step?.useLegacyTitle && step?.title) {\n            <div class=\"title-container\">\n                <h5>{{ step?.title }}</h5>\n                <button\n                    type=\"button\"\n                    class=\"btn-close\"\n                    aria-label=\"Close\"\n                    (click)=\"tourService.end()\"\n                ></button>\n            </div>\n        }\n        <p\n            class=\"card-text\"\n            [innerHTML]=\"step?.content\"\n        ></p>\n        <div class=\"buttons\">\n            <button\n                [disabled]=\"!tourService.hasPrev(step)\"\n                class=\"btn btn-sm btn-outline-secondary prev\"\n                (click)=\"tourService.prev()\"\n            >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                    <path d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"/>\n                </svg>\n                {{ step?.prevBtnTitle }}\n            </button>\n            @if (step.showProgress) {\n                <div class=\"progress\">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</div>\n            }\n            @if (tourService.hasNext(step) && !step.nextOnAnchorClick) {\n                <button\n                    class=\"btn btn-sm btn-outline-primary next\"\n                    (click)=\"tourService.next()\"\n                >\n                    {{ step?.nextBtnTitle }}\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n                        <path d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\"/>\n                    </svg>\n                </button>\n            }\n            @if (!tourService.hasNext(step)) {\n                <button\n                    class=\"btn btn-sm btn-outline-primary\"\n                    (click)=\"tourService.end()\"\n                >\n                    {{ step?.endBtnTitle }}\n                </button>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep .tour-step .popover-body{padding:0}.main-container{padding:.5rem 1rem .75rem}.title-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;gap:.25rem}.title-container h5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0;line-height:1.5}.buttons{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.buttons>*{max-width:-moz-fit-content;max-width:fit-content}.buttons>*:last-child{justify-self:flex-end}.buttons .progress{font-size:12px;font-weight:700;color:#00000073;white-space:nowrap}.buttons .btn{display:flex;align-items:center;gap:.25rem}.buttons .btn.prev{padding-left:.25rem}.buttons .btn.next{padding-right:.25rem}\n"] }]
        }], propDecorators: { defaultTourStepTemplate: [{
                type: ViewChild,
                args: ['tourStep', { read: TemplateRef, static: true }]
            }], stepTemplate: [{
                type: Input
            }], stepTemplateContent: [{
                type: ContentChild,
                args: [TemplateRef]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91ci1zdGVwLXRlbXBsYXRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC11aS10b3VyLW5neC1ib290c3RyYXAvc3JjL2xpYi90b3VyLXN0ZXAtdGVtcGxhdGUvdG91ci1zdGVwLXRlbXBsYXRlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC11aS10b3VyLW5neC1ib290c3RyYXAvc3JjL2xpYi90b3VyLXN0ZXAtdGVtcGxhdGUvdG91ci1zdGVwLXRlbXBsYXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBbUIsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDL0csT0FBTyxFQUFDLDJCQUEyQixFQUFDLE1BQU0sa0JBQWtCLENBQUM7QUFDN0QsT0FBTyxFQUFDLHVCQUF1QixFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDdEUsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLCtCQUErQixDQUFDOztBQVM5RCxNQUFNLE9BQU8seUJBQTBCLFNBQVEsMkJBQTJCO0lBTjFFOztRQWlCcUIsNEJBQXVCLEdBQUcsTUFBTSxDQUFDLHVCQUF1QixDQUFDLENBQUM7UUFDbEQsZ0JBQVcsR0FBRyxNQUFNLENBQUMsZUFBZSxDQUFDLENBQUM7S0FTbEU7SUFQVSxrQkFBa0I7UUFDckIsSUFBSSxDQUFDLHVCQUF1QixDQUFDLFFBQVE7WUFDakMsSUFBSSxDQUFDLFlBQVk7Z0JBQ2pCLElBQUksQ0FBQyxtQkFBbUI7Z0JBQ3hCLElBQUksQ0FBQyx1QkFBdUIsQ0FBQztJQUNyQyxDQUFDOzhHQW5CUSx5QkFBeUI7a0dBQXpCLHlCQUF5Qix5S0FRcEIsV0FBVyxnSkFOSyxXQUFXLGtFQ2Q3QyxtL0VBMERBOzsyRkQ5Q2EseUJBQXlCO2tCQU5yQyxTQUFTOytCQUNJLG9CQUFvQixjQUdsQixJQUFJOzhCQUtULHVCQUF1QjtzQkFEN0IsU0FBUzt1QkFBQyxVQUFVLEVBQUUsRUFBQyxJQUFJLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBSWpELFlBQVk7c0JBRGxCLEtBQUs7Z0JBSUMsbUJBQW1CO3NCQUR6QixZQUFZO3VCQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBpbmplY3QsIElucHV0LCBUZW1wbGF0ZVJlZiwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VG91ckhvdGtleUxpc3RlbmVyQ29tcG9uZW50fSBmcm9tICduZ3gtdWktdG91ci1jb3JlJztcbmltcG9ydCB7VG91clN0ZXBUZW1wbGF0ZVNlcnZpY2V9IGZyb20gJy4uL3RvdXItc3RlcC10ZW1wbGF0ZS5zZXJ2aWNlJztcbmltcG9ydCB7Tmd4YlRvdXJTZXJ2aWNlfSBmcm9tICcuLi9uZ3gtYm9vdHN0cmFwLXRvdXIuc2VydmljZSc7XG5pbXBvcnQge0lTdGVwT3B0aW9ufSBmcm9tICcuLi8uLi9wdWJsaWNfYXBpJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0b3VyLXN0ZXAtdGVtcGxhdGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90b3VyLXN0ZXAtdGVtcGxhdGUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3RvdXItc3RlcC10ZW1wbGF0ZS5jb21wb25lbnQuc2NzcyddLFxuICAgIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgVG91clN0ZXBUZW1wbGF0ZUNvbXBvbmVudCBleHRlbmRzIFRvdXJIb3RrZXlMaXN0ZW5lckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG4gICAgQFZpZXdDaGlsZCgndG91clN0ZXAnLCB7cmVhZDogVGVtcGxhdGVSZWYsIHN0YXRpYzogdHJ1ZX0pXG4gICAgcHVibGljIGRlZmF1bHRUb3VyU3RlcFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjx7IHN0ZXA6IElTdGVwT3B0aW9uIH0+O1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc3RlcFRlbXBsYXRlOiBUZW1wbGF0ZVJlZjx7IHN0ZXA6IElTdGVwT3B0aW9uIH0+O1xuXG4gICAgQENvbnRlbnRDaGlsZChUZW1wbGF0ZVJlZilcbiAgICBwdWJsaWMgc3RlcFRlbXBsYXRlQ29udGVudDogVGVtcGxhdGVSZWY8eyBzdGVwOiBJU3RlcE9wdGlvbiB9PjtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgdG91clN0ZXBUZW1wbGF0ZVNlcnZpY2UgPSBpbmplY3QoVG91clN0ZXBUZW1wbGF0ZVNlcnZpY2UpO1xuICAgIHB1YmxpYyBvdmVycmlkZSByZWFkb25seSB0b3VyU2VydmljZSA9IGluamVjdChOZ3hiVG91clNlcnZpY2UpO1xuXG4gICAgcHVibGljIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50b3VyU3RlcFRlbXBsYXRlU2VydmljZS50ZW1wbGF0ZSA9XG4gICAgICAgICAgICB0aGlzLnN0ZXBUZW1wbGF0ZSB8fFxuICAgICAgICAgICAgdGhpcy5zdGVwVGVtcGxhdGVDb250ZW50IHx8XG4gICAgICAgICAgICB0aGlzLmRlZmF1bHRUb3VyU3RlcFRlbXBsYXRlO1xuICAgIH1cblxufVxuIiwiPG5nLXRlbXBsYXRlICN0b3VyU3RlcCBsZXQtc3RlcD1cInN0ZXBcIj5cbiAgICA8ZGl2XG4gICAgICAgIFtzdHlsZS53aWR0aF09XCJzdGVwLnN0ZXBEaW1lbnNpb25zPy53aWR0aFwiXG4gICAgICAgIFtzdHlsZS5taW4td2lkdGhdPVwic3RlcC5zdGVwRGltZW5zaW9ucz8ubWluV2lkdGhcIlxuICAgICAgICBbc3R5bGUubWF4LXdpZHRoXT1cInN0ZXAuc3RlcERpbWVuc2lvbnM/Lm1heFdpZHRoXCJcbiAgICAgICAgY2xhc3M9XCJtYWluLWNvbnRhaW5lclwiXG4gICAgPlxuICAgICAgICBAaWYgKCFzdGVwPy51c2VMZWdhY3lUaXRsZSAmJiBzdGVwPy50aXRsZSkge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxoNT57eyBzdGVwPy50aXRsZSB9fTwvaDU+XG4gICAgICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJidG4tY2xvc2VcIlxuICAgICAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPVwiQ2xvc2VcIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwidG91clNlcnZpY2UuZW5kKClcIlxuICAgICAgICAgICAgICAgID48L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICAgIDxwXG4gICAgICAgICAgICBjbGFzcz1cImNhcmQtdGV4dFwiXG4gICAgICAgICAgICBbaW5uZXJIVE1MXT1cInN0ZXA/LmNvbnRlbnRcIlxuICAgICAgICA+PC9wPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYnV0dG9uc1wiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCIhdG91clNlcnZpY2UuaGFzUHJldihzdGVwKVwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLXNtIGJ0bi1vdXRsaW5lLXNlY29uZGFyeSBwcmV2XCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwidG91clNlcnZpY2UucHJldigpXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB3aWR0aD1cIjE2XCIgaGVpZ2h0PVwiMTZcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgdmlld0JveD1cIjAgMCAxNiAxNlwiPlxuICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPVwiTTExLjM1NCAxLjY0NmEuNS41IDAgMCAxIDAgLjcwOEw1LjcwNyA4bDUuNjQ3IDUuNjQ2YS41LjUgMCAwIDEtLjcwOC43MDhsLTYtNmEuNS41IDAgMCAxIDAtLjcwOGw2LTZhLjUuNSAwIDAgMSAuNzA4IDB6XCIvPlxuICAgICAgICAgICAgICAgIDwvc3ZnPlxuICAgICAgICAgICAgICAgIHt7IHN0ZXA/LnByZXZCdG5UaXRsZSB9fVxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICBAaWYgKHN0ZXAuc2hvd1Byb2dyZXNzKSB7XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInByb2dyZXNzXCI+e3sgdG91clNlcnZpY2Uuc3RlcHM/LmluZGV4T2Yoc3RlcCkgKyAxIH19IC8ge3sgdG91clNlcnZpY2Uuc3RlcHM/Lmxlbmd0aCB9fTwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgQGlmICh0b3VyU2VydmljZS5oYXNOZXh0KHN0ZXApICYmICFzdGVwLm5leHRPbkFuY2hvckNsaWNrKSB7XG4gICAgICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tc20gYnRuLW91dGxpbmUtcHJpbWFyeSBuZXh0XCJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInRvdXJTZXJ2aWNlLm5leHQoKVwiXG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7eyBzdGVwPy5uZXh0QnRuVGl0bGUgfX1cbiAgICAgICAgICAgICAgICAgICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIxNlwiIGhlaWdodD1cIjE2XCIgZmlsbD1cImN1cnJlbnRDb2xvclwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9XCJNNC42NDYgMS42NDZhLjUuNSAwIDAgMSAuNzA4IDBsNiA2YS41LjUgMCAwIDEgMCAuNzA4bC02IDZhLjUuNSAwIDAgMS0uNzA4LS43MDhMMTAuMjkzIDggNC42NDYgMi4zNTRhLjUuNSAwIDAgMSAwLS43MDh6XCIvPlxuICAgICAgICAgICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBpZiAoIXRvdXJTZXJ2aWNlLmhhc05leHQoc3RlcCkpIHtcbiAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1zbSBidG4tb3V0bGluZS1wcmltYXJ5XCJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInRvdXJTZXJ2aWNlLmVuZCgpXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHt7IHN0ZXA/LmVuZEJ0blRpdGxlIH19XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==