ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
80 lines • 11.6 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";
const MAX_WIDTH = 100;
const INICIAL_STEP = 0;
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1wcm9ncmVzcy1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW9iZWxpc2NvL3Byb2dyZXNzLWJhci9vLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vcHJvZ3Jlc3MtYmFyL28tcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFGLE9BQU8sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQzs7OztBQUluRSxNQUFNLFNBQVMsR0FBVyxHQUFHLENBQUM7QUFDOUIsTUFBTSxZQUFZLEdBQVcsQ0FBQyxDQUFDO0FBTy9CLE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxZQUFZO0lBY3JELFlBQTZCLGtCQUErQjtRQUMxRCxLQUFLLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQURDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBYTtRQWJyRCxlQUFVLEdBQVcsQ0FBQyxDQUFDO1FBQ3ZCLFFBQUcsR0FBVyxDQUFDLENBQUM7UUFHUCxTQUFJLEdBQXFCLE1BQU0sQ0FBQztRQUNoQyxnQkFBVyxHQUFXLENBQUMsQ0FBQztRQUN4QixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBQ3hCLGtCQUFhLEdBQVcsRUFBRSxDQUFDO1FBRWpCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRTFELGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBSXpDLENBQUM7SUFFTSxRQUFRO1FBQ2IsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDOUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2xCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDbEYsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3RCLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLEdBQUcsR0FBRyxTQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztRQUN2QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUN6QyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUM7U0FDN0I7SUFDSCxDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFMUMsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLFlBQVksRUFBRTtZQUNuQyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUM7WUFDNUIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3BCO1FBRUQsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLENBQUMsRUFBRTtZQUMxQixJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDekMsT0FBTztTQUNSO0lBQ0gsQ0FBQztJQUVNLFFBQVE7UUFDYixJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUMsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDdEMsSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQzVCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtRQUNELElBQUksSUFBSSxDQUFDLFdBQVcsS0FBSyxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3hDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzFCLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUN6QyxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDaEM7SUFDSCxDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDN0IsQ0FBQzs7a0hBN0RVLHFCQUFxQjtzR0FBckIscUJBQXFCLDhQQ2RsQyw0VkFVQTsyRkRJYSxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsZ0JBQWdCO2tHQVFWLFdBQVc7c0JBQTFCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxXQUFXO3NCQUExQixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFFb0IsU0FBUztzQkFBbEMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTdWJqZWN0LCB0YWtlVW50aWwgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgQWJzdHJhY3RTdGVwIH0gZnJvbSAnbmd4LW9iZWxpc2NvLWV4YW1wbGUvY29yZS9hYnN0cmFjdHMnO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0JhclR5cGVzIH0gZnJvbSAnbmd4LW9iZWxpc2NvLWV4YW1wbGUvY29yZS9tb2RlbHMnO1xyXG5pbXBvcnQgeyBTdGVwU2VydmljZSB9IGZyb20gJ25neC1vYmVsaXNjby1leGFtcGxlL2NvcmUvc2VydmljZXMnO1xyXG5cclxuY29uc3QgTUFYX1dJRFRIOiBudW1iZXIgPSAxMDA7XHJcbmNvbnN0IElOSUNJQUxfU1RFUDogbnVtYmVyID0gMDtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnby1wcm9ncmVzcy1iYXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9vLXByb2dyZXNzLWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vby1wcm9ncmVzcy1iYXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgT1Byb2dyZXNzQmFyQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RTdGVwIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG4gIHB1YmxpYyBwZXJjZW50YWdlOiBudW1iZXIgPSAwO1xyXG4gIHB1YmxpYyBhdXg6IG51bWJlciA9IDA7XHJcblxyXG4gIEBJbnB1dCgpIHB1YmxpYyBkZXNjcmlwdGlvbiE6IHN0cmluZztcclxuICBASW5wdXQoKSBwdWJsaWMgdHlwZTogUHJvZ3Jlc3NCYXJUeXBlcyA9ICdpbmZvJztcclxuICBASW5wdXQoKSBwdWJsaWMgY3VycmVudFN0ZXA6IG51bWJlciA9IDA7XHJcbiAgQElucHV0KCkgcHVibGljIHRvdGFsU3RlcHM6IG51bWJlciA9IDEwO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBjdXN0b21DbGFzc2VzOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgQE91dHB1dCgpIHB1YmxpYyBvdmVycmlkZSBzdG9wU3RlcHMgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIHByaXZhdGUgb25EZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgcHJvZ3Jlc3NCYXJTZXJ2aWNlOiBTdGVwU2VydmljZSkge1xyXG4gICAgc3VwZXIocHJvZ3Jlc3NCYXJTZXJ2aWNlKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMucHJvZ3Jlc3NCYXJTZXJ2aWNlLmdldE5leHQucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kkKSkuc3Vic2NyaWJlKCgpID0+IHtcclxuICAgICAgdGhpcy5uZXh0U3RlcCgpO1xyXG4gICAgfSk7XHJcbiAgICB0aGlzLnByb2dyZXNzQmFyU2VydmljZS5nZXRQcmV2aW91cy5waXBlKHRha2VVbnRpbCh0aGlzLm9uRGVzdHJveSQpKS5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICB0aGlzLnByZXZpb3VzU3RlcCgpO1xyXG4gICAgfSk7XHJcbiAgICB0aGlzLmF1eCA9IE1BWF9XSURUSCAvIHRoaXMudG90YWxTdGVwcztcclxuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy5jdXJyZW50U3RlcDsgaSsrKSB7XHJcbiAgICAgIHRoaXMucGVyY2VudGFnZSArPSB0aGlzLmF1eDtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBwcmV2aW91c1N0ZXAoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNldHBzU2VydmljZS5pc0ZpcnN0U3RlcC5lbWl0KGZhbHNlKTtcclxuXHJcbiAgICBpZiAodGhpcy5jdXJyZW50U3RlcCA+IElOSUNJQUxfU1RFUCkge1xyXG4gICAgICB0aGlzLnBlcmNlbnRhZ2UgLT0gdGhpcy5hdXg7XHJcbiAgICAgIHRoaXMuY3VycmVudFN0ZXAtLTtcclxuICAgIH1cclxuXHJcbiAgICBpZiAodGhpcy5jdXJyZW50U3RlcCA9PT0gMCkge1xyXG4gICAgICB0aGlzLnNldHBzU2VydmljZS5pc0ZpcnN0U3RlcC5lbWl0KHRydWUpO1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgbmV4dFN0ZXAoKTogdm9pZCB7XHJcbiAgICB0aGlzLnNldHBzU2VydmljZS5pc0ZpcnN0U3RlcC5lbWl0KGZhbHNlKTtcclxuICAgIGlmICh0aGlzLmN1cnJlbnRTdGVwIDwgdGhpcy50b3RhbFN0ZXBzKSB7XHJcbiAgICAgIHRoaXMucGVyY2VudGFnZSArPSB0aGlzLmF1eDtcclxuICAgICAgdGhpcy5jdXJyZW50U3RlcCsrO1xyXG4gICAgfVxyXG4gICAgaWYgKHRoaXMuY3VycmVudFN0ZXAgPT09IHRoaXMudG90YWxTdGVwcykge1xyXG4gICAgICB0aGlzLnN0b3BTdGVwcy5lbWl0KHRydWUpO1xyXG4gICAgICB0aGlzLnNldHBzU2VydmljZS5zdG9wRW1taXRlci5lbWl0KHRydWUpO1xyXG4gICAgICB0aGlzLnByb2dyZXNzQmFyU2VydmljZS5zdG9wKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICB0aGlzLm9uRGVzdHJveSQubmV4dCgpO1xyXG4gICAgdGhpcy5vbkRlc3Ryb3kkLmNvbXBsZXRlKCk7XHJcbiAgfVxyXG59XHJcbiIsIjxwIGNsYXNzPVwic3RlcHNcIiAqbmdJZj1cImRlc2NyaXB0aW9uXCI+e3sgZGVzY3JpcHRpb24gfX08L3A+XHJcbjxkaXYgY2xhc3M9XCJwcm9ncmVzc1wiIFtuZ0NsYXNzXT1cImN1c3RvbUNsYXNzZXNcIj5cclxuICA8ZGl2XHJcbiAgICBjbGFzcz1cInByb2dyZXNzLWJhclwiXHJcbiAgICByb2xlPVwicHJvZ3Jlc3NiYXJcIlxyXG4gICAgW25nQ2xhc3NdPVwiJ2JnLScgKyB0eXBlXCJcclxuICAgIFthdHRyLmFyaWEtdmFsdWVub3ddPVwicGVyY2VudGFnZSB8IG51bWJlclwiXHJcbiAgICBbc3R5bGUud2lkdGguJV09XCJwZXJjZW50YWdlIHwgbnVtYmVyXCJcclxuICA+PC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=