ws-form-builder
Version:
Ionic 2 Form Builder
1 lines • 3.49 kB
JSON
[{"__symbolic":"module","version":4,"metadata":{"WsProgressBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ws-progress-bar","template":"\n <div class=\"ws-progress-bar-container\">\n <div class=\"ws-progress-bar progress-bar-count-{{progressBarTotal}}\">\n \t<div *ngFor=\"let step of ' '.repeat(progressBarTotal).split(''), let i = index\"class=\"ws-progress-bar__step\" [ngClass]=\"(isStepActive(i)) ? 'step-active' : ''\">\n\n\t\t\n \t\t<div class=\"step-inner\"><span class=\"active-indicator\" [ngClass]=\"(progressBarCurrent == i) ? 'show-indicator' : ''\">{{i+1}}</span></div>\n \t</div>\n </div>\n </div>\n ","styles":["\n .ws-progress-bar-container .ws-progress-bar{width:100%;display:block}.ws-progress-bar-container .ws-progress-bar .step-inner{position:absolute;left:2px;right:2px;background:#4a8bfc;height:7px;top:50%;width:0;opacity:0;-moz-transition:width 250ms;-o-transition:width 250ms;-webkit-transition:width 250ms;transition:width 250ms;margin-top:-3.5px;z-index:15}.ws-progress-bar-container .ws-progress-bar .step-inner .active-indicator{background-color:#4a8bfc;width:20px;height:20px;line-height:15px;display:inline-block;border:2px solid #fff;color:#fff;text-align:center;font-size:.9em;font-weight:bold;position:absolute;left:50%;margin-left:-10px;top:50%;margin-top:-10px;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-moz-transition:opacity 500ms 250ms;-o-transition:opacity 500ms 250ms;-webkit-transition:opacity 500ms 250ms;transition:opacity 500ms 250ms;opacity:0}.ws-progress-bar-container .ws-progress-bar__step{float:left;display:inline-block;position:relative}.ws-progress-bar-container .ws-progress-bar__step:before{content:'';position:absolute;left:2px;right:2px;background:#ddd;height:7px;top:50%;margin-top:-3.5px;z-index:10}.ws-progress-bar-container .ws-progress-bar__step.step-active .step-inner{opacity:1;width:calc(100% - 4px)}.ws-progress-bar-container .ws-progress-bar__step.step-active .show-indicator{opacity:1}.ws-progress-bar-container .progress-bar-count-2 .ws-progress-bar__step{width:calc(100% / 2);height:30px}.ws-progress-bar-container .progress-bar-count-3 .ws-progress-bar__step{width:calc(100% / 3);height:30px}.ws-progress-bar-container .progress-bar-count-4 .ws-progress-bar__step{width:calc(100% / 4);height:30px}.ws-progress-bar-container .progress-bar-count-5 .ws-progress-bar__step{width:calc(100% / 5);height:30px}.ws-progress-bar-container .progress-bar-count-6 .ws-progress-bar__step{width:calc(100% / 6);height:30px}.ws-progress-bar-container .progress-bar-count-7 .ws-progress-bar__step{width:calc(100% / 7);height:30px}.ws-progress-bar-container .progress-bar-count-8 .ws-progress-bar__step{width:calc(100% / 8);height:30px}.ws-progress-bar-container .progress-bar-count-9 .ws-progress-bar__step{width:calc(100% / 9);height:30px}\n "]}]}],"members":{"progressBarTotal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["progressBarTotal"]}]}],"progressBarCurrent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["progressBarCurrent"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"isStepActive":[{"__symbolic":"method"}]}}}}]