ngx-tour-ngx-bootstrap/fesm2015/ngx-tour-ngx-bootstrap.js

[](https://david-dm.org/isaacplmann/ngx-tour-ngx-bootstrap) [](https://david-dm

import { Injectable, Directive, ElementRef, Host, Input, HostBinding, Component, ViewEncapsulation, ViewChild, TemplateRef, ContentChild, NgModule } from '@angular/core';
import { TourService, TourHotkeyListenerComponent } from 'ngx-tour-core';
import { CommonModule } from '@angular/common';
import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
import withinviewport from 'withinviewport';

class NgxbTourService extends TourService {
}
NgxbTourService.decorators = [
    { type: Injectable }
];

class TourStepTemplateService {
}
TourStepTemplateService.decorators = [
    { type: Injectable }
];

class TourAnchorNgxBootstrapPopoverDirective extends PopoverDirective {
}
TourAnchorNgxBootstrapPopoverDirective.decorators = [
    { type: Directive, args: [{ selector: '[tourAnchor]' },] }
];
class TourAnchorNgxBootstrapDirective {
    constructor(tourService, tourStepTemplate, element, popoverDirective) {
        this.tourService = tourService;
        this.tourStepTemplate = tourStepTemplate;
        this.element = element;
        this.popoverDirective = popoverDirective;
        this.popoverDirective.triggers = '';
    }
    ngOnInit() {
        this.tourService.register(this.tourAnchor, this);
    }
    ngOnDestroy() {
        this.tourService.unregister(this.tourAnchor);
    }
    showTourStep(step) {
        this.isActive = true;
        this.popoverDirective.popover = this.tourStepTemplate.template;
        this.popoverDirective.popoverContext = { step };
        this.popoverDirective.popoverTitle = step.title;
        this.popoverDirective.container = 'body';
        this.popoverDirective.containerClass = 'ngx-bootstrap';
        if (step.containerClass) {
            this.popoverDirective.containerClass += ` ${step.containerClass}`;
        }
        this.popoverDirective.placement = step.placement || 'top';
        step.prevBtnTitle = step.prevBtnTitle || 'Prev';
        step.nextBtnTitle = step.nextBtnTitle || 'Next';
        step.endBtnTitle = step.endBtnTitle || 'End';
        this.popoverDirective.show();
        if (!step.preventScrolling) {
            if (!withinviewport(this.element.nativeElement, { sides: 'bottom' })) {
                this.element.nativeElement.scrollIntoView(false);
            }
            else if (!withinviewport(this.element.nativeElement, { sides: 'left top right' })) {
                this.element.nativeElement.scrollIntoView(true);
            }
        }
    }
    hideTourStep() {
        this.isActive = false;
        this.popoverDirective.hide();
    }
}
TourAnchorNgxBootstrapDirective.decorators = [
    { type: Directive, args: [{
                selector: '[tourAnchor]'
            },] }
];
TourAnchorNgxBootstrapDirective.ctorParameters = () => [
    { type: NgxbTourService },
    { type: TourStepTemplateService },
    { type: ElementRef },
    { type: TourAnchorNgxBootstrapPopoverDirective, decorators: [{ type: Host }] }
];
TourAnchorNgxBootstrapDirective.propDecorators = {
    tourAnchor: [{ type: Input }],
    isActive: [{ type: HostBinding, args: ['class.touranchor--is-active',] }]
};

class TourStepTemplateComponent extends TourHotkeyListenerComponent {
    constructor(tourStepTemplateService, tourService) {
        super(tourService);
        this.tourStepTemplateService = tourStepTemplateService;
        this.tourService = tourService;
    }
    ngAfterContentInit() {
        this.tourStepTemplateService.template =
            this.stepTemplate ||
                this.stepTemplateContent ||
                this.defaultTourStepTemplate;
    }
}
TourStepTemplateComponent.decorators = [
    { type: Component, args: [{
                encapsulation: ViewEncapsulation.None,
                selector: 'tour-step-template',
                template: `
    <ng-template #tourStep let-step="step">
      <p class="tour-step-content">{{ step?.content }}</p>
      <div class="tour-step-navigation">
        <button
          *ngIf="tourService.hasPrev(step)"
          class="btn btn-sm btn-default"
          (click)="tourService.prev()"
        >
          « {{ step?.prevBtnTitle }}
        </button>
        <button
          *ngIf="tourService.hasNext(step)"
          class="btn btn-sm btn-default"
          (click)="tourService.next()"
        >
          {{ step?.nextBtnTitle }} »
        </button>
        <button class="btn btn-sm btn-default" (click)="tourService.end()">
          {{ step?.endBtnTitle }}
        </button>
      </div>
    </ng-template>
  `
            },] }
];
TourStepTemplateComponent.ctorParameters = () => [
    { type: TourStepTemplateService },
    { type: NgxbTourService }
];
TourStepTemplateComponent.propDecorators = {
    defaultTourStepTemplate: [{ type: ViewChild, args: ['tourStep', { read: TemplateRef, static: true },] }],
    stepTemplate: [{ type: Input }],
    stepTemplateContent: [{ type: ContentChild, args: [TemplateRef,] }]
};

const popoverForRoot = PopoverModule.forRoot();
class TourNgxBootstrapModule {
    static forRoot() {
        return {
            ngModule: TourNgxBootstrapModule,
            providers: [
                TourStepTemplateService,
                TourService,
                NgxbTourService,
            ],
        };
    }
}
TourNgxBootstrapModule.decorators = [
    { type: NgModule, args: [{
                declarations: [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent],
                exports: [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent],
                imports: [CommonModule, popoverForRoot]
            },] }
];

/*
 * Public API Surface of ngx-tour-ngx-bootstrap
 */

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

export { NgxbTourService, TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourNgxBootstrapModule, NgxbTourService as TourService, TourStepTemplateComponent, popoverForRoot, TourStepTemplateService as ɵa };
//# sourceMappingURL=ngx-tour-ngx-bootstrap.js.map