ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
79 lines • 13 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { AbstractStep } from 'ngx-obelisco-example/core/abstracts';
import * as i0 from "@angular/core";
import * as i1 from "ngx-obelisco-example/core/services";
import * as i2 from "@angular/common";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1zdGVwcy1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1vYmVsaXNjby9zdGVwcy1mb3JtL28tc3RlcHMtZm9ybS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vc3RlcHMtZm9ybS9vLXN0ZXBzLWZvcm0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUYsT0FBTyxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDMUMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7O0FBU25FLE1BQU0sT0FBTyxtQkFBb0IsU0FBUSxZQUFZO0lBd0JuRCxZQUF3QyxZQUF5QjtRQUMvRCxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7UUFEa0IsaUJBQVksR0FBWixZQUFZLENBQWE7UUF0QjFELGNBQVMsR0FBZSxFQUFFLENBQUM7UUFFbEIsVUFBSyxHQUFhLEVBQUUsQ0FBQztRQUNyQixrQkFBYSxHQUFXLEVBQUUsQ0FBQztRQUVqQixjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUUxRCxlQUFVLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztJQWlCekMsQ0FBQztJQWZELElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUMvRSxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUs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LE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU3ViamVjdCwgdGFrZVVudGlsIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IEFic3RyYWN0U3RlcCB9IGZyb20gJ25neC1vYmVsaXNjby1leGFtcGxlL2NvcmUvYWJzdHJhY3RzJztcclxuaW1wb3J0IHsgU3RlcEZvcm0gfSBmcm9tICduZ3gtb2JlbGlzY28tZXhhbXBsZS9jb3JlL21vZGVscyc7XHJcbmltcG9ydCB7IFN0ZXBTZXJ2aWNlIH0gZnJvbSAnbmd4LW9iZWxpc2NvLWV4YW1wbGUvY29yZS9zZXJ2aWNlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ28tc3RlcHMtZm9ybScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL28tc3RlcHMtZm9ybS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vby1zdGVwcy1mb3JtLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIE9TdGVwc0Zvcm1Db21wb25lbnQgZXh0ZW5kcyBBYnN0cmFjdFN0ZXAgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcbiAgcHVibGljIGFjdHVhbFN0ZXAhOiBTdGVwRm9ybTtcclxuICBwdWJsaWMgc3RlcHNGb3JtOiBTdGVwRm9ybVtdID0gW107XHJcblxyXG4gIEBJbnB1dCgpIHB1YmxpYyBzdGVwczogc3RyaW5nW10gPSBbXTtcclxuICBASW5wdXQoKSBwdWJsaWMgY3VzdG9tQ2xhc3Nlczogc3RyaW5nID0gJyc7XHJcblxyXG4gIEBPdXRwdXQoKSBwdWJsaWMgb3ZlcnJpZGUgc3RvcFN0ZXBzID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG5cclxuICBwcml2YXRlIG9uRGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xyXG5cclxuICBnZXQgaXNMYXN0U3RlcCgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLnN0ZXBzRm9ybS5pbmRleE9mKHRoaXMuYWN0dWFsU3RlcCkgPT09IHRoaXMuc3RlcHNGb3JtLmxlbmd0aCAtIDE7XHJcbiAgfVxyXG5cclxuICBnZXQgbmV4dFN0ZXBOYW1lKCk6IHN0cmluZyB7XHJcbiAgICBjb25zdCBpbmRleCA9IHRoaXMuc3RlcHNGb3JtLmluZGV4T2YodGhpcy5hY3R1YWxTdGVwKTtcclxuICAgIHJldHVybiB0aGlzLnN0ZXBzRm9ybVtpbmRleCArIDFdLm5hbWU7XHJcbiAgfVxyXG5cclxuICBnZXQgY3VycmVudFN0ZXBOdW1iZXIoKTogbnVtYmVyIHtcclxuICAgIHJldHVybiB0aGlzLnN0ZXBzRm9ybS5pbmRleE9mKHRoaXMuYWN0dWFsU3RlcCkgKyAxO1xyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIG92ZXJyaWRlIHJlYWRvbmx5IHNldHBzU2VydmljZTogU3RlcFNlcnZpY2UpIHtcclxuICAgIHN1cGVyKHNldHBzU2VydmljZSk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNldHBzU2VydmljZS5nZXROZXh0LnBpcGUodGFrZVVudGlsKHRoaXMub25EZXN0cm95JCkpLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgIHRoaXMubmV4dFN0ZXAoKTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMuc2V0cHNTZXJ2aWNlLmdldFByZXZpb3VzLnBpcGUodGFrZVVudGlsKHRoaXMub25EZXN0cm95JCkpLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgIHRoaXMucHJldmlvdXNTdGVwKCk7XHJcbiAgICB9KTtcclxuXHJcbiAgICB0aGlzLnN0ZXBzRm9ybSA9IHRoaXMuc3RlcHMubWFwKChzdGVwLCBpbmRleCkgPT4ge1xyXG4gICAgICByZXR1cm4ge1xyXG4gICAgICAgIG5hbWU6IHN0ZXAsXHJcbiAgICAgICAgYWN0aXZlOiBpbmRleCA9PT0gMFxyXG4gICAgICB9O1xyXG4gICAgfSk7XHJcbiAgICB0aGlzLmFjdHVhbFN0ZXAgPSB0aGlzLnN0ZXBzRm9ybVswXTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBwcmV2aW91c1N0ZXAoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNldHBzU2VydmljZS5pc0ZpcnN0U3RlcC5lbWl0KGZhbHNlKTtcclxuXHJcbiAgICBpZiAodGhpcy5jdXJyZW50U3RlcE51bWJlciA9PT0gMSkge1xyXG4gICAgICB0aGlzLnNldHBzU2VydmljZS5pc0ZpcnN0U3RlcC5lbWl0KHRydWUpO1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5hY3R1YWxTdGVwID0gdGhpcy5zdGVwc0Zvcm1bdGhpcy5zdGVwc0Zvcm0uaW5kZXhPZih0aGlzLmFjdHVhbFN0ZXApIC0gMV07XHJcbiAgICB0aGlzLnN0ZXBzRm9ybVt0aGlzLmN1cnJlbnRTdGVwTnVtYmVyXS5hY3RpdmUgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZXh0U3RlcCgpOiB2b2lkIHtcclxuICAgIHRoaXMuc2V0cHNTZXJ2aWNlLmlzRmlyc3RTdGVwLmVtaXQoZmFsc2UpO1xyXG5cclxuICAgIGlmICh0aGlzLmlzTGFzdFN0ZXApIHtcclxuICAgICAgdGhpcy5zZXRwc1NlcnZpY2Uuc3RvcEVtbWl0ZXIuZW1pdCh0cnVlKTtcclxuICAgICAgdGhpcy5zdG9wU3RlcHMuZW1pdCh0cnVlKTtcclxuICAgICAgdGhpcy5zZXRwc1NlcnZpY2Uuc3RvcCgpO1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5hY3R1YWxTdGVwID0gdGhpcy5zdGVwc0Zvcm1bdGhpcy5jdXJyZW50U3RlcE51bWJlcl07XHJcbiAgICB0aGlzLmFjdHVhbFN0ZXAuYWN0aXZlID0gdHJ1ZTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIHRoaXMub25EZXN0cm95JC5uZXh0KCk7XHJcbiAgICB0aGlzLm9uRGVzdHJveSQuY29tcGxldGUoKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInN0ZXBwZXJcIiBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCI+XHJcbiAgPGgyIGNsYXNzPVwic3RlcC10aXRsZVwiPnt7IGFjdHVhbFN0ZXAubmFtZSB9fTwvaDI+XHJcbiAgPHAgY2xhc3M9XCJzdGVwLW5leHRcIiAqbmdJZj1cIiFpc0xhc3RTdGVwOyBlbHNlIGxhc3RTdGVwXCI+UGFzbyBzaWd1aWVudGU6IHt7IG5leHRTdGVwTmFtZSB9fTwvcD5cclxuICA8bmctdGVtcGxhdGUgI2xhc3RTdGVwPjxwIGNsYXNzPVwic3RlcC1uZXh0XCI+VWx0aW1vIHBhc288L3A+PC9uZy10ZW1wbGF0ZT5cclxuXHJcbiAgPGRpdiBjbGFzcz1cInN0ZXBzXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwic3RlcFwiIFtjbGFzcy5hY3RpdmVdPVwic3RlcC5hY3RpdmVcIiAqbmdGb3I9XCJsZXQgc3RlcCBvZiBzdGVwc0Zvcm1cIj48L2Rpdj5cclxuICA8L2Rpdj5cclxuICA8c3BhbiBjbGFzcz1cInN0ZXAtdGV4dFwiPlBhc28ge3sgY3VycmVudFN0ZXBOdW1iZXIgfX0gZGUge3sgc3RlcHNGb3JtLmxlbmd0aCB9fTwvc3Bhbj5cclxuPC9kaXY+XHJcbiJdfQ==