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

package/dist/components/lido-shape.js

@@ -1,4 +1,4 @@
-import { L as LidoShape$1, d as defineCustomElement$1 } from './p-9eb8593c.js';
+import { L as LidoShape$1, d as defineCustomElement$1 } from './p-8a32f7cb.js';
 
 const LidoShape = LidoShape$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-slide-fill.js

@@ -1,4 +1,4 @@
-import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-97ddbda4.js';
+import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-a182c9a2.js';
 
 const LidoSlideFill = LidoSlideFill$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-text.js

@@ -1,4 +1,4 @@
-import { L as LidoText$1, d as defineCustomElement$1 } from './p-0e645e5b.js';
+import { L as LidoText$1, d as defineCustomElement$1 } from './p-37c86a94.js';
 
 const LidoText = LidoText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-trace.js

@@ -1,4 +1,4 @@
-import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-bc7835fc.js';
+import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-32c89979.js';
 
 const LidoTrace = LidoTrace$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-wrap.js

@@ -1,4 +1,4 @@
-import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-cfde157c.js';
+import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-5e7c6afa.js';
 
 const LidoWrap = LidoWrap$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-ee4759de.js → p-06cecca5.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-6953efe0.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, k as parseProp, h, j as Host } from './p-235091a1.js';
 
 const lidoBalanceCss = "#lido-balance{position:relative;height:500px;width:1205px;top:20%;left:-91px;z-index:0}.lido-balance-symbol{position:absolute;top:64%;left:50%;transform:translate(-50%, -50%);font-size:5vw;font-weight:bold;color:black;pointer-events:none;z-index:999}@media (orientation: portrait){.lido-balance-shadow{height:100px;position:absolute;top:80%;left:28%}}@media (orientation: landscape){.lido-balance-shadow{height:100px;position:absolute;top:90%;left:33%}}@media (orientation: portrait){#pivotimg{position:absolute;height:auto;width:23%;bottom:18%;left:38%;z-index:100}}#pivotimg::after{content:\"\";position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:120%;height:60px;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Shadow.svg\");background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:10}@media (orientation: landscape){#pivotimg{position:absolute;height:auto;width:23%;bottom:8%;left:38%;z-index:100}}.lido-balance .pivot svg{width:100%;height:auto}#scaleimg{position:absolute;width:73%;height:auto;top:61%;left:14%;z-index:90}.lido-balance .scale svg{width:100%;height:auto}@media (orientation: landscape){#handlerimg{position:absolute;width:35%;height:auto;top:49%;left:2%}}@media (orientation:portrait ){#handlerimg{position:absolute;width:35%;height:auto;top:53%;left:2%}}.lido-balance .handler svg{width:100%;height:auto;fill:brown}@media (orientation: landscape){#handimg{position:absolute;width:35%;height:auto;top:49%;right:2%}}@media (orientation:portrait){#handimg{position:absolute;width:35%;height:auto;top:53%;right:2%}}.lido-balance .hand svg{width:100%;height:auto;fill:brown}.pivot svg path:nth-of-type(1){fill:brown}.pivot svg path[d^=\"M78.9414\"]{fill:white}";
 const LidoBalanceStyle0 = lidoBalanceCss;
@@ -129,7 +129,7 @@ const LidoBalance = /*@__PURE__*/ proxyCustomElement(class LidoBalance extends H
         };
     }
     render() {
-        return (h(Host, { key: 'd1da72f1bf298dd7c81b0cfefa0e9e563ccbfff1', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '737ab206a5156b402d4477a38567480f10419c14', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '8bc60136950858d5d1b96c38ec4c0635024f8d24', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '07049a6b5c8e75d831c9287b2b4a0e633791174b', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '85361c27b1ab6fcc86969bfc9d4dff1df6040165', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'c4208582bfa1b63e4381d44d9a95e9c537dfbc84', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (h(Host, { key: 'e1cdc8aab0b18f3cc654a52a1e315ba6d708adb3', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '98ed1d2b6eb29e0fcf2ac656f8bb87cbe4420dfa', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '8139021fec3f6d19a8fc711f02dc9e61197e5e5c', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '3f7621e16932c862ea50e3ed6e941efb3b77c292', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '939e0df96916eb3259e6adcefa0c9a786aeccdef', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'c4de234c5058cb5d6bef94b1c75f67ca85ee7fc9', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-17cdbc3d.js → p-16604098.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, U as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, V as tinyColor, t as attachSpeakIcon, k as parseProp, e as convertUrlToRelative, h, j as Host } from './p-6953efe0.js';
+import { c as commonjsGlobal, W as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, X as tinyColor, t as attachSpeakIcon, k as parseProp, e as convertUrlToRelative, h, j as Host } from './p-235091a1.js';
 
 var lib = {exports: {}};
 

package/dist/components/{p-6953efe0.js → p-235091a1.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;
@@ -2210,7 +2139,6 @@ async function onElementDropComplete(dragElement, dropElement) {
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
     const dropSelectedDataobject = buildDragSelectedMapFromDOM();
     JSON.stringify(dropSelectedDataobject);
-    console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
@@ -2315,6 +2243,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 +2287,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 +2353,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) {
@@ -2447,6 +2371,7 @@ function updateDropBorder(element) {
     if (dragSelectedElements.length > 0) {
         element.classList.add('filled');
         element.classList.remove('empty');
+        element.classList.remove('highlight-element');
     }
     else {
         if (!element.classList.contains('math-matrix')) {
@@ -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 && container.getAttribute("is-continue-on-correct") === "true") {
+            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 || container.getAttribute("is-continue-on-correct") === "false")
+            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 {
@@ -71344,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-bc7835fc.js → p-32c89979.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-6953efe0.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-235091a1.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-822b692a.js → p-354f7b19.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-6953efe0.js';
-import { d as defineCustomElement$1 } from './p-0e645e5b.js';
+import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-235091a1.js';
+import { d as defineCustomElement$1 } from './p-37c86a94.js';
 
 const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-canvas{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}#lido-exit-button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-43%;left:18%;z-index:10}canvas{touch-action:none;display:block}";
 const LidoCanvasStyle0 = lidoCanvasCss;