lido-player 0.0.2-alpha-58-dev → 0.0.2-alpha-60-dev

package/dist/components/{p-f729ff82.js → p-de45dcab.js}

@@ -1,30 +1,29 @@
-import { p as proxyCustomElement, H, y as dispatchActivityChangeEvent, A as ActivityScoreKey, z as dispatchGameCompletedEvent, B as dispatchGameExitEvent, C as AudioPlayer, D as generateUUIDFallback, E as exitUrl, F as prevUrl, G as nextUrl, I as speakUrl, N as NextContainerKey, P as PrevContainerKey, u as LIDO_COMMON_AUDIO_PATH, J as LidoContainer, h, K as getCancelBtnPopup, S as SelectedValuesKey, M as matchStringPattern, O as triggerNextContainer, v as calculateScale, Q as triggerPrevcontainer, o as executeActions, j as Host, e as convertUrlToRelative, T as setCancelBtnPopup } from './p-6953efe0.js';
-import { i as instance } from './p-73e3f0f4.js';
-import { d as defineCustomElement$k } from './p-6f451328.js';
-import { d as defineCustomElement$j } from './p-ee4759de.js';
-import { d as defineCustomElement$i } from './p-67d97edc.js';
-import { d as defineCustomElement$h } from './p-822b692a.js';
-import { d as defineCustomElement$g } from './p-53a7d4cb.js';
-import { d as defineCustomElement$f } from './p-c62da3ed.js';
-import { d as defineCustomElement$e } from './p-348f95ba.js';
-import { d as defineCustomElement$d } from './p-9c7f08c4.js';
-import { d as defineCustomElement$c } from './p-d0c4d5a7.js';
-import { d as defineCustomElement$b } from './p-17cdbc3d.js';
-import { d as defineCustomElement$a } from './p-f36d02e9.js';
-import { d as defineCustomElement$9 } from './p-8c526c86.js';
-import { d as defineCustomElement$8 } from './p-6f91a337.js';
-import { d as defineCustomElement$7 } from './p-0fa0ada9.js';
-import { d as defineCustomElement$6 } from './p-984ef5d1.js';
-import { d as defineCustomElement$5 } from './p-9eb8593c.js';
-import { d as defineCustomElement$4 } from './p-97ddbda4.js';
-import { d as defineCustomElement$3 } from './p-0e645e5b.js';
-import { d as defineCustomElement$2 } from './p-bc7835fc.js';
-import { d as defineCustomElement$1 } from './p-cfde157c.js';
+import { p as proxyCustomElement, H, z as dispatchActivityChangeEvent, A as ActivityScoreKey, B as dispatchGameCompletedEvent, C as dispatchGameExitEvent, D as AudioPlayer, E as generateUUIDFallback, F as exitUrl, G as prevUrl, I as nextUrl, J as speakUrl, N as NextContainerKey, P as PrevContainerKey, u as LIDO_COMMON_AUDIO_PATH, K as LidoContainer, h, T as TemplateID, o as executeActions, M as getCancelBtnPopup, S as SelectedValuesKey, O as matchStringPattern, Q as triggerNextContainer, v as calculateScale, U as triggerPrevcontainer, j as Host, e as convertUrlToRelative, V as setCancelBtnPopup } from './p-235091a1.js';
+import { d as defineCustomElement$3, i as instance } from './p-37c86a94.js';
+import { d as defineCustomElement$k } from './p-4d01394c.js';
+import { d as defineCustomElement$j } from './p-06cecca5.js';
+import { d as defineCustomElement$i } from './p-db2a05f5.js';
+import { d as defineCustomElement$h } from './p-354f7b19.js';
+import { d as defineCustomElement$g } from './p-3acada8c.js';
+import { d as defineCustomElement$f } from './p-57400ebc.js';
+import { d as defineCustomElement$e } from './p-b151457d.js';
+import { d as defineCustomElement$d } from './p-8f082c62.js';
+import { d as defineCustomElement$c } from './p-b867548e.js';
+import { d as defineCustomElement$b } from './p-16604098.js';
+import { d as defineCustomElement$a } from './p-74c270d2.js';
+import { d as defineCustomElement$9 } from './p-93acfbb2.js';
+import { d as defineCustomElement$8 } from './p-c90d92db.js';
+import { d as defineCustomElement$7 } from './p-8c0667eb.js';
+import { d as defineCustomElement$6 } from './p-3acd9a2e.js';
+import { d as defineCustomElement$5 } from './p-8a32f7cb.js';
+import { d as defineCustomElement$4 } from './p-a182c9a2.js';
+import { d as defineCustomElement$2 } from './p-32c89979.js';
+import { d as defineCustomElement$1 } from './p-5e7c6afa.js';
 
