ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
102 lines (97 loc) • 6.03 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';
class OStepsFormComponent extends AbstractStep {
constructor(setpsService) {
super(setpsService);
this.setpsService = setpsService;
this.stepsForm = [];
this.steps = [];
this.customClasses = '';
this.stopSteps = new EventEmitter();
this.onDestroy$ = new Subject();
}
get isLastStep() {
return this.stepsForm.indexOf(this.actualStep) === this.stepsForm.length - 1;
}
get nextStepName() {
const index = this.stepsForm.indexOf(this.actualStep);
return this.stepsForm[index + 1].name;
}
get currentStepNumber() {
return this.stepsForm.indexOf(this.actualStep) + 1;
}
ngOnInit() {
this.setpsService.getNext.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
this.nextStep();
});
this.setpsService.getPrevious.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
this.previousStep();
});
this.stepsForm = this.steps.map((step, index) => {
return {
name: step,
active: index === 0
};
});
this.actualStep = this.stepsForm[0];
}
previousStep() {
this.setpsService.isFirstStep.emit(false);
if (this.currentStepNumber === 1) {
this.setpsService.isFirstStep.emit(true);
return;
}
this.actualStep = this.stepsForm[this.stepsForm.indexOf(this.actualStep) - 1];
this.stepsForm[this.currentStepNumber].active = false;
}
nextStep() {
this.setpsService.isFirstStep.emit(false);
if (this.isLastStep) {
this.setpsService.stopEmmiter.emit(true);
this.stopSteps.emit(true);
this.setpsService.stop();
return;
}
this.actualStep = this.stepsForm[this.currentStepNumber];
this.actualStep.active = true;
}
ngOnDestroy() {
this.onDestroy$.next();
this.onDestroy$.complete();
}
}
OStepsFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OStepsFormComponent, deps: [{ token: i1.StepService }], target: i0.ɵɵFactoryTarget.Component });
OStepsFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OStepsFormComponent, selector: "o-steps-form", inputs: { steps: "steps", customClasses: "customClasses" }, outputs: { stopSteps: "stopSteps" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper\" [ngClass]=\"customClasses\">\r\n <h2 class=\"step-title\">{{ actualStep.name }}</h2>\r\n <p class=\"step-next\" *ngIf=\"!isLastStep; else lastStep\">Paso siguiente: {{ nextStepName }}</p>\r\n <ng-template #lastStep><p class=\"step-next\">Ultimo paso</p></ng-template>\r\n\r\n <div class=\"steps\">\r\n <div class=\"step\" [class.active]=\"step.active\" *ngFor=\"let step of stepsForm\"></div>\r\n </div>\r\n <span class=\"step-text\">Paso {{ currentStepNumber }} de {{ stepsForm.length }}</span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OStepsFormComponent, decorators: [{
type: Component,
args: [{ selector: 'o-steps-form', template: "<div class=\"stepper\" [ngClass]=\"customClasses\">\r\n <h2 class=\"step-title\">{{ actualStep.name }}</h2>\r\n <p class=\"step-next\" *ngIf=\"!isLastStep; else lastStep\">Paso siguiente: {{ nextStepName }}</p>\r\n <ng-template #lastStep><p class=\"step-next\">Ultimo paso</p></ng-template>\r\n\r\n <div class=\"steps\">\r\n <div class=\"step\" [class.active]=\"step.active\" *ngFor=\"let step of stepsForm\"></div>\r\n </div>\r\n <span class=\"step-text\">Paso {{ currentStepNumber }} de {{ stepsForm.length }}</span>\r\n</div>\r\n" }]
}], ctorParameters: function () { return [{ type: i1.StepService }]; }, propDecorators: { steps: [{
type: Input
}], customClasses: [{
type: Input
}], stopSteps: [{
type: Output
}] } });
class OStepsFormModule {
}
OStepsFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OStepsFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OStepsFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OStepsFormModule, declarations: [OStepsFormComponent], imports: [CommonModule], exports: [OStepsFormComponent] });
OStepsFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OStepsFormModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OStepsFormModule, decorators: [{
type: NgModule,
args: [{
declarations: [OStepsFormComponent],
imports: [CommonModule],
exports: [OStepsFormComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { OStepsFormComponent, OStepsFormModule };
//# sourceMappingURL=ngx-obelisco-example-steps-form.mjs.map