ngx-ui-tour-console
Advanced tools
Comparing version
@@ -5,4 +5,27 @@ (function (global, factory) { | ||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-ui-tour-console'] = {}, global.ngxUiTourCore, global.ng.common, global.ng.core, global.ngBootstrap)); | ||
}(this, (function (exports, ngxUiTourCore, common, core, ngBootstrap) { 'use strict'; | ||
}(this, (function (exports, i1, common, i0, ngBootstrap) { 'use strict'; | ||
function _interopNamespace(e) { | ||
if (e && e.__esModule) return e; | ||
var n = Object.create(null); | ||
if (e) { | ||
Object.keys(e).forEach(function (k) { | ||
if (k !== 'default') { | ||
var d = Object.getOwnPropertyDescriptor(e, k); | ||
Object.defineProperty(n, k, d.get ? d : { | ||
enumerable: true, | ||
get: function () { | ||
return e[k]; | ||
} | ||
}); | ||
} | ||
}); | ||
} | ||
n['default'] = e; | ||
return Object.freeze(n); | ||
} | ||
var i1__namespace = /*#__PURE__*/_interopNamespace(i1); | ||
var i0__namespace = /*#__PURE__*/_interopNamespace(i0); | ||
var TourAnchorConsoleDirective = /** @class */ (function () { | ||
@@ -25,4 +48,4 @@ function TourAnchorConsoleDirective(tourService, element, tourBackdrop) { | ||
this.isActive = true; | ||
if (!step.preventScrolling) { | ||
ngxUiTourCore.ScrollingUtil.ensureVisible(htmlElement); | ||
if (!step.disableScrollToAnchor) { | ||
i1.ScrollingUtil.ensureVisible(htmlElement); | ||
} | ||
@@ -42,3 +65,3 @@ if (step.enableBackdrop) { | ||
this.isActive = false; | ||
if (this.tourService.getStatus() === ngxUiTourCore.TourState.OFF) { | ||
if (this.tourService.getStatus() === i1.TourState.OFF) { | ||
this.tourBackdrop.close(); | ||
@@ -49,16 +72,15 @@ } | ||
}()); | ||
TourAnchorConsoleDirective.decorators = [ | ||
{ type: core.Directive, args: [{ | ||
selector: '[tourAnchor]', | ||
},] } | ||
]; | ||
TourAnchorConsoleDirective.ctorParameters = function () { return [ | ||
{ type: ngxUiTourCore.TourService }, | ||
{ type: core.ElementRef }, | ||
{ type: ngxUiTourCore.TourBackdropService } | ||
]; }; | ||
TourAnchorConsoleDirective.propDecorators = { | ||
tourAnchor: [{ type: core.Input }], | ||
isActive: [{ type: core.HostBinding, args: ['class.touranchor--is-active',] }] | ||
}; | ||
TourAnchorConsoleDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0__namespace, type: TourAnchorConsoleDirective, deps: [{ token: i1__namespace.TourService }, { token: i0__namespace.ElementRef }, { token: i1__namespace.TourBackdropService }], target: i0__namespace.ɵɵFactoryTarget.Directive }); | ||
TourAnchorConsoleDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.3", type: TourAnchorConsoleDirective, selector: "[tourAnchor]", inputs: { tourAnchor: "tourAnchor" }, host: { properties: { "class.touranchor--is-active": "this.isActive" } }, ngImport: i0__namespace }); | ||
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0__namespace, type: TourAnchorConsoleDirective, decorators: [{ | ||
type: i0.Directive, | ||
args: [{ | ||
selector: '[tourAnchor]', | ||
}] | ||
}], ctorParameters: function () { return [{ type: i1__namespace.TourService }, { type: i0__namespace.ElementRef }, { type: i1__namespace.TourBackdropService }]; }, propDecorators: { tourAnchor: [{ | ||
type: i0.Input | ||
}], isActive: [{ | ||
type: i0.HostBinding, | ||
args: ['class.touranchor--is-active'] | ||
}] } }); | ||
@@ -72,4 +94,4 @@ var TourConsoleModule = /** @class */ (function () { | ||
providers: [ | ||
ngxUiTourCore.TourService, | ||
ngxUiTourCore.TourBackdropService | ||
i1.TourService, | ||
i1.TourBackdropService | ||
], | ||
@@ -80,9 +102,13 @@ }; | ||
}()); | ||
TourConsoleModule.decorators = [ | ||
{ type: core.NgModule, args: [{ | ||
declarations: [TourAnchorConsoleDirective], | ||
exports: [TourAnchorConsoleDirective, ngxUiTourCore.TourHotkeyListenerComponent], | ||
imports: [ngxUiTourCore.TourModule, common.CommonModule, ngBootstrap.NgbPopoverModule], | ||
},] } | ||
]; | ||
TourConsoleModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0__namespace, type: TourConsoleModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule }); | ||
TourConsoleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0__namespace, type: TourConsoleModule, declarations: [TourAnchorConsoleDirective], imports: [i1.TourModule, common.CommonModule, ngBootstrap.NgbPopoverModule], exports: [TourAnchorConsoleDirective, i1.TourHotkeyListenerComponent] }); | ||
TourConsoleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0__namespace, type: TourConsoleModule, imports: [[i1.TourModule, common.CommonModule, ngBootstrap.NgbPopoverModule]] }); | ||
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0__namespace, type: TourConsoleModule, decorators: [{ | ||
type: i0.NgModule, | ||
args: [{ | ||
declarations: [TourAnchorConsoleDirective], | ||
exports: [TourAnchorConsoleDirective, i1.TourHotkeyListenerComponent], | ||
imports: [i1.TourModule, common.CommonModule, ngBootstrap.NgbPopoverModule], | ||
}] | ||
}] }); | ||
@@ -99,7 +125,7 @@ /* | ||
exports.TourConsoleModule = TourConsoleModule; | ||
Object.keys(ngxUiTourCore).forEach(function (k) { | ||
Object.keys(i1).forEach(function (k) { | ||
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, { | ||
enumerable: true, | ||
get: function () { | ||
return ngxUiTourCore[k]; | ||
return i1[k]; | ||
} | ||
@@ -106,0 +132,0 @@ }); |
@@ -0,1 +1,14 @@ | ||
<a name="7.0.0"></a> | ||
# [7.0.0](https://github.com/hakimio/ngx-ui-tour) (2021-09-08) | ||
### Features | ||
- New `delayAfterNavigation` config to set a delay between navigation to a different route and showing the step contents | ||
- "Angular Ivy" partial compilation to reduce initial build time of applications using this library | ||
### Breaking Changes | ||
- "Angular ViewEngine" compiler is no longer supported | ||
- Removed deprecated `waitFor` config and associated events (`startWaiting$` and `stopWaiting$`). `isAsync` should be used instead. | ||
- `preventScrolling` config was renamed to `disableScrollToAnchor` to avoid ambiguity | ||
<a name="6.1.0"></a> | ||
@@ -2,0 +15,0 @@ |
@@ -6,2 +6,3 @@ import { CommonModule } from '@angular/common'; | ||
import { TourAnchorConsoleDirective } from './tour-anchor.directive'; | ||
import * as i0 from "@angular/core"; | ||
export { TourAnchorConsoleDirective, TourService }; | ||
@@ -19,9 +20,13 @@ export class TourConsoleModule { | ||
} | ||
TourConsoleModule.decorators = [ | ||
{ type: NgModule, args: [{ | ||
declarations: [TourAnchorConsoleDirective], | ||
exports: [TourAnchorConsoleDirective, TourHotkeyListenerComponent], | ||
imports: [TourModule, CommonModule, NgbPopoverModule], | ||
},] } | ||
]; | ||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc29sZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdWktdG91ci1jb25zb2xlL3NyYy9saWIvY29uc29sZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBdUIsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFN0csT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFckUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLFdBQVcsRUFBRSxDQUFDO0FBT25ELE1BQU0sT0FBTyxpQkFBaUI7SUFDckIsTUFBTSxDQUFDLE9BQU87UUFDbkIsT0FBTztZQUNMLFFBQVEsRUFBRSxpQkFBaUI7WUFDM0IsU0FBUyxFQUFFO2dCQUNULFdBQVc7Z0JBQ1gsbUJBQW1CO2FBQ3BCO1NBQ0YsQ0FBQztJQUNKLENBQUM7OztZQWRGLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztnQkFDMUMsT0FBTyxFQUFFLENBQUMsMEJBQTBCLEVBQUUsMkJBQTJCLENBQUM7Z0JBQ2xFLE9BQU8sRUFBRSxDQUFDLFVBQVUsRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLENBQUM7YUFDdEQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBNb2R1bGVXaXRoUHJvdmlkZXJzLCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ2JQb3BvdmVyTW9kdWxlIH0gZnJvbSAnQG5nLWJvb3RzdHJhcC9uZy1ib290c3RyYXAnO1xyXG5pbXBvcnQgeyBUb3VySG90a2V5TGlzdGVuZXJDb21wb25lbnQsIFRvdXJNb2R1bGUsIFRvdXJTZXJ2aWNlLCBUb3VyQmFja2Ryb3BTZXJ2aWNlIH0gZnJvbSAnbmd4LXVpLXRvdXItY29yZSc7XHJcblxyXG5pbXBvcnQgeyBUb3VyQW5jaG9yQ29uc29sZURpcmVjdGl2ZSB9IGZyb20gJy4vdG91ci1hbmNob3IuZGlyZWN0aXZlJztcclxuXHJcbmV4cG9ydCB7IFRvdXJBbmNob3JDb25zb2xlRGlyZWN0aXZlLCBUb3VyU2VydmljZSB9O1xyXG5cclxuQE5nTW9kdWxlKHtcclxuICBkZWNsYXJhdGlvbnM6IFtUb3VyQW5jaG9yQ29uc29sZURpcmVjdGl2ZV0sXHJcbiAgZXhwb3J0czogW1RvdXJBbmNob3JDb25zb2xlRGlyZWN0aXZlLCBUb3VySG90a2V5TGlzdGVuZXJDb21wb25lbnRdLFxyXG4gIGltcG9ydHM6IFtUb3VyTW9kdWxlLCBDb21tb25Nb2R1bGUsIE5nYlBvcG92ZXJNb2R1bGVdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgVG91ckNvbnNvbGVNb2R1bGUge1xyXG4gIHB1YmxpYyBzdGF0aWMgZm9yUm9vdCgpOiBNb2R1bGVXaXRoUHJvdmlkZXJzPFRvdXJDb25zb2xlTW9kdWxlPiB7XHJcbiAgICByZXR1cm4ge1xyXG4gICAgICBuZ01vZHVsZTogVG91ckNvbnNvbGVNb2R1bGUsXHJcbiAgICAgIHByb3ZpZGVyczogW1xyXG4gICAgICAgIFRvdXJTZXJ2aWNlLFxyXG4gICAgICAgIFRvdXJCYWNrZHJvcFNlcnZpY2VcclxuICAgICAgXSxcclxuICAgIH07XHJcbiAgfVxyXG59XHJcbiJdfQ== | ||
TourConsoleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); | ||
TourConsoleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, declarations: [TourAnchorConsoleDirective], imports: [TourModule, CommonModule, NgbPopoverModule], exports: [TourAnchorConsoleDirective, TourHotkeyListenerComponent] }); | ||
TourConsoleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, imports: [[TourModule, CommonModule, NgbPopoverModule]] }); | ||
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, decorators: [{ | ||
type: NgModule, | ||
args: [{ | ||
declarations: [TourAnchorConsoleDirective], | ||
exports: [TourAnchorConsoleDirective, TourHotkeyListenerComponent], | ||
imports: [TourModule, CommonModule, NgbPopoverModule], | ||
}] | ||
}] }); | ||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc29sZS5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdWktdG91ci1jb25zb2xlL3NyYy9saWIvY29uc29sZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBdUIsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFN0csT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0seUJBQXlCLENBQUM7O0FBRXJFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxXQUFXLEVBQUUsQ0FBQztBQU9uRCxNQUFNLE9BQU8saUJBQWlCO0lBQ3JCLE1BQU0sQ0FBQyxPQUFPO1FBQ25CLE9BQU87WUFDTCxRQUFRLEVBQUUsaUJBQWlCO1lBQzNCLFNBQVMsRUFBRTtnQkFDVCxXQUFXO2dCQUNYLG1CQUFtQjthQUNwQjtTQUNGLENBQUM7SUFDSixDQUFDOzs4R0FUVSxpQkFBaUI7K0dBQWpCLGlCQUFpQixpQkFKYiwwQkFBMEIsYUFFL0IsVUFBVSxFQUFFLFlBQVksRUFBRSxnQkFBZ0IsYUFEMUMsMEJBQTBCLEVBQUUsMkJBQTJCOytHQUd0RCxpQkFBaUIsWUFGbkIsQ0FBQyxVQUFVLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixDQUFDOzJGQUUxQyxpQkFBaUI7a0JBTDdCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsMEJBQTBCLENBQUM7b0JBQzFDLE9BQU8sRUFBRSxDQUFDLDBCQUEwQixFQUFFLDJCQUEyQixDQUFDO29CQUNsRSxPQUFPLEVBQUUsQ0FBQyxVQUFVLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixDQUFDO2lCQUN0RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IE1vZHVsZVdpdGhQcm92aWRlcnMsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5nYlBvcG92ZXJNb2R1bGUgfSBmcm9tICdAbmctYm9vdHN0cmFwL25nLWJvb3RzdHJhcCc7XHJcbmltcG9ydCB7IFRvdXJIb3RrZXlMaXN0ZW5lckNvbXBvbmVudCwgVG91ck1vZHVsZSwgVG91clNlcnZpY2UsIFRvdXJCYWNrZHJvcFNlcnZpY2UgfSBmcm9tICduZ3gtdWktdG91ci1jb3JlJztcclxuXHJcbmltcG9ydCB7IFRvdXJBbmNob3JDb25zb2xlRGlyZWN0aXZlIH0gZnJvbSAnLi90b3VyLWFuY2hvci5kaXJlY3RpdmUnO1xyXG5cclxuZXhwb3J0IHsgVG91ckFuY2hvckNvbnNvbGVEaXJlY3RpdmUsIFRvdXJTZXJ2aWNlIH07XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1RvdXJBbmNob3JDb25zb2xlRGlyZWN0aXZlXSxcclxuICBleHBvcnRzOiBbVG91ckFuY2hvckNvbnNvbGVEaXJlY3RpdmUsIFRvdXJIb3RrZXlMaXN0ZW5lckNvbXBvbmVudF0sXHJcbiAgaW1wb3J0czogW1RvdXJNb2R1bGUsIENvbW1vbk1vZHVsZSwgTmdiUG9wb3Zlck1vZHVsZV0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUb3VyQ29uc29sZU1vZHVsZSB7XHJcbiAgcHVibGljIHN0YXRpYyBmb3JSb290KCk6IE1vZHVsZVdpdGhQcm92aWRlcnM8VG91ckNvbnNvbGVNb2R1bGU+IHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG5nTW9kdWxlOiBUb3VyQ29uc29sZU1vZHVsZSxcclxuICAgICAgcHJvdmlkZXJzOiBbXHJcbiAgICAgICAgVG91clNlcnZpY2UsXHJcbiAgICAgICAgVG91ckJhY2tkcm9wU2VydmljZVxyXG4gICAgICBdLFxyXG4gICAgfTtcclxuICB9XHJcbn1cclxuIl19 |
import { TourService, ScrollingUtil, TourBackdropService, TourState } from 'ngx-ui-tour-core'; | ||
import { Directive, ElementRef, HostBinding, Input } from '@angular/core'; | ||
import * as i0 from "@angular/core"; | ||
import * as i1 from "ngx-ui-tour-core"; | ||
export class TourAnchorConsoleDirective { | ||
@@ -20,3 +22,3 @@ constructor(tourService, element, tourBackdrop) { | ||
this.isActive = true; | ||
if (!step.preventScrolling) { | ||
if (!step.disableScrollToAnchor) { | ||
ScrollingUtil.ensureVisible(htmlElement); | ||
@@ -42,16 +44,15 @@ } | ||
} | ||
TourAnchorConsoleDirective.decorators = [ | ||
{ type: Directive, args: [{ | ||
selector: '[tourAnchor]', | ||
},] } | ||
]; | ||
TourAnchorConsoleDirective.ctorParameters = () => [ | ||
{ type: TourService }, | ||
{ type: ElementRef }, | ||
{ type: TourBackdropService } | ||
]; | ||
TourAnchorConsoleDirective.propDecorators = { | ||
tourAnchor: [{ type: Input }], | ||
isActive: [{ type: HostBinding, args: ['class.touranchor--is-active',] }] | ||
}; | ||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91ci1hbmNob3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXVpLXRvdXItY29uc29sZS9zcmMvbGliL3RvdXItYW5jaG9yLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsV0FBVyxFQUVYLGFBQWEsRUFDYixtQkFBbUIsRUFDbkIsU0FBUyxFQUNWLE1BQU0sa0JBQWtCLENBQUM7QUFDMUIsT0FBTyxFQUFDLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBb0IsTUFBTSxlQUFlLENBQUM7QUFLM0YsTUFBTSxPQUFPLDBCQUEwQjtJQU9yQyxZQUNZLFdBQXdCLEVBQ3hCLE9BQW1CLEVBQ25CLFlBQWlDO1FBRmpDLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBQ3hCLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFDbkIsaUJBQVksR0FBWixZQUFZLENBQXFCO1FBTHRDLGFBQVEsR0FBRyxLQUFLLENBQUM7SUFNckIsQ0FBQztJQUVHLFFBQVE7UUFDYixJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxXQUFXLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRUQscUNBQXFDO0lBQzlCLFlBQVksQ0FBQyxJQUFpQjtRQUNuQyxNQUFNLFdBQVcsR0FBZ0IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7UUFFNUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7UUFDckIsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtZQUMxQixhQUFhLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQzFDO1FBRUQsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUN0QzthQUFNO1lBQ0wsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUMzQjtRQUVELE9BQU8sQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzFCLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzFCLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsU0FBUyxJQUFJLE9BQU8sSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUMvRCxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVNLFlBQVk7UUFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDdEIsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsRUFBRSxLQUFLLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDbEQsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7OztZQWxERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGNBQWM7YUFDekI7OztZQVZDLFdBQVc7WUFNTSxVQUFVO1lBSDNCLG1CQUFtQjs7O3lCQVVsQixLQUFLO3VCQUVMLFdBQVcsU0FBQyw2QkFBNkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIFRvdXJBbmNob3JEaXJlY3RpdmUsXHJcbiAgVG91clNlcnZpY2UsXHJcbiAgSVN0ZXBPcHRpb24sXHJcbiAgU2Nyb2xsaW5nVXRpbCxcclxuICBUb3VyQmFja2Ryb3BTZXJ2aWNlLFxyXG4gIFRvdXJTdGF0ZVxyXG59IGZyb20gJ25neC11aS10b3VyLWNvcmUnO1xyXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1t0b3VyQW5jaG9yXScsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUb3VyQW5jaG9yQ29uc29sZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBUb3VyQW5jaG9yRGlyZWN0aXZlIHtcclxuXHJcbiAgQElucHV0KCkgcHVibGljIHRvdXJBbmNob3I6IHN0cmluZztcclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy50b3VyYW5jaG9yLS1pcy1hY3RpdmUnKVxyXG4gIHB1YmxpYyBpc0FjdGl2ZSA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgICAgcHJpdmF0ZSB0b3VyU2VydmljZTogVG91clNlcnZpY2UsXHJcbiAgICAgIHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZixcclxuICAgICAgcHJpdmF0ZSB0b3VyQmFja2Ryb3A6IFRvdXJCYWNrZHJvcFNlcnZpY2VcclxuICApIHt9XHJcblxyXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMudG91clNlcnZpY2UucmVnaXN0ZXIodGhpcy50b3VyQW5jaG9yLCB0aGlzKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIHRoaXMudG91clNlcnZpY2UudW5yZWdpc3Rlcih0aGlzLnRvdXJBbmNob3IpO1xyXG4gIH1cclxuXHJcbiAgLy8gbm9pbnNwZWN0aW9uIEpTVW51c2VkR2xvYmFsU3ltYm9sc1xyXG4gIHB1YmxpYyBzaG93VG91clN0ZXAoc3RlcDogSVN0ZXBPcHRpb24pOiB2b2lkIHtcclxuICAgIGNvbnN0IGh0bWxFbGVtZW50OiBIVE1MRWxlbWVudCA9IHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50O1xyXG5cclxuICAgIHRoaXMuaXNBY3RpdmUgPSB0cnVlO1xyXG4gICAgaWYgKCFzdGVwLnByZXZlbnRTY3JvbGxpbmcpIHtcclxuICAgICAgU2Nyb2xsaW5nVXRpbC5lbnN1cmVWaXNpYmxlKGh0bWxFbGVtZW50KTtcclxuICAgIH1cclxuXHJcbiAgICBpZiAoc3RlcC5lbmFibGVCYWNrZHJvcCkge1xyXG4gICAgICB0aGlzLnRvdXJCYWNrZHJvcC5zaG93KHRoaXMuZWxlbWVudCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnRvdXJCYWNrZHJvcC5jbG9zZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIGNvbnNvbGUuZ3JvdXAoc3RlcC50aXRsZSk7XHJcbiAgICBjb25zb2xlLmxvZyhzdGVwLmNvbnRlbnQpO1xyXG4gICAgY29uc29sZS5sb2coYCR7c3RlcC5wbGFjZW1lbnQgfHwgJ2Fib3ZlJ30gJHt0aGlzLnRvdXJBbmNob3J9YCk7XHJcbiAgICBjb25zb2xlLmdyb3VwRW5kKCk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgaGlkZVRvdXJTdGVwKCk6IHZvaWQge1xyXG4gICAgdGhpcy5pc0FjdGl2ZSA9IGZhbHNlO1xyXG4gICAgaWYgKHRoaXMudG91clNlcnZpY2UuZ2V0U3RhdHVzKCkgPT09IFRvdXJTdGF0ZS5PRkYpIHtcclxuICAgICAgdGhpcy50b3VyQmFja2Ryb3AuY2xvc2UoKTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19 | ||
TourAnchorConsoleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourAnchorConsoleDirective, deps: [{ token: i1.TourService }, { token: i0.ElementRef }, { token: i1.TourBackdropService }], target: i0.ɵɵFactoryTarget.Directive }); | ||
TourAnchorConsoleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.3", type: TourAnchorConsoleDirective, selector: "[tourAnchor]", inputs: { tourAnchor: "tourAnchor" }, host: { properties: { "class.touranchor--is-active": "this.isActive" } }, ngImport: i0 }); | ||
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourAnchorConsoleDirective, decorators: [{ | ||
type: Directive, | ||
args: [{ | ||
selector: '[tourAnchor]', | ||
}] | ||
}], ctorParameters: function () { return [{ type: i1.TourService }, { type: i0.ElementRef }, { type: i1.TourBackdropService }]; }, propDecorators: { tourAnchor: [{ | ||
type: Input | ||
}], isActive: [{ | ||
type: HostBinding, | ||
args: ['class.touranchor--is-active'] | ||
}] } }); | ||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91ci1hbmNob3IuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXVpLXRvdXItY29uc29sZS9zcmMvbGliL3RvdXItYW5jaG9yLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsV0FBVyxFQUVYLGFBQWEsRUFDYixtQkFBbUIsRUFDbkIsU0FBUyxFQUNWLE1BQU0sa0JBQWtCLENBQUM7QUFDMUIsT0FBTyxFQUFDLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBb0IsTUFBTSxlQUFlLENBQUM7OztBQUszRixNQUFNLE9BQU8sMEJBQTBCO0lBT3JDLFlBQ1ksV0FBd0IsRUFDeEIsT0FBbUIsRUFDbkIsWUFBaUM7UUFGakMsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDeEIsWUFBTyxHQUFQLE9BQU8sQ0FBWTtRQUNuQixpQkFBWSxHQUFaLFlBQVksQ0FBcUI7UUFMdEMsYUFBUSxHQUFHLEtBQUssQ0FBQztJQU1yQixDQUFDO0lBRUcsUUFBUTtRQUNiLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxxQ0FBcUM7SUFDOUIsWUFBWSxDQUFDLElBQWlCO1FBQ25DLE1BQU0sV0FBVyxHQUFnQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQztRQUU1RCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUNyQixJQUFJLENBQUMsSUFBSSxDQUFDLHFCQUFxQixFQUFFO1lBQy9CLGFBQWEsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLENBQUM7U0FDMUM7UUFFRCxJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQ3RDO2FBQU07WUFDTCxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQzNCO1FBRUQsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDMUIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLElBQUksT0FBTyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDO1FBQy9ELE9BQU8sQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxFQUFFLEtBQUssU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNsRCxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQzNCO0lBQ0gsQ0FBQzs7dUhBL0NVLDBCQUEwQjsyR0FBMUIsMEJBQTBCOzJGQUExQiwwQkFBMEI7a0JBSHRDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7aUJBQ3pCOzZKQUdpQixVQUFVO3NCQUF6QixLQUFLO2dCQUdDLFFBQVE7c0JBRGQsV0FBVzt1QkFBQyw2QkFBNkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIFRvdXJBbmNob3JEaXJlY3RpdmUsXHJcbiAgVG91clNlcnZpY2UsXHJcbiAgSVN0ZXBPcHRpb24sXHJcbiAgU2Nyb2xsaW5nVXRpbCxcclxuICBUb3VyQmFja2Ryb3BTZXJ2aWNlLFxyXG4gIFRvdXJTdGF0ZVxyXG59IGZyb20gJ25neC11aS10b3VyLWNvcmUnO1xyXG5pbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1t0b3VyQW5jaG9yXScsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUb3VyQW5jaG9yQ29uc29sZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBUb3VyQW5jaG9yRGlyZWN0aXZlIHtcclxuXHJcbiAgQElucHV0KCkgcHVibGljIHRvdXJBbmNob3I6IHN0cmluZztcclxuXHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy50b3VyYW5jaG9yLS1pcy1hY3RpdmUnKVxyXG4gIHB1YmxpYyBpc0FjdGl2ZSA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgICAgcHJpdmF0ZSB0b3VyU2VydmljZTogVG91clNlcnZpY2UsXHJcbiAgICAgIHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZixcclxuICAgICAgcHJpdmF0ZSB0b3VyQmFja2Ryb3A6IFRvdXJCYWNrZHJvcFNlcnZpY2VcclxuICApIHt9XHJcblxyXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMudG91clNlcnZpY2UucmVnaXN0ZXIodGhpcy50b3VyQW5jaG9yLCB0aGlzKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIHRoaXMudG91clNlcnZpY2UudW5yZWdpc3Rlcih0aGlzLnRvdXJBbmNob3IpO1xyXG4gIH1cclxuXHJcbiAgLy8gbm9pbnNwZWN0aW9uIEpTVW51c2VkR2xvYmFsU3ltYm9sc1xyXG4gIHB1YmxpYyBzaG93VG91clN0ZXAoc3RlcDogSVN0ZXBPcHRpb24pOiB2b2lkIHtcclxuICAgIGNvbnN0IGh0bWxFbGVtZW50OiBIVE1MRWxlbWVudCA9IHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50O1xyXG5cclxuICAgIHRoaXMuaXNBY3RpdmUgPSB0cnVlO1xyXG4gICAgaWYgKCFzdGVwLmRpc2FibGVTY3JvbGxUb0FuY2hvcikge1xyXG4gICAgICBTY3JvbGxpbmdVdGlsLmVuc3VyZVZpc2libGUoaHRtbEVsZW1lbnQpO1xyXG4gICAgfVxyXG5cclxuICAgIGlmIChzdGVwLmVuYWJsZUJhY2tkcm9wKSB7XHJcbiAgICAgIHRoaXMudG91ckJhY2tkcm9wLnNob3codGhpcy5lbGVtZW50KTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMudG91ckJhY2tkcm9wLmNsb3NlKCk7XHJcbiAgICB9XHJcblxyXG4gICAgY29uc29sZS5ncm91cChzdGVwLnRpdGxlKTtcclxuICAgIGNvbnNvbGUubG9nKHN0ZXAuY29udGVudCk7XHJcbiAgICBjb25zb2xlLmxvZyhgJHtzdGVwLnBsYWNlbWVudCB8fCAnYWJvdmUnfSAke3RoaXMudG91ckFuY2hvcn1gKTtcclxuICAgIGNvbnNvbGUuZ3JvdXBFbmQoKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBoaWRlVG91clN0ZXAoKTogdm9pZCB7XHJcbiAgICB0aGlzLmlzQWN0aXZlID0gZmFsc2U7XHJcbiAgICBpZiAodGhpcy50b3VyU2VydmljZS5nZXRTdGF0dXMoKSA9PT0gVG91clN0YXRlLk9GRikge1xyXG4gICAgICB0aGlzLnRvdXJCYWNrZHJvcC5jbG9zZSgpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0= |
@@ -1,5 +0,7 @@ | ||
import { ScrollingUtil, TourState, TourService, TourBackdropService, TourHotkeyListenerComponent, TourModule } from 'ngx-ui-tour-core'; | ||
import * as i1 from 'ngx-ui-tour-core'; | ||
import { ScrollingUtil, TourState, TourService, TourBackdropService, TourModule, TourHotkeyListenerComponent } from 'ngx-ui-tour-core'; | ||
export * from 'ngx-ui-tour-core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { Directive, ElementRef, Input, HostBinding, NgModule } from '@angular/core'; | ||
import * as i0 from '@angular/core'; | ||
import { Directive, Input, HostBinding, NgModule } from '@angular/core'; | ||
import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'; | ||
@@ -24,3 +26,3 @@ | ||
this.isActive = true; | ||
if (!step.preventScrolling) { | ||
if (!step.disableScrollToAnchor) { | ||
ScrollingUtil.ensureVisible(htmlElement); | ||
@@ -46,16 +48,15 @@ } | ||
} | ||
TourAnchorConsoleDirective.decorators = [ | ||
{ type: Directive, args: [{ | ||
selector: '[tourAnchor]', | ||
},] } | ||
]; | ||
TourAnchorConsoleDirective.ctorParameters = () => [ | ||
{ type: TourService }, | ||
{ type: ElementRef }, | ||
{ type: TourBackdropService } | ||
]; | ||
TourAnchorConsoleDirective.propDecorators = { | ||
tourAnchor: [{ type: Input }], | ||
isActive: [{ type: HostBinding, args: ['class.touranchor--is-active',] }] | ||
}; | ||
TourAnchorConsoleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourAnchorConsoleDirective, deps: [{ token: i1.TourService }, { token: i0.ElementRef }, { token: i1.TourBackdropService }], target: i0.ɵɵFactoryTarget.Directive }); | ||
TourAnchorConsoleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.3", type: TourAnchorConsoleDirective, selector: "[tourAnchor]", inputs: { tourAnchor: "tourAnchor" }, host: { properties: { "class.touranchor--is-active": "this.isActive" } }, ngImport: i0 }); | ||
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourAnchorConsoleDirective, decorators: [{ | ||
type: Directive, | ||
args: [{ | ||
selector: '[tourAnchor]', | ||
}] | ||
}], ctorParameters: function () { return [{ type: i1.TourService }, { type: i0.ElementRef }, { type: i1.TourBackdropService }]; }, propDecorators: { tourAnchor: [{ | ||
type: Input | ||
}], isActive: [{ | ||
type: HostBinding, | ||
args: ['class.touranchor--is-active'] | ||
}] } }); | ||
@@ -73,9 +74,13 @@ class TourConsoleModule { | ||
} | ||
TourConsoleModule.decorators = [ | ||
{ type: NgModule, args: [{ | ||
declarations: [TourAnchorConsoleDirective], | ||
exports: [TourAnchorConsoleDirective, TourHotkeyListenerComponent], | ||
imports: [TourModule, CommonModule, NgbPopoverModule], | ||
},] } | ||
]; | ||
TourConsoleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); | ||
TourConsoleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, declarations: [TourAnchorConsoleDirective], imports: [TourModule, CommonModule, NgbPopoverModule], exports: [TourAnchorConsoleDirective, TourHotkeyListenerComponent] }); | ||
TourConsoleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, imports: [[TourModule, CommonModule, NgbPopoverModule]] }); | ||
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.3", ngImport: i0, type: TourConsoleModule, decorators: [{ | ||
type: NgModule, | ||
args: [{ | ||
declarations: [TourAnchorConsoleDirective], | ||
exports: [TourAnchorConsoleDirective, TourHotkeyListenerComponent], | ||
imports: [TourModule, CommonModule, NgbPopoverModule], | ||
}] | ||
}] }); | ||
@@ -82,0 +87,0 @@ /* |
import { ModuleWithProviders } from '@angular/core'; | ||
import { TourService } from 'ngx-ui-tour-core'; | ||
import { TourAnchorConsoleDirective } from './tour-anchor.directive'; | ||
import * as i0 from "@angular/core"; | ||
import * as i1 from "./tour-anchor.directive"; | ||
import * as i2 from "ngx-ui-tour-core"; | ||
import * as i3 from "@angular/common"; | ||
import * as i4 from "@ng-bootstrap/ng-bootstrap"; | ||
export { TourAnchorConsoleDirective, TourService }; | ||
export declare class TourConsoleModule { | ||
static forRoot(): ModuleWithProviders<TourConsoleModule>; | ||
static ɵfac: i0.ɵɵFactoryDeclaration<TourConsoleModule, never>; | ||
static ɵmod: i0.ɵɵNgModuleDeclaration<TourConsoleModule, [typeof i1.TourAnchorConsoleDirective], [typeof i2.TourModule, typeof i3.CommonModule, typeof i4.NgbPopoverModule], [typeof i1.TourAnchorConsoleDirective, typeof i2.TourHotkeyListenerComponent]>; | ||
static ɵinj: i0.ɵɵInjectorDeclaration<TourConsoleModule>; | ||
} |
import { TourAnchorDirective, TourService, IStepOption, TourBackdropService } from 'ngx-ui-tour-core'; | ||
import { ElementRef, OnDestroy, OnInit } from '@angular/core'; | ||
import * as i0 from "@angular/core"; | ||
export declare class TourAnchorConsoleDirective implements OnInit, OnDestroy, TourAnchorDirective { | ||
@@ -14,2 +15,4 @@ private tourService; | ||
hideTourStep(): void; | ||
static ɵfac: i0.ɵɵFactoryDeclaration<TourAnchorConsoleDirective, never>; | ||
static ɵdir: i0.ɵɵDirectiveDeclaration<TourAnchorConsoleDirective, "[tourAnchor]", never, { "tourAnchor": "tourAnchor"; }, {}, never>; | ||
} |
/** | ||
* Generated bundle index. Do not edit. | ||
*/ | ||
/// <amd-module name="ngx-ui-tour-console" /> | ||
export * from './public_api'; |
{ | ||
"name": "ngx-ui-tour-console", | ||
"version": "6.1.0", | ||
"version": "7.0.0", | ||
"repository": "https://github.com/hakimio/ngx-ui-tour.git", | ||
"author": "Isaac Mann <isaacplmann@gmail.com>", | ||
"license": "MIT", | ||
"description": "UI tour library for Angular 9+", | ||
"keywords": [ | ||
"angular", | ||
"ngx", | ||
"tour", | ||
"product-tour", | ||
"ui-tour" | ||
], | ||
"peerDependencies": { | ||
"@angular/common": ">=9.0.0 <13.0.0", | ||
"@angular/core": ">=9.0.0 <13.0.0", | ||
"ngx-ui-tour-core": "^6.1.0", | ||
"ngx-ui-tour-core": "7.0.0", | ||
"typescript": ">=3.8.0" | ||
@@ -22,4 +30,3 @@ }, | ||
"typings": "ngx-ui-tour-console.d.ts", | ||
"metadata": "ngx-ui-tour-console.metadata.json", | ||
"sideEffects": false | ||
} |
340
README.md
@@ -1,20 +0,342 @@ | ||
# Ngx-UI-Tour Console | ||
 | ||
