metag-sdk-ionic 1.2.8 → 1.2.9
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-video-selfie/camara-video-selfie.component.js +2 -2
- package/dist/src/app/pages/id-vision/components/direct-photo-selfie/direct-photo-selfie.component.d.ts +3 -3
- package/dist/src/app/pages/id-vision/components/direct-photo-selfie/direct-photo-selfie.component.js +29 -9
- package/dist/src/app/pages/id-vision/components/direct-photo-selfie/direct-photo-selfie.component.js.map +1 -1
- package/dist/src/app/pages/id-vision/components/photo-selfie-camera/photo-selfie-camera.component.d.ts +2 -1
- package/dist/src/app/pages/id-vision/components/photo-selfie-camera/photo-selfie-camera.component.js +28 -6
- package/dist/src/app/pages/id-vision/components/photo-selfie-camera/photo-selfie-camera.component.js.map +1 -1
- package/dist/src/app/pages/id-vision/components/simple-acuerdo-video/simple-acuerdo-video.component.js +2 -2
- package/dist/src/app/pages/id-vision/id-vision.component.d.ts +1 -1
- package/dist/src/app/pages/id-vision/id-vision.component.js +106 -46
- package/dist/src/app/pages/id-vision/id-vision.component.js.map +1 -1
- package/dist/src/app/pages/id-vision/services/configuration/configuration.service.js +1 -0
- package/dist/src/app/pages/id-vision/services/configuration/configuration.service.js.map +1 -1
- package/dist/src/app/pages/id-vision/services/modal-services/sdk-communication-services.js +3 -0
- package/dist/src/app/pages/id-vision/services/modal-services/sdk-communication-services.js.map +1 -1
- package/package.json +1 -1
|
@@ -461,11 +461,11 @@ export class SimpleAcuerdoVideoComponent {
|
|
|
461
461
|
i0.ɵɵproperty("isOpen", ctx.isModalOpen);
|
|
462
462
|
i0.ɵɵadvance(2);
|
|
463
463
|
i0.ɵɵproperty("isOpen", ctx.isModalVoiceOpen);
|
|
464
|
-
} }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonLabel, i1.IonToolbar, i1.IonModal], 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: 50%; // Antes era 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\nvideo[_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); \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; \n\r\n stroke-dashoffset: 880; \n\r\n transition: stroke-dashoffset 12s linear; \n\r\n}\r\n\r\n.progress-active[_ngcontent-%COMP%] .progress-ring__circle[_ngcontent-%COMP%] {\r\n animation: _ngcontent-%COMP%_progress-animation 5s 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\nion-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\r\n position: fixed;\r\n bottom: 0;\r\n // left: 0;\r\n left: 50%;\r\n // width: 100%;\r\n width: auto;\r\n transform: translateX(-50%); \n\r\n justify-content: center;\r\n padding: 10px;\r\n background-color: #fff; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n ion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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\nion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n color: #000000; \n\r\n}\r\n\r\nion-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\nion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n}\r\n\r\nion-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\nion-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\nion-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}\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\nion-spinner[_ngcontent-%COMP%] {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n.main-header[_ngcontent-%COMP%] {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n}\r\n\r\n.main-title[_ngcontent-%COMP%] {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: var(--purple-secondary);\r\n}\r\n\r\n.acuerdo-text[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n color: black;\r\n}\r\n\r\n//TTS\r\n\r\n.subtitle[_ngcontent-%COMP%] {\r\n padding: 0px 24px;\r\n text-align: left;\r\n font-size: 17px;\r\n}\r\n.subtitle-word[_ngcontent-%COMP%] {\r\n display: inline-block;\r\n margin: 0 3px;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n border-radius: 10px;\r\n\r\n}\r\n\r\n.subtitle-word.highlight[_ngcontent-%COMP%] {\r\n background-color: purple;\r\n border-radius: 6px;\r\n color: white;\r\n padding: 4px;\r\n font-weight: 600;\r\n}\r\n\r\n\r\n.subtitle-word.read[_ngcontent-%COMP%] {\r\n color: gray; \n\r\n}\r\n\r\n.button-container[_ngcontent-%COMP%] {\r\n justify-content: center;\r\n display: flex;\r\n}\r\n\r\n\r\n//[_ngcontent-%COMP%] MODAL\r\n\r\nion-modal[_ngcontent-%COMP%] {\r\n--display: flex;\r\n--height: 100%;\r\n--width: 100%;\r\n// --border-radius: 16px;\r\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n// --background: rgba(0, 0, 0, 0.30) !important;\r\n}\r\n\r\n.full-content[_ngcontent-%COMP%] {\r\nwidth: 100%;\r\nheight: 100%;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nbackground-color: rgba(0, 0, 0, 0.30) !important;\r\n\r\n}\r\n\r\n.modal-content[_ngcontent-%COMP%] {\r\ntext-align: center;\r\npadding: 10px;\r\nleft: 50%;\r\nborder-radius: 16px;\r\nheight: 370px;\r\nwidth: 80%;\r\nbackground-color: white;\r\n justify-content: center;\r\nalign-items: center; \r\n\r\nh2 {\r\n color: var(--purple-primary);\r\n}\r\n\r\n.subtitle {\r\n margin-bottom: 20px;\r\n}\r\n\r\nion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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(--orange-primary);\r\n --background-hover: var(--orange-secondary);\r\n --background-activated: var(--orange-secondary);\r\n --background-focused: var(--orange-secondary);\r\n \r\n --color: var(--orange-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--orange-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(--orange-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 // .button-container {\r\n // display: block;\r\n // // position: fixed;\r\n // // bottom: 32%;\r\n // // left: 0;\r\n // left: 50%;\r\n // // width: 100%;\r\n // width: auto;\r\n // transform: translateX(-50%); \n\r\n // justify-content: center;\r\n // padding: 5px;\r\n // }\r\n}\r\nion-modal[_ngcontent-%COMP%]::part(backdrop) {\r\nbackground: rgb(136, 138, 142);\r\nopacity: 1;\r\n}\r\n\r\nion-modal[_ngcontent-%COMP%] ion-toolbar[_ngcontent-%COMP%] {\r\n--background: rgb(14 116 144);\r\n--color: white;\r\n}\r\n\r\nion-modal.stack-modal[_ngcontent-%COMP%] {\r\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\r\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\r\n}\r\n\r\n\r\n.modal-content-2[_ngcontent-%COMP%] {\r\nbackground-color: white;\r\npadding: 20px;\r\ntext-align: center;\r\nborder-radius: 12px;\r\nheight: auto;\r\nwidth: 80%;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n\r\n.modal-header[_ngcontent-%COMP%] ion-icon[_ngcontent-%COMP%] {\r\ncolor: #ff9a00; \n\r\nmargin-bottom: 10px;\r\nfont-size: 3rem !important\r\n;\r\n}\r\n\r\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n// font-size: 18px;\r\nmargin-bottom: 20px;\r\n}\r\n\r\n.icons-container[_ngcontent-%COMP%] {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 20px;\r\ngap: 15px; \r\n\r\n}\r\n\r\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\nfont-size: 20px;\r\n}\r\n.custom-text[_ngcontent-%COMP%] {\r\nbackground-color: var(--orange-primary);\r\ncolor: white;\r\nborder-radius: 10px;\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n\r\n.o-text[_ngcontent-%COMP%] {\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}"] }); }
|
|
464
|
+
} }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonLabel, i1.IonToolbar, i1.IonModal], 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: 50%; // Antes era 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\nvideo[_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); \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; \n\r\n stroke-dashoffset: 880; \n\r\n transition: stroke-dashoffset 12s linear; \n\r\n}\r\n\r\n.progress-active[_ngcontent-%COMP%] .progress-ring__circle[_ngcontent-%COMP%] {\r\n animation: _ngcontent-%COMP%_progress-animation 5s 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\nion-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\r\n position: fixed;\r\n bottom: 0;\r\n // left: 0;\r\n left: 50%;\r\n // width: 100%;\r\n width: auto;\r\n transform: translateX(-50%); \n\r\n justify-content: center;\r\n padding: 10px;\r\n background-color: #fff; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n ion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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\nion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n color: #000000; \n\r\n}\r\n\r\nion-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\nion-header[_ngcontent-%COMP%] {\r\n --background: #ffffff; \n\r\n}\r\n\r\nion-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\nion-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\nion-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\nion-spinner[_ngcontent-%COMP%] {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n.main-header[_ngcontent-%COMP%] {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n}\r\n\r\n.main-title[_ngcontent-%COMP%] {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: var(--purple-secondary);\r\n}\r\n\r\n.acuerdo-text[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n color: black;\r\n}\r\n\r\n//TTS\r\n\r\n.subtitle[_ngcontent-%COMP%] {\r\n padding: 0px 24px;\r\n text-align: left;\r\n font-size: 17px;\r\n}\r\n.subtitle-word[_ngcontent-%COMP%] {\r\n display: inline-block;\r\n margin: 0 3px;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n border-radius: 10px;\r\n\r\n}\r\n\r\n.subtitle-word.highlight[_ngcontent-%COMP%] {\r\n background-color: purple;\r\n border-radius: 6px;\r\n color: white;\r\n padding: 4px;\r\n font-weight: 600;\r\n}\r\n\r\n\r\n.subtitle-word.read[_ngcontent-%COMP%] {\r\n color: gray; \n\r\n}\r\n\r\n.button-container[_ngcontent-%COMP%] {\r\n justify-content: center;\r\n display: flex;\r\n}\r\n\r\n\r\n//[_ngcontent-%COMP%] MODAL\r\n\r\nion-modal[_ngcontent-%COMP%] {\r\n--display: flex;\r\n--height: 100%;\r\n--width: 100%;\r\n// --border-radius: 16px;\r\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n// --background: rgba(0, 0, 0, 0.30) !important;\r\n}\r\n\r\n.full-content[_ngcontent-%COMP%] {\r\nwidth: 100%;\r\nheight: 100%;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nbackground-color: rgba(0, 0, 0, 0.30) !important;\r\n\r\n}\r\n\r\n.modal-content[_ngcontent-%COMP%] {\r\ntext-align: center;\r\npadding: 10px;\r\nleft: 50%;\r\nborder-radius: 16px;\r\nheight: 370px;\r\nwidth: 80%;\r\nbackground-color: white;\r\n justify-content: center;\r\nalign-items: center; \r\n\r\nh2 {\r\n color: var(--purple-primary);\r\n}\r\n\r\n.subtitle {\r\n margin-bottom: 20px;\r\n}\r\n\r\nion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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(--orange-primary);\r\n --background-hover: var(--orange-secondary);\r\n --background-activated: var(--orange-secondary);\r\n --background-focused: var(--orange-secondary);\r\n \r\n --color: var(--orange-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--orange-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(--orange-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 // .button-container {\r\n // display: block;\r\n // // position: fixed;\r\n // // bottom: 32%;\r\n // // left: 0;\r\n // left: 50%;\r\n // // width: 100%;\r\n // width: auto;\r\n // transform: translateX(-50%); \n\r\n // justify-content: center;\r\n // padding: 5px;\r\n // }\r\n}\r\nion-modal[_ngcontent-%COMP%]::part(backdrop) {\r\nbackground: rgb(136, 138, 142);\r\nopacity: 1;\r\n}\r\n\r\nion-modal[_ngcontent-%COMP%] ion-toolbar[_ngcontent-%COMP%] {\r\n--background: rgb(14 116 144);\r\n--color: white;\r\n}\r\n\r\nion-modal.stack-modal[_ngcontent-%COMP%] {\r\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\r\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\r\n}\r\n\r\n\r\n.modal-content-2[_ngcontent-%COMP%] {\r\nbackground-color: white;\r\npadding: 20px;\r\ntext-align: center;\r\nborder-radius: 12px;\r\nheight: auto;\r\nwidth: 80%;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n\r\n.modal-header[_ngcontent-%COMP%] ion-icon[_ngcontent-%COMP%] {\r\ncolor: #ff9a00; \n\r\nmargin-bottom: 10px;\r\nfont-size: 3rem !important\r\n;\r\n}\r\n\r\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n// font-size: 18px;\r\nmargin-bottom: 20px;\r\n}\r\n\r\n.icons-container[_ngcontent-%COMP%] {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 20px;\r\ngap: 15px; \r\n\r\n}\r\n\r\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\nfont-size: 20px;\r\n}\r\n.custom-text[_ngcontent-%COMP%] {\r\nbackground-color: var(--orange-primary);\r\ncolor: white;\r\nborder-radius: 10px;\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n\r\n.o-text[_ngcontent-%COMP%] {\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}"] }); }
|
|
465
465
|
}
|
|
466
466
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SimpleAcuerdoVideoComponent, [{
|
|
467
467
|
type: Component,
|
|
468
|
-
args: [{ selector: 'app-simple-acuerdo-video', 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 <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n <div class=\"countdown\">{{ countdown }}</div>\r\n </div>\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)=\"closeOverlayVideo()\" [disabled]=\"!canStopRecording\">\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 <div class=\"main-header\">\r\n <div class=\"main-title\">\r\n <h1>Acuerdo de Video</h1>\r\n </div>\r\n <div class=\"acuerdo-text\">\r\n <p>Contesta \u00FAnicamente \"S\u00ED\" si est\u00E1s de acuerdo con el cr\u00E9dito y contesta \"No\" para cancelar el proceso.</p>\r\n </div>\r\n </div>\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 <ion-label [ngClass]=\"{'red': isRecording}\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining\r\n }}</ion-label>\r\n\r\n <div class=\"text-container\" *ngIf=\"showTextAcuerdo\">\r\n <!-- Mostrar las palabras como subt\u00EDtulos -->\r\n <p class=\"subtitle\">\r\n <span *ngFor=\"let word of words; let i = index\" class=\"subtitle-word\">\r\n {{ word }} \r\n </span>\r\n </p>\r\n </div>\r\n <!-- <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p> -->\r\n\r\n \r\n <!-- Botones de grabaci\u00F3n -->\r\n <div class=\"fixed-footer\">\r\n <ion-button *ngIf=\"!isRecording\" size=\"large\" expand=\"block\" (click)=\"recordVideo()\" shape=\"round\"><ion-icon slot=\"icon-only\" name=\"camera-outline\"></ion-icon></ion-button>\r\n <ion-button *ngIf=\"isRecording\" size=\"large\" expand=\"block\" (click)=\"stopRecording()\" [disabled]=\"!canStopRecording\"><ion-icon slot=\"icon-only\" name=\"stop-outline\"></ion-icon></ion-button>\r\n </div>\r\n </div>\r\n\r\n <ion-modal id=\"example-modal\" [isOpen]=\"isModalOpen\" (didDismiss)=\"closeModal()\">\r\n <ng-template>\r\n <div class=\"full-content\"> \r\n <div class=\"modal-content\">\r\n <img src=\"https://placeholder.pics/svg/150x150\" alt=\"\">\r\n <h2>Instrucciones</h2> \r\n <!-- Subt\u00EDtulos din\u00E1micos y TTS -->\r\n <div class=\"subtitle\">\r\n <span *ngFor=\"let word of instructionWords; let i = index\" class=\"subtitle-word\">\r\n {{ word }}\r\n </span>\r\n </div>\r\n <div class=\"button-container\">\r\n <ion-button (click)=\"closeModal()\" [disabled]=\"isSpeaking\">Comenzar</ion-button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ion-modal>\r\n\r\n <ion-modal id=\"voice-modal\" [isOpen]=\"isModalVoiceOpen\" (didDismiss)=\"closeModalVoice()\">\r\n <ng-template>\r\n <div class=\"full-content\">\r\n <div class=\"modal-content-2\">\r\n <div class=\"modal-header\">\r\n <ion-icon name=\"mic\" size=\"large\" style=\"width: 50px !important; height: 50px !important;\"></ion-icon>\r\n </div>\r\n <div class=\"modal-body\">\r\n <p>Contesta con tu voz</p>\r\n <div class=\"icons-container\">\r\n <div class=\"custom-text\">\r\n <p>S\u00ED</p>\r\n </div>\r\n <div class=\"o-text\">\r\n <p>o</p>\r\n </div>\r\n <div class=\"custom-text\">\r\n <p>No</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-template>\r\n </ion-modal>\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: 50%; // Antes era 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\nvideo {\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); /* 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; /* La circunferencia del c\u00EDrculo 880*/\r\n stroke-dashoffset: 880; /* Oculto por completo al inicio */\r\n transition: stroke-dashoffset 12s linear; /* Esto controlar\u00E1 el llenado progresivo */\r\n}\r\n\r\n.progress-active .progress-ring__circle {\r\n animation: progress-animation 5s 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\nion-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\r\n position: fixed;\r\n bottom: 0;\r\n // left: 0;\r\n left: 50%;\r\n // width: 100%;\r\n width: auto;\r\n transform: translateX(-50%); /* Centra el contenedor */\r\n justify-content: center;\r\n padding: 10px;\r\n background-color: #fff; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n ion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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\nion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n color: #000000; /* Texto negro */\r\n}\r\n\r\nion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n}\r\n\r\n\r\nion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n}\r\n\r\nion-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\nion-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\nion-content.custom-content {\r\n --padding-top: 0;\r\n --padding-bottom: 0;\r\n margin: 0;\r\n padding: 0;\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\nion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n.main-header {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n}\r\n\r\n.main-title {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: var(--purple-secondary);\r\n}\r\n\r\n.acuerdo-text {\r\n font-size: 14px;\r\n color: black;\r\n}\r\n\r\n//TTS\r\n\r\n.subtitle {\r\n padding: 0px 24px;\r\n text-align: left;\r\n font-size: 17px;\r\n}\r\n.subtitle-word {\r\n display: inline-block;\r\n margin: 0 3px;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n border-radius: 10px;\r\n\r\n}\r\n\r\n.subtitle-word.highlight {\r\n background-color: purple;\r\n border-radius: 6px;\r\n color: white;\r\n padding: 4px;\r\n font-weight: 600;\r\n}\r\n\r\n\r\n.subtitle-word.read {\r\n color: gray; /* Color para el texto ya le\u00EDdo */\r\n}\r\n\r\n.button-container {\r\n justify-content: center;\r\n display: flex;\r\n}\r\n\r\n\r\n// MODAL\r\n\r\nion-modal {\r\n--display: flex;\r\n--height: 100%;\r\n--width: 100%;\r\n// --border-radius: 16px;\r\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n// --background: rgba(0, 0, 0, 0.30) !important;\r\n}\r\n\r\n.full-content {\r\nwidth: 100%;\r\nheight: 100%;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nbackground-color: rgba(0, 0, 0, 0.30) !important;\r\n\r\n}\r\n\r\n.modal-content {\r\ntext-align: center;\r\npadding: 10px;\r\nleft: 50%;\r\nborder-radius: 16px;\r\nheight: 370px;\r\nwidth: 80%;\r\nbackground-color: white;\r\n justify-content: center;\r\nalign-items: center; \r\n\r\nh2 {\r\n color: var(--purple-primary);\r\n}\r\n\r\n.subtitle {\r\n margin-bottom: 20px;\r\n}\r\n\r\nion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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(--orange-primary);\r\n --background-hover: var(--orange-secondary);\r\n --background-activated: var(--orange-secondary);\r\n --background-focused: var(--orange-secondary);\r\n \r\n --color: var(--orange-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--orange-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(--orange-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 // .button-container {\r\n // display: block;\r\n // // position: fixed;\r\n // // bottom: 32%;\r\n // // left: 0;\r\n // left: 50%;\r\n // // width: 100%;\r\n // width: auto;\r\n // transform: translateX(-50%); /* Centra el contenedor */\r\n // justify-content: center;\r\n // padding: 5px;\r\n // }\r\n}\r\nion-modal::part(backdrop) {\r\nbackground: rgb(136, 138, 142);\r\nopacity: 1;\r\n}\r\n\r\nion-modal ion-toolbar {\r\n--background: rgb(14 116 144);\r\n--color: white;\r\n}\r\n\r\nion-modal.stack-modal {\r\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\r\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\r\n}\r\n\r\n\r\n.modal-content-2 {\r\nbackground-color: white;\r\npadding: 20px;\r\ntext-align: center;\r\nborder-radius: 12px;\r\nheight: auto;\r\nwidth: 80%;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n\r\n.modal-header ion-icon {\r\ncolor: #ff9a00; /* Color del micr\u00F3fono */\r\nmargin-bottom: 10px;\r\nfont-size: 3rem !important\r\n;\r\n}\r\n\r\n.modal-body p {\r\n// font-size: 18px;\r\nmargin-bottom: 20px;\r\n}\r\n\r\n.icons-container {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 20px;\r\ngap: 15px; \r\n\r\n}\r\n\r\n.modal-body p {\r\nfont-size: 20px;\r\n}\r\n.custom-text {\r\nbackground-color: var(--orange-primary);\r\ncolor: white;\r\nborder-radius: 10px;\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n\r\n.o-text {\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n"] }]
|
|
468
|
+
args: [{ selector: 'app-simple-acuerdo-video', 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 <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n <div class=\"countdown\">{{ countdown }}</div>\r\n </div>\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)=\"closeOverlayVideo()\" [disabled]=\"!canStopRecording\">\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 <div class=\"main-header\">\r\n <div class=\"main-title\">\r\n <h1>Acuerdo de Video</h1>\r\n </div>\r\n <div class=\"acuerdo-text\">\r\n <p>Contesta \u00FAnicamente \"S\u00ED\" si est\u00E1s de acuerdo con el cr\u00E9dito y contesta \"No\" para cancelar el proceso.</p>\r\n </div>\r\n </div>\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 <ion-label [ngClass]=\"{'red': isRecording}\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining\r\n }}</ion-label>\r\n\r\n <div class=\"text-container\" *ngIf=\"showTextAcuerdo\">\r\n <!-- Mostrar las palabras como subt\u00EDtulos -->\r\n <p class=\"subtitle\">\r\n <span *ngFor=\"let word of words; let i = index\" class=\"subtitle-word\">\r\n {{ word }} \r\n </span>\r\n </p>\r\n </div>\r\n <!-- <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p> -->\r\n\r\n \r\n <!-- Botones de grabaci\u00F3n -->\r\n <div class=\"fixed-footer\">\r\n <ion-button *ngIf=\"!isRecording\" size=\"large\" expand=\"block\" (click)=\"recordVideo()\" shape=\"round\"><ion-icon slot=\"icon-only\" name=\"camera-outline\"></ion-icon></ion-button>\r\n <ion-button *ngIf=\"isRecording\" size=\"large\" expand=\"block\" (click)=\"stopRecording()\" [disabled]=\"!canStopRecording\"><ion-icon slot=\"icon-only\" name=\"stop-outline\"></ion-icon></ion-button>\r\n </div>\r\n </div>\r\n\r\n <ion-modal id=\"example-modal\" [isOpen]=\"isModalOpen\" (didDismiss)=\"closeModal()\">\r\n <ng-template>\r\n <div class=\"full-content\"> \r\n <div class=\"modal-content\">\r\n <img src=\"https://placeholder.pics/svg/150x150\" alt=\"\">\r\n <h2>Instrucciones</h2> \r\n <!-- Subt\u00EDtulos din\u00E1micos y TTS -->\r\n <div class=\"subtitle\">\r\n <span *ngFor=\"let word of instructionWords; let i = index\" class=\"subtitle-word\">\r\n {{ word }}\r\n </span>\r\n </div>\r\n <div class=\"button-container\">\r\n <ion-button (click)=\"closeModal()\" [disabled]=\"isSpeaking\">Comenzar</ion-button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ion-modal>\r\n\r\n <ion-modal id=\"voice-modal\" [isOpen]=\"isModalVoiceOpen\" (didDismiss)=\"closeModalVoice()\">\r\n <ng-template>\r\n <div class=\"full-content\">\r\n <div class=\"modal-content-2\">\r\n <div class=\"modal-header\">\r\n <ion-icon name=\"mic\" size=\"large\" style=\"width: 50px !important; height: 50px !important;\"></ion-icon>\r\n </div>\r\n <div class=\"modal-body\">\r\n <p>Contesta con tu voz</p>\r\n <div class=\"icons-container\">\r\n <div class=\"custom-text\">\r\n <p>S\u00ED</p>\r\n </div>\r\n <div class=\"o-text\">\r\n <p>o</p>\r\n </div>\r\n <div class=\"custom-text\">\r\n <p>No</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-template>\r\n </ion-modal>\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: 50%; // Antes era 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\nvideo {\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); /* 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; /* La circunferencia del c\u00EDrculo 880*/\r\n stroke-dashoffset: 880; /* Oculto por completo al inicio */\r\n transition: stroke-dashoffset 12s linear; /* Esto controlar\u00E1 el llenado progresivo */\r\n}\r\n\r\n.progress-active .progress-ring__circle {\r\n animation: progress-animation 5s 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\nion-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\r\n position: fixed;\r\n bottom: 0;\r\n // left: 0;\r\n left: 50%;\r\n // width: 100%;\r\n width: auto;\r\n transform: translateX(-50%); /* Centra el contenedor */\r\n justify-content: center;\r\n padding: 10px;\r\n background-color: #fff; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n ion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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\nion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n color: #000000; /* Texto negro */\r\n}\r\n\r\nion-toolbar {\r\n --ion-background-color: #ffffff !important;\r\n --background: #ffffff !important;\r\n color: #000000;\r\n}\r\n\r\n\r\nion-header {\r\n --background: #ffffff; /* Fondo blanco */\r\n}\r\n\r\nion-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\nion-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\nion-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\nion-spinner {\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n.main-header {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n}\r\n\r\n.main-title {\r\n font-size: 24px;\r\n font-weight: bold;\r\n color: var(--purple-secondary);\r\n}\r\n\r\n.acuerdo-text {\r\n font-size: 14px;\r\n color: black;\r\n}\r\n\r\n//TTS\r\n\r\n.subtitle {\r\n padding: 0px 24px;\r\n text-align: left;\r\n font-size: 17px;\r\n}\r\n.subtitle-word {\r\n display: inline-block;\r\n margin: 0 3px;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n border-radius: 10px;\r\n\r\n}\r\n\r\n.subtitle-word.highlight {\r\n background-color: purple;\r\n border-radius: 6px;\r\n color: white;\r\n padding: 4px;\r\n font-weight: 600;\r\n}\r\n\r\n\r\n.subtitle-word.read {\r\n color: gray; /* Color para el texto ya le\u00EDdo */\r\n}\r\n\r\n.button-container {\r\n justify-content: center;\r\n display: flex;\r\n}\r\n\r\n\r\n// MODAL\r\n\r\nion-modal {\r\n--display: flex;\r\n--height: 100%;\r\n--width: 100%;\r\n// --border-radius: 16px;\r\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n// --background: rgba(0, 0, 0, 0.30) !important;\r\n}\r\n\r\n.full-content {\r\nwidth: 100%;\r\nheight: 100%;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nbackground-color: rgba(0, 0, 0, 0.30) !important;\r\n\r\n}\r\n\r\n.modal-content {\r\ntext-align: center;\r\npadding: 10px;\r\nleft: 50%;\r\nborder-radius: 16px;\r\nheight: 370px;\r\nwidth: 80%;\r\nbackground-color: white;\r\n justify-content: center;\r\nalign-items: center; \r\n\r\nh2 {\r\n color: var(--purple-primary);\r\n}\r\n\r\n.subtitle {\r\n margin-bottom: 20px;\r\n}\r\n\r\nion-button {\r\n // width: 90%;\r\n // max-width: 300px; // anteriormente 300\r\n width: auto;\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(--orange-primary);\r\n --background-hover: var(--orange-secondary);\r\n --background-activated: var(--orange-secondary);\r\n --background-focused: var(--orange-secondary);\r\n \r\n --color: var(--orange-primary);\r\n \r\n --border-radius: 20px;\r\n --border-color: var(--orange-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(--orange-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 // .button-container {\r\n // display: block;\r\n // // position: fixed;\r\n // // bottom: 32%;\r\n // // left: 0;\r\n // left: 50%;\r\n // // width: 100%;\r\n // width: auto;\r\n // transform: translateX(-50%); /* Centra el contenedor */\r\n // justify-content: center;\r\n // padding: 5px;\r\n // }\r\n}\r\nion-modal::part(backdrop) {\r\nbackground: rgb(136, 138, 142);\r\nopacity: 1;\r\n}\r\n\r\nion-modal ion-toolbar {\r\n--background: rgb(14 116 144);\r\n--color: white;\r\n}\r\n\r\nion-modal.stack-modal {\r\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\r\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\r\n}\r\n\r\n\r\n.modal-content-2 {\r\nbackground-color: white;\r\npadding: 20px;\r\ntext-align: center;\r\nborder-radius: 12px;\r\nheight: auto;\r\nwidth: 80%;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n\r\n.modal-header ion-icon {\r\ncolor: #ff9a00; /* Color del micr\u00F3fono */\r\nmargin-bottom: 10px;\r\nfont-size: 3rem !important\r\n;\r\n}\r\n\r\n.modal-body p {\r\n// font-size: 18px;\r\nmargin-bottom: 20px;\r\n}\r\n\r\n.icons-container {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 20px;\r\ngap: 15px; \r\n\r\n}\r\n\r\n.modal-body p {\r\nfont-size: 20px;\r\n}\r\n.custom-text {\r\nbackground-color: var(--orange-primary);\r\ncolor: white;\r\nborder-radius: 10px;\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n\r\n.o-text {\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n"] }]
|
|
469
469
|
}], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i0.Renderer2 }, { type: i1.AlertController }, { type: i0.ChangeDetectorRef }], { videoElement: [{
|
|
470
470
|
type: ViewChild,
|
|
471
471
|
args: ['videoElement']
|
|
@@ -82,7 +82,7 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
|
|
|
82
82
|
handleSkipTutorial(): void;
|
|
83
83
|
moveToNextStep(currentType: number): void;
|
|
84
84
|
handleExit(): void;
|
|
85
|
-
handleExitWithResult(result: boolean, source?: string): void
|
|
85
|
+
handleExitWithResult(result: boolean, source?: string): Promise<void>;
|
|
86
86
|
InitProccess(): Promise<void>;
|
|
87
87
|
private executeFirstAvailableAction;
|
|
88
88
|
private executeNextActionForSimpleProcess;
|