lido-player 0.0.2-beta-15-dev → 0.0.2-beta-17

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-Xh5IDmFh.js → decode-BPWgujpW.js}

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

package/dist/cjs/{index-B9AON0kM.js → index-BnfJD-Dp.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-var index$1 = require('./index-Dy19zuTX.js');
+var index$1 = require('./index-CACb9dlg.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
+const AnimationVanishedValuesKey = 'data-animation-vanished-values';
 const ActivityScoreKey = 'lidoActivityScore';
 const ActivityEndKey = 'lidoActivityEnd';
 const LessonEndKey = 'lidoLessonEnd';
@@ -260,11 +261,20 @@ function balanceResult(container, objectiveString) {
     return res;
 }
 
-const tempVanishedValues = [];
+const readVanishedValues = (container) => {
+    var _a;
+    try {
+        const values = JSON.parse((_a = container.getAttribute(AnimationVanishedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
+        return Array.isArray(values) ? values : [];
+    }
+    catch (_b) {
+        return [];
+    }
+};
 function dragDropAnimation(container, dragElement, dropElement) {
     container.style.pointerEvents = "none";
     setTimeout(async () => {
-        var _a, _b, _c;
+        var _a, _b;
         const div = document.createElement('div');
         container.append(div);
         div.classList.add('after-drop-popup-container');
@@ -273,10 +283,11 @@ function dragDropAnimation(container, dragElement, dropElement) {
         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();
+        const vanishedValues = readVanishedValues(container);
+        const vanishedValue = (_a = dragElement.getAttribute('value')) !== null && _a !== void 0 ? _a : (_b = dragElement.textContent) === null || _b === void 0 ? void 0 : _b.trim();
         if (vanishedValue) {
-            tempVanishedValues.push(vanishedValue);
+            vanishedValues.push(vanishedValue);
+            container.setAttribute(AnimationVanishedValuesKey, JSON.stringify(vanishedValues));
         }
         // Remove from old parents
         if (allSameParent) {
@@ -294,9 +305,10 @@ function dragDropAnimation(container, dragElement, dropElement) {
         div.appendChild(dropElement);
         dropElement.classList.remove('empty');
         const objective = container.getAttribute('objective');
+        const normalizedVanishedValues = vanishedValues.map(v => v.trim()).sort().join(',');
+        const normalizedObjective = objective === null || objective === void 0 ? void 0 : objective.split(',').map(v => v.trim()).sort().join(',');
         const isObjectiveComplete = !!objective &&
-            tempVanishedValues.map(v => v.trim()).sort().join(',') ===
-                objective.split(',').map(v => v.trim()).sort().join(',');
+            normalizedVanishedValues === normalizedObjective;
         if (dropElement.getAttribute('type') === 'drop') {
             const dropOnCorrect = dropElement.getAttribute('onCorrect') || '';
             await executeActions(dropOnCorrect, dropElement, dragElement);
@@ -309,15 +321,22 @@ function dragDropAnimation(container, dragElement, dropElement) {
         dropElement.classList.remove('zoom-fade-in');
         dragElement.classList.add('zoom-fade-out');
         dropElement.classList.add('zoom-fade-out');
-        setTimeout(() => {
+        const cleanup = () => {
             div.remove();
             container.style.pointerEvents = 'auto';
             if (isObjectiveComplete) {
                 calculateScore();
                 triggerNextContainer();
-                tempVanishedValues.length = 0;
+                container.removeAttribute(AnimationVanishedValuesKey);
             }
-        }, 800); // match animation duration
+        };
+        const templateId = (container.getAttribute('template-id') || '').toLowerCase();
+        if (templateId === 'letterpairing' || templateId === 'numberpair') {
+            cleanup();
+        }
+        else {
+            setTimeout(cleanup, 800); // match animation duration
+        }
     }, 250);
 }
 
@@ -1140,14 +1159,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);
     }
@@ -1335,34 +1354,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);
     }
@@ -1427,9 +1446,18 @@ function highlightElement() {
 }
 
 class AudioPlayer {
+    resolvePlaybackWait() {
+        if (!this.endPromiseResolve) {
+            return;
+        }
+        const resolve = this.endPromiseResolve;
+        this.endPromiseResolve = null;
+        resolve();
+    }
     constructor() {
         this.currentTargetElement = null;
         this.pendingReplayElement = null;
+        this.playbackHasStarted = false;
         this.highlightOverlay = null;
         this.wordRects = [];
         this.activeWordIndex = -1;
@@ -1487,15 +1515,12 @@ class AudioPlayer {
             window.speechSynthesis.cancel();
         }
         // Resolve any pending "ended" wait so callers can continue.
-        if (this.endPromiseResolve) {
-            const resolve = this.endPromiseResolve;
-            this.endPromiseResolve = null;
-            resolve();
-        }
+        this.resolvePlaybackWait();
         if (!preserveReplay) {
             this.pendingReplayElement = null;
         }
         this.currentTargetElement = null;
+        this.playbackHasStarted = false;
         this.audioElement.pause();
         this.audioElement.currentTime = 0;
         this.audioElement.src = '';
@@ -1533,6 +1558,7 @@ class AudioPlayer {
     }
     async play(targetElement) {
         this.registerVisibilityEvents();
+        this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
             this.pendingReplayElement = targetElement;
             await this.stop(true);
@@ -1586,6 +1612,24 @@ class AudioPlayer {
         if (audioUrl) {
             audioUrl = convertUrlToRelative(audioUrl);
             this.audioElement.src = audioUrl;
+            this.audioElement.onplaying = () => {
+                this.playbackHasStarted = true;
+            };
+            this.audioElement.onpause = () => {
+                if (this.playbackHasStarted && !this.audioElement.ended) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onstalled = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onerror = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
             try {
                 // setDraggingDisabled(true);
                 const language = container.getAttribute('Lang') || 'en';
@@ -1615,10 +1659,7 @@ class AudioPlayer {
                 await new Promise(resolve => {
                     this.endPromiseResolve = resolve;
                     this.audioElement.onended = () => {
-                        if (this.endPromiseResolve === resolve) {
-                            this.endPromiseResolve = null;
-                        }
-                        resolve();
+                        this.resolvePlaybackWait();
                     };
                 });
             }
@@ -2052,11 +2093,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);
@@ -2269,11 +2310,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');
@@ -2340,6 +2381,12 @@ async function onDropToCategory(dragElement, categoryElement) {
 }
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
+const syncSlideOrder = (container) => {
+    const slideOrder = Array.from(container.querySelectorAll("[type='slide']"))
+        .map(item => item['value']);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
+    return slideOrder;
+};
 const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -2400,6 +2447,9 @@ function slidingWithScaling(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    // Slide activities can start in the correct order. Keep their initial DOM
+    // order available to the Next/check validation before the first swap occurs.
+    syncSlideOrder(container);
     const onStart = (event) => {
         removeHighlight(element);
         isDragging = true;
@@ -2573,15 +2623,8 @@ function slidingWithScaling(element) {
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
 const slideCompleted = (slideElement) => {
-    var _a;
     const container = document.getElementById(LidoContainer);
-    const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-    const allSlideElements = document.querySelectorAll("[type='slide']");
-    let index = 0;
-    allSlideElements.forEach(item => {
-        slideArr[index++] = item['value'];
-    });
-    container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
+    const slideArr = syncSlideOrder(container);
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
     const elementIndex = slideArr.indexOf(slideElement['value']);
@@ -3945,6 +3988,14 @@ function addClickListenerForClickType(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    const isBubbleTypeKeyboardKey = (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'bubbleType' &&
+        element.closest('lido-keyboard') !== null;
+    // BubbleType manages key clicks and audio in lido-keyboard.tsx directly.
+    // Letting the generic click handler attach here creates a competing stop/play
+    // path that can interrupt the first bubble audio.
+    if (isBubbleTypeKeyboardKey) {
+        return;
+    }
     element.style.cursor = 'pointer';
     if (!element) {
         console.error('No element provided.');
@@ -72033,27 +72084,24 @@ const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 /* ------------------ animation ------------------ */
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, container) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
-      }`;
-        const styleSheet = document.styleSheets[0];
-        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
-        activeCell.style.animation = `widthDecrease 0s`;
-        activeCell.addEventListener("animationend", () => {
-            activeCell.remove();
+        let removed = false;
+        const removeActiveCell = () => {
+            if (removed)
+                return;
+            removed = true;
+            if (activeCell.isConnected) {
+                activeCell.remove();
+            }
             // Trigger next container only after the last calculate cell is removed
             const remainingCalculateTypes = container.querySelectorAll("[type='calculate']");
             if (remainingCalculateTypes.length === 0) {
                 setTimeout(() => triggerNextContainer(), 2000);
             }
             resolve();
-        }, { once: true });
+        };
+        // Nimble uses a zero-duration removal; remove synchronously so progression
+        // does not depend on a browser animationend event.
+        removeActiveCell();
     });
 };
 /* ------------------ PRACTICE MODE ------------------ */
@@ -72867,11 +72915,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;
@@ -73070,6 +73118,7 @@ const calculateScore = () => {
     gameScore.totalRightMovesCount += rightMoves;
     gameScore.totalWrongMovesCount += wrongMoves;
     let finalScore = Math.floor((rightMoves / (rightMoves + wrongMoves)) * 100);
+    console.log('[Activity Score]', { rightMoves, wrongMoves, activityScore: finalScore });
     storeActivityScore(finalScore);
     gameScore.rightMoves = 0;
     gameScore.wrongMoves = 0;
@@ -73178,7 +73227,7 @@ const storeActivityScore = (score) => {
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
     // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } })); 
-    const actualActivitySeconds = Math.ceil(Timer.getI().getElapsed() / 1000);
+    const actualActivitySeconds = Number((Timer.getI().getElapsed() / 1000).toFixed(1));
     ACTIVYTY_TIME_SPEND_ARRAY.push(actualActivitySeconds);
     console.log(`[Utils][Activity Time] Activity ${index + 1}/${totalIndex} - Time spent: ${actualActivitySeconds}s`);
     const lessonTrackingParams = getLessonTrackingParams();
@@ -73190,7 +73239,7 @@ const storeActivityScore = (score) => {
         gameScore.finalScore = Math.floor(finalScore);
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
-        const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
+        const timeSpendForLesson = Number(ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0).toFixed(1));
         console.log(`[Utils][Lesson Time] Total lesson time spent: ${timeSpendForLesson}s`);
         dispatchLessonEndEvent(totalIndex, gameScore.totalRightMovesCount, gameScore.totalWrongMovesCount, finalScore, timeSpendForLesson, lessonTrackingParams);
         gameScore.totalRightMovesCount = 0;

package/dist/cjs/{index-Dy19zuTX.js → index-CACb9dlg.js}

@@ -22,7 +22,7 @@ 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 = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.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}";
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-B9AON0kM.js');
-require('./index-Dy19zuTX.js');
+var index = require('./index-BnfJD-Dp.js');
+require('./index-CACb9dlg.js');