## About | ||
> UI tour library for Angular 9+ | ||
Ui tour library for Angular 9+. | ||
Angular Material, Ng Bootstrap and Ngx Bootstrap UIs are supported. | ||
This is a fork of __Isaac Mann's__ `ngx-tour` library. The fork was created because the original is no longer maintained, | ||
and I don't have permissions to publish new npm packages. | ||
`ngx-ui-tour` is a fork of __Isaac Mann's__ `ngx-tour`. The project had to be forked since the original is no longer | ||
maintained. | ||
## Demo | ||
--- | ||
[hakimio.github.io/ngx-ui-tour](https://hakimio.github.io/ngx-ui-tour) | ||
[](https://www.npmjs.com/package/ngx-ui-tour-core) | ||
[](https://www.npmjs.com/package/ngx-ui-tour-core) | ||
[](https://www.npmjs.com/package/ngx-ui-tour-core) | ||
## Homepage | ||
## Table of contents | ||
[github.com/hakimio/ngx-ui-tour](https://github.com/hakimio/ngx-ui-tour) | ||
- [Demo and documentation](#demo-and-documentation) | ||
- [Installation](#installation) | ||
- [Usage](#usage) | ||
- [Simple project](#simple-project) | ||
- [Lazy loaded modules](#lazy-loaded-modules) | ||
- [FAQ](#faq) | ||
- [TourService](#tourservice) | ||
- [Step Configuration](#step-configuration) | ||
- [Defaults](#defaults) | ||
- [Hotkeys](#hotkeys) | ||
- [Event Observables](#event-observables) | ||
- [Custom template](#custom-template) | ||
- [Styling Active Tour Anchor](#styling-active-tour-anchor) | ||
- [License](#license) | ||
## Demo and documentation | ||
Demo and documentation can be found at [hakimio.github.io/ngx-ui-tour](https://hakimio.github.io/ngx-ui-tour) | ||
## Installation | ||
### yarn | ||
```bash | ||
# install the core package | ||
yarn add ngx-ui-tour-core | ||
# install one of the UI packages (ngx-ui-tour-md-menu, ngx-ui-tour-ng-bootstrap, ngx-ui-tour-ngx-bootstrap) | ||
yarn add ngx-ui-tour-md-menu | ||
``` | ||
### npm | ||
```bash | ||
# install the core package | ||
npm i --save ngx-ui-tour-core | ||
# install one of the UI packages (ngx-ui-tour-md-menu, ngx-ui-tour-ng-bootstrap, ngx-ui-tour-ngx-bootstrap) | ||
npm i --save ngx-ui-tour-md-menu | ||
``` | ||
## Usage | ||
### Simple project | ||
1. Add `<tour-step-template></tour-step-template>` to your root app component | ||
2. Define anchor points for the tour steps by adding the `tourAnchor` directive throughout your app. | ||
```html | ||
<div tourAnchor="some.anchor.id">...</div> | ||
``` | ||
3. Define your tour steps using `tourService.initialize(steps)` | ||
```ts | ||
this.tourService.initialize([{ | ||
anchorId: 'some.anchor.id', | ||
content: 'Some content', | ||
title: 'First', | ||
}, { | ||
anchorId: 'another.anchor.id', | ||
content: 'Other content', | ||
title: 'Second', | ||
}]); | ||
``` | ||
4. Start the tour with `tourService.start()` | ||
5. Check out [the demo source code](https://github.com/hakimio/ngx-ui-tour/tree/master/src/app/md-menu) for an example. | ||
### Lazy loaded modules | ||
1. Add `<tour-step-template></tour-step-template>` to your root app component. | ||
2. Import `TourMatMenuModule.forRoot()` into your app module. | ||
3. Import `TourMatMenuModule` into all lazy loaded modules needing the tour. | ||
4. Import the `TourService` in your highest level eagerly loaded component and initialize all your steps there | ||
(even the ones in the lazy loaded modules). Note: Make sure every step object contains its route. For example, if | ||
the route to a step is '/home' then your step object should have route: '/home' as a member. | ||
5. Define anchor points for your steps by adding the `tourAnchor` directive throughout your modules (any component | ||
that requires it at any level). | ||
```html | ||
<div tourAnchor="some.anchor.id">...</div> | ||
``` | ||
6. Start the tour with `tourService.start()` in the same component you initialized your steps. Call this right after | ||
the initialization. | ||
7. Check out [the demo source code](https://github.com/hakimio/ngx-ui-tour/tree/master/projects/lazy-tour-demo/src/app) for an example. | ||
## FAQ | ||
### How to center tour step? | ||
You can create an invisible anchor point for the tour step you want to center. | ||
1. Add a simple div to your html template which will be used as the tour anchor | ||
```html | ||
<div class="centered-tour-element" tourAnchor="start-tour"></div> | ||
``` | ||
2. Add CSS for the div | ||
```css | ||
.centered-tour-element { | ||
position: fixed; | ||
left: 50%; | ||
top: 50%; | ||
/* The anchor should be translated to the left by half of your step width and half height */ | ||
/* For example, if your tour step has dimensions of 280 × 156 px, you have to translate by (-140px, -78px) */ | ||
transform: translate(-140px, -78px); | ||
} | ||
``` | ||
3. Use previously defined tour anchor | ||
```ts | ||
this.tourService.initialize([{ | ||
anchorId: 'start-tour', | ||
title: 'Welcome', | ||
content: 'Welcome to the Ngx-UI-Tour tour!' | ||
}]); | ||
this.tourService.start(); | ||
``` | ||
### How to disable main content scrolling when UI tour is active? | ||
### NOTE: starting with v7 you can simply enable `disablePageScrolling` step config if you are using `md-menu` tour UI | ||
#### If you are using older version or different UI implementation you can still use following guide to achieve this | ||
You can toggle CSS class which disables main content element scrolling when tour starts/ends. | ||
1. Create custom `TourService`: | ||
```ts | ||
@Injectable() | ||
export class MyTourService { | ||
constructor( | ||
private readonly tourService: TourService | ||
) {} | ||
private readonly MAIN_SECTION_CSS_SELECTOR = 'section.main-content'; | ||
private readonly NO_SCROLL_CSS_CLASS = 'no-scroll'; | ||
start(steps: IStepOption[]) { | ||
this.tourService.initialize(steps, { | ||
route: 'my-route', | ||
enableBackdrop: true | ||
}); | ||
this.tourService.end$.subscribe(() => this.setIsScrollable(true)); | ||
this.setIsScrollable(false); | ||
this.tourService.start(); | ||
} | ||
private setIsScrollable(isScrollable: boolean) { | ||
const body = document.body, | ||
mainSection = document.querySelector(this.MAIN_SECTION_CSS_SELECTOR), | ||
addOrRemove = isScrollable ? 'remove' : 'add'; | ||
mainSection.classList[addOrRemove](this.NO_SCROLL_CSS_CLASS); | ||
// You can also optionally disable iOS Safari bounce effect | ||
body[addOrRemove + 'EventListener']('touchmove', this.preventTouchMove, { passive: false }); | ||
} | ||
private preventTouchMove(e) { | ||
e.preventDefault(); | ||
} | ||
} | ||
``` | ||
2. Add the `no-scroll` CSS class to your global stylesheet (`styles.(s)css`) | ||
```css | ||
.no-scroll { | ||
overflow: hidden; | ||
} | ||
``` | ||
3. Use your custom `TourService` to start the UI tour: | ||
```ts | ||
import {MyTourService} from '@app-utils/my-tour.service'; | ||
@Component({ | ||
selector: 'my-app', | ||
templateUrl: './app.component.html', | ||
styleUrls: ['./app.component.css'] | ||
}) | ||
export class AppComponent { | ||
constructor( | ||
private readonly myTourService: MyTourService | ||
) { | ||
this.myTourService.start([{ | ||
anchorId: 'start-tour', | ||
title: 'Welcome', | ||
content: 'Welcome to the Ngx-UI-Tour tour!' | ||
}]); | ||
} | ||
} | ||
``` | ||
## TourService | ||
The `TourService` controls the tour. Some key functions include: | ||
**start()**\ | ||
Starts the tour | ||
**startAt(stepId: number | string)**\ | ||
Start the tour at the step with stepId or at the specified index | ||
**end()**\ | ||
Ends the tour | ||
**pause()**\ | ||
Pauses the tour | ||
**resume()**\ | ||
Resumes the tour | ||
**next()**\ | ||
Goes to the next step | ||
**prev()**\ | ||
Goes to the previous step | ||
## Step Configuration | ||
Each step can have the following properties. | ||
| Name | Type | Default | Description | | ||
| :-----: |:-------------:|:-------------:|-------------| | ||
| **stepId** | string | "" | A unique identifier for the step | | ||
| **anchorId** | string | required | The anchor to which the step will be attached | | ||
| **title** | string | "" | The title of the tour step | | ||
| **content** | string | "" | The content text of the tour step | | ||
| **enableBackdrop** | boolean | false | Controls whether to enable active element highlighting | | ||
| **route** | string | UrlSegment[] | undefined | The route to which the tour should navigate before attempting to show this tour step. If undefined, no navigation is attempted. | | ||
| **closeOnOutsideClick** | boolean | false | Enable to close the tour on outside click ("md-menu" UI only) | | ||
| **disablePageScrolling** | boolean | false | Prevents user from being able to scroll the page when the UI tour is active ("md-menu" UI only) | | ||
| **nextStep** | number | string | undefined | The step index or stepId of the next step. If undefined, the next step in the steps array is used. | | ||
| **prevStep** | number | string | undefined | The step index or stepId of the previous step. If undefined, the previous step in the steps array is used. | | ||
| **placement** | MdMenuPlacement | undefined | Tour step position with respect to the anchor. | | ||
| **disableScrollToAnchor** | boolean | false | Tour steps automatically scroll to the middle of the screen, if they are off the screen when shown. Setting this value to true will disable the scroll behavior. | | ||
| **prevBtnTitle** | string | "Prev" | Sets a custom prev button title for a given step. Default is "Prev" | | ||
| **nextBtnTitle** | string | "Next" | Sets a custom next button title for a given step. Default is "Next" | | ||
| **endBtnTitle** | string | "End" | Sets a custom end button title for a given step. Default is "End" | | ||
| **isAsync** | boolean | false | Mark your step as "async" if anchor element is added to DOM with a delay (ie after data is loaded). | | ||
| **isOptional** | boolean | false | Mark your step as "optional" if it should be skipped when anchor element is not found. Step can not be marked both "optional" and "async". | | ||
| **delayAfterNavigation** | number | 0 | Delay between navigation to a different route and showing the tour step in ms. Might be needed if you use custom scrollbar and the page is not scrolled all the way before the tour step is shown. | | ||
## Defaults | ||
You can set default values in the `TourService.initialize()` function. | ||
```ts | ||
this.tourService.initialize(steps, { | ||
route: '', | ||
disablePageScrolling: true | ||
}); | ||
``` | ||
Any value explicitly defined in a step will override the default value. | ||
## Hotkeys | ||
Hotkeys are provided using Angular's @HostListener decorator. Hotkeys are enabled when the tour starts and disabled | ||
when the tour ends. | ||
- **left arrow** - previous step | ||
- **right arrow** - next step | ||
- **esc** - end tour | ||
## Event Observables | ||
The `TourService` emits events that can be subscribed to like this: | ||
```ts | ||
this.tourService.initialize$.subscribe((steps: IStepOption[]) => { | ||
console.log('tour configured with these steps:', steps); | ||
}); | ||
``` | ||
| Name | Payload | Emitted When | ||
| :-----: |:-------------:|:-------------:| | ||
| **stepShow$** | IStepOption | A step is shown | | ||
| **stepHide$** | IStepOption | A step is hidden | | ||
| **initialize$** | IStepOption[] | The tour is configured with a set of steps | ||
| **start$** | void | The tour begins | ||
| **end$** | void | The tour ends | ||
| **pause$** | void | The tour is paused | ||
| **resume$** | void | The tour resumes | ||
| **anchorRegister$** | string | An anchor is registered with the tour | ||
| **anchorUnregister$** | string | An anchor is unregistered from the tour | ||
## Custom template | ||
You can also customize the tour step template by providing an `<ng-template let-step="step">` inside the | ||
`<tour-step-template>`. | ||
The default template is equivalent to this: | ||
```html | ||
<tour-step-template> | ||
<ng-template let-step="step"> | ||
<mat-card (click)="$event.stopPropagation()"> | ||
<mat-card-title> | ||
<div class="title-text">{{step?.title}}</div> | ||
<mat-icon class="title-close" (click)="tourService.end()">close</mat-icon> | ||
</mat-card-title> | ||
<mat-card-content [innerHTML]="step?.content"></mat-card-content> | ||
<mat-card-actions align="end"> | ||
<button | ||
mat-button | ||
class="prev" | ||
[disabled]="!tourService.hasPrev(step)" | ||
(click)="tourService.prev()" | ||
> | ||
<mat-icon>chevron_left</mat-icon> {{step?.prevBtnTitle}} | ||
</button> | ||
<button | ||
mat-button | ||
class="next" | ||
*ngIf="tourService.hasNext(step)" | ||
(click)="tourService.next()" | ||
> | ||
{{step?.nextBtnTitle}} <mat-icon>chevron_right</mat-icon> | ||
</button> | ||
<button | ||
mat-button | ||
(click)="tourService.end()" | ||
*ngIf="!tourService.hasNext(step)" | ||
> | ||
{{step?.endBtnTitle}} | ||
</button> | ||
</mat-card-actions> | ||
</mat-card> | ||
</ng-template> | ||
</tour-step-template> | ||
``` | ||
## Styling Active Tour Anchor | ||
The currently active tour anchor element has a `touranchor--is-active` class applied to it, so you can apply your own | ||
custom styles to that class to highlight the element being referenced. | ||
## License | ||
MIT |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
55141
47.85%351
18.98%343
1533.33%16
-5.88%