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

package/dist/cjs/{utils-28faa755.js → utils-b13cba29.js}

@@ -55,6 +55,60 @@ const nextUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/publ
 const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/audio.png';
 const fingerUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
 
+class Timer {
+    constructor() {
+        this.startTime = 0;
+        this.elapsedTime = 0;
+        this.intervalId = null;
+    }
+    static getI(onTick) {
+        if (!Timer.instance) {
+            Timer.instance = new Timer();
+        }
+        if (onTick) {
+            Timer.instance.onTick = onTick;
+        }
+        return Timer.instance;
+    }
+    start() {
+        if (this.intervalId)
+            return;
+        this.startTime = Date.now() - this.elapsedTime;
+        this.intervalId = window.setInterval(() => {
+            var _a;
+            this.elapsedTime = Date.now() - this.startTime;
+            (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, this.elapsedTime);
+        }, 1000);
+    }
+    pause() {
+        if (!this.intervalId)
+            return;
+        clearInterval(this.intervalId);
+        this.intervalId = null;
+        this.elapsedTime = Date.now() - this.startTime;
+    }
+    resume() {
+        if (this.intervalId)
+            return;
+        this.start();
+    }
+    stop() {
+        var _a;
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        this.startTime = 0;
+        this.elapsedTime = 0;
+        (_a = this.onTick) === null || _a === void 0 ? void 0 : _a.call(this, 0);
+    }
+    getElapsed() {
+        return this.intervalId
+            ? Date.now() - this.startTime
+            : this.elapsedTime;
+    }
+}
+
 function dispatchCustomEvent(eventName, detail) {
     console.log("👍Event Name : ", eventName, "Detail : ", detail.toString());
     const event = new CustomEvent(eventName, { detail });
@@ -64,7 +118,7 @@ function dispatchActivityEndEvent(index, totalIndex, score) {
     dispatchCustomEvent(ActivityEndKey, { index, totalIndex, score });
 }
 function dispatchLessonEndEvent(score) {
-    dispatchCustomEvent(LessonEndKey, { score });
+    dispatchCustomEvent(LessonEndKey, { score, timeSpent: Math.floor(Timer.getI().getElapsed() / 1000) });
 }
 function dispatchNextContainerEvent() {
     dispatchCustomEvent(NextContainerKey, {});
@@ -120,7 +174,7 @@ function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -152,18 +206,15 @@ function calculateValue(elements, operation) {
     }
 }
 function balanceResult(container, objectiveString) {
-    var _a, _b, _c, _d, _e, _f;
     const additionalCheck = container.getAttribute('equationCheck');
     if (!additionalCheck)
         return false;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return false;
-    const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
-    const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal);
-    const hasRight = !isNaN(rightVal);
-    if (!hasLeft || !hasRight) {
+    const leftVal = balanceEl.leftVal;
+    const rightVal = balanceEl.rightVal;
+    if (leftVal == null || rightVal == null) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
@@ -291,6 +342,7 @@ function enableDraggingWithScaling(element) {
     handlingElementFlexibleWidth(element, 'drag');
     const onStart = (event) => {
         var _a, _b;
+        console.log("moving start");
         if (isDraggingDisabled) {
             isDragging = false;
             return;
@@ -434,22 +486,24 @@ function enableDraggingWithScaling(element) {
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                 if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                    if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                        otherElement.style.opacity = '0';
+                    if (otherElement) {
+                        otherElement.style.opacity = "0.3";
                     }
                 }
             }
             else {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
-                    otherElement.style.opacity = '1';
+                if (otherElement) {
+                    otherElement.style.opacity = "1";
                 }
             }
         });
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
-            if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') ;
+            if (mostOverlappedElement.tagName.toLowerCase() === 'lido-text') {
+                // mostOverlappedElement.style.border = '2px dashed #ff0000'; // Red dashed border
+                // mostOverlappedElement.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // Light red background
+                mostOverlappedElement.style.opacity = "0.3";
+            }
             else {
                 if (!document.getElementById('unitsDrop') || !document.getElementById('tensDrop') || !document.getElementById('hundredsDrop')) {
                     mostOverlappedElement.style.opacity = '0.3';
@@ -485,9 +539,8 @@ function enableDraggingWithScaling(element) {
                 const storedTabIndexes = Object.keys(dropObject).map(Number);
                 if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                     if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                        if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                            otherElement.style.opacity = '0';
+                        if (otherElement) {
+                            otherElement.style.opacity = "0";
                         }
                         else {
                             otherElement.style.opacity = '1';
@@ -495,9 +548,8 @@ function enableDraggingWithScaling(element) {
                     }
                 }
                 else {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                    if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
-                        otherElement.style.opacity = '1';
+                    if (otherElement) {
+                        otherElement.style.opacity = "1";
                     }
                 }
             });
@@ -548,6 +600,7 @@ function enableDraggingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener('click', ev => {
         if (isClicked) {
+            console.log("clicked drag elkement");
             onClickDropOrDragElement(element, 'drag');
         }
     });
@@ -675,18 +728,14 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
         const storedTabIndexes = Object.keys(dropObject).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                    otherElement.style.opacity = '0';
-                    otherElement.style.backgroundColor = 'transparent';
+                if (otherElement.tagName.toLowerCase() === 'lido-text') {
+                    otherElement.style.opacity = "0";
                 }
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-            if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                otherElement.style.opacity = '1';
-                otherElement.style.backgroundColor = 'transparent';
+            if (otherElement) {
+                otherElement.style.opacity = "1";
             }
         }
     });
