ngx-ui-tour-primeng/fesm2022/ngx-ui-tour-primeng.mjs

UI tour library for Angular

import * as i0 from '@angular/core';
import { Injectable, input, inject, ChangeDetectionStrategy, Component, viewChild, contentChild, TemplateRef, signal, ElementRef, Input, Directive, NgModule } from '@angular/core';
import { Popover } from 'primeng/popover';
import { TourService, TourHotkeyListenerComponent, TourState, BaseTourProxyAnchor } from 'ngx-ui-tour-core';
import { NgTemplateOutlet } from '@angular/common';
import { Button } from 'primeng/button';
import { firstValueFrom, first } from 'rxjs';

class PrimeNgTourService extends TourService {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PrimeNgTourService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PrimeNgTourService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PrimeNgTourService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

class TourStepTemplateService {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourStepTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourStepTemplateService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourStepTemplateService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

class TourDefaultStepTemplateComponent {
    constructor() {
        this.step = input.required();
        this.tourService = inject(PrimeNgTourService);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourDefaultStepTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: TourDefaultStepTemplateComponent, isStandalone: true, selector: "tour-default-step-template", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.width": "step().stepDimensions?.width", "style.min-width": "step().stepDimensions?.minWidth", "style.max-width": "step().stepDimensions?.maxWidth" } }, ngImport: i0, template: "@let step = this.step();\r\n\r\n<div class=\"title-container\">\r\n    <div class=\"title\">{{ step?.title }}</div>\r\n    <p-button\r\n        severity=\"secondary\"\r\n        icon=\"pi pi-times\"\r\n        ariaLabel=\"Close\"\r\n        variant=\"text\"\r\n        [rounded]=\"true\"\r\n        (click)=\"tourService.end()\"\r\n    />\r\n</div>\r\n\r\n<p\r\n    class=\"card-text\"\r\n    [innerHTML]=\"step.content\"\r\n></p>\r\n\r\n<div\r\n    class=\"buttons\"\r\n    [class.no-progress]=\"!step.showProgress\"\r\n>\r\n    <p-button\r\n        [disabled]=\"!tourService.hasPrev(step)\"\r\n        icon=\"pi pi-angle-left\"\r\n        iconPos=\"left\"\r\n        severity=\"secondary\"\r\n        class=\"prev\"\r\n        [label]=\"step.prevBtnTitle\"\r\n        (click)=\"tourService.prev()\"\r\n    />\r\n    @if (step.showProgress) {\r\n        <div class=\"progress\">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div>\r\n    }\r\n\r\n    @if (tourService.hasNext(step) && !step.nextOnAnchorClick) {\r\n        <p-button\r\n            icon=\"pi pi-angle-right\"\r\n            iconPos=\"right\"\r\n            class=\"next\"\r\n            [label]=\"step.nextBtnTitle\"\r\n            (click)=\"tourService.next()\"\r\n        />\r\n    }\r\n    @if (!tourService.hasNext(step)) {\r\n        <p-button\r\n            [label]=\"step.endBtnTitle\"\r\n            (click)=\"tourService.end()\"\r\n        />\r\n    }\r\n</div>\r\n", styles: [":host{padding:.5rem 1rem .75rem;display:block}.title-container{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-bottom:.5rem}.title-container .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;font-size:1.25rem;font-weight:500}.card-text{line-height:1.625;margin:0 0 1rem}.buttons{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.buttons>*{max-width:fit-content}.buttons>*:last-child{justify-self:flex-end}.buttons .progress{font-weight:500;font-size:.875rem;color:var(--p-text-muted-color, #737373);white-space:nowrap}.buttons.no-progress{grid-template-columns:1fr 1fr}.buttons p-button.prev ::ng-deep button{padding-left:.45rem}.buttons p-button.next ::ng-deep button{padding-right:.45rem}\n"], dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourDefaultStepTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tour-default-step-template', imports: [
                        Button
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[style.width]': 'step().stepDimensions?.width',
                        '[style.min-width]': 'step().stepDimensions?.minWidth',
                        '[style.max-width]': 'step().stepDimensions?.maxWidth'
                    }, template: "@let step = this.step();\r\n\r\n<div class=\"title-container\">\r\n    <div class=\"title\">{{ step?.title }}</div>\r\n    <p-button\r\n        severity=\"secondary\"\r\n        icon=\"pi pi-times\"\r\n        ariaLabel=\"Close\"\r\n        variant=\"text\"\r\n        [rounded]=\"true\"\r\n        (click)=\"tourService.end()\"\r\n    />\r\n</div>\r\n\r\n<p\r\n    class=\"card-text\"\r\n    [innerHTML]=\"step.content\"\r\n></p>\r\n\r\n<div\r\n    class=\"buttons\"\r\n    [class.no-progress]=\"!step.showProgress\"\r\n>\r\n    <p-button\r\n        [disabled]=\"!tourService.hasPrev(step)\"\r\n        icon=\"pi pi-angle-left\"\r\n        iconPos=\"left\"\r\n        severity=\"secondary\"\r\n        class=\"prev\"\r\n        [label]=\"step.prevBtnTitle\"\r\n        (click)=\"tourService.prev()\"\r\n    />\r\n    @if (step.showProgress) {\r\n        <div class=\"progress\">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div>\r\n    }\r\n\r\n    @if (tourService.hasNext(step) && !step.nextOnAnchorClick) {\r\n        <p-button\r\n            icon=\"pi pi-angle-right\"\r\n            iconPos=\"right\"\r\n            class=\"next\"\r\n            [label]=\"step.nextBtnTitle\"\r\n            (click)=\"tourService.next()\"\r\n        />\r\n    }\r\n    @if (!tourService.hasNext(step)) {\r\n        <p-button\r\n            [label]=\"step.endBtnTitle\"\r\n            (click)=\"tourService.end()\"\r\n        />\r\n    }\r\n</div>\r\n", styles: [":host{padding:.5rem 1rem .75rem;display:block}.title-container{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-bottom:.5rem}.title-container .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;font-size:1.25rem;font-weight:500}.card-text{line-height:1.625;margin:0 0 1rem}.buttons{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.buttons>*{max-width:fit-content}.buttons>*:last-child{justify-self:flex-end}.buttons .progress{font-weight:500;font-size:.875rem;color:var(--p-text-muted-color, #737373);white-space:nowrap}.buttons.no-progress{grid-template-columns:1fr 1fr}.buttons p-button.prev ::ng-deep button{padding-left:.45rem}.buttons p-button.next ::ng-deep button{padding-right:.45rem}\n"] }]
        }] });

