iptdevs-design-system 3.1.382 → 3.1.384

package/fesm2020/iptdevs-design-system.mjs

@@ -6095,68 +6095,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 }]
         }] });
 
-class CodSelfManagedComponent {
-    constructor() {
-        this.items = [];
+class CodSelfFormStepOneComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.completed = new EventEmitter();
     }
     ngOnInit() {
-        this.items = [
-            {
-                label: 'Personal',
-            },
-            {
-                label: 'Planes',
-            },
-            {
-                label: 'Payment',
-            },
-            {
-                label: 'Confirmation',
-            }
-        ];
+        this.initForm();
+    }
+    initForm() {
+        this.codSelfFormStepOne = this.fb.group({
+            name: ['', [Validators.required]],
+            age: ['', [Validators.required]],
+        });
+    }
+    sendForm() {
+        this.codSelfFormStepOne.markAllAsTouched();
+        if (this.codSelfFormStepOne.invalid)
+            return;
+        // Movernos al paso 3
+        this.completed.emit(1);
     }
 }
-CodSelfManagedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodSelfManagedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfManagedComponent, selector: "ipt-cod-self-managed", ngImport: i0, template: "<h3>Cod Autogestionado</h3>\n\n<p-steps [model]=\"items\"></p-steps>\n\n\n\n<!-- <ipt-loader *ngIf=\"isLoading\" [isDialog]=\"false\"></ipt-loader> -->\n", dependencies: [{ kind: "component", type: i1$4.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass"], outputs: ["activeIndexChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ipt-cod-self-managed', template: "<h3>Cod Autogestionado</h3>\n\n<p-steps [model]=\"items\"></p-steps>\n\n\n\n<!-- <ipt-loader *ngIf=\"isLoading\" [isDialog]=\"false\"></ipt-loader> -->\n" }]
-        }] });
-
-class CodSelfFormStepOneComponent {
-}
-CodSelfFormStepOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepOneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodSelfFormStepOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepOneComponent, selector: "app-cod-self-form-step-one", ngImport: i0, template: "", styles: [""] });
+CodSelfFormStepOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepOneComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CodSelfFormStepOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepOneComponent, selector: "app-cod-self-form-step-one", outputs: { completed: "completed" }, ngImport: i0, template: "<div>\n  <h2>Paso 1: Datos Personales</h2>\n  <form [formGroup]=\"codSelfFormStepOne\">\n    <!-- <label for=\"name\">Nombre:</label>\n    <input type=\"text\" id=\"name\" [(ngModel)]=\"name\" name=\"name\" required>\n\n    <label for=\"age\">Edad:</label>\n    <input type=\"number\" id=\"age\" [(ngModel)]=\"age\" name=\"age\" required> -->\n\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'Nombres'\"\n      [control]=\"codSelfFormStepOne.controls['name']\"\n    ></ipt-input>\n    <ipt-input\n      [inputType]=\"'number'\"\n      [placeHolder]=\"'Edad'\"\n      [control]=\"codSelfFormStepOne.controls['age']\"\n    ></ipt-input>\n    <!-- <button type=\"submit\">guardar</button> -->\n  </form>\n</div>\n\n<div class=\"flex mt-3 align-items-center gap-3\">\n  <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\n  <button type=\"submit\" [disabled]=\"codSelfFormStepOne.valid\" (click)=\"sendForm()\" pButton label=\"Siguiente\" icon=\"pi pi-arrow-right\"></button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal", "disabledSel"], outputs: ["dateSelected"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepOneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cod-self-form-step-one', template: "" }]
-        }] });
+            args: [{ selector: 'app-cod-self-form-step-one', template: "<div>\n  <h2>Paso 1: Datos Personales</h2>\n  <form [formGroup]=\"codSelfFormStepOne\">\n    <!-- <label for=\"name\">Nombre:</label>\n    <input type=\"text\" id=\"name\" [(ngModel)]=\"name\" name=\"name\" required>\n\n    <label for=\"age\">Edad:</label>\n    <input type=\"number\" id=\"age\" [(ngModel)]=\"age\" name=\"age\" required> -->\n\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'Nombres'\"\n      [control]=\"codSelfFormStepOne.controls['name']\"\n    ></ipt-input>\n    <ipt-input\n      [inputType]=\"'number'\"\n      [placeHolder]=\"'Edad'\"\n      [control]=\"codSelfFormStepOne.controls['age']\"\n    ></ipt-input>\n    <!-- <button type=\"submit\">guardar</button> -->\n  </form>\n</div>\n\n<div class=\"flex mt-3 align-items-center gap-3\">\n  <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\n  <button type=\"submit\" [disabled]=\"codSelfFormStepOne.valid\" (click)=\"sendForm()\" pButton label=\"Siguiente\" icon=\"pi pi-arrow-right\"></button>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { completed: [{
+                type: Output
+            }] } });
 
 class CodSelfFormStepTwoComponent {
 }
 CodSelfFormStepTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepTwoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodSelfFormStepTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two", ngImport: i0, template: "", styles: [""] });
+CodSelfFormStepTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two", ngImport: i0, template: "<span>step 2</span>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepTwoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cod-self-form-step-two', template: "" }]
+            args: [{ selector: 'app-cod-self-form-step-two', template: "<span>step 2</span>\n" }]
+        }] });
+
+class CodSelfManagedComponent {
+    constructor() {
+        this.currentStep = 0;
+        this.items = [];
+        this.stepCompleted = [false, false, false, false];
+    }
+    ngOnInit() {
+        this.items = [
+            { label: 'Personal', id: '1' },
+            { label: 'Planes', id: '2' },
+            { label: 'Payment', id: '3' },
+            { label: 'Confirmation', id: '4' }
+        ];
+    }
+    // onNext() {
+    //   if (this.stepCompleted[this.currentStep]) {
+    //     this.currentStep++;
+    //   } else {
+    //     // Aquí puedes mostrar algún mensaje de error o realizar alguna acción cuando el paso no está completado
+    //     console.log('Completa el paso actual antes de avanzar.');
+    //   }
+    // }
+    // onPrevious() {
+    //   if (this.currentStep > 0) {
+    //     this.currentStep--;
+    //   }
+    // }
+    onChangeStep(step) {
+        console.log(step);
+        this.currentStep = step;
+    }
+    changeStep(step) {
+        this.currentStep = step;
+    }
+}
+CodSelfManagedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CodSelfManagedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfManagedComponent, selector: "ipt-cod-self-managed", ngImport: i0, template: "<h3>Cod Autogestionado</h3>\n\n<p-steps [model]=\"items\" [(activeIndex)]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\" ></p-steps>\n\n<!-- <div *ngIf=\"currentStep === 0\"> -->\n  <!-- Contenido del paso 1 -->\n  <!-- Ejemplo: -->\n  <app-cod-self-form-step-one (completed)=\"changeStep($event)\"></app-cod-self-form-step-one>\n<!-- </div> -->\n\n<!-- <div *ngIf=\"currentStep === 1\"> -->\n  <!-- Contenido del paso 2 -->\n  <!-- Ejemplo: -->\n  <app-cod-self-form-step-two (completed)=\"changeStep($event)\"></app-cod-self-form-step-two>\n<!-- </div> -->\n\n<!-- <div>\n  <ipt-button (click)=\"onPrevious()\" [isEnabled]=\"currentStep === 0\">Anterior</ipt-button>\n  <ipt-button (click)=\"onNext()\" [isEnabled]=\"currentStep === items.length - 1\">Siguiente</ipt-button>\n</div> -->\n\n<!-- <ipt-loader *ngIf=\"isLoading\" [isDialog]=\"false\"></ipt-loader> -->\n", dependencies: [{ kind: "component", type: i1$4.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass"], outputs: ["activeIndexChange"] }, { kind: "component", type: CodSelfFormStepOneComponent, selector: "app-cod-self-form-step-one", outputs: ["completed"] }, { kind: "component", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-cod-self-managed', template: "<h3>Cod Autogestionado</h3>\n\n<p-steps [model]=\"items\" [(activeIndex)]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\" ></p-steps>\n\n<!-- <div *ngIf=\"currentStep === 0\"> -->\n  <!-- Contenido del paso 1 -->\n  <!-- Ejemplo: -->\n  <app-cod-self-form-step-one (completed)=\"changeStep($event)\"></app-cod-self-form-step-one>\n<!-- </div> -->\n\n<!-- <div *ngIf=\"currentStep === 1\"> -->\n  <!-- Contenido del paso 2 -->\n  <!-- Ejemplo: -->\n  <app-cod-self-form-step-two (completed)=\"changeStep($event)\"></app-cod-self-form-step-two>\n<!-- </div> -->\n\n<!-- <div>\n  <ipt-button (click)=\"onPrevious()\" [isEnabled]=\"currentStep === 0\">Anterior</ipt-button>\n  <ipt-button (click)=\"onNext()\" [isEnabled]=\"currentStep === items.length - 1\">Siguiente</ipt-button>\n</div> -->\n\n<!-- <ipt-loader *ngIf=\"isLoading\" [isDialog]=\"false\"></ipt-loader> -->\n" }]
         }] });
 
 class CodSelfFormStepThreeComponent {
 }
 CodSelfFormStepThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepThreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodSelfFormStepThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepThreeComponent, selector: "app-cod-self-form-step-three", ngImport: i0, template: "", styles: [""] });
+CodSelfFormStepThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepThreeComponent, selector: "app-cod-self-form-step-three", ngImport: i0, template: "<span>step 3</span>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepThreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cod-self-form-step-three', template: "" }]
+            args: [{ selector: 'app-cod-self-form-step-three', template: "<span>step 3</span>\n" }]
         }] });
 
 class CodSelfFormStepFourComponent {
 }
 CodSelfFormStepFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepFourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodSelfFormStepFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", ngImport: i0, template: "", styles: [""] });
+CodSelfFormStepFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", ngImport: i0, template: "<span>step 4</span>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepFourComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cod-self-form-step-four', template: "" }]
+            args: [{ selector: 'app-cod-self-form-step-four', template: "<span>step 4</span>\n" }]
         }] });
 
 class codSelfManagedModule {
@@ -6169,7 +6205,8 @@ codSelfManagedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         CodSelfFormStepFourComponent], imports: [CommonModule,
         ComponentsModule,
         ReactiveFormsModule,
-        StepsModule], exports: [CodSelfManagedComponent,
+        StepsModule,
+        FormsModule], exports: [CodSelfManagedComponent,
         CodSelfFormStepOneComponent,
         CodSelfFormStepTwoComponent,
         CodSelfFormStepThreeComponent,
@@ -6177,7 +6214,8 @@ codSelfManagedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
 codSelfManagedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: codSelfManagedModule, imports: [CommonModule,
         ComponentsModule,
         ReactiveFormsModule,
-        StepsModule] });
+        StepsModule,
+        FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: codSelfManagedModule, decorators: [{
             type: NgModule,
             args: [{
@@ -6186,6 +6224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         ComponentsModule,
                         ReactiveFormsModule,
                         StepsModule,
+                        FormsModule
                     ],
                     declarations: [
                         CodSelfManagedComponent,