hyper-angular
Version:
Components Angular Library
169 lines (158 loc) • 11 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as i1 from '@angular/common';
class StatusStep {
constructor(params) {
this.nameStep = params.nameStep || '';
this.statusStep = params.statusStep || '';
}
}
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 []; } });
class PagesStepsComponent {
constructor() { }
ngOnInit() {
}
}
PagesStepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: PagesStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PagesStepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: PagesStepsComponent, selector: "hp-pages-steps", ngImport: i0, template: "<div class=\"container\">\n <img src=\"https://indylogix.com/wp-content/uploads/2020/10/hire-angular-developer-indylogix-solutions.png\" alt=\"\">\n</div>\n", styles: [".container{width:500px;margin-left:auto;margin-right:auto}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: PagesStepsComponent, decorators: [{
type: Component,
args: [{
selector: 'hp-pages-steps',
templateUrl: './pages-steps.component.html',
styleUrls: ['./pages-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
class ButtonsControlersStepsComponent {
constructor() { }
ngOnInit() {
}
}
ButtonsControlersStepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: ButtonsControlersStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonsControlersStepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: ButtonsControlersStepsComponent, selector: "hp-buttons-controlers-steps", ngImport: i0, template: "<div class=\"view-btns\">\n <button class=\"btn btn-prev\">Anterior</button>\n <button class=\"btn btn-next\">Pr\u00F3ximo</button>\n</div>\n\n", styles: [".view-btns{text-align:center;vertical-align:middle;line-height:60px;margin-top:100px}.btn{width:100px;height:35px;border:none;border-radius:5px;color:#fff;font-weight:bold;margin-right:7px}.btn:hover{cursor:pointer}.btn-prev{background-color:#eb981d}.btn-prev:hover{background-color:#c27f1a}.btn-next{background-color:#0696f7}.btn-next:hover{background-color:#0267aa}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: ButtonsControlersStepsComponent, decorators: [{
type: Component,
args: [{
selector: 'hp-buttons-controlers-steps',
templateUrl: './buttons-controlers-steps.component.html',
styleUrls: ['./buttons-controlers-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
class HyperStepsComponent {
constructor() { }
ngOnInit() {
}
}
HyperStepsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
HyperStepsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: HyperStepsComponent, selector: "hp-steps", ngImport: i0, template: "<hp-status-steps></hp-status-steps>\n<hp-pages-steps></hp-pages-steps>\n<hp-buttons-controlers-steps></hp-buttons-controlers-steps>\n", styles: [""], components: [{ type: StatusStepsComponent, selector: "hp-status-steps" }, { type: PagesStepsComponent, selector: "hp-pages-steps" }, { type: ButtonsControlersStepsComponent, selector: "hp-buttons-controlers-steps" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperStepsComponent, decorators: [{
type: Component,
args: [{
selector: 'hp-steps',
templateUrl: './hyper-steps.component.html',
styleUrls: ['./hyper-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
class HyperBadgesComponent {
constructor() { }
ngOnInit() {
}
}
HyperBadgesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperBadgesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
HyperBadgesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: HyperBadgesComponent, selector: "hp-badge", inputs: { textBadge: "textBadge", typeBadge: "typeBadge" }, ngImport: i0, template: "<div class=\"badge\">\n <div class=\"body-badge\" [ngClass]=\"typeBadge\">\n <label for=\"text-badge\">{{ textBadge }}</label>\n </div>\n</div>\n", styles: [".body-badge{padding:7px;background-color:#008cff;color:#fff;border-radius:5px;text-transform:uppercase;font-family:\"Segoe UI\",Tahoma,Geneva,Verdana,sans-serif;font-size:12px;font-weight:500;display:inline;margin-right:5px}.primary{background-color:#008cff}.danger{background-color:#e20f00}.info{background-color:#e4e4e4;color:#444}.caution{background-color:#e97f05;color:#fff}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperBadgesComponent, decorators: [{
type: Component,
args: [{
selector: 'hp-badge',
templateUrl: './hyper-badges.component.html',
styleUrls: ['./hyper-badges.component.css']
}]
}], ctorParameters: function () { return []; }, propDecorators: { textBadge: [{
type: Input
}], typeBadge: [{
type: Input
}] } });
class HyperModule {
}
HyperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
HyperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperModule, declarations: [HyperStepsComponent,
StatusStepsComponent,
PagesStepsComponent,
ButtonsControlersStepsComponent,
HyperBadgesComponent], imports: [BrowserModule], exports: [HyperStepsComponent, HyperBadgesComponent] });
HyperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperModule, imports: [[
BrowserModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0, type: HyperModule, decorators: [{
type: NgModule,
args: [{
declarations: [
HyperStepsComponent,
StatusStepsComponent,
PagesStepsComponent,
ButtonsControlersStepsComponent,
HyperBadgesComponent
],
imports: [
BrowserModule
],
exports: [
HyperStepsComponent, HyperBadgesComponent
]
}]
}] });
/*
* Public API Surface of hyper
*/
/**
* Generated bundle index. Do not edit.
*/
export { HyperBadgesComponent, HyperModule, HyperStepsComponent };
//# sourceMappingURL=hyper-angular.js.map