metag-sdk-ionic 1.2.11-dev-0.8 → 1.2.11-dev-0.10

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.
Files changed (2) hide show
  1. package/dist/src/app/pages/id-vision/components/camera-with-overlay/camera-with-overlay.component.js +2 -2
  2. package/package.json +1 -1
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 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}"] }); }
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}\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 overflow: hidden;\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 z-index: 1;\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: 58%;\r\n max-width: 85%;\r\n z-index: 9;\r\n pointer-events: none;\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-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: 82%;\r\n max-width: 340px;\r\n height: 52%;\r\n max-height: 530px;\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-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-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//[_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 !important;\r\n bottom: 40px !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n width: 100% !important;\r\n height: auto !important;\r\n display: flex !important;\r\n flex-direction: row !important;\r\n justify-content: space-around !important;\r\n align-items: flex-end !important;\r\n padding: 0 40px !important;\r\n z-index: 20 !important;\r\n box-sizing: border-box !important;\r\n gap: 0 !important;\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 auto !important;\r\n width: 80px !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: flex-end !important;\r\n}\r\n\r\n.sdk-metag-control-center[_ngcontent-%COMP%] {\r\n flex: 0 0 auto !important;\r\n width: 100px !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: flex-end !important;\r\n}\r\n\r\n.sdk-metag-control-button[_ngcontent-%COMP%] {\r\n --color: white !important;\r\n --padding-start: 0 !important;\r\n --padding-end: 0 !important;\r\n margin: 0 0 5px 0 !important;\r\n width: 60px !important;\r\n height: 60px !important;\r\n \r\n ion-icon {\r\n font-size: 36px !important;\r\n }\r\n \r\n &:disabled,\r\n &[disabled] {\r\n --color: rgba(255, 255, 255, 0.3) !important;\r\n opacity: 0.4 !important;\r\n pointer-events: none !important;\r\n }\r\n}\r\n\r\n.sdk-metag-control-label[_ngcontent-%COMP%] {\r\n color: white !important;\r\n font-size: 12px !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n text-align: center !important;\r\n font-weight: 500 !important;\r\n}\r\n\r\n.sdk-metag-capture-button[_ngcontent-%COMP%] {\r\n width: 85px !important;\r\n height: 85px !important;\r\n border-radius: 50% !important;\r\n margin: 0 !important;\r\n --padding-start: 0 !important;\r\n --padding-end: 0 !important;\r\n\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: white !important;\r\n --border-color: white !important;\r\n --border-style: solid !important;\r\n --border-width: 3px !important;\r\n --box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5) !important;\r\n}\r\n\r\n.sdk-metag-camera-icon[_ngcontent-%COMP%] {\r\n font-size: 40px !important;\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_popIn {\r\n 0% {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n 50% {\r\n transform: scale(1.1);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: scale(1);\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);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n}\r\n\r\nion-spinner[_ngcontent-%COMP%] {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\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 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"] }]
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}\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 overflow: hidden;\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 z-index: 1;\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: 58%;\r\n max-width: 85%;\r\n z-index: 9;\r\n pointer-events: none;\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-visible-window {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 82%;\r\n max-width: 340px;\r\n height: 52%;\r\n max-height: 530px;\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-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-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// CONTROLES EN LA PARTE INFERIOR\r\n// ========================================\r\n.sdk-metag-controls-container {\r\n position: absolute !important;\r\n bottom: 40px !important;\r\n left: 0 !important;\r\n right: 0 !important;\r\n width: 100% !important;\r\n height: auto !important;\r\n display: flex !important;\r\n flex-direction: row !important;\r\n justify-content: space-around !important;\r\n align-items: flex-end !important;\r\n padding: 0 40px !important;\r\n z-index: 20 !important;\r\n box-sizing: border-box !important;\r\n gap: 0 !important;\r\n}\r\n\r\n.sdk-metag-control-left,\r\n.sdk-metag-control-right {\r\n flex: 0 0 auto !important;\r\n width: 80px !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: flex-end !important;\r\n}\r\n\r\n.sdk-metag-control-center {\r\n flex: 0 0 auto !important;\r\n width: 100px !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: center !important;\r\n justify-content: flex-end !important;\r\n}\r\n\r\n.sdk-metag-control-button {\r\n --color: white !important;\r\n --padding-start: 0 !important;\r\n --padding-end: 0 !important;\r\n margin: 0 0 5px 0 !important;\r\n width: 60px !important;\r\n height: 60px !important;\r\n \r\n ion-icon {\r\n font-size: 36px !important;\r\n }\r\n \r\n &:disabled,\r\n &[disabled] {\r\n --color: rgba(255, 255, 255, 0.3) !important;\r\n opacity: 0.4 !important;\r\n pointer-events: none !important;\r\n }\r\n}\r\n\r\n.sdk-metag-control-label {\r\n color: white !important;\r\n font-size: 12px !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n text-align: center !important;\r\n font-weight: 500 !important;\r\n}\r\n\r\n.sdk-metag-capture-button {\r\n width: 85px !important;\r\n height: 85px !important;\r\n border-radius: 50% !important;\r\n margin: 0 !important;\r\n --padding-start: 0 !important;\r\n --padding-end: 0 !important;\r\n\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: white !important;\r\n --border-color: white !important;\r\n --border-style: solid !important;\r\n --border-width: 3px !important;\r\n --box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.5) !important;\r\n}\r\n\r\n.sdk-metag-camera-icon {\r\n font-size: 40px !important;\r\n}\r\n\r\n@keyframes popIn {\r\n 0% {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n 50% {\r\n transform: scale(1.1);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform: scale(1);\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);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n}\r\n\r\nion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "metag-sdk-ionic",
3
- "version": "1.2.11-dev-0.8",
3
+ "version": "1.2.11-dev-0.10",
4
4
  "author": "FGE",
5
5
  "description": "SDK de MetaG para validación de documentos y prueba de vida con Angular e Ionic.",
6
6
  "homepage": "https://ionicframework.com/",