@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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BfhtOB0D.js');
|
|
4
4
|
|
|
5
|
-
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)}}";
|
|
5
|
+
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}";
|
|
6
6
|
|
|
7
7
|
const JaakStamps = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -311,8 +311,10 @@ const JaakStamps = class {
|
|
|
311
311
|
return;
|
|
312
312
|
}
|
|
313
313
|
// Show loading state
|
|
314
|
-
this.
|
|
315
|
-
|
|
314
|
+
if (this.debug) {
|
|
315
|
+
this.statusMessage = "Cambiando cámara...";
|
|
316
|
+
this.statusColor = "#007bff";
|
|
317
|
+
}
|
|
316
318
|
// Stop current stream
|
|
317
319
|
if (this.videoStream) {
|
|
318
320
|
this.videoStream.getTracks().forEach(track => track.stop());
|
|
@@ -339,15 +341,26 @@ const JaakStamps = class {
|
|
|
339
341
|
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
|
340
342
|
try {
|
|
341
343
|
await this.setupCamera();
|
|
344
|
+
if (this.debug) {
|
|
345
|
+
this.statusMessage = "Cámara configurada correctamente";
|
|
346
|
+
this.statusColor = "#28a745";
|
|
347
|
+
}
|
|
342
348
|
return; // Success
|
|
343
349
|
}
|
|
344
350
|
catch (error) {
|
|
345
351
|
this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
|
|
346
352
|
if (attempt === maxRetries) {
|
|
347
353
|
// Last attempt failed, handle the error
|
|
354
|
+
this.statusMessage = "Error al configurar la cámara";
|
|
355
|
+
this.statusColor = "#ff6b6b";
|
|
348
356
|
this.handleCameraPermissionError(error);
|
|
349
357
|
throw error;
|
|
350
358
|
}
|
|
359
|
+
// Update status for retry attempt
|
|
360
|
+
if (this.debug) {
|
|
361
|
+
this.statusMessage = `Reintentando configuración de cámara... (${attempt}/${maxRetries})`;
|
|
362
|
+
this.statusColor = "#ffb366";
|
|
363
|
+
}
|
|
351
364
|
// Wait before retrying
|
|
352
365
|
await new Promise(resolve => setTimeout(resolve, 500 * attempt));
|
|
353
366
|
}
|
|
@@ -371,22 +384,48 @@ const JaakStamps = class {
|
|
|
371
384
|
await this.switchCamera(nextCamera.deviceId);
|
|
372
385
|
}
|
|
373
386
|
async componentDidLoad() {
|
|
387
|
+
if (this.debug) {
|
|
388
|
+
// Show detailed initialization loading state only in debug mode
|
|
389
|
+
this.isLoading = true;
|
|
390
|
+
this.statusMessage = 'Inicializando componente...';
|
|
391
|
+
this.statusColor = '#007bff';
|
|
392
|
+
// Small delay to ensure initialization message is visible
|
|
393
|
+
await new Promise(resolve => setTimeout(resolve, 500));
|
|
394
|
+
}
|
|
374
395
|
this.validateMaskSize();
|
|
375
396
|
this.validateCropMargin();
|
|
376
397
|
this.validatePreferredCamera();
|
|
398
|
+
if (this.debug) {
|
|
399
|
+
// Update status for camera detection
|
|
400
|
+
this.statusMessage = 'Detectando cámaras disponibles...';
|
|
401
|
+
}
|
|
377
402
|
await this.detectDeviceTypeAndCameras();
|
|
378
403
|
if (!window.ort) {
|
|
404
|
+
if (this.debug) {
|
|
405
|
+
// Update status for ONNX runtime loading
|
|
406
|
+
this.statusMessage = 'Cargando librerías de IA...';
|
|
407
|
+
}
|
|
379
408
|
const script = document.createElement('script');
|
|
380
409
|
script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
|
|
381
410
|
document.head.appendChild(script);
|
|
382
411
|
// Wait for ONNX runtime to load before emitting ready event
|
|
383
412
|
script.onload = () => {
|
|
384
|
-
|
|
413
|
+
setTimeout(() => {
|
|
414
|
+
this.statusMessage = 'Presione el botón para activar la cámara';
|
|
415
|
+
this.statusColor = '#aaa';
|
|
416
|
+
this.isLoading = false;
|
|
417
|
+
this.emitReadyEvent();
|
|
418
|
+
}, 300);
|
|
385
419
|
};
|
|
386
420
|
}
|
|
387
421
|
else {
|
|
388
422
|
// ONNX runtime already loaded
|
|
389
|
-
|
|
423
|
+
setTimeout(() => {
|
|
424
|
+
this.statusMessage = 'Presione el botón para activar la cámara';
|
|
425
|
+
this.statusColor = '#aaa';
|
|
426
|
+
this.isLoading = false;
|
|
427
|
+
this.emitReadyEvent();
|
|
428
|
+
}, 300);
|
|
390
429
|
}
|
|
391
430
|
// Initialize canvas pool for better performance
|
|
392
431
|
this.initializeCanvasPool();
|
|
@@ -550,9 +589,36 @@ const JaakStamps = class {
|
|
|
550
589
|
this.debugLog('🤖 Preloading detection model:', modelPath);
|
|
551
590
|
// Configure ONNX Runtime with device-specific optimizations
|
|
552
591
|
const sessionOptions = this.getSessionOptions();
|
|
553
|
-
|
|
592
|
+
const deviceInfo = this.getDeviceMemoryInfo();
|
|
593
|
+
try {
|
|
594
|
+
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
595
|
+
}
|
|
596
|
+
catch (error) {
|
|
597
|
+
if (error.message.includes('failed to allocate a buffer')) {
|
|
598
|
+
this.debugLog('❌ Buffer allocation failed during preload, trying with minimal settings');
|
|
599
|
+
const fallbackOptions = {
|
|
600
|
+
executionProviders: ['wasm'],
|
|
601
|
+
graphOptimizationLevel: 'disabled',
|
|
602
|
+
logSeverityLevel: 4,
|
|
603
|
+
enableCpuMemArena: false,
|
|
604
|
+
enableMemPattern: false,
|
|
605
|
+
executionMode: 'sequential',
|
|
606
|
+
interOpNumThreads: 1,
|
|
607
|
+
intraOpNumThreads: 1,
|
|
608
|
+
};
|
|
609
|
+
this.session = await window.ort.InferenceSession.create(modelPath, fallbackOptions);
|
|
610
|
+
}
|
|
611
|
+
else {
|
|
612
|
+
throw error;
|
|
613
|
+
}
|
|
614
|
+
}
|
|
554
615
|
// Preload MobileNet model and classes only if classification is enabled
|
|
616
|
+
// For low memory devices, load sequentially to avoid memory pressure
|
|
555
617
|
if (this.useDocumentClassification) {
|
|
618
|
+
if (deviceInfo.isLowMemory) {
|
|
619
|
+
this.debugLog('🔄 Sequential model loading for low memory device');
|
|
620
|
+
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
621
|
+
}
|
|
556
622
|
await this.loadMobileNetModel();
|
|
557
623
|
}
|
|
558
624
|
this.isModelPreloaded = true;
|
|
@@ -617,7 +683,28 @@ const JaakStamps = class {
|
|
|
617
683
|
this.debugLog('📋 MobileNet classes loaded:', this.mobileNetClassMap);
|
|
618
684
|
// Load model
|
|
619
685
|
const sessionOptions = this.getSessionOptions();
|
|
620
|
-
|
|
686
|
+
try {
|
|
687
|
+
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
|
|
688
|
+
}
|
|
689
|
+
catch (error) {
|
|
690
|
+
if (error.message.includes('failed to allocate a buffer')) {
|
|
691
|
+
this.debugLog('❌ MobileNet buffer allocation failed, trying with minimal settings');
|
|
692
|
+
const fallbackOptions = {
|
|
693
|
+
executionProviders: ['wasm'],
|
|
694
|
+
graphOptimizationLevel: 'disabled',
|
|
695
|
+
logSeverityLevel: 4,
|
|
696
|
+
enableCpuMemArena: false,
|
|
697
|
+
enableMemPattern: false,
|
|
698
|
+
executionMode: 'sequential',
|
|
699
|
+
interOpNumThreads: 1,
|
|
700
|
+
intraOpNumThreads: 1,
|
|
701
|
+
};
|
|
702
|
+
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, fallbackOptions);
|
|
703
|
+
}
|
|
704
|
+
else {
|
|
705
|
+
throw error;
|
|
706
|
+
}
|
|
707
|
+
}
|
|
621
708
|
this.debugLog('✅ MobileNet model loaded successfully');
|
|
622
709
|
}
|
|
623
710
|
catch (error) {
|
|
@@ -852,15 +939,39 @@ const JaakStamps = class {
|
|
|
852
939
|
const transposedData = new Float32Array(R.concat(G, B));
|
|
853
940
|
return new window.ort.Tensor("float32", transposedData, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
|
|
854
941
|
}
|
|
942
|
+
getDeviceMemoryInfo() {
|
|
943
|
+
const nav = navigator;
|
|
944
|
+
const memory = nav.deviceMemory || nav.hardwareConcurrency || 4;
|
|
945
|
+
const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
|
|
946
|
+
const isSlowConnection = connection && (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');
|
|
947
|
+
return {
|
|
948
|
+
estimatedRAM: memory,
|
|
949
|
+
isLowMemory: memory <= 4,
|
|
950
|
+
isSlowConnection: isSlowConnection
|
|
951
|
+
};
|
|
952
|
+
}
|
|
855
953
|
getSessionOptions() {
|
|
954
|
+
const deviceInfo = this.getDeviceMemoryInfo();
|
|
955
|
+
if (deviceInfo.isLowMemory) {
|
|
956
|
+
return {
|
|
957
|
+
executionProviders: ['wasm'],
|
|
958
|
+
graphOptimizationLevel: 'basic',
|
|
959
|
+
logSeverityLevel: 4,
|
|
960
|
+
logVerbosityLevel: 0,
|
|
961
|
+
enableCpuMemArena: false,
|
|
962
|
+
enableMemPattern: false,
|
|
963
|
+
executionMode: 'sequential',
|
|
964
|
+
interOpNumThreads: 1,
|
|
965
|
+
intraOpNumThreads: 1,
|
|
966
|
+
};
|
|
967
|
+
}
|
|
856
968
|
return {
|
|
857
969
|
executionProviders: [
|
|
858
|
-
// Try WebGL first for GPU acceleration, fallback to WASM
|
|
859
970
|
'webgl',
|
|
860
971
|
'wasm'
|
|
861
972
|
],
|
|
862
|
-
graphOptimizationLevel: 'all',
|
|
863
|
-
logSeverityLevel: this.debug ? 2 : 4,
|
|
973
|
+
graphOptimizationLevel: 'all',
|
|
974
|
+
logSeverityLevel: this.debug ? 2 : 4,
|
|
864
975
|
logVerbosityLevel: 0,
|
|
865
976
|
enableCpuMemArena: true,
|
|
866
977
|
enableMemPattern: true,
|
|
@@ -874,28 +985,69 @@ const JaakStamps = class {
|
|
|
874
985
|
// Check if model is already preloaded
|
|
875
986
|
if (!this.session) {
|
|
876
987
|
this.isLoading = true;
|
|
877
|
-
this.
|
|
878
|
-
|
|
988
|
+
if (this.debug) {
|
|
989
|
+
this.statusMessage = "Cargando modelo de detección...";
|
|
990
|
+
this.statusColor = "#007bff";
|
|
991
|
+
}
|
|
992
|
+
else {
|
|
993
|
+
this.statusMessage = "Cargando modelos...";
|
|
994
|
+
this.statusColor = "#007bff";
|
|
995
|
+
}
|
|
879
996
|
const modelPath = this.MODEL_PATH;
|
|
880
997
|
this.debugLog('🤖 Loading detection model:', modelPath);
|
|
881
998
|
const sessionOptions = this.getSessionOptions();
|
|
882
|
-
|
|
999
|
+
try {
|
|
1000
|
+
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
1001
|
+
}
|
|
1002
|
+
catch (error) {
|
|
1003
|
+
if (error.message.includes('failed to allocate a buffer')) {
|
|
1004
|
+
this.debugLog('❌ Buffer allocation failed, trying with minimal settings');
|
|
1005
|
+
const fallbackOptions = {
|
|
1006
|
+
executionProviders: ['wasm'],
|
|
1007
|
+
graphOptimizationLevel: 'disabled',
|
|
1008
|
+
logSeverityLevel: 4,
|
|
1009
|
+
enableCpuMemArena: false,
|
|
1010
|
+
enableMemPattern: false,
|
|
1011
|
+
executionMode: 'sequential',
|
|
1012
|
+
interOpNumThreads: 1,
|
|
1013
|
+
intraOpNumThreads: 1,
|
|
1014
|
+
};
|
|
1015
|
+
this.session = await window.ort.InferenceSession.create(modelPath, fallbackOptions);
|
|
1016
|
+
}
|
|
1017
|
+
else {
|
|
1018
|
+
throw error;
|
|
1019
|
+
}
|
|
1020
|
+
}
|
|
883
1021
|
// Load MobileNet model if classification is enabled and not already loaded
|
|
884
1022
|
if (this.useDocumentClassification && !this.mobileNetSession) {
|
|
1023
|
+
if (this.debug) {
|
|
1024
|
+
this.statusMessage = "Cargando modelo de clasificación...";
|
|
1025
|
+
}
|
|
885
1026
|
await this.loadMobileNetModel();
|
|
886
1027
|
}
|
|
887
1028
|
this.isModelPreloaded = true;
|
|
1029
|
+
if (this.debug) {
|
|
1030
|
+
this.statusMessage = "Modelos cargados exitosamente";
|
|
1031
|
+
}
|
|
888
1032
|
this.emitReadyEvent();
|
|
889
1033
|
}
|
|
890
1034
|
else {
|
|
891
1035
|
this.debugLog('🚀 Using preloaded models');
|
|
892
|
-
this.
|
|
893
|
-
|
|
1036
|
+
if (this.debug) {
|
|
1037
|
+
this.statusMessage = "Usando modelos precargados...";
|
|
1038
|
+
this.statusColor = "#007bff";
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
if (this.debug) {
|
|
1042
|
+
this.statusMessage = "Configurando cámara...";
|
|
894
1043
|
}
|
|
895
|
-
this.statusMessage = "Configurando cámara...";
|
|
896
1044
|
await this.setupCamera();
|
|
897
1045
|
this.startTime = Date.now();
|
|
898
1046
|
this.isLoading = false;
|
|
1047
|
+
if (this.debug) {
|
|
1048
|
+
this.statusMessage = "Detección activa - Busque su identificación";
|
|
1049
|
+
this.statusColor = "#28a745";
|
|
1050
|
+
}
|
|
899
1051
|
this.detectFrame();
|
|
900
1052
|
}
|
|
901
1053
|
catch (err) {
|
|
@@ -1367,8 +1519,14 @@ const JaakStamps = class {
|
|
|
1367
1519
|
this.videoStream.getTracks().forEach(track => track.stop());
|
|
1368
1520
|
this.videoStream = undefined;
|
|
1369
1521
|
this.isVideoActive = false;
|
|
1370
|
-
this.
|
|
1371
|
-
|
|
1522
|
+
if (this.debug) {
|
|
1523
|
+
this.statusMessage = "Cámara desactivada - Listo para nueva sesión";
|
|
1524
|
+
this.statusColor = "#6c757d";
|
|
1525
|
+
}
|
|
1526
|
+
else {
|
|
1527
|
+
this.statusMessage = "Presione el botón para activar la cámara";
|
|
1528
|
+
this.statusColor = "#aaa";
|
|
1529
|
+
}
|
|
1372
1530
|
}
|
|
1373
1531
|
this.isLoading = false;
|
|
1374
1532
|
// Limpiar canvas al finalizar sesión
|
|
@@ -1379,7 +1537,7 @@ const JaakStamps = class {
|
|
|
1379
1537
|
this.cleanup();
|
|
1380
1538
|
}
|
|
1381
1539
|
render() {
|
|
1382
|
-
return (index.h("div", { key: '
|
|
1540
|
+
return (index.h("div", { key: 'bacf8b2ded1c5015d01dd4240dda6a93fbfb629e', class: "detector-container" }, index.h("div", { key: '235aefbd8916d6b53ab191c654ed00f303ca73b7', class: "video-container" }, index.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' } }), index.h("canvas", { key: '2c3c384436b7dd91084dbdd27a34ac9192fa3f22', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (index.h("div", { key: '9e2ca398482ebae4da984854483af3159d908d2b', class: "overlay-mask" }, index.h("div", { key: 'ee14fd65d752351644a281fc4cbd7d8cf8765eec', class: "card-outline" }, index.h("div", { key: 'c5a924145ac54e7f545b0b6571f1d7d259fc1145', class: "side side-top" }), index.h("div", { key: 'a88e9ab5f1a4f7041edb44008697b619bf52a85b', class: "side side-right" }), index.h("div", { key: '08fbf94000951ea31d029469d8158b8bd3349bf8', class: "side side-bottom" }), index.h("div", { key: '3b9ead8e1d2c0f7fea2878a248241681c07bd0f6', class: "side side-left" }), index.h("div", { key: 'f96b9a5a0f00f016b11486a63ca984b368d18c8b', class: "corner corner-tl" }), index.h("div", { key: '30210f2ec60913466665dea50a1e8bc6cba34b41', class: "corner corner-tr" }), index.h("div", { key: 'cc4644c99957a9ddf68901ddd368037e01c56899', class: "corner corner-bl" }), index.h("div", { key: '95b08e9b36f880dda1d614f929ceb71259f5ec38', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '9bb545a793764b258381b0e3d665472c67d65b5b', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: '3b78e394067ea610021fd915215fca30ed0d654b', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (index.h("div", { key: '85fbcf97d151fbf1f37a2f6f90bbd93ef77afdba', class: "camera-controls" }, this.isMultipleCamerasAvailable && (index.h("button", { key: '56bab78e6ea660e42057b5e6bc322f6990116119', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), index.h("button", { key: 'c149303ed671d326efada743393e52b5a3710710', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (index.h("div", { key: 'ce7c0c1dbc2ba267dbd0181dd7268e2d9f7209c0', style: {
|
|
1383
1541
|
position: 'absolute',
|
|
1384
1542
|
top: '50px',
|
|
1385
1543
|
right: '0',
|
|
@@ -1389,10 +1547,10 @@ const JaakStamps = class {
|
|
|
1389
1547
|
fontSize: '10px',
|
|
1390
1548
|
borderRadius: '4px',
|
|
1391
1549
|
whiteSpace: 'nowrap'
|
|
1392
|
-
} }, "C\u00E1maras: ", this.availableCameras.length, index.h("br", { key: '
|
|
1550
|
+
} }, "C\u00E1maras: ", this.availableCameras.length, index.h("br", { key: 'd62a6ddde7160f41075b3b1d00340515019a48ca' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', index.h("br", { key: 'fe8c322421809a58f49150ef877ae0502d34d002' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', index.h("br", { key: '084d8c5c6c0193edcaf3bd7d64d0bce8e0bb6964' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (index.h("div", { key: '03b1a66188e65f1843c50aec096db840d60bb703', class: "camera-selector-dropdown" }, index.h("div", { key: 'fe7e08d25dd394d893a7f6269c80a2aaa4732134', class: "camera-selector-header" }, index.h("span", { key: '1b8f4892c3eef6dac8c682e152abb35e2331496c' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '396c78a3753c707619e27ef7e5f3a412ba8480c6', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: '6d56d67efe54719f21978cc6cc44cf2f421469bb', class: "camera-list" }, this.availableCameras.map((camera) => (index.h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
|
|
1393
1551
|
this.switchCamera(camera.deviceId);
|
|
1394
1552
|
this.toggleCameraSelector();
|
|
1395
|
-
}, type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '
|
|
1553
|
+
}, type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '7f5dda6214695d50c08d2ba4ccec236f3bd158cf', class: "device-info" }, index.h("small", { key: '50d2768f82b9b7f0a9c1729a5167493f731fb4f6' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (index.h("div", { key: '7ed246b862639b2c6df54dbd32ebb883776bfbd7', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: 'f2d3a97dfcb9fd757b2f39ec184bce3f5dcb3595', class: "flip-animation" }, index.h("div", { key: '89a98223c60317d2b9449029ba393c75bec154b3', class: "id-card-icon" }), index.h("div", { key: '507f6f1b7f38082772bbac2fc28046618161c69b', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: '9010d5be6684759b5d99c58ee65b0a7ebe82b9cb', class: "success-animation" }, index.h("div", { key: '454c39a5c0d457418b8abdc6e63b1c8a249a118f', class: "check-icon" }), index.h("div", { key: '502e55f1496f7d8cde9178c416bd9db4cf0491eb', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: 'e4d6b7c5ebc8da42689150195dd837e77e152ea3', class: "loading-overlay" }, index.h("div", { key: '7cc39dbbe94e0730c47829291b83717476517f7f', class: "loading-spinner" }), index.h("div", { key: '4c1afe04fc7a627c9a57c2f7b851ce62f9305676', class: "loading-text" }, this.statusMessage))), this.debug && (index.h("div", { key: '8745c4603b35003bff859657c86c713b7f58e204', class: "status-bar" }, index.h("div", { key: 'e098f2402d58d1808052e3d213f851e66db69ee4', class: "status-message", style: { 'color': this.statusColor } }, this.statusMessage))), index.h("div", { key: 'af4e07b405af5b1786009b0e9ecf72551753de28', class: "watermark" }, index.h("img", { key: '25f4b80f13528617007aad160c855c4fff0c8af5', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
1396
1554
|
}
|
|
1397
1555
|
};
|
|
1398
1556
|
JaakStamps.style = myComponentCss;
|