New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
angular-walkthrough
Advanced tools
angular-walkthrough - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
@@ -1017,3 +1017,3 @@ import { ApplicationRef, Component, ComponentFactoryResolver, ContentChildren, Directive, HostBinding, HostListener, Injectable, Injector, Input, NgModule, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; | ||
| selector: 'walkthrough-container', | ||
| styles: [":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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 2000px 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.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; } #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; } } "], | ||
| styles: [":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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.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; } #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); } } "], | ||
| 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\"></div> <div class=\"wkt-content-block\" [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()\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\"> <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> " | ||
@@ -1020,0 +1020,0 @@ },] }, |
@@ -985,3 +985,3 @@ import { ApplicationRef, Component, ComponentFactoryResolver, ContentChildren, Directive, HostBinding, HostListener, Injectable, Injector, Input, NgModule, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; | ||
| selector: 'walkthrough-container', | ||
| styles: [":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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 2000px 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.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; } #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; } } "], | ||
| styles: [":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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.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; } #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); } } "], | ||
| 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\"></div> <div class=\"wkt-content-block\" [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()\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\"> <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> " | ||
@@ -988,0 +988,0 @@ },] }, |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":3,"metadata":{"WalkthroughElementCoordinate":{"__symbolic":"interface"},"booleanValue":{"__symbolic":"error","message":"Function call not supported","line":27,"character":28,"module":"./walkthrough.component"},"WalkthroughComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-walkthrough","template":""}]}],"members":{"focusElementSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"typeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"previousStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nextStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"justifyContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"finishStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusHighlightAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","name":"ɵa"}]}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"loadPrevioustStep":[{"__symbolic":"method"}],"loadNextStep":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"_appendComponentToBody":[{"__symbolic":"method"}],"_attachWalkthroughContent":[{"__symbolic":"method"}],"_elementLocations":[{"__symbolic":"method"}],"_getFocusElement":[{"__symbolic":"method"}],"_setFocus":[{"__symbolic":"method"}],"_updateElementPositions":[{"__symbolic":"method"}],"_attachContentTemplate":[{"__symbolic":"method"}],"_initContentTemplate":[{"__symbolic":"method"}]},"statics":{"_walkthroughContainer":{"__symbolic":"error","message":"Variable not initialized","line":39,"character":19},"_walkthroughContainerCreating":false}},"throwWalkthroughContentAlreadyAttachedError":{"__symbolic":"function"},"WalkthroughContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"BasePortalHost"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"walkthrough-container","styles":[":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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 2000px 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.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; } #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; } } "],"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\"></div> <div class=\"wkt-content-block\" [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()\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\"> <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"},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalHostDirective"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content"]}]}],"contentBlock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["contentBlock"]}]}],"zone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["zone"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.id"]}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.hide"]}]}],"cursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.cursor"]}]}],"backdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.backdrop"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","name":"ɵa"}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickZone":[{"__symbolic":"method"}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"hightlightZone":[{"__symbolic":"method"}],"hightlightZoneStyling":[{"__symbolic":"method"}],"contentBlockPosition":[{"__symbolic":"method"}],"arrowPosition":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"WalkthroughModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"entryComponents":[{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"WalkthroughModule"},"providers":[]}}}},"WalkthroughText":{"__symbolic":"class","members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"disableScroll":[{"__symbolic":"method"}],"enableScroll":[{"__symbolic":"method"}],"scrollIntoViewIfOutOfView":[{"__symbolic":"method"}],"getScrollParent":[{"__symbolic":"method"}],"getHeightOfPage":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-walkthrough-flow","template":""}]}],"members":{"walkthroughComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"WalkthroughComponent"}]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}]}}},"origins":{"WalkthroughElementCoordinate":"./walkthrough.component","booleanValue":"./walkthrough.component","WalkthroughComponent":"./walkthrough.component","throwWalkthroughContentAlreadyAttachedError":"./walkthrough-container.component","WalkthroughContainerComponent":"./walkthrough-container.component","WalkthroughModule":"./walkthrough.module","WalkthroughText":"./walkthrough-text","ɵa":"./walkthrough.service","ɵb":"./walkthrough-flow.component"},"importAs":"angular-walkthrough"} | ||
| {"__symbolic":"module","version":3,"metadata":{"WalkthroughElementCoordinate":{"__symbolic":"interface"},"booleanValue":{"__symbolic":"error","message":"Function call not supported","line":27,"character":28,"module":"./walkthrough.component"},"WalkthroughComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-walkthrough","template":""}]}],"members":{"focusElementSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"typeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"previousStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nextStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"justifyContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"finishStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusHighlightAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","name":"ɵa"}]}],"resize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"loadPrevioustStep":[{"__symbolic":"method"}],"loadNextStep":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"_appendComponentToBody":[{"__symbolic":"method"}],"_attachWalkthroughContent":[{"__symbolic":"method"}],"_elementLocations":[{"__symbolic":"method"}],"_getFocusElement":[{"__symbolic":"method"}],"_setFocus":[{"__symbolic":"method"}],"_updateElementPositions":[{"__symbolic":"method"}],"_attachContentTemplate":[{"__symbolic":"method"}],"_initContentTemplate":[{"__symbolic":"method"}]},"statics":{"_walkthroughContainer":{"__symbolic":"error","message":"Variable not initialized","line":39,"character":19},"_walkthroughContainerCreating":false}},"throwWalkthroughContentAlreadyAttachedError":{"__symbolic":"function"},"WalkthroughContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"BasePortalHost"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"walkthrough-container","styles":[":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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.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; } #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); } } "],"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\"></div> <div class=\"wkt-content-block\" [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()\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\"> <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"},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalHostDirective"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content"]}]}],"contentBlock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["contentBlock"]}]}],"zone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["zone"]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.id"]}]}],"hide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.hide"]}]}],"cursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.cursor"]}]}],"backdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.backdrop"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","name":"ɵa"}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"clickZone":[{"__symbolic":"method"}],"attachComponentPortal":[{"__symbolic":"method"}],"attachTemplatePortal":[{"__symbolic":"method"}],"hightlightZone":[{"__symbolic":"method"}],"hightlightZoneStyling":[{"__symbolic":"method"}],"contentBlockPosition":[{"__symbolic":"method"}],"arrowPosition":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"WalkthroughModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"WalkthroughComponent"},{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"entryComponents":[{"__symbolic":"reference","name":"WalkthroughContainerComponent"}],"providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"WalkthroughModule"},"providers":[]}}}},"WalkthroughText":{"__symbolic":"class","members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"disableScroll":[{"__symbolic":"method"}],"enableScroll":[{"__symbolic":"method"}],"scrollIntoViewIfOutOfView":[{"__symbolic":"method"}],"getScrollParent":[{"__symbolic":"method"}],"getHeightOfPage":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-walkthrough-flow","template":""}]}],"members":{"walkthroughComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"WalkthroughComponent"}]}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"contentStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrowColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeAnywhere":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusBackdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"focusGlow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"texts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}]}}},"origins":{"WalkthroughElementCoordinate":"./walkthrough.component","booleanValue":"./walkthrough.component","WalkthroughComponent":"./walkthrough.component","throwWalkthroughContentAlreadyAttachedError":"./walkthrough-container.component","WalkthroughContainerComponent":"./walkthrough-container.component","WalkthroughModule":"./walkthrough.module","WalkthroughText":"./walkthrough-text","ɵa":"./walkthrough.service","ɵb":"./walkthrough-flow.component"},"importAs":"angular-walkthrough"} |
@@ -1020,3 +1020,3 @@ (function (global, factory) { | ||
| selector: 'walkthrough-container', | ||
| styles: [":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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 2000px 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.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; } #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; } } "], | ||
| styles: [":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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.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; } #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); } } "], | ||
| 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\"></div> <div class=\"wkt-content-block\" [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()\">{{text.close}}</button> </div> </div> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" *ngIf=\"hasArrow\"> <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> " | ||
@@ -1023,0 +1023,0 @@ },] }, |
@@ -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.angularWalkthrough||{},t.ng.core,t.ng.common)}(this,function(t,e,o){"use strict";function n(t,e){function o(){this.constructor=t}p(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function r(){throw Error("Must provide a portal to attach")}function i(){throw Error("Host already has a portal attached")}function s(){throw Error("This PortalHost has already been disposed")}function a(){throw Error("Attempting to attach an unknown Portal type. BasePortalHost accepts either a ComponentPortal or a TemplatePortal.")}function h(){throw Error("Attempting to attach a portal to a null PortalHost")}function c(){throw Error("Attempting to detach a portal that is not attached to a host")}function l(){throw Error("Attempting to attach walkthrough content after content is already attached")}var p=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])},u=function(){function t(){}return t.prototype.attach=function(t){return null==t&&h(),t.hasAttached()&&i(),this._attachedHost=t,t.attach(this)},t.prototype.detach=function(){var t=this._attachedHost;null==t?c():(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}(),f=function(t){function e(e,o,n){var r=t.call(this)||this;return r.component=e,r.viewContainerRef=o,r.injector=n,r}return n(e,t),e}(u),d=function(t){function e(e,o,n){var r=t.call(this)||this;return r.templateRef=e,r.viewContainerRef=o,n&&(r.context=n),r}return n(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}(u),g=function(){function t(){this._isDisposed=!1}return t.prototype.hasAttached=function(){return!!this._attachedPortal},t.prototype.attach=function(t){return t||r(),this.hasAttached()&&i(),this._isDisposed&&s(),t instanceof f?(this._attachedPortal=t,this.attachComponentPortal(t)):t instanceof d?(this._attachedPortal=t,this.attachTemplatePortal(t)):void a()},t.prototype.attachComponentPortal=function(t){},t.prototype.attachTemplatePortal=function(t){},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}(),y=(function(t){function e(e,o,n,r){var i=t.call(this)||this;return i._hostDomElement=e,i._componentFactoryResolver=o,i._appRef=n,i._defaultInjector=r,i}n(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._hostDomElement.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._hostDomElement.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._hostDomElement.parentNode&&this._hostDomElement.parentNode.removeChild(this._hostDomElement)},e.prototype._getComponentRootNode=function(t){return t.hostView.rootNodes[0]}}(g),function(t){function o(e,o){return t.call(this,e,o)||this}return n(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}(d)),w=function(t){function o(e,o){var n=t.call(this)||this;return n._componentFactoryResolver=e,n._viewContainerRef=o,n._portal=null,n}return n(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,"portal",{get:function(){return this._portal},set:function(e){this.hasAttached()&&t.prototype.detach.call(this),e&&t.prototype.attach.call(this,e),this._portal=e},enumerable:!0,configurable:!0}),o.prototype.ngOnDestroy=function(){t.prototype.dispose.call(this),this._portal=null},o.prototype.attachComponentPortal=function(e){e.setAttachedHost(this);var o=null!=e.viewContainerRef?e.viewContainerRef:this._viewContainerRef,n=this._componentFactoryResolver.resolveComponentFactory(e.component),r=o.createComponent(n,o.length,e.injector||o.parentInjector);return t.prototype.setDisposeFn.call(this,function(){return r.destroy()}),this._portal=e,r},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._portal=e,n},o.decorators=[{type:e.Directive,args:[{selector:"[cdkPortalHost], [portalHost]",exportAs:"cdkPortalHost",inputs:["portal: cdkPortalHost"]}]}],o.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},o.propDecorators={_deprecatedPortal:[{type:e.Input,args:["portalHost"]}]},o}(g),m=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{exports:[y,w],declarations:[y,w]}]}],t.ctorParameters=function(){return[]},t}(),_=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}(),k=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.disableScroll=function(){window.addEventListener("wheel",this._preventDefault,!1),window.addEventListener("touchmove",this._preventDefault,!1),document.addEventListener("keydown",this._preventDefaultForScrollKeys,!1)},t.prototype.enableScroll=function(){window.removeEventListener("wheel",this._preventDefault),window.removeEventListener("touchmove",this._preventDefault),document.removeEventListener("keydown",this._preventDefaultForScrollKeys)},t.prototype.scrollIntoViewIfOutOfView=function(t){for(var e=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,o=this.getHeightOfPage(),n=0,r=0,i=t;i&&i!==document.body;)n+=i.offsetTop,i=i.offsetParent;if(r=t.offsetHeight,e+o<n+r)t.scrollIntoView(!1);else if(n<e)t.scrollIntoView(!0);else for(var s=t;s&&s!==document.body;){if(i=this.getScrollParent(s),s.offsetTop+s.offsetHeight-i.scrollTop>i.offsetHeight||s.offsetLeft+s.offsetWidth-i.scrollLeft>i.offsetWidth){t.scrollIntoView();break}s=i}},t.prototype.getScrollParent=function(t){var e,o=getComputedStyle(t),n="absolute"===o.position;if("fixed"!==o.position)for(var r=t.parentElement;r&&r!==document.body;){if(o=getComputedStyle(r),(!n||"static"!==o.position)&&this._overflowRegex.test(o.overflow+o.overflowY+o.overflowX)){e=r;break}r=r.parentElement}return e||document.body},t.prototype.getHeightOfPage=function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},t}();k.decorators=[{type:e.Injectable}],k.ctorParameters=function(){return[]};var v=function(){return function(){this.previous="Previous",this.next="Next",this.close="Close"}}(),b=function(){var t=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])};return function(e,o){function n(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),C=function(t){function e(e,o){var n=t.call(this)||this;return n.viewContainerRef=e,n._walkthroughService=o,n.hasHighlightZone=!1,n.hasHighlight=!1,n.hasBackdrop=!1,n.hasGlow=!1,n.hasPrevious=!1,n.hasNext=!1,n.hasFinish=!1,n.hasCloseButton=!1,n.hasCloseAnywhere=!0,n.hasArrow=!1,n.arrowMarkerDist=7,n.arrowMargin=30,n.text=new v,n}return b(e,t),Object.defineProperty(e.prototype,"id",{get:function(){return this.parent?this.parent.id+"-container":null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hide",{get:function(){return!this.show},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"cursor",{get:function(){return this.hasCloseAnywhere},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"backdrop",{get:function(){return!this.hasHighlightZone&&this.hasBackdrop},enumerable:!0,configurable:!0}),e.prototype.click=function(){this.hasCloseAnywhere&&this.close()},e.prototype.clickZone=function(t){this.parent&&this.hasClickable&&this.parent.focusClick(t,this)},e.prototype.attachComponentPortal=function(t){return this._portalHost.hasAttached()&&l(),this._portalHost.attachComponentPortal(t)},e.prototype.attachTemplatePortal=function(t){return this._portalHost.hasAttached()&&l(),this._portalHost.attachTemplatePortal(t)},e.prototype.hightlightZone=function(t){var e=this.zone.nativeElement.style;e.left=t.left+"px",e.top=t.top+"px",e.width=t.width+"px",e.height=t.height+"px"},e.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=""},e.prototype.contentBlockPosition=function(t,e){var o=this.contentBlock.nativeElement,n=window.getComputedStyle(o,null),r=o.getBoundingClientRect().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-o.getBoundingClientRect().width/2+"px":"right"===e&&(o.style.right="0"),this.hasHighlightZone){var i=o.getBoundingClientRect(),s=i.left+i.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<r?(o.style.top=t.top+t.height+a+"px",this._contentPosition="bottom"):(o.style.top=t.top-r-a+"px",this._contentPosition="top")}else o.style.top=this._walkthroughService.getHeightOfPage()/2-r/2+"px"},e.prototype.arrowPosition=function(t){var e,o,n=this.contentBlock.nativeElement.getBoundingClientRect(),r=n.left+n.width/2,i=n.top+n.height,s=t.left,a=t.top;"bottom"===this._contentPosition&&(i-=n.height),"topBottom"===this._arrowPosition?(s+=t.width/2,"bottom"===this._contentPosition&&(a+=t.height),o=(r+s)/2,e=(i+a)/2,this.arrowPath="M"+r+","+i+" Q"+r+","+e+" "+o+","+e+" Q"+s+","+e+" "+s+","+a):(r>t.left?s+=t.width+this.arrowMarkerDist:s-=this.arrowMarkerDist,a+=t.height/2,this.arrowPath="M"+r+","+i+" Q"+r+","+a+" "+s+","+a)},e.prototype.open=function(){this.show=!0,this._walkthroughService.disableScroll()},e.prototype.previous=function(){this.close(),this.parent.loadPrevioustStep()},e.prototype.next=function(){this.close(),this.parent.loadNextStep()},e.prototype.close=function(){this._portalHost.dispose(),this.show=!1,this.parent.hide(),this._walkthroughService.enableScroll()},e}(g);C.decorators=[{type:e.Component,args:[{selector:"walkthrough-container",styles:[":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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 2000px 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.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; } #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; } } "],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"></div> <div class="wkt-content-block" [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()">{{text.close}}</button> </div> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" *ngIf="hasArrow"> <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> '}]}],C.ctorParameters=function(){return[{type:e.ViewContainerRef},{type:k}]},C.propDecorators={_portalHost:[{type:e.ViewChild,args:[w]}],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"]}]};var P=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++){e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},x=function(t){return"true"===t||!0===t},R=0,F=function(){function t(t,e,o,n){this._componentFactoryResolver=t,this._applicationRef=e,this._injector=o,this._walkthroughService=n,this.typeSelector="element",this.contentStyle="draken",this._uid="walkthrough-"+R++,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._justifyContent="left"}return 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&&t._walkthroughContainer.instance&&this._updateElementPositions(t._walkthroughContainer.instance)):this._justifyContent=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeButton",{get:function(){return this._hasCloseButton},set:function(t){this._hasCloseButton=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeAnywhere",{get:function(){return this._hasCloseAnywhere},set:function(t){this._hasCloseAnywhere=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"showArrow",{get:function(){return this._hasArrow},set:function(t){this._hasArrow=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"finishStep",{get:function(){return this._hasFinish},set:function(t){this._hasFinish=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusHighlightAnimation",{get:function(){return this._hasHighlightAnimation},set:function(t){this._hasHighlightAnimation=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusBackdrop",{get:function(){return this._hasBackdrop},set:function(t){this._hasBackdrop=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusGlow",{get:function(){return this._hasGlow},set:function(t){this._hasGlow=x(t)},enumerable:!0,configurable:!0}),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(C)},0))},t.prototype.open=function(){this._elementLocations()},t.prototype.loadPrevioustStep=function(){var t=this;setTimeout(function(){t.previousStep.open()},0)},t.prototype.loadNextStep=function(){var t=this;setTimeout(function(){t.nextStep.open()},0)},t.prototype.show=function(){this._show=!0},t.prototype.hide=function(){this._show=!1},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 d(t,null));else{var n=new WeakMap;n.set(C,o);var r=new _(this._injector,n);o.attachComponentPortal(new f(t,void 0,r))}},t.prototype._elementLocations=function(){this._getFocusElement();var t=this._focusElement;if(t){if(this._walkthroughService.scrollIntoViewIfOutOfView(t),this._offsetCoordinates=t.getBoundingClientRect(),"zone"===this.typeSelector){var e=this._focusElementEnd.getBoundingClientRect();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 e=this,o=t._walkthroughContainer.instance;o&&(this._focusElement&&o.zone&&o.hightlightZone(this._offsetCoordinates),this._show||(this._attachContentTemplate(),this._initContentTemplate(o)),setTimeout(function(){o.hightlightZoneStyling(e._focusElement),e._updateElementPositions(o)},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)},0)},t.prototype._attachContentTemplate=function(){this.contentTemplate&&this._attachWalkthroughContent(this.contentTemplate,t._walkthroughContainer.instance)},t.prototype._initContentTemplate=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.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.contentText=this.contentText,t.contentStyle=this.contentStyle,t.text=this.texts?P({},new v,this.texts):new v,this.show()},t}();F._walkthroughContainerCreating=!1,F.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough",template:""}]}],F.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector},{type:k}]},F.propDecorators={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}],arrowColor:[{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"]}]};var A=0,B=function(){function t(){this.contentStyle="draken",this._uid="walkthrough-flow-"+A++}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,!o.contentStyle&&t.contentStyle&&(o.contentStyle=t.contentStyle),!o.arrowColor&&t.arrowColor&&(o.arrowColor=t.arrowColor),!o.showArrow&&x(t.showArrow)&&(o.showArrow=t.showArrow),!o.closeButton&&x(t.closeButton)&&(o.closeButton=t.closeButton),o.closeAnywhere&&!x(t.closeAnywhere)&&(o.closeAnywhere=t.closeAnywhere),!o.focusBackdrop&&x(t.focusBackdrop)&&(o.focusBackdrop=t.focusBackdrop),!o.focusGlow&&x(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}();B.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough-flow",template:""}]}],B.ctorParameters=function(){return[]},B.propDecorators={walkthroughComponents:[{type:e.ContentChildren,args:[F]}],id:[{type:e.Input}],contentStyle:[{type:e.Input}],arrowColor:[{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}]};var I=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t}();I.decorators=[{type:e.NgModule,args:[{declarations:[B,F,C],imports:[o.CommonModule,m],exports:[B,F,C],entryComponents:[C],providers:[k]}]}],I.ctorParameters=function(){return[]},t.booleanValue=x,t.WalkthroughComponent=F,t.throwWalkthroughContentAlreadyAttachedError=l,t.WalkthroughContainerComponent=C,t.WalkthroughModule=I,t.WalkthroughText=v,t.ɵb=B,t.ɵa=k,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.angularWalkthrough||{},t.ng.core,t.ng.common)}(this,function(t,e,o){"use strict";function n(t,e){function o(){this.constructor=t}p(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}function r(){throw Error("Must provide a portal to attach")}function i(){throw Error("Host already has a portal attached")}function s(){throw Error("This PortalHost has already been disposed")}function a(){throw Error("Attempting to attach an unknown Portal type. BasePortalHost accepts either a ComponentPortal or a TemplatePortal.")}function h(){throw Error("Attempting to attach a portal to a null PortalHost")}function c(){throw Error("Attempting to detach a portal that is not attached to a host")}function l(){throw Error("Attempting to attach walkthrough content after content is already attached")}var p=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])},u=function(){function t(){}return t.prototype.attach=function(t){return null==t&&h(),t.hasAttached()&&i(),this._attachedHost=t,t.attach(this)},t.prototype.detach=function(){var t=this._attachedHost;null==t?c():(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}(),f=function(t){function e(e,o,n){var r=t.call(this)||this;return r.component=e,r.viewContainerRef=o,r.injector=n,r}return n(e,t),e}(u),d=function(t){function e(e,o,n){var r=t.call(this)||this;return r.templateRef=e,r.viewContainerRef=o,n&&(r.context=n),r}return n(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}(u),g=function(){function t(){this._isDisposed=!1}return t.prototype.hasAttached=function(){return!!this._attachedPortal},t.prototype.attach=function(t){return t||r(),this.hasAttached()&&i(),this._isDisposed&&s(),t instanceof f?(this._attachedPortal=t,this.attachComponentPortal(t)):t instanceof d?(this._attachedPortal=t,this.attachTemplatePortal(t)):void a()},t.prototype.attachComponentPortal=function(t){},t.prototype.attachTemplatePortal=function(t){},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}(),y=(function(t){function e(e,o,n,r){var i=t.call(this)||this;return i._hostDomElement=e,i._componentFactoryResolver=o,i._appRef=n,i._defaultInjector=r,i}n(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._hostDomElement.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._hostDomElement.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._hostDomElement.parentNode&&this._hostDomElement.parentNode.removeChild(this._hostDomElement)},e.prototype._getComponentRootNode=function(t){return t.hostView.rootNodes[0]}}(g),function(t){function o(e,o){return t.call(this,e,o)||this}return n(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}(d)),w=function(t){function o(e,o){var n=t.call(this)||this;return n._componentFactoryResolver=e,n._viewContainerRef=o,n._portal=null,n}return n(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,"portal",{get:function(){return this._portal},set:function(e){this.hasAttached()&&t.prototype.detach.call(this),e&&t.prototype.attach.call(this,e),this._portal=e},enumerable:!0,configurable:!0}),o.prototype.ngOnDestroy=function(){t.prototype.dispose.call(this),this._portal=null},o.prototype.attachComponentPortal=function(e){e.setAttachedHost(this);var o=null!=e.viewContainerRef?e.viewContainerRef:this._viewContainerRef,n=this._componentFactoryResolver.resolveComponentFactory(e.component),r=o.createComponent(n,o.length,e.injector||o.parentInjector);return t.prototype.setDisposeFn.call(this,function(){return r.destroy()}),this._portal=e,r},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._portal=e,n},o.decorators=[{type:e.Directive,args:[{selector:"[cdkPortalHost], [portalHost]",exportAs:"cdkPortalHost",inputs:["portal: cdkPortalHost"]}]}],o.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},o.propDecorators={_deprecatedPortal:[{type:e.Input,args:["portalHost"]}]},o}(g),m=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{exports:[y,w],declarations:[y,w]}]}],t.ctorParameters=function(){return[]},t}(),_=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}(),k=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.disableScroll=function(){window.addEventListener("wheel",this._preventDefault,!1),window.addEventListener("touchmove",this._preventDefault,!1),document.addEventListener("keydown",this._preventDefaultForScrollKeys,!1)},t.prototype.enableScroll=function(){window.removeEventListener("wheel",this._preventDefault),window.removeEventListener("touchmove",this._preventDefault),document.removeEventListener("keydown",this._preventDefaultForScrollKeys)},t.prototype.scrollIntoViewIfOutOfView=function(t){for(var e=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,o=this.getHeightOfPage(),n=0,r=0,i=t;i&&i!==document.body;)n+=i.offsetTop,i=i.offsetParent;if(r=t.offsetHeight,e+o<n+r)t.scrollIntoView(!1);else if(n<e)t.scrollIntoView(!0);else for(var s=t;s&&s!==document.body;){if(i=this.getScrollParent(s),s.offsetTop+s.offsetHeight-i.scrollTop>i.offsetHeight||s.offsetLeft+s.offsetWidth-i.scrollLeft>i.offsetWidth){t.scrollIntoView();break}s=i}},t.prototype.getScrollParent=function(t){var e,o=getComputedStyle(t),n="absolute"===o.position;if("fixed"!==o.position)for(var r=t.parentElement;r&&r!==document.body;){if(o=getComputedStyle(r),(!n||"static"!==o.position)&&this._overflowRegex.test(o.overflow+o.overflowY+o.overflowX)){e=r;break}r=r.parentElement}return e||document.body},t.prototype.getHeightOfPage=function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},t}();k.decorators=[{type:e.Injectable}],k.ctorParameters=function(){return[]};var v=function(){return function(){this.previous="Previous",this.next="Next",this.close="Close"}}(),b=function(){var t=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])};return function(e,o){function n(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),C=function(t){function e(e,o){var n=t.call(this)||this;return n.viewContainerRef=e,n._walkthroughService=o,n.hasHighlightZone=!1,n.hasHighlight=!1,n.hasBackdrop=!1,n.hasGlow=!1,n.hasPrevious=!1,n.hasNext=!1,n.hasFinish=!1,n.hasCloseButton=!1,n.hasCloseAnywhere=!0,n.hasArrow=!1,n.arrowMarkerDist=7,n.arrowMargin=30,n.text=new v,n}return b(e,t),Object.defineProperty(e.prototype,"id",{get:function(){return this.parent?this.parent.id+"-container":null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hide",{get:function(){return!this.show},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"cursor",{get:function(){return this.hasCloseAnywhere},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"backdrop",{get:function(){return!this.hasHighlightZone&&this.hasBackdrop},enumerable:!0,configurable:!0}),e.prototype.click=function(){this.hasCloseAnywhere&&this.close()},e.prototype.clickZone=function(t){this.parent&&this.hasClickable&&this.parent.focusClick(t,this)},e.prototype.attachComponentPortal=function(t){return this._portalHost.hasAttached()&&l(),this._portalHost.attachComponentPortal(t)},e.prototype.attachTemplatePortal=function(t){return this._portalHost.hasAttached()&&l(),this._portalHost.attachTemplatePortal(t)},e.prototype.hightlightZone=function(t){var e=this.zone.nativeElement.style;e.left=t.left+"px",e.top=t.top+"px",e.width=t.width+"px",e.height=t.height+"px"},e.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=""},e.prototype.contentBlockPosition=function(t,e){var o=this.contentBlock.nativeElement,n=window.getComputedStyle(o,null),r=o.getBoundingClientRect().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-o.getBoundingClientRect().width/2+"px":"right"===e&&(o.style.right="0"),this.hasHighlightZone){var i=o.getBoundingClientRect(),s=i.left+i.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<r?(o.style.top=t.top+t.height+a+"px",this._contentPosition="bottom"):(o.style.top=t.top-r-a+"px",this._contentPosition="top")}else o.style.top=this._walkthroughService.getHeightOfPage()/2-r/2+"px"},e.prototype.arrowPosition=function(t){var e,o,n=this.contentBlock.nativeElement.getBoundingClientRect(),r=n.left+n.width/2,i=n.top+n.height,s=t.left,a=t.top;"bottom"===this._contentPosition&&(i-=n.height),"topBottom"===this._arrowPosition?(s+=t.width/2,"bottom"===this._contentPosition&&(a+=t.height),o=(r+s)/2,e=(i+a)/2,this.arrowPath="M"+r+","+i+" Q"+r+","+e+" "+o+","+e+" Q"+s+","+e+" "+s+","+a):(r>t.left?s+=t.width+this.arrowMarkerDist:s-=this.arrowMarkerDist,a+=t.height/2,this.arrowPath="M"+r+","+i+" Q"+r+","+a+" "+s+","+a)},e.prototype.open=function(){this.show=!0,this._walkthroughService.disableScroll()},e.prototype.previous=function(){this.close(),this.parent.loadPrevioustStep()},e.prototype.next=function(){this.close(),this.parent.loadNextStep()},e.prototype.close=function(){this._portalHost.dispose(),this.show=!1,this.parent.hide(),this._walkthroughService.enableScroll()},e}(g);C.decorators=[{type:e.Component,args:[{selector:"walkthrough-container",styles:[":host { display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; 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.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; } #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); } } "],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"></div> <div class="wkt-content-block" [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()">{{text.close}}</button> </div> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" *ngIf="hasArrow"> <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> '}]}],C.ctorParameters=function(){return[{type:e.ViewContainerRef},{type:k}]},C.propDecorators={_portalHost:[{type:e.ViewChild,args:[w]}],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"]}]};var P=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++){e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},x=function(t){return"true"===t||!0===t},R=0,F=function(){function t(t,e,o,n){this._componentFactoryResolver=t,this._applicationRef=e,this._injector=o,this._walkthroughService=n,this.typeSelector="element",this.contentStyle="draken",this._uid="walkthrough-"+R++,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._justifyContent="left"}return 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&&t._walkthroughContainer.instance&&this._updateElementPositions(t._walkthroughContainer.instance)):this._justifyContent=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeButton",{get:function(){return this._hasCloseButton},set:function(t){this._hasCloseButton=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"closeAnywhere",{get:function(){return this._hasCloseAnywhere},set:function(t){this._hasCloseAnywhere=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"showArrow",{get:function(){return this._hasArrow},set:function(t){this._hasArrow=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"finishStep",{get:function(){return this._hasFinish},set:function(t){this._hasFinish=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusHighlightAnimation",{get:function(){return this._hasHighlightAnimation},set:function(t){this._hasHighlightAnimation=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusBackdrop",{get:function(){return this._hasBackdrop},set:function(t){this._hasBackdrop=x(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusGlow",{get:function(){return this._hasGlow},set:function(t){this._hasGlow=x(t)},enumerable:!0,configurable:!0}),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(C)},0))},t.prototype.open=function(){this._elementLocations()},t.prototype.loadPrevioustStep=function(){var t=this;setTimeout(function(){t.previousStep.open()},0)},t.prototype.loadNextStep=function(){var t=this;setTimeout(function(){t.nextStep.open()},0)},t.prototype.show=function(){this._show=!0},t.prototype.hide=function(){this._show=!1},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 d(t,null));else{var n=new WeakMap;n.set(C,o);var r=new _(this._injector,n);o.attachComponentPortal(new f(t,void 0,r))}},t.prototype._elementLocations=function(){this._getFocusElement();var t=this._focusElement;if(t){if(this._walkthroughService.scrollIntoViewIfOutOfView(t),this._offsetCoordinates=t.getBoundingClientRect(),"zone"===this.typeSelector){var e=this._focusElementEnd.getBoundingClientRect();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 e=this,o=t._walkthroughContainer.instance;o&&(this._focusElement&&o.zone&&o.hightlightZone(this._offsetCoordinates),this._show||(this._attachContentTemplate(),this._initContentTemplate(o)),setTimeout(function(){o.hightlightZoneStyling(e._focusElement),e._updateElementPositions(o)},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)},0)},t.prototype._attachContentTemplate=function(){this.contentTemplate&&this._attachWalkthroughContent(this.contentTemplate,t._walkthroughContainer.instance)},t.prototype._initContentTemplate=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.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.contentText=this.contentText,t.contentStyle=this.contentStyle,t.text=this.texts?P({},new v,this.texts):new v,this.show()},t}();F._walkthroughContainerCreating=!1,F.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough",template:""}]}],F.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector},{type:k}]},F.propDecorators={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}],arrowColor:[{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"]}]};var A=0,B=function(){function t(){this.contentStyle="draken",this._uid="walkthrough-flow-"+A++}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,!o.contentStyle&&t.contentStyle&&(o.contentStyle=t.contentStyle),!o.arrowColor&&t.arrowColor&&(o.arrowColor=t.arrowColor),!o.showArrow&&x(t.showArrow)&&(o.showArrow=t.showArrow),!o.closeButton&&x(t.closeButton)&&(o.closeButton=t.closeButton),o.closeAnywhere&&!x(t.closeAnywhere)&&(o.closeAnywhere=t.closeAnywhere),!o.focusBackdrop&&x(t.focusBackdrop)&&(o.focusBackdrop=t.focusBackdrop),!o.focusGlow&&x(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}();B.decorators=[{type:e.Component,args:[{selector:"ng-walkthrough-flow",template:""}]}],B.ctorParameters=function(){return[]},B.propDecorators={walkthroughComponents:[{type:e.ContentChildren,args:[F]}],id:[{type:e.Input}],contentStyle:[{type:e.Input}],arrowColor:[{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}]};var I=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t}();I.decorators=[{type:e.NgModule,args:[{declarations:[B,F,C],imports:[o.CommonModule,m],exports:[B,F,C],entryComponents:[C],providers:[k]}]}],I.ctorParameters=function(){return[]},t.booleanValue=x,t.WalkthroughComponent=F,t.throwWalkthroughContentAlreadyAttachedError=l,t.WalkthroughContainerComponent=C,t.WalkthroughModule=I,t.WalkthroughText=v,t.ɵb=B,t.ɵa=k,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=angular-walkthrough.umd.min.js.map |
@@ -1,4 +0,1 @@ | ||
| export * from './walkthrough.component'; | ||
| export * from './walkthrough-container.component'; | ||
| export * from './walkthrough.module'; | ||
| export * from './walkthrough-text'; | ||
| export * from './src'; |
| { | ||
| "name": "angular-walkthrough", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "Walkthrough, an Angular library", | ||
@@ -5,0 +5,0 @@ "baseUrl": "./", |
@@ -112,3 +112,3 @@ [](https://badge.fury.io/js/angular-walkthrough) [](https://www.npmjs.com/package/angular-walkthrough) [](https://raw.githubusercontent.com/Zefling/ng-walkthrough/master/LICENSE.md) | ||
| Example with a scenario with `ng-template`: | ||
| Example of scenario with `ng-walkthrough-flow`: | ||
@@ -144,3 +144,3 @@ ``` | ||
| For more examples see `example.component.html` in `examples` folder. | ||
| For more examples, see `example.component.html` in `examples` folder. | ||
@@ -147,0 +147,0 @@ ## License |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.52%
640460
- Number of package files
- increased by20%
24
- Lines of code
- increased by0.54%
5210
Worsened metrics
- Number of medium maintenance alerts
- increased byInfinity%
1
No dependency changes