metag-sdk-ionic 1.0.1 → 1.1.2

package/dist/src/app/pages/id-vision/id-vision.component.js

@@ -1,9 +1,8 @@
 import { __awaiter } from "tslib";
 import { CommonModule } from '@angular/common';
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, Input, signal, ViewChild, ViewEncapsulation, } from '@angular/core';
-import { AlertController, IonicModule, IonInput, LoadingController, ModalController, NavController, Platform, } from '@ionic/angular';
-// import { register, SwiperContainer } from 'swiper/element/bundle';
-// import { Swiper, SwiperOptions } from 'swiper/types';
+import { AlertController, IonicModule, IonInput, LoadingController, ModalController, NavController, Platform, ToastController } from '@ionic/angular';
+import { Clipboard } from '@capacitor/clipboard';
 import { CameraWithOverlayComponent } from './components/camera-with-overlay/camera-with-overlay.component';
 import { CamaraVideoSelfieComponent } from './components/camara-video-selfie/camara-video-selfie.component';
 import { DpiService } from './services/dpi/dpi-service.service';
@@ -11,12 +10,15 @@ import { ModalDpiServices } from './services/modal-services/modal-dpi-services';
 import { ModalVideoSelfieServices } from './services/modal-services/modal-video-selfie-services';
 import { SdkCommunicationService } from './services/modal-services/sdk-communication-services';
 import { ValidateMetaGService } from './services/validate-meta-g/validate-meta-g';
+import { Network } from '@capacitor/network';
+import { NgZone } from '@angular/core';
 import { register, } from './../../../swiper-wrapper';
 import { PhotoSelfieCameraComponent } from './components/photo-selfie-camera/photo-selfie-camera.component';
 import { PhotoSelfieServices } from './services/modal-services/photo-selfie-services';
 import { CamaraAcuerdoVideoComponent } from './components/camara-acuerdo-video/camara-acuerdo.video.component';
 import { SimpleAcuerdoVideoComponent } from './components/simple-acuerdo-video/simple-acuerdo-video.component';
 import { MessageModalComponent } from './components/message-modal/message-modal.component';
+import { App } from '@capacitor/app';
 import * as i0 from "@angular/core";
 import * as i1 from "@ionic/angular";
 import * as i2 from "./services/dpi/dpi-service.service";
@@ -28,152 +30,152 @@ import * as i7 from "./services/modal-services/photo-selfie-services";
 import * as i8 from "@angular/common";
 const _c0 = ["dpi"];
 const _c1 = a0 => ({ "blur-effect": a0 });
-function IdVisionComponent_swiper_slide_1_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 4)(2, "div", 9)(3, "h2", 10);
+    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 4)(2, "div", 16)(3, "h2", 17);
     i0.ɵɵtext(4, "Verifiquemos tu identidad");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 10);
+    i0.ɵɵelementStart(5, "p", 17);
     i0.ɵɵtext(6, "Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "ion-item", 11);
-    i0.ɵɵelement(8, "ion-input", 12, 0);
+    i0.ɵɵelementStart(7, "ion-item", 18);
+    i0.ɵɵelement(8, "ion-input", 19, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "ion-grid", 13)(11, "ion-row")(12, "div", 14);
-    i0.ɵɵelement(13, "img", 15);
+    i0.ɵɵelementStart(10, "ion-grid", 20)(11, "ion-row")(12, "div", 21);
+    i0.ɵɵelement(13, "img", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 16)(15, "p");
+    i0.ɵɵelementStart(14, "div", 23)(15, "p");
     i0.ɵɵtext(16, "Sube fotos de documentos que prueben tu identidad");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "ion-row")(18, "div", 14);
-    i0.ɵɵelement(19, "img", 17);
+    i0.ɵɵelementStart(17, "ion-row")(18, "div", 21);
+    i0.ɵɵelement(19, "img", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 16)(21, "p");
+    i0.ɵɵelementStart(20, "div", 23)(21, "p");
     i0.ɵɵtext(22, "Graba un video selfie mientras lees el texto en voz alta");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(23, "div", 7)(24, "ion-button", 8);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_1_Template_ion_button_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleClick()); });
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_2_Template_ion_button_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleClick()); });
     i0.ɵɵtext(25, "Empecemos");
     i0.ɵɵelementEnd()()()();
 } }
-function IdVisionComponent_swiper_slide_2_div_2_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_3_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 9)(2, "h2");
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 16)(2, "h2");
     i0.ɵɵtext(3, "Acuerdo de v\u00EDdeo");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 10);
+    i0.ɵɵelementStart(4, "p", 17);
     i0.ɵɵtext(5, "Graba un breve video para completar tu proceso de identificaci\u00F3n.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "ion-grid", 13)(7, "ion-row")(8, "div", 14);
-    i0.ɵɵelement(9, "img", 23);
+    i0.ɵɵelementStart(6, "ion-grid", 20)(7, "ion-row")(8, "div", 21);
+    i0.ɵɵelement(9, "img", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 16)(11, "p");
+    i0.ɵɵelementStart(10, "div", 23)(11, "p");
     i0.ɵɵtext(12, "Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "ion-row")(14, "div", 14);
-    i0.ɵɵelement(15, "img", 17);
+    i0.ɵɵelementStart(13, "ion-row")(14, "div", 21);
+    i0.ɵɵelement(15, "img", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 16)(17, "p");
+    i0.ɵɵelementStart(16, "div", 23)(17, "p");
     i0.ɵɵtext(18, "Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(19, "div", 7)(20, "ion-button", 8);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_2_div_2_Template_ion_button_click_20_listener() { i0.ɵɵrestoreView(_r3); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_3_div_2_Template_ion_button_click_20_listener() { i0.ɵɵrestoreView(_r3); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
     i0.ɵɵtext(21, "Abrir la c\u00E1mara");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c1, ctx_r1.simpleProcess));
 } }
-function IdVisionComponent_swiper_slide_2_div_3_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_3_div_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 9)(2, "h2");
+    i0.ɵɵelementStart(0, "div")(1, "div", 16)(2, "h2");
     i0.ɵɵtext(3, "Coloca la parte frontal de tu DPI");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 24);
+    i0.ɵɵelementStart(4, "p", 31);
     i0.ɵɵtext(5, "Evita sombras, reflejos y coloca tu documento dentro del recuadro.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 25)(7, "video", 26);
-    i0.ɵɵelement(8, "source", 27);
+    i0.ɵɵelementStart(6, "div", 32)(7, "video", 33);
+    i0.ɵɵelement(8, "source", 34);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 7)(10, "ion-button", 8);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_2_div_3_Template_ion_button_click_10_listener() { i0.ɵɵrestoreView(_r5); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_3_div_3_Template_ion_button_click_10_listener() { i0.ɵɵrestoreView(_r5); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
     i0.ɵɵtext(11, "Tomar una foto");
     i0.ɵɵelementEnd()()();
 } }
-function IdVisionComponent_swiper_slide_2_div_4_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_3_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 9)(2, "h2");
+    i0.ɵɵelementStart(0, "div")(1, "div", 16)(2, "h2");
     i0.ɵɵtext(3, "Coloca el reverso de tu DPI");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 24);
+    i0.ɵɵelementStart(4, "p", 31);
     i0.ɵɵtext(5, "Evita sombras, reflejos y coloca tu documento dentro del recuadro.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 25)(7, "video", 28);
-    i0.ɵɵelement(8, "source", 29);
+    i0.ɵɵelementStart(6, "div", 32)(7, "video", 35);
+    i0.ɵɵelement(8, "source", 36);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 7)(10, "ion-button", 8);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_2_div_4_Template_ion_button_click_10_listener() { i0.ɵɵrestoreView(_r6); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_3_div_4_Template_ion_button_click_10_listener() { i0.ɵɵrestoreView(_r6); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
     i0.ɵɵtext(11, "Tomar una foto");
     i0.ɵɵelementEnd()()();
 } }
-function IdVisionComponent_swiper_slide_2_div_5_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_3_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 9)(2, "h2");
+    i0.ɵɵelementStart(0, "div")(1, "div", 16)(2, "h2");
     i0.ɵɵtext(3, "Video Selfie");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 10);
+    i0.ɵɵelementStart(4, "p", 17);
     i0.ɵɵtext(5, "Graba un breve video para completar tu proceso de identificaci\u00F3n.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "ion-grid", 13)(7, "ion-row")(8, "ion-row")(9, "div", 14);
-    i0.ɵɵelement(10, "img", 23);
+    i0.ɵɵelementStart(6, "ion-grid", 20)(7, "ion-row")(8, "ion-row")(9, "div", 21);
+    i0.ɵɵelement(10, "img", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 16)(12, "p");
+    i0.ɵɵelementStart(11, "div", 23)(12, "p");
     i0.ɵɵtext(13, "Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "ion-row")(15, "div", 14);
-    i0.ɵɵelement(16, "img", 17);
+    i0.ɵɵelementStart(14, "ion-row")(15, "div", 21);
+    i0.ɵɵelement(16, "img", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 16)(18, "p");
+    i0.ɵɵelementStart(17, "div", 23)(18, "p");
     i0.ɵɵtext(19, "Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.");
     i0.ɵɵelementEnd()()()()();
     i0.ɵɵelementStart(20, "div", 7)(21, "ion-button", 8);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_2_div_5_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_3_div_5_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
     i0.ɵɵtext(22, "Abrir la c\u00E1mara");
     i0.ɵɵelementEnd()()();
 } }
-function IdVisionComponent_swiper_slide_2_div_6_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_3_div_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 9)(2, "h2");
+    i0.ɵɵelementStart(0, "div")(1, "div", 16)(2, "h2");
     i0.ɵɵtext(3, "Foto Selfie");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 10);