@@ -704,11 +753,14 @@ async function onElementDropComplete(dragElement, dropElement) {
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData);
     }
-    const dropTabIndex = dropElement.getAttribute('tab-index');
-    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;
+    let dropTabIndex;
+    if (dropElement) {
+        dropTabIndex = dropElement.getAttribute('tab-index');
+        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;
+        }
     }
     const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
     if (isAllowOnlyCorrect) {
@@ -741,7 +793,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             dragElement.style.transition = 'transform 0.5s ease';
             animateDragToTarget(dragElement, dropElement, container);
             const onInCorrect = dropElement.getAttribute('onInCorrect');
-            console.log("onincorrectttt", onInCorrect);
             await executeActions(onInCorrect, dropElement, dragElement);
             setTimeout(() => {
                 dragElement.style.transform = 'translate(0, 0)';
@@ -848,15 +899,13 @@ async function onElementDropComplete(dragElement, dropElement) {
                         const storedTabIndexes = Object.keys(dropObject).map(Number);
                         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                                if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                                if (otherElement) {
                                     otherElement.style.opacity = '0';
                                 }
                             }
                         }
                         else {
-                            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                            if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
+                            if (otherElement) {
                                 otherElement.style.opacity = '1';
                             }
                         }
@@ -982,8 +1031,9 @@ async function onClickDropOrDragElement(element, type) {
     element.ariaPressed = 'true';
     const selectedDropElement = type === 'drop' ? element : document.querySelector("[type='drop'].highlight-element");
     const selectedDragElement = type === 'drag' ? element : document.querySelector("[type='drag'].highlight-element");
-    if (!selectedDropElement) {
+    if (!selectedDropElement || element.classList.contains("dropped")) {
         onClickDragElement(element);
+        return;
     }
     if (selectedDropElement && selectedDragElement) {
         if (selectedDragElement.getAttribute('drop-to'))
@@ -1196,6 +1246,9 @@ function highlightElement() {
 
 class AudioPlayer {
     constructor() {
+        this.handleUserClick = () => {
+            this.stop();
+        };
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
@@ -1232,6 +1285,10 @@ class AudioPlayer {
         catch (e) {
             console.error('Error stopping audio before speak action:', e);
         }
+        const text = targetElement.closest('lido-text');
+        if (text && text.getAttribute('disable-speak') === 'true') {
+            return;
+        }
         // then play the target element audio.
         let audioUrl = targetElement.getAttribute('audio') || '';
         // If no direct audio attribute, check childrens for audio
@@ -1252,6 +1309,7 @@ class AudioPlayer {
             try {
                 setDraggingDisabled(true);
                 highlightSpeakingElement(targetElement);
+                // window.addEventListener('click', this.handleUserClick, true);
                 await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
@@ -1263,6 +1321,7 @@ class AudioPlayer {
                 console.log('🎧 Audio play error:', error);
             }
             finally {
+                window.removeEventListener('click', this.handleUserClick, true);
                 this.audioElement.onended = null; // cleanup
                 setDraggingDisabled(false);
                 stopHighlightForSpeakingElement(targetElement);
@@ -1272,6 +1331,7 @@ class AudioPlayer {
         else if (targetElement.textContent) {
             try {
                 highlightSpeakingElement(targetElement);
+                window.addEventListener('click', this.handleUserClick, true);
                 await speakText(targetElement.textContent, targetElement);
                 const highlightedElements = document.querySelectorAll('.speaking-highlight');
                 highlightedElements.forEach(element => stopHighlightForSpeakingElement(element));
@@ -3182,9 +3242,9 @@ function onTouchListenerForOnTouch(element) {
         return;
     const container = document.getElementById('lido-container');
     // const container = element.closest('lido-container') as HTMLElement;
-    if (container && container.getAttribute('disable-speak') === 'true') {
-        return;
-    }
+    // if (container && container.getAttribute('disable-speak') === 'true') {
+    //   return;
+    // }
     // if (element.closest('[disableSpeak="true"]')) {
     //   return;
     // }
@@ -3193,6 +3253,9 @@ function onTouchListenerForOnTouch(element) {
     let onholdTriggered = false;
     const onholdTime = 1000;
     const playAudio = async () => {
+        if (container && container.getAttribute('disable-speak') === 'true') {
+            return;
+        }
         onholdTriggered = true;
         setDraggingDisabled(true);
         await AudioPlayer.getI().play(element);
@@ -3233,6 +3296,7 @@ function addClickListenerForClickType(element) {
     }
     const onClick = async () => {
         var _a;
+        const container = document.getElementById(LidoContainer);
         const lido_buttons = element.getAttribute('id');
         if (lido_buttons === 'lido-arrow-left' || lido_buttons === 'lido-arrow-right') {
             return;
@@ -3242,7 +3306,6 @@ function addClickListenerForClickType(element) {
         if (hasValidAudio) {
             AudioPlayer.getI().stop();
         }
-        const container = document.getElementById(LidoContainer);
         const objective = container['objective'].split(',');
         const checkButton = document.querySelector('#lido-checkButton');
         const showCheck = container.getAttribute('show-check') === 'true';
@@ -3259,12 +3322,13 @@ function addClickListenerForClickType(element) {
             container.setAttribute(SelectedValuesKey, JSON.stringify([element['value']]));
             const isCorrect = objective.includes(element['value']);
             dispatchClickEvent(element, isCorrect);
-            if (isCorrect) {
+            if (isCorrect || container.getAttribute('is-continue-on-correct') === 'false') {
                 const onCorrect = element.getAttribute('onCorrect');
-                if (!(element.id && element.id.startsWith('key-button'))) {
-                    element.style.pointerEvents = 'none';
-                }
-                document.body.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 {
@@ -3273,12 +3337,14 @@ function addClickListenerForClickType(element) {
                 // showWrongAnswerAnimation([element]);
             }
             // const calciEl=document.querySelector('#lidoCalculator') as any; 
-            const isInsideCalculator = element.closest('#lidoCalculator') !== null;
-            if (!isInsideCalculator) {
-                storingEachActivityScore(isCorrect);
-            }
+            // const isInsideCalculator = element.closest('#lidoCalculator') !== null;
+            // if(!isInsideCalculator){ 
+            // storingEachActivityScore(isCorrect);
+            // }
             highlightElement();
-            handleShowCheck();
+            if (!container.getAttribute("click-completed")) {
+                handleShowCheck();
+            }
             return;
         }
         if (showCheck) {
@@ -68720,6 +68786,7 @@ const executeActions = async (actionsString, thisElement, element) => {
                     const container = document.getElementById(LidoContainer);
                     if (container.getAttribute('is-continue-on-correct') !== 'true') {
                         targetElement.style.pointerEvents = 'none';
+                        AudioPlayer.getI().stop();
                     }
                     await validateObjectiveStatus();
                     break;
@@ -68887,7 +68954,7 @@ const executeActions = async (actionsString, thisElement, element) => {
             }
         }
     }
-    body.style.pointerEvents = 'auto';
+    // body.style.pointerEvents = 'auto';
 };
 const afterDropDragHandling = (dragElement, dropElement) => {
     const container = document.getElementById(LidoContainer);
@@ -68951,7 +69018,7 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 100);
+        }, 700);
     }
 };
 // function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
@@ -69135,18 +69202,14 @@ async function onActivityComplete(dragElement, dropElement) {
         const storedTabIndexes = Object.keys(dragScore).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-                if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                    otherElement.style.opacity = '0';
-                    otherElement.style.backgroundColor = 'transparent';
+                if (otherElement) {
+                    otherElement.style.opacity = "0";
                 }
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') ;
-            if (otherElement.tagName.toLowerCase() === 'lido-image') {
+            if (otherElement.tagName.toLowerCase() === 'lido-text') {
                 otherElement.style.opacity = '1';
-                otherElement.style.backgroundColor = 'transparent';
             }
         }
     });
@@ -69179,6 +69242,7 @@ const storeActivityScore = (score) => {
 const handleShowCheck = () => {
     var _a, _b;
     const container = document.getElementById(LidoContainer);
+    container.setAttribute("click-completed", "true");
     const objectiveString = container['objective'];
     const selectValues = (_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '';
     const checkButton = document.querySelector('#lido-checkButton');
@@ -69206,7 +69270,6 @@ const handleShowCheck = () => {
         validateObjectiveStatus();
     }
 };
-const body = document.body;
 let res;
 const validateObjectiveStatus = async () => {
     var _a, _b;
@@ -69272,6 +69335,7 @@ const validateObjectiveStatus = async () => {
         const onCorrect = container.getAttribute('onCorrect');
         if (!isContinueOnCorrect) {
             await calculateScore();
+            storingEachActivityScore(false);
             await executeActions(onCorrect, container);
             triggerNextContainer();
         }
@@ -69279,6 +69343,7 @@ const validateObjectiveStatus = async () => {
             const onInCorrect = container.getAttribute('onInCorrect');
             storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
+            container.removeAttribute("click-completed");
         }
     }
 };
@@ -69947,6 +70012,7 @@ exports.PrevContainerKey = PrevContainerKey;
 exports.RiveService = RiveService;
 exports.SelectedValuesKey = SelectedValuesKey;
 exports.TemplateID = TemplateID;
+exports.Timer = Timer;
 exports.attachSpeakIcon = attachSpeakIcon;
 exports.calculateScale = calculateScale;
 exports.calculateScore = calculateScore;

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

@@ -3,6 +3,7 @@ import { convertUrlToRelative, initEventsForElement, calculateScale } from "../.
 import i18next from "../../utils/i18n";
 import { highlightElement } from "../../utils/utilsHandlers/highlightHandler";
 import { TemplateID } from "../../utils/constants";
+import { Timer } from "../../utils/utilsHandlers/timer";
 /**
  * @component LidoContainer
  *
@@ -12,7 +13,7 @@ import { TemplateID } from "../../utils/constants";
  */
 export class LidoContainer {
     constructor() {
-        this.locale = '';
+        this.Lang = '';
         this.showDropBorder = true;
         this.appendToDropOnCompletion = false;
         this.id = '';
@@ -65,13 +66,13 @@ export class LidoContainer {
     }
     resolveInstructionAudio() {
         var _a;
-        this.instructName =
-            (_a = {
-                flashcard: "Review the flashcards to reinforce your learning." /* templateAudio.flashcards */,
-                mcq: "Select the correct answer from the options provided." /* templateAudio.mcq */,
-                tracing: "Trace the shape by following the outline carefully." /* templateAudio.tracing */,
-                dragAndDrop: "Match the items by dragging and dropping them into the correct places." /* templateAudio.dragAndDrop */,
-            }[this.templateId]) !== null && _a !== void 0 ? _a : '';
+        const key = (_a = {
+            flashcard: "instruction.flashcards" /* templateAudio.flashcards */,
+            mcq: "instruction.mcq" /* templateAudio.mcq */,
+            tracing: "instruction.tracing" /* templateAudio.tracing */,
+            dragAndDrop: "instruction.dragAndDrop" /* templateAudio.dragAndDrop */,
+        }[this.templateId]) !== null && _a !== void 0 ? _a : '';
+        this.instructName = key ? i18next.t(key) : '';
         const home = document.querySelector('lido-home');
         if (!home)
             return;
@@ -84,16 +85,16 @@ export class LidoContainer {
     resolveLanguage() {
         var _a, _b;
         const rootEl = this.el.closest('lido-root');
-        const rootLang = (rootEl === null || rootEl === void 0 ? void 0 : rootEl.locale) || '';
+        const rootLang = (rootEl === null || rootEl === void 0 ? void 0 : rootEl.Lang) || '';
         if (rootLang === null || rootLang === void 0 ? void 0 : rootLang.trim())
             return rootLang;
         const homeEl = this.el.closest('lido-home');
-        const homeLang = (homeEl === null || homeEl === void 0 ? void 0 : homeEl.locale) || '';
+        const homeLang = (homeEl === null || homeEl === void 0 ? void 0 : homeEl.Lang) || '';
         if (homeLang === null || homeLang === void 0 ? void 0 : homeLang.trim())
             return homeLang;
-        if ((_a = this.locale) === null || _a === void 0 ? void 0 : _a.trim())
-            return this.locale;
-        const xmlLang = this.el.getAttribute('locale');
+        if ((_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim())
+            return this.Lang;
+        const xmlLang = this.el.getAttribute('Lang');
         if (xmlLang === null || xmlLang === void 0 ? void 0 : xmlLang.trim())
             return xmlLang;
         return (_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim();
@@ -165,7 +166,7 @@ export class LidoContainer {
         i18next.changeLanguage(appliedLang);
         const texts = this.el.querySelectorAll('lido-text');
         texts.forEach((textEl) => {
-            textEl.locale = appliedLang;
+            textEl.Lang = appliedLang;
             textEl.dispatchEvent(new CustomEvent('languageChanged', { bubbles: true }));
         });
     }
@@ -204,12 +205,14 @@ export class LidoContainer {
         setTimeout(() => {
             highlightElement();
         }, 100);
+        Timer.getI().start();
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
         window.removeEventListener('load', () => this.scaleContainer(this.el));
         document.body.style.backgroundColor = '';
         document.body.style.backgroundImage = '';
+        Timer.getI().stop();
     }
     render() {
         // Define the styles for the container element
@@ -223,7 +226,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: 'bdae7c7d24046fc0f726668b9b1bbb84f3ddd3dd', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, h("lido-text", { key: 'aa5d73493b429f0d99c5737aed89488c565e1699', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'd251b1fed4468aabd66a6f6c14b3de234329ab64' })));
+        return (h(Host, { key: 'b2b35ac6c3be99cabf0eeaf2708611bfd4c3360c', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak, "template-id": this.templateId, audio: this.audio }, h("lido-text", { key: 'ebd91c0603caa4e52d583dd86a1692b57b99afb4', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '76f7f53558af814bbd0ce4516b80d4fa970e3c48' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -238,7 +241,7 @@ export class LidoContainer {
     }
     static get properties() {
         return {
-            "locale": {
+            "Lang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -252,7 +255,7 @@ export class LidoContainer {
                     "tags": [],
                     "text": "Language to apply to all texts"
                 },
-                "attribute": "locale",
+                "attribute": "lang",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -947,7 +950,7 @@ export class LidoContainer {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "locale",
+                "propName": "Lang",
                 "methodName": "languageChanged"
             }];
     }

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

@@ -111,7 +111,7 @@ export class LidoHome {
         this.commonAudioPath = "";
         this.showNav = true;
         this.activeContainerIndexes = [];
-        this.locale = '';
+        this.Lang = '';
         this.xmlData = '';
         this.initialIndex = 0;
         this.canplay = true;
@@ -543,7 +543,7 @@ export class LidoHome {
                 },
                 "defaultValue": "[]"
             },
-            "locale": {
+            "Lang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -557,7 +557,7 @@ export class LidoHome {
                     "tags": [],
                     "text": "Language to apply to all texts"
                 },
-                "attribute": "locale",
+                "attribute": "lang",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -768,7 +768,7 @@ export class LidoHome {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "locale",
+                "propName": "Lang",
                 "methodName": "onLangChange"
             }, {
                 "propName": "commonAudioPath",

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

@@ -9,7 +9,7 @@ import i18next from "../../utils/i18n";
  */
 export class LidoRoot {
     constructor() {
-        this.locale = '';
+        this.Lang = '';
         this.xmlPath = '';
         this.initialIndex = 0;
         this.margin = '';
@@ -26,7 +26,7 @@ export class LidoRoot {
      * It fetches the XML data from the specified path or URL and sets it to the component's state.
      */
     connectedCallback() {
-        this.setLanguage(this.locale);
+        this.setLanguage(this.Lang);
     }
     onLangChange(newLang) {
         this.setLanguage(newLang);
@@ -80,7 +80,7 @@ export class LidoRoot {
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
-            "locale": {
+            "Lang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -94,7 +94,7 @@ export class LidoRoot {
                     "tags": [],
                     "text": "Language to apply to all texts"
                 },
-                "attribute": "locale",
+                "attribute": "lang",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -265,7 +265,7 @@ export class LidoRoot {
     }
     static get watchers() {
         return [{
-                "propName": "locale",
+                "propName": "Lang",
                 "methodName": "onLangChange"
             }];
     }