metag-sdk-ionic 1.0.1-beta.0.21 → 1.0.1-beta.0.22
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/camera-with-overlay/camera-with-overlay.component.js
CHANGED
|
@@ -207,10 +207,10 @@ CameraWithOverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
|
|
|
207
207
|
i0.ɵɵtextInterpolate(ctx.text2);
|
|
208
208
|
i0.ɵɵadvance();
|
|
209
209
|
i0.ɵɵproperty("ngIf", ctx.isLoading);
|
|
210
|
-
} }, dependencies: [i4.NgIf, i1.IonButton, i1.IonContent, i1.IonIcon, i1.IonSpinner], styles: ["ion-content[_ngcontent-%COMP%] {\n --background: black;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n\n}\n\n.modal-container[_ngcontent-%COMP%] {\n max-width: 400px; // Ajusta el valor seg\u00FAn tus necesidades\n\n}\n\n.camera-overlay[_ngcontent-%COMP%] {\n position: relative;\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.camera-container[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n position: relative;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.overlay-frame[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 70%;\n max-height: 70%;\n z-index: 9;\n}\n\n.header-text[_ngcontent-%COMP%] {\n position: absolute;\n top: 170px;\n width: 100%;\n text-align: center;\n color: white;\n z-index: 15;\n\n p {\n margin: 0;\n font-size: 18px;\n }\n\n .country {\n font-weight: bold;\n }\n}\n\n.button-container[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 50px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n}\n\n.capture-button[_ngcontent-%COMP%] {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n\n\n --background: var(--purple-primary);\n --background-hover: var(--purple-secondary);\n --background-activated: var(--purple-secondary);\n --background-focused: var(--purple-secondary);\n \n --color: white;\n \n --border-color: var(--purple-primary);\n --border-style: solid;\n --border-width: 1px;\n \n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n \n --ripple-color: var(--purple-secondary);\n}\n\n.close-button[_ngcontent-%COMP%] {\n position: absolute;\n top: 14px;\n right: 20px;\n color: white;\n z-index: 10;\n}\n\n.visible-window[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n // width: 70%; \n\n // height: 45%; \n\n\n width:
|
|
210
|
+
} }, dependencies: [i4.NgIf, i1.IonButton, i1.IonContent, i1.IonIcon, i1.IonSpinner], styles: ["ion-content[_ngcontent-%COMP%] {\n --background: black;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n\n}\n\n.modal-container[_ngcontent-%COMP%] {\n max-width: 400px; // Ajusta el valor seg\u00FAn tus necesidades\n\n}\n\n.camera-overlay[_ngcontent-%COMP%] {\n position: relative;\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.camera-container[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n position: relative;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.overlay-frame[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 70%;\n max-height: 70%;\n z-index: 9;\n}\n\n.header-text[_ngcontent-%COMP%] {\n position: absolute;\n top: 170px;\n width: 100%;\n text-align: center;\n color: white;\n z-index: 15;\n\n p {\n margin: 0;\n font-size: 18px;\n }\n\n .country {\n font-weight: bold;\n }\n}\n\n.button-container[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 50px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n}\n\n.capture-button[_ngcontent-%COMP%] {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n\n\n --background: var(--purple-primary);\n --background-hover: var(--purple-secondary);\n --background-activated: var(--purple-secondary);\n --background-focused: var(--purple-secondary);\n \n --color: white;\n \n --border-color: var(--purple-primary);\n --border-style: solid;\n --border-width: 1px;\n \n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n \n --ripple-color: var(--purple-secondary);\n}\n\n.close-button[_ngcontent-%COMP%] {\n position: absolute;\n top: 14px;\n right: 20px;\n color: white;\n z-index: 10;\n}\n\n.visible-window[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n // width: 70%; \n\n // height: 45%; \n\n\n width: 472px;\n height: 508px;\n \n max-width: 70%;\n max-height: 70%;\n background: transparent;\n border: 2px solid white; \n\n border-radius: 10px; \n\n z-index: 10; \n\n box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.65); \n\n}\n.text-help[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{\n display: inline-block; \n\n background-color: white; \n\n padding: 5px; \n\n border-radius: 5px; \n\n color: black; \n\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \n\n animation: _ngcontent-%COMP%_popIn 1s ease-in-out; \n\n}\n\n\n\n@keyframes _ngcontent-%COMP%_popIn {\n 0% {\n transform: scale(0.8); \n\n opacity: 0; \n\n }\n 50% {\n transform: scale(1.1); \n\n opacity: 1; \n\n }\n 100% {\n transform: scale(1); \n\n }\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8); \n\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000; \n\n}\n\nion-spinner[_ngcontent-%COMP%] {\n color: white;\n width: 50px;\n height: 50px;\n}\n\n\n\n.camera-select[_ngcontent-%COMP%] {\n position: absolute;\n top: 1rem;\n left: 1rem;\n background: rgba(0, 0, 0, 0.7);\n padding: 0.5rem;\n border-radius: 0.5rem;\n z-index: 999;\n display: flex;\n align-items: center;\n color: white;\n\n label {\n margin-right: 0.5rem;\n font-size: 14px;\n }\n\n select {\n background: transparent;\n color: white;\n border: 1px solid white;\n border-radius: 0.3rem;\n font-size: 14px;\n padding: 0.2rem;\n }\n}"] });
|
|
211
211
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CameraWithOverlayComponent, [{
|
|
212
212
|
type: Component,
|
|
213
|
-
args: [{ selector: 'app-camera-overlay', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"dark\">\n <div class=\"camera-overlay\">\n <div class=\"header-text\">\n <div class=\"text-help\">\n <p>{{text1}}</p>\n </div>\n <p class=\"country\">{{text2}}</p>\n </div>\n\n\n <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n <ion-spinner name=\"crescent\"></ion-spinner>\n </div>\n \n <!-- Capa oscura con recorte en el centro -->\n <div class=\"visible-window\"></div>\n\n <!-- Video de la c\u00E1mara con el overlay centrado -->\n <div class=\"camera-container\" >\n <video #videoElement autoplay muted playsinline></video>\n <!-- <img [src]=\"overlaySrc\" alt=\"Overlay\" class=\"overlay-frame\" /> -->\n </div>\n\n <!-- Bot\u00F3n de captura centrado en la parte inferior -->\n <div class=\"button-container\">\n <ion-button (click)=\"capturePhoto()\" class=\"capture-button\" shape=\"round\" expand=\"block\">\n <ion-icon name=\"camera-outline\"></ion-icon>\n </ion-button>\n </div>\n\n <!-- Bot\u00F3n de cerrar en la esquina superior derecha -->\n <ion-button fill=\"clear\" (click)=\"closeOverlay()\" class=\"close-button\">\n <ion-icon name=\"close-outline\"></ion-icon>\n </ion-button>\n </div>\n\n <!-- Mostrar la imagen capturada si existe\n <div *ngIf=\"capturedImageUrl\">\n <h3>Imagen Capturada:</h3>\n <img [src]=\"capturedImageUrl\" alt=\"Foto capturada\" />\n </div> -->\n</ion-content>", styles: ["ion-content {\n --background: black;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n\n}\n\n.modal-container {\n max-width: 400px; // Ajusta el valor seg\u00FAn tus necesidades\n\n}\n\n.camera-overlay {\n position: relative;\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.camera-container {\n width: 100%;\n height: 100%;\n position: relative;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.overlay-frame {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 70%;\n max-height: 70%;\n z-index: 9;\n}\n\n.header-text {\n position: absolute;\n top: 170px;\n width: 100%;\n text-align: center;\n color: white;\n z-index: 15;\n\n p {\n margin: 0;\n font-size: 18px;\n }\n\n .country {\n font-weight: bold;\n }\n}\n\n.button-container {\n position: absolute;\n bottom: 50px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n}\n\n.capture-button {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n\n\n --background: var(--purple-primary);\n --background-hover: var(--purple-secondary);\n --background-activated: var(--purple-secondary);\n --background-focused: var(--purple-secondary);\n \n --color: white;\n \n --border-color: var(--purple-primary);\n --border-style: solid;\n --border-width: 1px;\n \n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n \n --ripple-color: var(--purple-secondary);\n}\n\n.close-button {\n position: absolute;\n top: 14px;\n right: 20px;\n color: white;\n z-index: 10;\n}\n\n.visible-window {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n // width: 70%; /* Ajusta el tama\u00F1o del cuadro */\n // height: 45%; /* Ajusta el tama\u00F1o del cuadro */\n\n width:
|
|
213
|
+
args: [{ selector: 'app-camera-overlay', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"dark\">\n <div class=\"camera-overlay\">\n <div class=\"header-text\">\n <div class=\"text-help\">\n <p>{{text1}}</p>\n </div>\n <p class=\"country\">{{text2}}</p>\n </div>\n\n\n <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n <ion-spinner name=\"crescent\"></ion-spinner>\n </div>\n \n <!-- Capa oscura con recorte en el centro -->\n <div class=\"visible-window\"></div>\n\n <!-- Video de la c\u00E1mara con el overlay centrado -->\n <div class=\"camera-container\" >\n <video #videoElement autoplay muted playsinline></video>\n <!-- <img [src]=\"overlaySrc\" alt=\"Overlay\" class=\"overlay-frame\" /> -->\n </div>\n\n <!-- Bot\u00F3n de captura centrado en la parte inferior -->\n <div class=\"button-container\">\n <ion-button (click)=\"capturePhoto()\" class=\"capture-button\" shape=\"round\" expand=\"block\">\n <ion-icon name=\"camera-outline\"></ion-icon>\n </ion-button>\n </div>\n\n <!-- Bot\u00F3n de cerrar en la esquina superior derecha -->\n <ion-button fill=\"clear\" (click)=\"closeOverlay()\" class=\"close-button\">\n <ion-icon name=\"close-outline\"></ion-icon>\n </ion-button>\n </div>\n\n <!-- Mostrar la imagen capturada si existe\n <div *ngIf=\"capturedImageUrl\">\n <h3>Imagen Capturada:</h3>\n <img [src]=\"capturedImageUrl\" alt=\"Foto capturada\" />\n </div> -->\n</ion-content>", styles: ["ion-content {\n --background: black;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n\n}\n\n.modal-container {\n max-width: 400px; // Ajusta el valor seg\u00FAn tus necesidades\n\n}\n\n.camera-overlay {\n position: relative;\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.camera-container {\n width: 100%;\n height: 100%;\n position: relative;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.overlay-frame {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 70%;\n max-height: 70%;\n z-index: 9;\n}\n\n.header-text {\n position: absolute;\n top: 170px;\n width: 100%;\n text-align: center;\n color: white;\n z-index: 15;\n\n p {\n margin: 0;\n font-size: 18px;\n }\n\n .country {\n font-weight: bold;\n }\n}\n\n.button-container {\n position: absolute;\n bottom: 50px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n}\n\n.capture-button {\n width: 70px;\n height: 70px;\n border-radius: 50%;\n\n\n --background: var(--purple-primary);\n --background-hover: var(--purple-secondary);\n --background-activated: var(--purple-secondary);\n --background-focused: var(--purple-secondary);\n \n --color: white;\n \n --border-color: var(--purple-primary);\n --border-style: solid;\n --border-width: 1px;\n \n --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n \n --ripple-color: var(--purple-secondary);\n}\n\n.close-button {\n position: absolute;\n top: 14px;\n right: 20px;\n color: white;\n z-index: 10;\n}\n\n.visible-window {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n // width: 70%; /* Ajusta el tama\u00F1o del cuadro */\n // height: 45%; /* Ajusta el tama\u00F1o del cuadro */\n\n width: 472px;\n height: 508px;\n \n max-width: 70%;\n max-height: 70%;\n background: transparent;\n border: 2px solid white; /* Color y grosor del borde */\n border-radius: 10px; /* Ajusta para redondear las esquinas */\n z-index: 10; /* Aseg\u00FArate de que est\u00E9 encima del overlay oscuro */\n box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.65); /* Oscurece fuera del cuadro */\n}\n.text-help p{\n display: inline-block; /* Hace que solo el texto ocupe espacio */\n background-color: white; /* Color de fondo del texto */\n padding: 5px; /* Espaciado interno para una mejor visualizaci\u00F3n */\n border-radius: 5px; /* Opcional, para esquinas redondeadas */\n color: black; /* Color del texto */\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */\n animation: popIn 1s ease-in-out; /* Agrega la animaci\u00F3n al aparecer */\n}\n\n/* Definimos la animaci\u00F3n \"popIn\" */\n@keyframes popIn {\n 0% {\n transform: scale(0.8); /* Comienza m\u00E1s peque\u00F1o */\n opacity: 0; /* Empieza invisible */\n }\n 50% {\n transform: scale(1.1); /* Crece un poco m\u00E1s de lo normal */\n opacity: 1; /* Se hace visible */\n }\n 100% {\n transform: scale(1); /* Vuelve a su tama\u00F1o normal */\n }\n}\n\n.loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000; /* Aseg\u00FArate de que est\u00E9 por encima del contenido */\n}\n\nion-spinner {\n color: white;\n width: 50px;\n height: 50px;\n}\n\n\n\n.camera-select {\n position: absolute;\n top: 1rem;\n left: 1rem;\n background: rgba(0, 0, 0, 0.7);\n padding: 0.5rem;\n border-radius: 0.5rem;\n z-index: 999;\n display: flex;\n align-items: center;\n color: white;\n\n label {\n margin-right: 0.5rem;\n font-size: 14px;\n }\n\n select {\n background: transparent;\n color: white;\n border: 1px solid white;\n border-radius: 0.3rem;\n font-size: 14px;\n padding: 0.2rem;\n }\n}\n"] }]
|
|
214
214
|
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i3.ModalDpiServices }], { videoElement: [{
|
|
215
215
|
type: ViewChild,
|
|
216
216
|
args: ['videoElement']
|