+    i0.ɵɵelementStart(4, "p", 17);
     i0.ɵɵtext(5, "Toma una foto para completar tu proceso de identificaci\u00F3n.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "ion-grid", 13)(7, "ion-row")(8, "ion-row")(9, "div", 14);
-    i0.ɵɵelement(10, "img", 23);
+    i0.ɵɵelementStart(6, "ion-grid", 20)(7, "ion-row")(8, "ion-row")(9, "div", 21);
+    i0.ɵɵelement(10, "img", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 16)(12, "p");
+    i0.ɵɵelementStart(11, "div", 23)(12, "p");
     i0.ɵɵtext(13, "Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "ion-row")(15, "div", 14);
-    i0.ɵɵelement(16, "img", 17);
+    i0.ɵɵelementStart(14, "ion-row")(15, "div", 21);
+    i0.ɵɵelement(16, "img", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 16)(18, "p");
+    i0.ɵɵelementStart(17, "div", 23)(18, "p");
     i0.ɵɵtext(19, "Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.");
     i0.ɵɵelementEnd()()()()();
     i0.ɵɵelementStart(20, "div", 7)(21, "ion-button", 8);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_2_div_6_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r8); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_slide_3_div_6_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r8); const step_r4 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r4.action()); });
     i0.ɵɵtext(22, "Abrir la c\u00E1mara");
     i0.ɵɵelementEnd()()();
 } }
-function IdVisionComponent_swiper_slide_2_div_7_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_slide_3_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "h2");
     i0.ɵɵtext(2, "Paso desconocido");
     i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_swiper_slide_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 18);
-    i0.ɵɵtemplate(2, IdVisionComponent_swiper_slide_2_div_2_Template, 22, 3, "div", 19)(3, IdVisionComponent_swiper_slide_2_div_3_Template, 12, 0, "div", 20)(4, IdVisionComponent_swiper_slide_2_div_4_Template, 12, 0, "div", 20)(5, IdVisionComponent_swiper_slide_2_div_5_Template, 23, 0, "div", 20)(6, IdVisionComponent_swiper_slide_2_div_6_Template, 23, 0, "div", 20)(7, IdVisionComponent_swiper_slide_2_div_7_Template, 3, 0, "div", 21);
+function IdVisionComponent_swiper_slide_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 25);
+    i0.ɵɵtemplate(2, IdVisionComponent_swiper_slide_3_div_2_Template, 22, 3, "div", 26)(3, IdVisionComponent_swiper_slide_3_div_3_Template, 12, 0, "div", 27)(4, IdVisionComponent_swiper_slide_3_div_4_Template, 12, 0, "div", 27)(5, IdVisionComponent_swiper_slide_3_div_5_Template, 23, 0, "div", 27)(6, IdVisionComponent_swiper_slide_3_div_6_Template, 23, 0, "div", 27)(7, IdVisionComponent_swiper_slide_3_div_7_Template, 3, 0, "div", 28);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const step_r4 = ctx.$implicit;
@@ -190,25 +192,33 @@ function IdVisionComponent_swiper_slide_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngSwitchCase", 5);
 } }
-function IdVisionComponent_ion_col_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ion-col", 30)(1, "ion-item", 6)(2, "p", 31);
+function IdVisionComponent_ion_col_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-col", 37)(1, "ion-item", 6)(2, "p", 38);
     i0.ɵɵtext(3, "Informaci\u00F3n procesada de manera correcta");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "ion-item", 32);
-    i0.ɵɵelement(5, "img", 33);
+    i0.ɵɵelementStart(4, "ion-item", 39);
+    i0.ɵɵelement(5, "img", 40);
     i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_ion_col_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ion-col", 30)(1, "ion-item", 6)(2, "p", 31);
+function IdVisionComponent_ion_col_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-col", 37)(1, "ion-item", 6)(2, "p", 38);
     i0.ɵɵtext(3, "Ocurri\u00F3 un error al procesar la informaci\u00F3n");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "ion-item", 32);
