lido-player 0.0.2-beta-18-dev → 0.0.2-beta-19-dev

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/{decode-DUZYNXIv.js → decode-Bny56MQ9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEjUmVtH.js');
+var index = require('./index-BY9fvbr8.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-BEjUmVtH.js → index-BY9fvbr8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-DnqQXD5x.js');
+var index$1 = require('./index-DjsCseV8.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -767,7 +767,7 @@ function animateDragToTarget(dragElement, targetElement, container, transition =
     const dy = dropRect.top - dragRect.top;
     const finalX = currentX + dx * (1 / calculateScale());
     const finalY = currentY + dy * (1 / calculateScale());
-    dragElement.style.transition = 'transform 0.5s ease';
+    dragElement.style.transition = 'transform 1s ease';
     dragElement.style.transform = `translate(${finalX}px, ${finalY}px)`;
 }
 async function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData) {
@@ -1179,14 +1179,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1374,34 +1374,34 @@ function highlightSpeakingElement(element) {
     if (!document.getElementById(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;
-        }
-      }
+        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);
     }
@@ -1640,11 +1640,8 @@ class AudioPlayer {
                     this.resolvePlaybackWait();
                 }
             };
-            this.audioElement.onstalled = () => {
-                if (this.playbackHasStarted) {
-                    this.resolvePlaybackWait();
-                }
-            };
+            // Buffering is temporary: keep waiting for the clip to finish.
+            this.audioElement.onstalled = null;
             this.audioElement.onerror = () => {
                 if (this.playbackHasStarted) {
                     this.resolvePlaybackWait();
@@ -2113,11 +2110,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2126,11 +2123,16 @@ function enableReorderDrag(element) {
                         divEl.remove();
                     });
                 }
+                resetElementStyles(element);
             }
             else {
                 if (element.parentElement['type'] !== 'category') {
-                    executeActions('this.alignMatch=true', divEl, element);
-                    divEl.replaceWith(element);
+                    animateDragToTarget(element, divEl, container);
+                    // executeActions('this.alignMatch=true', divEl, element);
+                    setTimeout(() => {
+                        divEl.replaceWith(element);
+                        resetElementStyles(element);
+                    }, 500);
                 }
                 else {
                     const categoryElement = element.parentElement;
@@ -2149,13 +2151,16 @@ function enableReorderDrag(element) {
                     });
                     optionArea.appendChild(element);
                     element.classList.remove('dropped');
+                    element.classList.remove("category-dropped-onCorrect");
+                    element.classList.remove("category-dropped-onInCorrect");
                     element.removeAttribute('drop-to');
                     if (dummy) {
                         dummy.remove();
                     }
+                    resetElementStyles(element);
                 }
             }
-            resetElementStyles(element);
+            // resetElementStyles(element);
             return;
         }
         if (findMostoverlappedElement(element, 'blank')) {
@@ -2210,6 +2215,8 @@ function enableReorderDrag(element) {
                     resetElementStyles(element);
                     dummy.replaceWith(element);
                     element.classList.remove('dropped');
+                    element.classList.remove("category-dropped-onCorrect");
+                    element.classList.remove("category-dropped-onInCorrect");
                     element.removeAttribute('drop-to');
                 }, 100);
                 return;
@@ -2330,11 +2337,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -2379,8 +2386,34 @@ const wordDropComplete = (block, element) => {
         handleShowCheck();
     }
 };
