hyper-angular
Version:
Components Angular Library
211 lines (196 loc) • 14.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('hyper-angular', ['exports', '@angular/core', '@angular/platform-browser', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["hyper-angular"] = {}, global.ng.core, global.ng.platformBrowser, global.ng.common));
})(this, (function (exports, i0, platformBrowser, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var StatusStep = /** @class */ (function () {
function StatusStep(params) {
this.nameStep = params.nameStep || '';
this.statusStep = params.statusStep || '';
}
return StatusStep;
}());
var StatusStepsComponent = /** @class */ (function () {
function StatusStepsComponent() {
}
StatusStepsComponent.prototype.ngOnInit = function () {
this.stepsForRenderizing = [];
this.countOfSteps = 0;
this.createSteps();
this.countOfSteps = this.stepsForRenderizing.length;
};
StatusStepsComponent.prototype.createSteps = function () {
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);
};
return StatusStepsComponent;
}());
StatusStepsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: StatusStepsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
StatusStepsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: StatusStepsComponent, selector: "hp-status-steps", ngImport: i0__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: StatusStepsComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'hp-status-steps',
templateUrl: './status-steps.component.html',
styleUrls: ['./status-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
var PagesStepsComponent = /** @class */ (function () {
function PagesStepsComponent() {
}
PagesStepsComponent.prototype.ngOnInit = function () {
};
return PagesStepsComponent;
}());
PagesStepsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: PagesStepsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
PagesStepsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: PagesStepsComponent, selector: "hp-pages-steps", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: PagesStepsComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'hp-pages-steps',
templateUrl: './pages-steps.component.html',
styleUrls: ['./pages-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
var ButtonsControlersStepsComponent = /** @class */ (function () {
function ButtonsControlersStepsComponent() {
}
ButtonsControlersStepsComponent.prototype.ngOnInit = function () {
};
return ButtonsControlersStepsComponent;
}());
ButtonsControlersStepsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: ButtonsControlersStepsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
ButtonsControlersStepsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: ButtonsControlersStepsComponent, selector: "hp-buttons-controlers-steps", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: ButtonsControlersStepsComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'hp-buttons-controlers-steps',
templateUrl: './buttons-controlers-steps.component.html',
styleUrls: ['./buttons-controlers-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
var HyperStepsComponent = /** @class */ (function () {
function HyperStepsComponent() {
}
HyperStepsComponent.prototype.ngOnInit = function () {
};
return HyperStepsComponent;
}());
HyperStepsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperStepsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
HyperStepsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: HyperStepsComponent, selector: "hp-steps", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperStepsComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'hp-steps',
templateUrl: './hyper-steps.component.html',
styleUrls: ['./hyper-steps.component.css']
}]
}], ctorParameters: function () { return []; } });
var HyperBadgesComponent = /** @class */ (function () {
function HyperBadgesComponent() {
}
HyperBadgesComponent.prototype.ngOnInit = function () {
};
return HyperBadgesComponent;
}());
HyperBadgesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperBadgesComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
HyperBadgesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.11", type: HyperBadgesComponent, selector: "hp-badge", inputs: { textBadge: "textBadge", typeBadge: "typeBadge" }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperBadgesComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'hp-badge',
templateUrl: './hyper-badges.component.html',
styleUrls: ['./hyper-badges.component.css']
}]
}], ctorParameters: function () { return []; }, propDecorators: { textBadge: [{
type: i0.Input
}], typeBadge: [{
type: i0.Input
}] } });
var HyperModule = /** @class */ (function () {
function HyperModule() {
}
return HyperModule;
}());
HyperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
HyperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperModule, declarations: [HyperStepsComponent,
StatusStepsComponent,
PagesStepsComponent,
ButtonsControlersStepsComponent,
HyperBadgesComponent], imports: [platformBrowser.BrowserModule], exports: [HyperStepsComponent, HyperBadgesComponent] });
HyperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperModule, imports: [[
platformBrowser.BrowserModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.11", ngImport: i0__namespace, type: HyperModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
HyperStepsComponent,
StatusStepsComponent,
PagesStepsComponent,
ButtonsControlersStepsComponent,
HyperBadgesComponent
],
imports: [
platformBrowser.BrowserModule
],
exports: [
HyperStepsComponent, HyperBadgesComponent
]
}]
}] });
/*
* Public API Surface of hyper
*/
/**
* Generated bundle index. Do not edit.
*/
exports.HyperBadgesComponent = HyperBadgesComponent;
exports.HyperModule = HyperModule;
exports.HyperStepsComponent = HyperStepsComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=hyper-angular.umd.js.map