metag-sdk-ionic 1.2.7-dev-0.58 → 1.2.7-dev-0.59
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/photo-selfie-camera/photo-selfie-camera.component.js
CHANGED
|
@@ -238,11 +238,11 @@ export class PhotoSelfieCameraComponent {
|
|
|
238
238
|
i0.ɵɵproperty("ngIf", ctx.showCountdown);
|
|
239
239
|
i0.ɵɵadvance();
|
|
240
240
|
i0.ɵɵclassProp("hidden", ctx.isCapturing);
|
|
241
|
-
} }, dependencies: [i4.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonToolbar], styles: [".camera-container[_ngcontent-%COMP%] {\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 70%;\r\n background-color: white;\r\n }\r\n \r\n .video-wrapper[_ngcontent-%COMP%] {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n }\r\n \r\n video[_ngcontent-%COMP%] {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 50%;\r\n }\r\n \r\n .progress-ring[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n transform: rotate(-90deg);\r\n \n\r\n }\r\n \r\n .progress-ring__circle[_ngcontent-%COMP%] {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 12;\r\n stroke-dasharray: 945;\r\n \n\r\n stroke-dashoffset: 880;\r\n \n\r\n transition: stroke-dashoffset 3s linear;\r\n \n\r\n }\r\n \r\n .progress-active[_ngcontent-%COMP%] .progress-ring__circle[_ngcontent-%COMP%] {\r\n animation: _ngcontent-%COMP%_progress-animation 3s linear forwards;\r\n }\r\n \r\n @keyframes _ngcontent-%COMP%_progress-animation {\r\n from {\r\n stroke-dashoffset: 880;\r\n }\r\n to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n //[_ngcontent-%COMP%] div[_ngcontent-%COMP%] //[_ngcontent-%COMP%] {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\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 // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container[_ngcontent-%COMP%] {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n }\r\n \r\n \r\n \r\n .centered-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n width: 100%; \n\r\n font-weight: bold;\r\n }\r\n \r\n .fixed-footer[_ngcontent-%COMP%] {\r\n position: fixed;\r\n bottom:
|
|
241
|
+
} }, dependencies: [i4.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonToolbar], styles: [".camera-container[_ngcontent-%COMP%] {\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 70%;\r\n background-color: white;\r\n }\r\n \r\n .video-wrapper[_ngcontent-%COMP%] {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n }\r\n \r\n video[_ngcontent-%COMP%] {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 50%;\r\n }\r\n \r\n .progress-ring[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n transform: rotate(-90deg);\r\n \n\r\n }\r\n \r\n .progress-ring__circle[_ngcontent-%COMP%] {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 12;\r\n stroke-dasharray: 945;\r\n \n\r\n stroke-dashoffset: 880;\r\n \n\r\n transition: stroke-dashoffset 3s linear;\r\n \n\r\n }\r\n \r\n .progress-active[_ngcontent-%COMP%] .progress-ring__circle[_ngcontent-%COMP%] {\r\n animation: _ngcontent-%COMP%_progress-animation 3s linear forwards;\r\n }\r\n \r\n @keyframes _ngcontent-%COMP%_progress-animation {\r\n from {\r\n stroke-dashoffset: 880;\r\n }\r\n to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n //[_ngcontent-%COMP%] div[_ngcontent-%COMP%] //[_ngcontent-%COMP%] {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\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 // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container[_ngcontent-%COMP%] {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n }\r\n \r\n \r\n \r\n .centered-title[_ngcontent-%COMP%] {\r\n text-align: center;\r\n width: 100%; \n\r\n font-weight: bold;\r\n }\r\n \r\n .fixed-footer[_ngcontent-%COMP%] {\r\n position: fixed;\r\n bottom: 10vh; // Sube el bot\u00F3n un 10% desde abajo\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n background-color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\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 &: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 // Clase para ocultar el bot\u00F3n durante la captura\r\n &.hidden {\r\n display: none;\r\n }\r\n } \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n color: #000000; \n\r\n }\r\n \r\n ion-toolbar[_ngcontent-%COMP%] {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n }\r\n \r\n \r\n ion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n }\r\n \r\n ion-toolbar[_ngcontent-%COMP%] {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n display: flex;\r\n justify-content: space-between; \n\r\n align-items: center;\r\n }\r\n \r\n .centered-title[_ngcontent-%COMP%] {\r\n flex: 1;\r\n text-align: center; \n\r\n font-weight: bold;\r\n color: #000000;\r\n margin: 0; \n\r\n }\r\n \r\n ion-buttons[_ngcontent-%COMP%] {\r\n justify-content: flex-end; \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); \n\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0;\r\n padding: 0;\r\n z-index: 1000; \n\r\n animation: _ngcontent-%COMP%_fadeIn 0.5s ease-out, _ngcontent-%COMP%_fadeOut 0.5s ease-out 2.5s; \n\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n \r\n }\r\n \r\n ion-content.custom-content[_ngcontent-%COMP%] {\r\n --padding-top: 0;\r\n --padding-bottom: 0;\r\n margin: 0;\r\n padding: 0;\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n }\r\n \r\n .countdown[_ngcontent-%COMP%] {\r\n font-size: 100px;\r\n font-weight: bold;\r\n color: white;\r\n animation: _ngcontent-%COMP%_scaleUp 0.5s ease-out, _ngcontent-%COMP%_scaleDown 0.5s ease-out 2.5s; \n\r\n }\r\n \r\n \n\r\n @keyframes _ngcontent-%COMP%_fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes _ngcontent-%COMP%_fadeOut {\r\n from {\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n }\r\n }\r\n \r\n \n\r\n @keyframes _ngcontent-%COMP%_scaleUp {\r\n from {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes _ngcontent-%COMP%_scaleDown {\r\n from {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n to {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n .red[_ngcontent-%COMP%] {\r\n padding: 10px;\r\n color: red;\r\n }\r\n \r\n .text-center[_ngcontent-%COMP%]{\r\n text-align: center;\r\n padding-left: 20%;\r\n padding-right: 20%;\r\n color: #333;\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: 100%;\r\n height: 100%;\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 margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n }\r\n \r\n ion-spinner[_ngcontent-%COMP%] {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n //[_ngcontent-%COMP%] Estilos[_ngcontent-%COMP%] para[_ngcontent-%COMP%] el[_ngcontent-%COMP%] c\u00EDrculo[_ngcontent-%COMP%] morado[_ngcontent-%COMP%] con[_ngcontent-%COMP%] cuenta[_ngcontent-%COMP%] regresiva\r\n[_ngcontent-%COMP%] .countdown-overlay[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n \r\n .countdown-circle[_ngcontent-%COMP%] {\r\n width: 200px;\r\n height: 200px;\r\n border: 10px solid purple;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n .countdown-number[_ngcontent-%COMP%] {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n color: purple;\r\n }\r\n \r\n //[_ngcontent-%COMP%] Estilos[_ngcontent-%COMP%] para[_ngcontent-%COMP%] el[_ngcontent-%COMP%] bot\u00F3n[_ngcontent-%COMP%] redondo[_ngcontent-%COMP%] de[_ngcontent-%COMP%] tomar[_ngcontent-%COMP%] foto\r\n[_ngcontent-%COMP%] .capture-button[_ngcontent-%COMP%] {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background-color: purple;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n margin: 0 auto;\r\n }"] }); }
|
|
242
242
|
}
|
|
243
243
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhotoSelfieCameraComponent, [{
|
|
244
244
|
type: Component,
|
|
245
|
-
args: [{ selector: 'app-photo-selfie-camera', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"light\" class=\"custom-content\">\r\n <!-- Loading deshabilitado para evitar conflictos con loading principal -->\r\n <!-- <div *ngIf=\"isLoading\" class=\"loading-overlay\">\r\n <ion-spinner name=\"crescent\"></ion-spinner>\r\n </div> -->\r\n\r\n <ion-header class=\"ion-no-border\">\r\n <ion-toolbar color=\"light\">\r\n <!-- <ion-title class=\"centered-title\">Video Selfie</ion-title> -->\r\n <ion-buttons slot=\"end\">\r\n <ion-button (click)=\"closeRequestedFunction()\">\r\n <ion-icon name=\"close\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\r\n <!-- Contenedor de la c\u00E1mara y progresi\u00F3n -->\r\n <div class=\"camera-container\">\r\n <div class=\"video-wrapper\">\r\n <video #videoElement muted autoplay playsinline style=\"transform: scaleX(-1)\"></video>\r\n <svg class=\"progress-ring\" #progressRing width=\"300\" height=\"300\">\r\n <circle class=\"progress-ring__circle\" cx=\"150\" cy=\"150\" r=\"150\" />\r\n </svg>\r\n </div>\r\n\r\n <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p>\r\n <!-- Efecto de c\u00EDrculo morado con cuenta regresiva -->\r\n <div class=\"countdown-overlay\" *ngIf=\"showCountdown\">\r\n <div class=\"countdown-circle\">\r\n <span class=\"countdown-number\">{{ countdown }}</span>\r\n </div>\r\n </div>\r\n <!-- Bot\u00F3n expandido y centrado para tomar foto -->\r\n <div class=\"fixed-footer\" [class.hidden]=\"isCapturing\">\r\n <ion-button expand=\"block\" (click)=\"capturePhoto()\">\r\n Tomar Fotograf\u00EDa\r\n </ion-button>\r\n </div>\r\n </div>\r\n</ion-content>", styles: [".camera-container {\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 70%;\r\n background-color: white;\r\n }\r\n \r\n .video-wrapper {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n }\r\n \r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 50%;\r\n }\r\n \r\n .progress-ring {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n transform: rotate(-90deg);\r\n /* Rotamos el c\u00EDrculo para que la animaci\u00F3n inicie desde arriba */\r\n }\r\n \r\n .progress-ring__circle {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 12;\r\n stroke-dasharray: 945;\r\n /* La circunferencia del c\u00EDrculo */\r\n stroke-dashoffset: 880;\r\n /* Oculto por completo al inicio */\r\n transition: stroke-dashoffset 3s linear;\r\n /* Esto controlar\u00E1 el llenado progresivo */\r\n }\r\n \r\n .progress-active .progress-ring__circle {\r\n animation: progress-animation 3s linear forwards;\r\n }\r\n \r\n @keyframes progress-animation {\r\n from {\r\n stroke-dashoffset: 880;\r\n }\r\n to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n // div \r\n // {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\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 // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco para el header */\r\n }\r\n \r\n \r\n \r\n .centered-title {\r\n text-align: center;\r\n width: 100%; /* Asegura que el t\u00EDtulo est\u00E9 centrado */\r\n font-weight: bold;\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: 10px;\r\n background-color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\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 &: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 // Clase para ocultar el bot\u00F3n durante la captura\r\n &.hidden {\r\n display: none;\r\n }\r\n } \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n color: #000000; /* Texto negro */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n }\r\n \r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n display: flex;\r\n justify-content: space-between; /* Espacio entre t\u00EDtulo y bot\u00F3n */\r\n align-items: center;\r\n }\r\n \r\n .centered-title {\r\n flex: 1;\r\n text-align: center; /* Centrar el t\u00EDtulo */\r\n font-weight: bold;\r\n color: #000000;\r\n margin: 0; /* Quita cualquier margen del t\u00EDtulo */\r\n }\r\n \r\n ion-buttons {\r\n justify-content: flex-end; /* Alinea el bot\u00F3n a la derecha */\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); /* Fondo semi-transparente */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0;\r\n padding: 0;\r\n z-index: 1000; /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s; /* Animaciones de entrada y salida */\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n \r\n }\r\n \r\n ion-content.custom-content {\r\n --padding-top: 0;\r\n --padding-bottom: 0;\r\n margin: 0;\r\n padding: 0;\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n }\r\n \r\n .countdown {\r\n font-size: 100px;\r\n font-weight: bold;\r\n color: white;\r\n animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s; /* Escalar en entrada y salida */\r\n }\r\n \r\n /* Animaci\u00F3n para desvanecer la superposici\u00F3n */\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes fadeOut {\r\n from {\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n }\r\n }\r\n \r\n /* Animaci\u00F3n para escalar el n\u00FAmero */\r\n @keyframes scaleUp {\r\n from {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes scaleDown {\r\n from {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n to {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n .red {\r\n padding: 10px;\r\n color: red;\r\n }\r\n \r\n .text-center{\r\n text-align: center;\r\n padding-left: 20%;\r\n padding-right: 20%;\r\n color: #333;\r\n }\r\n \r\n .loading-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.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 margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n }\r\n \r\n ion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n // Estilos para el c\u00EDrculo morado con cuenta regresiva\r\n .countdown-overlay {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n \r\n .countdown-circle {\r\n width: 200px;\r\n height: 200px;\r\n border: 10px solid purple;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n .countdown-number {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n color: purple;\r\n }\r\n \r\n // Estilos para el bot\u00F3n redondo de tomar foto\r\n .capture-button {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background-color: purple;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n margin: 0 auto;\r\n }"] }]
|
|
245
|
+
args: [{ selector: 'app-photo-selfie-camera', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"light\" class=\"custom-content\">\r\n <!-- Loading deshabilitado para evitar conflictos con loading principal -->\r\n <!-- <div *ngIf=\"isLoading\" class=\"loading-overlay\">\r\n <ion-spinner name=\"crescent\"></ion-spinner>\r\n </div> -->\r\n\r\n <ion-header class=\"ion-no-border\">\r\n <ion-toolbar color=\"light\">\r\n <!-- <ion-title class=\"centered-title\">Video Selfie</ion-title> -->\r\n <ion-buttons slot=\"end\">\r\n <ion-button (click)=\"closeRequestedFunction()\">\r\n <ion-icon name=\"close\"></ion-icon>\r\n </ion-button>\r\n </ion-buttons>\r\n </ion-toolbar>\r\n </ion-header>\r\n\r\n <!-- Contenedor de la c\u00E1mara y progresi\u00F3n -->\r\n <div class=\"camera-container\">\r\n <div class=\"video-wrapper\">\r\n <video #videoElement muted autoplay playsinline style=\"transform: scaleX(-1)\"></video>\r\n <svg class=\"progress-ring\" #progressRing width=\"300\" height=\"300\">\r\n <circle class=\"progress-ring__circle\" cx=\"150\" cy=\"150\" r=\"150\" />\r\n </svg>\r\n </div>\r\n\r\n <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p>\r\n <!-- Efecto de c\u00EDrculo morado con cuenta regresiva -->\r\n <div class=\"countdown-overlay\" *ngIf=\"showCountdown\">\r\n <div class=\"countdown-circle\">\r\n <span class=\"countdown-number\">{{ countdown }}</span>\r\n </div>\r\n </div>\r\n <!-- Bot\u00F3n expandido y centrado para tomar foto -->\r\n <div class=\"fixed-footer\" [class.hidden]=\"isCapturing\">\r\n <ion-button expand=\"block\" (click)=\"capturePhoto()\">\r\n Tomar Fotograf\u00EDa\r\n </ion-button>\r\n </div>\r\n </div>\r\n</ion-content>", styles: [".camera-container {\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 70%;\r\n background-color: white;\r\n }\r\n \r\n .video-wrapper {\r\n position: relative;\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n }\r\n \r\n video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 50%;\r\n }\r\n \r\n .progress-ring {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n transform: rotate(-90deg);\r\n /* Rotamos el c\u00EDrculo para que la animaci\u00F3n inicie desde arriba */\r\n }\r\n \r\n .progress-ring__circle {\r\n fill: transparent;\r\n stroke: purple;\r\n stroke-width: 12;\r\n stroke-dasharray: 945;\r\n /* La circunferencia del c\u00EDrculo */\r\n stroke-dashoffset: 880;\r\n /* Oculto por completo al inicio */\r\n transition: stroke-dashoffset 3s linear;\r\n /* Esto controlar\u00E1 el llenado progresivo */\r\n }\r\n \r\n .progress-active .progress-ring__circle {\r\n animation: progress-animation 3s linear forwards;\r\n }\r\n \r\n @keyframes progress-animation {\r\n from {\r\n stroke-dashoffset: 880;\r\n }\r\n to {\r\n stroke-dashoffset: 0;\r\n }\r\n }\r\n \r\n // div \r\n // {\r\n // color: #ffffff;\r\n // font-weight: 50px;\r\n // border-radius: 20px;\r\n // margin-top: 20px;\r\n // //width: 90%;\r\n // //max-width: 300px;\r\n // align-self: center;\r\n // text-transform: none;\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 // --padding-top: 10px;\r\n // --padding-bottom: 10px;\r\n // }\r\n \r\n .text-container {\r\n height: 40px;\r\n color: black;\r\n }\r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco para el header */\r\n }\r\n \r\n \r\n \r\n .centered-title {\r\n text-align: center;\r\n width: 100%; /* Asegura que el t\u00EDtulo est\u00E9 centrado */\r\n font-weight: bold;\r\n }\r\n \r\n .fixed-footer {\r\n position: fixed;\r\n bottom: 10vh; // Sube el bot\u00F3n un 10% desde abajo\r\n left: 0;\r\n width: 100%;\r\n padding: 10px;\r\n background-color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\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 &: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 // Clase para ocultar el bot\u00F3n durante la captura\r\n &.hidden {\r\n display: none;\r\n }\r\n } \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n color: #000000; /* Texto negro */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n }\r\n \r\n \r\n ion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n }\r\n \r\n ion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n display: flex;\r\n justify-content: space-between; /* Espacio entre t\u00EDtulo y bot\u00F3n */\r\n align-items: center;\r\n }\r\n \r\n .centered-title {\r\n flex: 1;\r\n text-align: center; /* Centrar el t\u00EDtulo */\r\n font-weight: bold;\r\n color: #000000;\r\n margin: 0; /* Quita cualquier margen del t\u00EDtulo */\r\n }\r\n \r\n ion-buttons {\r\n justify-content: flex-end; /* Alinea el bot\u00F3n a la derecha */\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); /* Fondo semi-transparente */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0;\r\n padding: 0;\r\n z-index: 1000; /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s; /* Animaciones de entrada y salida */\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n \r\n }\r\n \r\n ion-content.custom-content {\r\n --padding-top: 0;\r\n --padding-bottom: 0;\r\n margin: 0;\r\n padding: 0;\r\n margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n }\r\n \r\n .countdown {\r\n font-size: 100px;\r\n font-weight: bold;\r\n color: white;\r\n animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s; /* Escalar en entrada y salida */\r\n }\r\n \r\n /* Animaci\u00F3n para desvanecer la superposici\u00F3n */\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes fadeOut {\r\n from {\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n }\r\n }\r\n \r\n /* Animaci\u00F3n para escalar el n\u00FAmero */\r\n @keyframes scaleUp {\r\n from {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes scaleDown {\r\n from {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n to {\r\n transform: scale(0.8);\r\n opacity: 0;\r\n }\r\n }\r\n \r\n .red {\r\n padding: 10px;\r\n color: red;\r\n }\r\n \r\n .text-center{\r\n text-align: center;\r\n padding-left: 20%;\r\n padding-right: 20%;\r\n color: #333;\r\n }\r\n \r\n .loading-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.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 margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n border-radius: 0px;\r\n }\r\n \r\n ion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n // Estilos para el c\u00EDrculo morado con cuenta regresiva\r\n .countdown-overlay {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 10;\r\n }\r\n \r\n .countdown-circle {\r\n width: 200px;\r\n height: 200px;\r\n border: 10px solid purple;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n .countdown-number {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n color: purple;\r\n }\r\n \r\n // Estilos para el bot\u00F3n redondo de tomar foto\r\n .capture-button {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background-color: purple;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n margin: 0 auto;\r\n }"] }]
|
|
246
246
|
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i3.ModalDpiServices }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], { videoElement: [{
|
|
247
247
|
type: ViewChild,
|
|
248
248
|
args: ['videoElement']
|
package/package.json
CHANGED