cb-tour-guide/cb-tour-guide.metadata.json

Guided tour for your Angular6+ applications.

{"__symbolic":"module","version":4,"metadata":{"GuidedTourModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"GuidedTourComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":9,"character":26}],"providers":[{"__symbolic":"reference","name":"WindowRefService"}],"exports":[{"__symbolic":"reference","name":"GuidedTourComponent"}],"entryComponents":[{"__symbolic":"reference","name":"GuidedTourComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"GuidedTourModule"},"providers":[{"__symbolic":"reference","module":"@angular/core","name":"ErrorHandler","line":18,"character":18},{"__symbolic":"reference","name":"GuidedTourService"}]}}}},"GuidedTourComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"ngx-guided-tour","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":11,"character":19},"member":"None"},"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        <!-- <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> -->\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    <!-- <ng-container *ngIf=\"progressIndicatorLocation === progressIndicatorLocations.InsideNextButton\">&nbsp;</ng-container>{{ currentStepNumber }}/{{ totalSteps }} -->\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>","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}"]}]}],"members":{"topOfPageAdjustment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"tourStepWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"minimalTourStepWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"skipText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"nextText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"doneText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"closeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"backText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"progressIndicatorLocation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"progressIndicator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"tourStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":5},"arguments":["tourStep",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":37,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":37,"character":16}]}]],"parameters":[{"__symbolic":"reference","name":"GuidedTourService"},{"__symbolic":"reference","name":"WindowRefService"},{"__symbolic":"reference","name":"any"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"scrollToAndSetElement":[{"__symbolic":"method"}],"handleOrb":[{"__symbolic":"method"}],"isTourOnScreen":[{"__symbolic":"method"}],"elementInViewport":[{"__symbolic":"method"}],"backdropClick":[{"__symbolic":"method"}],"updateStepLocation":[{"__symbolic":"method"}],"isBottom":[{"__symbolic":"method"}],"getHighlightPadding":[{"__symbolic":"method"}],"getStepScreenAdjustment":[{"__symbolic":"method"}]}},"GuidedTourService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":24,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ErrorHandler","line":22,"character":29},{"__symbolic":"reference","name":"WindowRefService"},null]}],"nextStep":[{"__symbolic":"method"}],"backStep":[{"__symbolic":"method"}],"skipTour":[{"__symbolic":"method"}],"resetTour":[{"__symbolic":"method"}],"startTour":[{"__symbolic":"method"}],"activateOrb":[{"__symbolic":"method"}],"_setFirstAndLast":[{"__symbolic":"method"}],"_checkSelectorValidity":[{"__symbolic":"method"}],"getPreparedTourStep":[{"__symbolic":"method"}],"setTourOrientation":[{"__symbolic":"method"}]}},"TourStep":{"__symbolic":"interface"},"GuidedTour":{"__symbolic":"interface"},"OrientationConfiguration":{"__symbolic":"interface"},"Orientation":{"__symbolic":"class","members":{},"statics":{"Bottom":"bottom","BottomLeft":"bottom-left","BottomRight":"bottom-right","Center":"center","Left":"left","Right":"right","Top":"top","TopLeft":"top-left","TopRight":"top-right"}},"ProgressIndicatorLocation":{"InsideNextButton":"inside-next-button","TopOfTourBlock":"top-of-tour-block","None":"none","Dots":"dots"},"WindowRefService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":22,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":34,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":34,"character":24}]}]],"parameters":[null]}]}}},"origins":{"GuidedTourModule":"./lib/guided-tour.module","GuidedTourComponent":"./lib/guided-tour.component","GuidedTourService":"./lib/guided-tour.service","TourStep":"./lib/guided-tour.constants","GuidedTour":"./lib/guided-tour.constants","OrientationConfiguration":"./lib/guided-tour.constants","Orientation":"./lib/guided-tour.constants","ProgressIndicatorLocation":"./lib/guided-tour.constants","WindowRefService":"./lib/windowref.service"},"importAs":"cb-tour-guide"}