lido-player 0.0.2-alpha-57-dev → 0.0.2-alpha-59-dev

package/dist/components/{p-0712a27e.js → p-3513b1f3.js}

@@ -1385,6 +1385,7 @@ const DropTimeAttr = 'drop-time';
 const LidoContainer = 'lido-container';
 const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
 const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
+const TemplateID = 'template-id';
 var TraceMode;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";
@@ -1416,7 +1417,7 @@ var DropAction;
 const exitUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg';
 const prevUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg';
 const nextUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg';
-const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg';
+const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png';
 const fingerUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
 
 function dispatchCustomEvent(eventName, detail) {
@@ -1543,64 +1544,6 @@ var unwrapErr = (result) => {
   }
 };
 
-function removeHighlight(element) {
-    element.classList.remove('highlight');
-    element.ariaPressed = 'false';
-}
-// Function to highlight the speaking element
-function highlightSpeakingElement(element) {
-    if (!element)
-        return;
-    // Add a custom class for highlighting
-    element.classList.add('speaking-highlight');
-    // Inject keyframe animation and class styles into the document's head if it doesn't already exist
-    const styleId = '#speaking-highlight-style';
-    if (!document.querySelector(styleId)) {
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
-    `;
-        document.head.appendChild(style);
-    }
-}
-// Function to stop highlighting
-function stopHighlightForSpeakingElement(element) {
-    if (!element)
-        return;
-    // Remove the custom class for highlighting
-    element.classList.remove('speaking-highlight');
-    // Remove inline styles
-    // element.style.boxShadow = '';
-    // element.style.border = '';
-}
-
 function updateBalanceOnDrop(dragElement, dropElement) {
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
@@ -1616,7 +1559,7 @@ function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return null;
+        return 0;
     if (operation === "count") {
         return elements.length;
     }
@@ -1648,15 +1591,18 @@ function calculateValue(elements, operation) {
     }
 }
 function balanceResult(container, objectiveString) {
+    var _a, _b, _c, _d, _e, _f;
     const additionalCheck = container.getAttribute('equationCheck');
     if (!additionalCheck)
         return false;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return false;
-    const leftVal = balanceEl.leftVal;
-    const rightVal = balanceEl.rightVal;
-    if (leftVal == null || rightVal == null) {
+    const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
+    const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
+    const hasLeft = !isNaN(leftVal);
+    const hasRight = !isNaN(rightVal);
+    if (!hasLeft || !hasRight) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
@@ -1927,20 +1873,14 @@ function enableDraggingWithScaling(element) {
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                 if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                        otherElement.style.border = ''; // Reset border
-                        otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                    }
+                    if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                     if (otherElement.tagName.toLowerCase() === 'lido-image') {
                         otherElement.style.opacity = '0';
                     }
                 }
             }
             else {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    otherElement.style.border = ''; // Reset border
-                    otherElement.style.backgroundColor = ''; // Reset background color
-                }
+                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                 if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
                     otherElement.style.opacity = '1';
                 }
@@ -1948,10 +1888,7 @@ function enableDraggingWithScaling(element) {
         });
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
-            if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') {
-                mostOverlappedElement.style.border = '2px dashed #ff0000'; // Red dashed border
-                mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
-            }
+            if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') ;
             else {
                 if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
                     mostOverlappedElement.style.opacity = '0.3';
@@ -1987,10 +1924,7 @@ function enableDraggingWithScaling(element) {
                 const storedTabIndexes = Object.keys(dropObject).map(Number);
                 if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                     if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                        if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                            otherElement.style.border = ''; // Reset border
-                            otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                        }
+                        if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                         else if (otherElement.tagName.toLowerCase() === 'lido-image') {
                             otherElement.style.opacity = '0';
                         }
@@ -2000,10 +1934,7 @@ function enableDraggingWithScaling(element) {
                     }
                 }
                 else {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                        otherElement.style.border = ''; // Reset border
-                        otherElement.style.backgroundColor = ''; // Reset background color
-                    }
+                    if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                     if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
                         otherElement.style.opacity = '1';
                     }
@@ -2151,6 +2082,7 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         let prevDropItem = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === currentDrop);
         if (prevDropItem) {
             prevDropItem.isFull = false;
+            highlightElement();
             // container.setAttribute(DropHasDrag, JSON.stringify(dropHasDrag));
             const dropEl = document.getElementById(prevDropItem.drop);
             if (dropEl) {
@@ -2182,9 +2114,7 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         const storedTabIndexes = Object.keys(dropObject).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                }
+                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                 if (otherElement.tagName.toLowerCase() === 'lido-image') {
                     otherElement.style.opacity = '0';
                     otherElement.style.backgroundColor = 'transparent';
@@ -2192,9 +2122,7 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                otherElement.style.backgroundColor = 'transparent'; // Reset background color
-            }
+            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
             if (otherElement.tagName.toLowerCase() === 'lido-image') {
                 otherElement.style.opacity = '1';
                 otherElement.style.backgroundColor = 'transparent';
@@ -2202,6 +2130,7 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         }
     });
     handleShowCheck();
+    highlightElement();
 }
 async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -2315,6 +2244,7 @@ async function onElementDropComplete(dragElement, dropElement) {
             if (isAllowOnlyOneDrop && isisFull) {
                 isisFull.isFull = true;
                 dropElement.setAttribute('is-full', 'true');
+                highlightElement();
             }
             else {
                 console.warn('No matching drop item found for', dropElement);
@@ -2358,20 +2288,14 @@ async function onElementDropComplete(dragElement, dropElement) {
                         const storedTabIndexes = Object.keys(dropObject).map(Number);
                         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                                    otherElement.style.border = ''; // Reset border
-                                    otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                                }
+                                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                                 if (otherElement.tagName.toLowerCase() === 'lido-image') {
                                     otherElement.style.opacity = '0';
                                 }
                             }
                         }
                         else {
-                            if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                                otherElement.style.border = ''; // Reset border
-                                otherElement.style.backgroundColor = ''; // Reset background color
-                            }
+                            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                             if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
                                 otherElement.style.opacity = '1';
                             }
@@ -2430,6 +2354,7 @@ async function onElementDropComplete(dragElement, dropElement) {
     dragElement.style.opacity = '1';
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    highlightElement();
     await onActivityComplete(dragElement, dropElement);
 }
 function updateDropBorder(element) {
@@ -2492,10 +2417,10 @@ async function onClickDropOrDragElement(element, type) {
     `;
         document.head.appendChild(style);
     }
-    element === null || element === void 0 ? void 0 : element.classList.add('highlight');
+    element === null || element === void 0 ? void 0 : element.classList.add('highlight-element');
     element.ariaPressed = 'true';
-    const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight");
-    const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight");
+    const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
+    const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
     if (!selectedDropElement) {
         onClickDragElement(element);
     }
@@ -2604,6 +2529,110 @@ const reduceSizeToOriginal = () => {
     });
 };
 
