ngx-ui-tour-ngx-bootstrap
Version:
UI tour library for Angular 12+
150 lines (141 loc) • 16.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, inject, Component, ChangeDetectionStrategy, TemplateRef, ViewChild, Input, ContentChild, Directive, signal, ElementRef, 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: "19.0.5", ngImport: i0, type: TourStepTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourStepTemplateService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourStepTemplateService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class NgxbTourService extends TourService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxbTourService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxbTourService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxbTourService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class TourDefaultStepTemplateComponent {
constructor() {
this.step = input.required();
this.tourService = inject(NgxbTourService);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourDefaultStepTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TourDefaultStepTemplateComponent, isStandalone: true, selector: "tour-default-step-template", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let step = this.step();\r\n\r\n<div\r\n [style.width]=\"step.stepDimensions?.width\"\r\n [style.min-width]=\"step.stepDimensions?.minWidth\"\r\n [style.max-width]=\"step.stepDimensions?.maxWidth\"\r\n class=\"main-container\"\r\n>\r\n @if (!step?.useLegacyTitle && step?.title) {\r\n <div class=\"title-container\">\r\n <h5>{{ step?.title }}</h5>\r\n <button\r\n type=\"button\"\r\n class=\"btn-close\"\r\n aria-label=\"Close\"\r\n (click)=\"tourService.end()\"\r\n ></button>\r\n </div>\r\n }\r\n <p\r\n class=\"card-text\"\r\n [innerHTML]=\"step?.content\"\r\n ></p>\r\n <div\r\n class=\"buttons\"\r\n [class.no-progress]=\"!step.showProgress\"\r\n >\r\n <button\r\n [disabled]=\"!tourService.hasPrev(step)\"\r\n class=\"btn btn-sm btn-outline-secondary prev\"\r\n (click)=\"tourService.prev()\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\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\"/>\r\n </svg>\r\n {{ step?.prevBtnTitle }}\r\n </button>\r\n @if (step.showProgress) {\r\n <div class=\"progress\">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div>\r\n }\r\n @if (tourService.hasNext(step) && !step.nextOnAnchorClick) {\r\n <button\r\n class=\"btn btn-sm btn-outline-primary next\"\r\n (click)=\"tourService.next()\"\r\n >\r\n {{ step?.nextBtnTitle }}\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\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\"/>\r\n </svg>\r\n </button>\r\n }\r\n @if (!tourService.hasNext(step)) {\r\n <button\r\n class=\"btn btn-sm btn-outline-primary\"\r\n (click)=\"tourService.end()\"\r\n >\r\n {{ step?.endBtnTitle }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".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:fit-content}.buttons>*:last-child{justify-self:flex-end}.buttons .progress{font-size:12px;font-weight:700;color:#00000073;white-space:nowrap}.buttons.no-progress{grid-template-columns:1fr 1fr}.buttons .btn{display:flex;align-items:center;gap:.25rem}.buttons .btn.prev{padding-left:.25rem}.buttons .btn.next{padding-right:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourDefaultStepTemplateComponent, decorators: [{
type: Component,
args: [{ selector: 'tour-default-step-template', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let step = this.step();\r\n\r\n<div\r\n [style.width]=\"step.stepDimensions?.width\"\r\n [style.min-width]=\"step.stepDimensions?.minWidth\"\r\n [style.max-width]=\"step.stepDimensions?.maxWidth\"\r\n class=\"main-container\"\r\n>\r\n @if (!step?.useLegacyTitle && step?.title) {\r\n <div class=\"title-container\">\r\n <h5>{{ step?.title }}</h5>\r\n <button\r\n type=\"button\"\r\n class=\"btn-close\"\r\n aria-label=\"Close\"\r\n (click)=\"tourService.end()\"\r\n ></button>\r\n </div>\r\n }\r\n <p\r\n class=\"card-text\"\r\n [innerHTML]=\"step?.content\"\r\n ></p>\r\n <div\r\n class=\"buttons\"\r\n [class.no-progress]=\"!step.showProgress\"\r\n >\r\n <button\r\n [disabled]=\"!tourService.hasPrev(step)\"\r\n class=\"btn btn-sm btn-outline-secondary prev\"\r\n (click)=\"tourService.prev()\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\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\"/>\r\n </svg>\r\n {{ step?.prevBtnTitle }}\r\n </button>\r\n @if (step.showProgress) {\r\n <div class=\"progress\">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div>\r\n }\r\n @if (tourService.hasNext(step) && !step.nextOnAnchorClick) {\r\n <button\r\n class=\"btn btn-sm btn-outline-primary next\"\r\n (click)=\"tourService.next()\"\r\n >\r\n {{ step?.nextBtnTitle }}\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\r\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\"/>\r\n </svg>\r\n </button>\r\n }\r\n @if (!tourService.hasNext(step)) {\r\n <button\r\n class=\"btn btn-sm btn-outline-primary\"\r\n (click)=\"tourService.end()\"\r\n >\r\n {{ step?.endBtnTitle }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".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:fit-content}.buttons>*:last-child{justify-self:flex-end}.buttons .progress{font-size:12px;font-weight:700;color:#00000073;white-space:nowrap}.buttons.no-progress{grid-template-columns:1fr 1fr}.buttons .btn{display:flex;align-items:center;gap:.25rem}.buttons .btn.prev{padding-left:.25rem}.buttons .btn.next{padding-right:.25rem}\n"] }]
}] });
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: "19.0.5", ngImport: i0, type: TourStepTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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\">\r\n <tour-default-step-template\r\n [step]=\"step\"\r\n />\r\n</ng-template>\r\n", styles: ["::ng-deep .tour-step .popover-body{padding:0}\n"], dependencies: [{ kind: "component", type: TourDefaultStepTemplateComponent, selector: "tour-default-step-template", inputs: ["step"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourStepTemplateComponent, decorators: [{
type: Component,
args: [{ selector: 'tour-step-template', imports: [
TourDefaultStepTemplateComponent
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tourStep let-step=\"step\">\r\n <tour-default-step-template\r\n [step]=\"step\"\r\n />\r\n</ng-template>\r\n", styles: ["::ng-deep .tour-step .popover-body{padding:0}\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: "19.0.5", ngImport: i0, type: TourAnchorNgxBootstrapPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: TourAnchorNgxBootstrapPopoverDirective, isStandalone: true, selector: "[tourAnchor]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourAnchorNgxBootstrapPopoverDirective, decorators: [{
type: Directive,
args: [{
selector: '[tourAnchor]'
}]
}] });
class TourAnchorNgxBootstrapDirective {
constructor() {
this.isActive = signal(false);
this.element = inject(ElementRef);
this.tourService = inject(NgxbTourService);
this.tourStepTemplate = inject(TourStepTemplateService);
this.popoverDirective = inject(TourAnchorNgxBootstrapPopoverDirective, { host: true });
this.popoverDirective.triggers = '';
}
ngOnInit() {
this.tourService.register(this.tourAnchor, this);
}
ngOnDestroy() {
this.tourService.unregister(this.tourAnchor);
}
// noinspection JSUnusedGlobalSymbols
showTourStep(step) {
this.isActive.set(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.set(false);
this.popoverDirective.hide();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourAnchorNgxBootstrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: TourAnchorNgxBootstrapDirective, isStandalone: true, selector: "[tourAnchor]", inputs: { tourAnchor: "tourAnchor" }, host: { properties: { "class.touranchor--is-active": "isActive()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourAnchorNgxBootstrapDirective, decorators: [{
type: Directive,
args: [{
selector: '[tourAnchor]',
host: {
'[class.touranchor--is-active]': 'isActive()'
}
}]
}], ctorParameters: () => [], propDecorators: { tourAnchor: [{
type: Input
}] } });
const COMPONENTS = [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent];
class TourNgxBootstrapModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourNgxBootstrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: TourNgxBootstrapModule, imports: [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent], exports: [TourAnchorNgxBootstrapDirective, TourAnchorNgxBootstrapPopoverDirective, TourStepTemplateComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TourNgxBootstrapModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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