angular-walkthrough - npm Package Compare versions

Comparing version 0.5.7 to 0.6.0

angular-walkthrough.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"WalkthroughElementCoordinate":{"__symbolic":"interface"},"booleanValue":{"__symbolic":"error","message":"Lambda not supported","line":9,"character":28,"module":"./walkthrough-tools"},"WalkthroughEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"error","message":"Could not resolve type","line":16,"character":29,"context":{"typeName":"HTMLElement"},"module":"./walkthrough-tools"}]}]}},"WalkthroughMargin":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}},"WalkthroughComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"ng-walkthrough","template":""}]}],"members":{"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"finished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":5}}]}],"focusElementCSSClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"focusElementSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"typeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"focusClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"previousStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"nextStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"contentText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"marginZone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"animationDelays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"justifyContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"finishStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"focusHighlightAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":194,"character":43},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":195,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":196,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":197,"character":27},{"__symbolic":"reference","name":"ɵa"}]}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":201,"character":5},"arguments":["window:resize"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"loadPrevioustStep":[{"__symbolic":"method"}],"loadNextStep":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"_getInstance":[{"__symbolic":"method"}],"_appendComponentToBody":[{"__symbolic":"method"}],"_attachWalkthroughContent":[{"__symbolic":"method"}],"_elementLocations":[{"__symbolic":"method"}],"_getFocusElement":[{"__symbolic":"method"}],"_setFocus":[{"__symbolic":"method"}],"_setFocusContinue":[{"__symbolic":"method"}],"_updateElementPositions":[{"__symbolic":"method"}],"_attachContentTemplate":[{"__symbolic":"method"}],"_initStylingTemplate":[{"__symbolic":"method"}],"_initContentTemplate":[{"__symbolic":"method"}]},"statics":{"_walkthroughContainer":null,"_walkthroughContainerCreating":false,"walkthroughHasShow":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"WalkthroughComponent"},"member":"_walkthroughContainer"},"member":"instance"},"member":"show"}},"walkthroughHasPause":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"WalkthroughComponent"},"member":"_walkthroughContainer"},"member":"instance"},"member":"pause"}}}},"WalkthroughFlowComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"ng-walkthrough-flow","template":""}]}],"members":{"walkthroughComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":22,"character":5},"arguments":[{"__symbolic":"reference","name":"WalkthroughComponent"}]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":5}}]}],"finished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":5}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"marginZone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}]}},"throwWalkthroughContentAlreadyAttachedError":{"__symbolic":"function"},"WalkthroughContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"BasePortalHost","line":28,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"walkthrough-container","styles":[":host { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 99.9%; min-height: 100%; } :host.hide { display: none; } :host.cursor { cursor: pointer; } :host.backdrop { background-color: rgba(0, 0, 0, 0.6); } button { background: none; border: 0; color: #FFF; } .wkt-zone { position: absolute; } .wkt-zone.hide { display: none; } .wkt-zone.backdrop { box-shadow: 0 0 0 2200px rgba(0, 0, 0, 0.6); } .wkt-zone.glow { box-shadow: 0 0 4px 2px #FFFF66, 0 0 9px 0 #FFFF66, 0 0 36px #FFFF66; } .wkt-zone.clickable { cursor: pointer; } .wkt-zone.highlight { -webkit-animation: highlight .45s 4; animation: highlight .45s 4; } .wkt-container { position: relative; } .wkt-content-block { position: absolute; margin: 1em; padding: 6px; z-index: 1; color: #FFF; min-width: calc(320px - 2em); } .wkt-content-block.hide { display: none; } .wkt-content-block.darken { background-color: rgba(0, 0, 0, 0.6); } .wkt-close + .wkt-content { margin-top: 1.3em; } .wkt-close { position: absolute; right: 1em; cursor: pointer; } .wkt-navigate { display: flex; flex-wrap: wrap; justify-content: center; } .wkt-navigate > button { padding: 6px; font-size: 120%; } .wkt-navigate > button:hover { cursor: pointer; text-decoration: underline; } .wkt-previous-link::before { content: '<< '; } .wkt-next-link::after { content: ' >>'; } svg { overflow: visible; position: absolute; top: -1px; left: -1px; border: 1px solid transparent; } svg.hide { display: none; } #wkt-arrow > path { stroke-width: 0; } .wkt-arrow-path { stroke-width: 2px; fill: none; marker-end: url(#wkt-arrow); } @-webkit-keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @media screen and (min-width: 1920px), screen and (min-height: 1920px) { .wkt-zone.backdrop { box-shadow: 0 0 0 4400px rgba(0, 0, 0, 0.6); } } @media screen and (min-width: 3840px), screen and (min-height: 3840px) { .wkt-zone.backdrop { box-shadow: 0 0 0 8800px rgba(0, 0, 0, 0.6); } } _:default:not(:root:root), .wkt-zone.backdrop { box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6) !important; } "],"template":"<div class=\"wkt-container\"> <div class=\"wkt-zone\" #zone (click)=\"clickZone($event)\" [class.hide]=\"!hasHighlightZone\" [class.backdrop]=\"hasBackdrop\" [class.glow]=\"hasGlow\" [class.clickable]=\"hasClickable\" [class.highlight]=\"hasHighlight\" [style.padding]=\"marginZone\"></div> <div class=\"wkt-content-block\" [class.hide]=\"hideOther\" [class.darken]=\"contentStyle === 'draken'\" #contentBlock> <button type=\"button\" class=\"wkt-close\" *ngIf=\"hasCloseButton\" (click)=\"close()\">✖</button> <div class=\"wkt-content\"> <p *ngIf=\"contentText\">{{contentText}}</p> <ng-template cdkPortalHost></ng-template> </div> <div class=\"wkt-navigate\" *ngIf=\"hasPrevious||hasNext||hasFinish\"> <button type=\"button\" class=\"wkt-previous-link\" *ngIf=\"hasPrevious\" (click)=\"previous()\">{{text.previous}}</button> <button type=\"button\" class=\"wkt-next-link\" *ngIf=\"hasNext\" (click)=\"next()\">{{text.next}}</button> <button type=\"button\" class=\"wkt-finish-link\" *ngIf=\"hasFinish\" (click)=\"close(true)\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\" [class.hide]=\"hideOther\"> <defs> <marker id=\"wkt-arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerUnits=\"strokeWidth\" orient=\"auto\" markerWidth=\"10\" markerHeight=\"10\"> <polyline points=\"0,0 10,5 0,10 5,5\" [attr.fill]=\"arrowColor || '#FFF'\" /> </marker> </defs> <path class=\"wkt-arrow-path\" [attr.d]=\"arrowPath\" [attr.stroke]=\"arrowColor || '#FFF'\" /> </svg> </div>"}]}],"members":{"_portalHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalHostDirective","line":76,"character":15}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":77,"character":5},"arguments":["content"]}]}],"contentBlock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":78,"character":5},"arguments":["contentBlock"]}]}],"zone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":79,"character":5},"arguments":["zone"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":83,"character":5},"arguments":["attr.id"]}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":88,"character":5},"arguments":["class.hide"]}]}],"cursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":93,"character":5},"arguments":["class.cursor"]}]}],"backdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":98,"character":5},"arguments":["class.backdrop"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":107,"character":33},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":109,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":110,"character":21}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":115,"character":5},"arguments":["click"]}]}],"clickZone":[{"__symbolic":"method"}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"setHeight":[{"__symbolic":"method"}],"hightlightZone":[{"__symbolic":"method"}],"hightlightZoneStyling":[{"__symbolic":"method"}],"contentBlockPosition":[{"__symbolic":"method"}],"arrowPosition":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"continue":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"WalkthroughText":{"__symbolic":"class","members":{}},"WalkthroughModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"WalkthroughFlowComponent"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"exports":[{"__symbolic":"reference","name":"WalkthroughFlowComponent"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":22,"character":8}],"entryComponents":[{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"WalkthroughModule"},"providers":[]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"retrieveCoordinates":[{"__symbolic":"method"}],"getTop":[{"__symbolic":"method"}],"getDocumentHeight":[{"__symbolic":"method"}],"scrollIntoViewIfOutOfView":[{"__symbolic":"method"}],"scrollToTopElement":[{"__symbolic":"method"}],"getScrollParent":[{"__symbolic":"method"}],"getHeightOfPage":[{"__symbolic":"method"}]}}},"origins":{"WalkthroughElementCoordinate":"./walkthrough-tools","booleanValue":"./walkthrough-tools","WalkthroughEvent":"./walkthrough-tools","WalkthroughMargin":"./walkthrough-tools","WalkthroughComponent":"./walkthrough.component","WalkthroughFlowComponent":"./walkthrough-flow.component","throwWalkthroughContentAlreadyAttachedError":"./walkthrough-container.component","WalkthroughContainerComponent":"./walkthrough-container.component","WalkthroughText":"./walkthrough-text","WalkthroughModule":"./walkthrough.module","ɵa":"./walkthrough.service"},"importAs":"angular-walkthrough"}
+{"__symbolic":"module","version":4,"metadata":{"WalkthroughElementCoordinate":{"__symbolic":"interface"},"Margin":{"__symbolic":"interface"},"booleanValue":{"__symbolic":"error","message":"Lambda not supported","line":16,"character":28,"module":"./walkthrough-tools"},"WalkthroughEvent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"error","message":"Could not resolve type","line":23,"character":29,"context":{"typeName":"HTMLElement"},"module":"./walkthrough-tools"}]}]}},"WalkthroughMargin":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}},"WalkthroughComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"ng-walkthrough","template":""}]}],"members":{"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"finished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":5}}]}],"focusElementCSSClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"focusElementSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"typeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"focusClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"previousStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"nextStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"contentText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"marginZone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"animationDelays":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"alignContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"verticalAlignContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"contentSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"verticalContentSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":5}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":5}}]}],"finishButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"focusHighlightAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":187,"character":5}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":195,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":250,"character":43},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":251,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":252,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":253,"character":27},{"__symbolic":"reference","name":"ɵa"}]}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":257,"character":5},"arguments":["window:resize"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"loadPrevioustStep":[{"__symbolic":"method"}],"loadNextStep":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"_show":[{"__symbolic":"method"}],"_next":[{"__symbolic":"method"}],"_getInstance":[{"__symbolic":"method"}],"_appendComponentToBody":[{"__symbolic":"method"}],"_attachWalkthroughContent":[{"__symbolic":"method"}],"_elementLocations":[{"__symbolic":"method"}],"_getFocusElement":[{"__symbolic":"method"}],"_setFocus":[{"__symbolic":"method"}],"_setFocusContinue":[{"__symbolic":"method"}],"_updateElementPositions":[{"__symbolic":"method"}],"_attachContentTemplate":[{"__symbolic":"method"}],"_initStylingTemplate":[{"__symbolic":"method"}],"_initContentTemplate":[{"__symbolic":"method"}]},"statics":{"_walkthroughContainer":null,"_walkthroughContainerCreating":false,"walkthroughHasShow":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"WalkthroughComponent"},"member":"_walkthroughContainer"},"member":"instance"},"member":"show"}},"walkthroughHasPause":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"WalkthroughComponent"},"member":"_walkthroughContainer"},"member":"instance"},"member":"pause"}}}},"WalkthroughFlowComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"ng-walkthrough-flow","template":""}]}],"members":{"walkthroughComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":22,"character":5},"arguments":[{"__symbolic":"reference","name":"WalkthroughComponent"}]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":5}}]}],"finished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":5}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"marginZone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"finishButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}]}},"throwWalkthroughContentAlreadyAttachedError":{"__symbolic":"function"},"WalkthroughContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"BasePortalHost","line":28,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"walkthrough-container","styles":[":host { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 99.9%; min-height: 100%; } :host.hide { display: none; } :host.cursor { cursor: pointer; } :host.backdrop { background-color: rgba(0, 0, 0, 0.6); } button { background: none; border: 0; color: #FFF; } .wkt-zone { position: absolute; } .wkt-zone.hide { display: none; } .wkt-zone.backdrop { box-shadow: 0 0 0 2200px rgba(0, 0, 0, 0.6); } .wkt-zone.glow { box-shadow: 0 0 4px 2px #FFFF66, 0 0 9px 0 #FFFF66, 0 0 36px #FFFF66; } .wkt-zone.clickable { cursor: pointer; } .wkt-zone.highlight { -webkit-animation: highlight .45s 4; animation: highlight .45s 4; } .wkt-container { position: relative; } .wkt-content-block { position: absolute; margin: 1em; padding: 6px; z-index: 1; color: #FFF; min-width: calc(320px - 2em); } .wkt-content-block.hide { display: none; } .wkt-content-block.darken { background-color: rgba(0, 0, 0, 0.6); } .wkt-close + .wkt-content { margin-top: 1.3em; } .wkt-close { position: absolute; right: 1em; cursor: pointer; } .wkt-navigate { display: flex; flex-wrap: wrap; justify-content: center; } .wkt-navigate > button { padding: 6px; font-size: 120%; } .wkt-navigate > button:hover { cursor: pointer; text-decoration: underline; } .wkt-previous-link::before { content: '<< '; } .wkt-next-link::after { content: ' >>'; } svg { overflow: visible; position: absolute; top: -1px; left: -1px; border: 1px solid transparent; } svg.hide { display: none; } #wkt-arrow > path { stroke-width: 0; } .wkt-arrow-path { stroke-width: 2px; fill: none; marker-end: url(#wkt-arrow); } @-webkit-keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @media screen and (min-width: 1920px), screen and (min-height: 1920px) { .wkt-zone.backdrop { box-shadow: 0 0 0 4400px rgba(0, 0, 0, 0.6); } } @media screen and (min-width: 3840px), screen and (min-height: 3840px) { .wkt-zone.backdrop { box-shadow: 0 0 0 8800px rgba(0, 0, 0, 0.6); } } _:default:not(:root:root), .wkt-zone.backdrop { box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6) !important; } "],"template":"<div class=\"wkt-container\"> <div class=\"wkt-zone\" #zone (click)=\"clickZone($event)\" [class.hide]=\"!hasHighlightZone\" [class.backdrop]=\"hasBackdrop\" [class.glow]=\"hasGlow\" [class.clickable]=\"hasClickable\" [class.highlight]=\"hasHighlight\" [style.padding]=\"marginZone\"></div> <div class=\"wkt-content-block\" [class.hide]=\"hideOther\" [class.darken]=\"contentStyle === 'draken'\" #contentBlock> <button type=\"button\" class=\"wkt-close\" *ngIf=\"hasCloseButton\" (click)=\"close()\">✖</button> <div class=\"wkt-content\"> <p *ngIf=\"contentText\">{{contentText}}</p> <ng-template cdkPortalHost></ng-template> </div> <div class=\"wkt-navigate\" *ngIf=\"hasPrevious||hasNext||hasFinish\"> <button type=\"button\" class=\"wkt-previous-link\" *ngIf=\"hasPrevious\" (click)=\"previous()\">{{text.previous}}</button> <button type=\"button\" class=\"wkt-next-link\" *ngIf=\"hasNext\" (click)=\"next()\">{{text.next}}</button> <button type=\"button\" class=\"wkt-finish-link\" *ngIf=\"hasFinish\" (click)=\"close(true)\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\" [class.hide]=\"hideOther\"> <defs> <marker id=\"wkt-arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerUnits=\"strokeWidth\" orient=\"auto\" markerWidth=\"10\" markerHeight=\"10\"> <polyline points=\"0,0 10,5 0,10 5,5\" [attr.fill]=\"arrowColor || '#FFF'\" /> </marker> </defs> <path class=\"wkt-arrow-path\" [attr.d]=\"arrowPath\" [attr.stroke]=\"arrowColor || '#FFF'\" /> </svg> </div>"}]}],"members":{"_portalHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":75,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalHostDirective","line":75,"character":15}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":5},"arguments":["content"]}]}],"contentBlock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":77,"character":5},"arguments":["contentBlock"]}]}],"zone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":78,"character":5},"arguments":["zone"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":82,"character":5},"arguments":["attr.id"]}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":87,"character":5},"arguments":["class.hide"]}]}],"cursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":92,"character":5},"arguments":["class.cursor"]}]}],"backdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":97,"character":5},"arguments":["class.backdrop"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":106,"character":33},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":108,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":109,"character":21}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":114,"character":5},"arguments":["click"]}]}],"clickZone":[{"__symbolic":"method"}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"setHeight":[{"__symbolic":"method"}],"hightlightZone":[{"__symbolic":"method"}],"hightlightZoneStyling":[{"__symbolic":"method"}],"contentBlockPosition":[{"__symbolic":"method"}],"arrowPosition":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"continue":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"WalkthroughText":{"__symbolic":"class","members":{}},"WalkthroughModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"WalkthroughFlowComponent"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"exports":[{"__symbolic":"reference","name":"WalkthroughFlowComponent"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":22,"character":8}],"entryComponents":[{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"WalkthroughModule"},"providers":[]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"retrieveCoordinates":[{"__symbolic":"method"}],"getTop":[{"__symbolic":"method"}],"getDocumentHeight":[{"__symbolic":"method"}],"scrollIntoViewIfOutOfView":[{"__symbolic":"method"}],"scrollToTopElement":[{"__symbolic":"method"}],"getScrollParent":[{"__symbolic":"method"}],"getHeightOfPage":[{"__symbolic":"method"}]}}},"origins":{"WalkthroughElementCoordinate":"./walkthrough-tools","Margin":"./walkthrough-tools","booleanValue":"./walkthrough-tools","WalkthroughEvent":"./walkthrough-tools","WalkthroughMargin":"./walkthrough-tools","WalkthroughComponent":"./walkthrough.component","WalkthroughFlowComponent":"./walkthrough-flow.component","throwWalkthroughContentAlreadyAttachedError":"./walkthrough-container.component","WalkthroughContainerComponent":"./walkthrough-container.component","WalkthroughText":"./walkthrough-text","WalkthroughModule":"./walkthrough.module","ɵa":"./walkthrough.service"},"importAs":"angular-walkthrough"}

bundles/angular-walkthrough.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],e):e(t.angularWalkthrough={},t.ng.core,t.ng.common)}(this,function(t,e,o){"use strict";var n=function(t){return"true"===t||!0===t},i=function(){return function(t,e){this.component=t,this.focusElement=e}}(),r=function(){function t(t,e,o,n){void 0===t&&(t=0),this.top=t,this.right=e,this.bottom=o,this.left=n,void 0===e&&(this.right=t),void 0===o&&(this.bottom=t),void 0===n&&void 0===e?this.left=t:void 0===n&&(this.left=e)}return t.parsePoints=function(e){var o;if(e.match(/^\d+(?:\s+\d+)*$/)){var n=e.split(/\s+/).map(function(t){return parseFloat(t)});o=new t(n[0],n[1],n[2],n[3])}return o||new t},t}(),s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])};function a(t,e){function o(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function h(){throw Error("Host already has a portal attached")}var c,l=function(){function t(){}return t.prototype.attach=function(t){return null==t&&function(){throw Error("Attempting to attach a portal to a null PortalOutlet")}(),t.hasAttached()&&h(),this._attachedHost=t,t.attach(this)},t.prototype.detach=function(){var t=this._attachedHost;null==t?function(){throw Error("Attempting to detach a portal that is not attached to a host")}():(this._attachedHost=null,t.detach())},Object.defineProperty(t.prototype,"isAttached",{get:function(){return null!=this._attachedHost},enumerable:!0,configurable:!0}),t.prototype.setAttachedHost=function(t){this._attachedHost=t},t}(),p=function(t){function e(e,o,n){var i=t.call(this)||this;return i.component=e,i.viewContainerRef=o,i.injector=n,i}return a(e,t),e}(l),u=function(t){function e(e,o,n){var i=t.call(this)||this;return i.templateRef=e,i.viewContainerRef=o,i.context=n,i}return a(e,t),Object.defineProperty(e.prototype,"origin",{get:function(){return this.templateRef.elementRef},enumerable:!0,configurable:!0}),e.prototype.attach=function(e,o){return void 0===o&&(o=this.context),this.context=o,t.prototype.attach.call(this,e)},e.prototype.detach=function(){return this.context=void 0,t.prototype.detach.call(this)},e}(l),f=function(){function t(){this._isDisposed=!1}return t.prototype.hasAttached=function(){return!!this._attachedPortal},t.prototype.attach=function(t){return t||function(){throw Error("Must provide a portal to attach")}(),this.hasAttached()&&h(),this._isDisposed&&function(){throw Error("This PortalOutlet has already been disposed")}(),t instanceof p?(this._attachedPortal=t,this.attachComponentPortal(t)):t instanceof u?(this._attachedPortal=t,this.attachTemplatePortal(t)):void function(){throw Error("Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal.")}()},t.prototype.detach=function(){this._attachedPortal&&(this._attachedPortal.setAttachedHost(null),this._attachedPortal=null),this._invokeDisposeFn()},t.prototype.dispose=function(){this.hasAttached()&&this.detach(),this._invokeDisposeFn(),this._isDisposed=!0},t.prototype.setDisposeFn=function(t){this._disposeFn=t},t.prototype._invokeDisposeFn=function(){this._disposeFn&&(this._disposeFn(),this._disposeFn=null)},t}(),d=(function(t){function e(e,o,n,i){var r=t.call(this)||this;return r.outletElement=e,r._componentFactoryResolver=o,r._appRef=n,r._defaultInjector=i,r}a(e,t),e.prototype.attachComponentPortal=function(t){var e,o=this,n=this._componentFactoryResolver.resolveComponentFactory(t.component);return t.viewContainerRef?(e=t.viewContainerRef.createComponent(n,t.viewContainerRef.length,t.injector||t.viewContainerRef.parentInjector),this.setDisposeFn(function(){return e.destroy()})):(e=n.create(t.injector||this._defaultInjector),this._appRef.attachView(e.hostView),this.setDisposeFn(function(){o._appRef.detachView(e.hostView),e.destroy()})),this.outletElement.appendChild(this._getComponentRootNode(e)),e},e.prototype.attachTemplatePortal=function(t){var e=this,o=t.viewContainerRef,n=o.createEmbeddedView(t.templateRef,t.context);return n.detectChanges(),n.rootNodes.forEach(function(t){return e.outletElement.appendChild(t)}),this.setDisposeFn(function(){var t=o.indexOf(n);-1!==t&&o.remove(t)}),n},e.prototype.dispose=function(){t.prototype.dispose.call(this),null!=this.outletElement.parentNode&&this.outletElement.parentNode.removeChild(this.outletElement)},e.prototype._getComponentRootNode=function(t){return t.hostView.rootNodes[0]}}(f),function(t){function o(e,o){return t.call(this,e,o)||this}return a(o,t),o.decorators=[{type:e.Directive,args:[{selector:"[cdk-portal], [cdkPortal], [portal]",exportAs:"cdkPortal"}]}],o.ctorParameters=function(){return[{type:e.TemplateRef},{type:e.ViewContainerRef}]},o}(u)),g=function(t){function o(o,n){var i=t.call(this)||this;return i._componentFactoryResolver=o,i._viewContainerRef=n,i._isInitialized=!1,i.attached=new e.EventEmitter,i}return a(o,t),Object.defineProperty(o.prototype,"_deprecatedPortal",{get:function(){return this.portal},set:function(t){this.portal=t},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"_deprecatedPortalHost",{get:function(){return this.portal},set:function(t){this.portal=t},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"portal",{get:function(){return this._attachedPortal},set:function(e){(!this.hasAttached()||e||this._isInitialized)&&(this.hasAttached()&&t.prototype.detach.call(this),e&&t.prototype.attach.call(this,e),this._attachedPortal=e)},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"attachedRef",{get:function(){return this._attachedRef},enumerable:!0,configurable:!0}),o.prototype.ngOnInit=function(){this._isInitialized=!0},o.prototype.ngOnDestroy=function(){t.prototype.dispose.call(this),this._attachedPortal=null,this._attachedRef=null},o.prototype.attachComponentPortal=function(e){e.setAttachedHost(this);var o=null!=e.viewContainerRef?e.viewContainerRef:this._viewContainerRef,n=this._componentFactoryResolver.resolveComponentFactory(e.component),i=o.createComponent(n,o.length,e.injector||o.parentInjector);return t.prototype.setDisposeFn.call(this,function(){return i.destroy()}),this._attachedPortal=e,this._attachedRef=i,this.attached.emit(i),i},o.prototype.attachTemplatePortal=function(e){var o=this;e.setAttachedHost(this);var n=this._viewContainerRef.createEmbeddedView(e.templateRef,e.context);return t.prototype.setDisposeFn.call(this,function(){return o._viewContainerRef.clear()}),this._attachedPortal=e,this._attachedRef=n,this.attached.emit(n),n},o.decorators=[{type:e.Directive,args:[{selector:"[cdkPortalOutlet], [cdkPortalHost], [portalHost]",exportAs:"cdkPortalOutlet, cdkPortalHost",inputs:["portal: cdkPortalOutlet"]}]}],o.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},o.propDecorators={_deprecatedPortal:[{type:e.Input,args:["portalHost"]}],_deprecatedPortalHost:[{type:e.Input,args:["cdkPortalHost"]}],attached:[{type:e.Output,args:["attached"]}]},o}(f),y=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{exports:[d,g],declarations:[d,g]}]}],t.ctorParameters=function(){return[]},t}(),w=function(){function t(t,e){this._parentInjector=t,this._customTokens=e}return t.prototype.get=function(t,e){var o=this._customTokens.get(t);return void 0!==o?o:this._parentInjector.get(t,e)},t}(),m=function(){function t(){var t=this;this._preventDefault=function(t){(t=t||window.event).preventDefault&&t.preventDefault(),t.returnValue=!1}.bind(this),this._overflowRegex=/(auto|scroll)/,this._preventDefaultForScrollKeys=function(e){if(e.keyCode>=32&&e.keyCode<=40)return t._preventDefault(e),!1}.bind(this)}return t.prototype.retrieveCoordinates=function(t,e){var o=t.getBoundingClientRect(),n={top:o.top-(e?e.top:0),height:o.height,width:o.width,left:o.left-(e?e.left:0)};return n.top+=this.getTop(),n},t.prototype.getTop=function(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop},t.prototype.getDocumentHeight=function(){var t=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight);return Math.max(this.getHeightOfPage()+this.getTop(),t)},t.prototype.scrollIntoViewIfOutOfView=function(t){for(var e=this.getTop(),o=this.getHeightOfPage(),n=0,i=t;i&&i!==document.body;)n+=i.offsetTop,i=i.offsetParent;if(e+o<n+t.offsetHeight)t.scrollIntoView(!1);else if(n<e)t.scrollIntoView(!0);else for(var r=t;r&&r!==document.body;){if(i=this.getScrollParent(r),r.offsetTop+r.offsetHeight-i.scrollTop>i.offsetHeight||r.offsetLeft+r.offsetWidth-i.scrollLeft>i.offsetWidth){t.scrollIntoView();break}r=i}},t.prototype.scrollToTopElement=function(t,e,o){if(t&&e){var n=this.retrieveCoordinates(t,o),i=this.retrieveCoordinates(e,o),r=Math.min(n.left,i.left),s=Math.min(n.top,i.top);window.scrollTo(r-20,s-20)}},t.prototype.getScrollParent=function(t){var e,o=getComputedStyle(t),n="absolute"===o.position;if("fixed"!==o.position)for(var i=t.parentElement;i&&i!==document.body;){if(o=getComputedStyle(i),(!n||"static"!==o.position)&&this._overflowRegex.test(o.overflow+o.overflowY+o.overflowX)){e=i;break}i=i.parentElement}return e||document.body},t.prototype.getHeightOfPage=function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}(),_=function(){return function(){this.previous="Previous",this.next="Next",this.close="Close"}}(),v=(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},function(t,e){function o(){this.constructor=t}c(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)});function k(){throw Error("Attempting to attach walkthrough content after content is already attached")}var b=function(t){function o(e,o,n,i){var s=t.call(this)||this;return s.viewContainerRef=e,s._walkthroughService=o,s._renderer=n,s._el=i,s.show=!1,s.pause=!1,s.hasHighlightZone=!1,s.hasHighlight=!1,s.hasBackdrop=!1,s.hasGlow=!1,s.hasPrevious=!1,s.hasNext=!1,s.hasFinish=!1,s.hasCloseButton=!1,s.hasCloseAnywhere=!0,s.hasArrow=!1,s.arrowMarkerDist=7,s.arrowMargin=30,s.marginZonePx=new r,s.text=new _,s}return v(o,t),Object.defineProperty(o.prototype,"id",{get:function(){return this.parent?this.parent.id+"-container":null},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"hide",{get:function(){return!this.show},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"cursor",{get:function(){return this.hasCloseAnywhere},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"backdrop",{get:function(){return!this.hasHighlightZone&&this.hasBackdrop},enumerable:!0,configurable:!0}),o.prototype.click=function(){this.hasCloseAnywhere&&this.show&&this.close()},o.prototype.clickZone=function(t){this.parent&&this.hasClickable&&this.parent.focusClick(t,this)},o.prototype.attachComponentPortal=function(t){return this._portalHost.hasAttached()&&k(),this._portalHost.attachComponentPortal(t)},o.prototype.attachTemplatePortal=function(t){return this._portalHost.hasAttached()&&k(),this._portalHost.attachTemplatePortal(t)},o.prototype.setHeight=function(){this._renderer.setStyle(this._el.nativeElement,"height",this._walkthroughService.getDocumentHeight()+"px")},o.prototype.hightlightZone=function(t,e,o,n,i){var r=this,s=this.zone.nativeElement,a=s.style,h=window.getComputedStyle(s,null);if("linear"===o&&n>0&&"auto"!==h.left){this.hideOther=!0;var c=n/20,l=parseInt(h.left,10),p=e+parseInt(h.top,10),u=parseInt(h.width,10),f=parseInt(h.height,10),d=(t.left-l)/20,g=(t.top-p)/20,y=(t.width-u)/20,w=(t.height-f)/20,m=0;this.show=!0,a.borderRadius="50%";var _=setInterval(function(){a.left=l+d*m+"px",a.top=p+g*m+"px",a.width=u+y*m+"px",a.height=f+w*m+"px",m++>=20&&(clearInterval(_),r.hideOther=!1,i())},c)}else a.left=t.left+"px",a.top=t.top+"px",a.width=t.width+"px",a.height=t.height+"px",i()},o.prototype.hightlightZoneStyling=function(t){var e=this.zone.nativeElement.style;if(this.radius)if(Number(this.radius)===parseFloat(this.radius))e.borderRadius=this.radius+"%";else if("auto"===this.radius){var o=window.getComputedStyle(t,null);e.borderTopLeftRadius=o.borderTopLeftRadius,e.borderTopRightRadius=o.borderTopRightRadius,e.borderBottomLeftRadius=o.borderBottomLeftRadius,e.borderBottomRightRadius=o.borderBottomRightRadius}else e.borderRadius=this.radius;else e.borderRadius=""},o.prototype.contentBlockPosition=function(t,e){var o=this.contentBlock.nativeElement,n=window.getComputedStyle(o,null),i=this._walkthroughService.retrieveCoordinates(o).height+parseInt(n.marginTop,10)+parseInt(n.marginBottom,10);if(o.style.right="",o.style.left="","left"===e?o.style.left="0":"center"===e?o.style.left=window.innerWidth/2-this._walkthroughService.retrieveCoordinates(o).width/2+"px":"right"===e&&(o.style.right="0"),this.hasHighlightZone){var r=this._walkthroughService.retrieveCoordinates(o),s=r.left+r.width/2;this._arrowPosition=s>t.left-this.arrowMargin&&s<t.left+t.width+this.arrowMargin?"topBottom":"leftRight";var a="topBottom"===this._arrowPosition?this.arrowMargin:0;t.top<i?(o.style.top=t.top+t.height+a+"px",this._contentPosition="bottom"):(o.style.top=t.top-i-a+"px",this._contentPosition="top")}else o.style.top=this._walkthroughService.getHeightOfPage()/2-i/2+"px"},o.prototype.arrowPosition=function(t){var e,o,n=this.contentBlock.nativeElement,i=this._walkthroughService.retrieveCoordinates(n),r=i.left+i.width/2,s=i.top+i.height,a=t.left,h=t.top+this.marginZonePx.top;"bottom"===this._contentPosition&&(s-=i.height),"topBottom"===this._arrowPosition?(a+=t.width/2,"bottom"===this._contentPosition?h+=t.height+6:h-=6,o=(r+a)/2,e=(s+h)/2,this.arrowPath="M"+r+","+s+" Q"+r+","+e+" "+o+","+e+" Q"+a+","+e+" "+a+","+h):(r>t.left?a+=t.width+this.arrowMarkerDist:a-=this.arrowMarkerDist,h+=t.height/2,this.arrowPath="M"+r+","+s+" Q"+r+","+h+" "+a+","+h)},o.prototype.stop=function(){this.parent&&!this.pause&&(this.show=!1,this.pause=!0)},o.prototype.continue=function(){this.parent&&this.pause&&(this.show=!0,this.pause=!1)},o.prototype.open=function(){this.show=!0},o.prototype.previous=function(){this.close(!1,!1),this.parent.loadPrevioustStep()},o.prototype.next=function(){this.close(!1,!1),this.parent.loadNextStep()},o.prototype.close=function(t,e){void 0===t&&(t=!1),void 0===e&&(e=!0),this._portalHost.dispose(),this.show=!1,this.parent&&this.parent.hide(t,e)},o.decorators=[{type:e.Component,args:[{selector:"walkthrough-container",styles:[":host { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 99.9%; min-height: 100%; } :host.hide { display: none; } :host.cursor { cursor: pointer; } :host.backdrop { background-color: rgba(0, 0, 0, 0.6); } button { background: none; border: 0; color: #FFF; } .wkt-zone { position: absolute; } .wkt-zone.hide { display: none; } .wkt-zone.backdrop { box-shadow: 0 0 0 2200px rgba(0, 0, 0, 0.6); } .wkt-zone.glow { box-shadow: 0 0 4px 2px #FFFF66, 0 0 9px 0 #FFFF66, 0 0 36px #FFFF66; } .wkt-zone.clickable { cursor: pointer; } .wkt-zone.highlight { -webkit-animation: highlight .45s 4; animation: highlight .45s 4; } .wkt-container { position: relative; } .wkt-content-block { position: absolute; margin: 1em; padding: 6px; z-index: 1; color: #FFF; min-width: calc(320px - 2em); } .wkt-content-block.hide { display: none; } .wkt-content-block.darken { background-color: rgba(0, 0, 0, 0.6); } .wkt-close + .wkt-content { margin-top: 1.3em; } .wkt-close { position: absolute; right: 1em; cursor: pointer; } .wkt-navigate { display: flex; flex-wrap: wrap; justify-content: center; } .wkt-navigate > button { padding: 6px; font-size: 120%; } .wkt-navigate > button:hover { cursor: pointer; text-decoration: underline; } .wkt-previous-link::before { content: '<< '; } .wkt-next-link::after { content: ' >>'; } svg { overflow: visible; position: absolute; top: -1px; left: -1px; border: 1px solid transparent; } svg.hide { display: none; } #wkt-arrow > path { stroke-width: 0; } .wkt-arrow-path { stroke-width: 2px; fill: none; marker-end: url(#wkt-arrow); } @-webkit-keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @media screen and (min-width: 1920px), screen and (min-height: 1920px) { .wkt-zone.backdrop { box-shadow: 0 0 0 4400px rgba(0, 0, 0, 0.6); } } @media screen and (min-width: 3840px), screen and (min-height: 3840px) { .wkt-zone.backdrop { box-shadow: 0 0 0 8800px rgba(0, 0, 0, 0.6); } } _:default:not(:root:root), .wkt-zone.backdrop { box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6) !important; } "],template:'<div class="wkt-container"> <div class="wkt-zone" #zone (click)="clickZone($event)" [class.hide]="!hasHighlightZone" [class.backdrop]="hasBackdrop" [class.glow]="hasGlow" [class.clickable]="hasClickable" [class.highlight]="hasHighlight" [style.padding]="marginZone"></div> <div class="wkt-content-block" [class.hide]="hideOther" [class.darken]="contentStyle === \'draken\'" #contentBlock> <button type="button" class="wkt-close" *ngIf="hasCloseButton" (click)="close()">✖</button> <div class="wkt-content"> <p *ngIf="contentText">{{contentText}}</p> <ng-template cdkPortalHost></ng-template> </div> <div class="wkt-navigate" *ngIf="hasPrevious||hasNext||hasFinish"> <button type="button" class="wkt-previous-link" *ngIf="hasPrevious" (click)="previous()">{{text.previous}}</button> <button type="button" class="wkt-next-link" *ngIf="hasNext" (click)="next()">{{text.next}}</button> <button type="button" class="wkt-finish-link" *ngIf="hasFinish" (click)="close(true)">{{text.close}}</button> </div> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" *ngIf="hasArrow" [class.hide]="hideOther"> <defs> <marker id="wkt-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="10" markerHeight="10"> <polyline points="0,0 10,5 0,10 5,5" [attr.fill]="arrowColor || \'#FFF\'" /> </marker> </defs> <path class="wkt-arrow-path" [attr.d]="arrowPath" [attr.stroke]="arrowColor || \'#FFF\'" /> </svg> </div>'}]}],o.ctorParameters=function(){return[{type:e.ViewContainerRef},{type:m},{type:e.Renderer2},{type:e.ElementRef}]},o.propDecorators={_portalHost:[{type:e.ViewChild,args:[g]}],content:[{type:e.ViewChild,args:["content"]}],contentBlock:[{type:e.ViewChild,args:["contentBlock"]}],zone:[{type:e.ViewChild,args:["zone"]}],id:[{type:e.HostBinding,args:["attr.id"]}],hide:[{type:e.HostBinding,args:["class.hide"]}],cursor:[{type:e.HostBinding,args:["class.cursor"]}],backdrop:[{type:e.HostBinding,args:["class.backdrop"]}],click:[{type:e.HostListener,args:["click"]}]},o}(f),C=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},P=0,x=function(){function t(t,o,n,i,s){this._componentFactoryResolver=t,this._applicationRef=o,this._injector=n,this._renderer=i,this._walkthroughService=s,this.closed=new e.EventEmitter,this.finished=new e.EventEmitter,this.ready=new e.EventEmitter,this.focusElementCSSClass=void 0,this.typeSelector="element",this.contentStyle="draken",this.animation="none",this.animationDelays=0,this._uid="walkthrough-"+P++,this._readyHasBeenEmited=!1,this._show=!1,this._hasHighlightAnimation=!1,this._hasBackdrop=!1,this._hasGlow=!1,this._hasFinish=!1,this._hasArrow=!1,this._hasCloseButton=!1,this._hasCloseAnywhere=!0,this._marginZonePx=new r,this._justifyContent="left"}return Object.defineProperty(t.prototype,"marginZone",{get:function(){return this._marginZone},set:function(t){this._marginZone!==t&&(null===t&&(this._marginZone=null),this._marginZonePx=r.parsePoints(t),null!==this._marginZonePx&&(this._marginZone=t))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"arrowColor",{get:function(){return this._arrowColor},set:function(t){this._arrowColor!==t&&(this._arrowColor=t,this._getInstance()&&(this._getInstance().arrowColor=this._arrowColor))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"id",{get:function(){return this._id},set:function(t){this._id=t||this._uid},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"justifyContent",{get:function(){return this._justifyContent},set:function(e){this._justifyContent!==e?(this._justifyContent=e,t._walkthroughContainer&&this._getInstance()&&this._updateElementPositions(this._getInstance())):this._justifyContent=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeButton",{get:function(){return this._hasCloseButton},set:function(t){this._hasCloseButton=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeAnywhere",{get:function(){return this._hasCloseAnywhere},set:function(t){this._hasCloseAnywhere=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"showArrow",{get:function(){return this._hasArrow},set:function(t){this._hasArrow=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"finishStep",{get:function(){return this._hasFinish},set:function(t){this._hasFinish=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusHighlightAnimation",{get:function(){return this._hasHighlightAnimation},set:function(t){this._hasHighlightAnimation=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusBackdrop",{get:function(){return this._hasBackdrop},set:function(t){this._hasBackdrop=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusGlow",{get:function(){return this._hasGlow},set:function(t){this._hasGlow=n(t)},enumerable:!0,configurable:!0}),t.walkthroughStop=function(){t._walkthroughContainer.instance.stop()},t.walkthroughHasShow=function(){return t._walkthroughContainer.instance.show},t.walkthroughHasPause=function(){return t._walkthroughContainer.instance.pause},t.walkthroughContinue=function(){t._walkthroughContainer.instance.continue()},t.prototype.resize=function(){t._walkthroughContainer&&this._show&&this._elementLocations()},t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){var e=this;t._walkthroughContainer||t._walkthroughContainerCreating||(t._walkthroughContainerCreating=!0,setTimeout(function(){t._walkthroughContainer=e._appendComponentToBody(b)},0))},t.prototype.next=function(t,e){void 0===t&&(t=void 0),void 0===e&&(e=void 0),t&&(this.closed=t),e&&(this.finished=e),this.open()},t.prototype.open=function(){this._getInstance().pause?console.warn("Another walkthrough is in pause. Please close it before."):this._elementLocations()},t.prototype.loadPrevioustStep=function(){var t=this;setTimeout(function(){t.previousStep.next(t.closed,t.finished)},0)},t.prototype.loadNextStep=function(){var t=this;setTimeout(function(){t.nextStep.next(t.closed,t.finished)},0)},t.prototype.show=function(){this._show=!0},t.prototype.hide=function(t,e){var o=this;void 0===t&&(t=!1),void 0===e&&(e=!0),this._show=!1,this.focusElementCSSClass&&this._renderer.removeClass(this._focusElement,this.focusElementCSSClass),e&&setTimeout(function(){o.closed.emit(t),o.nextStep||o.finished.emit(new i(o,o._focusElement))},20)},t.prototype._getInstance=function(){return t._walkthroughContainer?t._walkthroughContainer.instance:null},t.prototype._appendComponentToBody=function(t){var e=this._componentFactoryResolver.resolveComponentFactory(t).create(this._injector);this._applicationRef.attachView(e.hostView);var o=e.hostView.rootNodes[0];return document.body.appendChild(o),e},t.prototype._attachWalkthroughContent=function(t,o){if(t instanceof e.TemplateRef)o.attachTemplatePortal(new u(t,null));else{var n=new WeakMap;n.set(b,o);var i=new w(this._injector,n);o.attachComponentPortal(new p(t,void 0,i))}},t.prototype._elementLocations=function(){this._getFocusElement();var t=this._focusElement;if(t){if(this._walkthroughService.scrollIntoViewIfOutOfView(t),this._offsetCoordinates=this._walkthroughService.retrieveCoordinates(t,this._marginZonePx),"zone"===this.typeSelector){var e=this._walkthroughService.retrieveCoordinates(this._focusElementEnd,this._marginZonePx);this._offsetCoordinates.height=e.top-this._offsetCoordinates.top+e.height,this._offsetCoordinates.width=e.left-this._offsetCoordinates.left+e.width}}else this._offsetCoordinates=null;this._setFocus()},t.prototype._getFocusElement=function(){var t=this.focusElementSelector?document.querySelectorAll(this.focusElementSelector):null;if(t&&t.length>0)if(t.length>1){for(var e=t.length,o=0;o<e;o++)if(t[o].offsetHeight){this._focusElement=t[o],o=t.length;break}if("zone"===this.typeSelector){for(o=e-1;o>=0;o--)if(t[o].offsetHeight){this._focusElementEnd=t[o],o=t.length;break}this._focusElement===this._focusElementEnd&&(this.typeSelector="element")}}else this._focusElement=t[0],this.typeSelector="element";else this._focusElement=null},t.prototype._setFocus=function(){var t=this,e=this._getInstance();if(e){var o=window.pageXOffset;this._initStylingTemplate(e),setTimeout(function(){t._focusElement&&e.zone?e.hightlightZone(t._offsetCoordinates,o-window.pageXOffset,t.animation,t.animationDelays,t._setFocusContinue.bind(t)):t._setFocusContinue()},20)}},t.prototype._setFocusContinue=function(){var t=this,e=this._getInstance();this._show||(this._attachContentTemplate(),this._initContentTemplate(e)),setTimeout(function(){e.hightlightZoneStyling(t._focusElement),t._updateElementPositions(e)},0)},t.prototype._updateElementPositions=function(t){var e=this;setTimeout(function(){t.contentBlockPosition(e._offsetCoordinates,e._justifyContent),null!==e._focusElement&&e._hasArrow&&t.arrowPosition(e._offsetCoordinates),e.focusElementCSSClass&&e._renderer.addClass(e._focusElement,e.focusElementCSSClass),setTimeout(function(){e._getInstance().setHeight(),e._readyHasBeenEmited||(e._readyHasBeenEmited=!0,e.ready.emit(new i(e,e._focusElement))),e._walkthroughService.scrollToTopElement(e._focusElement,document.querySelector("walkthrough-container .wkt-content-block"),e._marginZonePx)},50)},0)},t.prototype._attachContentTemplate=function(){this.contentTemplate&&this._attachWalkthroughContent(this.contentTemplate,this._getInstance())},t.prototype._initStylingTemplate=function(t){var e=null!==this._focusElement;t.parent=this,t.open(),t.hasHighlightZone=e,t.hasClickable=e&&"function"==typeof this.focusClick,t.hasHighlight=e&&this._hasHighlightAnimation,t.hasBackdrop=this._hasBackdrop,t.hasGlow=e&&this._hasGlow},t.prototype._initContentTemplate=function(t){var e=null!==this._focusElement;t.hasPrevious=!!this.previousStep,t.hasNext=!!this.nextStep,t.hasCloseButton=this._hasCloseButton,t.hasCloseAnywhere=this._hasCloseAnywhere,t.hasFinish=this._hasFinish,t.hasArrow=e&&this._hasArrow,t.arrowColor=this.arrowColor,t.radius=this.radius,t.marginZone=this._marginZone?this._marginZone.replace(/(\d+)/g,"$1px"):null,t.marginZonePx=this._marginZonePx,t.contentText=this.contentText,t.contentStyle=this.contentStyle,t.text=this.texts?C({},new _,this.texts):new _,this.show()},t._walkthroughContainer=null,t._walkthroughContainerCreating=!1,t.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough",template:""}]}],t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector},{type:e.Renderer2},{type:m}]},t.propDecorators={closed:[{type:e.Output}],finished:[{type:e.Output}],ready:[{type:e.Output}],focusElementCSSClass:[{type:e.Input}],focusElementSelector:[{type:e.Input}],typeSelector:[{type:e.Input}],focusClick:[{type:e.Input}],radius:[{type:e.Input}],previousStep:[{type:e.Input}],nextStep:[{type:e.Input}],texts:[{type:e.Input}],contentTemplate:[{type:e.Input}],contentText:[{type:e.Input}],contentStyle:[{type:e.Input}],marginZone:[{type:e.Input}],arrowColor:[{type:e.Input}],animation:[{type:e.Input}],animationDelays:[{type:e.Input}],id:[{type:e.Input}],justifyContent:[{type:e.Input}],closeButton:[{type:e.Input}],closeAnywhere:[{type:e.Input}],showArrow:[{type:e.Input}],finishStep:[{type:e.Input}],focusHighlightAnimation:[{type:e.Input}],focusBackdrop:[{type:e.Input}],focusGlow:[{type:e.Input}],resize:[{type:e.HostListener,args:["window:resize"]}]},t}(),E=0,I=function(){function t(){this.closed=new e.EventEmitter,this.finished=new e.EventEmitter,this.contentStyle="draken",this.marginZone=null,this._uid="walkthrough-flow-"+E++}return Object.defineProperty(t.prototype,"id",{get:function(){return this._id},set:function(t){this._id=t||this._uid},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){var t=this;setTimeout(function(){t.init()},0)},t.prototype.init=function(){var t=this,e=null;this.walkthroughComponents.forEach(function(o){e&&(o.previousStep=e,e.nextStep=o),e=o,t.closed&&(o.closed=t.closed),t.finished&&(o.finished=t.finished),!o.contentStyle&&t.contentStyle&&(o.contentStyle=t.contentStyle),!o.arrowColor&&t.arrowColor&&(o.arrowColor=t.arrowColor),!o.marginZone&&t.marginZone&&(o.marginZone=t.marginZone),!o.showArrow&&n(t.showArrow)&&(o.showArrow=t.showArrow),!o.closeButton&&n(t.closeButton)&&(o.closeButton=t.closeButton),o.closeAnywhere&&!n(t.closeAnywhere)&&(o.closeAnywhere=t.closeAnywhere),!o.focusBackdrop&&n(t.focusBackdrop)&&(o.focusBackdrop=t.focusBackdrop),!o.focusGlow&&n(t.focusGlow)&&(o.focusGlow=t.focusGlow),!o.radius&&t.radius&&(o.radius=t.radius),!o.texts&&t.texts&&(o.texts=t.texts)}),e.finishStep=!0},t.prototype.start=function(){this.walkthroughComponents.first.open()},t.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough-flow",template:""}]}],t.ctorParameters=function(){return[]},t.propDecorators={walkthroughComponents:[{type:e.ContentChildren,args:[x]}],id:[{type:e.Input}],closed:[{type:e.Output}],finished:[{type:e.Output}],contentStyle:[{type:e.Input}],arrowColor:[{type:e.Input}],marginZone:[{type:e.Input}],showArrow:[{type:e.Input}],closeButton:[{type:e.Input}],closeAnywhere:[{type:e.Input}],focusBackdrop:[{type:e.Input}],focusGlow:[{type:e.Input}],radius:[{type:e.Input}],texts:[{type:e.Input}]},t}(),S=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t.decorators=[{type:e.NgModule,args:[{declarations:[I,x,b],exports:[I,x,b],imports:[o.CommonModule,y],entryComponents:[b],providers:[m]}]}],t.ctorParameters=function(){return[]},t}();t.booleanValue=n,t.WalkthroughEvent=i,t.WalkthroughMargin=r,t.WalkthroughComponent=x,t.WalkthroughFlowComponent=I,t.throwWalkthroughContentAlreadyAttachedError=k,t.WalkthroughContainerComponent=b,t.WalkthroughText=_,t.WalkthroughModule=S,t.ɵa=m,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],e):e(t.angularWalkthrough={},t.ng.core,t.ng.common)}(this,function(t,e,o){"use strict";var n=function(t){return"true"===t||!0===t},i=function(){return function(t,e){this.component=t,this.focusElement=e}}(),r=function(){function t(t,e,o,n){void 0===t&&(t=0),this.top=t,this.right=e,this.bottom=o,this.left=n,void 0===e&&(this.right=t),void 0===o&&(this.bottom=t),void 0===n&&void 0===e?this.left=t:void 0===n&&(this.left=e)}return t.parsePoints=function(e){var o;if(e.match(/^\d+(?:\s+\d+)*$/)){var n=e.split(/\s+/).map(function(t){return parseFloat(t)});o=new t(n[0],n[1],n[2],n[3])}return o||new t},t}(),s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])};function a(t,e){function o(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function h(){throw Error("Host already has a portal attached")}var c,l=function(){function t(){}return t.prototype.attach=function(t){return null==t&&function(){throw Error("Attempting to attach a portal to a null PortalOutlet")}(),t.hasAttached()&&h(),this._attachedHost=t,t.attach(this)},t.prototype.detach=function(){var t=this._attachedHost;null==t?function(){throw Error("Attempting to detach a portal that is not attached to a host")}():(this._attachedHost=null,t.detach())},Object.defineProperty(t.prototype,"isAttached",{get:function(){return null!=this._attachedHost},enumerable:!0,configurable:!0}),t.prototype.setAttachedHost=function(t){this._attachedHost=t},t}(),p=function(t){function e(e,o,n){var i=t.call(this)||this;return i.component=e,i.viewContainerRef=o,i.injector=n,i}return a(e,t),e}(l),u=function(t){function e(e,o,n){var i=t.call(this)||this;return i.templateRef=e,i.viewContainerRef=o,i.context=n,i}return a(e,t),Object.defineProperty(e.prototype,"origin",{get:function(){return this.templateRef.elementRef},enumerable:!0,configurable:!0}),e.prototype.attach=function(e,o){return void 0===o&&(o=this.context),this.context=o,t.prototype.attach.call(this,e)},e.prototype.detach=function(){return this.context=void 0,t.prototype.detach.call(this)},e}(l),f=function(){function t(){this._isDisposed=!1}return t.prototype.hasAttached=function(){return!!this._attachedPortal},t.prototype.attach=function(t){return t||function(){throw Error("Must provide a portal to attach")}(),this.hasAttached()&&h(),this._isDisposed&&function(){throw Error("This PortalOutlet has already been disposed")}(),t instanceof p?(this._attachedPortal=t,this.attachComponentPortal(t)):t instanceof u?(this._attachedPortal=t,this.attachTemplatePortal(t)):void function(){throw Error("Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal.")}()},t.prototype.detach=function(){this._attachedPortal&&(this._attachedPortal.setAttachedHost(null),this._attachedPortal=null),this._invokeDisposeFn()},t.prototype.dispose=function(){this.hasAttached()&&this.detach(),this._invokeDisposeFn(),this._isDisposed=!0},t.prototype.setDisposeFn=function(t){this._disposeFn=t},t.prototype._invokeDisposeFn=function(){this._disposeFn&&(this._disposeFn(),this._disposeFn=null)},t}(),d=(function(t){function e(e,o,n,i){var r=t.call(this)||this;return r.outletElement=e,r._componentFactoryResolver=o,r._appRef=n,r._defaultInjector=i,r}a(e,t),e.prototype.attachComponentPortal=function(t){var e,o=this,n=this._componentFactoryResolver.resolveComponentFactory(t.component);return t.viewContainerRef?(e=t.viewContainerRef.createComponent(n,t.viewContainerRef.length,t.injector||t.viewContainerRef.parentInjector),this.setDisposeFn(function(){return e.destroy()})):(e=n.create(t.injector||this._defaultInjector),this._appRef.attachView(e.hostView),this.setDisposeFn(function(){o._appRef.detachView(e.hostView),e.destroy()})),this.outletElement.appendChild(this._getComponentRootNode(e)),e},e.prototype.attachTemplatePortal=function(t){var e=this,o=t.viewContainerRef,n=o.createEmbeddedView(t.templateRef,t.context);return n.detectChanges(),n.rootNodes.forEach(function(t){return e.outletElement.appendChild(t)}),this.setDisposeFn(function(){var t=o.indexOf(n);-1!==t&&o.remove(t)}),n},e.prototype.dispose=function(){t.prototype.dispose.call(this),null!=this.outletElement.parentNode&&this.outletElement.parentNode.removeChild(this.outletElement)},e.prototype._getComponentRootNode=function(t){return t.hostView.rootNodes[0]}}(f),function(t){function o(e,o){return t.call(this,e,o)||this}return a(o,t),o.decorators=[{type:e.Directive,args:[{selector:"[cdk-portal], [cdkPortal], [portal]",exportAs:"cdkPortal"}]}],o.ctorParameters=function(){return[{type:e.TemplateRef},{type:e.ViewContainerRef}]},o}(u)),g=function(t){function o(o,n){var i=t.call(this)||this;return i._componentFactoryResolver=o,i._viewContainerRef=n,i._isInitialized=!1,i.attached=new e.EventEmitter,i}return a(o,t),Object.defineProperty(o.prototype,"_deprecatedPortal",{get:function(){return this.portal},set:function(t){this.portal=t},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"_deprecatedPortalHost",{get:function(){return this.portal},set:function(t){this.portal=t},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"portal",{get:function(){return this._attachedPortal},set:function(e){(!this.hasAttached()||e||this._isInitialized)&&(this.hasAttached()&&t.prototype.detach.call(this),e&&t.prototype.attach.call(this,e),this._attachedPortal=e)},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"attachedRef",{get:function(){return this._attachedRef},enumerable:!0,configurable:!0}),o.prototype.ngOnInit=function(){this._isInitialized=!0},o.prototype.ngOnDestroy=function(){t.prototype.dispose.call(this),this._attachedPortal=null,this._attachedRef=null},o.prototype.attachComponentPortal=function(e){e.setAttachedHost(this);var o=null!=e.viewContainerRef?e.viewContainerRef:this._viewContainerRef,n=this._componentFactoryResolver.resolveComponentFactory(e.component),i=o.createComponent(n,o.length,e.injector||o.parentInjector);return t.prototype.setDisposeFn.call(this,function(){return i.destroy()}),this._attachedPortal=e,this._attachedRef=i,this.attached.emit(i),i},o.prototype.attachTemplatePortal=function(e){var o=this;e.setAttachedHost(this);var n=this._viewContainerRef.createEmbeddedView(e.templateRef,e.context);return t.prototype.setDisposeFn.call(this,function(){return o._viewContainerRef.clear()}),this._attachedPortal=e,this._attachedRef=n,this.attached.emit(n),n},o.decorators=[{type:e.Directive,args:[{selector:"[cdkPortalOutlet], [cdkPortalHost], [portalHost]",exportAs:"cdkPortalOutlet, cdkPortalHost",inputs:["portal: cdkPortalOutlet"]}]}],o.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},o.propDecorators={_deprecatedPortal:[{type:e.Input,args:["portalHost"]}],_deprecatedPortalHost:[{type:e.Input,args:["cdkPortalHost"]}],attached:[{type:e.Output,args:["attached"]}]},o}(f),y=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{exports:[d,g],declarations:[d,g]}]}],t.ctorParameters=function(){return[]},t}(),w=function(){function t(t,e){this._parentInjector=t,this._customTokens=e}return t.prototype.get=function(t,e){var o=this._customTokens.get(t);return void 0!==o?o:this._parentInjector.get(t,e)},t}(),m=function(){function t(){var t=this;this._preventDefault=function(t){(t=t||window.event).preventDefault&&t.preventDefault(),t.returnValue=!1}.bind(this),this._overflowRegex=/(auto|scroll)/,this._preventDefaultForScrollKeys=function(e){if(e.keyCode>=32&&e.keyCode<=40)return t._preventDefault(e),!1}.bind(this)}return t.prototype.retrieveCoordinates=function(t,e){var o=t.getBoundingClientRect(),n=window.getComputedStyle(t),i={top:o.top-(e?e.top:0),height:o.height,width:o.width,left:o.left-(e?e.left:0),margin:{top:parseFloat(n.marginTop),right:parseFloat(n.marginRight),bottom:parseFloat(n.marginBottom),left:parseFloat(n.marginLeft)}};return i.top+=this.getTop(),i},t.prototype.getTop=function(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop},t.prototype.getDocumentHeight=function(){var t=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight);return Math.max(this.getHeightOfPage()+this.getTop(),t)},t.prototype.scrollIntoViewIfOutOfView=function(t,e){void 0===e&&(e=0);for(var o=this.getTop(),n=this.getHeightOfPage(),i=0,r=t;r&&r!==document.body;)i+=r.offsetTop,r=r.offsetParent;if(o+n<i+t.offsetHeight)t.scrollIntoView(!1);else if(i<o)t.scrollIntoView(!0),window.scrollBy(0,-30);else for(var s=t;s&&s!==document.body;){if(r=this.getScrollParent(s),s.offsetTop+s.offsetHeight-r.scrollTop>r.offsetHeight||s.offsetLeft+s.offsetWidth-r.scrollLeft>r.offsetWidth){t.scrollIntoView(),window.scrollBy(0,-30);break}s=r}},t.prototype.scrollToTopElement=function(t,e,o){if(t&&e){var n=this.retrieveCoordinates(t,o),i=this.retrieveCoordinates(e,o),r=Math.min(n.left,i.left),s=Math.min(n.top,i.top);window.scrollTo(r-20,s-20)}},t.prototype.getScrollParent=function(t){var e,o=getComputedStyle(t),n="absolute"===o.position;if("fixed"!==o.position)for(var i=t.parentElement;i&&i!==document.body;){if(o=getComputedStyle(i),(!n||"static"!==o.position)&&this._overflowRegex.test(o.overflow+o.overflowY+o.overflowX)){e=i;break}i=i.parentElement}return e||document.body},t.prototype.getHeightOfPage=function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[]},t}(),_=function(){return function(){this.previous="Previous",this.next="Next",this.close="Close"}}(),v=(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},function(t,e){function o(){this.constructor=t}c(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)});function k(){throw Error("Attempting to attach walkthrough content after content is already attached")}var b=function(t){function o(e,o,n,i){var s=t.call(this)||this;return s.viewContainerRef=e,s._walkthroughService=o,s._renderer=n,s._el=i,s.show=!1,s.pause=!1,s.hasHighlightZone=!1,s.hasHighlight=!1,s.hasBackdrop=!1,s.hasGlow=!1,s.hasPrevious=!1,s.hasNext=!1,s.hasFinish=!1,s.hasCloseButton=!1,s.hasCloseAnywhere=!0,s.hasArrow=!1,s.arrowMarkerDist=7,s.marginZonePx=new r,s.text=new _,s}return v(o,t),Object.defineProperty(o.prototype,"id",{get:function(){return this.parent?this.parent.id+"-container":null},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"hide",{get:function(){return!this.show},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"cursor",{get:function(){return this.hasCloseAnywhere},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"backdrop",{get:function(){return!this.hasHighlightZone&&this.hasBackdrop},enumerable:!0,configurable:!0}),o.prototype.click=function(){this.hasCloseAnywhere&&this.show&&this.close()},o.prototype.clickZone=function(t){this.parent&&this.hasClickable&&this.parent.focusClick(t,this)},o.prototype.attachComponentPortal=function(t){return this._portalHost.hasAttached()&&k(),this._portalHost.attachComponentPortal(t)},o.prototype.attachTemplatePortal=function(t){return this._portalHost.hasAttached()&&k(),this._portalHost.attachTemplatePortal(t)},o.prototype.setHeight=function(){this._renderer.setStyle(this._el.nativeElement,"height",this._walkthroughService.getDocumentHeight()+"px")},o.prototype.hightlightZone=function(t,e,o,n,i){var r=this,s=this.zone.nativeElement,a=s.style,h=window.getComputedStyle(s,null);if("linear"===o&&n>0&&"auto"!==h.left){this.hideOther=!0;var c=n/20,l=parseInt(h.left,10),p=e+parseInt(h.top,10),u=parseInt(h.width,10),f=parseInt(h.height,10),d=(t.left-l)/20,g=(t.top-p)/20,y=(t.width-u)/20,w=(t.height-f)/20,m=0;this.show=!0,a.borderRadius="50%";var _=setInterval(function(){a.left=l+d*m+"px",a.top=p+g*m+"px",a.width=u+y*m+"px",a.height=f+w*m+"px",m++>=20&&(clearInterval(_),r.hideOther=!1,i())},c)}else a.left=t.left+"px",a.top=t.top+"px",a.width=t.width+"px",a.height=t.height+"px",i()},o.prototype.hightlightZoneStyling=function(t){var e=this.zone.nativeElement.style;if(this.radius)if(Number(this.radius)===parseFloat(this.radius))e.borderRadius=this.radius+"%";else if("auto"===this.radius){var o=window.getComputedStyle(t,null);e.borderTopLeftRadius=o.borderTopLeftRadius,e.borderTopRightRadius=o.borderTopRightRadius,e.borderBottomLeftRadius=o.borderBottomLeftRadius,e.borderBottomRightRadius=o.borderBottomRightRadius}else e.borderRadius=this.radius;else e.borderRadius=""},o.prototype.contentBlockPosition=function(t,e,o,n,i){var r=this.contentBlock.nativeElement,s=this._walkthroughService.retrieveCoordinates(r),a=s.width+s.margin.left+s.margin.right,h=s.height+s.margin.top+s.margin.bottom,c=t.left,l=window.innerWidth-t.left-t.width,p=!1;if(c<a&&l<a&&(p=!0),"top"!==o&&"center"!==o&&"bottom"!==o||p||("left"===e&&c<a||"right"===e&&l<a)&&(o="bottom"===o||t.top<h?"below":"above"),p&&(e="center"),r.style.right="",r.style.left="","left"===e){r.style.left="0";var u=t.left-a;n&&u>n&&(r.style.left=t.left-a-n+"px")}else if("center"===e)r.style.left=window.innerWidth/2-a/2+"px";else if("right"===e){r.style.right="0";u=window.innerWidth-t.left-t.width-a;n&&u>n&&(r.style.right="",r.style.left=t.left+t.width+n+"px")}if(this.hasHighlightZone){var f=this._walkthroughService.retrieveCoordinates(r).left+a/2;if(this._arrowPosition=f>t.left-i&&f<t.left+t.width+i?"topBottom":"leftRight",o&&!p){u=0;switch(this._contentPosition=o,o){case"above":u=t.top,r.style.top=u>i?t.top-h-i+"px":"0",this._arrowPosition="topBottom";break;case"top":r.style.top=t.top+"px";break;case"center":r.style.top=t.top+t.height/2-h/2+"px";break;case"bottom":r.style.top=t.top+t.height-h+"px";break;case"below":u=this._walkthroughService.getDocumentHeight()-t.top+t.height,r.style.top=u>i?t.top+t.height+i+"px":this._walkthroughService.getDocumentHeight()-h+"px",this._arrowPosition="topBottom"}}else"below"===o||t.top<h?(r.style.top=t.top+t.height+i+"px",this._contentPosition="below"):(r.style.top=t.top-h-i+"px",this._contentPosition="above")}else r.style.top=this._walkthroughService.getHeightOfPage()/2-h/2+"px"},o.prototype.arrowPosition=function(t,e){var o,n,i=this.contentBlock.nativeElement,r=this._walkthroughService.retrieveCoordinates(i),s=r.left+r.width/2,a=r.top+r.height,h=t.left,c=t.top+this.marginZonePx.top;switch(this._contentPosition){case"top":case"center":case"bottom":s=r.left>t.left?r.left:r.left+r.width,a-=r.height/2;break;case"below":a-=r.height}if("topBottom"===this._arrowPosition)h+=t.width/2,"below"===this._contentPosition?c+=t.height+6:c-=6,n=(s+h)/2,o=(a+c)/2,this.arrowPath="M"+s+","+a+" Q"+s+","+o+" "+n+","+o+" Q"+h+","+o+" "+h+","+c;else{s>t.left?h+=t.width+this.arrowMarkerDist:h-=this.arrowMarkerDist,n=(s+h)/2,o=(a+(c+=t.height/2))/2;var l=s,p=a;"top"!==this._contentPosition&&"bottom"!==this._contentPosition||(l=r.left+r.width/2,p="top"===this._contentPosition&&r.height<t.height?r.top+r.height:r.top),Math.abs(p-c)<e?this.arrowPath="M"+s+","+a+" Q"+n+","+a+" "+n+","+o+" Q"+n+","+c+" "+h+","+c:this.arrowPath="M"+l+","+p+" Q"+l+","+c+" "+h+","+c}},o.prototype.stop=function(){this.parent&&!this.pause&&(this.show=!1,this.pause=!0)},o.prototype.continue=function(){this.parent&&this.pause&&(this.show=!0,this.pause=!1)},o.prototype.open=function(){this.show=!0},o.prototype.previous=function(){this.close(!1,!1),this.parent.loadPrevioustStep()},o.prototype.next=function(){this.close(!1,!1),this.parent.loadNextStep()},o.prototype.close=function(t,e){void 0===t&&(t=!1),void 0===e&&(e=!0),this._portalHost.dispose(),this.show=!1,this.parent&&this.parent.hide(t,e)},o.decorators=[{type:e.Component,args:[{selector:"walkthrough-container",styles:[":host { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 99.9%; min-height: 100%; } :host.hide { display: none; } :host.cursor { cursor: pointer; } :host.backdrop { background-color: rgba(0, 0, 0, 0.6); } button { background: none; border: 0; color: #FFF; } .wkt-zone { position: absolute; } .wkt-zone.hide { display: none; } .wkt-zone.backdrop { box-shadow: 0 0 0 2200px rgba(0, 0, 0, 0.6); } .wkt-zone.glow { box-shadow: 0 0 4px 2px #FFFF66, 0 0 9px 0 #FFFF66, 0 0 36px #FFFF66; } .wkt-zone.clickable { cursor: pointer; } .wkt-zone.highlight { -webkit-animation: highlight .45s 4; animation: highlight .45s 4; } .wkt-container { position: relative; } .wkt-content-block { position: absolute; margin: 1em; padding: 6px; z-index: 1; color: #FFF; min-width: calc(320px - 2em); } .wkt-content-block.hide { display: none; } .wkt-content-block.darken { background-color: rgba(0, 0, 0, 0.6); } .wkt-close + .wkt-content { margin-top: 1.3em; } .wkt-close { position: absolute; right: 1em; cursor: pointer; } .wkt-navigate { display: flex; flex-wrap: wrap; justify-content: center; } .wkt-navigate > button { padding: 6px; font-size: 120%; } .wkt-navigate > button:hover { cursor: pointer; text-decoration: underline; } .wkt-previous-link::before { content: '<< '; } .wkt-next-link::after { content: ' >>'; } svg { overflow: visible; position: absolute; top: -1px; left: -1px; border: 1px solid transparent; } svg.hide { display: none; } #wkt-arrow > path { stroke-width: 0; } .wkt-arrow-path { stroke-width: 2px; fill: none; marker-end: url(#wkt-arrow); } @-webkit-keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @keyframes highlight { 0% { background-color: none; } 50% { background-color: rgba(255, 255, 255, 0.8); } 100% { background-color: none; } } @media screen and (min-width: 1920px), screen and (min-height: 1920px) { .wkt-zone.backdrop { box-shadow: 0 0 0 4400px rgba(0, 0, 0, 0.6); } } @media screen and (min-width: 3840px), screen and (min-height: 3840px) { .wkt-zone.backdrop { box-shadow: 0 0 0 8800px rgba(0, 0, 0, 0.6); } } _:default:not(:root:root), .wkt-zone.backdrop { box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.6) !important; } "],template:'<div class="wkt-container"> <div class="wkt-zone" #zone (click)="clickZone($event)" [class.hide]="!hasHighlightZone" [class.backdrop]="hasBackdrop" [class.glow]="hasGlow" [class.clickable]="hasClickable" [class.highlight]="hasHighlight" [style.padding]="marginZone"></div> <div class="wkt-content-block" [class.hide]="hideOther" [class.darken]="contentStyle === \'draken\'" #contentBlock> <button type="button" class="wkt-close" *ngIf="hasCloseButton" (click)="close()">✖</button> <div class="wkt-content"> <p *ngIf="contentText">{{contentText}}</p> <ng-template cdkPortalHost></ng-template> </div> <div class="wkt-navigate" *ngIf="hasPrevious||hasNext||hasFinish"> <button type="button" class="wkt-previous-link" *ngIf="hasPrevious" (click)="previous()">{{text.previous}}</button> <button type="button" class="wkt-next-link" *ngIf="hasNext" (click)="next()">{{text.next}}</button> <button type="button" class="wkt-finish-link" *ngIf="hasFinish" (click)="close(true)">{{text.close}}</button> </div> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" *ngIf="hasArrow" [class.hide]="hideOther"> <defs> <marker id="wkt-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="10" markerHeight="10"> <polyline points="0,0 10,5 0,10 5,5" [attr.fill]="arrowColor || \'#FFF\'" /> </marker> </defs> <path class="wkt-arrow-path" [attr.d]="arrowPath" [attr.stroke]="arrowColor || \'#FFF\'" /> </svg> </div>'}]}],o.ctorParameters=function(){return[{type:e.ViewContainerRef},{type:m},{type:e.Renderer2},{type:e.ElementRef}]},o.propDecorators={_portalHost:[{type:e.ViewChild,args:[g]}],content:[{type:e.ViewChild,args:["content"]}],contentBlock:[{type:e.ViewChild,args:["contentBlock"]}],zone:[{type:e.ViewChild,args:["zone"]}],id:[{type:e.HostBinding,args:["attr.id"]}],hide:[{type:e.HostBinding,args:["class.hide"]}],cursor:[{type:e.HostBinding,args:["class.cursor"]}],backdrop:[{type:e.HostBinding,args:["class.backdrop"]}],click:[{type:e.HostListener,args:["click"]}]},o}(f),C=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},P=0,x=function(){function t(t,o,n,i,s){this._componentFactoryResolver=t,this._applicationRef=o,this._injector=n,this._renderer=i,this._walkthroughService=s,this.closed=new e.EventEmitter,this.finished=new e.EventEmitter,this.ready=new e.EventEmitter,this.focusElementCSSClass=void 0,this.typeSelector="element",this.contentStyle="draken",this.animation="none",this.animationDelays=0,this._uid="walkthrough-"+P++,this._readyHasBeenEmited=!1,this._display=!1,this._hasHighlightAnimation=!1,this._hasBackdrop=!1,this._hasGlow=!1,this._hasFinish=!1,this._hasArrow=!1,this._hasCloseButton=!1,this._hasCloseAnywhere=!0,this._marginZonePx=new r,this._alignContent="left",this._verticalAlignContent="top",this._contentSpacing=0,this._verticalContentSpacing=50}return Object.defineProperty(t.prototype,"marginZone",{get:function(){return this._marginZone},set:function(t){this._marginZone!==t&&(null===t&&(this._marginZone=null),this._marginZonePx=r.parsePoints(t),null!==this._marginZonePx&&(this._marginZone=t))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"arrowColor",{get:function(){return this._arrowColor},set:function(t){this._arrowColor!==t&&(this._arrowColor=t,this._getInstance()&&(this._getInstance().arrowColor=this._arrowColor))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"id",{get:function(){return this._id},set:function(t){this._id=t||this._uid},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"alignContent",{get:function(){return this._alignContent},set:function(e){this._alignContent!==e?(this._alignContent=e,t._walkthroughContainer&&this._getInstance()&&this._updateElementPositions(this._getInstance())):this._alignContent=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"verticalAlignContent",{get:function(){return this._verticalAlignContent},set:function(e){this._verticalAlignContent!==e?(this._verticalAlignContent=e,t._walkthroughContainer&&this._getInstance()&&this._updateElementPositions(this._getInstance())):this._verticalAlignContent=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"contentSpacing",{get:function(){return this._contentSpacing},set:function(e){this._contentSpacing!==e?(this._contentSpacing=1*e,t._walkthroughContainer&&this._getInstance()&&this._updateElementPositions(this._getInstance())):this._contentSpacing=1*e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"verticalContentSpacing",{get:function(){return this._verticalContentSpacing},set:function(e){this._verticalContentSpacing!==e?(this._verticalContentSpacing=1*e,t._walkthroughContainer&&this._getInstance()&&this._updateElementPositions(this._getInstance())):this._verticalContentSpacing=1*e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeButton",{get:function(){return this._hasCloseButton},set:function(t){this._hasCloseButton=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeAnywhere",{get:function(){return this._hasCloseAnywhere},set:function(t){this._hasCloseAnywhere=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"showArrow",{get:function(){return this._hasArrow},set:function(t){this._hasArrow=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"finishButton",{get:function(){return this._hasFinish},set:function(t){this._hasFinish=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusHighlightAnimation",{get:function(){return this._hasHighlightAnimation},set:function(t){this._hasHighlightAnimation=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusBackdrop",{get:function(){return this._hasBackdrop},set:function(t){this._hasBackdrop=n(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusGlow",{get:function(){return this._hasGlow},set:function(t){this._hasGlow=n(t)},enumerable:!0,configurable:!0}),t.walkthroughStop=function(){t._walkthroughContainer.instance.stop()},t.walkthroughHasShow=function(){return t._walkthroughContainer.instance.show},t.walkthroughHasPause=function(){return t._walkthroughContainer.instance.pause},t.walkthroughContinue=function(){t._walkthroughContainer.instance.continue()},t.walkthroughNext=function(){t._walkthroughContainer.instance.next()},t.walkthroughPrevious=function(){t._walkthroughContainer.instance.previous()},t.prototype.resize=function(){t._walkthroughContainer&&this._display&&this._elementLocations()},t.prototype.ngAfterViewInit=function(){var e=this;t._walkthroughContainer||t._walkthroughContainerCreating||(t._walkthroughContainerCreating=!0,setTimeout(function(){t._walkthroughContainer=e._appendComponentToBody(b)},0))},t.prototype.next=function(t,e){void 0===t&&(t=void 0),void 0===e&&(e=void 0),t&&(this.closed=t),e&&(this.finished=e),this.open()},t.prototype.open=function(){this._getInstance().pause?console.warn("Another walkthrough is in pause. Please close it before."):this._elementLocations()},t.prototype.loadPrevioustStep=function(){var t=this;setTimeout(function(){t.previousStep._next(t.closed,t.finished)},0)},t.prototype.loadNextStep=function(){var t=this;setTimeout(function(){t.nextStep._next(t.closed,t.finished)},0)},t.prototype.hide=function(t,e){var o=this;void 0===t&&(t=!1),void 0===e&&(e=!0),this._display=!1,this.focusElementCSSClass&&this._renderer.removeClass(this._focusElement,this.focusElementCSSClass),e&&setTimeout(function(){o.closed.emit(t),o.nextStep||o.finished.emit(new i(o,o._focusElement))},20)},t.prototype._show=function(){this._display=!0},t.prototype._next=function(t,e){void 0===t&&(t=void 0),void 0===e&&(e=void 0),t&&(this.closed=t),e&&(this.finished=e),this.open()},t.prototype._getInstance=function(){return t._walkthroughContainer?t._walkthroughContainer.instance:null},t.prototype._appendComponentToBody=function(t){var e=this._componentFactoryResolver.resolveComponentFactory(t).create(this._injector);this._applicationRef.attachView(e.hostView);var o=e.hostView.rootNodes[0];return document.body.appendChild(o),e},t.prototype._attachWalkthroughContent=function(t,o){if(t instanceof e.TemplateRef)o.attachTemplatePortal(new u(t,null));else{var n=new WeakMap;n.set(b,o);var i=new w(this._injector,n);o.attachComponentPortal(new p(t,void 0,i))}},t.prototype._elementLocations=function(){this._getFocusElement();var t=this._focusElement;if(t){if(this._walkthroughService.scrollIntoViewIfOutOfView(t),this._offsetCoordinates=this._walkthroughService.retrieveCoordinates(t,this._marginZonePx),"zone"===this.typeSelector){var e=this._walkthroughService.retrieveCoordinates(this._focusElementEnd,this._marginZonePx);this._offsetCoordinates.height=e.top-this._offsetCoordinates.top+e.height,this._offsetCoordinates.width=e.left-this._offsetCoordinates.left+e.width}}else this._offsetCoordinates=null;this._setFocus()},t.prototype._getFocusElement=function(){var t=this.focusElementSelector?document.querySelectorAll(this.focusElementSelector):null;if(t&&t.length>0)if(t.length>1){for(var e=t.length,o=0;o<e;o++)if(t[o].offsetHeight){this._focusElement=t[o],o=t.length;break}if("zone"===this.typeSelector){for(o=e-1;o>=0;o--)if(t[o].offsetHeight){this._focusElementEnd=t[o],o=t.length;break}this._focusElement===this._focusElementEnd&&(this.typeSelector="element")}}else this._focusElement=t[0],this.typeSelector="element";else this._focusElement=null},t.prototype._setFocus=function(){var t=this,e=this._getInstance();if(e){var o=window.pageXOffset;this._initStylingTemplate(e),setTimeout(function(){t._focusElement&&e.zone?e.hightlightZone(t._offsetCoordinates,o-window.pageXOffset,t.animation,t.animationDelays,t._setFocusContinue.bind(t)):t._setFocusContinue()},20)}},t.prototype._setFocusContinue=function(){var t=this,e=this._getInstance();this._display||(this._attachContentTemplate(),this._initContentTemplate(e)),setTimeout(function(){e.hightlightZoneStyling(t._focusElement),t._updateElementPositions(e)},0)},t.prototype._updateElementPositions=function(t){var e=this;setTimeout(function(){t.contentBlockPosition(e._offsetCoordinates,e._alignContent,e._verticalAlignContent,e._contentSpacing,e._verticalContentSpacing),null!==e._focusElement&&e._hasArrow&&t.arrowPosition(e._offsetCoordinates,e._verticalContentSpacing),e.focusElementCSSClass&&e._renderer.addClass(e._focusElement,e.focusElementCSSClass),setTimeout(function(){e._getInstance().setHeight(),e._readyHasBeenEmited||(e._readyHasBeenEmited=!0,e.ready.emit(new i(e,e._focusElement))),e._walkthroughService.scrollIntoViewIfOutOfView(t.contentBlock.nativeElement)},50)},0)},t.prototype._attachContentTemplate=function(){this.contentTemplate&&this._attachWalkthroughContent(this.contentTemplate,this._getInstance())},t.prototype._initStylingTemplate=function(t){var e=null!==this._focusElement;t.parent=this,t.open(),t.hasHighlightZone=e,t.hasClickable=e&&"function"==typeof this.focusClick,t.hasHighlight=e&&this._hasHighlightAnimation,t.hasBackdrop=this._hasBackdrop,t.hasGlow=e&&this._hasGlow},t.prototype._initContentTemplate=function(t){var e=null!==this._focusElement;t.hasPrevious=!!this.previousStep,t.hasNext=!!this.nextStep,t.hasCloseButton=this._hasCloseButton,t.hasCloseAnywhere=this._hasCloseAnywhere,t.hasFinish=this._hasFinish,t.hasArrow=e&&this._hasArrow,t.arrowColor=this.arrowColor,t.radius=this.radius,t.marginZone=this._marginZone?this._marginZone.replace(/(\d+)/g,"$1px"):null,t.marginZonePx=this._marginZonePx,t.contentText=this.contentText,t.contentStyle=this.contentStyle,t.text=this.texts?C({},new _,this.texts):new _,this._show()},t._walkthroughContainer=null,t._walkthroughContainerCreating=!1,t.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough",template:""}]}],t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector},{type:e.Renderer2},{type:m}]},t.propDecorators={closed:[{type:e.Output}],finished:[{type:e.Output}],ready:[{type:e.Output}],focusElementCSSClass:[{type:e.Input}],focusElementSelector:[{type:e.Input}],typeSelector:[{type:e.Input}],focusClick:[{type:e.Input}],radius:[{type:e.Input}],previousStep:[{type:e.Input}],nextStep:[{type:e.Input}],texts:[{type:e.Input}],contentTemplate:[{type:e.Input}],contentText:[{type:e.Input}],contentStyle:[{type:e.Input}],marginZone:[{type:e.Input}],arrowColor:[{type:e.Input}],animation:[{type:e.Input}],animationDelays:[{type:e.Input}],id:[{type:e.Input}],alignContent:[{type:e.Input}],verticalAlignContent:[{type:e.Input}],contentSpacing:[{type:e.Input}],verticalContentSpacing:[{type:e.Input}],closeButton:[{type:e.Input}],closeAnywhere:[{type:e.Input}],showArrow:[{type:e.Input}],finishButton:[{type:e.Input}],focusHighlightAnimation:[{type:e.Input}],focusBackdrop:[{type:e.Input}],focusGlow:[{type:e.Input}],resize:[{type:e.HostListener,args:["window:resize"]}]},t}(),I=0,S=function(){function t(){this.closed=new e.EventEmitter,this.finished=new e.EventEmitter,this.contentStyle="draken",this.marginZone=null,this._uid="walkthrough-flow-"+I++}return Object.defineProperty(t.prototype,"id",{get:function(){return this._id},set:function(t){this._id=t||this._uid},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){var t=this;setTimeout(function(){t.init()},0)},t.prototype.init=function(){var t=this,e=null;this.walkthroughComponents.forEach(function(o){e&&(o.previousStep=e,e.nextStep=o),e=o,t.closed&&(o.closed=t.closed),t.finished&&(o.finished=t.finished),!o.contentStyle&&t.contentStyle&&(o.contentStyle=t.contentStyle),!o.arrowColor&&t.arrowColor&&(o.arrowColor=t.arrowColor),!o.marginZone&&t.marginZone&&(o.marginZone=t.marginZone),!o.showArrow&&n(t.showArrow)&&(o.showArrow=t.showArrow),!o.closeButton&&n(t.closeButton)&&(o.closeButton=t.closeButton),o.closeAnywhere&&!n(t.closeAnywhere)&&(o.closeAnywhere=t.closeAnywhere),!o.finishButton&&n(t.finishButton)&&(o.finishButton=t.finishButton),!o.focusBackdrop&&n(t.focusBackdrop)&&(o.focusBackdrop=t.focusBackdrop),!o.focusGlow&&n(t.focusGlow)&&(o.focusGlow=t.focusGlow),!o.radius&&t.radius&&(o.radius=t.radius),!o.texts&&t.texts&&(o.texts=t.texts)}),e.finishButton=!0},t.prototype.start=function(){this.walkthroughComponents.first.open()},t.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough-flow",template:""}]}],t.ctorParameters=function(){return[]},t.propDecorators={walkthroughComponents:[{type:e.ContentChildren,args:[x]}],id:[{type:e.Input}],closed:[{type:e.Output}],finished:[{type:e.Output}],contentStyle:[{type:e.Input}],arrowColor:[{type:e.Input}],marginZone:[{type:e.Input}],showArrow:[{type:e.Input}],closeButton:[{type:e.Input}],closeAnywhere:[{type:e.Input}],finishButton:[{type:e.Input}],focusBackdrop:[{type:e.Input}],focusGlow:[{type:e.Input}],radius:[{type:e.Input}],texts:[{type:e.Input}]},t}(),E=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t.decorators=[{type:e.NgModule,args:[{declarations:[S,x,b],exports:[S,x,b],imports:[o.CommonModule,y],entryComponents:[b],providers:[m]}]}],t.ctorParameters=function(){return[]},t}();t.booleanValue=n,t.WalkthroughEvent=i,t.WalkthroughMargin=r,t.WalkthroughComponent=x,t.WalkthroughFlowComponent=S,t.throwWalkthroughContentAlreadyAttachedError=k,t.WalkthroughContainerComponent=b,t.WalkthroughText=_,t.WalkthroughModule=E,t.ɵa=m,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=angular-walkthrough.umd.min.js.map

package.json

 {
   "name": "angular-walkthrough",
-  "version": "0.5.7",
+  "version": "0.6.0",
   "description": "Walkthrough, an Angular library",
@@ -100,2 +100,2 @@ "baseUrl": "./",
   "homepage": "https://github.com/Zefling/ng-walkthrough#readme"
-}
+}

README.md

@@ -32,3 +32,3 @@ [![npm version](https://badge.fury.io/js/angular-walkthrough.svg)](https://badge.fury.io/js/angular-walkthrough) [![Downloads](https://img.shields.io/npm/dm/angular-walkthrough.svg)](https://www.npmjs.com/package/angular-walkthrough) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Zefling/ng-walkthrough/master/LICENSE.md)
 - `ready` : fired when the walkthrough is completely ready
-- `closed` : fired when the walkthrough has been closed. It sends a boolean value set to true if the walkthrough has been closed with the "finishStep" button.
+- `closed` : fired when the walkthrough has been closed. It sends a boolean value set to true if the walkthrough has been closed with the "finishButton" button.
 - `finished` : fired when the walkthrough has been finished, which means : closed on last step.
@@ -51,3 +51,6 @@
 - `contentStyle`: background style for content container. Possible values: `none`, `darken`. By defaut : `darken`.
-- `justifyContent`: align the `contentTemplate`. Possible values: `left`, `center` or `right`. By defaut : `left`.
+- `alignContent`: align the `contentTemplate` horizontally. Possible values: `left`, `center` or `right`. By defaut : `left`.
+- `verticalAlignContent`: align the `contentTemplate` vertically. Possible values: `above`, `top`, `center`, `bottom` or `below`. By defaut : `top`.
+- `contentSpacing`: The max space which separates the content to the focus zone horizontally, default is 0 (opposite of the focusZone)
+- `verticalContentSpacing`: The max space which separates the content to the focus zone vertically, default is 50
 
@@ -59,3 +62,3 @@ **Navigation**:
 - `closeAnywhere`: `false` for click anywhere to close. By defaut `true`.
-- `finishStep`: `true` for show a link to exit. By defaut `false`.
+- `finishButton`: `true` for show a link to exit. By defaut `false`.
 - `texts`: change texts. It's a overlay of `WalkthroughText`.
@@ -69,3 +72,3 @@
 
-All attributes are optional and not overriding the subcomponents attributes except `previousStep`, `nextStep` and `finishStep` that will be ignored.
+All attributes are optional and not overriding the subcomponents attributes except `previousStep`, `nextStep` that will be ignored.
 
@@ -75,3 +78,3 @@ - `id`: HTML id.
 **Output events** 
-- `closed` : fired when a walkthrough has been closed. It sends a boolean value set to true if the walkthrough has been closed with the "finishStep" button.
+- `closed` : fired when a walkthrough has been closed. It sends a boolean value set to true if the walkthrough has been closed with the "finishButton" button.
 - `finished` : fired when the last walkthrough has been closed.
@@ -94,2 +97,3 @@
 - `texts`: change texts. It's a overlay of `WalkthroughText`.
+- `finishButton`: `true` for show a link to exit. By defaut `false`. Always `true` on the last step.
 
@@ -114,7 +118,7 @@ **Arrow**:
 
-`WalkthroughComponent.walkthroughStop()` : hide and stop the current walkthrough (impossible to open a new walkthrough).
+- `WalkthroughComponent.walkthroughStop()` : hide and stop the current walkthrough (impossible to open a new walkthrough).
 Does not work if no walkthrough is showed.
-`WalkthroughComponent.walkthroughContinue()` : show and continue the current walkthrough. Does not work if no walkthrough is paused.
-`WalkthroughComponent.walkthroughHasShow()` : if the a walkthrough is currently showing.
-`WalkthroughComponent.walkthroughHasPause`()` : if the a walkthrough is currently in pause.
+- `WalkthroughComponent.walkthroughContinue()` : show and continue the current walkthrough. Does not work if no walkthrough is paused.
+- `WalkthroughComponent.walkthroughHasShow()` : if the a walkthrough is currently showing.
+- `WalkthroughComponent.walkthroughHasPause()` : if the a walkthrough is currently in pause.
 
@@ -121,0 +125,0 @@ ### Example

walkthrough-container.component.d.ts

@@ -30,3 +30,2 @@ import { TemplateRef, ElementRef, ViewContainerRef, EmbeddedViewRef, ComponentRef, Renderer2 } from '@angular/core';
     arrowMarkerDist: number;
-    arrowMargin: number;
     contentStyle: string;
@@ -65,4 +64,4 @@ radius: string;
     hightlightZoneStyling(element: HTMLElement): void;
-    contentBlockPosition(coordinate: WalkthroughElementCoordinate, position: 'left' | 'center' | 'right'): void;
-    arrowPosition(coordinate: WalkthroughElementCoordinate): void;
+    contentBlockPosition(coordinate: WalkthroughElementCoordinate, alignContent: 'left' | 'center' | 'right', verticalAlignContent: 'above' | 'top' | 'center' | 'bottom' | 'below', contentSpacing: number, verticalContentSpacing: number): void;
+    arrowPosition(coordinate: WalkthroughElementCoordinate, verticalContentSpacing: number): void;
     /**
@@ -73,3 +72,3 @@ * stop the walkthrough : hide the container and change to pause at true
     /**
-     * stop the walkthrough : show the container and change to pause at false
+     * continue the walkthrough if is stopped : show the container and change to pause at false
      */
@@ -76,0 +75,0 @@ continue(): void;

walkthrough-flow.component.d.ts

@@ -16,2 +16,3 @@ import { QueryList, AfterViewInit, EventEmitter } from '@angular/core';
     closeAnywhere: string | boolean;
+    finishButton: string | boolean;
     focusBackdrop: string | boolean;
@@ -18,0 +19,0 @@ focusGlow: string | boolean;

walkthrough-tools.d.ts

@@ -7,3 +7,10 @@ import { WalkthroughComponent } from './walkthrough.component';
     width: number;
+    margin: Margin;
 }
+export interface Margin {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+}
 export declare const booleanValue: (value: string | boolean) => boolean;
@@ -10,0 +17,0 @@ export declare class WalkthroughEvent {

walkthrough.component.d.ts

@@ -1,2 +0,2 @@
-import { TemplateRef, ComponentFactoryResolver, ApplicationRef, Injector, OnInit, AfterViewInit, Renderer2, EventEmitter } from '@angular/core';
+import { TemplateRef, ComponentFactoryResolver, ApplicationRef, Injector, AfterViewInit, Renderer2, EventEmitter } from '@angular/core';
 import { WalkthroughContainerComponent } from './walkthrough-container.component';
@@ -6,3 +6,3 @@ import { WalkthroughService } from './walkthrough.service';
 import { WalkthroughEvent } from './walkthrough-tools';
-export declare class WalkthroughComponent implements OnInit, AfterViewInit {
+export declare class WalkthroughComponent implements AfterViewInit {
     private _componentFactoryResolver;
@@ -34,7 +34,10 @@ private _applicationRef;
     id: string;
-    justifyContent: 'left' | 'center' | 'right';
+    alignContent: 'left' | 'center' | 'right';
+    verticalAlignContent: 'above' | 'top' | 'center' | 'bottom' | 'below';
+    contentSpacing: number;
+    verticalContentSpacing: number;
     closeButton: string | boolean;
     closeAnywhere: string | boolean;
     showArrow: string | boolean;
-    finishStep: string | boolean;
+    finishButton: string | boolean;
     focusHighlightAnimation: string | boolean;
@@ -46,3 +49,3 @@ focusBackdrop: string | boolean;
     private _readyHasBeenEmited;
-    private _show;
+    private _display;
     private _hasHighlightAnimation;
@@ -58,3 +61,6 @@ private _hasBackdrop;
     private _marginZonePx;
-    private _justifyContent;
+    private _alignContent;
+    private _verticalAlignContent;
+    private _contentSpacing;
+    private _verticalContentSpacing;
     private _focusElement;
@@ -67,12 +73,23 @@ private _focusElementEnd;
     static walkthroughContinue(): void;
+    static walkthroughNext(): void;
+    static walkthroughPrevious(): void;
     constructor(_componentFactoryResolver: ComponentFactoryResolver, _applicationRef: ApplicationRef, _injector: Injector, _renderer: Renderer2, _walkthroughService: WalkthroughService);
     resize(): void;
-    ngOnInit(): void;
     ngAfterViewInit(): void;
     private next(closedEvent?, finishedEvent?);
     open(): void;
+    /**
+     * Do not use this method outside of the library
+     */
     loadPrevioustStep(): void;
+    /**
+     * Do not use this method outside of the library
+     */
     loadNextStep(): void;
-    show(): void;
+    /**
+     * Do not use this method outside of the library
+     */
     hide(finishLink?: boolean, closeWalkthrough?: boolean): void;
+    private _show();
+    private _next(closedEvent?, finishedEvent?);
     private _getInstance();
@@ -79,0 +96,0 @@ private _appendComponentToBody<T>(component);

walkthrough.service.d.ts

@@ -9,3 +9,3 @@ import { WalkthroughElementCoordinate, WalkthroughMargin } from './walkthrough-tools';
     getDocumentHeight(): number;
-    scrollIntoViewIfOutOfView(element: HTMLElement): void;
+    scrollIntoViewIfOutOfView(element: HTMLElement, marginTop?: number): void;
     scrollToTopElement(element1: HTMLElement, element2: HTMLElement, margin: WalkthroughMargin): void;
@@ -12,0 +12,0 @@ getScrollParent(element: HTMLElement): HTMLElement;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

856044

increased by12.09%

Lines of code

7999

increased by10.54%

Number of lines in readme file

173

increased by2.37%

No dependency changes