-    i0.ɵɵelement(5, "img", 33);
+    i0.ɵɵelementStart(4, "ion-item", 39);
+    i0.ɵɵelement(5, "img", 40);
+    i0.ɵɵelementEnd()();
+} }
+function IdVisionComponent_ion_fab_14_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-fab", 41)(1, "ion-fab-button", 42);
+    i0.ɵɵlistener("click", function IdVisionComponent_ion_fab_14_Template_ion_fab_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyProccess()); });
+    i0.ɵɵelement(2, "ion-icon", 43);
     i0.ɵɵelementEnd()();
 } }
 register();
 export class IdVisionComponent {
-    constructor(modalController, dpiService, alertController, loadingController, platform, modalDpiServices, modalVideoSelfieServices, sdkCommunicationService, navController, validateMetaGService, cdRef, photoSelfieServices) {
+    constructor(zone, modalController, dpiService, alertController, loadingController, platform, modalDpiServices, modalVideoSelfieServices, sdkCommunicationService, navController, validateMetaGService, cdRef, photoSelfieServices, toastController) {
+        this.zone = zone;
         this.modalController = modalController;
         this.dpiService = dpiService;
         this.alertController = alertController;
@@ -221,6 +231,7 @@ export class IdVisionComponent {
         this.validateMetaGService = validateMetaGService;
         this.cdRef = cdRef;
         this.photoSelfieServices = photoSelfieServices;
+        this.toastController = toastController;
         this.tutoImage1 = 'assets/imagesIdvision/documentsImage.png';
         this.tutoImage2 = 'assets/imagesIdvision/documentsImage.png';
         this.tutoImage3 = 'assets/imagesIdvision/56.png';
@@ -232,6 +243,9 @@ export class IdVisionComponent {
         this.connection = '';
         this.apikey = '';
         this.validationConfig = [];
+        this.showDebug = false;
+        this.versionSDK = '';
+        this.hasInternet = true;
         this.simpleProcess = false;
         // Booleans para habilitar cada step
         this.showAcuerdoVideo = false;
@@ -250,48 +264,6 @@ export class IdVisionComponent {
             photoSelfie: false
         };
     }
-    // async loadMockValidationConfig() {
-    //   this.dpiService.getConnectionById(this.connection).subscribe({
-    //     next: (connection: any) => {
-    //       console.log(connection.details);
-    //       console.log(connection.details.config);
-    //       this.validationConfig = [
-    //         { id: 1, type: 2, order: "1" }, // DPI Frontal
-    //         { id: 2, type: 3, order: "2" }, // DPI Trasero
-    //         { id: 3, type: 4, order: "3" }  // Video Selfie
-    //       ];
-    //     },
-    //     error: (err) => {
-    //       console.error("Error al obtener la conexión:", err);
-    //     }
-    //   });
-    // }
-    //renderizado dinamico
-    // async loadMockValidationConfig() {
-    //   this.dpiService.getConnectionById(this.connection).subscribe({
-    //     next: (connection: any) => {
-    //       if (connection?.details?.config && Array.isArray(connection.details.config)) {
-    //         console.log("Configuración obtenida:", connection.details.config);
-    //         // 🔥 Procesamos la configuración recibida
-    //         this.validationConfig = connection.details.config
-    //           .map((config: { id: number, type: number, order: string }) => ({
-    //             id: config.id,
-    //             type: config.type,
-    //             order: Number(config.order) // Convertimos `order` a número
-    //           }))
-    //           .sort((a: { order: number }, b: { order: number }) => a.order - b.order); // Ordenamos por `order`
-    //         console.log("Configuración ordenada:", this.validationConfig);
-    //         // 🔥 Asegurar que los flags de visibilidad se actualicen correctamente
-    //         this.setValidationConfig();
-    //       } else {
-    //         console.warn("La configuración obtenida no es válida:", connection);
-    //       }
-    //     },
-    //     error: (err) => {
-    //       console.error("Error al obtener la conexión:", err);
-    //     }
-    //   });
-    // }
     loadMockValidationConfig() {
         return __awaiter(this, void 0, void 0, function* () {
             let loader = null;
@@ -306,16 +278,6 @@ export class IdVisionComponent {
                         var _a;
                         // console.log(connection.details);
                         if (((_a = connection === null || connection === void 0 ? void 0 : connection.details) === null || _a === void 0 ? void 0 : _a.config) && Array.isArray(connection.details.config)) {
-                            // console.log("Configuración obtenida:", connection.details.config);
-                            // this.simpleProcess = true; // ⚠️ CAMBIAR cuando el backend devuelva el valor real
-                            // this.validationConfig = connection.details.config
-                            //   .map((config: { id: number, type: number, order: string }) => ({
-                            //     id: config.id,
-                            //     type: config.type,
-                            //     order: Number(config.order),
-                            //     action: this.getStepAction(config.type)
-                            //   }))
-                            //   .sort((a: { order: number }, b: { order: number }) => a.order - b.order);
                             let configData = connection.details.config
                                 .map((config) => ({
                                 id: config.id,
@@ -344,9 +306,43 @@ export class IdVisionComponent {
                             console.warn("La configuración obtenida no es válida:", connection);
                         }
                     },
-                    error: (err) => {
-                        console.error("Error al obtener la conexión:", err);
-                    }
+                    error: (err) => __awaiter(this, void 0, void 0, function* () {
+                        if (loader) {
+                            loader.dismiss();
+                        }
+                        if (this.hasInternet) {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error',
+                                    errors: ["Credenciales Ingresadas Invalidas"],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.sdkCommunicationService.emitExit(false);
+                                this.navController.back();
+                            });
+                        }
+                        else {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error de conexión',
+                                    errors: ["No pudimos cargar la página. Verifica tu internet y prueba de nuevo."],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.sdkCommunicationService.emitExit(false);
+                                this.navController.back();
+                            });
+                        }
+                    })
                 });
             }
             catch (error) {
@@ -398,7 +394,29 @@ export class IdVisionComponent {
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.isAndroid || this.isIOS) {
+                try {
+                    const status = yield Network.getStatus();
+                    this.hasInternet = status.connected;
+                    this.networkListener = yield Network.addListener('networkStatusChange', (status) => {
+                        this.zone.run(() => {
+                            this.hasInternet = status.connected;
+                            console.log('Internet cambio:', this.hasInternet);
+                        });
+                    });
+                }
+                catch (error) {
+                    alert(error.message);
+                }
+            }
             yield this.loadMockValidationConfig();
+            if (this.isAndroid || this.isIOS) {
+                const info = yield App.getInfo();
+                this.versionSDK = info.version;
+            }
+            else {
+                this.versionSDK = 'web';
+            }
             this.modalDpiServices.closeOverlay$.subscribe(() => {
                 this.closeOverlay();
             });
@@ -456,7 +474,7 @@ export class IdVisionComponent {
                     navigation: {
                         enabled: false,
                     },
-                    allowTouchMove: this.isSwipe,
+                    allowTouchMove: false,
                 };
                 try {
                     Object.assign(swiperElement, swiperOptions);
@@ -480,10 +498,15 @@ export class IdVisionComponent {
         }
     }
     ngOnDestroy() {
-        // this.swiperRef = null;
-        if (this.swiperRef) {
-            // this.swiperRef.destroy(true, true);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            // this.swiperRef = null;
+            if (this.swiperRef) {
+                // this.swiperRef.destroy(true, true);
+            }
+            if ((this.isAndroid || this.isIOS) && this.networkListener) {
+                yield this.networkListener.remove();
+            }
+        });
     }
     handleClick() {
         this.InitProccess();
@@ -502,22 +525,6 @@ export class IdVisionComponent {
         var _a, _b;
         (_b = (_a = this.swiperElement()) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
     }
-    // handleExit(): void {
-    //   const result =
-    //     this.validateMetaG.dpiBack &&
-    //     this.validateMetaG.dpiFront &&
-    //     this.validateMetaG.videoSelfie;
-    //   this.sdkCommunicationService.emitExit(result);
-    //   this.navController.back();
-    // }
-    // handleExit(): void {
-    //   const result =
-    //     (!this.showDpiFront || this.validateMetaG.dpiFront) &&
-    //     (!this.showDpiBack || this.validateMetaG.dpiBack) &&
-    //     (!this.showVideoSelfie || this.validateMetaG.videoSelfie);
-    //   this.sdkCommunicationService.emitExit(result);
-    //   this.navController.back();
-    // }
     handleExit() {
         this.updateValidation();
         const result = this.isAllValid(); // Usamos la validación corregida
@@ -525,21 +532,7 @@ export class IdVisionComponent {
         this.sdkCommunicationService.emitExit(result);
         this.navController.back();
     }
-    // isAllValid(): boolean {
-    //   let isValid =
-    //     this.validateMetaG.dpiFront &&
-    //     this.validateMetaG.dpiBack &&
-    //     this.validateMetaG.videoSelfie;
-    //   this.validateMetaGService.setValidateMetaG(isValid);
-    //   return isValid;
-    // }
     isAllValid() {
-        // console.log('🔎 Verificando estado de los pasos:');
-        // console.log('showAcuerdoVideo:', this.showAcuerdoVideo, '| Validado:', this.validateMetaG.dpiFront);
-        // console.log('showDpiFront:', this.showDpiFront, '| Validado:', this.validateMetaG.dpiFront);
-        // console.log('showDpiBack:', this.showDpiBack, '| Validado:', this.validateMetaG.dpiBack);
-        // console.log('showVideoSelfie:', this.showVideoSelfie, '| Validado:', this.validateMetaG.videoSelfie);
-        // console.log('showPhotoSelfie:', this.showPhotoSelfie, '| Validado:', this.validateMetaG.photoSelfie);
         // Si NO hay pasos activados, devolvemos `false`
         if (!this.showAcuerdoVideo && !this.showDpiFront && !this.showDpiBack && !this.showVideoSelfie && !this.showPhotoSelfie) {
             console.log('⚠️ No hay pasos activos, devolviendo `false`.');
@@ -629,7 +622,7 @@ export class IdVisionComponent {
                 });
                 yield loader.present();
                 this.dpiService
-                    .InitProccess(this.dpiCode + '', this.connection, this.apikey) // '673259d3f027711b51e71202')
+                    .InitProccess(this.dpiCode + '', this.connection, this.apikey, this.versionSDK) // '673259d3f027711b51e71202')
                     .subscribe({
                     next: (response) => {
                         var _a;
@@ -639,6 +632,7 @@ export class IdVisionComponent {
                         if (!response['error']) {
                             localStorage.setItem('codigo', response['details']);
                             const isCompleted = response['completed'];
+                            this.showDebug = false;
                             if (isCompleted) {
                                 // console.log("Paso aca en el if")
                                 this.validateMetaG.acuerdoVideo = true;
@@ -651,13 +645,10 @@ export class IdVisionComponent {
                             }
                             else {
                                 if (!this.simpleProcess) {
-                                    // console.log("Paso aca en el else")
                                     this.handleSlide(1);
                                 }
                                 else {
                                     this.openSimpleAcuerdo();
-                                    // this.openAcuerdoVideo();
-                                    // console.log("Simple process activado...")
                                 }
                             }
                         }
@@ -681,6 +672,9 @@ export class IdVisionComponent {
                         }
                     },
                     error: (error) => {
+                        console.log('-----------------');
+                        console.log(error);
+                        console.log('-----------------');
                         console.error('Error al llamar al servicio:', error);
                     },
                 });
@@ -712,15 +706,6 @@ export class IdVisionComponent {
                             loader.dismiss();
                         }
                         if (!response['error']) {
-                            // this.showAlert('Éxito', 'DPI registrado correctamente', [], () => {
-                            //   this.closeModalFromParent();
-                            //   this.modalController.dismiss();
-                            //   this.validateMetaG.dpiFront = true;
-                            //   this.updateValidation();
-                            //   // this.handleSlide(2);
-                            //   // this.handleNext();
-                            //   this.moveToNextStep(2);
-                            // });
                             const modal = yield this.modalController.create({
                                 component: MessageModalComponent,
                                 componentProps: {
@@ -743,8 +728,8 @@ export class IdVisionComponent {
                             const modal = yield this.modalController.create({
                                 component: MessageModalComponent,
                                 componentProps: {
-                                    title: 'Error',
-                                    errors: response['errors'] || [],
+                                    title: response['mensage'],
+                                    errors: response['details'],
                                     variant: 'dpi'
                                 },
                                 backdropDismiss: false
@@ -753,34 +738,43 @@ export class IdVisionComponent {
                             modal.onDidDismiss().then(() => {
                                 this.resumeCameraFromParent();
                             });
-                            // this.showAlert(response['mensage'], '', response['details'], () => {
-                            //   this.resumeCameraFromParent();
-                            // });
                             this.validateMetaG.dpiFront = false;
                             this.updateValidation();
                         }
                     }),
                     error: (error) => __awaiter(this, void 0, void 0, function* () {
-                        const modal = yield this.modalController.create({
-                            component: MessageModalComponent,
-                            componentProps: {
-                                title: 'Error',
-                                errors: error || [],
-                                variant: 'dpi'
-                            },
-                            backdropDismiss: false
-                        });
-                        yield modal.present();
-                        modal.onDidDismiss().then(() => {
-                            this.resumeCameraFromParent();
-                        });
+                        if (this.hasInternet) {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error',
+                                    errors: error || [],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.resumeCameraFromParent();
+                            });
+                        }
+                        else {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error de conexión',
+                                    errors: ["No pudimos cargar la página. Verifica tu internet y prueba de nuevo."],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.resumeCameraFromParent();
+                            });
+                        }
                         this.validateMetaG.dpiFront = false;
                         this.updateValidation();
-                        // this.showAlert('Error', '', error, () => {
-                        //   this.resumeCameraFromParent();
-                        // });
-                        // this.validateMetaG.dpiFront = false;
-                        // this.updateValidation();
                         if (loader) {
                             loader.dismiss();
                         }
@@ -890,34 +884,46 @@ export class IdVisionComponent {
                         }
                     }),
                     error: (error) => __awaiter(this, void 0, void 0, function* () {
-                        const modal = yield this.modalController.create({
-                            component: MessageModalComponent,
-                            componentProps: {
-                                title: error['mensage'],
-                                message: error['details'],
-                                variant: 'dpi'
-                            },
-                            backdropDismiss: false
-                        });
-                        yield modal.present();
-                        modal.onDidDismiss().then(() => {
-                            this.resumeCameraFromParent();
-                            this.validateMetaG.dpiBack = false;
-                            this.updateValidation();
-                            console.error('Error al llamar al servicio:', error);
-                        });
                         if (loader) {
                             loader.dismiss();
                         }
-                        // this.showAlert('Error', '', error, () => {
-                        //   this.resumeCameraFromParent();
-                        // });
-                        // if (loader) {
-                        //   loader.dismiss();
-                        // }
-                        // this.validateMetaG.dpiBack = false;
-                        // this.updateValidation();
-                        // console.error('Error al llamar al servicio:', error);
+                        if (this.hasInternet) {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: error['mensage'],
+                                    message: error['details'],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.resumeCameraFromParent();
+                                this.validateMetaG.dpiBack = false;
+                                this.updateValidation();
+                                console.error('Error al llamar al servicio:', error);
+                            });
+                            if (loader) {
+                                loader.dismiss();
+                            }
+                        }
+                        else {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error de conexión',
+                                    errors: ["No pudimos cargar la página. Verifica tu internet y prueba de nuevo."],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.sdkCommunicationService.emitExit(false);
+                                this.navController.back();
+                            });
+                        }
                     }),
                 });
             }
@@ -943,13 +949,6 @@ export class IdVisionComponent {
                             loader.dismiss();
                         }
                         if (!response['error']) {
-                            // this.showAlert('Éxito', response['message'], [], () => {
-                            //   this.closeModalVideoSelfie();
-                            //   this.modalController.dismiss();
-                            //   this.validateMetaG.videoSelfie = true;
-                            //   this.updateValidation();
-                            //   this.moveToNextStep(4);
-                            // });
                             const modal = yield this.modalController.create({
                                 component: MessageModalComponent,
                                 componentProps: {
@@ -993,23 +992,41 @@ export class IdVisionComponent {
                         }
                     }),
                     error: (error) => __awaiter(this, void 0, void 0, function* () {
-                        const modal = yield this.modalController.create({
-                            component: MessageModalComponent,
-                            componentProps: {
-                                title: 'Error',
-                                errors: error['message'],
-                                variant: 'video'
-                            },
-                            backdropDismiss: false
-                        });
-                        yield modal.present();
-                        modal.onDidDismiss().then(() => {
-                            this.resumeCameraFromParent();
-                            // this.modalController.dismiss();
-                        });
-                        // this.showAlert('Error', '', error, () => {
-                        //   this.resumeCameraFromParent();
-                        // });
+                        if (loader) {
+                            loader.dismiss();
+                        }
+                        if (this.hasInternet) {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error',
+                                    errors: error['message'],
+                                    variant: 'video'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.resumeCameraFromParent();
+                                // this.modalController.dismiss();
+                            });
+                        }
+                        else {
+                            const modal = yield this.modalController.create({
+                                component: MessageModalComponent,
+                                componentProps: {
+                                    title: 'Error de conexión',
+                                    errors: ["No pudimos cargar la página. Verifica tu internet y prueba de nuevo."],
+                                    variant: 'dpi'
+                                },
+                                backdropDismiss: false
+                            });
+                            yield modal.present();
+                            modal.onDidDismiss().then(() => {
+                                this.sdkCommunicationService.emitExit(false);
+                                this.navController.back();
+                            });
+                        }
                         console.error('Error al llamar al servicio:', error);
                     }),
                 });
@@ -1412,24 +1429,59 @@ export class IdVisionComponent {
             yield modal.present();
         });
     }
