ngy-tutorial/bundles/ngy-tutorial.umd.min.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("@angular/animations"),require("@angular/common"),require("@angular/platform-browser"),require("@angular/platform-browser/animations")):"function"==typeof define&&define.amd?define("ngy-tutorial",["exports","@angular/core","rxjs","@angular/animations","@angular/common","@angular/platform-browser","@angular/platform-browser/animations"],e):e(t["ngy-tutorial"]={},t.ng.core,t.rxjs,t.ng.animations,t.ng.common,t.ng.platformBrowser,t.ng.platformBrowser.animations)}(this,function(t,i,e,s,o,n,p){"use strict";var r=function(){return(r=Object.assign||function(t){for(var e,i=1,s=arguments.length;i<s;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},l={Above:0,Below:1,Left:2,Right:3};l[l.Above]="Above",l[l.Below]="Below",l[l.Left]="Left",l[l.Right]="Right";var a=function(){function t(){this.toShow=new i.EventEmitter,this.tutorialInProgress=new e.Observable,this.currentStep=new e.Observable,this._tutorialInProgress=new e.BehaviorSubject(!1),this._currentStep=new e.BehaviorSubject(0),this.tutorialInProgress=this._tutorialInProgress.asObservable(),this.currentStep=this._currentStep.asObservable(),this.steps=[]}return t.prototype.showTutorial=function(){this._currentStep.next(0),this.toShow.emit(this.steps.slice()),this._tutorialInProgress.next(!0)},t.prototype.hideTutorial=function(){this.toShow.emit([]),this._tutorialInProgress.next(!1)},t.prototype.addStep=function(t,e,i){i&&i.disableNext&&i.disableInteraction?console.warn("ngy-tutorial error, step "+t+" - "+e+" has disableNext and disableInteraction set to true.\n      This step will cause tutorial to be unable to progress forward as such is not added to the tutorial"):this.steps.push(new h(t,e,i))},t.prototype.removeStep=function(t){t>this.steps.length-1||t<0||this.steps.splice(t,1)},t.prototype.nextStep=function(){this._currentStep.next(this._currentStep.value+1)},t.prototype.previousStep=function(){this._currentStep.next(this._currentStep.value-1)},t.decorators=[{type:i.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=i.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),h=function(){function s(t,e,i){this.options=r({},s.DEFAULT_OPTIONS,i),this.title=t,this.prompt=e}return s.DEFAULT_OPTIONS={placement:l.Below},s}(),d=function(){function t(t,e){var i=this;this.svc=t,this.document=e,this.enabled=!1,this.steps=[],this.currentStep=0,this.svc.toShow.subscribe(function(t){i.steps=t,i.currentStep=0,i.steps.length?(i.enabled=!0,setTimeout(function(){i.setupUIForStep()})):i.enabled=!1}),this.svc.currentStep.subscribe(function(t){i.currentStep=t,(i.currentStep>=i.steps.length||i.currentStep<0)&&i.svc.hideTutorial(),i.enabled&&setTimeout(function(){i.setupUIForStep()})})}return t.prototype.ngOnInit=function(){},t.prototype.setupUIForStep=function(){var t=this.steps[this.currentStep];if(t)if(this.resetCovers(),this.prompt.ngOnInit(),t.options.relatedElement){var e=this.document.body.querySelector("#"+t.options.relatedElement);e?(this.coverShowElement(e),this.prompt.setPromptForElement(e,t.options.placement),t.options.disableInteraction&&this.coverElement(e)):this.coverAll()}else this.coverAll()},t.prototype.coverElement=function(t){var e=t.getBoundingClientRect();this.setPosition(this.elementCover.nativeElement,e.left-10,e.top-10,e.width+20,e.height+20)},t.prototype.coverAll=function(){this.topCover&&(this.topCover.nativeElement.style.left="0",this.topCover.nativeElement.style.top="0",this.topCover.nativeElement.style.height="100vh",this.prompt.setPromptForElement())},t.prototype.coverShowElement=function(t){var e=t.getBoundingClientRect(),i=10,s=Math.max(document.documentElement.clientWidth,window.innerWidth||0),o=Math.max(document.documentElement.clientHeight,window.innerHeight||0);this.setPosition(this.topCover.nativeElement,0,0,s,e.top-i),this.setPosition(this.leftCover.nativeElement,0,e.top-i,e.left-i,e.height+20),this.setPosition(this.rightCover.nativeElement,e.left+e.width+i,e.top-i,s-e.left-e.width-i,e.height+20),this.setPosition(this.bottomCover.nativeElement,0,e.top+e.height+i,s,o-e.top-e.height-i)},t.prototype.setPosition=function(t,e,i,s,o){t.style.left=e+"px",t.style.top=i+"px",t.style.width=s+"px",t.style.height=o+"px"},t.prototype.resetCovers=function(){this.topCover&&(this.topCover.nativeElement.style.removeProperty("height"),this.topCover.nativeElement.style.removeProperty("width"),this.topCover.nativeElement.style.removeProperty("top"),this.topCover.nativeElement.style.removeProperty("left")),this.leftCover&&(this.leftCover.nativeElement.style.removeProperty("height"),this.leftCover.nativeElement.style.removeProperty("width"),this.leftCover.nativeElement.style.removeProperty("top"),this.leftCover.nativeElement.style.removeProperty("left")),this.rightCover&&(this.rightCover.nativeElement.style.removeProperty("height"),this.rightCover.nativeElement.style.removeProperty("width"),this.rightCover.nativeElement.style.removeProperty("top"),this.rightCover.nativeElement.style.removeProperty("left")),this.bottomCover&&(this.bottomCover.nativeElement.style.removeProperty("height"),this.bottomCover.nativeElement.style.removeProperty("width"),this.bottomCover.nativeElement.style.removeProperty("top"),this.bottomCover.nativeElement.style.removeProperty("left")),this.elementCover&&(this.elementCover.nativeElement.style.removeProperty("height"),this.elementCover.nativeElement.style.removeProperty("width"),this.elementCover.nativeElement.style.removeProperty("top"),this.elementCover.nativeElement.style.removeProperty("left"))},t.decorators=[{type:i.Component,args:[{selector:"lib-ngy-tutorial",template:'<lib-ngy-tutorial-prompt *ngIf="enabled" @fadeAnimation [step]="steps[currentStep]" [stepNumber]="currentStep" [totalSteps]="steps.length" #prompt></lib-ngy-tutorial-prompt>\n<div class="window-cover full-width" #topCover *ngIf="enabled" @fadeAnimation>\n</div>\n<div class="window-cover" #leftCover *ngIf="enabled" @fadeAnimation>\n</div>\n<div class="window-cover" #rightCover *ngIf="enabled" @fadeAnimation>\n</div>\n<div class="window-cover full-width" #bottomCover *ngIf="enabled" @fadeAnimation>\n</div>\n<div class="element-cover" #elementCover>\n\n</div>',styles:[":host{position:fixed;left:0;top:0;width:0;height:0}.window-cover{position:fixed;background:rgba(0,0,0,.8);z-index:998}.window-cover.full-width{width:100vw}.element-cover{position:fixed;z-index:998}lib-ngy-tutorial-prompt{top:0;left:0;position:fixed;z-index:999}"],animations:[s.trigger("fadeAnimation",[s.transition("void => *",[s.query(":self",s.animate("0.3s ease-in-out",s.keyframes([s.style({opacity:0}),s.style({opacity:1})])),{optional:!0})]),s.transition("* => void",[s.query(":self",s.animate("0.3s ease-in-out",s.keyframes([s.style({opacity:1}),s.style({opacity:0})])),{optional:!0})])])]}]}],t.ctorParameters=function(){return[{type:a},{type:undefined,decorators:[{type:i.Inject,args:[o.DOCUMENT]}]}]},t.propDecorators={topCover:[{type:i.ViewChild,args:["topCover"]}],leftCover:[{type:i.ViewChild,args:["leftCover"]}],rightCover:[{type:i.ViewChild,args:["rightCover"]}],bottomCover:[{type:i.ViewChild,args:["bottomCover"]}],elementCover:[{type:i.ViewChild,args:["elementCover"]}],prompt:[{type:i.ViewChild,args:["prompt"]}]},t}(),c=function(){function t(t,e,i,s){this.svc=t,this.sani=e,this.document=i,this.options=s,this.stepNumber=0,this.totalSteps=0,this.overrideButtonDisable=!1,this.margin=10,this.appliedClasses={},this.appliedTexts={}}return t.prototype.ngOnInit=function(){this.appliedClasses={},this.appliedTexts={},this.options.classToAdd&&(this.appliedClasses.container=this.options.classToAdd.container?this.options.classToAdd.container:[],this.appliedClasses.title=this.options.classToAdd.title?this.options.classToAdd.title:[],this.appliedClasses.prompt=this.options.classToAdd.prompt?this.options.classToAdd.prompt:[],this.appliedClasses.nextBtn=this.options.classToAdd.nextBtn?this.options.classToAdd.nextBtn:[],this.appliedClasses.previousBtn=this.options.classToAdd.previousBtn?this.options.classToAdd.previousBtn:[],this.appliedClasses.finishBtn=this.options.classToAdd.finishBtn?this.options.classToAdd.finishBtn:[],this.appliedClasses.skipBtn=this.options.classToAdd.skipBtn?this.options.classToAdd.skipBtn:[],this.appliedClasses.nextIcon=this.options.classToAdd.nextIcon?this.options.classToAdd.nextIcon:"",this.appliedClasses.previousIcon=this.options.classToAdd.previousIcon?this.options.classToAdd.previousIcon:"",this.appliedClasses.finishIcon=this.options.classToAdd.finishIcon?this.options.classToAdd.finishIcon:"",this.appliedClasses.skipIcon=this.options.classToAdd.skipIcon?this.options.classToAdd.skipIcon:""),this.step.options&&this.step.options.classToAdd&&(this.appliedClasses.container=this.appliedClasses.container.concat(this.step.options.classToAdd.container?this.step.options.classToAdd.container:[]),this.appliedClasses.title=this.appliedClasses.title.concat(this.step.options.classToAdd.title?this.step.options.classToAdd.title:[]),this.appliedClasses.prompt=this.appliedClasses.prompt.concat(this.step.options.classToAdd.prompt?this.step.options.classToAdd.prompt:[]),this.appliedClasses.nextBtn=this.appliedClasses.nextBtn.concat(this.step.options.classToAdd.nextBtn?this.step.options.classToAdd.nextBtn:[]),this.appliedClasses.previousBtn=this.appliedClasses.previousBtn.concat(this.step.options.classToAdd.previousBtn?this.step.options.classToAdd.previousBtn:[]),this.appliedClasses.finishBtn=this.appliedClasses.finishBtn.concat(this.step.options.classToAdd.finishBtn?this.step.options.classToAdd.finishBtn:[]),this.appliedClasses.skipBtn=this.appliedClasses.skipBtn.concat(this.step.options.classToAdd.skipBtn?this.step.options.classToAdd.skipBtn:[]),this.appliedClasses.nextIcon=this.step.options.classToAdd.nextIcon?this.step.options.classToAdd.nextIcon:this.appliedClasses.nextIcon,this.appliedClasses.previousIcon=this.step.options.classToAdd.previousIcon?this.step.options.classToAdd.previousIcon:this.appliedClasses.previousIcon,this.appliedClasses.finishIcon=this.step.options.classToAdd.finishIcon?this.step.options.classToAdd.finishIcon:this.appliedClasses.finishIcon,this.appliedClasses.skipIcon=this.step.options.classToAdd.skipIcon?this.step.options.classToAdd.skipIcon:this.appliedClasses.skipIcon),this.options.actionTexts&&(this.appliedTexts=r({},this.options.actionTexts)),this.step.options&&this.step.options.actionTexts&&(this.appliedTexts=r({},this.appliedTexts,this.step.options.actionTexts)),this.step.title&&(this.titleSafe=this.sani.bypassSecurityTrustHtml(this.step.title)),this.step.prompt&&(this.promptSafe=this.sani.bypassSecurityTrustHtml(this.step.prompt))},t.prototype.finishTutorial=function(){this.svc.hideTutorial()},t.prototype.nextStep=function(){this.svc.nextStep()},t.prototype.previousStep=function(){this.svc.previousStep()},t.prototype.setPromptForElement=function(p,r){var a=this;setTimeout(function(){var t=a.prompt.nativeElement.getBoundingClientRect(),e=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=Math.max(document.documentElement.clientHeight,window.innerHeight||0),s=t.height,o=t.width;if(p&&r!==undefined){var n=p.getBoundingClientRect();r===l.Right?a.setPromptPosition(n.left+n.width+2*a.margin,n.top+n.height/2-s/2):r===l.Left?a.setPromptPosition(n.left-o-2*a.margin,n.top+n.height/2-s/2):r===l.Above?a.setPromptPosition(n.left+n.width/2-o/2,n.top-2*a.margin-s):a.setPromptPosition(n.left+n.width/2-o/2,n.top+n.height+2*a.margin),setTimeout(function(){a.overrideButtonDisable=a.isPromptCoveringElement(p)||a.isElementOutOfView(p)},200)}else a.setPromptPosition(e/2-o/2,i/2-s/2)})},t.prototype.setPromptPosition=function(t,e){var i=this.prompt.nativeElement.getBoundingClientRect(),s=Math.max(document.documentElement.clientWidth,window.innerWidth||0),o=Math.max(document.documentElement.clientHeight,window.innerHeight||0),n=i.height,p=i.width;t<this.margin&&(t=this.margin),e<this.margin&&(e=this.margin),t>s-p-this.margin&&(t=s-p-this.margin),e>o-n-this.margin&&(e=o-n-this.margin),this.prompt.nativeElement.style.left=t+"px",this.prompt.nativeElement.style.top=e+"px"},t.prototype.isPromptCoveringElement=function(t){if(!t)return!1;var e=this.prompt.nativeElement.getBoundingClientRect(),i=e.left,s=e.top,o=i+e.width,n=s+e.height,p=t.getBoundingClientRect(),r=p.left,a=p.top,l=r+p.width/2,h=a+p.height/2;return!(n<h||h<s||o<l||l<i)},t.prototype.isElementOutOfView=function(t){var e=t.getBoundingClientRect(),i=Math.max(document.documentElement.clientWidth,window.innerWidth||0),s=Math.max(document.documentElement.clientHeight,window.innerHeight||0);return e.top+e.height/2>s||e.left+e.width/2>i},t.decorators=[{type:i.Component,args:[{selector:"lib-ngy-tutorial-prompt",template:'<div class="prompt-container smooth-2 ngy-tutorial-prompt-container" [ngClass]="appliedClasses.container" *ngIf="step"\n  #prompt>\n  <h2 class="title ngy-tutorial-title" [ngClass]="appliedClasses.title" *ngIf="step.title" [innerHTML]="titleSafe"></h2>\n  <p class="prompt ngy-tutorial-prompt" [ngClass]="appliedClasses.prompt" *ngIf="step.prompt" [innerHTML]="promptSafe"></p>\n  <div class="action-container">\n    <div class="actions left">\n      <button id="lib-ngy-tutorial-previous-btn" *ngIf="(stepNumber !== 0) && (!step.options.disablePrevious || overrideButtonDisable)" class="ngy-tutorial-previous-btn"\n        (click)="previousStep()" [ngClass]="appliedClasses.previousBtn"><i [ngClass]="appliedClasses.previousIcon"\n          *ngIf="appliedClasses.previousIcon"></i> {{appliedTexts.previous ? appliedTexts.previous : "Previous"}}</button>\n      <button id="lib-ngy-tutorial-skip-btn" [ngClass]="appliedClasses.skipBtn" *ngIf="stepNumber===0" class="ngy-tutorial-skip-btn"\n        (click)="finishTutorial()"><i [ngClass]="appliedClasses.skipIcon" *ngIf="appliedClasses.skipIcon"></i>\n        {{appliedTexts.skip ? appliedTexts.skip : "Skip"}}</button>\n    </div>\n    <div class="actions right">\n      <button id="lib-ngy-tutorial-next-btn" *ngIf="(stepNumber !== totalSteps - 1) && (!step.options.disableNext || overrideButtonDisable)" class="ngy-tutorial-next-btn"\n        (click)="nextStep()" [ngClass]="appliedClasses.nextBtn"><i [ngClass]="appliedClasses.nextIcon" *ngIf="appliedClasses.nextIcon"></i>\n        {{appliedTexts.next ? appliedTexts.next : "Next"}}</button>\n      <button id="lib-ngy-tutorial-finish-btn" *ngIf="(stepNumber === totalSteps - 1) && (!step.options.disableNext || overrideButtonDisable)"\n        class="ngy-tutorial-finish-btn" (click)="finishTutorial()" [ngClass]="appliedClasses.finishBtn"><i [ngClass]="appliedClasses.finishIcon"\n          *ngIf="appliedClasses.finishIcon"></i>\n        {{appliedTexts.finish ? appliedTexts.finish : "Finish"}}</button>\n    </div>\n  </div>\n</div>',styles:[".prompt-container{max-width:40vw;border-radius:3px;padding:10px;background:#222;box-shadow:0 0 6px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}@media screen and (max-width:768px){.prompt-container{max-width:95vw}}@media screen and (max-width:992px) and (min-width:768px){.prompt-container{max-width:85vw}}.prompt-container .title{margin-bottom:10px}.prompt-container .prompt{text-align:center}.prompt-container .action-container{margin-top:10px;display:flex;width:100%;flex-direction:row}.prompt-container .action-container .actions{width:100%;display:flex;padding:10px}.prompt-container .action-container .actions.left{align-items:flex-start}.prompt-container .action-container .actions.right{justify-content:flex-end}.smooth-2{transition:.2s cubic-bezier(.645,.045,.355,1)}"]}]}],t.ctorParameters=function(){return[{type:a},{type:n.DomSanitizer},{type:undefined,decorators:[{type:i.Inject,args:[o.DOCUMENT]}]},{type:undefined,decorators:[{type:i.Inject,args:["ngy-tutorial-options"]}]}]},t.propDecorators={stepNumber:[{type:i.Input}],totalSteps:[{type:i.Input}],step:[{type:i.Input}],prompt:[{type:i.ViewChild,args:["prompt"]}]},t}(),m=function(){function e(){}return e.forRoot=function(t){return void 0===t&&(t={}),{ngModule:e,providers:[a,{provide:"ngy-tutorial-options",useValue:t}]}},e.decorators=[{type:i.NgModule,args:[{imports:[o.CommonModule,p.BrowserAnimationsModule],declarations:[d,c],exports:[d]}]}],e}();t.NgyTutorialService=a,t.NgyTutorialModule=m,t.StepPromptPlacement=l,t.ɵb=c,t.ɵa=d,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngy-tutorial.umd.min.js.map