lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

package/dist/cjs/{utils-dc02d753.js → utils-3c1ce74e.js}

@@ -226,6 +226,45 @@ function balanceResult(container, objectiveString) {
     return res;
 }
 
+function dragDropAnimation(container, dragElement, dropElement) {
+    container.style.pointerEvents = 'none';
+    setTimeout(() => {
+        const div = document.createElement('div');
+        container.append(div);
+        div.classList.add('after-drop-popup-container');
+        dragElement.style.scale = `1`;
+        dropElement.style.scale = `1`;
+        const allDragElements = container.querySelectorAll('[type="drag"]');
+        const dragParents = Array.from(allDragElements).map(el => el.parentElement);
+        const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
+        // Remove from old parents
+        if (allSameParent) {
+            dragElement.remove();
+            dropElement.remove();
+        }
+        else {
+            dragElement.parentElement.parentElement.remove();
+            dropElement.parentElement.parentElement.remove();
+        }
+        // Add animation and popup classes
+        dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
+        dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
+        div.appendChild(dragElement);
+        div.appendChild(dropElement);
+        dropElement.classList.remove('empty');
+        setTimeout(() => {
+            dragElement.classList.remove('zoom-fade-in');
+            dropElement.classList.remove('zoom-fade-in');
+            dragElement.classList.add('zoom-fade-out');
+            dropElement.classList.add('zoom-fade-out');
+            setTimeout(() => {
+                div.remove();
+                container.style.pointerEvents = 'auto';
+            }, 800); // match animation duration
+        }, 2000); // stay for 2 seconds
+    }, 250);
+}
+
 function buildDropHasDragFromDOM() {
     const dropHasDrag = {};
     const dropElements = document.querySelectorAll("[type='drop']");
@@ -292,7 +331,7 @@ function enableDraggingWithScaling(element) {
             isDragging = false;
             return;
         }
-        // AudioPlayer.getI().stop();
+        AudioPlayer.getI().stop();
         removeHighlight(element);
         isDragging = true;
         isClicked = true;
@@ -396,6 +435,7 @@ function enableDraggingWithScaling(element) {
     // Start observing the element
     observer.observe(container, observerConfig);
     const onMove = (event) => {
+        console.log('moved');
         if (!isDragging)
             return;
         if (isDraggingDisabled) {
@@ -404,7 +444,7 @@ function enableDraggingWithScaling(element) {
         }
         isClicked = false;
         element.style.transition = 'none';
-        const containerScale = getElementScale$1(container);
+        const containerScale = calculateScale();
         let dx = 0;
         let dy = 0;
         if (event instanceof MouseEvent) {
@@ -456,7 +496,9 @@ function enableDraggingWithScaling(element) {
                 mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
             }
             else {
-                mostOverlappedElement.style.opacity = '0.3';
+                if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
+                    mostOverlappedElement.style.opacity = '0.3';
+                }
             }
         }
     };
@@ -511,6 +553,7 @@ function enableDraggingWithScaling(element) {
         // Check for overlaps and log the most overlapping element
         let mostOverlappedElement = findMostoverlappedElement$1(element, 'drop');
         onElementDropComplete(element, mostOverlappedElement);
+        executeActions("this.updateCountBlender='true'", container);
         if (((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal) {
             if (mostOverlappedElement) {
                 if (element) {
@@ -700,7 +743,6 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     });
     handleShowCheck();
 }
-const tempVanishedValues = [];
 async function onElementDropComplete(dragElement, dropElement) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const container = document.getElementById(LidoContainer);
@@ -712,10 +754,10 @@ async function onElementDropComplete(dragElement, dropElement) {
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
-        return;
     }
     const dropTabIndex = dropElement.getAttribute('tab-index');
-    if ((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) {
+    const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'false';
+    if (((_b = dropHasDrag[dropTabIndex]) === null || _b === void 0 ? void 0 : _b.isFull) && !isAllowOnlyOneDrop) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
         return;
     }
@@ -727,7 +769,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
             return;
         }
-        // let isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
         let isCorrect;
         const dragValue = ((_c = dragElement.getAttribute('value')) === null || _c === void 0 ? void 0 : _c.trim()) || "";
         const dropValue = ((_d = dropElement.getAttribute('value')) === null || _d === void 0 ? void 0 : _d.trim()) || "";
@@ -744,7 +785,8 @@ async function onElementDropComplete(dragElement, dropElement) {
             }
         }
         else {
-            isCorrect = dropElement.getAttribute('value').toLowerCase().includes(dragElement.getAttribute('value').toLowerCase());
+            //strings
+            isCorrect = dropValue.toLowerCase().includes(dragValue.toLowerCase());
         }
         if (!isCorrect) {
             dragElement.style.transition = 'transform 0.5s ease';
@@ -754,6 +796,7 @@ async function onElementDropComplete(dragElement, dropElement) {
             await executeActions(onInCorrect, dropElement, dragElement);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
+                storingEachActivityScore(false);
                 // const oldDropIndex = dragToDropMap[dragElement.getAttribute('data-id')];
                 // if (oldDropIndex !== undefined && dropHasDrag[oldDropIndex]) {
                 //   dropHasDrag[oldDropIndex].isFull = false;
@@ -779,61 +822,18 @@ async function onElementDropComplete(dragElement, dropElement) {
         else {
             const checkdropAttr = container.getAttribute('dropAttr');
             if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
-                container.style.pointerEvents = "none";
-                setTimeout(() => {
-                    var _a, _b, _c;
-                    const div = document.createElement('div');
-                    container.append(div);
-                    div.classList.add('after-drop-popup-container');
-                    dragElement.style.scale = `1`;
-                    dropElement.style.scale = `1`;
-                    const allDragElements = container.querySelectorAll('[type="drag"]');
-                    const dragParents = Array.from(allDragElements).map(el => el.parentElement);
-                    const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
-                    JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-                    const vanishedValue = (_b = dragElement.getAttribute('value')) !== null && _b !== void 0 ? _b : (_c = dragElement.textContent) === null || _c === void 0 ? void 0 : _c.trim();
-                    if (vanishedValue) {
-                        tempVanishedValues.push(vanishedValue);
-                    }
-                    // Remove from old parents
-                    if (allSameParent) {
-                        dragElement.remove();
-                        dropElement.remove();
-                    }
-                    else {
-                        dragElement.parentElement.parentElement.remove();
-                        dropElement.parentElement.parentElement.remove();
-                    }
-                    // Add animation and popup classes
-                    dragElement.classList.add('zoom-fade-in', 'after-drop-popup-drag-element');
-                    dropElement.classList.add('zoom-fade-in', 'after-drop-popup-drop-element');
-                    div.appendChild(dragElement);
-                    div.appendChild(dropElement);
-                    dropElement.classList.remove('empty');
-                    setTimeout(() => {
-                        dragElement.classList.remove('zoom-fade-in');
-                        dropElement.classList.remove('zoom-fade-in');
-                        dragElement.classList.add('zoom-fade-out');
-                        dropElement.classList.add('zoom-fade-out');
-                        setTimeout(() => {
-                            div.remove();
-                            container.style.pointerEvents = 'auto';
-                            const objective = container.getAttribute('objective');
-                            if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
-                                (async () => {
-                                    isCorrect = true;
-                                    const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
-                                    await executeActions(onCorrect, container);
-                                    window.dispatchEvent(new CustomEvent(NextContainerKey));
-                                    tempVanishedValues.length = 0;
-                                })();
-                            }
-                        }, 800); // match animation duration
-                    }, 2000); // stay for 2 seconds
-                }, 250);
+                //This function coming from animationhandler.ts
+                dragDropAnimation(container, dragElement, dropElement);
             }
         }
     }
+    else {
+        const checkdropAttr = container.getAttribute('dropAttr');
+        if (checkdropAttr && checkdropAttr.toLowerCase() === DropMode.EnableAnimation.toLowerCase()) {
+            //This function coming from animationhandler.ts
+            dragDropAnimation(container, dragElement, dropElement);
+        }
+    }
     if (dropElement) {
         let selectedValues = JSON.parse((_e = container.getAttribute(SelectedValuesKey)) !== null && _e !== void 0 ? _e : "[]");
         const dragValue = dragElement.getAttribute('value');
@@ -851,7 +851,8 @@ async function onElementDropComplete(dragElement, dropElement) {
         }
         if (!(((_f = dropElement.getAttribute('dropAttr')) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === DropMode.Diagonal) && (dropElement.getAttribute('minDrops') === '1' || !dropElement.getAttribute('minDrops'))) {
             const isisFull = Object.values(dropHasDrag).find(item => document.getElementById(item.drop) === dropElement);
-            if (isisFull) {
+            const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
+            if (isAllowOnlyOneDrop && isisFull) {
                 isisFull.isFull = true;
                 dropElement.setAttribute('is-full', 'true');
             }
@@ -886,8 +887,8 @@ async function onElementDropComplete(dragElement, dropElement) {
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_g = dropHasDrag[dropTabIndex]) === null || _g === void 0 ? void 0 : _g.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement$1(dragElement, 'drag');
-                const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true' || '';
-                if (mostOverlappedElement && isAllowOnlyOneDrop) {
+                const isAllowOnlyOneDrop = dropElement.getAttribute('is-allow-only-one-drop') === 'true';
+                if (isAllowOnlyOneDrop && mostOverlappedElement) {
                     dragElement.style.transform = 'translate(0,0)';
                     dragElement.style.transition = 'transform 0.5s ease';
                     const allElements = document.querySelectorAll("[type='drop']");
@@ -965,11 +966,12 @@ async function onElementDropComplete(dragElement, dropElement) {
     // Add pulse and highlight effect for a successful match
     const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
-    storingEachActivityScore(isCorrect);
+    // storingEachActivityScore(isCorrect);
     dragElement.style.opacity = '1';
     await onActivityComplete(dragElement, dropElement);
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
+    await onActivityComplete(dragElement, dropElement);
 }
 function updateDropBorder(element) {
     if (!element || !element.classList.contains('drop-element'))
@@ -1361,7 +1363,7 @@ function enableReorderDrag(element) {
         isClicked = false;
         event.preventDefault();
         const containerRect = container.getBoundingClientRect();
-        const containerScale = getElementScale(container);
+        const containerScale = calculateScale();
         const newLeft = (point.clientX - containerRect.left - offsetXInElement) / containerScale;
         const newTop = (point.clientY - containerRect.top - offsetYInElement) / containerScale;
         element.style.left = `${newLeft}px`;
@@ -1428,9 +1430,7 @@ function enableReorderDrag(element) {
             else {
                 if (element.parentElement['type'] !== 'category') {
                     executeActions('this.alignMatch=true', divEl, element);
-                    setTimeout(() => {
-                        divEl.replaceWith(element);
-                    }, 500);
+                    divEl.replaceWith(element);
                 }
                 else {
                     const categoryElement = element.parentElement;
@@ -1906,9 +1906,6 @@ function slidingWithScaling(element) {
     element.style.transform = 'translate(0, 0)'; // Initialize transform for consistent dragging
     element.addEventListener('mousedown', onStart);
     element.addEventListener('touchstart', onStart);
-    element.addEventListener('click', ev => {
-        onClickDropOrDragElement(element, 'drag');
-    });
 }
 const slideCompleted = (slideElement) => {
     var _a;
@@ -1924,8 +1921,13 @@ const slideCompleted = (slideElement) => {
     const objectiveArray = objectiveString.split(',');
     const elementIndex = slideArr.indexOf(slideElement['value']);
     const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
-    storingEachActivityScore(isCorrect);
-    handleShowCheck();
+    if (container.getAttribute('is-continue-on-correct') === 'true') {
+        storingEachActivityScore(true);
+        handleShowCheck();
+    }
+    else {
+        storingEachActivityScore(isCorrect);
+    }
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3210,7 +3212,10 @@ function addClickListenerForClickType(element) {
             dispatchClickEvent(element, isCorrect);
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
-                // element.style.pointerEvents = 'none';
+                if (!(element.id && element.id.startsWith('key-button'))) {
+                    element.style.pointerEvents = 'none';
+                }
+                document.body.style.pointerEvents = 'none';
                 await executeActions(onCorrect, element);
             }
             else {
@@ -3267,6 +3272,7 @@ function addClickListenerForClickType(element) {
             container.setAttribute(SelectedValuesKey, JSON.stringify(sortedValues));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
+            AudioPlayer.getI().stop();
             if (isCorrect) {
                 const onCorrect = element.getAttribute('onCorrect');
                 await executeActions(onCorrect, element);
@@ -68580,6 +68586,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';
     for (let i = 0; i < actions.length; i++) {
         const action = actions[i];
         const queriedElement = document.querySelector(action.actor);
@@ -68610,7 +68617,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     const container = document.getElementById(LidoContainer);
                     const containerScale = getElementScale$1(container);
                     dragElement.style.transform = 'translate(0,0)';
-                    console.log("logg alinmatch");
+                    console.log('logg alinmatch');
                     const dropRect = dropElement.getBoundingClientRect();
                     const dragRect = dragElement.getBoundingClientRect();
                     const dropCenterX = dropRect.left + dropRect.width / 2;
@@ -68664,7 +68671,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
                     }
-                    validateObjectiveStatus();
+                    await validateObjectiveStatus();
                     break;
                 }
                 case 'prevBtn': {
@@ -68774,8 +68781,53 @@ const executeActions = async (actionsString, thisElement, element) => {
                     }
                     break;
                 }
-                case 'updatedAnswer': {
-                    updatedAnswer();
+                case 'disableType': {
+                    const dragEle = document.querySelector('[type="drag"]');
+                    dragEle.removeAttribute('type');
+                    dragEle.style.pointerEvents = 'none';
+                    break;
+                }
+                case 'updateCountBlender': {
+                    const allDrags = document.querySelectorAll('[type="drag"]');
+                    let units = 0;
+                    let tens = 0;
+                    let hundreds = 0;
+                    allDrags.forEach(el => {
+                        const dropTo = el.getAttribute("drop-to");
+                        if (dropTo === "unitsDrop")
+                            units++;
+                        if (dropTo === "tensDrop")
+                            tens++;
+                        if (dropTo === "hundredsDrop")
+                            hundreds++;
+                    });
+                    const unitsValue = units * 1;
+                    const tensValue = tens * 10;
+                    const hundredsValue = hundreds * 100;
+                    const totalValue = unitsValue + tensValue + hundredsValue;
+                    // ✅ Update Lido Text Boxes
+                    const unitsBox = document.getElementById("units");
+                    const tensBox = document.getElementById("tens");
+                    const hundredsBox = document.getElementById("hundreds");
+                    if (unitsBox) {
+                        unitsBox.setAttribute("string", unitsValue.toString());
+                    }
+                    if (tensBox) {
+                        tensBox.setAttribute("string", tensValue.toString());
+                    }
+                    if (hundredsBox) {
+                        hundredsBox.setAttribute("string", hundredsValue.toString());
+                    }
+                    console.log(`Units = ${units} → ${unitsValue}`);
+                    console.log(`Tens = ${tens} → ${tensValue}`);
+                    console.log(`Hundreds = ${hundreds} → ${hundredsValue}`);
+                    console.log(`✅ Total Value = ${totalValue}`);
+                    break;
+                }
+                case 'updateCalculatorAnswer': {
+                    if (targetElement) {
+                        updateCalculatorAnswer(targetElement);
+                    }
                     break;
                 }
                 default: {
@@ -68785,6 +68837,7 @@ const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
+    body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -68794,6 +68847,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     const isInfinite = container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop;
     if (isAppend || isInfinite) {
         setTimeout(() => {
+            var _a, _b;
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
@@ -68827,6 +68881,14 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                     dummyElement.style.margin = '0px';
                 });
             }
+            const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+            const rowAttr = dropElement.getAttribute('dropAttr');
+            const dropAttr = parseProp(rowAttr, orientation); // will return stackcascade or verticalstack
+            if (((_a = (dropAttr)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "stackcascade" || ((_b = (dropAttr)) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "verticalstack") {
+                dropElement.append(dragElement);
+                placeElementInDropZone(dropElement, dragElement, orientation, dropAttr);
+                return;
+            }
             dropElement.parentElement.append(element);
             dragElement.style.position = 'absolute';
             dragElement.style.zIndex = '1';
@@ -68839,16 +68901,41 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 500);
+        }, 100);
     }
 };
+// function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
+//   let clone = document.createElement('div') as HTMLElement;
+//   clone.innerHTML = originalEl.outerHTML;
+//   clone = clone.firstChild as HTMLElement;
+//   clone.setAttribute('height', originalEl.style.height);
+//   clone.setAttribute('width', originalEl.style.width);
+//   clone.setAttribute('visible', 'true');
+//   return clone;
+// }
 function cloneElementWithComputedStyles(originalEl) {
-    let clone = document.createElement('div');
-    clone.innerHTML = originalEl.outerHTML;
-    clone = clone.firstChild;
-    clone.setAttribute('height', originalEl.style.height);
-    clone.setAttribute('width', originalEl.style.width);
-    clone.setAttribute('visible', 'true');
+    const tag = originalEl.tagName.toLowerCase();
+    if (tag === "lido-text") {
+        let clone = document.createElement('div');
+        clone.innerHTML = originalEl.outerHTML;
+        clone = clone.firstChild;
+        clone.setAttribute('height', originalEl.style.height);
+        clone.setAttribute('width', originalEl.style.width);
+        clone.setAttribute('visible', 'true');
+        return clone;
+    }
+    // ✅ For ALL other types (INCLUDING lido-image & matrix) use your simple logic
+    const clone = originalEl.cloneNode(false);
+    clone.style.width = originalEl.style.width;
+    clone.style.height = originalEl.style.height;
+    clone.style.margin = originalEl.style.margin;
+    clone.style.opacity = originalEl.style.opacity;
+    clone.style.transform = originalEl.style.transform;
+    clone.setAttribute("visible", "true");
+    clone.setAttribute("data-dummy", "true");
+    if (tag === "lido-math-matrix") {
+        clone.setAttribute('clickable', "false");
+    }
     return clone;
 }
 // Function to parse actions string
@@ -69067,6 +69154,7 @@ const handleShowCheck = () => {
         validateObjectiveStatus();
     }
 };
+const body = document.body;
 let res;
 const validateObjectiveStatus = async () => {
     var _a, _b;
@@ -69131,6 +69219,7 @@ const validateObjectiveStatus = async () => {
         if (!isContinueOnCorrect) {
             triggerNextContainer();
             await calculateScore();
+            triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
@@ -69153,16 +69242,16 @@ const triggerPrevcontainer = () => {
 function convertUrlToRelative(url) {
     const container = document.getElementById(LidoContainer);
     const baseUrl = container.getAttribute('baseUrl');
-    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob'))) {
+    if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
-    else if (baseUrl) {
-        const newUrl = !url.startsWith('/') ? url : url.substring(1);
-        return baseUrl + (baseUrl.endsWith('/') ? newUrl : '/' + newUrl);
-    }
-    else {
-        return index$1.getAssetPath(url);
+    if (baseUrl) {
+        const newUrl = url.startsWith('/') ? url.slice(1) : url;
+        if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
+            return newUrl;
+        return baseUrl.endsWith('/') ? baseUrl + newUrl : `${baseUrl}/${newUrl}`;
     }
+    return index$1.getAssetPath(url);
 }
 /**
  * Asynchronously speaks the given text using the browser's text-to-speech API.
@@ -69634,9 +69723,6 @@ const SumTogetherAnimation = async (element, value) => {
         return;
     if (!value)
         return;
-    const container = document.getElementById(LidoContainer);
-    if (!container)
-        return;
     // Expecting structure: [_, TopRow, questionRow, optionRow, ...]
     const TopRow = Array.from(element.children)[1];
     const questionRow = Array.from(element.children)[2];
@@ -69731,16 +69817,64 @@ const SumTogetherAnimation = async (element, value) => {
         elementAppearance(false);
     }
 };
-const updatedAnswer = () => {
+function placeElementInDropZone(dropElement, dragElement, orientation, dropAttr) {
+    const dropRect = dropElement.getBoundingClientRect();
+    const dragRect = dragElement.getBoundingClientRect();
+    const scale = typeof calculateScale === "function" ? calculateScale() : 1;
+    if (!dropElement.dataset.dropCount)
+        dropElement.dataset.dropCount = "0";
+    let dropCount = parseInt(dropElement.dataset.dropCount, 10);
+    // === READ DROP ZONE SIZE ===
+    const dropWidth = dropRect.width;
+    const dropHeight = dropRect.height;
+    let targetX, targetY;
+    // ---------------- LANDSCAPE WATERFALL ----------------
+    if (orientation === "landscape" && dropAttr.toLowerCase() === "stackcascade") {
+        console.log("🌄 Landscape waterfall");
+        const shiftX = dropWidth * 0.02; // proportional (5% of width)
+        const shiftY = dropHeight * 0.02; // proportional (5% of height)
+        const startX = dropRect.left + dropWidth * 0.36; // 10% inside
+        const startY = dropRect.top + dropHeight * -0.09; // slightly above
+        targetX = startX + (dropCount * shiftX);
+        targetY = startY + (dropCount * shiftY);
+    }
+    // ---------------- PORTRAIT VERTICAL ----------------
+    else {
+        console.log("📱 Portrait vertical stack");
+        let startX;
+        const stepY = dropHeight * 0.05; // 8% vertical step
+        if (dropElement.id === "unitsDrop") {
+            startX = dropRect.left + dropWidth * 0.4; // special spacing
+        }
+        else if (dropElement.id === "tensDrop") {
+            startX = dropRect.left + dropWidth * 0.25;
+        }
+        else {
+            startX = dropRect.left + dropWidth * 0.16; // normal spacing
+        }
+        const startY = dropRect.top - dropHeight * 0.25; // above start
+        targetX = startX;
+        targetY = startY + (dropCount * stepY);
+    }
+    // ------------ APPLY TRANSFORM SMOOTHLY --------------
+    const dx = (targetX - dragRect.left) / scale;
+    const dy = (targetY - dragRect.top) / scale;
+    dragElement.style.transition = "transform .2s ease-out";
+    dragElement.style.transform = `translate(${dx}px, ${dy}px)`;
+    dropElement.dataset.dropCount = String(dropCount + 1);
+    // reset size
+    dragElement.style.width = "auto";
+    dragElement.style.height = "auto";
+}
+const updateCalculatorAnswer = (el) => {
     const container = document.getElementById(LidoContainer);
     if (!container)
         return;
-    const answerText = container.querySelector('#answer');
-    if (!answerText)
+    const calci = document.querySelector('#lidoCalculator');
+    if (!calci)
         return;
-    const equationAttr = container.getAttribute('equationCheck') || '';
-    const calculatedValue = equationCheck(equationAttr);
-    answerText.setAttribute('string', String(calculatedValue));
+    const value = calci.getAttribute('value');
+    el.setAttribute('string', value);
 };
 
 exports.ActivityScoreKey = ActivityScoreKey;
@@ -69770,6 +69904,7 @@ exports.handleElementClick = handleElementClick;
 exports.handleFloatElementPosition = handleFloatElementPosition;
 exports.handlingChildElements = handlingChildElements;
 exports.initEventsForElement = initEventsForElement;
+exports.matchStringPattern = matchStringPattern;
 exports.nextUrl = nextUrl;
 exports.parseProp = parseProp;
 exports.prevUrl = prevUrl;

package/dist/collection/components/avatar/lido-avatar.js

@@ -78,7 +78,7 @@ export class LidoAvatar {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: 'dc25762d0edf77a71e93ca1cc3ea160a1778858e', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '70c803f3b58d3cd4a4f94f66eab40a7af656ef36', class: "lido-canvas" })));
+        return (h(Host, { key: '8a31ce98213ff51bf7cfc776690b6770bbeae604', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("canvas", { key: '922568310a3be177e3185f86c54df95d16a0e42b', class: "lido-canvas" })));
     }
     static get is() { return "lido-avatar"; }
     static get originalStyleUrls() {

package/dist/collection/components/canvas/lido-canvas.css

@@ -4,7 +4,7 @@
   align-items: center;
 }
 
-.lido-pad {
+.lido-canvas {
   
   background:red;
   border: 2px solid #ccc;
@@ -14,7 +14,7 @@
   overflow: hidden;
   position: relative;
 }
-button {
+#lido-exit-button {
   padding: 6px 14px;
   border: none;
   background:transparent;
@@ -23,14 +23,11 @@ button {
   cursor: pointer;
   font-size: 14px;
   position: relative;
-   top: -44%;   
-  left: 16%;   
+   top: -43%;   
+  left: 18%;   
   z-index: 10;
 }
-#lido-img1{
-  height:50px;
-  width: 60px;
-}
+
 canvas {
   /* flex: 1; */
   touch-action: none;

package/dist/collection/components/canvas/lido-canvas.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { parseProp } from "../../utils/utils";
-export class WritingPad {
+export class LidoCanvas {
     constructor() {
         // Flag to track drawing state
         this.drawing = false;
@@ -86,7 +86,7 @@ export class WritingPad {
         this.loadBackground();
     }
     render() {
-        return (h(Host, { key: '546c916c460a7581d5ecb9c1c5c07d7630cb64c1', id: "lido-canvas", class: "lido-pad", style: this.style }, h("button", { key: 'f0693ce43a33908dcdd833b48b7a849b73b37cc2', onClick: () => this.clearCanvas() }, h("img", { key: 'e3c029b206565ced465a5f1e352b98a11d54d71f', id: "lido-img1", src: "https://cdn-icons-png.flaticon.com/256/458/458595.png", alt: "Clear" })), h("canvas", { key: '1c07d610b7840cdc3f4359539a6d721f50130462', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+        return (h(Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, h("lido-text", { key: '3484c9005819e3d08adf8d36b247d3c45610d0b5', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
     }
     static get is() { return "lido-canvas"; }
     static get encapsulation() { return "shadow"; }