+    copyProccess() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const codigo = (_a = localStorage.getItem('codigo')) !== null && _a !== void 0 ? _a : '';
+            this.copiarTexto(codigo);
+        });
+    }
+    copiarTexto(texto) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Clipboard.write({
+                string: texto
+            });
+            const toast = yield this.toastController.create({
+                message: 'Proceso copiado!',
+                duration: 2000,
+                color: 'success'
+            });
+            yield toast.present();
+        });
+    }
 }
-IdVisionComponent.ɵfac = function IdVisionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IdVisionComponent)(i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DpiService), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i1.LoadingController), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i3.ModalDpiServices), i0.ɵɵdirectiveInject(i4.ModalVideoSelfieServices), i0.ɵɵdirectiveInject(i5.SdkCommunicationService), i0.ɵɵdirectiveInject(i1.NavController), i0.ɵɵdirectiveInject(i6.ValidateMetaGService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i7.PhotoSelfieServices)); };
+IdVisionComponent.ɵfac = function IdVisionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IdVisionComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DpiService), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i1.LoadingController), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i3.ModalDpiServices), i0.ɵɵdirectiveInject(i4.ModalVideoSelfieServices), i0.ɵɵdirectiveInject(i5.SdkCommunicationService), i0.ɵɵdirectiveInject(i1.NavController), i0.ɵɵdirectiveInject(i6.ValidateMetaGService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i7.PhotoSelfieServices), i0.ɵɵdirectiveInject(i1.ToastController)); };
 IdVisionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IdVisionComponent, selectors: [["app-id-vision"]], viewQuery: function IdVisionComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dpi = _t.first);
-    } }, inputs: { isSwipe: "isSwipe", dpiCode: "dpiCode", connection: "connection", apikey: "apikey", validationConfig: "validationConfig" }, standalone: true, features: [i0.ɵɵProvidersFeature([DpiService]), i0.ɵɵStandaloneFeature], decls: 11, vars: 4, consts: [["dpi", ""], ["init", "false", 1, "custom-swiper"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "content"], ["class", "col-confirmation", 4, "ngIf"], ["color", "white"], [1, "fixed-footer"], ["expand", "block", 1, "custom-button", 3, "click"], [1, "head"], [1, "p-justify"], [1, "rounded-input"], ["type", "number", "disabled", "true", "placeholder", "Digita tu n\u00FAmero de DPI"], [1, "verify-container"], [1, "image-container"], ["src", "assets/imagesIdvision/documentsImage.png", "alt", ""], [1, "container-text"], ["src", "assets/imagesIdvision/rostroImage.png", "alt", ""], [1, "content", 3, "ngSwitch"], [3, "ngClass", 4, "ngSwitchCase"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "ngClass"], ["src", "assets/imagesIdvision/Foco.png", "alt", ""], [1, "p-center", "p-info"], [1, "dpi-container"], ["id", "dpiFront", "autoplay", "", "loop", "", "muted", "", "playsinline", "", "width", "1280", "height", "300"], ["src", "assets/imagesIdvision/Dpi-front.mp4", "type", "video/mp4"], ["id", "dpiBack", "autoplay", "", "loop", "", "muted", "", "playsinline", "", "width", "1280", "height", "300"], ["src", "assets/imagesIdvision/Dpi-back.mp4", "type", "video/mp4"], [1, "col-confirmation"], [1, "font-confirmation"], ["color", "white", 1, "image-item"], ["src", "assets/imagesIdvision/blue-check.png", "alt", ""]], template: function IdVisionComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "swiper-container", 1);
-        i0.ɵɵtemplate(1, IdVisionComponent_swiper_slide_1_Template, 26, 0, "swiper-slide", 2)(2, IdVisionComponent_swiper_slide_2_Template, 8, 6, "swiper-slide", 3);
-        i0.ɵɵelementStart(3, "swiper-slide")(4, "div", 4);
-        i0.ɵɵtemplate(5, IdVisionComponent_ion_col_5_Template, 6, 0, "ion-col", 5)(6, IdVisionComponent_ion_col_6_Template, 6, 0, "ion-col", 5);
-        i0.ɵɵelementStart(7, "ion-item", 6)(8, "div", 7)(9, "ion-button", 8);
-        i0.ɵɵlistener("click", function IdVisionComponent_Template_ion_button_click_9_listener() { return ctx.handleExit(); });
-        i0.ɵɵtext(10, "Salir");
+    } }, inputs: { isSwipe: "isSwipe", dpiCode: "dpiCode", connection: "connection", apikey: "apikey", validationConfig: "validationConfig" }, standalone: true, features: [i0.ɵɵProvidersFeature([DpiService]), i0.ɵɵStandaloneFeature], decls: 25, vars: 10, consts: [["dpi", ""], ["init", "false", 1, "custom-swiper"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "content"], ["class", "col-confirmation", 4, "ngIf"], ["color", "white"], [1, "fixed-footer"], ["expand", "block", 1, "custom-button", 3, "click"], [1, "version"], ["vertical", "top", "horizontal", "end", "slot", "fixed", 4, "ngIf"], [1, "wrapper-no-internet"], [1, "content-no-internet"], [1, "title-no-internet"], ["src", "assets/imagesIdvision/no-internet.svg", "alt", "Error conexi\u00F3n img", 1, "icon-no-internet"], [1, "description-no-internet"], [1, "head"], [1, "p-justify"], [1, "rounded-input"], ["type", "number", "disabled", "true", "placeholder", "Digita tu n\u00FAmero de DPI"], [1, "verify-container"], [1, "image-container"], ["src", "assets/imagesIdvision/documentsImage.png", "alt", ""], [1, "container-text"], ["src", "assets/imagesIdvision/rostroImage.png", "alt", ""], [1, "content", 3, "ngSwitch"], [3, "ngClass", 4, "ngSwitchCase"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "ngClass"], ["src", "assets/imagesIdvision/Foco.png", "alt", ""], [1, "p-center", "p-info"], [1, "dpi-container"], ["id", "dpiFront", "autoplay", "", "loop", "", "muted", "", "playsinline", "", "width", "1280", "height", "300"], ["src", "assets/imagesIdvision/Dpi-front.mp4", "type", "video/mp4"], ["id", "dpiBack", "autoplay", "", "loop", "", "muted", "", "playsinline", "", "width", "1280", "height", "300"], ["src", "assets/imagesIdvision/Dpi-back.mp4", "type", "video/mp4"], [1, "col-confirmation"], [1, "font-confirmation"], ["color", "white", 1, "image-item"], ["src", "assets/imagesIdvision/blue-check.png", "alt", ""], ["vertical", "top", "horizontal", "end", "slot", "fixed"], [1, "button-debug", 3, "click"], ["name", "bug-outline"]], template: function IdVisionComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "ion-content")(1, "swiper-container", 1);
+        i0.ɵɵtemplate(2, IdVisionComponent_swiper_slide_2_Template, 26, 0, "swiper-slide", 2)(3, IdVisionComponent_swiper_slide_3_Template, 8, 6, "swiper-slide", 3);
+        i0.ɵɵelementStart(4, "swiper-slide")(5, "div", 4);
+        i0.ɵɵtemplate(6, IdVisionComponent_ion_col_6_Template, 6, 0, "ion-col", 5)(7, IdVisionComponent_ion_col_7_Template, 6, 0, "ion-col", 5);
+        i0.ɵɵelementStart(8, "ion-item", 6)(9, "div", 7)(10, "ion-button", 8);
+        i0.ɵɵlistener("click", function IdVisionComponent_Template_ion_button_click_10_listener() { return ctx.handleExit(); });
+        i0.ɵɵtext(11, "Salir");
         i0.ɵɵelementEnd()()()()()();
