ws-form-builder
Version:
Ionic 2 Form Builder
31 lines • 3.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var WsProgressBarComponent = (function () {
function WsProgressBarComponent() {
}
WsProgressBarComponent.prototype.isStepActive = function (i) {
if (i <= this.progressBarCurrent) {
return true;
}
else {
return false;
}
};
WsProgressBarComponent.decorators = [
{ type: core_1.Component, args: [{
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 "]
},] },
];
/** @nocollapse */
WsProgressBarComponent.ctorParameters = function () { return []; };
WsProgressBarComponent.propDecorators = {
"progressBarTotal": [{ type: core_1.Input, args: ['progressBarTotal',] },],
"progressBarCurrent": [{ type: core_1.Input, args: ['progressBarCurrent',] },],
};
return WsProgressBarComponent;
}());
exports.WsProgressBarComponent = WsProgressBarComponent;
//# sourceMappingURL=ws-progress-bar.js.map