hyper-angular
Version:
Components Angular Library
52 lines • 8.28 kB
JavaScript
import { Component } from '@angular/core';
import { StatusStep } from '../../models/status-steps/status-step';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class StatusStepsComponent {
constructor() { }
ngOnInit() {
this.stepsForRenderizing = [];
this.countOfSteps = 0;
this.createSteps();
this.countOfSteps = this.stepsForRenderizing.length;
}
createSteps() {
var step = new StatusStep({
nameStep: "Step 1",
statusStep: "step-ok"
});
var step2 = new StatusStep({
nameStep: "Step 2",
statusStep: "step-ok"
});
var step3 = new StatusStep({
nameStep: "Step 3",
statusStep: "step-on"
});
var step4 = new StatusStep({
nameStep: "Step 4",
statusStep: "step-none"
});
var step5 = new StatusStep({
nameStep: "Step 5",
statusStep: "step-none"
});
this.stepsForRenderizing.push(step);
this.stepsForRenderizing.push(step2);
this.stepsForRenderizing.push(step3);
this.stepsForRenderizing.push(step4);
this.stepsForRenderizing.push(step5);
console.log(this.stepsForRenderizing);
}
}
StatusStepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: StatusStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
StatusStepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: StatusStepsComponent, selector: "hp-status-steps", ngImport: i0, template: "<div class=\"status-steps\">\n <ng-container *ngFor=\"let item of stepsForRenderizing; index as i\">\n <div class=\"step\">\n <div class=\"cirulo-progress\">\n <div class=\"progress-step\" *ngIf=\"i !== 0\" [ngClass]=\"item.statusStep\"></div>\n <div class=\"circle-step\" [ngClass]=\"item.statusStep\">\n <label for=\"step-number\" class=\"step-number\">{{ i + 1 }}</label>\n </div>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".status-steps{display:flex;width:900px;margin-left:auto;margin-right:auto;margin-top:50px}.cirulo-progress{display:flex}.circle-step{background-color:#b4b4b4;width:60px;height:60px;border-radius:50%;text-align:center;vertical-align:middle;line-height:60px}.step-number{color:#fff;font-size:20px;font-weight:bold;font-family:Arial,Helvetica,sans-serif}.progress-step{height:7px;width:150px;background-color:#d4d4d4;margin-top:29px}.infos{font-size:14px;text-align:center}.step-none{background-color:#b4b4b4}.step-on{background-color:#158eff}.step-ok{background-color:#10cf59}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: StatusStepsComponent, decorators: [{
type: Component,
args: [{
selector: 'hp-status-steps',
templateUrl: './status-steps.component.html',
styleUrls: ['./status-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLXN0ZXBzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2h5cGVyL3NyYy9saWIvaHlwZXItc3RlcHMvY29tcG9uZW50cy9zdGF0dXMtc3RlcHMvc3RhdHVzLXN0ZXBzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2h5cGVyL3NyYy9saWIvaHlwZXItc3RlcHMvY29tcG9uZW50cy9zdGF0dXMtc3RlcHMvc3RhdHVzLXN0ZXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7QUFPbkUsTUFBTSxPQUFPLG9CQUFvQjtJQUsvQixnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLG1CQUFtQixHQUFHLEVBQUUsQ0FBQztRQUU5QixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztRQUV0QixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFbkIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsTUFBTSxDQUFDO0lBQ3RELENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksSUFBSSxHQUFHLElBQUksVUFBVSxDQUFDO1lBQ3hCLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLFVBQVUsRUFBRSxTQUFTO1NBQ3RCLENBQUMsQ0FBQTtRQUVGLElBQUksS0FBSyxHQUFHLElBQUksVUFBVSxDQUFDO1lBQ3pCLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLFVBQVUsRUFBRSxTQUFTO1NBQ3RCLENBQUMsQ0FBQTtRQUVGLElBQUksS0FBSyxHQUFHLElBQUksVUFBVSxDQUFDO1lBQ3pCLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLFVBQVUsRUFBRSxTQUFTO1NBQ3RCLENBQUMsQ0FBQTtRQUVGLElBQUksS0FBSyxHQUFHLElBQUksVUFBVSxDQUFDO1lBQ3pCLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLFVBQVUsRUFBRSxXQUFXO1NBQ3hCLENBQUMsQ0FBQTtRQUVGLElBQUksS0FBSyxHQUFHLElBQUksVUFBVSxDQUFDO1lBQ3pCLFFBQVEsRUFBRSxRQUFRO1lBQ2xCLFVBQVUsRUFBRSxXQUFXO1NBQ3hCLENBQUMsQ0FBQTtRQUVGLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDcEMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFBO0lBQ3ZDLENBQUM7O2tIQWpEVSxvQkFBb0I7c0dBQXBCLG9CQUFvQix1RENSakMsZ2VBWUE7NEZESmEsb0JBQW9CO2tCQUxoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLFdBQVcsRUFBRSwrQkFBK0I7b0JBQzVDLFNBQVMsRUFBRSxDQUFDLDhCQUE4QixDQUFDO2lCQUM1QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdGF0dXNTdGVwIH0gZnJvbSAnLi4vLi4vbW9kZWxzL3N0YXR1cy1zdGVwcy9zdGF0dXMtc3RlcCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2hwLXN0YXR1cy1zdGVwcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGF0dXMtc3RlcHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdGF0dXMtc3RlcHMuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIFN0YXR1c1N0ZXBzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBwdWJsaWMgc3RlcHNGb3JSZW5kZXJpemluZzogQXJyYXk8U3RhdHVzU3RlcD47XG4gIHB1YmxpYyBjb3VudE9mU3RlcHM6IG51bWJlcjtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc3RlcHNGb3JSZW5kZXJpemluZyA9IFtdO1xuXG4gICAgdGhpcy5jb3VudE9mU3RlcHMgPSAwO1xuXG4gICAgdGhpcy5jcmVhdGVTdGVwcygpO1xuXG4gICAgdGhpcy5jb3VudE9mU3RlcHMgPSB0aGlzLnN0ZXBzRm9yUmVuZGVyaXppbmcubGVuZ3RoO1xuICB9XG5cbiAgcHVibGljIGNyZWF0ZVN0ZXBzKCkge1xuICAgIHZhciBzdGVwID0gbmV3IFN0YXR1c1N0ZXAoe1xuICAgICAgbmFtZVN0ZXA6IFwiU3RlcCAxXCIsXG4gICAgICBzdGF0dXNTdGVwOiBcInN0ZXAtb2tcIlxuICAgIH0pXG5cbiAgICB2YXIgc3RlcDIgPSBuZXcgU3RhdHVzU3RlcCh7XG4gICAgICBuYW1lU3RlcDogXCJTdGVwIDJcIixcbiAgICAgIHN0YXR1c1N0ZXA6IFwic3RlcC1va1wiXG4gICAgfSlcblxuICAgIHZhciBzdGVwMyA9IG5ldyBTdGF0dXNTdGVwKHtcbiAgICAgIG5hbWVTdGVwOiBcIlN0ZXAgM1wiLFxuICAgICAgc3RhdHVzU3RlcDogXCJzdGVwLW9uXCJcbiAgICB9KVxuXG4gICAgdmFyIHN0ZXA0ID0gbmV3IFN0YXR1c1N0ZXAoe1xuICAgICAgbmFtZVN0ZXA6IFwiU3RlcCA0XCIsXG4gICAgICBzdGF0dXNTdGVwOiBcInN0ZXAtbm9uZVwiXG4gICAgfSlcblxuICAgIHZhciBzdGVwNSA9IG5ldyBTdGF0dXNTdGVwKHtcbiAgICAgIG5hbWVTdGVwOiBcIlN0ZXAgNVwiLFxuICAgICAgc3RhdHVzU3RlcDogXCJzdGVwLW5vbmVcIlxuICAgIH0pXG5cbiAgICB0aGlzLnN0ZXBzRm9yUmVuZGVyaXppbmcucHVzaChzdGVwKTtcbiAgICB0aGlzLnN0ZXBzRm9yUmVuZGVyaXppbmcucHVzaChzdGVwMik7XG4gICAgdGhpcy5zdGVwc0ZvclJlbmRlcml6aW5nLnB1c2goc3RlcDMpO1xuICAgIHRoaXMuc3RlcHNGb3JSZW5kZXJpemluZy5wdXNoKHN0ZXA0KTtcbiAgICB0aGlzLnN0ZXBzRm9yUmVuZGVyaXppbmcucHVzaChzdGVwNSk7XG4gICAgY29uc29sZS5sb2codGhpcy5zdGVwc0ZvclJlbmRlcml6aW5nKVxuICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJzdGF0dXMtc3RlcHNcIj5cbiAgPG5nLWNvbnRhaW5lciAgKm5nRm9yPVwibGV0IGl0ZW0gb2Ygc3RlcHNGb3JSZW5kZXJpemluZzsgaW5kZXggYXMgaVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzdGVwXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2lydWxvLXByb2dyZXNzXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1zdGVwXCIgKm5nSWY9XCJpICE9PSAwXCIgW25nQ2xhc3NdPVwiaXRlbS5zdGF0dXNTdGVwXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjaXJjbGUtc3RlcFwiIFtuZ0NsYXNzXT1cIml0ZW0uc3RhdHVzU3RlcFwiPlxuICAgICAgICAgIDxsYWJlbCBmb3I9XCJzdGVwLW51bWJlclwiIGNsYXNzPVwic3RlcC1udW1iZXJcIj57eyBpICsgMSB9fTwvbGFiZWw+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG4iXX0=