angular-wizard-form
Version:
<!-- [](https://badge.fury.io/js/angular2-wizard) --> <!-- [](https://travis-ci.org/maiyaporn/angular2-wizard) --
4 lines (3 loc) • 14.9 kB
JSON
{
"/Users/brunocau/project/digibee/angular-wizard-form/src/wizard-step.component.ts":{"path":"/Users/brunocau/project/digibee/angular-wizard-form/src/wizard-step.component.ts","statementMap":{"1":{"start":{"line":1,"column":0},"end":{"line":1,"column":70}},"2":{"start":{"line":12,"column":0},"end":{"line":38,"column":0}},"3":{"start":{"line":14,"column":11},"end":{"line":14,"column":26}},"4":{"start":{"line":15,"column":11},"end":{"line":15,"column":26}},"5":{"start":{"line":16,"column":11},"end":{"line":16,"column":27}},"6":{"start":{"line":17,"column":11},"end":{"line":17,"column":27}},"7":{"start":{"line":19,"column":12},"end":{"line":19,"column":64}},"8":{"start":{"line":20,"column":12},"end":{"line":20,"column":64}},"9":{"start":{"line":21,"column":12},"end":{"line":21,"column":68}},"10":{"start":{"line":23,"column":10},"end":{"line":23,"column":28}},"11":{"start":{"line":24,"column":2},"end":{"line":24,"column":20}},"12":{"start":{"line":29,"column":2},"end":{"line":32,"column":3}},"13":{"start":{"line":35,"column":4},"end":{"line":35,"column":26}},"14":{"start":{"line":30,"column":4},"end":{"line":30,"column":30}},"15":{"start":{"line":31,"column":4},"end":{"line":31,"column":28}},"16":{"start":{"line":13,"column":11},"end":{"line":13,"column":25}},"17":{"start":{"line":12,"column":13},"end":{"line":38,"column":1}},"18":{"start":{"line":38,"column":0},"end":{"line":38,"column":1}},"19":{"start":{"line":12,"column":13},"end":{"line":12,"column":32}}},"fnMap":{"1":{"name":"(anonymous_2)","line":12,"loc":{"start":{"line":12,"column":0},"end":{"line":12,"column":-1}}},"2":{"name":"WizardStepComponent","line":26,"loc":{"start":{"line":26,"column":2},"end":{"line":26,"column":19}}},"3":{"name":"(anonymous_4)","line":34,"loc":{"start":{"line":34,"column":2},"end":{"line":36,"column":3}}},"4":{"name":"(anonymous_5)","line":29,"loc":{"start":{"line":29,"column":32},"end":{"line":32,"column":3}}}},"branchMap":{},"s":{"1":1,"2":1,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":1,"11":1,"12":2,"13":2,"14":0,"15":0,"16":1,"17":1,"18":1,"19":1},"b":{},"f":{"1":1,"2":1,"3":2,"4":0},"code":"import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'wizard-step',\n template:\n `\n <div [hidden]=\"!isActive\">\n <ng-content></ng-content>\n </div>\n `\n})\nexport class WizardStepComponent {\n @Input() title: string;\n @Input() hidden = false;\n @Input() isValid = true;\n @Input() showNext = true;\n @Input() showPrev = true;\n\n @Output() onNext: EventEmitter<any> = new EventEmitter<any>();\n @Output() onPrev: EventEmitter<any> = new EventEmitter<any>();\n @Output() onComplete: EventEmitter<any> = new EventEmitter<any>();\n\n private _isActive = false;\n isDisabled = true;\n\n constructor() { }\n\n @Input('isActive')\n set isActive(isActive: boolean) {\n this._isActive = isActive;\n this.isDisabled = false;\n }\n\n get isActive(): boolean {\n return this._isActive;\n }\n\n}\n","l":{"1":1,"12":1,"13":1,"14":2,"15":2,"16":2,"17":2,"19":2,"20":2,"21":2,"23":1,"24":1,"29":2,"30":0,"31":0,"35":2,"38":1}},
"/Users/brunocau/project/digibee/angular-wizard-form/src/wizard.component.ts":{"path":"/Users/brunocau/project/digibee/angular-wizard-form/src/wizard.component.ts","statementMap":{"1":{"start":{"line":1,"column":0},"end":{"line":1,"column":116}},"2":{"start":{"line":2,"column":0},"end":{"line":2,"column":61}},"3":{"start":{"line":54,"column":0},"end":{"line":140,"column":0}},"4":{"start":{"line":58,"column":2},"end":{"line":58,"column":30}},"5":{"start":{"line":61,"column":2},"end":{"line":61,"column":22}},"6":{"start":{"line":64,"column":2},"end":{"line":64,"column":22}},"7":{"start":{"line":66,"column":10},"end":{"line":66,"column":50}},"8":{"start":{"line":67,"column":10},"end":{"line":67,"column":31}},"9":{"start":{"line":70,"column":2},"end":{"line":70,"column":93}},"10":{"start":{"line":74,"column":2},"end":{"line":77,"column":3}},"11":{"start":{"line":74,"column":2},"end":{"line":77,"column":2}},"12":{"start":{"line":75,"column":4},"end":{"line":75,"column":61}},"13":{"start":{"line":75,"column":37},"end":{"line":75,"column":59}},"14":{"start":{"line":76,"column":4},"end":{"line":76,"column":34}},"15":{"start":{"line":79,"column":2},"end":{"line":81,"column":3}},"16":{"start":{"line":80,"column":4},"end":{"line":80,"column":52}},"17":{"start":{"line":80,"column":38},"end":{"line":80,"column":50}},"18":{"start":{"line":83,"column":2},"end":{"line":85,"column":3}},"19":{"start":{"line":84,"column":4},"end":{"line":84,"column":29}},"20":{"start":{"line":87,"column":2},"end":{"line":89,"column":3}},"21":{"start":{"line":88,"column":4},"end":{"line":88,"column":50}},"22":{"start":{"line":88,"column":35},"end":{"line":88,"column":48}},"23":{"start":{"line":92,"column":4},"end":{"line":96,"column":5}},"24":{"start":{"line":93,"column":6},"end":{"line":93,"column":39}},"25":{"start":{"line":94,"column":6},"end":{"line":94,"column":27}},"26":{"start":{"line":95,"column":6},"end":{"line":95,"column":36}},"27":{"start":{"line":99,"column":2},"end":{"line":101,"column":3}},"28":{"start":{"line":100,"column":4},"end":{"line":100,"column":47}},"29":{"start":{"line":103,"column":2},"end":{"line":105,"column":3}},"30":{"start":{"line":104,"column":4},"end":{"line":104,"column":56}},"31":{"start":{"line":107,"column":2},"end":{"line":109,"column":3}},"32":{"start":{"line":108,"column":4},"end":{"line":108,"column":36}},"33":{"start":{"line":111,"column":9},"end":{"line":115,"column":3}},"34":{"start":{"line":112,"column":4},"end":{"line":114,"column":5}},"35":{"start":{"line":113,"column":6},"end":{"line":113,"column":29}},"36":{"start":{"line":117,"column":9},"end":{"line":124,"column":3}},"37":{"start":{"line":118,"column":4},"end":{"line":123,"column":5}},"38":{"start":{"line":119,"column":42},"end":{"line":119,"column":78}},"39":{"start":{"line":120,"column":6},"end":{"line":120,"column":36}},"40":{"start":{"line":121,"column":6},"end":{"line":121,"column":34}},"41":{"start":{"line":122,"column":6},"end":{"line":122,"column":33}},"42":{"start":{"line":126,"column":9},"end":{"line":133,"column":3}},"43":{"start":{"line":127,"column":4},"end":{"line":132,"column":5}},"44":{"start":{"line":128,"column":42},"end":{"line":128,"column":78}},"45":{"start":{"line":129,"column":6},"end":{"line":129,"column":36}},"46":{"start":{"line":130,"column":6},"end":{"line":130,"column":34}},"47":{"start":{"line":131,"column":6},"end":{"line":131,"column":33}},"48":{"start":{"line":135,"column":9},"end":{"line":138,"column":3}},"49":{"start":{"line":136,"column":4},"end":{"line":136,"column":38}},"50":{"start":{"line":137,"column":4},"end":{"line":137,"column":29}},"51":{"start":{"line":56,"column":2},"end":{"line":56,"column":46}},"52":{"start":{"line":54,"column":13},"end":{"line":140,"column":1}},"53":{"start":{"line":140,"column":0},"end":{"line":140,"column":1}},"54":{"start":{"line":54,"column":13},"end":{"line":54,"column":28}}},"fnMap":{"1":{"name":"(anonymous_2)","line":54,"loc":{"start":{"line":54,"column":0},"end":{"line":54,"column":-1}}},"2":{"name":"WizardComponent","line":72,"loc":{"start":{"line":72,"column":2},"end":{"line":72,"column":19}}},"3":{"name":"(anonymous_4)","line":74,"loc":{"start":{"line":74,"column":2},"end":{"line":77,"column":3}}},"4":{"name":"(anonymous_5)","line":75,"loc":{"start":{"line":75,"column":33},"end":{"line":75,"column":59}}},"5":{"name":"(anonymous_6)","line":79,"loc":{"start":{"line":79,"column":2},"end":{"line":81,"column":3}}},"6":{"name":"(anonymous_7)","line":80,"loc":{"start":{"line":80,"column":34},"end":{"line":80,"column":50}}},"7":{"name":"(anonymous_8)","line":83,"loc":{"start":{"line":83,"column":2},"end":{"line":85,"column":3}}},"8":{"name":"(anonymous_9)","line":87,"loc":{"start":{"line":87,"column":2},"end":{"line":89,"column":3}}},"9":{"name":"(anonymous_10)","line":88,"loc":{"start":{"line":88,"column":31},"end":{"line":88,"column":48}}},"10":{"name":"(anonymous_11)","line":91,"loc":{"start":{"line":91,"column":42},"end":{"line":97,"column":3}}},"11":{"name":"(anonymous_12)","line":99,"loc":{"start":{"line":99,"column":2},"end":{"line":101,"column":3}}},"12":{"name":"(anonymous_13)","line":103,"loc":{"start":{"line":103,"column":2},"end":{"line":105,"column":3}}},"13":{"name":"(anonymous_14)","line":107,"loc":{"start":{"line":107,"column":2},"end":{"line":109,"column":3}}},"14":{"name":"(anonymous_15)","line":111,"loc":{"start":{"line":111,"column":43},"end":{"line":115,"column":3}}},"15":{"name":"(anonymous_16)","line":117,"loc":{"start":{"line":117,"column":2},"end":{"line":124,"column":3}}},"16":{"name":"(anonymous_17)","line":126,"loc":{"start":{"line":126,"column":2},"end":{"line":133,"column":3}}},"17":{"name":"(anonymous_18)","line":135,"loc":{"start":{"line":135,"column":2},"end":{"line":138,"column":3}}}},"branchMap":{"1":{"line":92,"type":"if","locations":[{"start":{"line":92,"column":4},"end":{"line":96,"column":5}},{"start":{"line":92,"column":4},"end":{"line":96,"column":5}}]},"2":{"line":92,"type":"binary-expr","locations":[{"start":{"line":92,"column":8},"end":{"line":92,"column":32}},{"start":{"line":92,"column":36},"end":{"line":92,"column":52}}]},"3":{"line":112,"type":"if","locations":[{"start":{"line":112,"column":4},"end":{"line":114,"column":5}},{"start":{"line":112,"column":4},"end":{"line":114,"column":5}}]},"4":{"line":118,"type":"if","locations":[{"start":{"line":118,"column":4},"end":{"line":123,"column":5}},{"start":{"line":118,"column":4},"end":{"line":123,"column":5}}]},"5":{"line":127,"type":"if","locations":[{"start":{"line":127,"column":4},"end":{"line":132,"column":5}},{"start":{"line":127,"column":4},"end":{"line":132,"column":5}}]}},"s":{"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":0,"8":0,"9":1,"10":1,"11":0,"12":0,"13":0,"14":0,"15":1,"16":0,"17":0,"18":1,"19":0,"20":1,"21":0,"22":0,"23":0,"24":0,"25":0,"26":0,"27":1,"28":0,"29":1,"30":0,"31":1,"32":0,"33":1,"34":0,"35":0,"36":1,"37":0,"38":0,"39":0,"40":0,"41":0,"42":1,"43":0,"44":0,"45":0,"46":0,"47":0,"48":1,"49":0,"50":0,"51":1,"52":1,"53":1,"54":1},"b":{"1":[0,0],"2":[0,0],"3":[0,0],"4":[0,0],"5":[0,0]},"f":{"1":1,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0,"13":0,"14":0,"15":0,"16":0,"17":0},"code":"import { Component, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit, Input } from '@angular/core';\nimport { WizardStepComponent } from './wizard-step.component';\n\n@Component({\n selector: 'form-wizard',\n template:\n `<div class=\"card\">\n <div class=\"card-header\">\n <ul class=\"nav nav-justified\">\n <li class=\"nav-item\"\n *ngFor=\"let step of steps\"\n [ngClass]=\"{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}\">\n <a (click)=\"goToStep(step)\">{{step.title}}</a>\n </li>\n </ul>\n </div>\n <div class=\"card-block\">\n <ng-content></ng-content>\n </div>\n <div class=\"card-footer\" [hidden]=\"isCompleted\">\n <button\n type=\"button\"\n class=\"btn btn-secondary float-left\"\n (click)=\"previous()\"\n [hidden]=\"!hasPrevStep || !activeStep.showPrev\">{{txtBtnPrevious}}</button>\n <button\n type=\"button\"\n class=\"btn btn-secondary float-right\"\n (click)=\"next()\"\n [disabled]=\"!activeStep.isValid\"\n [hidden]=\"!hasNextStep || !activeStep.showNext\">{{txtBtnNext}}</button>\n\n <button\n type=\"button\"\n class=\"btn btn-secondary float-right\"\n (click)=\"complete()\"\n [disabled]=\"!activeStep.isValid\"\n [hidden]=\"hasNextStep\">{{txtBtnDone}}</button>\n </div>\n </div>`\n ,\n styles: [\n '.card { height: 100%; }',\n '.card-header { background-color: #fff; padding: 0; font-size: 1.25rem; }',\n '.card-block { overflow-y: auto; }',\n '.card-footer { background-color: #fff; border-top: 0 none; }',\n '.nav-item { padding: 1rem 0rem; border-bottom: 0.5rem solid #ccc; }',\n '.active { font-weight: bold; color: black; border-bottom-color: #1976D2 !important; }',\n '.enabled { cursor: pointer; border-bottom-color: rgb(88, 162, 234); }',\n '.disabled { color: #ccc; }',\n '.completed { cursor: default; }'\n ]\n})\nexport class WizardComponent implements AfterContentInit {\n @ContentChildren(WizardStepComponent)\n wizardSteps: QueryList<WizardStepComponent>;\n @Input()\n txtBtnPrevious = 'Previous';\n\n @Input()\n txtBtnNext = 'Next';\n\n @Input()\n txtBtnDone = 'Done';\n\n private _steps: Array<WizardStepComponent> = [];\n private _isCompleted = false;\n\n @Output()\n onStepChanged: EventEmitter<WizardStepComponent> = new EventEmitter<WizardStepComponent>();\n\n constructor() { }\n\n ngAfterContentInit() {\n this.wizardSteps.forEach(step => this._steps.push(step));\n this.steps[0].isActive = true;\n }\n\n get steps(): Array<WizardStepComponent> {\n return this._steps.filter(step => !step.hidden);\n }\n\n get isCompleted(): boolean {\n return this._isCompleted;\n }\n\n get activeStep(): WizardStepComponent {\n return this.steps.find(step => step.isActive);\n }\n\n set activeStep(step: WizardStepComponent) {\n if (step !== this.activeStep && !step.isDisabled) {\n this.activeStep.isActive = false;\n step.isActive = true;\n this.onStepChanged.emit(step);\n }\n }\n\n public get activeStepIndex(): number {\n return this.steps.indexOf(this.activeStep);\n }\n\n get hasNextStep(): boolean {\n return this.activeStepIndex < this.steps.length - 1;\n }\n\n get hasPrevStep(): boolean {\n return this.activeStepIndex > 0;\n }\n\n public goToStep(step: WizardStepComponent): void {\n if (!this.isCompleted) {\n this.activeStep = step;\n }\n }\n\n public next(): void {\n if (this.hasNextStep) {\n let nextStep: WizardStepComponent = this.steps[this.activeStepIndex + 1];\n this.activeStep.onNext.emit();\n nextStep.isDisabled = false;\n this.activeStep = nextStep;\n }\n }\n\n public previous(): void {\n if (this.hasPrevStep) {\n let prevStep: WizardStepComponent = this.steps[this.activeStepIndex - 1];\n this.activeStep.onPrev.emit();\n prevStep.isDisabled = false;\n this.activeStep = prevStep;\n }\n }\n\n public complete(): void {\n this.activeStep.onComplete.emit();\n this._isCompleted = true;\n }\n\n}\n","l":{"1":1,"2":1,"54":1,"56":1,"58":1,"61":1,"64":1,"66":0,"67":0,"70":1,"74":1,"75":0,"76":0,"79":1,"80":0,"83":1,"84":0,"87":1,"88":0,"92":0,"93":0,"94":0,"95":0,"99":1,"100":0,"103":1,"104":0,"107":1,"108":0,"111":1,"112":0,"113":0,"117":1,"118":0,"119":0,"120":0,"121":0,"122":0,"126":1,"127":0,"128":0,"129":0,"130":0,"131":0,"135":1,"136":0,"137":0,"140":1}}}