ws-form-builder/src-inlined/components/ws-progress-bar/ws-progress-bar.ts

Ionic 2 Form Builder

import { Component, Input } from '@angular/core';


@Component({
  selector: 'ws-progress-bar',
  template: `
    <div class="ws-progress-bar-container">
    <div class="ws-progress-bar progress-bar-count-{{progressBarTotal}}">
    	<div *ngFor="let step of ' '.repeat(progressBarTotal).split(''), let i = index"class="ws-progress-bar__step" [ngClass]="(isStepActive(i)) ? 'step-active' : ''">

		
    		<div class="step-inner"><span class="active-indicator" [ngClass]="(progressBarCurrent == i) ? 'show-indicator' : ''">{{i+1}}</span></div>
    	</div>
    </div>
    </div>
  `,
  styles: [`
    .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}
  `]
})
export class WsProgressBarComponent {

  	@Input('progressBarTotal') progressBarTotal;
  	@Input('progressBarCurrent') progressBarCurrent;




  constructor() {
    

  }

  isStepActive(i){
  		if(i <= this.progressBarCurrent){
  			return true;
  		}else{
  			return false;
  		}
  }


}