class TourStepTemplateComponent extends TourHotkeyListenerComponent {
    constructor() {
        super(...arguments);
        this.popover = viewChild.required(Popover);
        this.stepTemplateContent = contentChild(TemplateRef);
        this.stepTemplate = input();
        this.tourService = inject(PrimeNgTourService);
        this.tourStepTemplateService = inject(TourStepTemplateService);
    }
    ngAfterViewInit() {
        this.tourStepTemplateService.templateComponent = this;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourStepTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: TourStepTemplateComponent, isStandalone: true, selector: "tour-step-template", inputs: { stepTemplate: { classPropertyName: "stepTemplate", publicName: "stepTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "stepTemplateContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: Popover, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<p-popover\r\n    [baseZIndex]=\"150\"\r\n>\r\n    <!--suppress JSUnusedGlobalSymbols -->\r\n    <ng-template #content>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                stepTemplate() || stepTemplateContent() || defaultTemplate;\r\n                context: {step: step}\r\n            \"\r\n        />\r\n    </ng-template>\r\n</p-popover>\r\n\r\n<ng-template #defaultTemplate let-step=\"step\">\r\n    <tour-default-step-template\r\n        [step]=\"step\"\r\n    />\r\n</ng-template>\r\n", styles: ["::ng-deep .p-popover.tour-step{--p-popover-content-padding: 0}\n"], dependencies: [{ kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TourDefaultStepTemplateComponent, selector: "tour-default-step-template", inputs: ["step"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourStepTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tour-step-template', imports: [
                        Popover,
                        NgTemplateOutlet,
                        TourDefaultStepTemplateComponent
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-popover\r\n    [baseZIndex]=\"150\"\r\n>\r\n    <!--suppress JSUnusedGlobalSymbols -->\r\n    <ng-template #content>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                stepTemplate() || stepTemplateContent() || defaultTemplate;\r\n                context: {step: step}\r\n            \"\r\n        />\r\n    </ng-template>\r\n</p-popover>\r\n\r\n<ng-template #defaultTemplate let-step=\"step\">\r\n    <tour-default-step-template\r\n        [step]=\"step\"\r\n    />\r\n</ng-template>\r\n", styles: ["::ng-deep .p-popover.tour-step{--p-popover-content-padding: 0}\n"] }]
        }] });

class TourAnchorPrimeNgDirective {
    constructor() {
        this.isActive = signal(false);
        this.element = inject(ElementRef);
        this.tourService = inject(PrimeNgTourService);
        this.stepTemplateService = inject(TourStepTemplateService);
    }
    ngOnInit() {
        this.tourService.register(this.tourAnchor, this);
    }
    ngOnDestroy() {
        this.tourService.unregister(this.tourAnchor);
    }
    async showTourStep(step) {
        const templateComponent = this.stepTemplateService.templateComponent, popover = templateComponent.popover();
        if (popover.isOverlayAnimationInProgress) {
            await firstValueFrom(popover.onHide);
        }
        this.isActive.set(true);
        templateComponent.step = step;
        const popoverClass = step.popoverClass ?? '';
        popover.styleClass = `tour-step ${popoverClass}`;
        const event = {
            target: this.element.nativeElement
        };
        popover.dismissable = !!step.closeOnOutsideClick;
        popover.show(event);
        if (this.popoverCloseSubscription) {
            this.popoverCloseSubscription.unsubscribe();
        }
        this.popoverCloseSubscription = popover.onHide
            .pipe(first())
            .subscribe(() => {
            if (this.tourService.getStatus() !== TourState.OFF) {
                this.tourService.end();
            }
        });
    }
    hideTourStep() {
        this.isActive.set(false);
        if (this.popoverCloseSubscription) {
            this.popoverCloseSubscription.unsubscribe();
        }
        const popover = this.stepTemplateService.templateComponent.popover();
        popover.hide();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourAnchorPrimeNgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: TourAnchorPrimeNgDirective, isStandalone: true, selector: "[tourAnchor]", inputs: { tourAnchor: "tourAnchor" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourAnchorPrimeNgDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tourAnchor]'
                }]
        }], propDecorators: { tourAnchor: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class TourProxyAnchorComponent extends BaseTourProxyAnchor {
    constructor() {
        super(...arguments);
        this.anchorDirective = inject(TourAnchorPrimeNgDirective, {
            host: true
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourProxyAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: TourProxyAnchorComponent, isStandalone: true, selector: "tour-proxy-anchor", inputs: { anchorEl: "anchorEl" }, usesInheritance: true, hostDirectives: [{ directive: TourAnchorPrimeNgDirective, inputs: ["tourAnchor", "anchorId"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourProxyAnchorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'tour-proxy-anchor',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    hostDirectives: [{
                            directive: TourAnchorPrimeNgDirective,
                            inputs: ['tourAnchor: anchorId']
                        }]
                }]
        }], propDecorators: { anchorEl: [{
                type: Input,
                args: [{ required: true }]
            }] } });

const COMPONENTS = [TourStepTemplateComponent, TourAnchorPrimeNgDirective, TourProxyAnchorComponent];
class TourPrimeNgModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourPrimeNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: TourPrimeNgModule, imports: [TourStepTemplateComponent, TourAnchorPrimeNgDirective, TourProxyAnchorComponent], exports: [TourStepTemplateComponent, TourAnchorPrimeNgDirective, TourProxyAnchorComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourPrimeNgModule, imports: [TourStepTemplateComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TourPrimeNgModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: COMPONENTS,
                    exports: COMPONENTS
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { TourAnchorPrimeNgDirective, TourPrimeNgModule, TourProxyAnchorComponent, PrimeNgTourService as TourService, TourStepTemplateComponent };
//# sourceMappingURL=ngx-ui-tour-primeng.mjs.map