-const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:0 2px 4px rgba(151, 150, 150, 0.1) !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}";
+const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}";
 const LidoHomeStyle0 = indexCss;
 
-const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 40px yellow)\r\n            drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}}";
+const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes placeToRight{from{}to{transform:translateX(2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 40px yellow)\r\n            drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}}@keyframes trace-animation{0%{}100%{width:var(--trace-width, 100px);height:var(--trace-height, 100px)}}";
 const LidoHomeStyle1 = animationCss;
 
 const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.popup-button:active .lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}.popup-exit-text{white-space:nowrap;font-size:22px;font-weight:600;margin-top:-8%}.lido-alert-parent{z-index:10000 !important;position:absolute;top:0;left:0}.popup-button{width:80px;height:80px;z-index:1000;cursor:pointer;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0 8px 0 #F34D08}.nav-for-lanai{position:absolute;top:0%;left:0%;max-width:none;width:100%;height:auto;visibility:visible}.parent_dots{pointer-events:none}";
@@ -128,7 +127,7 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
                 }
             }
         };
-        this.commonAudioPath = undefined;
+        this.commonAudioPath = "";
         this.showNav = true;
         this.activeContainerIndexes = [];
         this.locale = '';
@@ -217,9 +216,9 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
     publishCommonAudioPath(path) {
         if (!path)
             return;
-        const cleanPath = path.replace(/\/+$/, "");
+        const cleanPath = path.replace(/\/+$/, '');
         window[LIDO_COMMON_AUDIO_PATH] = cleanPath;
-        console.log("[LidoHome] Published common audio path:", cleanPath);
+        console.log('[LidoHome] Published common audio path:', cleanPath);
         // Dispatch a global event so LidoText knows the path is ready
         window.dispatchEvent(new Event('lidoCommonAudioPathReady'));
     }
@@ -373,12 +372,14 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
      */
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
-        const containers = Array.from(containerElements).map((container, index) => {
+        const containers = Array.from(containerElements)
+            .map((container, index) => {
             if (this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index))
                 return;
             // Return a factory function that generates a fresh JSX node each time
             return () => this.parseElement(container);
-        }).filter(Boolean); // Remove any undefined entries
+        })
+            .filter(Boolean); // Remove any undefined entries
         this.containers = containers;
     }
     areAllDropsFilled() {
@@ -394,6 +395,13 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         await AudioPlayer.getI().stop();
         const container = document.getElementById(LidoContainer);
         const allele = container.querySelectorAll('*');
+        const templateId = container.getAttribute(TemplateID);
+        if (templateId) {
+            const instructEl = this.el.querySelector(`#${templateId}`);
+            if (instructEl) {
+                await executeActions("this.speak='true';", instructEl);
+            }
+        }
         for (const el of Array.from(allele)) {
             if (getCancelBtnPopup())
                 break;
@@ -458,14 +466,14 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\r\n        -button", onClick: () => {
                 this.exitFlag = true;
                 AudioPlayer.getI().stop();
-            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
+            }, style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
                 triggerPrevcontainer();
-            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
+            }, style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 executeActions("this.nextBtn='true'", event.currentTarget);
-            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup(), style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
+            }, style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup(), style: { visibility: this.showNav ? 'visible' : 'hidden' } }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.
@@ -487,7 +495,7 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         const style = {
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { class: "lido-home", uuid: this.uuid, index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, h("lido-text", { visible: "true", string: "Do you want to exit?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Exit", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), h("lido-text", { visible: "true", string: "Continue playing", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
+        return (h(Host, { class: "lido-home", uuid: this.uuid, "template-id": "", index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, h("lido-text", { visible: "true", string: "Do you want to exit?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Exit", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), h("lido-text", { visible: "true", string: "Continue playing", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { f as format } from './utils-d0f004f8.js';
+export { f as format } from './utils-2edeb213.js';
 import './index-37c2ad2d.js';