ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
103 lines (98 loc) • 5.64 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { AbstractStep } from 'ngx-obelisco-example/core/abstracts';
import * as i1 from 'ngx-obelisco-example/core/services';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
const MAX_WIDTH = 100;
const INICIAL_STEP = 0;
class OProgressBarComponent extends AbstractStep {
constructor(progressBarService) {
super(progressBarService);
this.progressBarService = progressBarService;
this.percentage = 0;
this.aux = 0;
this.type = 'info';
this.currentStep = 0;
this.totalSteps = 10;
this.customClasses = '';
this.stopSteps = new EventEmitter();
this.onDestroy$ = new Subject();
}
ngOnInit() {
this.progressBarService.getNext.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
this.nextStep();
});
this.progressBarService.getPrevious.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
this.previousStep();
});
this.aux = MAX_WIDTH / this.totalSteps;
for (let i = 0; i < this.currentStep; i++) {
this.percentage += this.aux;
}
}
previousStep() {
this.setpsService.isFirstStep.emit(false);
if (this.currentStep > INICIAL_STEP) {
this.percentage -= this.aux;
this.currentStep--;
}
if (this.currentStep === 0) {
this.setpsService.isFirstStep.emit(true);
return;
}
}
nextStep() {
this.setpsService.isFirstStep.emit(false);
if (this.currentStep < this.totalSteps) {
this.percentage += this.aux;
this.currentStep++;
}
if (this.currentStep === this.totalSteps) {
this.stopSteps.emit(true);
this.setpsService.stopEmmiter.emit(true);
this.progressBarService.stop();
}
}
ngOnDestroy() {
this.onDestroy$.next();
this.onDestroy$.complete();
}
}
OProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OProgressBarComponent, deps: [{ token: i1.StepService }], target: i0.ɵɵFactoryTarget.Component });
OProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OProgressBarComponent, selector: "o-progress-bar", inputs: { description: "description", type: "type", currentStep: "currentStep", totalSteps: "totalSteps", customClasses: "customClasses" }, outputs: { stopSteps: "stopSteps" }, usesInheritance: true, ngImport: i0, template: "<p class=\"steps\" *ngIf=\"description\">{{ description }}</p>\r\n<div class=\"progress\" [ngClass]=\"customClasses\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n [ngClass]=\"'bg-' + type\"\r\n [attr.aria-valuenow]=\"percentage | number\"\r\n [style.width.%]=\"percentage | number\"\r\n ></div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'o-progress-bar', template: "<p class=\"steps\" *ngIf=\"description\">{{ description }}</p>\r\n<div class=\"progress\" [ngClass]=\"customClasses\">\r\n <div\r\n class=\"progress-bar\"\r\n role=\"progressbar\"\r\n [ngClass]=\"'bg-' + type\"\r\n [attr.aria-valuenow]=\"percentage | number\"\r\n [style.width.%]=\"percentage | number\"\r\n ></div>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: i1.StepService }]; }, propDecorators: { description: [{
type: Input
}], type: [{
type: Input
}], currentStep: [{
type: Input
}], totalSteps: [{
type: Input
}], customClasses: [{
type: Input
}], stopSteps: [{
type: Output
}] } });
class OProgressBarModule {
}
OProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OProgressBarModule, declarations: [OProgressBarComponent], imports: [CommonModule], exports: [OProgressBarComponent] });
OProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OProgressBarModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OProgressBarModule, decorators: [{
type: NgModule,
args: [{
declarations: [OProgressBarComponent],
imports: [CommonModule],
exports: [OProgressBarComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OProgressBarComponent, OProgressBarModule };
//# sourceMappingURL=ngx-obelisco-example-progress-bar.mjs.map