ngx-ui-tour-ng-bootstrap
Version:
UI tour library for Angular 12+
189 lines (178 loc) • 18.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, signal, inject, ElementRef, Directive, Component, viewChild, TemplateRef, contentChild, makeEnvironmentProviders } from '@angular/core';
import * as i1 from '@ng-bootstrap/ng-bootstrap';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { TourService, TourHotkeyListenerComponent, BaseTourProxyAnchor, UI_TOUR_OPTIONS } from 'ngx-ui-tour-core';
export { Direction, TourState, UI_TOUR_OPTIONS } from 'ngx-ui-tour-core';
import { firstValueFrom } from 'rxjs';
class NgbTourService extends TourService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgbTourService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgbTourService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgbTourService, decorators: [{
type: Injectable
}] });
class TourStepTemplateService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourStepTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourStepTemplateService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourStepTemplateService, decorators: [{
type: Injectable
}] });
class TourAnchorNgBootstrapDirective {
constructor() {
this.tourAnchor = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "tourAnchor" }] : /* istanbul ignore next */ []));
this.isActive = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
this.element = inject(ElementRef);
this.tourService = inject(NgbTourService);
this.tourStepTemplate = inject(TourStepTemplateService);
this.popoverDirective = inject(NgbPopover, { host: true });
this.popoverDirective.autoClose = false;
this.popoverDirective.triggers = '';
// eslint-disable-next-line @typescript-eslint/no-empty-function
this.popoverDirective.toggle = () => { };
}
ngOnInit() {
this.tourService.register(this.tourAnchor(), this);
}
ngOnDestroy() {
this.tourService.unregister(this.tourAnchor());
}
// noinspection JSUnusedGlobalSymbols
async showTourStep(step) {
if (this.popoverDirective.isOpen()) {
await firstValueFrom(this.popoverDirective.hidden);
}
this.isActive.set(true);
this.popoverDirective.ngbPopover = this.tourStepTemplate.template;
if (step.useLegacyTitle) {
this.popoverDirective.popoverTitle = step.title;
}
this.popoverDirective.container = 'body';
const popoverClass = step.popoverClass ?? '';
this.popoverDirective.popoverClass = `tour-step ${popoverClass}`;
this.popoverDirective.placement = (step.placement || 'auto')
.replace('before', 'left').replace('after', 'right')
.replace('below', 'bottom').replace('above', 'top');
const offset = step.backdropConfig?.offset;
if (offset) {
this.popoverDirective.popperOptions = options => this.setOffsetModifier(options, offset);
}
this.popoverDirective.positionTarget = this.element.nativeElement;
this.popoverDirective.open({ step });
}
setOffsetModifier(options, offset) {
const offsetModifier = options.modifiers
?.find(modifier => modifier.name === 'offset' && modifier.options), arrowHeight = 10;
if (offsetModifier) {
offsetModifier.options['offset'] = [0, offset + arrowHeight];
}
return options;
}
// noinspection JSUnusedGlobalSymbols
hideTourStep() {
this.isActive.set(false);
this.popoverDirective.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourAnchorNgBootstrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: TourAnchorNgBootstrapDirective, isStandalone: true, selector: "[tourAnchor]", inputs: { tourAnchor: { classPropertyName: "tourAnchor", publicName: "tourAnchor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.touranchor--is-active": "isActive()" } }, hostDirectives: [{ directive: i1.NgbPopover }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourAnchorNgBootstrapDirective, decorators: [{
type: Directive,
args: [{
selector: '[tourAnchor]',
hostDirectives: [NgbPopover],
host: {
'[class.touranchor--is-active]': 'isActive()'
}
}]
}], ctorParameters: () => [], propDecorators: { tourAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tourAnchor", required: false }] }] } });
class TourDefaultStepTemplateComponent {
constructor() {
this.step = input.required(/* @ts-ignore */
...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
this.tourService = inject(NgbTourService);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourDefaultStepTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourDefaultStepTemplateComponent, decorators: [{
type: Component,
args: [{ selector: 'tour-default-step-template', imports: [], 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"] }]
}], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: true }] }] } });
class TourStepTemplateComponent extends TourHotkeyListenerComponent {
constructor() {
super(...arguments);
this.defaultTourStepTemplate = viewChild('tourStep', { ...(ngDevMode ? { debugName: "defaultTourStepTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
this.stepTemplate = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "stepTemplate" }] : /* istanbul ignore next */ []));
this.stepTemplateContent = contentChild(TemplateRef, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "stepTemplateContent" }] : /* istanbul ignore next */ []));
this.tourStepTemplateService = inject(TourStepTemplateService);
this.tourService = inject(NgbTourService);
}
ngAfterContentInit() {
this.tourStepTemplateService.template =
this.stepTemplate() ||
this.stepTemplateContent() ||
this.defaultTourStepTemplate();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourStepTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", 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: "defaultTourStepTemplate", first: true, predicate: ["tourStep"], descendants: true, read: TemplateRef, isSignal: 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourStepTemplateComponent, decorators: [{
type: Component,
args: [{ selector: 'tour-step-template', imports: [
TourDefaultStepTemplateComponent
], 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: i0.ViewChild, args: ['tourStep', { ...{ read: TemplateRef }, isSignal: true }] }], stepTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepTemplate", required: false }] }], stepTemplateContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
class TourProxyAnchorComponent extends BaseTourProxyAnchor {
constructor() {
super(...arguments);
// noinspection JSUnusedGlobalSymbols
this.anchorDirective = inject(TourAnchorNgBootstrapDirective, {
host: true
});
this.anchorEl = input.required(/* @ts-ignore */
...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourProxyAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: TourProxyAnchorComponent, isStandalone: true, selector: "tour-proxy-anchor", inputs: { anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, hostDirectives: [{ directive: TourAnchorNgBootstrapDirective, inputs: ["tourAnchor", "anchorId"] }], ngImport: i0, template: ``, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TourProxyAnchorComponent, decorators: [{
type: Component,
args: [{
selector: 'tour-proxy-anchor',
template: ``,
imports: [],
hostDirectives: [{
directive: TourAnchorNgBootstrapDirective,
inputs: ['tourAnchor: anchorId']
}]
}]
}], propDecorators: { anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: true }] }] } });
const TourNgBootstrap = [
TourAnchorNgBootstrapDirective, TourStepTemplateComponent, TourProxyAnchorComponent
];
function provideUiTour(config = {}) {
const options = {
useLegacyTitle: false,
placement: 'auto',
...config
};
return makeEnvironmentProviders([
{
provide: UI_TOUR_OPTIONS,
useValue: options
},
NgbTourService,
TourStepTemplateService
]);
}
/**
* Generated bundle index. Do not edit.
*/
export { TourAnchorNgBootstrapDirective, TourNgBootstrap, TourProxyAnchorComponent, NgbTourService as TourService, TourStepTemplateComponent, provideUiTour };
//# sourceMappingURL=ngx-ui-tour-ng-bootstrap.mjs.map