metag-sdk-ionic 1.1.55 → 1.1.56
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.
|
@@ -1408,11 +1408,11 @@ export class IdVisionComponent {
|
|
|
1408
1408
|
i0.ɵɵproperty("ngIf", ctx.showDebug);
|
|
1409
1409
|
i0.ɵɵadvance();
|
|
1410
1410
|
i0.ɵɵstyleProp("display", !ctx.hasInternet ? "block" : "none");
|
|
1411
|
-
} }, dependencies: [IonicModule, i1.IonButton, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i5.NgClass, i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.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\n.h-title[_ngcontent-%COMP%] {\n font-size: 1.5em;\n font-weight: bold;\n color: #F38301;\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: #82298F;\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: #F38301;\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: #82298F;\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}\n.no-border[_ngcontent-%COMP%]{\n --border-width: 0 !important;\n}\n\n.confirmation-screen[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh; \n padding: 25px;\n box-sizing: border-box;\n background-image: url('assets/imagesIdvision/background.png');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n background-color: white;\n}\n\n.image-confirmation[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n width: 100%;\n}\n\n.image-confirmation[_ngcontent-%COMP%] img[_ngcontent-%COMP%] {\n max-width: 500px;\n width: 80%;\n height: auto;\n}\n\n\n.close-button[_ngcontent-%COMP%] {\n position: absolute;\n top: 12px;\n right: 12px; \n z-index: 1000;\n font-size: 15px;\n --color: #
|
|
1411
|
+
} }, dependencies: [IonicModule, i1.IonButton, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i5.NgClass, i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.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\n.h-title[_ngcontent-%COMP%] {\n font-size: 1.5em;\n font-weight: bold;\n color: #F38301;\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: #82298F;\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: #F38301;\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: #82298F;\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}\n.no-border[_ngcontent-%COMP%]{\n --border-width: 0 !important;\n}\n\n.confirmation-screen[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh; \n padding: 25px;\n box-sizing: border-box;\n background-image: url('assets/imagesIdvision/background.png');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n background-color: white;\n}\n\n.image-confirmation[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n width: 100%;\n}\n\n.image-confirmation[_ngcontent-%COMP%] img[_ngcontent-%COMP%] {\n max-width: 500px;\n width: 80%;\n height: auto;\n}\n\n\n.close-button[_ngcontent-%COMP%] {\n position: absolute;\n top: 12px;\n right: 12px; \n z-index: 1000;\n font-size: 15px;\n --color: #888; \n}"] }); }
|
|
1412
1412
|
}
|
|
1413
1413
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IdVisionComponent, [{
|
|
1414
1414
|
type: Component,
|
|
1415
|
-
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 <ion-button fill=\"clear\" class=\"close-button\" (click)=\"handleClose()\">\n <ion-icon name=\"close-outline\"></ion-icon>\n </ion-button>\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=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 <div *ngSwitchDefault>\n <h2>Paso desconocido</h2>\n </div>\n </div>\n </swiper-slide>\n <swiper-slide>\n\n <div class=\"confirmation-screen\">\n <!-- T\u00EDtulo arriba -->\n <div class=\"font-confirmation\" *ngIf=\"isValid\">\n <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\n </div>\n <div class=\"font-confirmation\" *ngIf=\"!isValid\">\n <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\n </div>\n <!-- Imagen al centro -->\n <div class=\"image-confirmation\">\n <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"Check morado\" />\n </div>\n <div class=\"button-container\">\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\n </div>\n </div>\n\n\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\n.h-title {\n font-size: 1.5em;\n font-weight: bold;\n color: #F38301;\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: #82298F;\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: #F38301;\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: #82298F;\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.no-border{\n --border-width: 0 !important;\n}\n\n.confirmation-screen {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh; \n padding: 25px;\n box-sizing: border-box;\n background-image: url('assets/imagesIdvision/background.png');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n background-color: white;\n}\n\n.image-confirmation {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n width: 100%;\n}\n\n.image-confirmation img {\n max-width: 500px;\n width: 80%;\n height: auto;\n}\n\n\n.close-button {\n position: absolute;\n top: 12px;\n right: 12px; \n z-index: 1000;\n font-size: 15px;\n --color: #000; \n}\n"] }]
|
|
1415
|
+
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 <ion-button fill=\"clear\" class=\"close-button\" (click)=\"handleClose()\">\n <ion-icon name=\"close-outline\"></ion-icon>\n </ion-button>\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=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 class=\"h-title\">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 <div *ngSwitchDefault>\n <h2>Paso desconocido</h2>\n </div>\n </div>\n </swiper-slide>\n <swiper-slide>\n\n <div class=\"confirmation-screen\">\n <!-- T\u00EDtulo arriba -->\n <div class=\"font-confirmation\" *ngIf=\"isValid\">\n <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\n </div>\n <div class=\"font-confirmation\" *ngIf=\"!isValid\">\n <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\n </div>\n <!-- Imagen al centro -->\n <div class=\"image-confirmation\">\n <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"Check morado\" />\n </div>\n <div class=\"button-container\">\n <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Salir</ion-button>\n </div>\n </div>\n\n\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\n.h-title {\n font-size: 1.5em;\n font-weight: bold;\n color: #F38301;\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: #82298F;\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: #F38301;\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: #82298F;\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.no-border{\n --border-width: 0 !important;\n}\n\n.confirmation-screen {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh; \n padding: 25px;\n box-sizing: border-box;\n background-image: url('assets/imagesIdvision/background.png');\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n background-color: white;\n}\n\n.image-confirmation {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n width: 100%;\n}\n\n.image-confirmation img {\n max-width: 500px;\n width: 80%;\n height: auto;\n}\n\n\n.close-button {\n position: absolute;\n top: 12px;\n right: 12px; \n z-index: 1000;\n font-size: 15px;\n --color: #888; \n}\n"] }]
|
|
1416
1416
|
}], () => [{ type: i1.ModalController }, { type: i2.DpiService }, { type: i1.AlertController }, { type: i1.LoadingController }, { type: i1.Platform }, { type: i3.ModalDpiServices }, { type: i4.SdkCommunicationService }, { type: i1.NavController }, { type: i0.ChangeDetectorRef }, { type: i1.ToastController }], { dpi: [{
|
|
1417
1417
|
type: ViewChild,
|
|
1418
1418
|
args: ['dpi', { static: false }]
|
package/package.json
CHANGED