+function removeHighlight(element) {
+    element.classList.remove('highlight-element');
+    element.ariaPressed = 'false';
+}
+// Function to highlight the speaking element
+function highlightSpeakingElement(element) {
+    if (!element)
+        return;
+    // Add a custom class for highlighting
+    element.classList.add('speaking-highlight');
+    // Inject keyframe animation and class styles into the document's head if it doesn't already exist
+    const styleId = '#speaking-highlight-style';
+    if (!document.querySelector(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+// Function to stop highlighting
+function stopHighlightForSpeakingElement(element) {
+    if (!element)
+        return;
+    // Remove the custom class for highlighting
+    element.classList.remove('speaking-highlight');
+    // Remove inline styles
+    // element.style.boxShadow = '';
+    // element.style.border = '';
+}
+function highlightElement() {
+    const container = document.querySelector(LidoContainer);
+    if (!container)
+        return;
+    const dropElements = buildDropHasDragFromDOM();
+    let firstFalse = Object.values(dropElements).find(item => !item.isFull);
+    if (firstFalse) {
+        const dropEls = container.querySelectorAll(`[type="drop"]`);
+        dropEls.forEach(dropEl => {
+            dropEl.classList.remove('highlight-element');
+        });
+        const dropEle = container.querySelector(`#${firstFalse.drop}`);
+        if (dropEle) {
+            dropEle.classList.add('highlight-element');
+        }
+        // Highlight corresponding drag elements if mistakes are more than 2
+        const dragElements = container.querySelectorAll(`[type="drag"]`);
+        if (countOfMistakes > 2) {
+            dragElements.forEach(dragEl => {
+                dragEl.classList.remove('highlight-element');
+                if (dragEl.getAttribute('value') === dropEle.getAttribute('value')) {
+                    dragEl.classList.add('highlight-element');
+                    dragEl.classList.remove('drag-element');
+                }
+            });
+        }
+        else {
+            dragElements.forEach(dragEl => {
+                dragEl.classList.remove('highlight-element');
+                dragEl.classList.add('drag-element');
+            });
+        }
+    }
+    else {
+        if (countOfMistakes <= 2)
+            return;
+        const clickTemplate = container.querySelectorAll("[type='click']");
+        clickTemplate.forEach(clickEl => {
+            if (clickEl.getAttribute('value') === container.getAttribute('objective')) {
+                if (!clickEl.classList.contains('highlight-element')) {
+                    clickEl.classList.add('highlight-element');
+                }
+            }
+        });
+    }
+}
+
 class AudioPlayer {
     constructor() {
         this.audioElement = document.createElement('audio');
@@ -4687,6 +4716,7 @@ function addClickListenerForClickType(element) {
             if (!isInsideCalculator) {
                 storingEachActivityScore(isCorrect);
             }
+            highlightElement();
             handleShowCheck();
             return;
         }
@@ -70045,7 +70075,7 @@ const initEventsForElement = async (element, type) => {
 const executeActions = async (actionsString, thisElement, element) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const actions = parseActions(actionsString);
-    body.style.pointerEvents = 'none';
+    // body.style.pointerEvents = 'none';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
         const queriedElement = document.querySelector(action.actor);
@@ -70489,12 +70519,16 @@ const countPatternWords = (pattern) => {
     }
     return wordCount;
 };
+let countOfMistakes = 0;
 const storingEachActivityScore = (flag) => {
     if (flag) {
         gameScore.rightMoves += 1;
+        countOfMistakes = 0;
+        highlightElement();
     }
     else {
         gameScore.wrongMoves += 1;
+        countOfMistakes += 1;
     }
     console.log('Right Moves : ', gameScore.rightMoves);
     console.log('Wrong Moves : ', gameScore.wrongMoves);
@@ -70540,9 +70574,7 @@ async function onActivityComplete(dragElement, dropElement) {
         const storedTabIndexes = Object.keys(dragScore).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    otherElement.style.backgroundColor = 'transparent'; // Reset background color**
-                }
+                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
                 if (otherElement.tagName.toLowerCase() === 'lido-image') {
                     otherElement.style.opacity = '0';
                     otherElement.style.backgroundColor = 'transparent';
@@ -70550,9 +70582,7 @@ async function onActivityComplete(dragElement, dropElement) {
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                otherElement.style.backgroundColor = 'transparent'; // Reset background color**********
-            }
+            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
             if (otherElement.tagName.toLowerCase() === 'lido-image') {
                 otherElement.style.opacity = '1';
                 otherElement.style.backgroundColor = 'transparent';
@@ -70678,8 +70708,10 @@ const validateObjectiveStatus = async () => {
     }
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
+        const onCorrect = container.getAttribute('onCorrect');
         if (!isContinueOnCorrect) {
             await calculateScore();
+            await executeActions(onCorrect, container);
             triggerNextContainer();
         }
         else {
@@ -71141,10 +71173,22 @@ const animateBoxCells = async (element, value) => {
         await new Promise(resolve => setTimeout(resolve, 600)); // Adjust delay as needed
         cell.classList.remove('lido-box-highlight');
     }
-    // After all cells have come down, apply the bounce animation
-    for (const cell of boxCells) {
-        // play the text child inside cell
-        await AudioPlayer.getI().play(cell);
+    // checkout parent cell first then pick the first text child inside cell
+    const parentCell = document.getElementById(LidoContainer);
+    if (!parentCell)
+        return;
+    const firstTextChild = parentCell.querySelector('lido-text');
+    if (firstTextChild) {
+        // play the text child inside parent cell
+        await AudioPlayer.getI().play(firstTextChild);
+    }
+    // Now select each box cell's text child and play them one by one
+    for (const box of boxCells) {
+        const text = box.querySelector('lido-text');
+        console.log('box text', text);
+        if (!text)
+            continue;
+        await AudioPlayer.getI().play(text);
     }
 };
 const questionBoxAnimation = async (element, value) => {
@@ -71166,20 +71210,10 @@ const questionBoxAnimation = async (element, value) => {
     });
     // Reveal all drop childrens which is hidden
     const dropElements = Array.from(element.querySelectorAll("[type='drop']"));
-    let check = false;
     dropElements.forEach(dropEl => {
         const dropVal = dropEl.getAttribute("value");
         if (dropVal && dropEl.innerText.trim() === "?") {
             dropEl.innerText = dropVal;
-            if (dropElements.length > 1 && check == false) {
-                if (window.innerWidth > window.innerHeight) {
-                    dropEl.style.marginRight = "-45px";
-                }
-                else {
-                    dropEl.style.marginRight = "-65px";
-                }
-                check = true;
-            }
         }
     });
 };
@@ -71189,9 +71223,9 @@ const SumTogetherAnimation = async (element, value) => {
     if (!value)
         return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
-    const TopRow = Array.from(element.children)[1];
-    const questionRow = Array.from(element.children)[2];
-    const optionRow = Array.from(element.children)[3];
+    const TopRow = Array.from(element.children)[2];
+    const questionRow = Array.from(element.children)[3];
+    const optionRow = Array.from(element.children)[4];
     if (!TopRow || !questionRow || !optionRow)
         return;
     const topRowChildren = Array.from(TopRow.children);
@@ -71342,4 +71376,4 @@ const updateCalculatorAnswer = (el) => {
     el.setAttribute('string', value);
 };
 
-export { fingerUrl as $, ActivityScoreKey as A, dispatchGameExitEvent as B, AudioPlayer as C, generateUUIDFallback as D, exitUrl as E, prevUrl as F, nextUrl as G, H, speakUrl as I, LidoContainer as J, getCancelBtnPopup as K, LIDO_COMMON_AUDIO_READY_EVENT as L, matchStringPattern as M, NextContainerKey as N, triggerNextContainer as O, PrevContainerKey as P, triggerPrevcontainer as Q, RiveService as R, SelectedValuesKey as S, setCancelBtnPopup as T, getDefaultExportFromCjs as U, tinyColor as V, DropAction as W, validateObjectiveStatus as X, fraction as Y, TraceMode as Z, speakIcon as _, setNonce as a, setPlatformOptions as b, commonjsGlobal as c, setVisibilityWithDelay as d, convertUrlToRelative as e, format as f, getAssetPath$1 as g, h, initEventsForElement as i, Host as j, parseProp as k, createEvent as l, equationCheck as m, storingEachActivityScore as n, executeActions as o, proxyCustomElement as p, calculateScore as q, handlingChildElements as r, setAssetPath as s, attachSpeakIcon as t, LIDO_COMMON_AUDIO_PATH as u, calculateScale as v, handleFloatElementPosition as w, handleElementClick as x, dispatchActivityChangeEvent as y, dispatchGameCompletedEvent as z };
+export { TraceMode as $, ActivityScoreKey as A, dispatchGameCompletedEvent as B, dispatchGameExitEvent as C, AudioPlayer as D, generateUUIDFallback as E, exitUrl as F, prevUrl as G, H, nextUrl as I, speakUrl as J, LidoContainer as K, LIDO_COMMON_AUDIO_READY_EVENT as L, getCancelBtnPopup as M, NextContainerKey as N, matchStringPattern as O, PrevContainerKey as P, triggerNextContainer as Q, RiveService as R, SelectedValuesKey as S, TemplateID as T, triggerPrevcontainer as U, setCancelBtnPopup as V, getDefaultExportFromCjs as W, tinyColor as X, DropAction as Y, validateObjectiveStatus as Z, fraction as _, setNonce as a, speakIcon as a0, fingerUrl as a1, setPlatformOptions as b, commonjsGlobal as c, setVisibilityWithDelay as d, convertUrlToRelative as e, format as f, getAssetPath$1 as g, h, initEventsForElement as i, Host as j, parseProp as k, createEvent as l, equationCheck as m, storingEachActivityScore as n, executeActions as o, proxyCustomElement as p, calculateScore as q, handlingChildElements as r, setAssetPath as s, attachSpeakIcon as t, LIDO_COMMON_AUDIO_PATH as u, calculateScale as v, highlightElement as w, handleFloatElementPosition as x, handleElementClick as y, dispatchActivityChangeEvent as z };

package/dist/components/{p-f2b53e8e.js → p-356e56bd.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, Y as fraction, h, j as Host } from './p-0712a27e.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, _ as fraction, h, j as Host } from './p-3513b1f3.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;
@@ -194,7 +194,7 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
         }
     }
     render() {
-        return (h(Host, { key: '12b0ded699dde182bca178f2a58e5dea40536f18', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '623f23b8b00bd4d83e99eb264dbb810aaf990ddd', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '9addda03d3a509cb0b23e88c59ad22c64dcd0044', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: 'e0d62ba6795bf0ac28e9e6b7dee5df04c2015ed5', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-b9875116.js → p-49ccf573.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, Z as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, _ as speakIcon, n as storingEachActivityScore, o as executeActions, q as calculateScore, O as triggerNextContainer, J as LidoContainer, k as parseProp, h, j as Host, $ as fingerUrl } from './p-0712a27e.js';
+import { p as proxyCustomElement, H, $ as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, a0 as speakIcon, n as storingEachActivityScore, o as executeActions, q as calculateScore, Q as triggerNextContainer, K as LidoContainer, k as parseProp, h, j as Host, a1 as fingerUrl } from './p-3513b1f3.js';
 
 const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
 const LidoTraceStyle0 = lidoTraceCss;
@@ -332,7 +332,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
         circle.setAttribute('r', `calc(20)`); // Radius of the draggable circle
-        circle.setAttribute('fill', '#CF1565'); // fill the color for the circle 
+        circle.setAttribute('fill', '#CF1565'); // fill the color for the circle
         (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
         state.circle = circle;
         this.resetIdleTimer(state); // ← start idle timer once the SVG is ready
@@ -460,9 +460,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
                 state.currentFreePath[state.currentPathIndex] = newPolyline;
                 // Store points array for this polyline
                 state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
-                state.currentFreePolylinePoints[state.currentPathIndex] = [
-                    { x: pointerPos.x, y: pointerPos.y }
-                ];
+                state.currentFreePolylinePoints[state.currentPathIndex] = [{ x: pointerPos.x, y: pointerPos.y }];
                 // Reset lastPointerPos for the new path
                 state.lastPointerPos = pointerPos;
                 // Add a points counter to limit path growth
@@ -633,6 +631,8 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             await new Promise(resolve => setTimeout(resolve, delay));
             this.currentSvgIndex++;
             await this.initializeSVG();
+            const svgContainer = document.getElementById('lido-svgContainer');
+            svgContainer.style.visibility = 'visible';
             this.moving = false;
             return;
         }
@@ -807,7 +807,18 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             // Highlight the current letter keeping the previous ones highlighted
             const letter = letters[index];
             if (letter) {
-                letter.classList.add('letter-highlight');
+                const svgContainer = traceElement.querySelector('#lido-svgContainer');
+                await executeActions("this.alignMatch='true';", textElem, svgContainer);
+                svgContainer.style.animation = 'trace-animation 0.4s forwards';
+                svgContainer.style.setProperty('--trace-width', `${letter.offsetWidth - 5}px`);
+                svgContainer.style.setProperty('--trace-height', `${letter.offsetHeight - 5}px`);
+                await executeActions("this.alignMatch='true';", letter, svgContainer);
+                setTimeout(() => {
+                    letter.classList.add('letter-highlight');
+                    svgContainer.style.transform = '';
+                    svgContainer.style.animation = '';
+                    svgContainer.style.visibility = 'hidden';
+                }, 500);
                 if (this.audioUrls[this.currentSvgIndex]) {
                     console.log('Playing audio:', this.audioUrls[this.currentSvgIndex]);
                     const audio = new Audio(convertUrlToRelative(this.audioUrls[this.currentSvgIndex]));
@@ -842,7 +853,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'aef0bf373de0c1d6ac49e7782838d9679c2b093f', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'f5223ad78568213f7965b3ea7eeb56b1b965fe78', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'b3efc3effa7fbfdb85af80103e2c04689bdd4ef7', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'b5a5ac42a3417441940de75cd4e2dfdbe1dc7c47', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return this; }

package/dist/components/{p-330caab8.js → p-4d9462ab.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, S as SelectedValuesKey, J as LidoContainer, o as executeActions, O as triggerNextContainer, w as handleFloatElementPosition, n as storingEachActivityScore, W as DropAction, k as parseProp, h, j as Host } from './p-0712a27e.js';
-import { d as defineCustomElement$1 } from './p-7ab0a273.js';
+import { p as proxyCustomElement, H, S as SelectedValuesKey, K as LidoContainer, o as executeActions, Q as triggerNextContainer, x as handleFloatElementPosition, n as storingEachActivityScore, Y as DropAction, k as parseProp, h, j as Host } from './p-3513b1f3.js';
+import { d as defineCustomElement$1 } from './p-2bb1f74d.js';
 
 const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
 const LidoKeyboardStyle0 = lidoKeyboardCss;
@@ -118,10 +118,10 @@ const LidoKeyboard = /*@__PURE__*/ proxyCustomElement(class LidoKeyboard extends
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: '030937c20c1e5652a528e9f5e3335faafe18fff1', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '4c928db14ba00f8aa20dcdb9e220f0486949e861', class: "input-area" }, h("input", { key: 'f8db5e6f76aba08fb5893fd3fff7e6739dd5f854', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '58156eabbdd1fe9d06fa0ff3e192ab0f434fcd9e', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(Host, { key: 'd57a587171b8525147e31228779e8503f5b7e854', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: 'bc4242fca443e2fe0821b6b5e3559bfdf231ab30', class: "input-area" }, h("input", { key: '046989156e5f4c61d52d187c74570a95d8ebe6ab', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '72ab0afbebb9789c5cde9ed7624ef22bae5d2901', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), h("lido-text", { key: '79538fe14d2645dc7ae62f4e24da2300a680b1cc', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: '0d09084f44fe8a69e19006daccd1029e291b43e5', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '9b2686af38ffed8e792f93f8302f01d59dbd2748', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: 'b6028375fb0e56b3c32821894f199e2c96726261', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'f9b109fe36a6e0fcef459bdaf69ccbad6f827fc9', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '1a3047db0048f49429bd344625a15d3c94b173d4', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

package/dist/components/{p-4d332eab.js → p-5aa24314.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-0712a27e.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-3513b1f3.js';
 
 const lidoPosCss = ".lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}";
 const LidoPosStyle0 = lidoPosCss;
@@ -64,7 +64,7 @@ const LidoPos = /*@__PURE__*/ proxyCustomElement(class LidoPos extends H {
         };
     }
     render() {
-        return (h(Host, { key: '0eea8147ee3845668e83bed01164dce740aae785', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ca9378dc185eeb4d495ab3045d6b17424de908dc' })));
+        return (h(Host, { key: '0ab10d21eccd24db07fb6b87d21f75be32801013', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '11a3f2fc1b08007601879c9cae2f2736dd511499' })));
     }
     get el() { return this; }
     static get style() { return LidoPosStyle0; }