+        i0.ɵɵelementStart(12, "div", 9);
+        i0.ɵɵtext(13);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(14, IdVisionComponent_ion_fab_14_Template, 3, 0, "ion-fab", 10);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(15, "ion-content")(16, "div", 11)(17, "div", 12)(18, "h2", 13);
+        i0.ɵɵtext(19, "Error de conexi\u00F3n");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(20, "img", 14);
+        i0.ɵɵelementStart(21, "p", 15);
+        i0.ɵɵtext(22, " No pudimos cargar la p\u00E1gina. ");
+        i0.ɵɵelement(23, "br");
+        i0.ɵɵtext(24, " Verifica tu internet y prueba de nuevo. ");
+        i0.ɵɵelementEnd()()()();
     } if (rf & 2) {
-        i0.ɵɵadvance();
+        i0.ɵɵstyleProp("display", ctx.hasInternet ? "block" : "none");
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", !ctx.simpleProcess);
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngForOf", ctx.validationConfig);
@@ -1437,11 +1489,17 @@ IdVisionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IdVisionC
         i0.ɵɵproperty("ngIf", ctx.isValid);
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", !ctx.isValid);
-    } }, dependencies: [IonicModule, i1.IonButton, i1.IonCol, i1.IonGrid, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i8.NgClass, i8.NgForOf, i8.NgIf, i8.NgSwitch, i8.NgSwitchCase, i8.NgSwitchDefault], styles: [".content[_ngcontent-%COMP%] {\n    padding: 10px;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n    background-color: #fff;\n    font-size: 18px;\n    background-image: url('assets/imagesIdvision/background.png');\n\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    \n}\n\n\nh2[_ngcontent-%COMP%] {\n    font-size: 1.5em;\n    font-weight: bold;\n    color: var(--orange-primary, orange);\n    text-align: center;\n    margin-top: 20px;\n  }\n  \n  p[_ngcontent-%COMP%] {\n    font-size: 1em;\n    color: #666;\n    text-align: center;\n    margin: 0;\n  }\n  \n  ion-grid[_ngcontent-%COMP%] {\n    margin-top: 20px;\n  }\n  \n  ion-row[_ngcontent-%COMP%] {\n    margin: 15px 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  \n  ion-col[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n  \n  ion-icon[_ngcontent-%COMP%] {\n    font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\n    color: #ff8c00; // Color similar al amarillo-naranja\n    margin-bottom: 10px;\n  }\n\n.container-text[_ngcontent-%COMP%] {\n  text-align: justify !important;\n    width: 180px;\n}\n\np[_ngcontent-%COMP%] {\n  text-align: start;\n}\n\n.p-center[_ngcontent-%COMP%]{\ntext-align: center;\n}\n\n.p-justify[_ngcontent-%COMP%]{\n  text-align: start;\n  }\n\n.head[_ngcontent-%COMP%] {\n    padding: 30px;\n    margin-top: 75px;\n    margin-bottom: 20px;\n}\n\n\n.verify-container[_ngcontent-%COMP%] {\n   // padding: 60px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 40%; // Ocupa todo el espacio disponible en el ion-content\n    text-align: center;\n    //background-color: black;\n}\n\n.fixed-footer[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    padding: 0px 10px 25px 10px;\n    // background-color: black; // Color de fondo, opcional\n   // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\n  \n    ion-button {\n      width: 90%;\n      max-width: 300px;\n      margin: 0 auto;\n      background-color: #ffcc00;\n      color: #ffffff;\n      font-weight: bold;\n      border-radius: 20px;\n  \n      &:hover {\n        background-color: #ffb300;\n      }\n  \n      &:active {\n        background-color: #e6a800;\n      }\n    }\n  }\n\n  .dpi-container[_ngcontent-%COMP%] {\n    display: flex;\n    //width: 100%;\n    justify-content: center;\n    align-items: center;\n    height: 50vh;\n  }\n.dpi-image[_ngcontent-%COMP%] {\n    width: 200px;\n}\n\n.image-container[_ngcontent-%COMP%] {\n    width: 100px;\n    max-width: 90px;\n}\n\n.col-confirmation[_ngcontent-%COMP%] {\n  margin-top: 100px;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px; \n\n}\n\n.image-item[_ngcontent-%COMP%] {\n  margin-top: 50px;\n  padding-top: 70px;\n}\n\n.font-confirmation[_ngcontent-%COMP%] {\n  font-size: 26px;\n  text-align: center;\n  // color: #005da9;\n  color: var(--purple-primary);\n  font-weight: bold;\n}\n\n\n.rounded-input[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  background-color: #f4f6fc; \n\n  border-radius: 10px; \n\n  padding: 5px 5px; \n\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \n\n  --ion-border-color: transparent; \n\n}\n\nion-input[_ngcontent-%COMP%] {\n  text-align: center;\n  color: var(--orange-primary);\n  --padding-start: 8px;\n}\n\n.custom-footer[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-between; \n\n  background-color: #ffffff; \n\n  //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); \n\n}\n\n.custom-footer[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%] {\n  flex: 0 0 48%; \n\n}\n\n.custom-footer[_ngcontent-%COMP%]   .left-button[_ngcontent-%COMP%] {\n  max-width: 140px;\n  color: black;\n\n  --background: white;\n\n  --color: var(--purple-primary);\n\n  --border-radius: 20px;\n  --border-color: white;\n  margin-right: auto; \n\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\n\n}\n\n.custom-footer[_ngcontent-%COMP%]   .right-button[_ngcontent-%COMP%] {\n  margin-left: auto; \n\n}\n\n.tutorial-head[_ngcontent-%COMP%] {\n  padding-top:50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.center-container[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60vh; \n\n  width: 100%;\n}\n\n.tutorial-title[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.rounded-input[_ngcontent-%COMP%]   ion-input[_ngcontent-%COMP%] {\n  font-size: 14px; \n\n  color: #333; \n\n}\n\n.rounded-input[_ngcontent-%COMP%]::part(native) {\n  background: transparent; \n\n}\n\n.p-info[_ngcontent-%COMP%]{\n  font-weight: bold;\n  color: #714e93\n}\n\n.custom-button[_ngcontent-%COMP%] {\n    --background: var(--purple-primary, #82298F) !important;\n    --background-hover: var(--purple-secondary, #2b0d30) !important;\n    --background-activated: var(--purple-secondary, #2b0d30) !important;\n    --color: #ffffff !important;\n    --border-radius: 20px !important;\n    --padding-top: 10px !important;\n    --padding-bottom: 10px !important;\n    --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\n    text-transform: none;\n\n      pointer-events: auto;\n\n  }\n\n  //blur[_ngcontent-%COMP%]   effect\n\n[_ngcontent-%COMP%]   .blur-effect[_ngcontent-%COMP%] {\n    filter: blur(5px); \n    pointer-events: none; \n  }\n  \n  .blur-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(255, 255, 255, 0.7);\n    z-index: 999;\n    filter: blur(5px);\n  }\n  \n  .boton-personalizado[_ngcontent-%COMP%] {\n    background-color: #4caf50; \n\n    color: white;\n    font-size: 16px;\n  }"] });
+        i0.ɵɵadvance(6);
+        i0.ɵɵtextInterpolate(ctx.versionSDK);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.showDebug);
+        i0.ɵɵadvance();
+        i0.ɵɵstyleProp("display", !ctx.hasInternet ? "block" : "none");
+    } }, dependencies: [IonicModule, i1.IonButton, i1.IonCol, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i8.NgClass, i8.NgForOf, i8.NgIf, i8.NgSwitch, i8.NgSwitchCase, i8.NgSwitchDefault], styles: [".content[_ngcontent-%COMP%] {\n  padding: 10px;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  background-color: #fff;\n  font-size: 18px;\n  background-image: url('assets/imagesIdvision/background.png');\n\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n}\n\n\nh2[_ngcontent-%COMP%] {\n  font-size: 1.5em;\n  font-weight: bold;\n  color: var(--orange-primary, orange);\n  text-align: center;\n  margin-top: 20px;\n}\n\np[_ngcontent-%COMP%] {\n  font-size: 1em;\n  color: #666;\n  text-align: center;\n  margin: 0;\n}\n\nion-grid[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\nion-row[_ngcontent-%COMP%] {\n  margin: 15px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\nion-col[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\nion-icon[_ngcontent-%COMP%] {\n  font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\n  color: #ff8c00; // Color similar al amarillo-naranja\n  margin-bottom: 10px;\n}\n\n.container-text[_ngcontent-%COMP%] {\n  text-align: justify !important;\n  width: 180px;\n}\n\np[_ngcontent-%COMP%] {\n  text-align: start;\n}\n\n.p-center[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.p-justify[_ngcontent-%COMP%] {\n  text-align: start;\n}\n\n.head[_ngcontent-%COMP%] {\n  padding: 30px;\n  margin-top: 75px;\n  margin-bottom: 20px;\n}\n\n\n.verify-container[_ngcontent-%COMP%] {\n  // padding: 60px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 40%; // Ocupa todo el espacio disponible en el ion-content\n  text-align: center;\n  //background-color: black;\n}\n\n.fixed-footer[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0px 10px 25px 10px;\n  // background-color: black; // Color de fondo, opcional\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\n\n  ion-button {\n    width: 90%;\n    max-width: 300px;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n}\n\n.dpi-container[_ngcontent-%COMP%] {\n  display: flex;\n  //width: 100%;\n  justify-content: center;\n  align-items: center;\n  height: 50vh;\n}\n\n.dpi-image[_ngcontent-%COMP%] {\n  width: 200px;\n}\n\n.image-container[_ngcontent-%COMP%] {\n  width: 100px;\n  max-width: 90px;\n}\n\n.col-confirmation[_ngcontent-%COMP%] {\n  margin-top: 100px;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  \n\n}\n\n.image-item[_ngcontent-%COMP%] {\n  margin-top: 50px;\n  padding-top: 70px;\n}\n\n.font-confirmation[_ngcontent-%COMP%] {\n  font-size: 26px;\n  text-align: center;\n  // color: #005da9;\n  color: var(--purple-primary);\n  font-weight: bold;\n}\n\n\n.rounded-input[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  background-color: #f4f6fc;\n  \n\n  border-radius: 10px;\n  \n\n  padding: 5px 5px;\n  \n\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  \n\n  --ion-border-color: transparent;\n  \n\n}\n\nion-input[_ngcontent-%COMP%] {\n  text-align: center;\n  color: var(--orange-primary);\n  --padding-start: 8px;\n}\n\n.custom-footer[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-between;\n  \n\n  background-color: #ffffff;\n  \n\n  //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); \n\n}\n\n.custom-footer[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%] {\n  flex: 0 0 48%;\n  \n\n}\n\n.custom-footer[_ngcontent-%COMP%]   .left-button[_ngcontent-%COMP%] {\n  max-width: 140px;\n  color: black;\n\n  --background: white;\n\n  --color: var(--purple-primary);\n\n  --border-radius: 20px;\n  --border-color: white;\n  margin-right: auto;\n  \n\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\n\n}\n\n.custom-footer[_ngcontent-%COMP%]   .right-button[_ngcontent-%COMP%] {\n  margin-left: auto;\n  \n\n}\n\n.tutorial-head[_ngcontent-%COMP%] {\n  padding-top: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.center-container[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60vh;\n  \n\n  width: 100%;\n}\n\n.tutorial-title[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.rounded-input[_ngcontent-%COMP%]   ion-input[_ngcontent-%COMP%] {\n  font-size: 14px;\n  \n\n  color: #333;\n  \n\n}\n\n.rounded-input[_ngcontent-%COMP%]::part(native) {\n  background: transparent;\n  \n\n}\n\n.p-info[_ngcontent-%COMP%] {\n  font-weight: bold;\n  color: #714e93\n}\n\n.custom-button[_ngcontent-%COMP%] {\n  --background: var(--purple-primary, #82298F) !important;\n  --background-hover: var(--purple-secondary, #2b0d30) !important;\n  --background-activated: var(--purple-secondary, #2b0d30) !important;\n  --color: #ffffff !important;\n  --border-radius: 20px !important;\n  --padding-top: 10px !important;\n  --padding-bottom: 10px !important;\n  --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\n  text-transform: none;\n\n  pointer-events: auto;\n\n}\n\n//blur[_ngcontent-%COMP%]   effect\n\n.blur-effect[_ngcontent-%COMP%] {\n  filter: blur(5px);\n  pointer-events: none;\n}\n\n.blur-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.7);\n  z-index: 999;\n  filter: blur(5px);\n}\n\n.boton-personalizado[_ngcontent-%COMP%] {\n  background-color: #4caf50;\n  \n\n  color: white;\n  font-size: 16px;\n}\n\n.version[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n  color: #888;\n  z-index: 1000;\n}\n\n.button-debug[_ngcontent-%COMP%] {\n  --background: #ff4081;\n  --color: #fff;\n}\n\n\n.wrapper-no-internet[_ngcontent-%COMP%] {\n  background-color: #fff;\n  height: 100vh;\n  display: flex;\n  justify-content: center; \n\n  align-items: center;     \n\n  padding: 40px;\n  background-image: url('assets/imagesIdvision/background.png') !important;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n}\n\n.content-no-internet[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 16px;\n}\n\n.title-no-internet[_ngcontent-%COMP%]{\n  color: #000;\n  font-size: 32px;\n  font-weight: bold;\n}\n\n.icon-no-internet[_ngcontent-%COMP%] {\n  width: 125px;\n  display: block;\n  margin-top: 25px;\n}\n\n.description-no-internet[_ngcontent-%COMP%] {\n  margin-top: 25px;\n  font-size: 22px;\n  color: #000;\n  line-height: 1.5;\n  text-align: center;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IdVisionComponent, [{
         type: Component,
-        args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule], providers: [DpiService], encapsulation: ViewEncapsulation.Emulated, template: "<!-- <swiper-container init=\"false\" class=\"custom-swiper\"> \n  <swiper-slide>\n    <div class=\"content\">\n      <div class=\"head\">\n        <h2 class=\"p-justify\">Verifiquemos tu identidad</h2>\n        <p class=\"p-justify\">Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).</p>\n        <ion-item class=\"rounded-input\">\n          <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"Digita tu n\u00FAmero de DPI\"></ion-input>\n        </ion-item>\n      </div>\n      <ion-grid class=\"verify-container\">\n        <ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>Sube fotos de documentos que prueben tu identidad</p>\n            </div>\n          </ion-row>\n        </ion-row>\n        <ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>Graba un video selfie mientras lees el texto en voz alta</p>\n            </div>\n          </ion-row>\n        </ion-row>\n      </ion-grid>\n\n      <div class=\"fixed-footer\">\n        <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleClick()\">Empecemos</ion-button>\n      </div>\n    </div>\n  </swiper-slide>\n  <swiper-slide *ngIf=\"showDpiFront\">\n    <div class=\"content\">\n      <div class=\"head\">\n        <h2>Coloca la parte frontal de tu DPI</h2>\n        <p class=\"p-center p-info\">\n          Evita sombras, reflejos y coloca tu documento dentro del recuadro.\n        </p>\n       \n      </div>\n      <div class=\"dpi-container\">\n        <video id=\"dpiFront\" autoplay loop muted playsinline  width=\"1280\" height=\"300\">\n          <source src=\"assets/imagesIdvision/Dpi-front.mp4\" type=\"video/mp4\">\n        </video>\n      </div>\n\n      <div class=\"fixed-footer\">\n        <ion-button class=\"custom-button\" expand=\"block\" (click)=\"openCameraOverlayFrontal()\">Tomar una foto</ion-button>\n      </div>\n    </div>\n  </swiper-slide>\n  <swiper-slide *ngIf=\"showDpiBack\">\n    <div class=\"content\">\n      <div class=\"head\">\n        <h2>Coloca el reverso de tu DPI</h2>\n        <p class=\"p-center p-info\">\n          Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\n      </div>\n      <div class=\"dpi-container\">\n        <video id=\"dpiBack\" autoplay loop muted playsinline width=\"1280\" height=\"300\">\n          <source src=\"assets/imagesIdvision/Dpi-back-1.mp4\" type=\"video/mp4\">\n        </video>\n      </div>\n\n      <div class=\"fixed-footer\">\n        <ion-button class=\"custom-button\" expand=\"block\" (click)=\"openCameraOverlayTrasero()\">Tomar una foto</ion-button>\n      </div>\n    </div>\n  </swiper-slide>\n  <swiper-slide *ngIf=\"showVideoSelfie\">\n    <div class=\"content\">\n      <div class=\"head\">\n        <h2>Video Selfie</h2>\n        <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\n      </div>\n      <ion-grid class=\"verify-container\">\n        <br/>\n        <br/>\n        <br/>\n        <ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>\n                Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.\n              </p>\n            </div>\n          </ion-row>\n        </ion-row>\n        <ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>\n                Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni\n                sombreros.\n              </p>\n            </div>\n          </ion-row>\n        </ion-row>\n        <ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/Selfie-rostro.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>\n                Activa la c\u00E1mara frontal y verifica que tu rostro est\u00E9 bien centrado..\n              </p>\n            </div>\n          </ion-row>\n        </ion-row>\n      </ion-grid>\n\n      <div class=\"fixed-footer\">\n        <ion-button class=\"custom-button\" expand=\"block\" (click)=\"openAcuerdoVideo()\">Abrir la c\u00E1mara</ion-button>\n      </div>\n    </div>\n  </swiper-slide>\n  <swiper-slide>\n    <div class=\"content\">\n      <ion-col class=\"col-confirmation\" *ngIf=\"isAllValid()\">\n        <ion-item color=\"white\">\n          <p class=\"font-confirmation\">\n            Informaci\u00F3n procesada de manera correcta\n          </p>\n        </ion-item>\n        <ion-item color=\"white\" class=\"image-item\">\n          <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"\" />\n        </ion-item>\n      </ion-col>\n\n      <ion-col class=\"col-confirmation\" *ngIf=\"!isAllValid()\">\n        <ion-item color=\"white\">\n          <p class=\"font-confirmation\">\n            Ocurri\u00F3 un error al procesar la informaci\u00F3n \n          </p>\n        </ion-item>\n        <ion-item color=\"white\" class=\"image-item\">\n          <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"\" />\n        </ion-item>\n      </ion-col>\n      <ion-item color=\"white\">\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\n        </div>\n      </ion-item>\n    </div>\n  </swiper-slide>\n</swiper-container> -->\n\n<swiper-container init=\"false\" class=\"custom-swiper\">\n\n  <!-- \uD83D\uDD39 PASO 1: Verificaci\u00F3n de Identidad (Est\u00E1tico) -->\n  <swiper-slide *ngIf=\"!simpleProcess\">\n    <div class=\"content\">\n      <div class=\"head\">\n        <h2 class=\"p-justify\">Verifiquemos tu identidad</h2>\n        <p class=\"p-justify\">Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).</p>\n        <ion-item class=\"rounded-input\">\n          <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"Digita tu n\u00FAmero de DPI\"></ion-input>\n        </ion-item>\n      </div>\n      <ion-grid class=\"verify-container\">\n        <ion-row>\n          <div class=\"image-container\">\n            <img src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\" />\n          </div>\n          <div class=\"container-text\">\n            <p>Sube fotos de documentos que prueben tu identidad</p>\n          </div>\n        </ion-row>\n        <ion-row>\n          <div class=\"image-container\">\n            <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n          </div>\n          <div class=\"container-text\">\n            <p>Graba un video selfie mientras lees el texto en voz alta</p>\n          </div>\n        </ion-row>\n      </ion-grid>\n      <div class=\"fixed-footer\">\n        <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleClick()\">Empecemos</ion-button>\n      </div>\n    </div>\n  </swiper-slide>\n\n  <!-- \uD83D\uDD39 PASOS INTERMEDIOS: Se generan din\u00E1micamente seg\u00FAn el `order` -->\n  <swiper-slide *ngFor=\"let step of validationConfig\">\n    <div class=\"content\" [ngSwitch]=\"step.type\">\n      <!--Acuerdo de video-->\n      <div *ngSwitchCase=\"1\" [ngClass]=\"{'blur-effect': simpleProcess}\"> \n        <div class=\"head\">\n          <h2>Acuerdo de v\u00EDdeo</h2>\n          <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\n        </div>\n        <ion-grid class=\"verify-container\">\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n            </div>\n          </ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n            </div>\n          </ion-row>\n        </ion-grid>\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n        </div>\n      </div>\n      <!-- \uD83D\uDD39 DPI Frontal -->\n      <div *ngSwitchCase=\"2\">\n        <div class=\"head\">\n          <h2>Coloca la parte frontal de tu DPI</h2>\n          <p class=\"p-center p-info\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\n        </div>\n        <div class=\"dpi-container\">\n          <video id=\"dpiFront\" autoplay loop muted playsinline width=\"1280\" height=\"300\">\n            <source src=\"assets/imagesIdvision/Dpi-front.mp4\" type=\"video/mp4\">\n          </video>\n        </div>\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\n        </div>\n      </div>\n\n      <!-- \uD83D\uDD39 DPI Trasero -->\n      <div *ngSwitchCase=\"3\">\n        <div class=\"head\">\n          <h2>Coloca el reverso de tu DPI</h2>\n          <p class=\"p-center p-info\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\n        </div>\n        <div class=\"dpi-container\">\n          <video id=\"dpiBack\" autoplay loop muted playsinline width=\"1280\" height=\"300\">\n            <source src=\"assets/imagesIdvision/Dpi-back.mp4\" type=\"video/mp4\">\n          </video>\n        </div>\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\n        </div>\n      </div>\n\n      <!-- \uD83D\uDD39 Video Selfie -->\n      <div *ngSwitchCase=\"4\">\n        <div class=\"head\">\n          <h2>Video Selfie</h2>\n          <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\n        </div>\n        <ion-grid class=\"verify-container\">\n          <ion-row>\n            <ion-row>\n              <div class=\"image-container\">\n                <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n              </div>\n              <div class=\"container-text\">\n                <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n              </div>\n            </ion-row>\n            <ion-row>\n              <div class=\"image-container\">\n                <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n              </div>\n              <div class=\"container-text\">\n                <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n              </div>\n            </ion-row>\n          </ion-row>\n        </ion-grid>\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n        </div>\n      </div>\n      <!-- Photo Selfie -->\n      <!-- TODO Se debera cambiar a 5, se dejo 1 por acuerdo de video -->\n      <div *ngSwitchCase=\"5\"> \n        <div class=\"head\">\n          <h2>Foto Selfie</h2>\n          <p class=\"p-justify\">Toma una foto para completar tu proceso de identificaci\u00F3n.</p>\n        </div>\n        <ion-grid class=\"verify-container\">\n          <ion-row>\n            <ion-row>\n              <div class=\"image-container\">\n                <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n              </div>\n              <div class=\"container-text\">\n                <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n              </div>\n            </ion-row>\n            <ion-row>\n              <div class=\"image-container\">\n                <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n              </div>\n              <div class=\"container-text\">\n                <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n              </div>\n            </ion-row>\n          </ion-row>\n        </ion-grid>\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n        </div>\n      </div>\n      <!-- \uD83D\uDD39 Caso por defecto (Error en configuraci\u00F3n) -->\n      <div *ngSwitchDefault>\n        <h2>Paso desconocido</h2>\n      </div>\n    </div>\n  </swiper-slide>\n  <!-- \uD83D\uDD39 PASO FINAL: Confirmaci\u00F3n (Est\u00E1tico) -->\n  <swiper-slide>\n    <div class=\"content\">\n      <ion-col class=\"col-confirmation\" *ngIf=\"isValid\">\n        <ion-item color=\"white\">\n          <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\n        </ion-item>\n        <ion-item color=\"white\" class=\"image-item\">\n          <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"\" />\n        </ion-item>\n      </ion-col>\n      <ion-col class=\"col-confirmation\" *ngIf=\"!isValid\">\n        <ion-item color=\"white\">\n          <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\n        </ion-item>\n        <ion-item color=\"white\" class=\"image-item\">\n          <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"\" />\n        </ion-item>\n      </ion-col>\n      <ion-item color=\"white\">\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\n        </div>\n      </ion-item>\n    </div>\n  </swiper-slide>\n\n</swiper-container>\n", styles: ["\n.content {\n    padding: 10px;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n    background-color: #fff;\n    font-size: 18px;\n    background-image: url('assets/imagesIdvision/background.png');\n\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n    \n}\n\n\nh2 {\n    font-size: 1.5em;\n    font-weight: bold;\n    color: var(--orange-primary, orange);\n    text-align: center;\n    margin-top: 20px;\n  }\n  \n  p {\n    font-size: 1em;\n    color: #666;\n    text-align: center;\n    margin: 0;\n  }\n  \n  ion-grid {\n    margin-top: 20px;\n  }\n  \n  ion-row {\n    margin: 15px 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  \n  ion-col {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n  \n  ion-icon {\n    font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\n    color: #ff8c00; // Color similar al amarillo-naranja\n    margin-bottom: 10px;\n  }\n\n.container-text {\n  text-align: justify !important;\n    width: 180px;\n}\n\np {\n  text-align: start;\n}\n\n.p-center{\ntext-align: center;\n}\n\n.p-justify{\n  text-align: start;\n  }\n\n.head {\n    padding: 30px;\n    margin-top: 75px;\n    margin-bottom: 20px;\n}\n\n\n.verify-container {\n   // padding: 60px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 40%; // Ocupa todo el espacio disponible en el ion-content\n    text-align: center;\n    //background-color: black;\n}\n\n.fixed-footer {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    padding: 0px 10px 25px 10px;\n    // background-color: black; // Color de fondo, opcional\n   // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\n  \n    ion-button {\n      width: 90%;\n      max-width: 300px;\n      margin: 0 auto;\n      background-color: #ffcc00;\n      color: #ffffff;\n      font-weight: bold;\n      border-radius: 20px;\n  \n      &:hover {\n        background-color: #ffb300;\n      }\n  \n      &:active {\n        background-color: #e6a800;\n      }\n    }\n  }\n\n  .dpi-container {\n    display: flex;\n    //width: 100%;\n    justify-content: center;\n    align-items: center;\n    height: 50vh;\n  }\n.dpi-image {\n    width: 200px;\n}\n\n.image-container {\n    width: 100px;\n    max-width: 90px;\n}\n\n.col-confirmation {\n  margin-top: 100px;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px; /* Ajusta el espacio entre los elementos */\n}\n\n.image-item {\n  margin-top: 50px;\n  padding-top: 70px;\n}\n\n.font-confirmation {\n  font-size: 26px;\n  text-align: center;\n  // color: #005da9;\n  color: var(--purple-primary);\n  font-weight: bold;\n}\n\n\n.rounded-input {\n  margin-top: 15px;\n  background-color: #f4f6fc; /* Color de fondo suave */\n  border-radius: 10px; /* Bordes redondeados */\n  padding: 5px 5px; /* Espaciado interno */\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */\n  --ion-border-color: transparent; /* Quita cualquier borde por defecto */\n}\n\nion-input {\n  text-align: center;\n  color: var(--orange-primary);\n  --padding-start: 8px;\n}\n\n.custom-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-between; /* Alinea los botones a los extremos */\n  background-color: #ffffff; /* Fondo opcional */\n  //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional */\n}\n\n.custom-footer ion-button {\n  flex: 0 0 48%; /* Los botones ocupan casi la mitad del espacio */\n}\n\n.custom-footer .left-button {\n  max-width: 140px;\n  color: black;\n\n  --background: white;\n\n  --color: var(--purple-primary);\n\n  --border-radius: 20px;\n  --border-color: white;\n  margin-right: auto; /* Opcional si necesitas ajustes de margen */\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\n\n}\n\n.custom-footer .right-button {\n  margin-left: auto; /* Opcional si necesitas ajustes de margen */\n}\n\n.tutorial-head {\n  padding-top:50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.center-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60vh; /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\n  width: 100%;\n}\n\n.tutorial-title {\n  text-align: center;\n}\n\n.rounded-input ion-input {\n  font-size: 14px; /* Tama\u00F1o de texto */\n  color: #333; /* Color del texto */\n}\n\n.rounded-input::part(native) {\n  background: transparent; /* Fondo transparente para evitar conflictos */\n}\n\n.p-info{\n  font-weight: bold;\n  color: #714e93\n}\n\n.custom-button {\n    --background: var(--purple-primary, #82298F) !important;\n    --background-hover: var(--purple-secondary, #2b0d30) !important;\n    --background-activated: var(--purple-secondary, #2b0d30) !important;\n    --color: #ffffff !important;\n    --border-radius: 20px !important;\n    --padding-top: 10px !important;\n    --padding-bottom: 10px !important;\n    --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\n    text-transform: none;\n\n      pointer-events: auto;\n\n  }\n\n  //blur effect\n\n  .blur-effect {\n    filter: blur(5px); \n    pointer-events: none; \n  }\n  \n  .blur-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(255, 255, 255, 0.7);\n    z-index: 999;\n    filter: blur(5px);\n  }\n  \n  .boton-personalizado {\n    background-color: #4caf50; /* Verde, por ejemplo */\n    color: white;\n    font-size: 16px;\n  }"] }]
-    }], () => [{ type: i1.ModalController }, { type: i2.DpiService }, { type: i1.AlertController }, { type: i1.LoadingController }, { type: i1.Platform }, { type: i3.ModalDpiServices }, { type: i4.ModalVideoSelfieServices }, { type: i5.SdkCommunicationService }, { type: i1.NavController }, { type: i6.ValidateMetaGService }, { type: i0.ChangeDetectorRef }, { type: i7.PhotoSelfieServices }], { dpi: [{
+        args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule], providers: [DpiService], encapsulation: ViewEncapsulation.Emulated, template: "<ion-content [style.display]=\"hasInternet ? 'block' : 'none'\">\n  <swiper-container init=\"false\" class=\"custom-swiper\">\n\n    <!-- \uD83D\uDD39 PASO 1: Verificaci\u00F3n de Identidad (Est\u00E1tico) -->\n    <swiper-slide *ngIf=\"!simpleProcess\">\n      <div class=\"content\">\n        <div class=\"head\">\n          <h2 class=\"p-justify\">Verifiquemos tu identidad</h2>\n          <p class=\"p-justify\">Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).</p>\n          <ion-item class=\"rounded-input\">\n            <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"Digita tu n\u00FAmero de DPI\"></ion-input>\n          </ion-item>\n        </div>\n        <ion-grid class=\"verify-container\">\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>Sube fotos de documentos que prueben tu identidad</p>\n            </div>\n          </ion-row>\n          <ion-row>\n            <div class=\"image-container\">\n              <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n            </div>\n            <div class=\"container-text\">\n              <p>Graba un video selfie mientras lees el texto en voz alta</p>\n            </div>\n          </ion-row>\n        </ion-grid>\n        <div class=\"fixed-footer\">\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleClick()\">Empecemos</ion-button>\n        </div>\n      </div>\n    </swiper-slide>\n\n    <!-- \uD83D\uDD39 PASOS INTERMEDIOS: Se generan din\u00E1micamente seg\u00FAn el `order` -->\n    <swiper-slide *ngFor=\"let step of validationConfig\">\n      <div class=\"content\" [ngSwitch]=\"step.type\">\n        <!--Acuerdo de video-->\n        <div *ngSwitchCase=\"1\" [ngClass]=\"{'blur-effect': simpleProcess}\">\n          <div class=\"head\">\n            <h2>Acuerdo de v\u00EDdeo</h2>\n            <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\n          </div>\n          <ion-grid class=\"verify-container\">\n            <ion-row>\n              <div class=\"image-container\">\n                <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n              </div>\n              <div class=\"container-text\">\n                <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n              </div>\n            </ion-row>\n            <ion-row>\n              <div class=\"image-container\">\n                <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n              </div>\n              <div class=\"container-text\">\n                <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n              </div>\n            </ion-row>\n          </ion-grid>\n          <div class=\"fixed-footer\">\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n          </div>\n        </div>\n        <!-- \uD83D\uDD39 DPI Frontal -->\n        <div *ngSwitchCase=\"2\">\n          <div class=\"head\">\n            <h2>Coloca la parte frontal de tu DPI</h2>\n            <p class=\"p-center p-info\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\n          </div>\n          <div class=\"dpi-container\">\n            <video id=\"dpiFront\" autoplay loop muted playsinline width=\"1280\" height=\"300\">\n              <source src=\"assets/imagesIdvision/Dpi-front.mp4\" type=\"video/mp4\">\n            </video>\n          </div>\n          <div class=\"fixed-footer\">\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\n          </div>\n        </div>\n\n        <!-- \uD83D\uDD39 DPI Trasero -->\n        <div *ngSwitchCase=\"3\">\n          <div class=\"head\">\n            <h2>Coloca el reverso de tu DPI</h2>\n            <p class=\"p-center p-info\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\n          </div>\n          <div class=\"dpi-container\">\n            <video id=\"dpiBack\" autoplay loop muted playsinline width=\"1280\" height=\"300\">\n              <source src=\"assets/imagesIdvision/Dpi-back.mp4\" type=\"video/mp4\">\n            </video>\n          </div>\n          <div class=\"fixed-footer\">\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\n          </div>\n        </div>\n\n        <!-- \uD83D\uDD39 Video Selfie -->\n        <div *ngSwitchCase=\"4\">\n          <div class=\"head\">\n            <h2>Video Selfie</h2>\n            <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\n          </div>\n          <ion-grid class=\"verify-container\">\n            <ion-row>\n              <ion-row>\n                <div class=\"image-container\">\n                  <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n                </div>\n                <div class=\"container-text\">\n                  <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n                </div>\n              </ion-row>\n              <ion-row>\n                <div class=\"image-container\">\n                  <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n                </div>\n                <div class=\"container-text\">\n                  <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n                </div>\n              </ion-row>\n            </ion-row>\n          </ion-grid>\n          <div class=\"fixed-footer\">\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n          </div>\n        </div>\n        <!-- Photo Selfie -->\n        <!-- TODO Se debera cambiar a 5, se dejo 1 por acuerdo de video -->\n        <div *ngSwitchCase=\"5\">\n          <div class=\"head\">\n            <h2>Foto Selfie</h2>\n            <p class=\"p-justify\">Toma una foto para completar tu proceso de identificaci\u00F3n.</p>\n          </div>\n          <ion-grid class=\"verify-container\">\n            <ion-row>\n              <ion-row>\n                <div class=\"image-container\">\n                  <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\n                </div>\n                <div class=\"container-text\">\n                  <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n                </div>\n              </ion-row>\n              <ion-row>\n                <div class=\"image-container\">\n                  <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\n                </div>\n                <div class=\"container-text\">\n                  <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n                </div>\n              </ion-row>\n            </ion-row>\n          </ion-grid>\n          <div class=\"fixed-footer\">\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n          </div>\n        </div>\n        <!-- \uD83D\uDD39 Caso por defecto (Error en configuraci\u00F3n) -->\n        <div *ngSwitchDefault>\n          <h2>Paso desconocido</h2>\n        </div>\n      </div>\n    </swiper-slide>\n    <!-- \uD83D\uDD39 PASO FINAL: Confirmaci\u00F3n (Est\u00E1tico) -->\n    <swiper-slide>\n      <div class=\"content\">\n        <ion-col class=\"col-confirmation\" *ngIf=\"isValid\">\n          <ion-item color=\"white\">\n            <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\n          </ion-item>\n          <ion-item color=\"white\" class=\"image-item\">\n            <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"\" />\n          </ion-item>\n        </ion-col>\n        <ion-col class=\"col-confirmation\" *ngIf=\"!isValid\">\n          <ion-item color=\"white\">\n            <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\n          </ion-item>\n          <ion-item color=\"white\" class=\"image-item\">\n            <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"\" />\n          </ion-item>\n        </ion-col>\n        <ion-item color=\"white\">\n          <div class=\"fixed-footer\">\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\n          </div>\n        </ion-item>\n      </div>\n    </swiper-slide>\n\n  </swiper-container>\n  <div class=\"version\">{{versionSDK}}</div>\n  <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\" *ngIf=\"showDebug\">\n    <ion-fab-button class=\"button-debug\" (click)=\"copyProccess()\">\n      <ion-icon name=\"bug-outline\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n\n</ion-content>\n<!-- pantalla para cuando no exista internet -->\n<ion-content [style.display]=\"!hasInternet ? 'block' : 'none'\"> \n  <div class=\"wrapper-no-internet\">\n    <div class=\"content-no-internet\">\n      <h2 class=\"title-no-internet\">Error de conexi\u00F3n</h2>\n      <img src=\"assets/imagesIdvision/no-internet.svg\" alt=\"Error conexi\u00F3n img\" class=\"icon-no-internet\"/>\n      <p class=\"description-no-internet\">\n        No pudimos cargar la p\u00E1gina. <br>\n        Verifica tu internet y prueba de nuevo.\n      </p>\n    </div>\n  </div>\n</ion-content>", styles: [".content {\n  padding: 10px;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  background-color: #fff;\n  font-size: 18px;\n  background-image: url('assets/imagesIdvision/background.png');\n\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n}\n\n\nh2 {\n  font-size: 1.5em;\n  font-weight: bold;\n  color: var(--orange-primary, orange);\n  text-align: center;\n  margin-top: 20px;\n}\n\np {\n  font-size: 1em;\n  color: #666;\n  text-align: center;\n  margin: 0;\n}\n\nion-grid {\n  margin-top: 20px;\n}\n\nion-row {\n  margin: 15px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\nion-col {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\nion-icon {\n  font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\n  color: #ff8c00; // Color similar al amarillo-naranja\n  margin-bottom: 10px;\n}\n\n.container-text {\n  text-align: justify !important;\n  width: 180px;\n}\n\np {\n  text-align: start;\n}\n\n.p-center {\n  text-align: center;\n}\n\n.p-justify {\n  text-align: start;\n}\n\n.head {\n  padding: 30px;\n  margin-top: 75px;\n  margin-bottom: 20px;\n}\n\n\n.verify-container {\n  // padding: 60px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 40%; // Ocupa todo el espacio disponible en el ion-content\n  text-align: center;\n  //background-color: black;\n}\n\n.fixed-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0px 10px 25px 10px;\n  // background-color: black; // Color de fondo, opcional\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\n\n  ion-button {\n    width: 90%;\n    max-width: 300px;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n}\n\n.dpi-container {\n  display: flex;\n  //width: 100%;\n  justify-content: center;\n  align-items: center;\n  height: 50vh;\n}\n\n.dpi-image {\n  width: 200px;\n}\n\n.image-container {\n  width: 100px;\n  max-width: 90px;\n}\n\n.col-confirmation {\n  margin-top: 100px;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  /* Ajusta el espacio entre los elementos */\n}\n\n.image-item {\n  margin-top: 50px;\n  padding-top: 70px;\n}\n\n.font-confirmation {\n  font-size: 26px;\n  text-align: center;\n  // color: #005da9;\n  color: var(--purple-primary);\n  font-weight: bold;\n}\n\n\n.rounded-input {\n  margin-top: 15px;\n  background-color: #f4f6fc;\n  /* Color de fondo suave */\n  border-radius: 10px;\n  /* Bordes redondeados */\n  padding: 5px 5px;\n  /* Espaciado interno */\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  /* Sombra suave */\n  --ion-border-color: transparent;\n  /* Quita cualquier borde por defecto */\n}\n\nion-input {\n  text-align: center;\n  color: var(--orange-primary);\n  --padding-start: 8px;\n}\n\n.custom-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-between;\n  /* Alinea los botones a los extremos */\n  background-color: #ffffff;\n  /* Fondo opcional */\n  //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional */\n}\n\n.custom-footer ion-button {\n  flex: 0 0 48%;\n  /* Los botones ocupan casi la mitad del espacio */\n}\n\n.custom-footer .left-button {\n  max-width: 140px;\n  color: black;\n\n  --background: white;\n\n  --color: var(--purple-primary);\n\n  --border-radius: 20px;\n  --border-color: white;\n  margin-right: auto;\n  /* Opcional si necesitas ajustes de margen */\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\n\n}\n\n.custom-footer .right-button {\n  margin-left: auto;\n  /* Opcional si necesitas ajustes de margen */\n}\n\n.tutorial-head {\n  padding-top: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.center-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60vh;\n  /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\n  width: 100%;\n}\n\n.tutorial-title {\n  text-align: center;\n}\n\n.rounded-input ion-input {\n  font-size: 14px;\n  /* Tama\u00F1o de texto */\n  color: #333;\n  /* Color del texto */\n}\n\n.rounded-input::part(native) {\n  background: transparent;\n  /* Fondo transparente para evitar conflictos */\n}\n\n.p-info {\n  font-weight: bold;\n  color: #714e93\n}\n\n.custom-button {\n  --background: var(--purple-primary, #82298F) !important;\n  --background-hover: var(--purple-secondary, #2b0d30) !important;\n  --background-activated: var(--purple-secondary, #2b0d30) !important;\n  --color: #ffffff !important;\n  --border-radius: 20px !important;\n  --padding-top: 10px !important;\n  --padding-bottom: 10px !important;\n  --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\n  text-transform: none;\n\n  pointer-events: auto;\n\n}\n\n//blur effect\n\n.blur-effect {\n  filter: blur(5px);\n  pointer-events: none;\n}\n\n.blur-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.7);\n  z-index: 999;\n  filter: blur(5px);\n}\n\n.boton-personalizado {\n  background-color: #4caf50;\n  /* Verde, por ejemplo */\n  color: white;\n  font-size: 16px;\n}\n\n.version {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n  color: #888;\n  z-index: 1000;\n}\n\n.button-debug {\n  --background: #ff4081;\n  --color: #fff;\n}\n\n\n.wrapper-no-internet {\n  background-color: #fff;\n  height: 100vh;\n  display: flex;\n  justify-content: center; /* centra en eje vertical */\n  align-items: center;     /* centra en eje horizontal */\n  padding: 40px;\n  background-image: url('assets/imagesIdvision/background.png') !important;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  \n}\n\n.content-no-internet {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 16px;\n}\n\n.title-no-internet{\n  color: #000;\n  font-size: 32px;\n  font-weight: bold;\n}\n\n.icon-no-internet {\n  width: 125px;\n  display: block;\n  margin-top: 25px;\n}\n\n.description-no-internet {\n  margin-top: 25px;\n  font-size: 22px;\n  color: #000;\n  line-height: 1.5;\n  text-align: center;\n}\n"] }]
+    }], () => [{ type: i0.NgZone }, { type: i1.ModalController }, { type: i2.DpiService }, { type: i1.AlertController }, { type: i1.LoadingController }, { type: i1.Platform }, { type: i3.ModalDpiServices }, { type: i4.ModalVideoSelfieServices }, { type: i5.SdkCommunicationService }, { type: i1.NavController }, { type: i6.ValidateMetaGService }, { type: i0.ChangeDetectorRef }, { type: i7.PhotoSelfieServices }, { type: i1.ToastController }], { dpi: [{
             type: ViewChild,
             args: ['dpi', { static: false }]
         }], isSwipe: [{