metag-sdk-ionic 1.2.7-new-0.1 → 1.2.7-new-0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1322,11 +1322,11 @@ export class IdVisionComponent {
|
|
|
1322
1322
|
i0.ɵɵproperty("ngIf", ctx.showDebug);
|
|
1323
1323
|
i0.ɵɵadvance();
|
|
1324
1324
|
i0.ɵɵstyleProp("display", !ctx.hasInternet ? "block" : "none");
|
|
1325
|
-
} }, dependencies: [IonicModule, i1.IonButton, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i9.NgClass, i9.NgForOf, i9.NgIf, i9.NgSwitch, i9.NgSwitchCase, i9.NgSwitchDefault, HttpClientModule], styles: ["// ============================================\r\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\r\n// ============================================\r\n// Usamos :host para encapsular todo dentro del componente\r\n// y evitar que los estilos globales del padre nos afecten\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n // Reset de estilos globales del padre\r\n * {\r\n box-sizing: border-box;\r\n }\r\n}\r\n\r\n.content {\r\n padding: 10px;\r\n align-items: center;\r\n justify-content: center;\r\n height:
|
|
1325
|
+
} }, dependencies: [IonicModule, i1.IonButton, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i9.NgClass, i9.NgForOf, i9.NgIf, i9.NgSwitch, i9.NgSwitchCase, i9.NgSwitchDefault, HttpClientModule], styles: ["// ============================================\r\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\r\n// ============================================\r\n// Usamos :host para encapsular todo dentro del componente\r\n// y evitar que los estilos globales del padre nos afecten\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n // Reset de estilos globales del padre\r\n * {\r\n box-sizing: border-box;\r\n }\r\n}\r\n\r\n.content {\r\n padding: 10px;\r\n align-items: center;\r\n justify-content: center;\r\n height: 90vh;\r\n background-color: #fff;\r\n font-size: 18px;\r\n background-image: url('assets/imagesIdvision/background.png');\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n}\r\n\r\n.h-title {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: #F38301;\r\n text-align: center;\r\n margin-top: 20px;\r\n}\r\n\r\n:host p {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n}\r\n\r\n:host ion-grid {\r\n margin-top: 20px;\r\n}\r\n\r\n:host ion-row {\r\n margin: 15px 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n:host ion-col {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n:host ion-icon {\r\n font-size: 3em;\r\n color: #ff8c00;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.container-text {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\n:host p {\r\n text-align: start;\r\n}\r\n\r\n.p-center {\r\n text-align: center;\r\n}\r\n\r\n.p-justify {\r\n text-align: start;\r\n}\r\n\r\n.head {\r\n padding: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 80px;\r\n}\r\n\r\n\r\n.verify-container {\r\n // padding: 60px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 40%; // Ocupa todo el espacio disponible en el ion-content\r\n text-align: center;\r\n //background-color: black;\r\n}\r\n\r\n.fixed-footer {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 0px 10px 25px 10px;\r\n // background-color: black; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\r\n\r\n ion-button {\r\n width: 90%;\r\n max-width: 300px;\r\n margin: 0 auto;\r\n background-color: #ffcc00;\r\n color: #ffffff;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n\r\n &:hover {\r\n background-color: #ffb300;\r\n }\r\n\r\n &:active {\r\n background-color: #e6a800;\r\n }\r\n }\r\n}\r\n\r\n.dpi-container {\r\n display: flex;\r\n //width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n height: 45vh;\r\n}\r\n\r\n.dpi-image {\r\n width: 200px;\r\n}\r\n\r\n.image-container {\r\n width: 100px;\r\n max-width: 90px;\r\n}\r\n\r\n.col-confirmation {\r\n margin-top: 100px;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n /* Ajusta el espacio entre los elementos */\r\n}\r\n\r\n.image-item {\r\n margin-top: 50px;\r\n padding-top: 70px;\r\n}\r\n\r\n.font-confirmation {\r\n font-size: 26px;\r\n text-align: center;\r\n // color: #005da9;\r\n color: #82298F;\r\n font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input {\r\n margin-top: 15px;\r\n background-color: #f4f6fc;\r\n /* Color de fondo suave */\r\n border-radius: 10px;\r\n /* Bordes redondeados */\r\n padding: 5px 5px;\r\n /* Espaciado interno */\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n /* Sombra suave */\r\n --ion-border-color: transparent;\r\n /* Quita cualquier borde por defecto */\r\n}\r\n\r\n:host ion-input {\r\n text-align: center;\r\n color: #F38301;\r\n --padding-start: 8px;\r\n}\r\n\r\n:host .custom-footer {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n background-color: #ffffff;\r\n}\r\n\r\n:host .custom-footer ion-button {\r\n flex: 0 0 48%;\r\n}\r\n\r\n:host .custom-footer .left-button {\r\n max-width: 140px;\r\n color: black;\r\n --background: white;\r\n --color: #82298F;\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto;\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n}\r\n\r\n:host .custom-footer .right-button {\r\n margin-left: auto;\r\n}\r\n\r\n.tutorial-head {\r\n padding-top: 50px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: black;\r\n}\r\n\r\n.center-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 60vh;\r\n /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\r\n width: 100%;\r\n}\r\n\r\n.tutorial-title {\r\n text-align: center;\r\n}\r\n\r\n.rounded-input ion-input {\r\n font-size: 14px;\r\n /* Tama\u00F1o de texto */\r\n color: #333;\r\n /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n background: transparent;\r\n /* Fondo transparente para evitar conflictos */\r\n}\r\n\r\n.p-info {\r\n font-weight: bold;\r\n color: #714e93\r\n}\r\n\r\n.custom-button {\r\n --background: var(--purple-primary, #82298F) !important;\r\n --background-hover: var(--purple-secondary, #2b0d30) !important;\r\n --background-activated: var(--purple-secondary, #2b0d30) !important;\r\n --color: #ffffff !important;\r\n --border-radius: 20px !important;\r\n --padding-top: 10px !important;\r\n --padding-bottom: 10px !important;\r\n --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\r\n text-transform: none;\r\n pointer-events: auto;\r\n\r\n}\r\n\r\n//blur effect\r\n\r\n.blur-effect {\r\n filter: blur(5px);\r\n pointer-events: none;\r\n}\r\n\r\n.blur-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(255, 255, 255, 0.7);\r\n z-index: 999;\r\n filter: blur(5px);\r\n}\r\n\r\n.boton-personalizado {\r\n background-color: #4caf50;\r\n /* Verde, por ejemplo */\r\n color: white;\r\n font-size: 16px;\r\n}\r\n\r\n.version {\r\n position: fixed;\r\n bottom: 10px;\r\n right: 10px;\r\n font-size: 12px;\r\n color: #888;\r\n z-index: 1000;\r\n}\r\n\r\n.button-debug {\r\n --background: #ff4081;\r\n --color: #fff;\r\n}\r\n\r\n\r\n.wrapper-no-internet {\r\n background-color: #fff;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center; /* centra en eje vertical */\r\n align-items: center; /* centra en eje horizontal */\r\n padding: 40px;\r\n background-image: url('assets/imagesIdvision/background.png') !important;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n.content-no-internet {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 16px;\r\n}\r\n\r\n.title-no-internet{\r\n color: #000;\r\n font-size: 32px;\r\n font-weight: bold;\r\n}\r\n\r\n.icon-no-internet {\r\n width: 125px;\r\n display: block;\r\n margin-top: 25px;\r\n}\r\n\r\n.description-no-internet {\r\n margin-top: 25px;\r\n font-size: 22px;\r\n color: #000;\r\n line-height: 1.5;\r\n text-align: center;\r\n}\r\n.no-border{\r\n --border-width: 0 !important;\r\n}\r\n\r\n.confirmation-screen {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n height: 100vh; \r\n padding: 25px;\r\n box-sizing: border-box;\r\n background-image: url('assets/imagesIdvision/background.png');\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-color: white;\r\n}\r\n\r\n.image-confirmation {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-grow: 1;\r\n width: 100%;\r\n}\r\n\r\n.image-confirmation img {\r\n max-width: 500px;\r\n width: 80%;\r\n height: auto;\r\n}\r\n\r\n\r\n.close-button {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px; \r\n z-index: 1000;\r\n font-size: 15px;\r\n --color: #888; \r\n}\r\n\r\n.p-margin {\r\n margin-top: 50px !important;\r\n}\r\n\r\n"], encapsulation: 2 }); }
|
|
1326
1326
|
}
|
|
1327
1327
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IdVisionComponent, [{
|
|
1328
1328
|
type: Component,
|
|
1329
|
-
args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule, HttpClientModule], providers: [DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService], encapsulation: ViewEncapsulation.None, template: "\r\n\r\n<ion-content [style.display]=\"hasInternet ? 'block' : 'none'\">\r\n \r\n <swiper-container *ngIf=\"!simpleProcess\" init=\"false\" class=\"custom-swiper\" #swiperContainer>\r\n\r\n <!-- \uD83D\uDD39 PASO 1: Verificaci\u00F3n de Identidad (Est\u00E1tico) -->\r\n <swiper-slide *ngIf=\"!simpleProcess\">\r\n <div class=\"content\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Verifiquemos tu identidad</h2>\r\n <p class=\"p-justify p-margin\">Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).</p>\r\n <ion-item class=\"rounded-input\">\r\n <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"Digita tu n\u00FAmero de DPI\"></ion-input>\r\n </ion-item>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Sube fotos de documentos que prueben tu identidad</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Graba un video selfie, mant\u00E9n tu rostro centrado en la pantalla y evita moverte.</p>\r\n </div>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleClick()\">Empecemos</ion-button>\r\n </div>\r\n </div>\r\n </swiper-slide>\r\n\r\n <!-- \uD83D\uDD39 PASOS INTERMEDIOS: Se generan din\u00E1micamente seg\u00FAn el `order` -->\r\n <swiper-slide *ngFor=\"let step of validationConfig\">\r\n <div class=\"content\" [ngSwitch]=\"step.type\">\r\n <!--Acuerdo de video-->\r\n <div *ngSwitchCase=\"1\" [ngClass]=\"{'blur-effect': simpleProcess}\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Acuerdo de v\u00EDdeo</h2>\r\n <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n </div>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n </div>\r\n </div>\r\n <!-- \uD83D\uDD39 DPI Frontal -->\r\n <div *ngSwitchCase=\"2\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Coloca la parte frontal de tu DPI</h2>\r\n <p class=\"p-center p-info p-margin\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\r\n </div>\r\n <div class=\"dpi-container\">\r\n <img src=\"assets/imagesIdvision/dpi-front-1.png\" alt=\"\" />\r\n </div>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDD39 DPI Trasero -->\r\n <div *ngSwitchCase=\"3\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Coloca el reverso de tu DPI</h2>\r\n <p class=\"p-center p-info p-margin\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\r\n </div>\r\n <div class=\"dpi-container\">\r\n <img src=\"assets/imagesIdvision/dpi-back-1.png\" alt=\"\" />\r\n </div>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDD39 Video Selfie -->\r\n <div *ngSwitchCase=\"4\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Video Selfie</h2>\r\n <p class=\"p-justify p-margin\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n </div>\r\n </ion-row>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n </div>\r\n </div>\r\n <!-- Photo Selfie -->\r\n <!-- TODO Se debera cambiar a 5, se dejo 1 por acuerdo de video -->\r\n <div *ngSwitchCase=\"5\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Foto Selfie</h2>\r\n <p class=\"p-justify\">Toma una foto para completar tu proceso de identificaci\u00F3n.</p>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n </div>\r\n </ion-row>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n </div>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <h2>Paso desconocido</h2>\r\n </div>\r\n </div>\r\n </swiper-slide>\r\n <swiper-slide>\r\n <div class=\"confirmation-screen\">\r\n <div class=\"font-confirmation\" *ngIf=\"isValid\">\r\n <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\r\n </div>\r\n <div class=\"font-confirmation\" *ngIf=\"!isValid\">\r\n <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\r\n </div>\r\n <div class=\"image-confirmation\">\r\n <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"Check morado\" />\r\n </div>\r\n <div class=\"button-container\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\r\n </div>\r\n </div>\r\n\r\n\r\n </swiper-slide>\r\n\r\n </swiper-container>\r\n <div class=\"version\">{{versionSDK}} {{configEnv.show_label ? configEnv.env_name: ''}}</div>\r\n <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\" *ngIf=\"showDebug\">\r\n <ion-fab-button class=\"button-debug\" (click)=\"copyProccess()\">\r\n <ion-icon name=\"bug-outline\"></ion-icon>\r\n </ion-fab-button>\r\n </ion-fab>\r\n\r\n</ion-content>\r\n<!-- pantalla para cuando no exista internet -->\r\n<ion-content [style.display]=\"!hasInternet ? 'block' : 'none'\">\r\n <div class=\"wrapper-no-internet\">\r\n <div class=\"content-no-internet\">\r\n <h2 class=\"title-no-internet\">Error de conexi\u00F3n</h2>\r\n <img src=\"assets/imagesIdvision/no-internet.svg\" alt=\"Error conexi\u00F3n img\" class=\"icon-no-internet\" />\r\n <p class=\"description-no-internet\">\r\n No pudimos cargar la p\u00E1gina. <br>\r\n Verifica tu internet y prueba de nuevo.\r\n </p>\r\n </div>\r\n </div>\r\n</ion-content>", styles: ["// ============================================\r\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\r\n// ============================================\r\n// Usamos :host para encapsular todo dentro del componente\r\n// y evitar que los estilos globales del padre nos afecten\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n // Reset de estilos globales del padre\r\n * {\r\n box-sizing: border-box;\r\n }\r\n}\r\n\r\n.content {\r\n padding: 10px;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100vh;\r\n background-color: #fff;\r\n font-size: 18px;\r\n background-image: url('assets/imagesIdvision/background.png');\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n}\r\n\r\n.h-title {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: #F38301;\r\n text-align: center;\r\n margin-top: 20px;\r\n}\r\n\r\n:host p {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n}\r\n\r\n:host ion-grid {\r\n margin-top: 20px;\r\n}\r\n\r\n:host ion-row {\r\n margin: 15px 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n:host ion-col {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n:host ion-icon {\r\n font-size: 3em;\r\n color: #ff8c00;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.container-text {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\n:host p {\r\n text-align: start;\r\n}\r\n\r\n.p-center {\r\n text-align: center;\r\n}\r\n\r\n.p-justify {\r\n text-align: start;\r\n}\r\n\r\n.head {\r\n padding: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 80px;\r\n}\r\n\r\n\r\n.verify-container {\r\n // padding: 60px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 40%; // Ocupa todo el espacio disponible en el ion-content\r\n text-align: center;\r\n //background-color: black;\r\n}\r\n\r\n.fixed-footer {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 0px 10px 25px 10px;\r\n // background-color: black; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\r\n\r\n ion-button {\r\n width: 90%;\r\n max-width: 300px;\r\n margin: 0 auto;\r\n background-color: #ffcc00;\r\n color: #ffffff;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n\r\n &:hover {\r\n background-color: #ffb300;\r\n }\r\n\r\n &:active {\r\n background-color: #e6a800;\r\n }\r\n }\r\n}\r\n\r\n.dpi-container {\r\n display: flex;\r\n //width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n height: 45vh;\r\n}\r\n\r\n.dpi-image {\r\n width: 200px;\r\n}\r\n\r\n.image-container {\r\n width: 100px;\r\n max-width: 90px;\r\n}\r\n\r\n.col-confirmation {\r\n margin-top: 100px;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n /* Ajusta el espacio entre los elementos */\r\n}\r\n\r\n.image-item {\r\n margin-top: 50px;\r\n padding-top: 70px;\r\n}\r\n\r\n.font-confirmation {\r\n font-size: 26px;\r\n text-align: center;\r\n // color: #005da9;\r\n color: #82298F;\r\n font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input {\r\n margin-top: 15px;\r\n background-color: #f4f6fc;\r\n /* Color de fondo suave */\r\n border-radius: 10px;\r\n /* Bordes redondeados */\r\n padding: 5px 5px;\r\n /* Espaciado interno */\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n /* Sombra suave */\r\n --ion-border-color: transparent;\r\n /* Quita cualquier borde por defecto */\r\n}\r\n\r\n:host ion-input {\r\n text-align: center;\r\n color: #F38301;\r\n --padding-start: 8px;\r\n}\r\n\r\n:host .custom-footer {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n background-color: #ffffff;\r\n}\r\n\r\n:host .custom-footer ion-button {\r\n flex: 0 0 48%;\r\n}\r\n\r\n:host .custom-footer .left-button {\r\n max-width: 140px;\r\n color: black;\r\n --background: white;\r\n --color: #82298F;\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto;\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n}\r\n\r\n:host .custom-footer .right-button {\r\n margin-left: auto;\r\n}\r\n\r\n.tutorial-head {\r\n padding-top: 50px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: black;\r\n}\r\n\r\n.center-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 60vh;\r\n /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\r\n width: 100%;\r\n}\r\n\r\n.tutorial-title {\r\n text-align: center;\r\n}\r\n\r\n.rounded-input ion-input {\r\n font-size: 14px;\r\n /* Tama\u00F1o de texto */\r\n color: #333;\r\n /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n background: transparent;\r\n /* Fondo transparente para evitar conflictos */\r\n}\r\n\r\n.p-info {\r\n font-weight: bold;\r\n color: #714e93\r\n}\r\n\r\n.custom-button {\r\n --background: var(--purple-primary, #82298F) !important;\r\n --background-hover: var(--purple-secondary, #2b0d30) !important;\r\n --background-activated: var(--purple-secondary, #2b0d30) !important;\r\n --color: #ffffff !important;\r\n --border-radius: 20px !important;\r\n --padding-top: 10px !important;\r\n --padding-bottom: 10px !important;\r\n --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\r\n text-transform: none;\r\n pointer-events: auto;\r\n\r\n}\r\n\r\n//blur effect\r\n\r\n.blur-effect {\r\n filter: blur(5px);\r\n pointer-events: none;\r\n}\r\n\r\n.blur-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(255, 255, 255, 0.7);\r\n z-index: 999;\r\n filter: blur(5px);\r\n}\r\n\r\n.boton-personalizado {\r\n background-color: #4caf50;\r\n /* Verde, por ejemplo */\r\n color: white;\r\n font-size: 16px;\r\n}\r\n\r\n.version {\r\n position: fixed;\r\n bottom: 10px;\r\n right: 10px;\r\n font-size: 12px;\r\n color: #888;\r\n z-index: 1000;\r\n}\r\n\r\n.button-debug {\r\n --background: #ff4081;\r\n --color: #fff;\r\n}\r\n\r\n\r\n.wrapper-no-internet {\r\n background-color: #fff;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center; /* centra en eje vertical */\r\n align-items: center; /* centra en eje horizontal */\r\n padding: 40px;\r\n background-image: url('assets/imagesIdvision/background.png') !important;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n.content-no-internet {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 16px;\r\n}\r\n\r\n.title-no-internet{\r\n color: #000;\r\n font-size: 32px;\r\n font-weight: bold;\r\n}\r\n\r\n.icon-no-internet {\r\n width: 125px;\r\n display: block;\r\n margin-top: 25px;\r\n}\r\n\r\n.description-no-internet {\r\n margin-top: 25px;\r\n font-size: 22px;\r\n color: #000;\r\n line-height: 1.5;\r\n text-align: center;\r\n}\r\n.no-border{\r\n --border-width: 0 !important;\r\n}\r\n\r\n.confirmation-screen {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n height: 100vh; \r\n padding: 25px;\r\n box-sizing: border-box;\r\n background-image: url('assets/imagesIdvision/background.png');\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-color: white;\r\n}\r\n\r\n.image-confirmation {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-grow: 1;\r\n width: 100%;\r\n}\r\n\r\n.image-confirmation img {\r\n max-width: 500px;\r\n width: 80%;\r\n height: auto;\r\n}\r\n\r\n\r\n.close-button {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px; \r\n z-index: 1000;\r\n font-size: 15px;\r\n --color: #888; \r\n}\r\n\r\n.p-margin {\r\n margin-top: 50px !important;\r\n}\r\n\r\n"] }]
|
|
1329
|
+
args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule, HttpClientModule], providers: [DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService], encapsulation: ViewEncapsulation.None, template: "\r\n\r\n<ion-content [style.display]=\"hasInternet ? 'block' : 'none'\">\r\n \r\n <swiper-container *ngIf=\"!simpleProcess\" init=\"false\" class=\"custom-swiper\" #swiperContainer>\r\n\r\n <!-- \uD83D\uDD39 PASO 1: Verificaci\u00F3n de Identidad (Est\u00E1tico) -->\r\n <swiper-slide *ngIf=\"!simpleProcess\">\r\n <div class=\"content\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Verifiquemos tu identidad</h2>\r\n <p class=\"p-justify p-margin\">Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).</p>\r\n <ion-item class=\"rounded-input\">\r\n <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"Digita tu n\u00FAmero de DPI\"></ion-input>\r\n </ion-item>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Sube fotos de documentos que prueben tu identidad</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Graba un video selfie, mant\u00E9n tu rostro centrado en la pantalla y evita moverte.</p>\r\n </div>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleClick()\">Empecemos</ion-button>\r\n </div>\r\n </div>\r\n </swiper-slide>\r\n\r\n <!-- \uD83D\uDD39 PASOS INTERMEDIOS: Se generan din\u00E1micamente seg\u00FAn el `order` -->\r\n <swiper-slide *ngFor=\"let step of validationConfig\">\r\n <div class=\"content\" [ngSwitch]=\"step.type\">\r\n <!--Acuerdo de video-->\r\n <div *ngSwitchCase=\"1\" [ngClass]=\"{'blur-effect': simpleProcess}\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Acuerdo de v\u00EDdeo</h2>\r\n <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n </div>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n </div>\r\n </div>\r\n <!-- \uD83D\uDD39 DPI Frontal -->\r\n <div *ngSwitchCase=\"2\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Coloca la parte frontal de tu DPI</h2>\r\n <p class=\"p-center p-info p-margin\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\r\n </div>\r\n <div class=\"dpi-container\">\r\n <img src=\"assets/imagesIdvision/dpi-front-1.png\" alt=\"\" />\r\n </div>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDD39 DPI Trasero -->\r\n <div *ngSwitchCase=\"3\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Coloca el reverso de tu DPI</h2>\r\n <p class=\"p-center p-info p-margin\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\r\n </div>\r\n <div class=\"dpi-container\">\r\n <img src=\"assets/imagesIdvision/dpi-back-1.png\" alt=\"\" />\r\n </div>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\r\n </div>\r\n </div>\r\n\r\n <!-- \uD83D\uDD39 Video Selfie -->\r\n <div *ngSwitchCase=\"4\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Video Selfie</h2>\r\n <p class=\"p-justify p-margin\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p class=\"p-justify\">Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n </div>\r\n </ion-row>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n </div>\r\n </div>\r\n <!-- Photo Selfie -->\r\n <!-- TODO Se debera cambiar a 5, se dejo 1 por acuerdo de video -->\r\n <div *ngSwitchCase=\"5\">\r\n <div class=\"head\">\r\n <h2 class=\"h-title\">Foto Selfie</h2>\r\n <p class=\"p-justify\">Toma una foto para completar tu proceso de identificaci\u00F3n.</p>\r\n </div>\r\n <ion-grid class=\"verify-container\">\r\n <ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n </div>\r\n </ion-row>\r\n <ion-row>\r\n <div class=\"image-container\">\r\n <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n </div>\r\n <div class=\"container-text\">\r\n <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n </div>\r\n </ion-row>\r\n </ion-row>\r\n </ion-grid>\r\n <div class=\"fixed-footer\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n </div>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <h2>Paso desconocido</h2>\r\n </div>\r\n </div>\r\n </swiper-slide>\r\n <swiper-slide>\r\n <div class=\"confirmation-screen\">\r\n <div class=\"font-confirmation\" *ngIf=\"isValid\">\r\n <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\r\n </div>\r\n <div class=\"font-confirmation\" *ngIf=\"!isValid\">\r\n <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\r\n </div>\r\n <div class=\"image-confirmation\">\r\n <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"Check morado\" />\r\n </div>\r\n <div class=\"button-container\">\r\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\r\n </div>\r\n </div>\r\n\r\n\r\n </swiper-slide>\r\n\r\n </swiper-container>\r\n <div class=\"version\">{{versionSDK}} {{configEnv.show_label ? configEnv.env_name: ''}}</div>\r\n <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\" *ngIf=\"showDebug\">\r\n <ion-fab-button class=\"button-debug\" (click)=\"copyProccess()\">\r\n <ion-icon name=\"bug-outline\"></ion-icon>\r\n </ion-fab-button>\r\n </ion-fab>\r\n\r\n</ion-content>\r\n<!-- pantalla para cuando no exista internet -->\r\n<ion-content [style.display]=\"!hasInternet ? 'block' : 'none'\">\r\n <div class=\"wrapper-no-internet\">\r\n <div class=\"content-no-internet\">\r\n <h2 class=\"title-no-internet\">Error de conexi\u00F3n</h2>\r\n <img src=\"assets/imagesIdvision/no-internet.svg\" alt=\"Error conexi\u00F3n img\" class=\"icon-no-internet\" />\r\n <p class=\"description-no-internet\">\r\n No pudimos cargar la p\u00E1gina. <br>\r\n Verifica tu internet y prueba de nuevo.\r\n </p>\r\n </div>\r\n </div>\r\n</ion-content>", styles: ["// ============================================\r\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\r\n// ============================================\r\n// Usamos :host para encapsular todo dentro del componente\r\n// y evitar que los estilos globales del padre nos afecten\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n // Reset de estilos globales del padre\r\n * {\r\n box-sizing: border-box;\r\n }\r\n}\r\n\r\n.content {\r\n padding: 10px;\r\n align-items: center;\r\n justify-content: center;\r\n height: 90vh;\r\n background-color: #fff;\r\n font-size: 18px;\r\n background-image: url('assets/imagesIdvision/background.png');\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n}\r\n\r\n.h-title {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: #F38301;\r\n text-align: center;\r\n margin-top: 20px;\r\n}\r\n\r\n:host p {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n}\r\n\r\n:host ion-grid {\r\n margin-top: 20px;\r\n}\r\n\r\n:host ion-row {\r\n margin: 15px 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n:host ion-col {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n:host ion-icon {\r\n font-size: 3em;\r\n color: #ff8c00;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.container-text {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\n:host p {\r\n text-align: start;\r\n}\r\n\r\n.p-center {\r\n text-align: center;\r\n}\r\n\r\n.p-justify {\r\n text-align: start;\r\n}\r\n\r\n.head {\r\n padding: 20px;\r\n margin-top: 20px;\r\n margin-bottom: 80px;\r\n}\r\n\r\n\r\n.verify-container {\r\n // padding: 60px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 40%; // Ocupa todo el espacio disponible en el ion-content\r\n text-align: center;\r\n //background-color: black;\r\n}\r\n\r\n.fixed-footer {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 0px 10px 25px 10px;\r\n // background-color: black; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\r\n\r\n ion-button {\r\n width: 90%;\r\n max-width: 300px;\r\n margin: 0 auto;\r\n background-color: #ffcc00;\r\n color: #ffffff;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n\r\n &:hover {\r\n background-color: #ffb300;\r\n }\r\n\r\n &:active {\r\n background-color: #e6a800;\r\n }\r\n }\r\n}\r\n\r\n.dpi-container {\r\n display: flex;\r\n //width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n height: 45vh;\r\n}\r\n\r\n.dpi-image {\r\n width: 200px;\r\n}\r\n\r\n.image-container {\r\n width: 100px;\r\n max-width: 90px;\r\n}\r\n\r\n.col-confirmation {\r\n margin-top: 100px;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n /* Ajusta el espacio entre los elementos */\r\n}\r\n\r\n.image-item {\r\n margin-top: 50px;\r\n padding-top: 70px;\r\n}\r\n\r\n.font-confirmation {\r\n font-size: 26px;\r\n text-align: center;\r\n // color: #005da9;\r\n color: #82298F;\r\n font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input {\r\n margin-top: 15px;\r\n background-color: #f4f6fc;\r\n /* Color de fondo suave */\r\n border-radius: 10px;\r\n /* Bordes redondeados */\r\n padding: 5px 5px;\r\n /* Espaciado interno */\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n /* Sombra suave */\r\n --ion-border-color: transparent;\r\n /* Quita cualquier borde por defecto */\r\n}\r\n\r\n:host ion-input {\r\n text-align: center;\r\n color: #F38301;\r\n --padding-start: 8px;\r\n}\r\n\r\n:host .custom-footer {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n background-color: #ffffff;\r\n}\r\n\r\n:host .custom-footer ion-button {\r\n flex: 0 0 48%;\r\n}\r\n\r\n:host .custom-footer .left-button {\r\n max-width: 140px;\r\n color: black;\r\n --background: white;\r\n --color: #82298F;\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto;\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n}\r\n\r\n:host .custom-footer .right-button {\r\n margin-left: auto;\r\n}\r\n\r\n.tutorial-head {\r\n padding-top: 50px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: black;\r\n}\r\n\r\n.center-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 60vh;\r\n /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\r\n width: 100%;\r\n}\r\n\r\n.tutorial-title {\r\n text-align: center;\r\n}\r\n\r\n.rounded-input ion-input {\r\n font-size: 14px;\r\n /* Tama\u00F1o de texto */\r\n color: #333;\r\n /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n background: transparent;\r\n /* Fondo transparente para evitar conflictos */\r\n}\r\n\r\n.p-info {\r\n font-weight: bold;\r\n color: #714e93\r\n}\r\n\r\n.custom-button {\r\n --background: var(--purple-primary, #82298F) !important;\r\n --background-hover: var(--purple-secondary, #2b0d30) !important;\r\n --background-activated: var(--purple-secondary, #2b0d30) !important;\r\n --color: #ffffff !important;\r\n --border-radius: 20px !important;\r\n --padding-top: 10px !important;\r\n --padding-bottom: 10px !important;\r\n --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\r\n text-transform: none;\r\n pointer-events: auto;\r\n\r\n}\r\n\r\n//blur effect\r\n\r\n.blur-effect {\r\n filter: blur(5px);\r\n pointer-events: none;\r\n}\r\n\r\n.blur-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(255, 255, 255, 0.7);\r\n z-index: 999;\r\n filter: blur(5px);\r\n}\r\n\r\n.boton-personalizado {\r\n background-color: #4caf50;\r\n /* Verde, por ejemplo */\r\n color: white;\r\n font-size: 16px;\r\n}\r\n\r\n.version {\r\n position: fixed;\r\n bottom: 10px;\r\n right: 10px;\r\n font-size: 12px;\r\n color: #888;\r\n z-index: 1000;\r\n}\r\n\r\n.button-debug {\r\n --background: #ff4081;\r\n --color: #fff;\r\n}\r\n\r\n\r\n.wrapper-no-internet {\r\n background-color: #fff;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center; /* centra en eje vertical */\r\n align-items: center; /* centra en eje horizontal */\r\n padding: 40px;\r\n background-image: url('assets/imagesIdvision/background.png') !important;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n.content-no-internet {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 16px;\r\n}\r\n\r\n.title-no-internet{\r\n color: #000;\r\n font-size: 32px;\r\n font-weight: bold;\r\n}\r\n\r\n.icon-no-internet {\r\n width: 125px;\r\n display: block;\r\n margin-top: 25px;\r\n}\r\n\r\n.description-no-internet {\r\n margin-top: 25px;\r\n font-size: 22px;\r\n color: #000;\r\n line-height: 1.5;\r\n text-align: center;\r\n}\r\n.no-border{\r\n --border-width: 0 !important;\r\n}\r\n\r\n.confirmation-screen {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n height: 100vh; \r\n padding: 25px;\r\n box-sizing: border-box;\r\n background-image: url('assets/imagesIdvision/background.png');\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-color: white;\r\n}\r\n\r\n.image-confirmation {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-grow: 1;\r\n width: 100%;\r\n}\r\n\r\n.image-confirmation img {\r\n max-width: 500px;\r\n width: 80%;\r\n height: auto;\r\n}\r\n\r\n\r\n.close-button {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px; \r\n z-index: 1000;\r\n font-size: 15px;\r\n --color: #888; \r\n}\r\n\r\n.p-margin {\r\n margin-top: 50px !important;\r\n}\r\n\r\n"] }]
|
|
1330
1330
|
}], () => [{ type: i1.ModalController }, { type: i1.AlertController }, { type: i1.Platform }, { type: i2.ModalDpiServices }, { type: i3.SdkCommunicationService }, { type: i1.NavController }, { type: i0.ChangeDetectorRef }, { type: i1.ToastController }, { type: i1.LoadingController }, { type: i4.ConfigurationService }, { type: i5.ValidationService }, { type: i6.NavigationService }, { type: i7.ProcessingService }, { type: i8.DpiService }], { dpi: [{
|
|
1331
1331
|
type: ViewChild,
|
|
1332
1332
|
args: ['dpi', { static: false }]
|
package/package.json
CHANGED