cb-tour-guide
Version:
Guided tour for your Angular6+ applications.
2 lines • 32.4 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("rxjs/operators"),require("lodash"),require("rxjs"),require("@angular/core"),require("@angular/common"),require("@angular/material")):"function"==typeof define&&define.amd?define("cb-tour-guide",["exports","rxjs/operators","lodash","rxjs","@angular/core","@angular/common","@angular/material"],e):e(t["cb-tour-guide"]={},t.rxjs.operators,t.lodash,t.rxjs,t.ng.core,t.ng.common,t.ng.material)}(this,function(t,n,i,u,e,r,o){"use strict";var s=(c.Bottom="bottom",c.BottomLeft="bottom-left",c.BottomRight="bottom-right",c.Center="center",c.Left="left",c.Right="right",c.Top="top",c.TopLeft="top-left",c.TopRight="top-right",c);function c(){}var p={InsideNextButton:"inside-next-button",TopOfTourBlock:"top-of-tour-block",None:"none",Dots:"dots"};var a=(Object.defineProperty(d.prototype,"nativeWindow",{get:function(){return this.isBrowser?function t(){return window}():{innerWidth:0,innerHeight:0,scrollY:0,scrollX:0,pageYOffset:0,pageXOffset:0,scroll:function(){},scrollTo:function(){},addEventListener:function(){},removeEventListener:function(){}}},enumerable:!0,configurable:!0}),d.decorators=[{type:e.Injectable}],d.ctorParameters=function(){return[{type:undefined,decorators:[{type:e.Inject,args:[e.PLATFORM_ID]}]}]},d);function d(t){this.isBrowser=!1,this.isBrowser=r.isPlatformBrowser(t)}var l=(g.prototype.nextStep=function(){var t=this;this._currentTour.steps[this._currentTourStepIndex].closeAction&&this._currentTour.steps[this._currentTourStepIndex].closeAction(),this._currentTour.steps[this._currentTourStepIndex+1]?(this._currentTourStepIndex++,this._setFirstAndLast(),this._currentTour.steps[this._currentTourStepIndex].action?(this._currentTour.steps[this._currentTourStepIndex].action(),setTimeout(function(){t._checkSelectorValidity()?t._guidedTourCurrentStepSubject.next(t.getPreparedTourStep(t._currentTourStepIndex)):t.nextStep()})):this._checkSelectorValidity()?this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)):this.nextStep(),this._currentTour.nextCallback&&this._currentTour.nextCallback(this._currentTourStepIndex,this._currentTour.steps[this._currentTourStepIndex])):(this._currentTour.completeCallback&&this._currentTour.completeCallback(),this.resetTour())},g.prototype.backStep=function(){var t=this;this._currentTour.steps[this._currentTourStepIndex].closeAction&&this._currentTour.steps[this._currentTourStepIndex].closeAction(),this._currentTour.steps[this._currentTourStepIndex-1]?(this._currentTourStepIndex--,this._setFirstAndLast(),this._currentTour.steps[this._currentTourStepIndex].action?(this._currentTour.steps[this._currentTourStepIndex].action(),setTimeout(function(){t._checkSelectorValidity()?t._guidedTourCurrentStepSubject.next(t.getPreparedTourStep(t._currentTourStepIndex)):t.backStep()})):this._checkSelectorValidity()?this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)):this.backStep(),this._currentTour.nextCallback&&this._currentTour.prevCallback(this._currentTourStepIndex,this._currentTour.steps[this._currentTourStepIndex])):this.resetTour()},g.prototype.skipTour=function(){this._currentTour.skipCallback&&this._currentTour.skipCallback(this._currentTourStepIndex),this._currentTour.closeModalCallback&&this._currentTour.closeModalCallback(),this.resetTour()},g.prototype.resetTour=function(){this.dom.body.classList.remove("tour-open"),this._currentTour=null,this._currentTourStepIndex=0,this._guidedTourCurrentStepSubject.next(null)},g.prototype.startTour=function(t){this._currentTour=i.cloneDeep(t),this._currentTour.steps=this._currentTour.steps.filter(function(t){return!t.skipStep}),this._currentTourStepIndex=0,this._setFirstAndLast(),this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb),0<this._currentTour.steps.length&&(!this._currentTour.minimumScreenSize||this.windowRef.nativeWindow.innerWidth>=this._currentTour.minimumScreenSize)&&(this._currentTour.useOrb||this.dom.body.classList.add("tour-open"),this._currentTour.steps[this._currentTourStepIndex].action&&this._currentTour.steps[this._currentTourStepIndex].action(),this._checkSelectorValidity()?this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)):this.nextStep())},g.prototype.activateOrb=function(){this._guidedTourOrbShowingSubject.next(!1),this.dom.body.classList.add("tour-open")},g.prototype._setFirstAndLast=function(){this._onLastStep=this._currentTour.steps.length-1===this._currentTourStepIndex,this._onFirstStep=0===this._currentTourStepIndex},g.prototype._checkSelectorValidity=function(){return!(this._currentTour.steps[this._currentTourStepIndex].selector&&!this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector))||(this.errorHandler.handleError(new Error("Error finding selector "+this._currentTour.steps[this._currentTourStepIndex].selector+" on step "+(this._currentTourStepIndex+1)+" during guided tour: "+this._currentTour.tourId)),!1)},Object.defineProperty(g.prototype,"onLastStep",{get:function(){return this._onLastStep},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"onFirstStep",{get:function(){return this._onFirstStep},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"onResizeMessage",{get:function(){return this._onResizeMessage},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"currentTourStepDisplay",{get:function(){return this._currentTourStepIndex+1},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"currentTourStepCount",{get:function(){return this._currentTour&&this._currentTour.steps?this._currentTour.steps.length:0},enumerable:!0,configurable:!0}),Object.defineProperty(g.prototype,"preventBackdropFromAdvancing",{get:function(){return this._currentTour&&this._currentTour.preventBackdropFromAdvancing},enumerable:!0,configurable:!0}),g.prototype.getPreparedTourStep=function(t){return this.setTourOrientation(this._currentTour.steps[t])},g.prototype.setTourOrientation=function(t){var e=this,r=i.cloneDeep(t);if(r.orientation&&"string"!=typeof r.orientation&&r.orientation.length){r.orientation.sort(function(t,e){return e.maximumSize?t.maximumSize?e.maximumSize-t.maximumSize:-1:1});var o=s.Top;r.orientation.forEach(function(t){(!t.maximumSize||e.windowRef.nativeWindow.innerWidth<=t.maximumSize)&&(o=t.orientationDirection)}),r.orientation=o}return r},g.decorators=[{type:e.Injectable}],g.ctorParameters=function(){return[{type:e.ErrorHandler},{type:a},{type:undefined,decorators:[{type:e.Inject,args:[r.DOCUMENT]}]}]},g);function g(t,e,r){var o=this;this.errorHandler=t,this.windowRef=e,this.dom=r,this._guidedTourCurrentStepSubject=new u.Subject,this._guidedTourOrbShowingSubject=new u.Subject,this._currentTourStepIndex=0,this._currentTour=null,this._onFirstStep=!0,this._onLastStep=!0,this._onResizeMessage=!1,this.guidedTourCurrentStepStream=this._guidedTourCurrentStepSubject.asObservable(),this.guidedTourOrbShowingStream=this._guidedTourOrbShowingSubject.asObservable(),u.fromEvent(this.windowRef.nativeWindow,"resize").pipe(n.debounceTime(200)).subscribe(function(){if(o._currentTour&&-1<o._currentTourStepIndex)if(o._currentTour.minimumScreenSize&&o._currentTour.minimumScreenSize>=o.windowRef.nativeWindow.innerWidth){o._onResizeMessage=!0;var t=o._currentTour.resizeDialog||{title:"Please resize",content:"You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour."};o._guidedTourCurrentStepSubject.next(t)}else o._onResizeMessage=!1,o._guidedTourCurrentStepSubject.next(o.getPreparedTourStep(o._currentTourStepIndex))})}var h=(Object.defineProperty(f.prototype,"maxWidthAdjustmentForTourStep",{get:function(){return this.tourStepWidth-this.minimalTourStepWidth},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"widthAdjustmentForScreenBound",{get:function(){if(!this.tourStep)return 0;var t=0;return this.calculatedLeftPosition<0&&(t=-this.calculatedLeftPosition),this.calculatedLeftPosition>this.windowRef.nativeWindow.innerWidth-this.tourStepWidth&&(t=this.calculatedLeftPosition-(this.windowRef.nativeWindow.innerWidth-this.tourStepWidth)),Math.min(this.maxWidthAdjustmentForTourStep,t)},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"calculatedTourStepWidth",{get:function(){return this.tourStepWidth-this.widthAdjustmentForScreenBound},enumerable:!0,configurable:!0}),f.prototype.ngAfterViewInit=function(){var e=this;this.guidedTourService.guidedTourCurrentStepStream.subscribe(function(t){(e.currentTourStep=t)&&t.selector&&e.dom.querySelector(t.selector)?e.scrollToAndSetElement():e.selectedElementRect=null}),this.guidedTourService.guidedTourOrbShowingStream.subscribe(function(t){e.isOrbShowing=t}),this.resizeSubscription=u.fromEvent(this.windowRef.nativeWindow,"resize").subscribe(function(){e.updateStepLocation()}),this.scrollSubscription=u.fromEvent(this.windowRef.nativeWindow,"scroll").subscribe(function(){e.updateStepLocation()})},f.prototype.ngOnDestroy=function(){this.resizeSubscription.unsubscribe(),this.scrollSubscription.unsubscribe()},f.prototype.scrollToAndSetElement=function(){var r=this;this.updateStepLocation(),setTimeout(function(){if(!r.isOrbShowing&&!r.isTourOnScreen())if(r.selectedElementRect&&r.isBottom()){var t=r.windowRef.nativeWindow.scrollY+r.selectedElementRect.top-r.topOfPageAdjustment-(r.currentTourStep.scrollAdjustment?r.currentTourStep.scrollAdjustment:0)+r.getStepScreenAdjustment();try{r.windowRef.nativeWindow.scrollTo({left:null,top:t,behavior:"smooth"})}catch(e){if(!(e instanceof TypeError))throw e;r.windowRef.nativeWindow.scroll(0,t)}}else{t=r.windowRef.nativeWindow.scrollY+r.selectedElementRect.top+r.selectedElementRect.height-r.windowRef.nativeWindow.innerHeight+(r.currentTourStep.scrollAdjustment?r.currentTourStep.scrollAdjustment:0)-r.getStepScreenAdjustment();try{r.windowRef.nativeWindow.scrollTo({left:null,top:t,behavior:"smooth"})}catch(e){if(!(e instanceof TypeError))throw e;r.windowRef.nativeWindow.scroll(0,t)}}})},f.prototype.handleOrb=function(){this.guidedTourService.activateOrb(),this.currentTourStep&&this.currentTourStep.selector&&this.scrollToAndSetElement()},f.prototype.isTourOnScreen=function(){return this.tourStep&&this.elementInViewport(this.dom.querySelector(this.currentTourStep.selector))&&this.elementInViewport(this.tourStep.nativeElement)},f.prototype.elementInViewport=function(t){for(var e=t.offsetTop,r=t.offsetHeight;t.offsetParent;)e+=(t=t.offsetParent).offsetTop;return this.isBottom()?e>=this.windowRef.nativeWindow.pageYOffset+this.topOfPageAdjustment+(this.currentTourStep.scrollAdjustment?this.currentTourStep.scrollAdjustment:0)+this.getStepScreenAdjustment()&&e+r<=this.windowRef.nativeWindow.pageYOffset+this.windowRef.nativeWindow.innerHeight:e>=this.windowRef.nativeWindow.pageYOffset+this.topOfPageAdjustment-this.getStepScreenAdjustment()&&e+r+(this.currentTourStep.scrollAdjustment?this.currentTourStep.scrollAdjustment:0)<=this.windowRef.nativeWindow.pageYOffset+this.windowRef.nativeWindow.innerHeight},f.prototype.backdropClick=function(t){this.guidedTourService.preventBackdropFromAdvancing?this.guidedTourService.skipTour():this.guidedTourService.nextStep()},f.prototype.updateStepLocation=function(){if(this.currentTourStep&&this.currentTourStep.selector){var t=this.dom.querySelector(this.currentTourStep.selector);t&&"function"==typeof t.getBoundingClientRect?this.selectedElementRect=t.getBoundingClientRect():this.selectedElementRect=null}else this.selectedElementRect=null},f.prototype.isBottom=function(){return this.currentTourStep.orientation&&(this.currentTourStep.orientation===s.Bottom||this.currentTourStep.orientation===s.BottomLeft||this.currentTourStep.orientation===s.BottomRight)},Object.defineProperty(f.prototype,"topPosition",{get:function(){var t=this.getHighlightPadding();return this.isBottom()?this.selectedElementRect.top+this.selectedElementRect.height+t:this.selectedElementRect.top-this.getHighlightPadding()},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"orbTopPosition",{get:function(){return this.isBottom()?this.selectedElementRect.top+this.selectedElementRect.height:this.currentTourStep.orientation===s.Right||this.currentTourStep.orientation===s.Left?this.selectedElementRect.top+this.selectedElementRect.height/2:this.selectedElementRect.top},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"calculatedLeftPosition",{get:function(){var t=this.getHighlightPadding();return this.currentTourStep.orientation===s.TopRight||this.currentTourStep.orientation===s.BottomRight?this.selectedElementRect.right-this.tourStepWidth:this.currentTourStep.orientation===s.TopLeft||this.currentTourStep.orientation===s.BottomLeft?this.selectedElementRect.left:this.currentTourStep.orientation===s.Left?this.selectedElementRect.left-this.tourStepWidth-t:this.currentTourStep.orientation===s.Right?this.selectedElementRect.left+this.selectedElementRect.width+t:this.selectedElementRect.right-this.selectedElementRect.width/2-this.tourStepWidth/2},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"leftPosition",{get:function(){if(0<=this.calculatedLeftPosition)return this.calculatedLeftPosition;var t=Math.max(0,-this.calculatedLeftPosition),e=Math.min(this.maxWidthAdjustmentForTourStep,t);return this.calculatedLeftPosition+e},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"orbLeftPosition",{get:function(){return this.currentTourStep.orientation===s.TopRight||this.currentTourStep.orientation===s.BottomRight?this.selectedElementRect.right:this.currentTourStep.orientation===s.TopLeft||this.currentTourStep.orientation===s.BottomLeft?this.selectedElementRect.left:this.currentTourStep.orientation===s.Left?this.selectedElementRect.left:this.currentTourStep.orientation===s.Right?this.selectedElementRect.left+this.selectedElementRect.width:this.selectedElementRect.right-this.selectedElementRect.width/2},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"transform",{get:function(){return this.currentTourStep.orientation&&this.currentTourStep.orientation!==s.Top&&this.currentTourStep.orientation!==s.TopRight&&this.currentTourStep.orientation!==s.TopLeft?null:"translateY(-100%)"},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"orbTransform",{get:function(){return this.currentTourStep.orientation&&this.currentTourStep.orientation!==s.Top&&this.currentTourStep.orientation!==s.Bottom&&this.currentTourStep.orientation!==s.TopLeft&&this.currentTourStep.orientation!==s.BottomLeft?this.currentTourStep.orientation===s.TopRight||this.currentTourStep.orientation===s.BottomRight?"translate(-100%, -50%)":this.currentTourStep.orientation===s.Right||this.currentTourStep.orientation===s.Left?"translate(-50%, -50%)":null:"translateY(-50%)"},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"overlayTop",{get:function(){return this.selectedElementRect?this.selectedElementRect.top-this.getHighlightPadding():0},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"overlayLeft",{get:function(){return this.selectedElementRect?this.selectedElementRect.left-this.getHighlightPadding():0},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"overlayHeight",{get:function(){return this.selectedElementRect?this.selectedElementRect.height+2*this.getHighlightPadding():0},enumerable:!0,configurable:!0}),Object.defineProperty(f.prototype,"overlayWidth",{get:function(){return this.selectedElementRect?this.selectedElementRect.width+2*this.getHighlightPadding():0},enumerable:!0,configurable:!0}),f.prototype.getHighlightPadding=function(){var t=this.currentTourStep.useHighlightPadding?this.highlightPadding:0;return this.currentTourStep.highlightPadding&&(t=this.currentTourStep.highlightPadding),t},f.prototype.getStepScreenAdjustment=function(){if(this.currentTourStep.orientation===s.Left||this.currentTourStep.orientation===s.Right)return 0;var t=this.currentTourStep.scrollAdjustment?this.currentTourStep.scrollAdjustment:0,e="function"==typeof this.tourStep.nativeElement.getBoundingClientRect?this.tourStep.nativeElement.getBoundingClientRect().height:0,r=this.selectedElementRect.height+t+e;return this.windowRef.nativeWindow.innerHeight-this.topOfPageAdjustment<r?r-(this.windowRef.nativeWindow.innerHeight-this.topOfPageAdjustment):0},f.decorators=[{type:e.Component,args:[{selector:"ngx-guided-tour",template:'<div *ngIf="currentTourStep && selectedElementRect && isOrbShowing" (mouseenter)="handleOrb()"\n class="tour-orb tour-{{ currentTourStep.orientation }}" [style.top.px]="orbTopPosition"\n [style.left.px]="orbLeftPosition" [style.transform]="orbTransform">\n <div class="tour-orb-ring"></div>\n</div>\n<div *ngIf="currentTourStep && !isOrbShowing">\n <div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>\n <div class="" [attr.class]="\'guided-tour-spotlight-overlay \' + currentTourStep?.class" [style.top.px]="overlayTop"\n [style.left.px]="overlayLeft" [style.height.px]="overlayHeight" [style.width.px]="overlayWidth">\n </div>\n</div>\n<div *ngIf="currentTourStep && !isOrbShowing">\n <div #tourStep *ngIf="currentTourStep"\n class="tour-step tour-{{ currentTourStep.orientation}} {{currentTourStep?.containerClass}}" [ngClass]="{\n \'page-tour-step\': !currentTourStep.selector,\n \'right-panel\': currentTourStep.connectorDirection == \'right\',\n \'left-panel\': currentTourStep.connectorDirection == \'left\',\n \'bottom-panel\': currentTourStep.connectorDirection == \'bottom\',\n \'top-panel\': currentTourStep.connectorDirection == \'top\'\n }" [style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"\n [style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)"\n [style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)"\n [style.transform]="(currentTourStep.selector && selectedElementRect ? transform : null)">\n\n <div *ngIf="currentTourStep.isMobile && currentTourStep.connectorDirection == \'bottom\'" class="tour-buttons tour-button-container">\n <div class="tour-actions-button-container">\n <button *ngIf="!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage"\n [attr.class]="currentTourStep?.backBtnClass + \' back-button\'" (click)="guidedTourService.backStep()">\n {{ backText }}\n </button>\n </div>\n <button *ngIf="!guidedTourService.onLastStep && !guidedTourService.onResizeMessage" class="next-button"\n (click)="guidedTourService.nextStep()">\n {{ nextText }}\n <ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.InsideNextButton">\n <ng-container *ngTemplateOutlet="progress"></ng-container>\n </ng-container>\n </button>\n <button *ngIf="guidedTourService.onLastStep" [attr.class]="currentTourStep?.nextBtnClass + \' next-button\'"\n (click)="guidedTourService.nextStep()">\n {{ doneText }}\n </button>\n <button *ngIf="guidedTourService.onResizeMessage" class="next-button" (click)="guidedTourService.resetTour()">\n {{ closeText }}\n </button>\n\n </div>\n\n <div *ngIf="currentTourStep.selector" class="tour-arrow"></div>\n <div class="tour-block">\n <div class="arrow" [ngClass]="{\n \'right-connector\': (currentTourStep.selector && currentTourStep.connectorDirection == \'right\'),\n \'left-connector\': (currentTourStep.selector && currentTourStep.connectorDirection == \'left\'),\n \'bottom-connector\': (currentTourStep.selector && currentTourStep.connectorDirection == \'bottom\'),\n \'top-connector\': (currentTourStep.selector && currentTourStep.connectorDirection == \'top\')\n }">\n <div class="circle"></div>\n <div class="circle-start-dot"></div>\n <div class="triangle"></div>\n </div>\n\n <div *ngIf="progressIndicatorLocation === progressIndicatorLocations.TopOfTourBlock\n && !guidedTourService.onResizeMessage" class="tour-progress-indicator">\n <ng-container *ngTemplateOutlet="progress"></ng-container>\n </div>\n <div class="tour-image" *ngIf="currentTourStep.icon && currentTourStep.selector">\n <mat-icon>{{currentTourStep.icon}}</mat-icon>\n </div>\n <h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">\n {{ currentTourStep.title }}\n </h3>\n <h2 class="tour-title" *ngIf="currentTourStep.title && !currentTourStep.selector">\n {{ currentTourStep.title }}\n </h2>\n <div class="tour-content" [innerHTML]="currentTourStep.content"></div>\n <div *ngIf="!currentTourStep.isMobile" class="tour-buttons tour-button-container">\n \x3c!-- <div class="tour-skip-container">\n <button *ngIf="!guidedTourService.onResizeMessage"\n (click)="guidedTourService.skipTour()"\n [attr.class]="currentTourStep?.skipBtnClass + \' skip-button link-button\'">\n {{ skipText }}\n </button>\n </div> --\x3e\n <div class="tour-actions-button-container">\n <button *ngIf="!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage"\n [attr.class]="currentTourStep?.backBtnClass + \' back-button\'" (click)="guidedTourService.backStep()">\n {{ backText }}\n </button>\n </div>\n <button *ngIf="!guidedTourService.onLastStep && !guidedTourService.onResizeMessage" class="next-button"\n (click)="guidedTourService.nextStep()">\n {{ nextText }}\n <ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.InsideNextButton">\n <ng-container *ngTemplateOutlet="progress"></ng-container>\n </ng-container>\n </button>\n <button *ngIf="guidedTourService.onLastStep" [attr.class]="currentTourStep?.nextBtnClass + \' next-button\'"\n (click)="guidedTourService.nextStep()">\n {{ doneText }}\n </button>\n <button *ngIf="guidedTourService.onResizeMessage" class="next-button" (click)="guidedTourService.resetTour()">\n {{ closeText }}\n </button>\n\n </div>\n\n\n <div class="progress-container">\n <ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.Dots">\n <ng-container *ngTemplateOutlet="progress"></ng-container>\n </ng-container>\n </div>\n\n </div>\n <div *ngIf="currentTourStep.isMobile && currentTourStep.connectorDirection != \'bottom\'" class="tour-buttons tour-button-container">\n <div class="tour-actions-button-container">\n <button *ngIf="!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage"\n [attr.class]="currentTourStep?.backBtnClass + \' back-button\'" (click)="guidedTourService.backStep()">\n {{ backText }}\n </button>\n </div>\n <button *ngIf="!guidedTourService.onLastStep && !guidedTourService.onResizeMessage" class="next-button"\n (click)="guidedTourService.nextStep()">\n {{ nextText }}\n <ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.InsideNextButton">\n <ng-container *ngTemplateOutlet="progress"></ng-container>\n </ng-container>\n </button>\n <button *ngIf="guidedTourService.onLastStep" [attr.class]="currentTourStep?.nextBtnClass + \' next-button\'"\n (click)="guidedTourService.nextStep()">\n {{ doneText }}\n </button>\n <button *ngIf="guidedTourService.onResizeMessage" class="next-button" (click)="guidedTourService.resetTour()">\n {{ closeText }}\n </button>\n\n </div>\n </div>\n <ng-template #progress>\n <ng-container *ngTemplateOutlet="\n progressIndicator || defaultProgressIndicator; \n context: { currentStepNumber: guidedTourService.currentTourStepDisplay, totalSteps: guidedTourService.currentTourStepCount }\n "></ng-container>\n </ng-template>\n <ng-template #defaultProgressIndicator let-currentStepNumber="currentStepNumber" let-totalSteps="totalSteps">\n \x3c!-- <ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.InsideNextButton"> </ng-container>{{ currentStepNumber }}/{{ totalSteps }} --\x3e\n <ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.Dots">\n <div class="pagination">\n <li class="nav-dots">\n <ng-container *ngFor="let dot of [].constructor(totalSteps); first as isFirst; index as i">\n <label [ngClass]="(currentStepNumber == (i+1)) ? \'nav-dot-active\': \'\'" class="nav-dot"\n id="img-dot-+{{i}}+{{currentStepNumber}}"></label>\n </ng-container>\n </li>\n </div>\n </ng-container>\n </ng-template>',encapsulation:e.ViewEncapsulation.None,styles:['ngx-guided-tour .guided-tour-user-input-mask{position:fixed;top:0;left:0;display:block;height:100%;width:100%;max-height:100vh;text-align:center;opacity:0}ngx-guided-tour .guided-tour-spotlight-overlay{position:fixed;box-shadow:0 0 0 9999px rgba(0,0,0,.7),0 0 1.5rem rgba(0,0,0,.5)}ngx-guided-tour .tour-orb{position:fixed;width:20px;height:20px;border-radius:50%}ngx-guided-tour .tour-orb .tour-orb-ring{width:35px;height:35px;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);animation:2s linear infinite pulse}ngx-guided-tour .tour-orb .tour-orb-ring:after{content:\'\';display:inline-block;height:100%;width:100%;border-radius:50%}@keyframes pulse{from{transform:translate(-50%,-50%) scale(.45);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}ngx-guided-tour .tour-step{position:fixed}ngx-guided-tour .tour-step.page-tour-step{max-width:400px;width:50%;left:50%;top:50%;transform:translate(-50%,-50%)}ngx-guided-tour .tour-step.tour-bottom .tour-arrow::before,ngx-guided-tour .tour-step.tour-bottom-left .tour-arrow::before,ngx-guided-tour .tour-step.tour-bottom-right .tour-arrow::before{position:absolute}ngx-guided-tour .tour-step.tour-bottom .tour-block,ngx-guided-tour .tour-step.tour-bottom-left .tour-block,ngx-guided-tour .tour-step.tour-bottom-right .tour-block{margin-top:10px}ngx-guided-tour .tour-step.tour-top,ngx-guided-tour .tour-step.tour-top-left,ngx-guided-tour .tour-step.tour-top-right{margin-bottom:10px}ngx-guided-tour .tour-step.tour-top .tour-arrow::before,ngx-guided-tour .tour-step.tour-top-left .tour-arrow::before,ngx-guided-tour .tour-step.tour-top-right .tour-arrow::before{position:absolute;bottom:0}ngx-guided-tour .tour-step.tour-top .tour-block,ngx-guided-tour .tour-step.tour-top-left .tour-block,ngx-guided-tour .tour-step.tour-top-right .tour-block{margin-bottom:10px}ngx-guided-tour .tour-step.tour-bottom .tour-arrow::before,ngx-guided-tour .tour-step.tour-top .tour-arrow::before{transform:translateX(-50%);left:50%}ngx-guided-tour .tour-step.tour-bottom-right .tour-arrow::before,ngx-guided-tour .tour-step.tour-top-right .tour-arrow::before{transform:translateX(-100%);left:calc(100% - 5px)}ngx-guided-tour .tour-step.tour-bottom-left .tour-arrow::before,ngx-guided-tour .tour-step.tour-top-left .tour-arrow::before{left:5px}ngx-guided-tour .tour-step.tour-left .tour-arrow::before{position:absolute;left:100%;transform:translateX(-100%);top:5px}ngx-guided-tour .tour-step.tour-left .tour-block{margin-right:10px}ngx-guided-tour .tour-step.tour-right .tour-arrow::before{position:absolute;left:0;top:5px}ngx-guided-tour .tour-step.tour-right .tour-block{margin-left:10px}ngx-guided-tour .tour-step .tour-block{padding:15px 25px}ngx-guided-tour .tour-step .tour-progress-indicator{padding-bottom:15px}ngx-guided-tour .tour-step .tour-title{font-weight:700!important;padding-bottom:20px}ngx-guided-tour .tour-step h3.tour-title{font-size:20px}ngx-guided-tour .tour-step h2.tour-title{font-size:30px}ngx-guided-tour .tour-step .tour-content{min-height:80px;padding-bottom:30px;font-size:15px}ngx-guided-tour .tour-step .tour-buttons{overflow:hidden}ngx-guided-tour .tour-step .tour-buttons button.link-button{font-size:15px;font-weight:700;max-width:none!important;cursor:pointer;text-align:center;white-space:nowrap;vertical-align:middle;border:1px solid transparent;line-height:1.5;background-color:transparent;position:relative;outline:0;padding:0 15px;-webkit-appearance:button}ngx-guided-tour .tour-step .tour-buttons button.skip-button.link-button{padding-left:0;border-left:0}ngx-guided-tour .tour-step .tour-buttons .back-button,ngx-guided-tour .tour-step .tour-buttons .next-button{cursor:pointer;border-radius:1px;font-size:14px;border:none;outline:0;padding-left:10px;padding-right:10px}.arrow{position:absolute;left:-50px;top:-13px}.right-connector{transform:scaleX(-1);left:0;right:-46px}.circle{position:absolute;box-sizing:border-box;height:118px;width:100px;border:7px dotted #000;border-radius:50%;clip-path:inset(0 50% 0 0)}.triangle{position:absolute;width:20px;height:15px;background:#000;margin-top:-6px;margin-left:38px;clip-path:polygon(50% 0,0 100%,100% 100%);transform:rotate(90deg)}.circle-start-dot{display:inline;width:16px;height:16px;background-color:#f3962e;content:"";border-radius:50%;position:absolute;margin-top:108px;margin-left:40px}.tour-step.left-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;position:absolute;content:"";overflow:hidden;top:10px}.tour-step.bottom-panel:after,.tour-step.right-panel:after,.tour-step.top-panel:after{display:inline;width:8px;height:-webkit-fill-available;background-color:green;right:0;position:absolute;content:"";overflow:hidden;top:10px}.progress-container{display:flex;justify-content:center;align-items:center}.pagination{display:flex;justify-content:center;align-items:center;padding:.5rem}.nav-dots{display:inline-block;position:relative;width:auto;height:10px;border-radius:50%;cursor:default;margin:2px}.nav-dots .nav-dot{top:-5px;width:11px;height:11px;margin:0 4px;position:relative;border-radius:100%;display:inline-block;background-color:#d3d3d3}.nav-dot-active{background:#113463}.top-connector{top:-116px!important;right:173px!important}.top-connector .circle{top:50px;left:80px;transform:rotate(180deg);width:50px;height:70px}.top-connector .circle-start-dot{margin-left:100px}.top-connector .triangle{left:63px;top:49px;transform:rotate(44deg)!important}']}]}],f.ctorParameters=function(){return[{type:l},{type:a},{type:undefined,decorators:[{type:e.Inject,args:[r.DOCUMENT]}]}]},f.propDecorators={topOfPageAdjustment:[{type:e.Input}],tourStepWidth:[{type:e.Input}],minimalTourStepWidth:[{type:e.Input}],skipText:[{type:e.Input}],nextText:[{type:e.Input}],doneText:[{type:e.Input}],closeText:[{type:e.Input}],backText:[{type:e.Input}],progressIndicatorLocation:[{type:e.Input}],progressIndicator:[{type:e.Input}],tourStep:[{type:e.ViewChild,args:["tourStep",{"static":!1}]}]},f);function f(t,e,r){this.guidedTourService=t,this.windowRef=e,this.dom=r,this.topOfPageAdjustment=0,this.tourStepWidth=300,this.minimalTourStepWidth=200,this.skipText="Skip",this.nextText="Next",this.doneText="Done",this.closeText="Close",this.backText="Back",this.progressIndicatorLocation=p.InsideNextButton,this.progressIndicator=undefined,this.highlightPadding=4,this.currentTourStep=null,this.selectedElementRect=null,this.isOrbShowing=!1,this.progressIndicatorLocations=p}var S=(T.forRoot=function(){return{ngModule:T,providers:[e.ErrorHandler,l]}},T.decorators=[{type:e.NgModule,args:[{declarations:[h],imports:[r.CommonModule,o.MatIconModule],providers:[a],exports:[h],entryComponents:[h]}]}],T);function T(){}t.GuidedTourModule=S,t.GuidedTourComponent=h,t.GuidedTourService=l,t.Orientation=s,t.ProgressIndicatorLocation=p,t.WindowRefService=a,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=cb-tour-guide.umd.min.js.map