ngx-ui-tour-ngx-bootstrap
Version:
UI tour library for Angular 12+
138 lines (130 loc) • 14.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, inject, TemplateRef, Component, ViewChild, Input, ContentChild, Directive, Host, HostBinding, NgModule } from '@angular/core';
import { TourService, TourHotkeyListenerComponent } from 'ngx-ui-tour-core';
import { PopoverDirective } from 'ngx-bootstrap/popover';
class TourStepTemplateService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourStepTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourStepTemplateService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourStepTemplateService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class NgxbTourService extends TourService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NgxbTourService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NgxbTourService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NgxbTourService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
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]
}] } });
class TourAnchorNgxBootstrapPopoverDirective extends PopoverDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourAnchorNgxBootstrapPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TourAnchorNgxBootstrapPopoverDirective, isStandalone: true, selector: "[tourAnchor]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourAnchorNgxBootstrapPopoverDirective, decorators: [{
type: Directive,
args: [{
selector: '[tourAnchor]',
standalone: true
}]
}] });
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);
}
// noinspection JSUnusedGlobalSymbols
showTourStep(step) {
this.isActive = true;
this.popoverDirective.popover = this.tourStepTemplate.template;
this.popoverDirective.popoverContext = { step };
if (step.useLegacyTitle) {
this.popoverDirective.popoverTitle = step.title;
}
this.popoverDirective.container = 'body';
const popoverClass = step.popoverClass ?? '';
this.popoverDirective.containerClass = `tour-step ${popoverClass}`;
this.popoverDirective.placement = step.placement || 'auto';
this.popoverDirective.show();
}
// noinspection JSUnusedGlobalSymbols
hideTourStep() {
this.isActive = false;
this.popoverDirective.hide();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourAnchorNgxBootstrapDirective, deps: [{ token: NgxbTourService }, { token: TourStepTemplateService }, { token: i0.ElementRef }, { token: TourAnchorNgxBootstrapPopoverDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: TourAnchorNgxBootstrapDirective, isStandalone: true, selector: "[tourAnchor]", inputs: { tourAnchor: "tourAnchor" }, host: { properties: { "class.touranchor--is-active": "this.isActive" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourAnchorNgxBootstrapDirective, decorators: [{
type: Directive,
args: [{
selector: '[tourAnchor]',
standalone: true
}]
}], ctorParameters: () => [{ type: NgxbTourService }, { type: TourStepTemplateService }, { type: i0.ElementRef }, { type: TourAnchorNgxBootstrapPopoverDirective, decorators: [{
type: Host
}] }], propDecorators: { tourAnchor: [{
type: Input
}], isActive: [{
type: HostBinding,
args: ['class.touranchor--is-active']
}] } });
const COMPONENTS = [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent];
class TourNgxBootstrapModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourNgxBootstrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: TourNgxBootstrapModule, imports: [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent], exports: [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourNgxBootstrapModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TourNgxBootstrapModule, decorators: [{
type: NgModule,
args: [{
imports: COMPONENTS,
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourNgxBootstrapModule, NgxbTourService as TourService, TourStepTemplateComponent };
//# sourceMappingURL=ngx-ui-tour-ngx-bootstrap.mjs.map