+const categoryPlayback = new WeakMap();
+const categoriseCompleted = (container) => {
+    const pendingPlayback = categoryPlayback.get(container);
+    if (pendingPlayback)
+        return pendingPlayback;
+    const playback = playCategories(container).finally(() => {
+        categoryPlayback.delete(container);
+    });
+    categoryPlayback.set(container, playback);
+    return playback;
+};
+const playCategories = async (container) => {
+    const allCategoriseBox = container.querySelectorAll('[type="category"]');
+    const audioPlayer = AudioPlayer.getI();
+    for (const categoryBox of Array.from(allCategoriseBox)) {
+        const headingElement = categoryBox.parentElement.children[0];
+        await audioPlayer.play(headingElement);
+        for (const child of Array.from(categoryBox.children)) {
+            child.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end' // Aligns the bottom of the child with the bottom of the container
+            });
+            await audioPlayer.play(child);
+        }
+    }
+};
 async function onDropToCategory(dragElement, categoryElement) {
-    dragElement.classList.add('dropped');
+    // dragElement.classList.add('dropped');
     let dragSelected = buildDragSelectedMapFromDOM();
     let elementArr = dragSelected[categoryElement.getAttribute('tab-index')];
     if (Array.isArray(elementArr)) {
@@ -73006,11 +73039,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -73234,6 +73267,8 @@ async function onActivityComplete(dragElement, dropElement) {
         // storingEachActivityScore(isCorrect);
         if (isCorrect) {
             if (dropElement.getAttribute('type') === "category") {
+                dragElement.classList.remove("category-dropped-onInCorrect");
+                dragElement.classList.add("category-dropped-onCorrect");
                 gameScore.rightMoves += 1;
                 console.log("Right Moves : ", gameScore.rightMoves);
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
@@ -73251,9 +73286,33 @@ async function onActivityComplete(dragElement, dropElement) {
         }
         else {
             if (dropElement.getAttribute('type') === "category") {
+                dragElement.classList.remove("category-dropped-onCorrect");
+                dragElement.classList.add("category-dropped-onInCorrect");
                 gameScore.wrongMoves += 1;
                 console.log("Right Moves : ", gameScore.rightMoves);
                 console.log("Wrong Moves : ", gameScore.wrongMoves);
+                const categorizeArea = container.querySelector(`[type="optionArea"]`);
+                const sameElArr = Array.from(container.querySelectorAll(`[value="${dragElement.getAttribute('value')}"]`));
+                sameElArr.find(el => el !== dragElement && el.tagName === 'DIV');
+                setTimeout(() => {
+                    const dummyEl = document.createElement("div");
+                    dummyEl.style.width = dragElement.offsetWidth + "px";
+                    dummyEl.style.height = dragElement.offsetHeight + "px";
+                    categorizeArea.appendChild(dummyEl);
+                    const dragX = dragElement.offsetLeft;
+                    const dragY = dragElement.offsetTop;
+                    dragElement.style.position = "absolute";
+                    dragElement.style.transition = '';
+                    dragElement.style.transform = `translate(${dragX}px, ${dragY}px)`;
+                    animateDragToTarget(dragElement, dummyEl, container);
+                    setTimeout(() => {
+                        dummyEl.replaceWith(dragElement);
+                        resetElementStyles(dragElement);
+                        dragElement.classList.remove("category-dropped-onInCorrect");
+                        dragElement.classList.remove("dropped");
+                        dragElement.removeAttribute("drop-to");
+                    }, 1000);
+                }, 2000);
             }
             const onInCorrect = dropElement.getAttribute('onInCorrect');
             if (onInCorrect && !isBlender) {
@@ -73348,7 +73407,8 @@ const storeActivityScore = (score) => {
         ACTIVYTY_TIME_SPEND_ARRAY.length = 0;
     }
 };
-const handleShowCheck = () => {
+const pendingCategoryChecks = new WeakSet();
+const handleShowCheck = async () => {
     var _a, _b, _c;
     const container = document.getElementById(LidoContainer);
     const objectiveString = container['objective'];
@@ -73363,7 +73423,20 @@ const handleShowCheck = () => {
         (_b = checkButton === null || checkButton === void 0 ? void 0 : checkButton.classList) === null || _b === void 0 ? void 0 : _b.remove('lido-disable-check-button');
     }
     else {
-        if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && !container.querySelector("[type='category']") && ((_c = container.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== DropMode.EnableAnimation.toLowerCase()) {
+        if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && ((_c = container.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== DropMode.EnableAnimation.toLowerCase()) {
+            if (container.querySelector("[type='category']")) {
+                if (pendingCategoryChecks.has(container))
+                    return;
+                pendingCategoryChecks.add(container);
+                try {
+                    await categoriseCompleted(container);
+                    await validateObjectiveStatus();
+                }
+                finally {
+                    pendingCategoryChecks.delete(container);
+                }
+                return;
+            }
             validateObjectiveStatus();
         }
     }

package/dist/cjs/{index-DnqQXD5x.js → index-DjsCseV8.js}

@@ -22,10 +22,10 @@ const NAMESPACE = 'lido-player';
 const BUILD = /* lido-player */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\r\n    height 25ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}";
+const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\n    180deg,\n    rgba(255, 235, 59, 0.95),\n    rgba(255, 214, 0, 0.95)\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\n    height 25ms ease-out,\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
 
 /*
- Stencil Client Platform v4.44.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.45.1 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -1089,7 +1089,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       if (idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
-          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         } else {
           patch(elmToMove, newStartVnode, isInitialRender);
           oldCh[idxInOld] = void 0;
@@ -1697,21 +1697,26 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 }
                 return;
               }
-              const setterSetVal = () => {
+              const parsedValue = parsePropertyValue(
+                newValue,
+                memberFlags);
+              const setterSetVal = (val) => {
                 const currentValue = ref.$lazyInstance$[memberName];
                 if (!ref.$instanceValues$.get(memberName) && currentValue) {
                   ref.$instanceValues$.set(memberName, currentValue);
                 }
-                ref.$lazyInstance$[memberName] = parsePropertyValue(
-                  newValue,
-                  memberFlags);
+                ref.$lazyInstance$[memberName] = val;
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
-                setterSetVal();
+                setterSetVal(parsedValue);
               } else {
+                ref.$instanceValues$.set(memberName, parsedValue);
                 ref.$fetchedCbList$.push(() => {
-                  setterSetVal();
+                  const pendingValue = ref.$instanceValues$.get(memberName);
+                  if (ref.$lazyInstance$[memberName] !== pendingValue) {
+                    setterSetVal(pendingValue);
+                  }
                 });
               }
             }
@@ -1770,8 +1775,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
           if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
+          const currentValue = propMemberFlags & 4096 /* Setter */ ? hostRef.$instanceValues$.get(propName) : this[propName];
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != currentValue && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BEjUmVtH.js');
-require('./index-DnqQXD5x.js');
+var index = require('./index-BY9fvbr8.js');
+require('./index-DjsCseV8.js');