metag-sdk-ionic 1.2.11-dev-0.5 → 1.2.11-dev-0.8
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
|
@@ -220,11 +220,11 @@ export class CameraWithOverlayComponent {
|
|
|
220
220
|
i0.ɵɵproperty("src", ctx.overlaySrc, i0.ɵɵsanitizeUrl);
|
|
221
221
|
i0.ɵɵadvance(3);
|
|
222
222
|
i0.ɵɵproperty("disabled", ctx.rearCams.length <= 1);
|
|
223
|
-
} }, dependencies: [i1.IonButton, i1.IonContent, i1.IonIcon], styles: ["ion-content[_ngcontent-%COMP%] {\r\n --background: black;\r\n padding: 0;\r\n margin: 0;\r\n
|
|
223
|
+
} }, dependencies: [i1.IonButton, i1.IonContent, i1.IonIcon], styles: ["ion-content[_ngcontent-%COMP%] {\r\n --background: black;\r\n padding: 0;\r\n margin: 0;\r\n height: 100vh;\r\n width: 100vw;\r\n overflow: hidden;\r\n}\r\n\r\n.sdk-metag-blink-image[_ngcontent-%COMP%] {\r\n animation: _ngcontent-%COMP%_blink 3s infinite;\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_blink {\r\n 0% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n 100% { opacity: 1; }\r\n}\r\n\r\n.sdk-metag-camera-overlay[_ngcontent-%COMP%] {\r\n position: relative;\r\n width: 100vw;\r\n height: 100vh;\r\n background: black;\r\n}\r\n\r\n.sdk-metag-camera-container[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n}\r\n\r\n.sdk-metag-overlay-frame[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: auto;\r\n height: 60%;\r\n max-width: 90%;\r\n max-height: 65%;\r\n z-index: 9;\r\n pointer-events: none;\r\n}\r\n\r\n.sdk-metag-header-text[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 50px;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n text-align: center;\r\n color: white;\r\n z-index: 15;\r\n\r\n p {\r\n margin: 0;\r\n font-size: 18px;\r\n }\r\n\r\n .sdk-metag-country {\r\n font-weight: bold;\r\n }\r\n}\r\n\r\n.sdk-metag-visible-window[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 85%;\r\n max-width: 350px;\r\n height: 55%;\r\n max-height: 550px;\r\n background: transparent;\r\n border: 2px solid white;\r\n border-radius: 10px;\r\n z-index: 10;\r\n box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.65);\r\n pointer-events: none;\r\n}\r\n\r\n.sdk-metag-text-help[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n display: inline-block;\r\n background-color: white;\r\n padding: 15px;\r\n border-radius: 5px;\r\n color: black;\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n animation: _ngcontent-%COMP%_popIn 1s ease-in-out;\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n}\r\n}\r\n\r\n//[_ngcontent-%COMP%] ========================================\r\n//[_ngcontent-%COMP%] CONTROLES[_ngcontent-%COMP%] EN[_ngcontent-%COMP%] LA[_ngcontent-%COMP%] PARTE[_ngcontent-%COMP%] INFERIOR\r\n//[_ngcontent-%COMP%] ========================================\r\n.sdk-metag-controls-container[_ngcontent-%COMP%] {\r\n position: absolute;\r\n bottom: 50px;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n padding: 0 20px;\r\n z-index: 20;\r\n}\r\n\r\n.sdk-metag-control-left[_ngcontent-%COMP%], \r\n.sdk-metag-control-center[_ngcontent-%COMP%], \r\n.sdk-metag-control-right[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.sdk-metag-control-left[_ngcontent-%COMP%], \r\n.sdk-metag-control-right[_ngcontent-%COMP%] {\r\n flex: 0 0 80px;\r\n}\r\n\r\n.sdk-metag-control-button[_ngcontent-%COMP%] {\r\n --color: white;\r\n --padding-start: 0;\r\n --padding-end: 0;\r\n margin: 0 0 8px 0;\r\n width: 60px;\r\n height: 60px;\r\n \r\n ion-icon {\r\n font-size: 36px;\r\n }\r\n \r\n &:disabled,\r\n &[disabled] {\r\n --color: rgba(255, 255, 255, 0.3);\r\n opacity: 0.4;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.sdk-metag-control-label[_ngcontent-%COMP%] {\r\n color: white;\r\n font-size: 13px;\r\n margin: 0;\r\n text-align: center;\r\n font-weight: 500;\r\n}\r\n\r\n.sdk-metag-control-center[_ngcontent-%COMP%] {\r\n flex: 0 0 100px;\r\n}\r\n\r\n.sdk-metag-capture-button[_ngcontent-%COMP%] {\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 50%;\r\n margin: 0;\r\n\r\n --background: var(--purple-primary, #82298F);\r\n --background-hover: var(--purple-secondary, #2b0d30);\r\n --background-activated: var(--purple-secondary, #2b0d30);\r\n --color: white;\r\n --border-color: white;\r\n --border-style: solid;\r\n --border-width: 3px;\r\n --box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.sdk-metag-camera-icon[_ngcontent-%COMP%] {\r\n font-size: 44px;\r\n}\r\n display[_ngcontent-%COMP%]: flex[_ngcontent-%COMP%];\r\n flex-direction[_ngcontent-%COMP%]: column[_ngcontent-%COMP%];\r\n align-items[_ngcontent-%COMP%]: center[_ngcontent-%COMP%];\r\n justify-content[_ngcontent-%COMP%]: flex-endimportant[_ngcontent-%COMP%];\r\n min-height[_ngcontent-%COMP%]: 90px[_ngcontent-%COMP%] !important[_ngcontent-%COMP%];\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_popIn {\r\n 0% {\r\n transform: scale(0.8); \n\r\n opacity: 0; \n\r\n }\r\n 50% {\r\n transform: scale(1.1); \n\r\n opacity: 1; \n\r\n }\r\n 100% {\r\n transform: scale(1); \n\r\n }\r\n}\r\n\r\n.loading-overlay[_ngcontent-%COMP%] {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background-color: rgba(0, 0, 0, 0.8); \n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000; \n\r\n}\r\n\r\nion-spinner[_ngcontent-%COMP%] {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n\r\n\r\n.camera-select[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 1rem;\r\n left: 1rem;\r\n background: rgba(0, 0, 0, 0.7);\r\n padding: 0.5rem;\r\n border-radius: 0.5rem;\r\n z-index: 999;\r\n display: flex;\r\n align-items: center;\r\n color: white;\r\n\r\n label {\r\n margin-right: 0.5rem;\r\n font-size: 14px;\r\n }\r\n\r\n select {\r\n background: transparent;\r\n color: white;\r\n border: 1px solid white;\r\n border-radius: 0.3rem;\r\n font-size: 14px;\r\n padding: 0.2rem;\r\n }\r\n}\r\n\r\n.buttonfabCameraChange[_ngcontent-%COMP%] {\r\n --background: rgba(0, 0, 0, 0.6);\r\n --color: #fff;\r\n //box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\r\n \n\r\n \n\r\n}"] }); }
|
|
224
224
|
}
|
|
225
225
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CameraWithOverlayComponent, [{
|
|
226
226
|
type: Component,
|
|
227
|
-
args: [{ selector: 'app-camera-overlay', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"dark\">\r\n <div class=\"sdk-metag-camera-overlay\">\r\n <!-- \u25B8 Encabezado ---------------------------------------------------- -->\r\n <div class=\"sdk-metag-header-text\">\r\n <div class=\"sdk-metag-text-help\">\r\n <p>{{ text1 }}</p>\r\n </div>\r\n <p class=\"sdk-metag-country\">{{ text2 }}</p>\r\n </div> \r\n\r\n <!-- \u25B8 Capa oscura con recorte (tu ventana de enfoque) --------------- -->\r\n <div class=\"sdk-metag-visible-window\"></div>\r\n\r\n <!-- \u25B8 Contenedor del v\u00EDdeo + overlay -------------------------------- -->\r\n <div class=\"sdk-metag-camera-container\">\r\n <video #videoElement autoplay muted playsinline></video>\r\n <img [src]=\"overlaySrc\" alt=\"Overlay\" class=\"sdk-metag-overlay-frame sdk-metag-blink-image\" />\r\n </div>\r\n\r\n <!-- \u25B8 Controles inferiores: Izquierda (cambiar c\u00E1mara), Centro (capturar), Derecha (cerrar) -->\r\n <div class=\"sdk-metag-controls-container\">\r\n <!-- Bot\u00F3n izquierda: Cambiar c\u00E1mara -->\r\n <div class=\"sdk-metag-control-left\">\r\n <ion-button fill=\"clear\" \r\n class=\"sdk-metag-control-button\"\r\n [disabled]=\"rearCams.length <= 1\"\r\n (click)=\"toggleRearCam()\">\r\n <ion-icon name=\"camera-reverse-outline\"></ion-icon>\r\n </ion-button>\r\n <p class=\"sdk-metag-control-label\">Enfoque</p>\r\n </div>\r\n\r\n <!-- Bot\u00F3n central: Capturar foto -->\r\n <div class=\"sdk-metag-control-center\">\r\n <ion-button (click)=\"capturePhoto()\"\r\n class=\"sdk-metag-capture-button\"\r\n shape=\"round\">\r\n <ion-icon name=\"camera-outline\" class=\"sdk-metag-camera-icon\"></ion-icon>\r\n </ion-button>\r\n </div>\r\n\r\n <!-- Bot\u00F3n derecha: Cerrar -->\r\n <div class=\"sdk-metag-control-right\">\r\n <ion-button fill=\"clear\" \r\n class=\"sdk-metag-control-button\"\r\n (click)=\"closeOverlay()\">\r\n <ion-icon name=\"close-outline\"></ion-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n </div>\r\n</ion-content>\r\n", styles: ["ion-content {\r\n --background: black;\r\n padding: 0;\r\n margin: 0;\r\n
|
|
227
|
+
args: [{ selector: 'app-camera-overlay', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"dark\">\r\n <div class=\"sdk-metag-camera-overlay\">\r\n <!-- \u25B8 Encabezado ---------------------------------------------------- -->\r\n <div class=\"sdk-metag-header-text\">\r\n <div class=\"sdk-metag-text-help\">\r\n <p>{{ text1 }}</p>\r\n </div>\r\n <p class=\"sdk-metag-country\">{{ text2 }}</p>\r\n </div> \r\n\r\n <!-- \u25B8 Capa oscura con recorte (tu ventana de enfoque) --------------- -->\r\n <div class=\"sdk-metag-visible-window\"></div>\r\n\r\n <!-- \u25B8 Contenedor del v\u00EDdeo + overlay -------------------------------- -->\r\n <div class=\"sdk-metag-camera-container\">\r\n <video #videoElement autoplay muted playsinline></video>\r\n <img [src]=\"overlaySrc\" alt=\"Overlay\" class=\"sdk-metag-overlay-frame sdk-metag-blink-image\" />\r\n </div>\r\n\r\n <!-- \u25B8 Controles inferiores: Izquierda (cambiar c\u00E1mara), Centro (capturar), Derecha (cerrar) -->\r\n <div class=\"sdk-metag-controls-container\">\r\n <!-- Bot\u00F3n izquierda: Cambiar c\u00E1mara -->\r\n <div class=\"sdk-metag-control-left\">\r\n <ion-button fill=\"clear\" \r\n class=\"sdk-metag-control-button\"\r\n [disabled]=\"rearCams.length <= 1\"\r\n (click)=\"toggleRearCam()\">\r\n <ion-icon name=\"camera-reverse-outline\"></ion-icon>\r\n </ion-button>\r\n <p class=\"sdk-metag-control-label\">Enfoque</p>\r\n </div>\r\n\r\n <!-- Bot\u00F3n central: Capturar foto -->\r\n <div class=\"sdk-metag-control-center\">\r\n <ion-button (click)=\"capturePhoto()\"\r\n class=\"sdk-metag-capture-button\"\r\n shape=\"round\">\r\n <ion-icon name=\"camera-outline\" class=\"sdk-metag-camera-icon\"></ion-icon>\r\n </ion-button>\r\n </div>\r\n\r\n <!-- Bot\u00F3n derecha: Cerrar -->\r\n <div class=\"sdk-metag-control-right\">\r\n <ion-button fill=\"clear\" \r\n class=\"sdk-metag-control-button\"\r\n (click)=\"closeOverlay()\">\r\n <ion-icon name=\"close-outline\"></ion-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n </div>\r\n</ion-content>\r\n", styles: ["ion-content {\r\n --background: black;\r\n padding: 0;\r\n margin: 0;\r\n height: 100vh;\r\n width: 100vw;\r\n overflow: hidden;\r\n}\r\n\r\n.sdk-metag-blink-image {\r\n animation: blink 3s infinite;\r\n}\r\n\r\n@keyframes blink {\r\n 0% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n 100% { opacity: 1; }\r\n}\r\n\r\n.sdk-metag-camera-overlay {\r\n position: relative;\r\n width: 100vw;\r\n height: 100vh;\r\n background: black;\r\n}\r\n\r\n.sdk-metag-camera-container {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n\r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n}\r\n\r\n.sdk-metag-overlay-frame {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: auto;\r\n height: 60%;\r\n max-width: 90%;\r\n max-height: 65%;\r\n z-index: 9;\r\n pointer-events: none;\r\n}\r\n\r\n.sdk-metag-header-text {\r\n position: absolute;\r\n top: 50px;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n text-align: center;\r\n color: white;\r\n z-index: 15;\r\n\r\n p {\r\n margin: 0;\r\n font-size: 18px;\r\n }\r\n\r\n .sdk-metag-country {\r\n font-weight: bold;\r\n }\r\n}\r\n\r\n.sdk-metag-visible-window {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 85%;\r\n max-width: 350px;\r\n height: 55%;\r\n max-height: 550px;\r\n background: transparent;\r\n border: 2px solid white;\r\n border-radius: 10px;\r\n z-index: 10;\r\n box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.65);\r\n pointer-events: none;\r\n}\r\n\r\n.sdk-metag-text-help p {\r\n display: inline-block;\r\n background-color: white;\r\n padding: 15px;\r\n border-radius: 5px;\r\n color: black;\r\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n animation: popIn 1s ease-in-out;\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n}\r\n}\r\n\r\n// ========================================\r\n// CONTROLES EN LA PARTE INFERIOR\r\n// ========================================\r\n.sdk-metag-controls-container {\r\n position: absolute;\r\n bottom: 50px;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n padding: 0 20px;\r\n z-index: 20;\r\n}\r\n\r\n.sdk-metag-control-left,\r\n.sdk-metag-control-center,\r\n.sdk-metag-control-right {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.sdk-metag-control-left,\r\n.sdk-metag-control-right {\r\n flex: 0 0 80px;\r\n}\r\n\r\n.sdk-metag-control-button {\r\n --color: white;\r\n --padding-start: 0;\r\n --padding-end: 0;\r\n margin: 0 0 8px 0;\r\n width: 60px;\r\n height: 60px;\r\n \r\n ion-icon {\r\n font-size: 36px;\r\n }\r\n \r\n &:disabled,\r\n &[disabled] {\r\n --color: rgba(255, 255, 255, 0.3);\r\n opacity: 0.4;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.sdk-metag-control-label {\r\n color: white;\r\n font-size: 13px;\r\n margin: 0;\r\n text-align: center;\r\n font-weight: 500;\r\n}\r\n\r\n.sdk-metag-control-center {\r\n flex: 0 0 100px;\r\n}\r\n\r\n.sdk-metag-capture-button {\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 50%;\r\n margin: 0;\r\n\r\n --background: var(--purple-primary, #82298F);\r\n --background-hover: var(--purple-secondary, #2b0d30);\r\n --background-activated: var(--purple-secondary, #2b0d30);\r\n --color: white;\r\n --border-color: white;\r\n --border-style: solid;\r\n --border-width: 3px;\r\n --box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.sdk-metag-camera-icon {\r\n font-size: 44px;\r\n}\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-endimportant;\r\n min-height: 90px !important;\r\n}\r\n\r\n/* Definimos la animaci\u00F3n \"popIn\" */\r\n@keyframes popIn {\r\n 0% {\r\n transform: scale(0.8); /* Comienza m\u00E1s peque\u00F1o */\r\n opacity: 0; /* Empieza invisible */\r\n }\r\n 50% {\r\n transform: scale(1.1); /* Crece un poco m\u00E1s de lo normal */\r\n opacity: 1; /* Se hace visible */\r\n }\r\n 100% {\r\n transform: scale(1); /* Vuelve a su tama\u00F1o normal */\r\n }\r\n}\r\n\r\n.loading-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000; /* Aseg\u00FArate de que est\u00E9 por encima del contenido */\r\n}\r\n\r\nion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n\r\n\r\n.camera-select {\r\n position: absolute;\r\n top: 1rem;\r\n left: 1rem;\r\n background: rgba(0, 0, 0, 0.7);\r\n padding: 0.5rem;\r\n border-radius: 0.5rem;\r\n z-index: 999;\r\n display: flex;\r\n align-items: center;\r\n color: white;\r\n\r\n label {\r\n margin-right: 0.5rem;\r\n font-size: 14px;\r\n }\r\n\r\n select {\r\n background: transparent;\r\n color: white;\r\n border: 1px solid white;\r\n border-radius: 0.3rem;\r\n font-size: 14px;\r\n padding: 0.2rem;\r\n }\r\n}\r\n\r\n.buttonfabCameraChange {\r\n --background: rgba(0, 0, 0, 0.6);\r\n --color: #fff;\r\n //box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\r\n /* ajusta posici\u00F3n extra si lo necesitas */\r\n /* margin-top: 8px; margin-left: 8px; */\r\n}\r\n"] }]
|
|
228
228
|
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.ModalDpiServices }], { videoElement: [{
|
|
229
229
|
type: ViewChild,
|
|
230
230
|
args: ['videoElement']
|
package/package.json
CHANGED