lido-player 0.0.2-alpha-59-dev → 0.0.2-alpha-61

package/dist/collection/stories/Templates/writeSet/writeSet.stories.js

@@ -10,7 +10,7 @@ const meta = {
 export default meta;
 export const writeSet = {
     args: {
-        questions: ["26"],
+        questions: ["110"],
         isAllowOnlyCorrect: true,
         isContinueOnCorrect: true,
     },
@@ -25,8 +25,9 @@ function getContainerXml(args) {
     const QuestionCells = questions.map(question => {
         return `
 		<!-- Questions --> 	
-		<lido-cell visible="true" id="question"  layout="" height="93px" width="368px" bg-Color="transparent" onEntry="" justify-content="space-evenly" margin="landscape.0px 0px 0px -78px,portrait.44px">
-			<lido-text visible="true" id="number" audio="" value="${question}" onTouch="" tab-index="${tabCounter++}" height="100%" width="100%" bg-Color="#FFE99B" margin="" onEntry="this.border='5px solid #FFC805'" string="${question}" font-size="76px" font-weight="500" font-family="'Baloo Bhai 2'" onCorrect="this.speak='true'">
+		<lido-cell visible="true" id="question"  layout="" height="93px" width="202px" bg-Color="transparent" onEntry="" justify-content="space-evenly" 
+    margin="landscape.0px -74px 0px 68px,portrait.44px">
+			<lido-text visible="true" id="number" audio="" value="${question}" onTouch="" tab-index="${tabCounter++}" height="100%" width="100%" bg-Color="#FFE99B" margin="" onEntry="this.border='5px solid #FFC805'; justify-content='center'; align-items='center'" string="${question}" font-size="76px" font-weight="500" font-family="'Baloo Bhai 2'" onCorrect="this.speak='true'">
 			</lido-text>
 		</lido-cell>
       `;
@@ -35,10 +36,10 @@ function getContainerXml(args) {
  <lido-container visible="true" show-next-button="false" dropAttr="math-matrix" appendToDropOnCompletion="true" equationCheck="$#mat1,==,$#number" objective="" is-allow-only-correct="${isAllowOnlyCorrect}" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/background-images/Write%20Set.png" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" onCorrect="lido-avatar.avatarAnimate='Success'; number.speak='true';  this.sleep='2000';" is-continue-on-correct="${isContinueOnCorrect}">
 
     <!-- Audio -->
-    <lido-text visible="false" id="audio123" onEntry="this.display='none'; this.speak='true';" string="Fill the matrix according to the number given in the box."></lido-text>
+    <lido-text visible="false" tab-index="111" id="audio123" onEntry="this.display='none'; this.speak='true';" string="Fill the matrix according to the number given in the box."></lido-text>
 		
     <!-- Chimple Avatar -->
-	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.346px,portrait.310px" width="landscape.263px,portrait.276px" x="landscape.82%, portrait.72%" y="landscape.68%, portrait.82%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.346px,portrait.310px" width="landscape.263px,portrait.276px" x="landscape.86%, portrait.72%" y="landscape.68%, portrait.82%" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
 			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
 			</lido-avatar>
 	</lido-cell>

package/dist/collection/utils/audioPlayer.js

@@ -4,6 +4,9 @@ import { setDraggingDisabled } from "./utilsHandlers/dragDropHandler";
 import { NextContainerKey, PrevContainerKey, ActivityChangeKey, GameCompletedKey, GameExitKey, ActivityEndKey, LessonEndKey } from "./constants";
 export class AudioPlayer {
     constructor() {
+        this.handleUserClick = () => {
+            this.stop();
+        };
         this.audioElement = document.createElement('audio');
         this.audioElement.id = 'audio';
         document.body.appendChild(this.audioElement);
@@ -40,6 +43,10 @@ export 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
@@ -60,6 +67,7 @@ export class AudioPlayer {
             try {
                 setDraggingDisabled(true);
                 highlightSpeakingElement(targetElement);
+                window.addEventListener('click', this.handleUserClick, true);
                 await this.audioElement.play();
                 await new Promise(resolve => {
                     this.audioElement.onended = () => {
@@ -71,6 +79,7 @@ export class AudioPlayer {
                 console.log('🎧 Audio play error:', error);
             }
             finally {
+                window.removeEventListener('click', this.handleUserClick, true);
                 this.audioElement.onended = null; // cleanup
                 setDraggingDisabled(false);
                 stopHighlightForSpeakingElement(targetElement);
@@ -80,6 +89,7 @@ export 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));

package/dist/collection/utils/customEvents.js

@@ -1,4 +1,5 @@
 import { ActivityChangeKey, ActivityEndKey, ElementClickKey, ElementDropKey, GameCompletedKey, GameExitKey, LessonEndKey, NextContainerKey, PrevContainerKey } from "./constants";
+import { Timer } from "./utilsHandlers/timer";
 function dispatchCustomEvent(eventName, detail) {
     console.log("👍Event Name : ", eventName, "Detail : ", detail.toString());
     const event = new CustomEvent(eventName, { detail });
@@ -8,7 +9,7 @@ export function dispatchActivityEndEvent(index, totalIndex, score) {
     dispatchCustomEvent(ActivityEndKey, { index, totalIndex, score });
 }
 export function dispatchLessonEndEvent(score) {
-    dispatchCustomEvent(LessonEndKey, { score });
+    dispatchCustomEvent(LessonEndKey, { score, timeSpent: Math.floor(Timer.getI().getElapsed() / 1000) });
 }
 export function dispatchNextContainerEvent() {
     dispatchCustomEvent(NextContainerKey, {});

package/dist/collection/utils/i18n.js

@@ -7,6 +7,7 @@ import hi from "../i18n/hi.json";
 import ka from "../i18n/ka.json";
 import te from "../i18n/te.json";
 import port from "../i18n/port.json";
+import ma from "../i18n/ma.json";
 i18next
     .use(LanguageDetector)
     .init({
@@ -17,6 +18,7 @@ i18next
         ka: { translation: ka },
         te: { translation: te },
         port: { translation: port },
+        ma: { translation: ma },
     },
     fallbackLng: 'en', // fallback if current lang not found
     debug: false,

package/dist/collection/utils/utils.js

@@ -189,6 +189,7 @@ export 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;
@@ -420,7 +421,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 {
@@ -604,22 +605,14 @@ export async function onActivityComplete(dragElement, dropElement) {
         const storedTabIndexes = Object.keys(dragScore).map(Number);
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    // otherElement.style.backgroundColor = 'transparent'; // Reset background color**
-                }
-                if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                    otherElement.style.opacity = '0';
-                    otherElement.style.backgroundColor = 'transparent';
+                if (otherElement) {
+                    otherElement.style.opacity = "0";
                 }
             }
         }
         else {
             if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                // otherElement.style.backgroundColor = 'transparent'; // Reset background color**********
-            }
-            if (otherElement.tagName.toLowerCase() === 'lido-image') {
                 otherElement.style.opacity = '1';
-                otherElement.style.backgroundColor = 'transparent';
             }
         }
     });

package/dist/collection/utils/utilsHandlers/clickHandler.js

@@ -27,7 +27,7 @@ export function onTouchListenerForOnTouch(element) {
         setDraggingDisabled(false);
     };
     const onPointerDown = (event) => {
-        event.stopPropagation();
+        // event.stopPropagation();
         onholdTriggered = false;
         onholdTimer = setTimeout(() => {
             playAudio();
@@ -35,13 +35,18 @@ export function onTouchListenerForOnTouch(element) {
     };
     const onPointerUp = async (event) => {
         clearTimeout(onholdTimer);
-        if (!onholdTriggered && onTouch) {
+        // If long-press happened → do nothing else
+        if (onholdTriggered) {
+            setDraggingDisabled(false);
+            return;
+        }
+        // If an onTouch action is defined, execute it on tap.
+        if (onTouch) {
             await executeActions(onTouch, element);
         }
-        else if (!onTouch) {
-            if (['category', 'option'].includes(element.getAttribute('type') || '')) {
-                element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-            }
+        const type = element.getAttribute('type') || '';
+        if (['category', 'option', 'click'].includes(type)) {
+            element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
         }
         setDraggingDisabled(false);
     };
@@ -87,7 +92,7 @@ export 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';

package/dist/collection/utils/utilsHandlers/dragDropHandler.js

@@ -70,6 +70,7 @@ export function enableDraggingWithScaling(element) {
     let horizontalDistance;
     const onStart = (event) => {
         var _a, _b;
+        console.log("moving start");
         if (isDraggingDisabled) {
             isDragging = false;
             return;
@@ -217,22 +218,14 @@ export function enableDraggingWithScaling(element) {
             const storedTabIndexes = Object.keys(dropObject).map(Number);
             if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                 if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                        // otherElement.style.border = ''; // Reset border
-                        // otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                    }
-                    if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                        otherElement.style.opacity = '0';
+                    if (otherElement) {
+                        otherElement.style.opacity = "0.3";
                     }
                 }
             }
             else {
-                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    // otherElement.style.border = ''; // Reset border
-                    // otherElement.style.backgroundColor = ''; // Reset background color
-                }
-                if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
-                    otherElement.style.opacity = '1';
+                if (otherElement) {
+                    otherElement.style.opacity = "1";
                 }
             }
         });
@@ -241,6 +234,7 @@ export function enableDraggingWithScaling(element) {
             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')) {
@@ -277,12 +271,8 @@ export function enableDraggingWithScaling(element) {
                 const storedTabIndexes = Object.keys(dropObject).map(Number);
                 if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                     if (!(((_a = element.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                        if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                            // otherElement.style.border = ''; // Reset border
-                            // otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                        }
-                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                            otherElement.style.opacity = '0';
+                        if (otherElement) {
+                            otherElement.style.opacity = "0";
                         }
                         else {
                             otherElement.style.opacity = '1';
@@ -290,12 +280,8 @@ export function enableDraggingWithScaling(element) {
                     }
                 }
                 else {
-                    if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                        // otherElement.style.border = ''; // Reset border
-                        // otherElement.style.backgroundColor = ''; // Reset background color
-                    }
-                    if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
-                        otherElement.style.opacity = '1';
+                    if (otherElement) {
+                        otherElement.style.opacity = "1";
                     }
                 }
             });
@@ -346,6 +332,7 @@ export function enableDraggingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener('click', ev => {
         if (isClicked) {
+            console.log("clicked drag elkement");
             onClickDropOrDragElement(element, 'drag');
         }
     });
@@ -474,21 +461,13 @@ export function handleResetDragElement(dragElement, dropElement, dropHasDrag, se
         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
                 if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                    // otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                }
-                if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                    otherElement.style.opacity = '0';
-                    otherElement.style.backgroundColor = 'transparent';
+                    otherElement.style.opacity = "0";
                 }
             }
         }
         else {
-            if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                // otherElement.style.backgroundColor = 'transparent'; // Reset background color
-            }
-            if (otherElement.tagName.toLowerCase() === 'lido-image') {
-                otherElement.style.opacity = '1';
-                otherElement.style.backgroundColor = 'transparent';
+            if (otherElement) {
+                otherElement.style.opacity = "1";
             }
         }
     });
@@ -502,16 +481,18 @@ export async function onElementDropComplete(dragElement, dropElement) {
     const dragSelectedData = JSON.stringify(buildDragSelectedMapFromDOM());
     const dropSelectedDataobject = buildDragSelectedMapFromDOM();
     const dropSelectedData = JSON.stringify(dropSelectedDataobject);
-    console.log("dragggedddd elem", { value: dragElement.getAttribute("value") });
     let dropHasDrag = buildDropHasDragFromDOM();
     if (!dropElement) {
         handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData);
     }
-    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, dropSelectedData);
-        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, dropSelectedData);
+            return;
+        }
     }
     const isAllowOnlyCorrect = container.getAttribute('is-allow-only-correct') === 'true';
     if (isAllowOnlyCorrect) {
@@ -545,7 +526,6 @@ export 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)';
@@ -652,21 +632,13 @@ export async function onElementDropComplete(dragElement, dropElement) {
                         const storedTabIndexes = Object.keys(dropObject).map(Number);
                         if (storedTabIndexes.includes(JSON.parse(otherElement.getAttribute('tab-index')))) {
                             if (!(((_a = otherElement.getAttribute('dropAttr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Diagonal)) {
-                                if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                                    // otherElement.style.border = ''; // Reset border
-                                    // otherElement.style.backgroundColor = 'transparent'; // Reset background color
-                                }
-                                if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                                if (otherElement) {
                                     otherElement.style.opacity = '0';
                                 }
                             }
                         }
                         else {
-                            if (otherElement.tagName.toLowerCase() === 'lido-text') {
-                                // otherElement.style.border = ''; // Reset border
-                                // otherElement.style.backgroundColor = ''; // Reset background color
-                            }
-                            if (otherElement.tagName.toLowerCase() === 'lido-image' || 'lido-cell') {
+                            if (otherElement) {
                                 otherElement.style.opacity = '1';
                             }
                         }
@@ -742,6 +714,7 @@ export function updateDropBorder(element) {
     if (dragSelectedElements.length > 0) {
         element.classList.add('filled');
         element.classList.remove('empty');
+        element.classList.remove('highlight-element');
     }
     else {
         if (!element.classList.contains('math-matrix')) {
@@ -794,8 +767,9 @@ export 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'))

package/dist/collection/utils/utilsHandlers/highlightHandler.js

@@ -120,7 +120,7 @@ export function highlightElement() {
         }
         // Highlight corresponding drag elements if mistakes are more than 2
         const dragElements = container.querySelectorAll(`[type="drag"]`);
-        if (countOfMistakes > 2) {
+        if (countOfMistakes > 2 && container.getAttribute("is-continue-on-correct") === "true") {
             dragElements.forEach(dragEl => {
                 dragEl.classList.remove('highlight-element');
                 if (dragEl.getAttribute('value') === dropEle.getAttribute('value')) {
@@ -137,7 +137,7 @@ export function highlightElement() {
         }
     }
     else {
-        if (countOfMistakes <= 2)
+        if (countOfMistakes <= 2 || container.getAttribute("is-continue-on-correct") === "false")
             return;
         const clickTemplate = container.querySelectorAll("[type='click']");
         clickTemplate.forEach(clickEl => {

package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js

@@ -14,7 +14,7 @@ export function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -46,18 +46,17 @@ function calculateValue(elements, operation) {
     }
 }
 export 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 leftVal = balanceEl.leftVal;
+    const rightVal = balanceEl.rightVal;
     const hasLeft = !isNaN(leftVal);
     const hasRight = !isNaN(rightVal);
-    if (!hasLeft || !hasRight) {
+    if (leftVal == null || rightVal == null) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';

package/dist/collection/utils/utilsHandlers/timer.js

@@ -0,0 +1,53 @@
+export 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;
+    }
+}

package/dist/components/index.js

@@ -1 +1 @@
-export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3513b1f3.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-40afd35f.js';

package/dist/components/lido-avatar.js

@@ -1,4 +1,4 @@
-import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-99fcbae4.js';
+import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-76947363.js';
 
 const LidoAvatar = LidoAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-balance.js

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

package/dist/components/lido-calculator.js

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

package/dist/components/lido-canvas.js

@@ -1,4 +1,4 @@
-import { L as LidoCanvas$1, d as defineCustomElement$1 } from './p-ad0f335e.js';
+import { L as LidoCanvas$1, d as defineCustomElement$1 } from './p-0f54f212.js';
 
 const LidoCanvas = LidoCanvas$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-cell.js

@@ -1,4 +1,4 @@
-import { L as LidoCell$1, d as defineCustomElement$1 } from './p-33b83222.js';
+import { L as LidoCell$1, d as defineCustomElement$1 } from './p-16a6a6f6.js';
 
 const LidoCell = LidoCell$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-col.js

@@ -1,4 +1,4 @@
-import { L as LidoCol$1, d as defineCustomElement$1 } from './p-f9426cbe.js';
+import { L as LidoCol$1, d as defineCustomElement$1 } from './p-4a1af1bb.js';
 
 const LidoCol = LidoCol$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-container.js

@@ -1,4 +1,4 @@
-import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-5c990168.js';
+import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-27bfb88f.js';
 
 const LidoContainer = LidoContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-flash-card.js

@@ -1,4 +1,4 @@
-import { L as LidoFlash, d as defineCustomElement$1 } from './p-6819005f.js';
+import { L as LidoFlash, d as defineCustomElement$1 } from './p-2fedf56d.js';
 
 const LidoFlashCard = LidoFlash;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-float.js

@@ -1,4 +1,4 @@
-import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-f238004e.js';
+import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-df6042b0.js';
 
 const LidoFloat = LidoFloat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-home.js

@@ -1,4 +1,4 @@
-import { L as LidoHome$1, d as defineCustomElement$1 } from './p-73e4bb01.js';
+import { L as LidoHome$1, d as defineCustomElement$1 } from './p-8632f479.js';
 
 const LidoHome = LidoHome$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-image.js

@@ -1,4 +1,4 @@
-import { L as LidoImage$1, d as defineCustomElement$1 } from './p-84302365.js';
+import { L as LidoImage$1, d as defineCustomElement$1 } from './p-6bee9883.js';
 
 const LidoImage = LidoImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-keyboard.js

@@ -1,4 +1,4 @@
-import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-4d9462ab.js';
+import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-4c1d15df.js';
 
 const LidoKeyboard = LidoKeyboard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-math-matrix.js

@@ -1,4 +1,4 @@
-import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-6bbad90f.js';
+import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-2b0ef6d4.js';
 
 const LidoMathMatrix = LidoMathMatrix$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-pos.js

@@ -1,4 +1,4 @@
-import { L as LidoPos$1, d as defineCustomElement$1 } from './p-5aa24314.js';
+import { L as LidoPos$1, d as defineCustomElement$1 } from './p-2ce1503f.js';
 
 const LidoPos = LidoPos$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-random.js

@@ -1,4 +1,4 @@
-import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-9b35082a.js';
+import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-d28496a9.js';
 
 const LidoRandom = LidoRandom$1;
 const defineCustomElement = defineCustomElement$1;