metag-sdk-ionic 1.2.7-dev-0.21 → 1.2.7-dev-0.23
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.
- package/dist/src/app/pages/id-vision/components/camara-acuerdo-video/camara-acuerdo.video.component.js +2 -2
- package/dist/src/app/pages/id-vision/id-vision.component.js +2 -2
- package/dist/src/app/pages/id-vision/services/navigation/navigation.service.js +1 -4
- package/dist/src/app/pages/id-vision/services/navigation/navigation.service.js.map +1 -1
- package/dist/src/app/pages/slides/dpi-back/slide2.component.js +2 -2
- package/dist/src/app/pages/slides/dpi-front/slide1.component.js +2 -2
- package/dist/src/app/pages/slides/video-selfie/slide3.component.js +2 -2
- package/package.json +1 -1
|
@@ -228,11 +228,11 @@ export class CamaraAcuerdoVideoComponent {
|
|
|
228
228
|
i0.ɵɵproperty("disabled", ctx.isRecording && ctx.timeRemaining > 5);
|
|
229
229
|
i0.ɵɵadvance();
|
|
230
230
|
i0.ɵɵtextInterpolate1(" ", ctx.isRecording ? "Detener Grabaci\u00F3n" : "Iniciar Grabaci\u00F3n", " ");
|
|
231
|
-
} }, dependencies: [i3.NgIf, i1.IonButton, i1.IonContent, i1.IonIcon], styles: [".video-container[_ngcontent-%COMP%] {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background: black;\r\n \r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.5);\r\n \r\n .overlay-text {\r\n display: flex;\r\n align-items: center; \r\n justify-content: center; \r\n margin-top: 20px;\r\n color: white;\r\n font-size: 14px;\r\n // text-align: center;\r\n gap: 8px;\r\n \r\n ion-icon {\r\n padding-top: 4px;\r\n color: red;\r\n font-size: 12px;\r\n // margin-left: 5px;\r\n }\r\n }\r\n \r\n .instruction-text-1 {\r\n color: red;\r\n font-size: 14px;\r\n text-align: center;\r\n }\r\n \r\n .instruction-text {\r\n color: black;\r\n text-align: center;\r\n padding: 0px 15px;\r\n }\r\n \r\n .button-container {\r\n background-color: white;\r\n bottom: 20px;\r\n padding: 10px;\r\n
|
|
231
|
+
} }, dependencies: [i3.NgIf, i1.IonButton, i1.IonContent, i1.IonIcon], styles: [".video-container[_ngcontent-%COMP%] {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background: black;\r\n \r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.5);\r\n \r\n .overlay-text {\r\n display: flex;\r\n align-items: center; \r\n justify-content: center; \r\n margin-top: 20px;\r\n color: white;\r\n font-size: 14px;\r\n // text-align: center;\r\n gap: 8px;\r\n \r\n ion-icon {\r\n padding-top: 4px;\r\n color: red;\r\n font-size: 12px;\r\n // margin-left: 5px;\r\n }\r\n }\r\n \r\n .instruction-text-1 {\r\n color: red;\r\n font-size: 14px;\r\n text-align: center;\r\n }\r\n \r\n .instruction-text {\r\n color: black;\r\n text-align: center;\r\n padding: 0px 15px;\r\n }\r\n \r\n .button-container {\r\n background-color: white;\r\n bottom: 20px;\r\n padding: 10px;\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 --background: var(--purple-primary)\r\n --background-hover: var(--purple-secondary);\r\n --background-activated: var(--purple-secondary);\r\n --background-focused: var(--purple-secondary);\r\n \r\n --color: var(--purple-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--purple-primary);\r\n --border-style: solid;\r\n --border-width: 1px;\r\n \r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n \r\n --ripple-color: var(--purple-secondary);\r\n \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 }\r\n \r\n .countdown-overlay[_ngcontent-%COMP%] {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.6);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n \r\n .countdown {\r\n font-size: 100px;\r\n font-weight: bold;\r\n color: white;\r\n }\r\n }\r\n\r\n.recording-timer[_ngcontent-%COMP%] {\r\n color: red;\r\n text-align: center;\r\n padding: 0;\r\n font-size: 13px;\r\n}\r\n.close-button[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n border-radius: 50%;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n \r\n ion-icon {\r\n color: white;\r\n font-size: 18px;\r\n }\r\n \r\n &:hover {\r\n background: rgba(0, 0, 0, 0.7);\r\n }\r\n }\r\n\r\n video[_ngcontent-%COMP%] {\r\n transform: scaleX(-1);\r\n }"] }); }
|
|
232
232
|
}
|
|
233
233
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CamaraAcuerdoVideoComponent, [{
|
|
234
234
|
type: Component,
|
|
235
|
-
args: [{ selector: 'app-acuerdo-video', template: "<ion-content class=\"video-container\">\r\n <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n <div class=\"countdown\">{{ countdown }}</div>\r\n </div>\r\n \r\n <video #videoElement autoplay muted playsinline></video>\r\n \r\n <div class=\"overlay\">\r\n <div class=\"overlay-text\">\r\n <p *ngIf=\"!isRecording\">Toca 'Inicia la grabaci\u00F3n' cuando est\u00E9s listo</p>\r\n <p *ngIf=\"isRecording\" class=\"recording-text\">\r\n Grabando...\r\n </p>\r\n <div *ngIf=\"isRecording\" class=\"icon-text\"><ion-icon size=\"small\" name=\"radio-button-on-outline\"></ion-icon></div>\r\n </div>\r\n\r\n <div class=\"close-button\">\r\n <ion-icon name=\"close-outline\" (click)=\"closeOverlayVideo()\"></ion-icon>\r\n </div>\r\n \r\n \r\n <div class=\"button-container\">\r\n <p class=\"instruction-text-1\">Repite el siguiente texto</p>\r\n <p class=\"recording-timer\" *ngIf=\"isRecording\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining }}</p>\r\n <p class=\"instruction-text\">Acepto los t\u00E9rminos y condiciones del cr\u00E9dito que estoy solicitando en Fundaci\u00F3n G\u00E9nesis Empresarial</p>\r\n \r\n <ion-button expand=\"block\" \r\n (click)=\"isRecording ? stopRecording() : recordVideo()\" \r\n [disabled]=\"isRecording && timeRemaining > 5\">\r\n {{ isRecording ? 'Detener Grabaci\u00F3n' : 'Iniciar Grabaci\u00F3n' }}\r\n </ion-button>\r\n \r\n </div>\r\n </div>\r\n </ion-content>\r\n ", styles: [".video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background: black;\r\n \r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.5);\r\n \r\n .overlay-text {\r\n display: flex;\r\n align-items: center; \r\n justify-content: center; \r\n margin-top: 20px;\r\n color: white;\r\n font-size: 14px;\r\n // text-align: center;\r\n gap: 8px;\r\n \r\n ion-icon {\r\n padding-top: 4px;\r\n color: red;\r\n font-size: 12px;\r\n // margin-left: 5px;\r\n }\r\n }\r\n \r\n .instruction-text-1 {\r\n color: red;\r\n font-size: 14px;\r\n text-align: center;\r\n }\r\n \r\n .instruction-text {\r\n color: black;\r\n text-align: center;\r\n padding: 0px 15px;\r\n }\r\n \r\n .button-container {\r\n background-color: white;\r\n bottom: 20px;\r\n padding: 10px;\r\n
|
|
235
|
+
args: [{ selector: 'app-acuerdo-video', template: "<ion-content class=\"video-container\">\r\n <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n <div class=\"countdown\">{{ countdown }}</div>\r\n </div>\r\n \r\n <video #videoElement autoplay muted playsinline></video>\r\n \r\n <div class=\"overlay\">\r\n <div class=\"overlay-text\">\r\n <p *ngIf=\"!isRecording\">Toca 'Inicia la grabaci\u00F3n' cuando est\u00E9s listo</p>\r\n <p *ngIf=\"isRecording\" class=\"recording-text\">\r\n Grabando...\r\n </p>\r\n <div *ngIf=\"isRecording\" class=\"icon-text\"><ion-icon size=\"small\" name=\"radio-button-on-outline\"></ion-icon></div>\r\n </div>\r\n\r\n <div class=\"close-button\">\r\n <ion-icon name=\"close-outline\" (click)=\"closeOverlayVideo()\"></ion-icon>\r\n </div>\r\n \r\n \r\n <div class=\"button-container\">\r\n <p class=\"instruction-text-1\">Repite el siguiente texto</p>\r\n <p class=\"recording-timer\" *ngIf=\"isRecording\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining }}</p>\r\n <p class=\"instruction-text\">Acepto los t\u00E9rminos y condiciones del cr\u00E9dito que estoy solicitando en Fundaci\u00F3n G\u00E9nesis Empresarial</p>\r\n \r\n <ion-button expand=\"block\" \r\n (click)=\"isRecording ? stopRecording() : recordVideo()\" \r\n [disabled]=\"isRecording && timeRemaining > 5\">\r\n {{ isRecording ? 'Detener Grabaci\u00F3n' : 'Iniciar Grabaci\u00F3n' }}\r\n </ion-button>\r\n \r\n </div>\r\n </div>\r\n </ion-content>\r\n ", styles: [".video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background: black;\r\n \r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.5);\r\n \r\n .overlay-text {\r\n display: flex;\r\n align-items: center; \r\n justify-content: center; \r\n margin-top: 20px;\r\n color: white;\r\n font-size: 14px;\r\n // text-align: center;\r\n gap: 8px;\r\n \r\n ion-icon {\r\n padding-top: 4px;\r\n color: red;\r\n font-size: 12px;\r\n // margin-left: 5px;\r\n }\r\n }\r\n \r\n .instruction-text-1 {\r\n color: red;\r\n font-size: 14px;\r\n text-align: center;\r\n }\r\n \r\n .instruction-text {\r\n color: black;\r\n text-align: center;\r\n padding: 0px 15px;\r\n }\r\n \r\n .button-container {\r\n background-color: white;\r\n bottom: 20px;\r\n padding: 10px;\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 --background: var(--purple-primary)\r\n --background-hover: var(--purple-secondary);\r\n --background-activated: var(--purple-secondary);\r\n --background-focused: var(--purple-secondary);\r\n \r\n --color: var(--purple-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--purple-primary);\r\n --border-style: solid;\r\n --border-width: 1px;\r\n \r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n \r\n --ripple-color: var(--purple-secondary);\r\n \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 }\r\n \r\n .countdown-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.6);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n \r\n .countdown {\r\n font-size: 100px;\r\n font-weight: bold;\r\n color: white;\r\n }\r\n }\r\n\r\n.recording-timer {\r\n color: red;\r\n text-align: center;\r\n padding: 0;\r\n font-size: 13px;\r\n}\r\n.close-button {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n border-radius: 50%;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n \r\n ion-icon {\r\n color: white;\r\n font-size: 18px;\r\n }\r\n \r\n &:hover {\r\n background: rgba(0, 0, 0, 0.7);\r\n }\r\n }\r\n\r\n video {\r\n transform: scaleX(-1);\r\n }"] }]
|
|
236
236
|
}], () => [{ type: i1.Platform }, { type: i0.ChangeDetectorRef }, { type: i2.ModalDpiServices }, { type: i1.ModalController }], { videoElement: [{
|
|
237
237
|
type: ViewChild,
|
|
238
238
|
args: ['videoElement', { static: false }]
|
|
@@ -1372,11 +1372,11 @@ export class IdVisionComponent {
|
|
|
1372
1372
|
i0.ɵɵproperty("ngIf", ctx.showDebug);
|
|
1373
1373
|
i0.ɵɵadvance();
|
|
1374
1374
|
i0.ɵɵstyleProp("display", !ctx.hasInternet ? "block" : "none");
|
|
1375
|
-
} }, 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: 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
|
|
1375
|
+
} }, 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: 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\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: 3 }); }
|
|
1376
1376
|
}
|
|
1377
1377
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IdVisionComponent, [{
|
|
1378
1378
|
type: Component,
|
|
1379
|
-
args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule, HttpClientModule], providers: [DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService], encapsulation: ViewEncapsulation.ShadowDom, template: "\r\n\r\n<ion-content [style.display]=\"hasInternet ? 'block' : 'none'\">\r\n \r\n <swiper-container *ngIf=\"isInitialized && !simpleProcess\" init=\"false\" class=\"custom-swiper\">\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"] }]
|
|
1379
|
+
args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule, HttpClientModule], providers: [DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService], encapsulation: ViewEncapsulation.ShadowDom, template: "\r\n\r\n<ion-content [style.display]=\"hasInternet ? 'block' : 'none'\">\r\n \r\n <swiper-container *ngIf=\"isInitialized && !simpleProcess\" init=\"false\" class=\"custom-swiper\">\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\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"] }]
|
|
1380
1380
|
}], () => [{ 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: [{
|
|
1381
1381
|
type: ViewChild,
|
|
1382
1382
|
args: ['dpi', { static: false }]
|
|
@@ -30,10 +30,7 @@ export class NavigationService {
|
|
|
30
30
|
console.warn('⚠️ Error al inicializar swiper:', error);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
|
|
34
|
-
// No mostrar error, simplemente loguear info ya que puede ser simpleProcess
|
|
35
|
-
console.log('ℹ️ Elemento swiper-container no encontrado (posiblemente es simpleProcess)');
|
|
36
|
-
}
|
|
33
|
+
// Si no se encuentra el elemento, no mostrar nada (es normal en simpleProcess)
|
|
37
34
|
}, 100);
|
|
38
35
|
}
|
|
39
36
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.service.js","sourceRoot":"","sources":["../../../../../../../src/app/pages/id-vision/services/navigation/navigation.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAO3C,MAAM,OAAO,iBAAiB;IAH9B;QAIU,cAAS,GAA2B,IAAI,CAAC;QACzC,qBAAgB,GAAuB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"navigation.service.js","sourceRoot":"","sources":["../../../../../../../src/app/pages/id-vision/services/navigation/navigation.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAO3C,MAAM,OAAO,iBAAiB;IAH9B;QAIU,cAAS,GAA2B,IAAI,CAAC;QACzC,qBAAgB,GAAuB,EAAE,CAAC;KA8HnD;IA5HC;;OAEG;IACH,gBAAgB;QACd,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAoB,CAAC;YAElF,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,aAAa,GAAkB;oBACnC,aAAa,EAAE,CAAC;oBAChB,UAAU,EAAE,KAAK;oBACjB,UAAU,EAAE;wBACV,OAAO,EAAE,KAAK;qBACf;oBACD,cAAc,EAAE,KAAK;iBACtB,CAAC;gBAEF,IAAI,CAAC;oBACH,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;oBAC5C,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;oBAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;oBAC5B,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;gBACrD,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,OAAO,CAAC,IAAI,CAAC,iCAAiC,EAAE,KAAK,CAAC,CAAC;gBACzD,CAAC;YACH,CAAC;YACD,+EAA+E;QACjF,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED;;OAEG;IACH,mBAAmB,CAAC,MAA0B;QAC5C,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC;IACjC,CAAC;IAED;;OAEG;IACH,eAAe,CAAC,UAAkB;QAChC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;gBAC3B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED;;OAEG;IACH,YAAY;QACV,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;gBAC3B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YACpC,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED;;OAEG;IACH,eAAe;QACb,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED;;OAEG;IACH,YAAY;QACV,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,WAAmB;QAChC,OAAO,CAAC,GAAG,CAAC,8CAA8C,WAAW,EAAE,CAAC,CAAC;QAEzE,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAExF,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE,CAAC;YACxB,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;YACnE,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QAEzD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CAAC,GAAG,CAAC,oCAAoC,QAAQ,CAAC,IAAI,WAAW,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;YAC1F,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAC;YACrD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;IAED;;OAEG;IACH,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IACH,YAAY;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,OAAO;QACL,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,4EAA4E;YAC5E,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;IACH,CAAC;kHA/HU,iBAAiB;uEAAjB,iBAAiB,WAAjB,iBAAiB,mBAFhB,MAAM;;iFAEP,iBAAiB;cAH7B,UAAU;eAAC;gBACV,UAAU,EAAE,MAAM;aACnB"}
|
|
@@ -24,7 +24,7 @@ export class DpiBackComponent {
|
|
|
24
24
|
i0.ɵɵlistener("click", function DpiBackComponent_Template_ion_button_click_10_listener() { return ctx.openCamera(); });
|
|
25
25
|
i0.ɵɵtext(11, "Tomar una foto");
|
|
26
26
|
i0.ɵɵelementEnd()()();
|
|
27
|
-
} }, dependencies: [IonicModule, i1.IonButton], styles: [".content[_ngcontent-%COMP%] {\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2[_ngcontent-%COMP%] {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n p[_ngcontent-%COMP%] {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n \r\n ion-grid[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n }\r\n \r\n ion-row[_ngcontent-%COMP%] {\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 ion-col[_ngcontent-%COMP%] {\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 ion-icon[_ngcontent-%COMP%] {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\r\n margin-bottom: 10px;\r\n }\r\n\r\n.container-text[_ngcontent-%COMP%] {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\np[_ngcontent-%COMP%] {\r\n text-align: start;\r\n}\r\n\r\n.p-center[_ngcontent-%COMP%]{\r\ntext-align: center;\r\n}\r\n\r\n.p-justify[_ngcontent-%COMP%]{\r\n text-align: start;\r\n }\r\n\r\n.head[_ngcontent-%COMP%] {\r\n padding: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n.verify-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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
|
|
27
|
+
} }, dependencies: [IonicModule, i1.IonButton], styles: [".content[_ngcontent-%COMP%] {\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2[_ngcontent-%COMP%] {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n p[_ngcontent-%COMP%] {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n \r\n ion-grid[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n }\r\n \r\n ion-row[_ngcontent-%COMP%] {\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 ion-col[_ngcontent-%COMP%] {\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 ion-icon[_ngcontent-%COMP%] {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\r\n margin-bottom: 10px;\r\n }\r\n\r\n.container-text[_ngcontent-%COMP%] {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\np[_ngcontent-%COMP%] {\r\n text-align: start;\r\n}\r\n\r\n.p-center[_ngcontent-%COMP%]{\r\ntext-align: center;\r\n}\r\n\r\n.p-justify[_ngcontent-%COMP%]{\r\n text-align: start;\r\n }\r\n\r\n.head[_ngcontent-%COMP%] {\r\n padding: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n.verify-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\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[_ngcontent-%COMP%] {\r\n display: flex;\r\n //width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n height: 50vh;\r\n }\r\n.dpi-image[_ngcontent-%COMP%] {\r\n width: 200px;\r\n}\r\n\r\n.image-container[_ngcontent-%COMP%] {\r\n width: 100px;\r\n max-width: 90px;\r\n}\r\n\r\n.col-confirmation[_ngcontent-%COMP%] {\r\n margin-top: 100px;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px; \n\r\n}\r\n\r\n.image-item[_ngcontent-%COMP%] {\r\n margin-top: 50px;\r\n padding-top: 70px;\r\n}\r\n\r\n.font-confirmation[_ngcontent-%COMP%] {\r\n font-size: 26px;\r\n text-align: center;\r\n // color: #005da9;\r\n color: var(--purple-primary);\r\n font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input[_ngcontent-%COMP%] {\r\n margin-top: 15px;\r\n background-color: #f4f6fc; \n\r\n border-radius: 10px; \n\r\n padding: 5px 5px; \n\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \n\r\n --ion-border-color: transparent; \n\r\n}\r\n\r\nion-input[_ngcontent-%COMP%] {\r\n text-align: center;\r\n color: var(--orange-primary);\r\n --padding-start: 8px;\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] {\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; \n\r\n background-color: #ffffff; \n\r\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); \n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] ion-button[_ngcontent-%COMP%] {\r\n flex: 0 0 48%; \n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] .left-button[_ngcontent-%COMP%] {\r\n max-width: 140px;\r\n color: black;\r\n\r\n --background: white;\r\n\r\n --color: var(--purple-primary);\r\n\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto; \n\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] .right-button[_ngcontent-%COMP%] {\r\n margin-left: auto; \n\r\n}\r\n\r\n.tutorial-head[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 60vh; \n\r\n width: 100%;\r\n}\r\n\r\n.tutorial-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n}\r\n\r\n.rounded-input[_ngcontent-%COMP%] ion-input[_ngcontent-%COMP%] {\r\n font-size: 14px; \n\r\n color: #333; \n\r\n}\r\n\r\n.rounded-input[_ngcontent-%COMP%]::part(native) {\r\n background: transparent; \n\r\n}\r\n\r\n.p-info[_ngcontent-%COMP%]{\r\n font-weight: bold;\r\n color: #714e93\r\n}\r\n\r\n.custom-button[_ngcontent-%COMP%] {\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\r\n pointer-events: auto;\r\n\r\n }"] }); }
|
|
28
28
|
}
|
|
29
29
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DpiBackComponent, [{
|
|
30
30
|
type: Component,
|
|
@@ -43,7 +43,7 @@ export class DpiBackComponent {
|
|
|
43
43
|
<ion-button class="custom-button" expand="block" (click)="openCamera()">Tomar una foto</ion-button>
|
|
44
44
|
</div>
|
|
45
45
|
</div>
|
|
46
|
-
`, styles: ["\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2 {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n 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 ion-grid {\r\n margin-top: 20px;\r\n }\r\n \r\n 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 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 ion-icon {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\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\np {\r\n text-align: start;\r\n}\r\n\r\n.p-center{\r\ntext-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: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\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
|
|
46
|
+
`, styles: ["\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2 {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n 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 ion-grid {\r\n margin-top: 20px;\r\n }\r\n \r\n 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 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 ion-icon {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\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\np {\r\n text-align: start;\r\n}\r\n\r\n.p-center{\r\ntext-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: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\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\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: 50vh;\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; /* 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: var(--purple-primary);\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; /* Color de fondo suave */\r\n border-radius: 10px; /* Bordes redondeados */\r\n padding: 5px 5px; /* Espaciado interno */\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */\r\n --ion-border-color: transparent; /* Quita cualquier borde por defecto */\r\n}\r\n\r\nion-input {\r\n text-align: center;\r\n color: var(--orange-primary);\r\n --padding-start: 8px;\r\n}\r\n\r\n.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; /* Alinea los botones a los extremos */\r\n background-color: #ffffff; /* Fondo opcional */\r\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional */\r\n}\r\n\r\n.custom-footer ion-button {\r\n flex: 0 0 48%; /* Los botones ocupan casi la mitad del espacio */\r\n}\r\n\r\n.custom-footer .left-button {\r\n max-width: 140px;\r\n color: black;\r\n\r\n --background: white;\r\n\r\n --color: var(--purple-primary);\r\n\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto; /* Opcional si necesitas ajustes de margen */\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n\r\n}\r\n\r\n.custom-footer .right-button {\r\n margin-left: auto; /* Opcional si necesitas ajustes de margen */\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; /* 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; /* Tama\u00F1o de texto */\r\n color: #333; /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n background: transparent; /* 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\r\n pointer-events: auto;\r\n\r\n }\r\n "] }]
|
|
47
47
|
}], () => [{ type: undefined, decorators: [{
|
|
48
48
|
type: Inject,
|
|
49
49
|
args: ['onPressed']
|
|
@@ -18,7 +18,7 @@ export class DpiFrontComponent {
|
|
|
18
18
|
i0.ɵɵlistener("click", function DpiFrontComponent_Template_ion_button_click_10_listener() { return ctx.openCamera(); });
|
|
19
19
|
i0.ɵɵtext(11, "Tomar una foto");
|
|
20
20
|
i0.ɵɵelementEnd()()();
|
|
21
|
-
} }, dependencies: [IonicModule, i1.IonButton], styles: [".content[_ngcontent-%COMP%] {\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2[_ngcontent-%COMP%] {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n p[_ngcontent-%COMP%] {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n \r\n ion-grid[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n }\r\n \r\n ion-row[_ngcontent-%COMP%] {\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 ion-col[_ngcontent-%COMP%] {\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 ion-icon[_ngcontent-%COMP%] {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\r\n margin-bottom: 10px;\r\n }\r\n\r\n.container-text[_ngcontent-%COMP%] {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\np[_ngcontent-%COMP%] {\r\n text-align: start;\r\n}\r\n\r\n.p-center[_ngcontent-%COMP%]{\r\ntext-align: center;\r\n}\r\n\r\n.p-justify[_ngcontent-%COMP%]{\r\n text-align: start;\r\n }\r\n\r\n.head[_ngcontent-%COMP%] {\r\n padding: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n.verify-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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
|
|
21
|
+
} }, dependencies: [IonicModule, i1.IonButton], styles: [".content[_ngcontent-%COMP%] {\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2[_ngcontent-%COMP%] {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n p[_ngcontent-%COMP%] {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n \r\n ion-grid[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n }\r\n \r\n ion-row[_ngcontent-%COMP%] {\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 ion-col[_ngcontent-%COMP%] {\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 ion-icon[_ngcontent-%COMP%] {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\r\n margin-bottom: 10px;\r\n }\r\n\r\n.container-text[_ngcontent-%COMP%] {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\np[_ngcontent-%COMP%] {\r\n text-align: start;\r\n}\r\n\r\n.p-center[_ngcontent-%COMP%]{\r\ntext-align: center;\r\n}\r\n\r\n.p-justify[_ngcontent-%COMP%]{\r\n text-align: start;\r\n }\r\n\r\n.head[_ngcontent-%COMP%] {\r\n padding: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n.verify-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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 \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[_ngcontent-%COMP%] {\r\n display: flex;\r\n //width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n height: 50vh;\r\n }\r\n.dpi-image[_ngcontent-%COMP%] {\r\n width: 200px;\r\n}\r\n\r\n.image-container[_ngcontent-%COMP%] {\r\n width: 100px;\r\n max-width: 90px;\r\n}\r\n\r\n.col-confirmation[_ngcontent-%COMP%] {\r\n margin-top: 100px;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px; \n\r\n}\r\n\r\n.image-item[_ngcontent-%COMP%] {\r\n margin-top: 50px;\r\n padding-top: 70px;\r\n}\r\n\r\n.font-confirmation[_ngcontent-%COMP%] {\r\n font-size: 26px;\r\n text-align: center;\r\n // color: #005da9;\r\n color: var(--purple-primary);\r\n font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input[_ngcontent-%COMP%] {\r\n margin-top: 15px;\r\n background-color: #f4f6fc; \n\r\n border-radius: 10px; \n\r\n padding: 5px 5px; \n\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \n\r\n --ion-border-color: transparent; \n\r\n}\r\n\r\nion-input[_ngcontent-%COMP%] {\r\n text-align: center;\r\n color: var(--orange-primary);\r\n --padding-start: 8px;\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] {\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; \n\r\n background-color: #ffffff; \n\r\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); \n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] ion-button[_ngcontent-%COMP%] {\r\n flex: 0 0 48%; \n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] .left-button[_ngcontent-%COMP%] {\r\n max-width: 140px;\r\n color: black;\r\n\r\n --background: white;\r\n\r\n --color: var(--purple-primary);\r\n\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto; \n\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] .right-button[_ngcontent-%COMP%] {\r\n margin-left: auto; \n\r\n}\r\n\r\n.tutorial-head[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 60vh; \n\r\n width: 100%;\r\n}\r\n\r\n.tutorial-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n}\r\n\r\n.rounded-input[_ngcontent-%COMP%] ion-input[_ngcontent-%COMP%] {\r\n font-size: 14px; \n\r\n color: #333; \n\r\n}\r\n\r\n.rounded-input[_ngcontent-%COMP%]::part(native) {\r\n background: transparent; \n\r\n}\r\n\r\n.p-info[_ngcontent-%COMP%]{\r\n font-weight: bold;\r\n color: #714e93\r\n}\r\n\r\n.custom-button[_ngcontent-%COMP%] {\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\r\n pointer-events: auto;\r\n\r\n }"] }); }
|
|
22
22
|
}
|
|
23
23
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DpiFrontComponent, [{
|
|
24
24
|
type: Component,
|
|
@@ -37,7 +37,7 @@ export class DpiFrontComponent {
|
|
|
37
37
|
<ion-button class="custom-button" expand="block" (click)="openCamera()">Tomar una foto</ion-button>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
`, styles: ["\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2 {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n 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 ion-grid {\r\n margin-top: 20px;\r\n }\r\n \r\n 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 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 ion-icon {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\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\np {\r\n text-align: start;\r\n}\r\n\r\n.p-center{\r\ntext-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: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\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
|
|
40
|
+
`, styles: ["\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2 {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n 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 ion-grid {\r\n margin-top: 20px;\r\n }\r\n \r\n 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 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 ion-icon {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\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\np {\r\n text-align: start;\r\n}\r\n\r\n.p-center{\r\ntext-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: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\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 \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: 50vh;\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; /* 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: var(--purple-primary);\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; /* Color de fondo suave */\r\n border-radius: 10px; /* Bordes redondeados */\r\n padding: 5px 5px; /* Espaciado interno */\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */\r\n --ion-border-color: transparent; /* Quita cualquier borde por defecto */\r\n}\r\n\r\nion-input {\r\n text-align: center;\r\n color: var(--orange-primary);\r\n --padding-start: 8px;\r\n}\r\n\r\n.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; /* Alinea los botones a los extremos */\r\n background-color: #ffffff; /* Fondo opcional */\r\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional */\r\n}\r\n\r\n.custom-footer ion-button {\r\n flex: 0 0 48%; /* Los botones ocupan casi la mitad del espacio */\r\n}\r\n\r\n.custom-footer .left-button {\r\n max-width: 140px;\r\n color: black;\r\n\r\n --background: white;\r\n\r\n --color: var(--purple-primary);\r\n\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto; /* Opcional si necesitas ajustes de margen */\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n\r\n}\r\n\r\n.custom-footer .right-button {\r\n margin-left: auto; /* Opcional si necesitas ajustes de margen */\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; /* 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; /* Tama\u00F1o de texto */\r\n color: #333; /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n background: transparent; /* 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\r\n pointer-events: auto;\r\n\r\n }\r\n "] }]
|
|
41
41
|
}], null, { openCamera: [{
|
|
42
42
|
type: Input
|
|
43
43
|
}] }); })();
|
|
@@ -27,7 +27,7 @@ export class VideoSelfieComponent {
|
|
|
27
27
|
i0.ɵɵlistener("click", function VideoSelfieComponent_Template_ion_button_click_22_listener() { return ctx.openCamera(); });
|
|
28
28
|
i0.ɵɵtext(23, "Abrir la c\u00E1mara");
|
|
29
29
|
i0.ɵɵelementEnd()()();
|
|
30
|
-
} }, dependencies: [IonicModule, i1.IonButton, i1.IonGrid, i1.IonRow], styles: [".content[_ngcontent-%COMP%] {\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2[_ngcontent-%COMP%] {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n p[_ngcontent-%COMP%] {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n \r\n ion-grid[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n }\r\n \r\n ion-row[_ngcontent-%COMP%] {\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 ion-col[_ngcontent-%COMP%] {\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 ion-icon[_ngcontent-%COMP%] {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\r\n margin-bottom: 10px;\r\n }\r\n\r\n.container-text[_ngcontent-%COMP%] {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\np[_ngcontent-%COMP%] {\r\n text-align: start;\r\n}\r\n\r\n.p-center[_ngcontent-%COMP%]{\r\ntext-align: center;\r\n}\r\n\r\n.p-justify[_ngcontent-%COMP%]{\r\n text-align: start;\r\n }\r\n\r\n.head[_ngcontent-%COMP%] {\r\n padding: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n.verify-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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
|
|
30
|
+
} }, dependencies: [IonicModule, i1.IonButton, i1.IonGrid, i1.IonRow], styles: [".content[_ngcontent-%COMP%] {\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2[_ngcontent-%COMP%] {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n p[_ngcontent-%COMP%] {\r\n font-size: 1em;\r\n color: #666;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n \r\n ion-grid[_ngcontent-%COMP%] {\r\n margin-top: 20px;\r\n }\r\n \r\n ion-row[_ngcontent-%COMP%] {\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 ion-col[_ngcontent-%COMP%] {\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 ion-icon[_ngcontent-%COMP%] {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\r\n margin-bottom: 10px;\r\n }\r\n\r\n.container-text[_ngcontent-%COMP%] {\r\n text-align: justify !important;\r\n width: 180px;\r\n}\r\n\r\np[_ngcontent-%COMP%] {\r\n text-align: start;\r\n}\r\n\r\n.p-center[_ngcontent-%COMP%]{\r\ntext-align: center;\r\n}\r\n\r\n.p-justify[_ngcontent-%COMP%]{\r\n text-align: start;\r\n }\r\n\r\n.head[_ngcontent-%COMP%] {\r\n padding: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n\r\n.verify-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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\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[_ngcontent-%COMP%] {\r\n display: flex;\r\n //width: 100%;\r\n justify-content: center;\r\n align-items: center;\r\n height: 50vh;\r\n }\r\n.dpi-image[_ngcontent-%COMP%] {\r\n width: 200px;\r\n}\r\n\r\n.image-container[_ngcontent-%COMP%] {\r\n width: 100px;\r\n max-width: 90px;\r\n}\r\n\r\n.col-confirmation[_ngcontent-%COMP%] {\r\n margin-top: 100px;\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px; \n\r\n}\r\n\r\n.image-item[_ngcontent-%COMP%] {\r\n margin-top: 50px;\r\n padding-top: 70px;\r\n}\r\n\r\n.font-confirmation[_ngcontent-%COMP%] {\r\n font-size: 26px;\r\n text-align: center;\r\n // color: #005da9;\r\n color: var(--purple-primary);\r\n font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input[_ngcontent-%COMP%] {\r\n margin-top: 15px;\r\n background-color: #f4f6fc; \n\r\n border-radius: 10px; \n\r\n padding: 5px 5px; \n\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \n\r\n --ion-border-color: transparent; \n\r\n}\r\n\r\nion-input[_ngcontent-%COMP%] {\r\n text-align: center;\r\n color: var(--orange-primary);\r\n --padding-start: 8px;\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] {\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; \n\r\n background-color: #ffffff; \n\r\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); \n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] ion-button[_ngcontent-%COMP%] {\r\n flex: 0 0 48%; \n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] .left-button[_ngcontent-%COMP%] {\r\n max-width: 140px;\r\n color: black;\r\n\r\n --background: white;\r\n\r\n --color: var(--purple-primary);\r\n\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto; \n\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n\r\n}\r\n\r\n.custom-footer[_ngcontent-%COMP%] .right-button[_ngcontent-%COMP%] {\r\n margin-left: auto; \n\r\n}\r\n\r\n.tutorial-head[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 60vh; \n\r\n width: 100%;\r\n}\r\n\r\n.tutorial-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n}\r\n\r\n.rounded-input[_ngcontent-%COMP%] ion-input[_ngcontent-%COMP%] {\r\n font-size: 14px; \n\r\n color: #333; \n\r\n}\r\n\r\n.rounded-input[_ngcontent-%COMP%]::part(native) {\r\n background: transparent; \n\r\n}\r\n\r\n.p-info[_ngcontent-%COMP%]{\r\n font-weight: bold;\r\n color: #714e93\r\n}\r\n\r\n.custom-button[_ngcontent-%COMP%] {\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\r\n pointer-events: auto;\r\n\r\n }"] }); }
|
|
31
31
|
}
|
|
32
32
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VideoSelfieComponent, [{
|
|
33
33
|
type: Component,
|
|
@@ -63,7 +63,7 @@ export class VideoSelfieComponent {
|
|
|
63
63
|
<ion-button class="custom-button" expand="block" (click)="openCamera()">Abrir la cámara</ion-button>
|
|
64
64
|
</div>
|
|
65
65
|
</div>
|
|
66
|
-
`, styles: ["\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2 {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n 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 ion-grid {\r\n margin-top: 20px;\r\n }\r\n \r\n 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 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 ion-icon {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\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\np {\r\n text-align: start;\r\n}\r\n\r\n.p-center{\r\ntext-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: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\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
|
|
66
|
+
`, styles: ["\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\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n \r\n}\r\n\r\n\r\nh2 {\r\n font-size: 1.5em;\r\n font-weight: bold;\r\n color: var(--orange-primary, orange);\r\n text-align: center;\r\n margin-top: 20px;\r\n }\r\n \r\n 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 ion-grid {\r\n margin-top: 20px;\r\n }\r\n \r\n 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 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 ion-icon {\r\n font-size: 3em; // Tama\u00F1o del \u00EDcono para que sea m\u00E1s destacado\r\n color: #ff8c00; // Color similar al amarillo-naranja\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\np {\r\n text-align: start;\r\n}\r\n\r\n.p-center{\r\ntext-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: 30px;\r\n margin-top: 75px;\r\n margin-bottom: 20px;\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\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: 50vh;\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; /* 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: var(--purple-primary);\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; /* Color de fondo suave */\r\n border-radius: 10px; /* Bordes redondeados */\r\n padding: 5px 5px; /* Espaciado interno */\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */\r\n --ion-border-color: transparent; /* Quita cualquier borde por defecto */\r\n}\r\n\r\nion-input {\r\n text-align: center;\r\n color: var(--orange-primary);\r\n --padding-start: 8px;\r\n}\r\n\r\n.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; /* Alinea los botones a los extremos */\r\n background-color: #ffffff; /* Fondo opcional */\r\n //box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional */\r\n}\r\n\r\n.custom-footer ion-button {\r\n flex: 0 0 48%; /* Los botones ocupan casi la mitad del espacio */\r\n}\r\n\r\n.custom-footer .left-button {\r\n max-width: 140px;\r\n color: black;\r\n\r\n --background: white;\r\n\r\n --color: var(--purple-primary);\r\n\r\n --border-radius: 20px;\r\n --border-color: white;\r\n margin-right: auto; /* Opcional si necesitas ajustes de margen */\r\n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n\r\n}\r\n\r\n.custom-footer .right-button {\r\n margin-left: auto; /* Opcional si necesitas ajustes de margen */\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; /* 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; /* Tama\u00F1o de texto */\r\n color: #333; /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n background: transparent; /* 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\r\n pointer-events: auto;\r\n\r\n }\r\n "] }]
|
|
67
67
|
}], null, { openCamera: [{
|
|
68
68
|
type: Input
|
|
69
69
|
}] }); })();
|
package/package.json
CHANGED