@jaak.ai/stamps 2.0.0-dev.26 → 2.0.0-dev.28
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/cjs/jaak-stamps.cjs.entry.js +179 -21
- package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
- package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
- package/dist/collection/components/my-component/my-component.css +25 -0
- package/dist/collection/components/my-component/my-component.js +178 -20
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/jaak-stamps.js +179 -21
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/jaak-stamps.entry.js +179 -21
- package/dist/esm/jaak-stamps.entry.js.map +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -1
- package/dist/jaak-stamps-webcomponent/p-67b8e4cf.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-67b8e4cf.entry.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +1 -0
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BP1Q4KOg.js';
|
|
2
2
|
|
|
3
|
-
const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,canvas{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,canvas.mirror{transform:rotateY(180deg)}canvas{z-index:1}video{z-index:0}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7);opacity:0.8}.card-outline.perfect-match{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7)}.side{position:absolute;background:#999;transition:background-color 0.3s ease}.side.aligned{background:#28a745}.side-top{top:0;left:0;width:100%;height:3px}.side-right{top:0;right:0;width:3px;height:100%}.side-bottom{bottom:0;left:0;width:100%;height:3px}.side-left{top:0;left:0;width:3px;height:100%}.corner{position:absolute;width:20px;height:20px;border:2px solid #999;z-index:12}.corner-tl{top:-10px;left:-10px;border-right:none;border-bottom:none}.corner-tr{top:-10px;right:-10px;border-left:none;border-bottom:none}.corner-bl{bottom:-10px;left:-10px;border-right:none;border-top:none}.corner-br{bottom:-10px;right:-10px;border-left:none;border-top:none}.corner.perfect-match{border-color:#28a745}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateX(-50%) translateY(0)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto}.flip-camera-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.flip-camera-button:hover,.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.flip-camera-button:active,.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:10px 16px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:space-between;align-items:center;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.device-info{padding:8px 16px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.flip-camera-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:10px 14px}.camera-option{padding:8px 14px}.device-info{padding:6px 14px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:20px}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255, 255, 255, 0.2);border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{color:white;font-size:16px;font-weight:500;text-align:center;opacity:0.9}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
3
|
+
const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,canvas{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,canvas.mirror{transform:rotateY(180deg)}canvas{z-index:1}video{z-index:0}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7);opacity:0.8}.card-outline.perfect-match{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7)}.side{position:absolute;background:#999;transition:background-color 0.3s ease}.side.aligned{background:#28a745}.side-top{top:0;left:0;width:100%;height:3px}.side-right{top:0;right:0;width:3px;height:100%}.side-bottom{bottom:0;left:0;width:100%;height:3px}.side-left{top:0;left:0;width:3px;height:100%}.corner{position:absolute;width:20px;height:20px;border:2px solid #999;z-index:12}.corner-tl{top:-10px;left:-10px;border-right:none;border-bottom:none}.corner-tr{top:-10px;right:-10px;border-left:none;border-bottom:none}.corner-bl{bottom:-10px;left:-10px;border-right:none;border-top:none}.corner-br{bottom:-10px;right:-10px;border-left:none;border-top:none}.corner.perfect-match{border-color:#28a745}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateX(-50%) translateY(0)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto}.flip-camera-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.flip-camera-button:hover,.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.flip-camera-button:active,.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:10px 16px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:space-between;align-items:center;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.device-info{padding:8px 16px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.flip-camera-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:10px 14px}.camera-option{padding:8px 14px}.device-info{padding:6px 14px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:20px}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255, 255, 255, 0.2);border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{color:white;font-size:16px;font-weight:500;text-align:center;opacity:0.9}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.status-bar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.7);border-radius:15px;padding:8px 16px;z-index:40;backdrop-filter:blur(5px);border:1px solid rgba(255, 255, 255, 0.1)}.status-message{font-size:12px;font-weight:500;text-align:center;color:#fff;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}";
|
|
4
4
|
|
|
5
5
|
const JaakStamps = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -309,8 +309,10 @@ const JaakStamps = class {
|
|
|
309
309
|
return;
|
|
310
310
|
}
|
|
311
311
|
// Show loading state
|
|
312
|
-
this.
|
|
313
|
-
|
|
312
|
+
if (this.debug) {
|
|
313
|
+
this.statusMessage = "Cambiando cámara...";
|
|
314
|
+
this.statusColor = "#007bff";
|
|
315
|
+
}
|
|
314
316
|
// Stop current stream
|
|
315
317
|
if (this.videoStream) {
|
|
316
318
|
this.videoStream.getTracks().forEach(track => track.stop());
|
|
@@ -337,15 +339,26 @@ const JaakStamps = class {
|
|
|
337
339
|
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
|
338
340
|
try {
|
|
339
341
|
await this.setupCamera();
|
|
342
|
+
if (this.debug) {
|
|
343
|
+
this.statusMessage = "Cámara configurada correctamente";
|
|
344
|
+
this.statusColor = "#28a745";
|
|
345
|
+
}
|
|
340
346
|
return; // Success
|
|
341
347
|
}
|
|
342
348
|
catch (error) {
|
|
343
349
|
this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
|
|
344
350
|
if (attempt === maxRetries) {
|
|
345
351
|
// Last attempt failed, handle the error
|
|
352
|
+
this.statusMessage = "Error al configurar la cámara";
|
|
353
|
+
this.statusColor = "#ff6b6b";
|
|
346
354
|
this.handleCameraPermissionError(error);
|
|
347
355
|
throw error;
|
|
348
356
|
}
|
|
357
|
+
// Update status for retry attempt
|
|
358
|
+
if (this.debug) {
|
|
359
|
+
this.statusMessage = `Reintentando configuración de cámara... (${attempt}/${maxRetries})`;
|
|
360
|
+
this.statusColor = "#ffb366";
|
|
361
|
+
}
|
|
349
362
|
// Wait before retrying
|
|
350
363
|
await new Promise(resolve => setTimeout(resolve, 500 * attempt));
|
|
351
364
|
}
|
|
@@ -369,22 +382,48 @@ const JaakStamps = class {
|
|
|
369
382
|
await this.switchCamera(nextCamera.deviceId);
|
|
370
383
|
}
|
|
371
384
|
async componentDidLoad() {
|
|
385
|
+
if (this.debug) {
|
|
386
|
+
// Show detailed initialization loading state only in debug mode
|
|
387
|
+
this.isLoading = true;
|
|
388
|
+
this.statusMessage = 'Inicializando componente...';
|
|
389
|
+
this.statusColor = '#007bff';
|
|
390
|
+
// Small delay to ensure initialization message is visible
|
|
391
|
+
await new Promise(resolve => setTimeout(resolve, 500));
|
|
392
|
+
}
|
|
372
393
|
this.validateMaskSize();
|
|
373
394
|
this.validateCropMargin();
|
|
374
395
|
this.validatePreferredCamera();
|
|
396
|
+
if (this.debug) {
|
|
397
|
+
// Update status for camera detection
|
|
398
|
+
this.statusMessage = 'Detectando cámaras disponibles...';
|
|
399
|
+
}
|
|
375
400
|
await this.detectDeviceTypeAndCameras();
|
|
376
401
|
if (!window.ort) {
|
|
402
|
+
if (this.debug) {
|
|
403
|
+
// Update status for ONNX runtime loading
|
|
404
|
+
this.statusMessage = 'Cargando librerías de IA...';
|
|
405
|
+
}
|
|
377
406
|
const script = document.createElement('script');
|
|
378
407
|
script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
|
|
379
408
|
document.head.appendChild(script);
|
|
380
409
|
// Wait for ONNX runtime to load before emitting ready event
|
|
381
410
|
script.onload = () => {
|
|
382
|
-
|
|
411
|
+
setTimeout(() => {
|
|
412
|
+
this.statusMessage = 'Presione el botón para activar la cámara';
|
|
413
|
+
this.statusColor = '#aaa';
|
|
414
|
+
this.isLoading = false;
|
|
415
|
+
this.emitReadyEvent();
|
|
416
|
+
}, 300);
|
|
383
417
|
};
|
|
384
418
|
}
|
|
385
419
|
else {
|
|
386
420
|
// ONNX runtime already loaded
|
|
387
|
-
|
|
421
|
+
setTimeout(() => {
|
|
422
|
+
this.statusMessage = 'Presione el botón para activar la cámara';
|
|
423
|
+
this.statusColor = '#aaa';
|
|
424
|
+
this.isLoading = false;
|
|
425
|
+
this.emitReadyEvent();
|
|
426
|
+
}, 300);
|
|
388
427
|
}
|
|
389
428
|
// Initialize canvas pool for better performance
|
|
390
429
|
this.initializeCanvasPool();
|
|
@@ -548,9 +587,36 @@ const JaakStamps = class {
|
|
|
548
587
|
this.debugLog('🤖 Preloading detection model:', modelPath);
|
|
549
588
|
// Configure ONNX Runtime with device-specific optimizations
|
|
550
589
|
const sessionOptions = this.getSessionOptions();
|
|
551
|
-
|
|
590
|
+
const deviceInfo = this.getDeviceMemoryInfo();
|
|
591
|
+
try {
|
|
592
|
+
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
593
|
+
}
|
|
594
|
+
catch (error) {
|
|
595
|
+
if (error.message.includes('failed to allocate a buffer')) {
|
|
596
|
+
this.debugLog('❌ Buffer allocation failed during preload, trying with minimal settings');
|
|
597
|
+
const fallbackOptions = {
|
|
598
|
+
executionProviders: ['wasm'],
|
|
599
|
+
graphOptimizationLevel: 'disabled',
|
|
600
|
+
logSeverityLevel: 4,
|
|
601
|
+
enableCpuMemArena: false,
|
|
602
|
+
enableMemPattern: false,
|
|
603
|
+
executionMode: 'sequential',
|
|
604
|
+
interOpNumThreads: 1,
|
|
605
|
+
intraOpNumThreads: 1,
|
|
606
|
+
};
|
|
607
|
+
this.session = await window.ort.InferenceSession.create(modelPath, fallbackOptions);
|
|
608
|
+
}
|
|
609
|
+
else {
|
|
610
|
+
throw error;
|
|
611
|
+
}
|
|
612
|
+
}
|
|
552
613
|
// Preload MobileNet model and classes only if classification is enabled
|
|
614
|
+
// For low memory devices, load sequentially to avoid memory pressure
|
|
553
615
|
if (this.useDocumentClassification) {
|
|
616
|
+
if (deviceInfo.isLowMemory) {
|
|
617
|
+
this.debugLog('🔄 Sequential model loading for low memory device');
|
|
618
|
+
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
619
|
+
}
|
|
554
620
|
await this.loadMobileNetModel();
|
|
555
621
|
}
|
|
556
622
|
this.isModelPreloaded = true;
|
|
@@ -615,7 +681,28 @@ const JaakStamps = class {
|
|
|
615
681
|
this.debugLog('📋 MobileNet classes loaded:', this.mobileNetClassMap);
|
|
616
682
|
// Load model
|
|
617
683
|
const sessionOptions = this.getSessionOptions();
|
|
618
|
-
|
|
684
|
+
try {
|
|
685
|
+
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
|
|
686
|
+
}
|
|
687
|
+
catch (error) {
|
|
688
|
+
if (error.message.includes('failed to allocate a buffer')) {
|
|
689
|
+
this.debugLog('❌ MobileNet buffer allocation failed, trying with minimal settings');
|
|
690
|
+
const fallbackOptions = {
|
|
691
|
+
executionProviders: ['wasm'],
|
|
692
|
+
graphOptimizationLevel: 'disabled',
|
|
693
|
+
logSeverityLevel: 4,
|
|
694
|
+
enableCpuMemArena: false,
|
|
695
|
+
enableMemPattern: false,
|
|
696
|
+
executionMode: 'sequential',
|
|
697
|
+
interOpNumThreads: 1,
|
|
698
|
+
intraOpNumThreads: 1,
|
|
699
|
+
};
|
|
700
|
+
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, fallbackOptions);
|
|
701
|
+
}
|
|
702
|
+
else {
|
|
703
|
+
throw error;
|
|
704
|
+
}
|
|
705
|
+
}
|
|
619
706
|
this.debugLog('✅ MobileNet model loaded successfully');
|
|
620
707
|
}
|
|
621
708
|
catch (error) {
|
|
@@ -850,15 +937,39 @@ const JaakStamps = class {
|
|
|
850
937
|
const transposedData = new Float32Array(R.concat(G, B));
|
|
851
938
|
return new window.ort.Tensor("float32", transposedData, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
|
|
852
939
|
}
|
|
940
|
+
getDeviceMemoryInfo() {
|
|
941
|
+
const nav = navigator;
|
|
942
|
+
const memory = nav.deviceMemory || nav.hardwareConcurrency || 4;
|
|
943
|
+
const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
|
|
944
|
+
const isSlowConnection = connection && (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');
|
|
945
|
+
return {
|
|
946
|
+
estimatedRAM: memory,
|
|
947
|
+
isLowMemory: memory <= 4,
|
|
948
|
+
isSlowConnection: isSlowConnection
|
|
949
|
+
};
|
|
950
|
+
}
|
|
853
951
|
getSessionOptions() {
|
|
952
|
+
const deviceInfo = this.getDeviceMemoryInfo();
|
|
953
|
+
if (deviceInfo.isLowMemory) {
|
|
954
|
+
return {
|
|
955
|
+
executionProviders: ['wasm'],
|
|
956
|
+
graphOptimizationLevel: 'basic',
|
|
957
|
+
logSeverityLevel: 4,
|
|
958
|
+
logVerbosityLevel: 0,
|
|
959
|
+
enableCpuMemArena: false,
|
|
960
|
+
enableMemPattern: false,
|
|
961
|
+
executionMode: 'sequential',
|
|
962
|
+
interOpNumThreads: 1,
|
|
963
|
+
intraOpNumThreads: 1,
|
|
964
|
+
};
|
|
965
|
+
}
|
|
854
966
|
return {
|
|
855
967
|
executionProviders: [
|
|
856
|
-
// Try WebGL first for GPU acceleration, fallback to WASM
|
|
857
968
|
'webgl',
|
|
858
969
|
'wasm'
|
|
859
970
|
],
|
|
860
|
-
graphOptimizationLevel: 'all',
|
|
861
|
-
logSeverityLevel: this.debug ? 2 : 4,
|
|
971
|
+
graphOptimizationLevel: 'all',
|
|
972
|
+
logSeverityLevel: this.debug ? 2 : 4,
|
|
862
973
|
logVerbosityLevel: 0,
|
|
863
974
|
enableCpuMemArena: true,
|
|
864
975
|
enableMemPattern: true,
|
|
@@ -872,28 +983,69 @@ const JaakStamps = class {
|
|
|
872
983
|
// Check if model is already preloaded
|
|
873
984
|
if (!this.session) {
|
|
874
985
|
this.isLoading = true;
|
|
875
|
-
this.
|
|
876
|
-
|
|
986
|
+
if (this.debug) {
|
|
987
|
+
this.statusMessage = "Cargando modelo de detección...";
|
|
988
|
+
this.statusColor = "#007bff";
|
|
989
|
+
}
|
|
990
|
+
else {
|
|
991
|
+
this.statusMessage = "Cargando modelos...";
|
|
992
|
+
this.statusColor = "#007bff";
|
|
993
|
+
}
|
|
877
994
|
const modelPath = this.MODEL_PATH;
|
|
878
995
|
this.debugLog('🤖 Loading detection model:', modelPath);
|
|
879
996
|
const sessionOptions = this.getSessionOptions();
|
|
880
|
-
|
|
997
|
+
try {
|
|
998
|
+
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
999
|
+
}
|
|
1000
|
+
catch (error) {
|
|
1001
|
+
if (error.message.includes('failed to allocate a buffer')) {
|
|
1002
|
+
this.debugLog('❌ Buffer allocation failed, trying with minimal settings');
|
|
1003
|
+
const fallbackOptions = {
|
|
1004
|
+
executionProviders: ['wasm'],
|
|
1005
|
+
graphOptimizationLevel: 'disabled',
|
|
1006
|
+
logSeverityLevel: 4,
|
|
1007
|
+
enableCpuMemArena: false,
|
|
1008
|
+
enableMemPattern: false,
|
|
1009
|
+
executionMode: 'sequential',
|
|
1010
|
+
interOpNumThreads: 1,
|
|
1011
|
+
intraOpNumThreads: 1,
|
|
1012
|
+
};
|
|
1013
|
+
this.session = await window.ort.InferenceSession.create(modelPath, fallbackOptions);
|
|
1014
|
+
}
|
|
1015
|
+
else {
|
|
1016
|
+
throw error;
|
|
1017
|
+
}
|
|
1018
|
+
}
|
|
881
1019
|
// Load MobileNet model if classification is enabled and not already loaded
|
|
882
1020
|
if (this.useDocumentClassification && !this.mobileNetSession) {
|
|
1021
|
+
if (this.debug) {
|
|
1022
|
+
this.statusMessage = "Cargando modelo de clasificación...";
|
|
1023
|
+
}
|
|
883
1024
|
await this.loadMobileNetModel();
|
|
884
1025
|
}
|
|
885
1026
|
this.isModelPreloaded = true;
|
|
1027
|
+
if (this.debug) {
|
|
1028
|
+
this.statusMessage = "Modelos cargados exitosamente";
|
|
1029
|
+
}
|
|
886
1030
|
this.emitReadyEvent();
|
|
887
1031
|
}
|
|
888
1032
|
else {
|
|
889
1033
|
this.debugLog('🚀 Using preloaded models');
|
|
890
|
-
this.
|
|
891
|
-
|
|
1034
|
+
if (this.debug) {
|
|
1035
|
+
this.statusMessage = "Usando modelos precargados...";
|
|
1036
|
+
this.statusColor = "#007bff";
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
if (this.debug) {
|
|
1040
|
+
this.statusMessage = "Configurando cámara...";
|
|
892
1041
|
}
|
|
893
|
-
this.statusMessage = "Configurando cámara...";
|
|
894
1042
|
await this.setupCamera();
|
|
895
1043
|
this.startTime = Date.now();
|
|
896
1044
|
this.isLoading = false;
|
|
1045
|
+
if (this.debug) {
|
|
1046
|
+
this.statusMessage = "Detección activa - Busque su identificación";
|
|
1047
|
+
this.statusColor = "#28a745";
|
|
1048
|
+
}
|
|
897
1049
|
this.detectFrame();
|
|
898
1050
|
}
|
|
899
1051
|
catch (err) {
|
|
@@ -1365,8 +1517,14 @@ const JaakStamps = class {
|
|
|
1365
1517
|
this.videoStream.getTracks().forEach(track => track.stop());
|
|
1366
1518
|
this.videoStream = undefined;
|
|
1367
1519
|
this.isVideoActive = false;
|
|
1368
|
-
this.
|
|
1369
|
-
|
|
1520
|
+
if (this.debug) {
|
|
1521
|
+
this.statusMessage = "Cámara desactivada - Listo para nueva sesión";
|
|
1522
|
+
this.statusColor = "#6c757d";
|
|
1523
|
+
}
|
|
1524
|
+
else {
|
|
1525
|
+
this.statusMessage = "Presione el botón para activar la cámara";
|
|
1526
|
+
this.statusColor = "#aaa";
|
|
1527
|
+
}
|
|
1370
1528
|
}
|
|
1371
1529
|
this.isLoading = false;
|
|
1372
1530
|
// Limpiar canvas al finalizar sesión
|
|
@@ -1377,7 +1535,7 @@ const JaakStamps = class {
|
|
|
1377
1535
|
this.cleanup();
|
|
1378
1536
|
}
|
|
1379
1537
|
render() {
|
|
1380
|
-
return (h("div", { key: '
|
|
1538
|
+
return (h("div", { key: 'bacf8b2ded1c5015d01dd4240dda6a93fbfb629e', class: "detector-container" }, h("div", { key: '235aefbd8916d6b53ab191c654ed00f303ca73b7', class: "video-container" }, h("video", { key: '9b641c7092c5ecfa601b1f80d6bf8c310539c436', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: '2c3c384436b7dd91084dbdd27a34ac9192fa3f22', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '9e2ca398482ebae4da984854483af3159d908d2b', class: "overlay-mask" }, h("div", { key: 'ee14fd65d752351644a281fc4cbd7d8cf8765eec', class: "card-outline" }, h("div", { key: 'c5a924145ac54e7f545b0b6571f1d7d259fc1145', class: "side side-top" }), h("div", { key: 'a88e9ab5f1a4f7041edb44008697b619bf52a85b', class: "side side-right" }), h("div", { key: '08fbf94000951ea31d029469d8158b8bd3349bf8', class: "side side-bottom" }), h("div", { key: '3b9ead8e1d2c0f7fea2878a248241681c07bd0f6', class: "side side-left" }), h("div", { key: 'f96b9a5a0f00f016b11486a63ca984b368d18c8b', class: "corner corner-tl" }), h("div", { key: '30210f2ec60913466665dea50a1e8bc6cba34b41', class: "corner corner-tr" }), h("div", { key: 'cc4644c99957a9ddf68901ddd368037e01c56899', class: "corner corner-bl" }), h("div", { key: '95b08e9b36f880dda1d614f929ceb71259f5ec38', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '9bb545a793764b258381b0e3d665472c67d65b5b', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '3b78e394067ea610021fd915215fca30ed0d654b', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (h("div", { key: '85fbcf97d151fbf1f37a2f6f90bbd93ef77afdba', class: "camera-controls" }, this.isMultipleCamerasAvailable && (h("button", { key: '56bab78e6ea660e42057b5e6bc322f6990116119', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), h("button", { key: 'c149303ed671d326efada743393e52b5a3710710', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (h("div", { key: 'ce7c0c1dbc2ba267dbd0181dd7268e2d9f7209c0', style: {
|
|
1381
1539
|
position: 'absolute',
|
|
1382
1540
|
top: '50px',
|
|
1383
1541
|
right: '0',
|
|
@@ -1387,10 +1545,10 @@ const JaakStamps = class {
|
|
|
1387
1545
|
fontSize: '10px',
|
|
1388
1546
|
borderRadius: '4px',
|
|
1389
1547
|
whiteSpace: 'nowrap'
|
|
1390
|
-
} }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: '
|
|
1548
|
+
} }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: 'd62a6ddde7160f41075b3b1d00340515019a48ca' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', h("br", { key: 'fe8c322421809a58f49150ef877ae0502d34d002' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', h("br", { key: '084d8c5c6c0193edcaf3bd7d64d0bce8e0bb6964' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (h("div", { key: '03b1a66188e65f1843c50aec096db840d60bb703', class: "camera-selector-dropdown" }, h("div", { key: 'fe7e08d25dd394d893a7f6269c80a2aaa4732134', class: "camera-selector-header" }, h("span", { key: '1b8f4892c3eef6dac8c682e152abb35e2331496c' }, "Seleccionar C\u00E1mara"), h("button", { key: '396c78a3753c707619e27ef7e5f3a412ba8480c6', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '6d56d67efe54719f21978cc6cc44cf2f421469bb', class: "camera-list" }, this.availableCameras.map((camera) => (h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
|
|
1391
1549
|
this.switchCamera(camera.deviceId);
|
|
1392
1550
|
this.toggleCameraSelector();
|
|
1393
|
-
}, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '
|
|
1551
|
+
}, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '7f5dda6214695d50c08d2ba4ccec236f3bd158cf', class: "device-info" }, h("small", { key: '50d2768f82b9b7f0a9c1729a5167493f731fb4f6' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (h("div", { key: '7ed246b862639b2c6df54dbd32ebb883776bfbd7', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'f2d3a97dfcb9fd757b2f39ec184bce3f5dcb3595', class: "flip-animation" }, h("div", { key: '89a98223c60317d2b9449029ba393c75bec154b3', class: "id-card-icon" }), h("div", { key: '507f6f1b7f38082772bbac2fc28046618161c69b', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: '9010d5be6684759b5d99c58ee65b0a7ebe82b9cb', class: "success-animation" }, h("div", { key: '454c39a5c0d457418b8abdc6e63b1c8a249a118f', class: "check-icon" }), h("div", { key: '502e55f1496f7d8cde9178c416bd9db4cf0491eb', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'e4d6b7c5ebc8da42689150195dd837e77e152ea3', class: "loading-overlay" }, h("div", { key: '7cc39dbbe94e0730c47829291b83717476517f7f', class: "loading-spinner" }), h("div", { key: '4c1afe04fc7a627c9a57c2f7b851ce62f9305676', class: "loading-text" }, this.statusMessage))), this.debug && (h("div", { key: '8745c4603b35003bff859657c86c713b7f58e204', class: "status-bar" }, h("div", { key: 'e098f2402d58d1808052e3d213f851e66db69ee4', class: "status-message", style: { 'color': this.statusColor } }, this.statusMessage))), h("div", { key: 'af4e07b405af5b1786009b0e9ecf72551753de28', class: "watermark" }, h("img", { key: '25f4b80f13528617007aad160c855c4fff0c8af5', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
1394
1552
|
}
|
|
1395
1553
|
};
|
|
1396
1554
|
JaakStamps.style = myComponentCss;
|