lido-player 0.0.2-alpha-94 → 0.0.2-alpha-96

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -8567,8 +8567,9 @@ const LidoCalculator = class {
             else {
                 await index$1.executeActions(onInCorrect, container);
             }
-            index$1.calculateScore();
             if (!isContinueOnCorrect) {
+                container.setAttribute("game-completed", "true");
+                index$1.calculateScore();
                 index$1.triggerNextContainer();
             }
         }
@@ -8576,7 +8577,7 @@ const LidoCalculator = class {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (index.h(index.Host, { key: 'f74605bdd05ece961c175ff64aba213961797587', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: 'df158e5e1a545a3d763e3e5a8bf07861b826aad0', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'c6afe2c1e7970b2d6f5a6d63a6cc8f2ceb403f74', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '60e8e03c6d344c6b8be3c2a7417fb4ed55a2af9e', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: 'cf53e61f86acc8dce793ee1b09d880ee6fe8e35e', class: "lido-calculator-displayParent" }, index.h("div", { key: '0522a16f1ff07e3e42078eab83f58b4a0e9a6fbf', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: 'c0145ed065199cc68ed136ebc3077a2857da7b2b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (index.h(index.Host, { key: '561785bf36e862832ec1f8550684f5c15ecc1166', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '21789df12ab18c3bdba7b68ce2943c2d6bd83e45', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'bb3018fac89a5a96f5949457c30dd2c199c72ea8', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '2d4fee4142ed51970cddc623ae1635e80808062b', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '25b755eeeaaeec450aabae4867ad5f14dcf77202', class: "lido-calculator-displayParent" }, index.h("div", { key: '51f310c071edbb264f2f3636118721449651f8f2', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: 'd7489f877e4fbbd27afaf143666fc241f4df3427', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -12147,15 +12148,36 @@ const LidoContainer = class {
                 "sentenceMatchTemplate": "sentenceMatch" /* templateAudio.sentenceMatchTemplate */,
                 "pictureClues": "pictureClues" /* templateAudio.pictureClues */,
                 "palEgmaCalculateSumAndSumTogether": "palEgmaCalculateSumAndSumTogether" /* templateAudio.palEgmaCalculateSumAndSumTogether */,
-                "palEgmaPatternMatching": "palEgmaPatternMatching" /* templateAudio.palEgmaPatternMatching */,
+                "palEgmaPatternMatching": "palEgmaPatternMatchingAudio" /* templateAudio.palEgmaPatternMatching */,
                 "palEgmaWordProblem": "palEgmaWordProblem" /* templateAudio.palEgmaWordProblem */,
-                "palEgraArrangePictures": "palEgraArrangePictures" /* templateAudio.palEgraArrangePictures */,
-                "palEgraBuildWord": "palEgraBuildWord" /* templateAudio.palEgraBuildWord */,
+                "palEgraArrangePictures": "palEgraArrangePicturesAudio" /* templateAudio.palEgraArrangePictures */,
+                "palEgraBuildWord": "palEgraBuildWordAudio" /* templateAudio.palEgraBuildWord */,
                 "palEgraMCQWithImage": "palEgraMCQWithImage" /* templateAudio.palEgraMCQWithImage */,
-                "palEgraOddOneOut": "palEgraOddOneOut" /* templateAudio.palEgraOddOneOut */,
+                "palEgraOddOneOut": "palEgraOddOneOutAudio" /* templateAudio.palEgraOddOneOut */,
                 "palEgraOptionWithAudio": "palEgraOptionWithAudio" /* templateAudio.palEgraOptionWithAudio */,
-                "palEgraWordFormation": "palEgraWordFormation" /* templateAudio.palEgraWordFormation */,
+                "palEgraWordFormation": "palEgraWordFormationAudio" /* templateAudio.palEgraWordFormation */,
                 "palEgraWordMatch": "palEgraWordMatch" /* templateAudio.palEgraWordMatch */,
+                "substractionWithImage": "substractionWithImageAudio" /* templateAudio.substractionWithImage */,
+                "substractionWithoutImage": "substractionWithoutImageAudio" /* templateAudio.substractionWithoutImage */,
+                "numberIdentificationWithImage": "numberIdentificationWithImageAudio" /* templateAudio.numberIdentificationWithImage */,
+                "numberIdentificationWithoutImage": "numberIdentificationWithoutImageAudio" /* templateAudio.numberIdentificationWithoutImage */,
+                "wordBuildingWithImage": "wordBuildingWithImageAudio" /* templateAudio.wordBuildingWithImage */,
+                "wordBuildingWithoutImage": "wordBuildingWithoutImageAudio" /* templateAudio.wordBuildingWithoutImage */,
+                "pictureWordMatchMultipleImages": "pictureWordMatchMultipleImagesAudio" /* templateAudio.pictureWordMatchMultipleImages */,
+                "pictureWordMatchSingleImage": "pictureWordMatchSingleImageAudio" /* templateAudio.pictureWordMatchSingleImage */,
+                "sentenceMatch": "sentenceMatchAudio" /* templateAudio.sentenceMatch */,
+                "imageMatch": "imageMatchAudio" /* templateAudio.imageMatch */,
+                "palStoryTale": "palStoryTaleAudio" /* templateAudio.palStoryTale */,
+                "palEgmaWordProblemDragnDrop": "palEgmaWordProblemDragnDropAudio" /* templateAudio.palEgmaWordProblemDragnDrop */,
+                "palEgmaWordProblemClick": "palEgmaWordProblemClickAudio" /* templateAudio.palEgmaWordProblemClick */,
+                "palInventedSpelling": "palInventedSpellingAudio" /* templateAudio.palInventedSpelling */,
+                "palLetterIdentification": "palLetterIdentificationAudio" /* templateAudio.palLetterIdentification */,
+                "palStoryMaking": "palStoryMakingAudio" /* templateAudio.palStoryMaking */,
+                "palegmasumtogether": "palegmasumtogetherAudio" /* templateAudio.palegmasumtogether */,
+                "palegmamultioption": "palegmamultioptionAudio" /* templateAudio.palegmamultioption */,
+                "palegraoptionaudio": "palegraoptionAudio" /* templateAudio.palegraoptionaudio */,
+                "palegrawordmatch": "palegrawordmatchAudio" /* templateAudio.palegrawordmatch */,
+                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */
             }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         const home = document.querySelector('lido-home');
         if (!home)
@@ -12312,7 +12334,7 @@ const LidoContainer = class {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: '9969d4eee1befeb5b5a82fdce7c58aa44abc179c', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: 'c5476a7d3e16bb1b5608046d9f0b54f757003706', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '7523757d12373c3355815012ed6a93abcb839f71' })));
+        return (index.h(index.Host, { key: 'b94060e2432a7e7d8580ffb53ceef4124a4fba25', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '7b433aa25be08cef849e9cefda243cebd7f6aef6', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '95705c210ed7efbcf06e0ad7779b8c00fa4e1818' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -18555,9 +18577,6 @@ const LidoTrace = class {
             await this.playTraceAnimation();
         }
         index$1.storingEachActivityScore(true);
-        if (this.el && this.onCorrect) {
-            await index$1.executeActions(this.onCorrect, this.el);
-        }
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -18567,10 +18586,19 @@ const LidoTrace = class {
             const svgContainer = document.getElementById('lido-svgContainer');
             svgContainer.style.visibility = 'visible';
             this.moving = false;
+            if (this.el && this.onCorrect) {
+                await index$1.executeActions(this.onCorrect, this.el);
+            }
             return;
         }
         index$1.calculateScore();
         console.log('All SVGs completed, hiding component.');
+        const container = document.querySelector(index$1.LidoContainer);
+        const containerOnCorrect = container.getAttribute("onCorrect");
+        if (container && containerOnCorrect) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+            await index$1.executeActions(containerOnCorrect, this.el);
+        }
         index$1.triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -18781,7 +18809,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '3f7da73f3c075a90ea0ce27022ed06a60c814fb4', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

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

@@ -174,8 +174,9 @@ export class LidoCalculator {
             else {
                 await executeActions(onInCorrect, container);
             }
-            calculateScore();
             if (!isContinueOnCorrect) {
+                container.setAttribute("game-completed", "true");
+                calculateScore();
                 triggerNextContainer();
             }
         }
@@ -183,7 +184,7 @@ export class LidoCalculator {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: 'f74605bdd05ece961c175ff64aba213961797587', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: 'df158e5e1a545a3d763e3e5a8bf07861b826aad0', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'c6afe2c1e7970b2d6f5a6d63a6cc8f2ceb403f74', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '60e8e03c6d344c6b8be3c2a7417fb4ed55a2af9e', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'cf53e61f86acc8dce793ee1b09d880ee6fe8e35e', class: "lido-calculator-displayParent" }, h("div", { key: '0522a16f1ff07e3e42078eab83f58b4a0e9a6fbf', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'c0145ed065199cc68ed136ebc3077a2857da7b2b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: '561785bf36e862832ec1f8550684f5c15ecc1166', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '21789df12ab18c3bdba7b68ce2943c2d6bd83e45', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'bb3018fac89a5a96f5949457c30dd2c199c72ea8', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '2d4fee4142ed51970cddc623ae1635e80808062b', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '25b755eeeaaeec450aabae4867ad5f14dcf77202', class: "lido-calculator-displayParent" }, h("div", { key: '51f310c071edbb264f2f3636118721449651f8f2', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'd7489f877e4fbbd27afaf143666fc241f4df3427', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));

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

@@ -259,15 +259,36 @@ export class LidoContainer {
                 "sentenceMatchTemplate": "sentenceMatch" /* templateAudio.sentenceMatchTemplate */,
                 "pictureClues": "pictureClues" /* templateAudio.pictureClues */,
                 "palEgmaCalculateSumAndSumTogether": "palEgmaCalculateSumAndSumTogether" /* templateAudio.palEgmaCalculateSumAndSumTogether */,
-                "palEgmaPatternMatching": "palEgmaPatternMatching" /* templateAudio.palEgmaPatternMatching */,
+                "palEgmaPatternMatching": "palEgmaPatternMatchingAudio" /* templateAudio.palEgmaPatternMatching */,
                 "palEgmaWordProblem": "palEgmaWordProblem" /* templateAudio.palEgmaWordProblem */,
-                "palEgraArrangePictures": "palEgraArrangePictures" /* templateAudio.palEgraArrangePictures */,
-                "palEgraBuildWord": "palEgraBuildWord" /* templateAudio.palEgraBuildWord */,
+                "palEgraArrangePictures": "palEgraArrangePicturesAudio" /* templateAudio.palEgraArrangePictures */,
+                "palEgraBuildWord": "palEgraBuildWordAudio" /* templateAudio.palEgraBuildWord */,
                 "palEgraMCQWithImage": "palEgraMCQWithImage" /* templateAudio.palEgraMCQWithImage */,
-                "palEgraOddOneOut": "palEgraOddOneOut" /* templateAudio.palEgraOddOneOut */,
+                "palEgraOddOneOut": "palEgraOddOneOutAudio" /* templateAudio.palEgraOddOneOut */,
                 "palEgraOptionWithAudio": "palEgraOptionWithAudio" /* templateAudio.palEgraOptionWithAudio */,
-                "palEgraWordFormation": "palEgraWordFormation" /* templateAudio.palEgraWordFormation */,
+                "palEgraWordFormation": "palEgraWordFormationAudio" /* templateAudio.palEgraWordFormation */,
                 "palEgraWordMatch": "palEgraWordMatch" /* templateAudio.palEgraWordMatch */,
+                "substractionWithImage": "substractionWithImageAudio" /* templateAudio.substractionWithImage */,
+                "substractionWithoutImage": "substractionWithoutImageAudio" /* templateAudio.substractionWithoutImage */,
+                "numberIdentificationWithImage": "numberIdentificationWithImageAudio" /* templateAudio.numberIdentificationWithImage */,
+                "numberIdentificationWithoutImage": "numberIdentificationWithoutImageAudio" /* templateAudio.numberIdentificationWithoutImage */,
+                "wordBuildingWithImage": "wordBuildingWithImageAudio" /* templateAudio.wordBuildingWithImage */,
+                "wordBuildingWithoutImage": "wordBuildingWithoutImageAudio" /* templateAudio.wordBuildingWithoutImage */,
+                "pictureWordMatchMultipleImages": "pictureWordMatchMultipleImagesAudio" /* templateAudio.pictureWordMatchMultipleImages */,
+                "pictureWordMatchSingleImage": "pictureWordMatchSingleImageAudio" /* templateAudio.pictureWordMatchSingleImage */,
+                "sentenceMatch": "sentenceMatchAudio" /* templateAudio.sentenceMatch */,
+                "imageMatch": "imageMatchAudio" /* templateAudio.imageMatch */,
+                "palStoryTale": "palStoryTaleAudio" /* templateAudio.palStoryTale */,
+                "palEgmaWordProblemDragnDrop": "palEgmaWordProblemDragnDropAudio" /* templateAudio.palEgmaWordProblemDragnDrop */,
+                "palEgmaWordProblemClick": "palEgmaWordProblemClickAudio" /* templateAudio.palEgmaWordProblemClick */,
+                "palInventedSpelling": "palInventedSpellingAudio" /* templateAudio.palInventedSpelling */,
+                "palLetterIdentification": "palLetterIdentificationAudio" /* templateAudio.palLetterIdentification */,
+                "palStoryMaking": "palStoryMakingAudio" /* templateAudio.palStoryMaking */,
+                "palegmasumtogether": "palegmasumtogetherAudio" /* templateAudio.palegmasumtogether */,
+                "palegmamultioption": "palegmamultioptionAudio" /* templateAudio.palegmamultioption */,
+                "palegraoptionaudio": "palegraoptionAudio" /* templateAudio.palegraoptionaudio */,
+                "palegrawordmatch": "palegrawordmatchAudio" /* templateAudio.palegrawordmatch */,
+                "palegramcqimages": "palegramcqimagesAudio" /* templateAudio.palegramcqimages */
             }[this.templateId]) !== null && _a !== void 0 ? _a : '';
         const home = document.querySelector('lido-home');
         if (!home)
@@ -424,7 +445,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '9969d4eee1befeb5b5a82fdce7c58aa44abc179c', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: 'c5476a7d3e16bb1b5608046d9f0b54f757003706', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '7523757d12373c3355815012ed6a93abcb839f71' })));
+        return (h(Host, { key: 'b94060e2432a7e7d8580ffb53ceef4124a4fba25', 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, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '7b433aa25be08cef849e9cefda243cebd7f6aef6', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: '95705c210ed7efbcf06e0ad7779b8c00fa4e1818' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {

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

@@ -702,9 +702,6 @@ export class LidoTrace {
             await this.playTraceAnimation();
         }
         storingEachActivityScore(true);
-        if (this.el && this.onCorrect) {
-            await executeActions(this.onCorrect, this.el);
-        }
         console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         const delay = 1000; // milliseconds
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -714,10 +711,19 @@ export class LidoTrace {
             const svgContainer = document.getElementById('lido-svgContainer');
             svgContainer.style.visibility = 'visible';
             this.moving = false;
+            if (this.el && this.onCorrect) {
+                await executeActions(this.onCorrect, this.el);
+            }
             return;
         }
         calculateScore();
         console.log('All SVGs completed, hiding component.');
+        const container = document.querySelector(LidoContainer);
+        const containerOnCorrect = container.getAttribute("onCorrect");
+        if (container && containerOnCorrect) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+            await executeActions(containerOnCorrect, this.el);
+        }
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -928,7 +934,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '3f7da73f3c075a90ea0ce27022ed06a60c814fb4', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/components/lido-calculator.js

@@ -1 +1 @@
-import{L as o,d as s}from"./p-BVaiv1nz.js";const a=o,p=s;export{a as LidoCalculator,p as defineCustomElement}
+import{L as o,d as s}from"./p-1qOeKb23.js";const p=o,r=s;export{p as LidoCalculator,r as defineCustomElement}

package/dist/components/lido-container.js

@@ -1 +1 @@
-import{L as o,d as r}from"./p-Cyn3wr_R.js";const s=o,p=r;export{s as LidoContainer,p as defineCustomElement}
+import{L as o,d as s}from"./p-BToRx4je.js";const p=o,r=s;export{p as LidoContainer,r as defineCustomElement}

package/dist/components/lido-home.js

@@ -1 +1 @@
-import{L as a,d as o}from"./p-DtMwanJa.js";const s=a,t=o;export{s as LidoHome,t as defineCustomElement}
+import{L as s,d as o}from"./p-DsaycW90.js";const a=s,p=o;export{a as LidoHome,p as defineCustomElement}

package/dist/components/lido-root.js

@@ -1 +1 @@
-import{t,p as o,H as s,getAssetPath as e,h as a}from"./index.js";import{d as i,i as l}from"./p-XacgbiAe.js";import{d as r}from"./p-q6x112RN.js";import{d as n}from"./p-1PmJa9_u.js";import{d as m}from"./p-BVaiv1nz.js";import{d}from"./p-DWnRy2OX.js";import{d as c}from"./p-DFnbzZUc.js";import{d as p}from"./p-B97yn0-n.js";import{d as u}from"./p-Cyn3wr_R.js";import{d as h}from"./p-CfdL3fZ9.js";import{d as f}from"./p-BLx2hZ8d.js";import{d as b}from"./p-DtMwanJa.js";import{d as E}from"./p-BOTEFjDY.js";import{d as k}from"./p-5cqqnSZl.js";import{d as x}from"./p-Blfvc5ur.js";import{d as j}from"./p-Czy5pBTg.js";import{d as g}from"./p-D4JZI_JB.js";import{d as L}from"./p-CusU-d3G.js";import{d as v}from"./p-DqskvXvD.js";import{d as B}from"./p-Dr5sh_El.js";import{d as U}from"./p-JtdpRTRi.js";import{d as w}from"./p-De6WHLEQ.js";const D=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.xmlPath="",this.initialIndex=0,this.margin="",this.canplay=!0,this.baseUrl=""}connectedCallback(){this.setLanguage(this.Lang)}onLangChange(t){this.setLanguage(t)}setLanguage(t){l.changeLanguage(t||l.language)}async componentWillLoad(){var t,o;const s=null!==(t=this.xmlPath)&&void 0!==t?t:this.baseUrl+((null===(o=this.baseUrl)||void 0===o?void 0:o.endsWith("/"))?"index.xml":"/index.xml");console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.baseUrl:",this.baseUrl),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.xmlPath:",this.xmlPath),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ xmlPath:",s);try{const t=s.startsWith("http")?s:e(s),o=await fetch(t);if(!o.ok)throw Error("Failed to fetch XML data: "+o.statusText);const a=await o.text();this.xmlData=a}catch(t){console.error("Error fetching XML data:",t),this.xmlData=null}}render(){return void 0===this.xmlData?a("div",null,"Loading..."):null===this.xmlData?a("div",null,"Error loading XML data. Please check the path or URL."):a("lido-home",{showNav:!0,activeContainerIndexes:[],initialIndex:this.initialIndex,canplay:this.canplay,xmlData:this.xmlData,baseUrl:this.baseUrl,exitButtonUrl:this.exitButtonUrl,prevButtonUrl:this.prevButtonUrl,nextButtonUrl:this.nextButtonUrl,speakerButtonUrl:this.speakerButtonUrl})}static get assetsDirs(){return["assets"]}static get watchers(){return{Lang:[{onLangChange:0}]}}},[0,"lido-root",{Lang:[1,"lang"],xmlPath:[1,"xml-path"],initialIndex:[2,"initial-index"],margin:[1],canplay:[4],baseUrl:[1,"base-url"],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],xmlData:[32]},void 0,{Lang:[{onLangChange:0}]}]);function y(){"undefined"!=typeof customElements&&["lido-root","lido-avatar","lido-balance","lido-calculator","lido-canvas","lido-cell","lido-col","lido-container","lido-flash-card","lido-float","lido-home","lido-image","lido-keyboard","lido-math-matrix","lido-pos","lido-random","lido-row","lido-shape","lido-slide-fill","lido-text","lido-trace","lido-wrap"].forEach((o=>{switch(o){case"lido-root":customElements.get(t(o))||customElements.define(t(o),D);break;case"lido-avatar":customElements.get(t(o))||r();break;case"lido-balance":customElements.get(t(o))||n();break;case"lido-calculator":customElements.get(t(o))||m();break;case"lido-canvas":customElements.get(t(o))||d();break;case"lido-cell":customElements.get(t(o))||c();break;case"lido-col":customElements.get(t(o))||p();break;case"lido-container":customElements.get(t(o))||u();break;case"lido-flash-card":customElements.get(t(o))||h();break;case"lido-float":customElements.get(t(o))||f();break;case"lido-home":customElements.get(t(o))||b();break;case"lido-image":customElements.get(t(o))||E();break;case"lido-keyboard":customElements.get(t(o))||k();break;case"lido-math-matrix":customElements.get(t(o))||x();break;case"lido-pos":customElements.get(t(o))||j();break;case"lido-random":customElements.get(t(o))||g();break;case"lido-row":customElements.get(t(o))||L();break;case"lido-shape":customElements.get(t(o))||v();break;case"lido-slide-fill":customElements.get(t(o))||B();break;case"lido-text":customElements.get(t(o))||i();break;case"lido-trace":customElements.get(t(o))||U();break;case"lido-wrap":customElements.get(t(o))||w()}}))}y();const C=D,R=y;export{C as LidoRoot,R as defineCustomElement}
+import{t,p as o,H as s,getAssetPath as e,h as a}from"./index.js";import{d as i,i as l}from"./p-XacgbiAe.js";import{d as r}from"./p-q6x112RN.js";import{d as n}from"./p-1PmJa9_u.js";import{d as m}from"./p-1qOeKb23.js";import{d}from"./p-DWnRy2OX.js";import{d as c}from"./p-DFnbzZUc.js";import{d as p}from"./p-B97yn0-n.js";import{d as u}from"./p-BToRx4je.js";import{d as h}from"./p-CfdL3fZ9.js";import{d as f}from"./p-BLx2hZ8d.js";import{d as b}from"./p-DsaycW90.js";import{d as x}from"./p-BOTEFjDY.js";import{d as E}from"./p-5cqqnSZl.js";import{d as k}from"./p-Blfvc5ur.js";import{d as j}from"./p-Czy5pBTg.js";import{d as L}from"./p-D4JZI_JB.js";import{d as g}from"./p-CusU-d3G.js";import{d as v}from"./p-DqskvXvD.js";import{d as B}from"./p-Dr5sh_El.js";import{d as U}from"./p-B4Jyt3YL.js";import{d as y}from"./p-De6WHLEQ.js";const D=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.xmlPath="",this.initialIndex=0,this.margin="",this.canplay=!0,this.baseUrl=""}connectedCallback(){this.setLanguage(this.Lang)}onLangChange(t){this.setLanguage(t)}setLanguage(t){l.changeLanguage(t||l.language)}async componentWillLoad(){var t,o;const s=null!==(t=this.xmlPath)&&void 0!==t?t:this.baseUrl+((null===(o=this.baseUrl)||void 0===o?void 0:o.endsWith("/"))?"index.xml":"/index.xml");console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.baseUrl:",this.baseUrl),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.xmlPath:",this.xmlPath),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ xmlPath:",s);try{const t=s.startsWith("http")?s:e(s),o=await fetch(t);if(!o.ok)throw Error("Failed to fetch XML data: "+o.statusText);const a=await o.text();this.xmlData=a}catch(t){console.error("Error fetching XML data:",t),this.xmlData=null}}render(){return void 0===this.xmlData?a("div",null,"Loading..."):null===this.xmlData?a("div",null,"Error loading XML data. Please check the path or URL."):a("lido-home",{showNav:!0,activeContainerIndexes:[],initialIndex:this.initialIndex,canplay:this.canplay,xmlData:this.xmlData,baseUrl:this.baseUrl,exitButtonUrl:this.exitButtonUrl,prevButtonUrl:this.prevButtonUrl,nextButtonUrl:this.nextButtonUrl,speakerButtonUrl:this.speakerButtonUrl})}static get assetsDirs(){return["assets"]}static get watchers(){return{Lang:[{onLangChange:0}]}}},[0,"lido-root",{Lang:[1,"lang"],xmlPath:[1,"xml-path"],initialIndex:[2,"initial-index"],margin:[1],canplay:[4],baseUrl:[1,"base-url"],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],xmlData:[32]},void 0,{Lang:[{onLangChange:0}]}]);function w(){"undefined"!=typeof customElements&&["lido-root","lido-avatar","lido-balance","lido-calculator","lido-canvas","lido-cell","lido-col","lido-container","lido-flash-card","lido-float","lido-home","lido-image","lido-keyboard","lido-math-matrix","lido-pos","lido-random","lido-row","lido-shape","lido-slide-fill","lido-text","lido-trace","lido-wrap"].forEach((o=>{switch(o){case"lido-root":customElements.get(t(o))||customElements.define(t(o),D);break;case"lido-avatar":customElements.get(t(o))||r();break;case"lido-balance":customElements.get(t(o))||n();break;case"lido-calculator":customElements.get(t(o))||m();break;case"lido-canvas":customElements.get(t(o))||d();break;case"lido-cell":customElements.get(t(o))||c();break;case"lido-col":customElements.get(t(o))||p();break;case"lido-container":customElements.get(t(o))||u();break;case"lido-flash-card":customElements.get(t(o))||h();break;case"lido-float":customElements.get(t(o))||f();break;case"lido-home":customElements.get(t(o))||b();break;case"lido-image":customElements.get(t(o))||x();break;case"lido-keyboard":customElements.get(t(o))||E();break;case"lido-math-matrix":customElements.get(t(o))||k();break;case"lido-pos":customElements.get(t(o))||j();break;case"lido-random":customElements.get(t(o))||L();break;case"lido-row":customElements.get(t(o))||g();break;case"lido-shape":customElements.get(t(o))||v();break;case"lido-slide-fill":customElements.get(t(o))||B();break;case"lido-text":customElements.get(t(o))||i();break;case"lido-trace":customElements.get(t(o))||U();break;case"lido-wrap":customElements.get(t(o))||y()}}))}w();const C=D,R=w;export{C as LidoRoot,R as defineCustomElement}

package/dist/components/lido-trace.js

@@ -1 +1 @@
-import{L as o,d as p}from"./p-JtdpRTRi.js";const s=o,t=p;export{s as LidoTrace,t as defineCustomElement}
+import{L as o,d as s}from"./p-B4Jyt3YL.js";const t=o,p=s;export{t as LidoTrace,p as defineCustomElement}

package/dist/components/p-1qOeKb23.js

@@ -0,0 +1 @@
+import{t,p as i,H as e,d as o,e as s,S as a,s as l,C as r,A as n,f as c,g as d,N as h,j as u,h as p,c as b,b as f}from"./index.js";import{d as m}from"./p-DFnbzZUc.js";import{d as x}from"./p-XacgbiAe.js";const g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.onOk=o(this,"onOk"),this.width="479px",this.visible=!1,this.height="711px",this.objective="",this.onEntry="",this.x="0px",this.y="0px",this.bgColor="#60DADA",this.penIcon="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/penIcon.png",this.displayValue="",this.style={},this.userAnswers=[],this.tempInputs=[]}updateValueAttr(){this.el.setAttribute("value",this.displayValue)}componentWillLoad(){if(!this.objective){const t=this.el.closest("lido-container");t&&(this.objective=(t.getAttribute("objective")||"").replace("=","").trim())}this.updateValueAttr()}handleClick(t){"OK"===t?this.verifyAnswer():"←"===t?this.displayValue=this.displayValue.slice(0,-1):this.displayValue.length<8&&(this.displayValue+=t),this.updateValueAttr()}async verifyAnswer(){var t;const i=this.displayValue.trim();if(!i)return;let e=!1;const o=this.el.closest("lido-container");if(!o)return;if(this.objective&&""!=this.objective&&!this.objective.includes(","))console.log("hi iscorrect verified"),e=Number(i)===Number(this.objective);else if(this.objective&&this.objective.includes(",")){const t="true"===o.getAttribute("is-continue-on-correct"),s=this.objective.split(",").map((t=>t.trim())),a=this.userAnswers.length;a<s.length&&Number(i)===Number(s[a])&&(e=!0),t?e&&this.userAnswers.push(Number(i)):this.userAnswers.push(Number(i))}else if(""===this.objective){const t=o.getAttribute("equationCheck")||"";if(!t)return;try{const o=s(t);e=Number(o)===Number(i.trim()),console.log("Equation check:",o,i,e)}catch(t){console.error("Error evaluating equation:",t),e=!1}}this.onOk.emit(e);const p=document.getElementById("btn-11");if(e){const s="nimbleTable"===o.getAttribute("template-id"),u=this.objective.includes(",");s&&u||o.setAttribute("game-completed","true"),this.tempInputs.push(i);const b=JSON.parse(null!==(t=o.getAttribute(a))&&void 0!==t?t:"[]"),f=Array.isArray(b)?b.filter((t=>""!==String(t).trim())):[],m=this.tempInputs[this.tempInputs.length-1];if(""!==String(m).trim()&&f.push(m),o.setAttribute(a,JSON.stringify(f)),p.style.pointerEvents="none",this.displayValue="",l(e,r),s&&u){const t=o.querySelector("[type='calculate']");t&&(t.getAttribute("audio")||"").trim()&&(t.style.boxShadow="none !important",t.setAttribute("onCorrect","this.speak='true'"),n.getI().play(t))}const x=(null==o?void 0:o.getAttribute("onCorrect"))||"";if(await c(x,o),!x.includes("scrollCellAfterEquationSolved"))if(u){const t=this.objective.split(",").map((t=>t.trim()));this.userAnswers.length>=t.length&&(o.setAttribute("game-completed","true"),d(),window.dispatchEvent(new CustomEvent(h)))}else d(),window.dispatchEvent(new CustomEvent(h))}else{p.style.pointerEvents="none",this.displayValue="",l(e,r);const t=(null==o?void 0:o.getAttribute("onInCorrect"))||"",i=(null==o?void 0:o.getAttribute("onCorrect"))||"",s="true"===o.getAttribute("is-continue-on-correct");s?await c(t,o):await c(i,o),s||(o.setAttribute("game-completed","true"),d(),u())}p.style.pointerEvents="auto"}render(){return p(f,{key:"561785bf36e862832ec1f8550684f5c15ecc1166",onEntry:this.onEntry,id:"lidoCalculator",style:{width:this.width,height:this.height,backgroundColor:this.bgColor,left:this.x,top:this.y}},p("lido-cell",{key:"21789df12ab18c3bdba7b68ce2943c2d6bd83e45",visible:"true",height:"94px",width:"60px"},p("lido-text",{key:"bb3018fac89a5a96f5949457c30dd2c199c72ea8",visible:"true",id:"lido-calculator-penIcon",type:"click",height:"80px",x:"176%",width:"89px",onEntry:"this.position='relative';",class:"top-icon"},p("img",{key:"2d4fee4142ed51970cddc623ae1635e80808062b",src:b(this.penIcon),alt:"pen",style:{width:"100%",height:"100%"}}))),p("div",{key:"25b755eeeaaeec450aabae4867ad5f14dcf77202",class:"lido-calculator-displayParent"},p("div",{key:"51f310c071edbb264f2f3636118721449651f8f2",class:"lido-calculator-display"},this.displayValue)),p("div",{key:"d7489f877e4fbbd27afaf143666fc241f4df3427",class:"lido-calculator-buttons"},["1","2","3","4","5","6","7","8","9","←","0","OK"].map(((t,i)=>p("lido-text",{id:`btn-${i}`,string:t,visible:"true",type:"click",class:{"lido-calculator-btn-special":"←"===t||"OK"===t,"lido-calculator-btn-default":"←"!==t&&"OK"!==t},onClick:()=>this.handleClick(t)})))))}get el(){return this}static get style(){return"#lidoCalculator{border-radius:19px;border:5px solid #029A9A;position:relative;display:flex;flex-direction:column;padding:2%;box-sizing:border-box}.lido-calculator-btn-special{background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{background-color:#029A9A !important;color:#000;--btn-shadow-color:#0f4242 !important}#lido-calculator-penIcon{--btn-bg-color:#FB7038 !important;--btn-shadow-px:0 8px 0 !important;--btn-shadow-color:#D74B12 !important;border-radius:5px !important}.lido-calculator-displayParent{width:89%;height:107px;background-color:rgb(68, 186, 186);border-radius:5px;margin:14px auto 17px auto;overflow:hidden;display:flex;align-items:end}.lido-calculator-display{width:97%;height:94px;background:#029A9A;color:#fff;text-align:right;display:flex;justify-content:flex-end;align-items:center;font-size:72px;font-weight:700;font-family:'Baloo Bhai 2', serif;border-radius:5px 0px 0px 5px;box-sizing:border-box;margin:0 0px -6px auto}.lido-calculator-buttons{flex:1;display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;gap:0%;width:100%;justify-items:center;align-items:center;position:relative;top:-1%}.lido-calculator-buttons lido-text{display:flex !important;justify-content:center;align-items:center;width:96px !important;height:80px !important;font-size:72px !important;font-weight:700 !important;color:#fff;border-radius:5px !important;cursor:pointer;text-align:center;line-height:1;box-sizing:border-box;transition:transform 0.1s}.lido-calculator-buttons lido-text:active{transform:scale(0.95)}"}},[0,"lido-calculator",{width:[1],visible:[8],height:[1],objective:[1],onEntry:[1,"on-entry"],x:[1],y:[1],bgColor:[1,"bg-color"],penIcon:[1,"pen-icon"],displayValue:[32],style:[32]}]);function y(){"undefined"!=typeof customElements&&["lido-calculator","lido-cell","lido-text"].forEach((i=>{switch(i){case"lido-calculator":customElements.get(t(i))||customElements.define(t(i),g);break;case"lido-cell":customElements.get(t(i))||m();break;case"lido-text":customElements.get(t(i))||x()}}))}y();export{g as L,y as d}

package/dist/components/{p-JtdpRTRi.js → p-B4Jyt3YL.js}

@@ -1 +1 @@
-import{t,p as i,H as e,z as s,c as o,k as n,B as r,E as a,s as h,f as l,g as c,j as d,L as u,a as f,h as g,b as w}from"./index.js";const p=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.svgSource="",this.svgUrls=[],this.audioUrls=[],this.currentSvgIndex=0,this.moving=!1,this.value="",this.height="auto",this.width="auto",this.audio="",this.x="0px",this.y="0px",this.z="0",this.ariaLabel="",this.ariaHidden="",this.tabIndex=0,this.mode=s.ShowFlow,this.fingerHintUrl="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg",this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.fileIndex=-1,this.isDragging=!1,this.activePointerId=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){let t={fileIndex:-1,currentPathIndex:0,lastLength:0,totalPathLength:0,isDragging:!1,circle:null,paths:[],svg:null,proximityThreshold:375,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null};const i=this.svgUrls[this.currentSvgIndex];console.log("Loading SVG from URL:",i),i&&""!==i.trim()?(await this.fetchSVG(o(i)),console.log("SVG fetched successfully\n"),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){n(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles.bind(this)),window.addEventListener("load",this.updateStyles.bind(this)),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),console.log("svgUrls",this.svgUrls),this.currentSvgIndex=0,console.log("curentSvgIndex",this.currentSvgIndex),this.showSpeakIcon&&(r(this.el),this.el.append(r(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.updateStyles.bind(this)),window.removeEventListener("load",this.updateStyles.bind(this))}resetIdleTimer(t){null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.idleTimer=window.setTimeout((()=>{this.showFingerHint(t)}),3e3)}showFingerHint(t){var i;if(this.fingerImg)return;const e=t.paths[t.currentPathIndex];if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","image"),n=new Image;n.onload=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(this.fingerHintUrl))},n.onerror=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(a))},n.src=o(this.fingerHintUrl||a),s.setAttribute("width","40"),s.setAttribute("height","40"),s.setAttribute("id","lido-finger-hint"),s.style.pointerEvents="none",s.style.opacity="0.8",s.setAttribute("x","0"),s.setAttribute("y","0");const r=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");r.setAttribute("dur","2s"),r.setAttribute("repeatCount","indefinite");const h=document.createElementNS("http://www.w3.org/2000/svg","mpath");h.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(h),s.appendChild(r),null===(i=t.svg)||void 0===i||i.appendChild(s),this.fingerImg=s}hideFingerHint(){this.fingerImg&&this.fingerImg.parentNode&&this.fingerImg.parentNode.removeChild(this.fingerImg),this.fingerImg=null}async fetchSVG(t){console.log(`Fetching SVG from: ${t}`);const i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch SVG (${t}): ${i.statusText}`);return await i.text()}calculateBoundingBox(t,i=22){let e=1/0,s=1/0,o=-1/0,n=-1/0;return t.forEach((t=>{const i=t.getTotalLength();for(let r=0;r<=100;r++){const a=t.getPointAtLength(r/100*i);a.x<e&&(e=a.x),a.y<s&&(s=a.y),a.x>o&&(o=a.x),a.y>n&&(n=a.y)}})),e-=i,s-=i,o+=i,n+=i,{minX:e,minY:s,maxX:o,maxY:n}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),o=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${o.minX} ${o.minY} ${o.maxX-o.minX} ${o.maxY-o.minY}`)}getSVGElement(){return document.getElementById("lido-svgContainer").querySelector("svg")}getPaths(t){return Array.from(t.querySelectorAll("path, line"))}createFlowMarkersForPath(t){var i;if(!t)return;const e=t.ownerSVGElement;if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t.getAttribute("d")||""),s.setAttribute("stroke","blue"),s.setAttribute("stroke-width","2"),s.setAttribute("stroke-dasharray","6,6"),s.setAttribute("fill","none"),s.setAttribute("class","lido-flow-indicator"),null===(i=t.parentNode)||void 0===i||i.appendChild(s);let o=e.querySelector("defs#lido-flow-defs");o||(o=document.createElementNS("http://www.w3.org/2000/svg","defs"),o.setAttribute("id","lido-flow-defs"),e.insertBefore(o,e.firstChild));const n=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",n),r.setAttribute("markerWidth","10"),r.setAttribute("markerHeight","10"),r.setAttribute("refX","5"),r.setAttribute("refY","5"),r.setAttribute("orient","auto"),r.setAttribute("markerUnits","strokeWidth");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d","M0,0 L10,5 L0,10 L2,5 Z"),a.setAttribute("fill","blue"),r.appendChild(a),o.appendChild(r),s.setAttribute("marker-end",`url(#${n})`),s}updateFlowIndicators(t){t.svg.querySelectorAll(".lido-flow-indicator").forEach((i=>{t.mode===s.NoFlow?i.style.display="none":t.mode===s.ShowFlow&&(i.style.display="block")}))}setupDrawingPath(t){t.paths.forEach(((i,e)=>{const o=i.getTotalLength();i.setAttribute("id","lido-path-"+e);const n=i.cloneNode();n.style.opacity="100",n.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");n.setAttribute("stroke-width",r),n.setAttribute("stroke-dasharray",o.toString()),n.setAttribute("stroke-dashoffset",o.toString()),i.parentNode.appendChild(n,i),i.setAttribute("class","lido-trace-path"),n.setAttribute("class","lido-trace-path-green"),i.greenPath=n,i.classList.add(t.mode),t.mode===s.BlindTracing||t.mode===s.BlindFreeTrace?i.setAttribute("stroke","none"):(i.setAttribute("stroke","#000"),i.setAttribute("stroke-width",r),i.setAttribute("fill","none"),i.setAttribute("stroke-dasharray",o.toString()),i.setAttribute("stroke-dashoffset","0")),e===t.currentPathIndex&&t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(i))})),t.totalPathLength=t.paths[t.currentPathIndex].getTotalLength()}setupDraggableCircle(t){var i;const e=t.paths[0].getPointAtLength(0),s=document.createElementNS("http://www.w3.org/2000/svg","circle");t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width"),s.setAttribute("id","lido-draggableCircle"),s.setAttribute("cx",e.x.toString()),s.setAttribute("cy",e.y.toString()),s.setAttribute("r","calc(20)"),s.setAttribute("fill","#CF1565"),null===(i=t.svg)||void 0===i||i.appendChild(s),t.circle=s,this.resetIdleTimer(t)}addEventListeners(t){var i,e,s,o;if(!t.circle||!t.paths||0===t.paths.length)return;t.circle.addEventListener("pointerdown",(i=>{i.preventDefault();const e=this.getPointerPosition(i,t.svg),s={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};this.getDistanceSquared(e,s)<=t.proximityThreshold*t.proximityThreshold&&(t.isDragging=!0,t.activePointerId=i.pointerId,t.circle.setPointerCapture(i.pointerId)),this.hideFingerHint(),this.resetIdleTimer(t)})),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const n=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",n),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",n),null===(o=t.svg)||void 0===o||o.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,o,n,r,a;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;this.hideFingerHint();const h=this.getPointerPosition(t.pointerMoveEvent,t.svg),l={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};if(t.lastPointerPos){const i=h.x-t.lastPointerPos.x,e=h.y-t.lastPointerPos.y;if(i*i+e*e<1)return}const c=t.paths[t.currentPathIndex];if(!c)return void console.error("No valid path found at the current index");let d;if(d=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold*t.freeTraceProximityThreshold:t.proximityThreshold*t.proximityThreshold,this.getDistanceSquared(h,l)>d)return;const u=this.getClosestPointOnPath(c,h);if(!(this.getDistanceSquared(h,u)>d)){if(t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace){if(this.freeTraceUpdateCounter=(this.freeTraceUpdateCounter||0)+1,this.freeTraceUpdateCounter%2!=0)return;if(t.currentFreePath||(t.currentFreePath=[]),!t.currentFreePath[t.currentPathIndex]){const e=document.createElementNS("http://www.w3.org/2000/svg","polyline"),s=t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width");e.setAttribute("stroke-width",s),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke","lightgreen"),e.setAttribute("points",`${h.x},${h.y}`),null===(i=t.svg)||void 0===i||i.appendChild(e),t.currentFreePath[t.currentPathIndex]=e,t.currentFreePolylinePoints=t.currentFreePolylinePoints||[],t.currentFreePolylinePoints[t.currentPathIndex]=[{x:h.x,y:h.y}],t.lastPointerPos=h,t.freeTracePointsCount=1}const s=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x:h.x,y:h.y}),t.currentFreePolylinePoints[t.currentPathIndex]=n;const r=n.map((t=>`${t.x},${t.y}`)).join(" ");t.currentFreePath[t.currentPathIndex].setAttribute("points",r),t.circle.setAttribute("cx",h.x.toString()),t.circle.setAttribute("cy",h.y.toString());const a=null===(e=t.svg)||void 0===e?void 0:e.childNodes;let l=!1;for(let t=0;t<((null==a?void 0:a.length)||0);t++){const i=null==a?void 0:a.item(t);if(i&&"circle"===i.tagName){l=!0;break}}return!l&&t.circle&&(null===(o=t.svg)||void 0===o||o.appendChild(t.circle)),t.lastPointerPos=h,void(n.length>=s&&(this.moveToNextPath(t),t.currentFreePath[t.currentPathIndex]=null,t.currentFreePolylinePoints[t.currentPathIndex]=[],t.freeTracePointsCount=0))}if(t.isDragging&&u.length>=t.lastLength){t.lastLength=u.length,(Math.abs(u.x-l.x)>1||Math.abs(u.y-l.y)>1)&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString()));const i=null===(n=t.svg)||void 0===n?void 0:n.childNodes;let e=!1;for(let t=0;t<((null==i?void 0:i.length)||0);t++){const s=null==i?void 0:i.item(t);if(s&&"circle"===s.tagName){e=!0;break}}!e&&t.circle&&(null===(r=t.svg)||void 0===r||r.appendChild(t.circle)),null===(a=c.greenPath)||void 0===a||a.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString());const s=.95;let o=t.lastLength/t.totalPathLength,h=c.getPointAtLength(0),d=c.getPointAtLength(c.getTotalLength());this.getDistanceSquared(h,d)<200&&t.totalPathLength>50?o>=s&&(await this.animatePathToEnd(t,c),t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()}}}animatePathToEnd(t,i,e=300){if(!i||!t.svg)return Promise.resolve();if(t._animatingToEnd)return Promise.resolve();t._animatingToEnd=!0;const s=t.lastLength||0,o=i.getTotalLength(),n=performance.now(),r=i.greenPath||i.parentNode&&i.parentNode.querySelector(".lido-trace-path-green");return new Promise((a=>{const h=l=>{const c=Math.min(1,(l-n)/e),d=s+(o-s)*c;t.lastLength=d;const u=i.getPointAtLength(d);if(t.circle&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString())),r&&r.setAttribute("stroke-dashoffset",(t.totalPathLength-d).toString()),c<1)requestAnimationFrame(h);else{if(t.lastLength=o,t.circle){const e=i.getPointAtLength(o);t.circle.setAttribute("cx",e.x.toString()),t.circle.setAttribute("cy",e.y.toString())}r&&r.setAttribute("stroke-dashoffset","0"),t._animatingToEnd=!1,a()}};requestAnimationFrame(h)}))}async moveToNextContainer(){if(this.isDragging=!1,!this.moving){if(this.moving=!0,this.highlightTextId&&this.highlightLetter(this.currentSvgIndex),this.animationTrace&&await this.playTraceAnimation(),h(!0),this.el&&this.onCorrect&&await l(this.onCorrect,this.el),console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`),this.currentSvgIndex<this.svgUrls.length-1)return await new Promise((t=>setTimeout(t,1e3))),this.currentSvgIndex++,await this.initializeSVG(),document.getElementById("lido-svgContainer").style.visibility="visible",void(this.moving=!1);c(),console.log("All SVGs completed, hiding component."),d()}}getPointerPosition(t,i){var e;const s=i.createSVGPoint();s.x=t.clientX,s.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?s.matrixTransform(o):{x:t.clientX,y:t.clientY}}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i){const e=t.getTotalLength();let s={x:0,y:0,length:0},o=1/0,n={length:0},r=1/0;for(let s=0;s<=e;s+=40){const e=t.getPointAtLength(s),o=this.getDistanceSquared(i,e);o<r&&(r=o,n={x:e.x,y:e.y,length:s})}const a=Math.max(n.length-40,0),h=Math.min(n.length+40,e);for(let e=a;e<=h;e+=6){const n=t.getPointAtLength(e),r=this.getDistanceSquared(i,n);r<o&&(o=r,s={x:n.x,y:n.y,length:e})}return s}async loadAnotherSVG(t,i){t.isDragging=!1;try{t.svg&&this.cleanupPreviousSVG(t);const i=await this.fetchSVG(o(this.svgSource.split(";").map((t=>t.trim()))[this.currentSvgIndex]));this.insertSVG(i),t.svg=this.getSVGElement(),this.mode!==s.BlindTracing&&this.mode!==s.BlindFreeTrace||t.svg.querySelectorAll("image").forEach((t=>{t.style.display="none"})),t.paths=this.getPaths(t.svg),this.setupDrawingPath(t),this.setupDraggableCircle(t),this.addEventListeners(t)}catch(t){console.error(`Error loading SVG (${this.svgSource}):`,t)}}cleanupPreviousSVG(t){var i,e;t.circle&&(null===(i=t.svg)||void 0===i||i.removeChild(t.circle),t.circle=null),(null===(e=t.svg)||void 0===e?void 0:e.querySelectorAll(".lido-flow-indicator")).forEach((t=>{t.remove()})),t.currentPathIndex=0,t.lastLength=0,t.totalPathLength=t.paths[0].getTotalLength(),this.hideFingerHint(),this.resetIdleTimer(t)}async moveToNextPath(t){var i,e;if(t.isDragging=!1,t.currentPathIndex++,t.lastLength=0,this.hideFingerHint(),t.currentPathIndex>=t.paths.length)return void this.moveToNextContainer();const o=t.paths[t.currentPathIndex];if(!o)return void console.error("No valid path found at the next index");t.totalPathLength=o.getTotalLength();const n=o.getPointAtLength(0);null===(i=t.circle)||void 0===i||i.setAttribute("cx",n.x.toString()),null===(e=t.circle)||void 0===e||e.setAttribute("cy",n.y.toString()),t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(o)),this.resetIdleTimer(t)}async playTraceAnimation(){const t=document.getElementById(this.id);t&&(t.classList.add("trace-animate"),await new Promise((t=>setTimeout(t,500))),t.classList.remove("trace-animate"))}async highlightLetter(t){if(!document.getElementById(u))return;const i=this.el;if(!i)return;const e=this.highlightTextId;if(!e)return;const s=document.getElementById(e);if(!s)return;const n=this.audio;if(!n)return;this.audioUrls=n.split(";").map((t=>t.trim())),console.log("audioUrls",this.audioUrls);const r=s.getAttribute("span-type");if(!r)return;const a=s.querySelector(".lido-text-content");if(a){if("letters"===r){const e=a.querySelectorAll(".text-letters");if(t<0||t>=e.length)return;const n=e[t];if(n){const t=i.querySelector("#lido-svgContainer");if(await l("this.alignMatch='true';",s,t),t.style.animation="trace-animation 0.4s forwards",t.style.setProperty("--trace-width",n.offsetWidth-5+"px"),t.style.setProperty("--trace-height",n.offsetHeight-5+"px"),await l("this.alignMatch='true';",n,t),setTimeout((()=>{n.classList.add("letter-highlight"),t.style.transform="",t.style.animation="",t.style.visibility="hidden"}),500),this.audioUrls[this.currentSvgIndex]){console.log("Playing audio:",this.audioUrls[this.currentSvgIndex]);const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}if("words"===r){const i=a.querySelectorAll(".text-words");if(t<0||t>=i.length)return;const e=i[t];if(e&&(e.classList.add("word-highlight"),this.audioUrls[this.currentSvgIndex])){const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:f(this.height,t),width:f(this.width,t),top:f(this.y,t),left:f(this.x,t),zIndex:this.z}}render(){return g(w,{key:"253a2c8840d47f1758eb2e025de799921ba7e972",class:"lido-trace",id:this.id,audio:this.audio,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,tabindex:this.tabIndex,"disable-speak":this.disableSpeak},g("div",{key:"182018457f29150918f52ef92bc0fc4fc70bb463",style:this.style,id:"lido-svgContainer"}))}static get assetsDirs(){return["svg","images"]}get el(){return this}static get watchers(){return{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}}static get style(){return":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}"}},[0,"lido-trace",{showSpeakIcon:[4,"show-speak-icon"],id:[1],svgSource:[1,"svg-source"],value:[1],height:[1],width:[1],audio:[1],x:[1],y:[1],z:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],tabIndex:[2,"tab-index"],mode:[1],fingerHintUrl:[1,"finger-hint-url"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],highlightTextId:[1,"highlight-text-id"],animationTrace:[4,"animation-trace"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],svgUrls:[32],audioUrls:[32],currentSvgIndex:[32],moving:[32],style:[32],fileIndex:[32],isDragging:[32],activePointerId:[32],freeTraceUpdateCounter:[32],idleTimer:[32],fingerImg:[32]},void 0,{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}]);function m(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),p))}))}m();export{p as L,m as d}
+import{t,p as i,H as e,z as s,c as o,k as n,B as r,E as a,s as h,f as l,g as c,L as d,j as u,a as f,h as w,b as g}from"./index.js";const m=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.svgSource="",this.svgUrls=[],this.audioUrls=[],this.currentSvgIndex=0,this.moving=!1,this.value="",this.height="auto",this.width="auto",this.audio="",this.x="0px",this.y="0px",this.z="0",this.ariaLabel="",this.ariaHidden="",this.tabIndex=0,this.mode=s.ShowFlow,this.fingerHintUrl="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg",this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.fileIndex=-1,this.isDragging=!1,this.activePointerId=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){let t={fileIndex:-1,currentPathIndex:0,lastLength:0,totalPathLength:0,isDragging:!1,circle:null,paths:[],svg:null,proximityThreshold:375,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null};const i=this.svgUrls[this.currentSvgIndex];console.log("Loading SVG from URL:",i),i&&""!==i.trim()?(await this.fetchSVG(o(i)),console.log("SVG fetched successfully\n"),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){n(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles.bind(this)),window.addEventListener("load",this.updateStyles.bind(this)),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),console.log("svgUrls",this.svgUrls),this.currentSvgIndex=0,console.log("curentSvgIndex",this.currentSvgIndex),this.showSpeakIcon&&(r(this.el),this.el.append(r(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.updateStyles.bind(this)),window.removeEventListener("load",this.updateStyles.bind(this))}resetIdleTimer(t){null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.idleTimer=window.setTimeout((()=>{this.showFingerHint(t)}),3e3)}showFingerHint(t){var i;if(this.fingerImg)return;const e=t.paths[t.currentPathIndex];if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","image"),n=new Image;n.onload=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(this.fingerHintUrl))},n.onerror=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(a))},n.src=o(this.fingerHintUrl||a),s.setAttribute("width","40"),s.setAttribute("height","40"),s.setAttribute("id","lido-finger-hint"),s.style.pointerEvents="none",s.style.opacity="0.8",s.setAttribute("x","0"),s.setAttribute("y","0");const r=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");r.setAttribute("dur","2s"),r.setAttribute("repeatCount","indefinite");const h=document.createElementNS("http://www.w3.org/2000/svg","mpath");h.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(h),s.appendChild(r),null===(i=t.svg)||void 0===i||i.appendChild(s),this.fingerImg=s}hideFingerHint(){this.fingerImg&&this.fingerImg.parentNode&&this.fingerImg.parentNode.removeChild(this.fingerImg),this.fingerImg=null}async fetchSVG(t){console.log(`Fetching SVG from: ${t}`);const i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch SVG (${t}): ${i.statusText}`);return await i.text()}calculateBoundingBox(t,i=22){let e=1/0,s=1/0,o=-1/0,n=-1/0;return t.forEach((t=>{const i=t.getTotalLength();for(let r=0;r<=100;r++){const a=t.getPointAtLength(r/100*i);a.x<e&&(e=a.x),a.y<s&&(s=a.y),a.x>o&&(o=a.x),a.y>n&&(n=a.y)}})),e-=i,s-=i,o+=i,n+=i,{minX:e,minY:s,maxX:o,maxY:n}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),o=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${o.minX} ${o.minY} ${o.maxX-o.minX} ${o.maxY-o.minY}`)}getSVGElement(){return document.getElementById("lido-svgContainer").querySelector("svg")}getPaths(t){return Array.from(t.querySelectorAll("path, line"))}createFlowMarkersForPath(t){var i;if(!t)return;const e=t.ownerSVGElement;if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t.getAttribute("d")||""),s.setAttribute("stroke","blue"),s.setAttribute("stroke-width","2"),s.setAttribute("stroke-dasharray","6,6"),s.setAttribute("fill","none"),s.setAttribute("class","lido-flow-indicator"),null===(i=t.parentNode)||void 0===i||i.appendChild(s);let o=e.querySelector("defs#lido-flow-defs");o||(o=document.createElementNS("http://www.w3.org/2000/svg","defs"),o.setAttribute("id","lido-flow-defs"),e.insertBefore(o,e.firstChild));const n=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",n),r.setAttribute("markerWidth","10"),r.setAttribute("markerHeight","10"),r.setAttribute("refX","5"),r.setAttribute("refY","5"),r.setAttribute("orient","auto"),r.setAttribute("markerUnits","strokeWidth");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d","M0,0 L10,5 L0,10 L2,5 Z"),a.setAttribute("fill","blue"),r.appendChild(a),o.appendChild(r),s.setAttribute("marker-end",`url(#${n})`),s}updateFlowIndicators(t){t.svg.querySelectorAll(".lido-flow-indicator").forEach((i=>{t.mode===s.NoFlow?i.style.display="none":t.mode===s.ShowFlow&&(i.style.display="block")}))}setupDrawingPath(t){t.paths.forEach(((i,e)=>{const o=i.getTotalLength();i.setAttribute("id","lido-path-"+e);const n=i.cloneNode();n.style.opacity="100",n.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");n.setAttribute("stroke-width",r),n.setAttribute("stroke-dasharray",o.toString()),n.setAttribute("stroke-dashoffset",o.toString()),i.parentNode.appendChild(n,i),i.setAttribute("class","lido-trace-path"),n.setAttribute("class","lido-trace-path-green"),i.greenPath=n,i.classList.add(t.mode),t.mode===s.BlindTracing||t.mode===s.BlindFreeTrace?i.setAttribute("stroke","none"):(i.setAttribute("stroke","#000"),i.setAttribute("stroke-width",r),i.setAttribute("fill","none"),i.setAttribute("stroke-dasharray",o.toString()),i.setAttribute("stroke-dashoffset","0")),e===t.currentPathIndex&&t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(i))})),t.totalPathLength=t.paths[t.currentPathIndex].getTotalLength()}setupDraggableCircle(t){var i;const e=t.paths[0].getPointAtLength(0),s=document.createElementNS("http://www.w3.org/2000/svg","circle");t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width"),s.setAttribute("id","lido-draggableCircle"),s.setAttribute("cx",e.x.toString()),s.setAttribute("cy",e.y.toString()),s.setAttribute("r","calc(20)"),s.setAttribute("fill","#CF1565"),null===(i=t.svg)||void 0===i||i.appendChild(s),t.circle=s,this.resetIdleTimer(t)}addEventListeners(t){var i,e,s,o;if(!t.circle||!t.paths||0===t.paths.length)return;t.circle.addEventListener("pointerdown",(i=>{i.preventDefault();const e=this.getPointerPosition(i,t.svg),s={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};this.getDistanceSquared(e,s)<=t.proximityThreshold*t.proximityThreshold&&(t.isDragging=!0,t.activePointerId=i.pointerId,t.circle.setPointerCapture(i.pointerId)),this.hideFingerHint(),this.resetIdleTimer(t)})),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const n=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",n),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",n),null===(o=t.svg)||void 0===o||o.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,o,n,r,a;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;this.hideFingerHint();const h=this.getPointerPosition(t.pointerMoveEvent,t.svg),l={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};if(t.lastPointerPos){const i=h.x-t.lastPointerPos.x,e=h.y-t.lastPointerPos.y;if(i*i+e*e<1)return}const c=t.paths[t.currentPathIndex];if(!c)return void console.error("No valid path found at the current index");let d;if(d=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold*t.freeTraceProximityThreshold:t.proximityThreshold*t.proximityThreshold,this.getDistanceSquared(h,l)>d)return;const u=this.getClosestPointOnPath(c,h);if(!(this.getDistanceSquared(h,u)>d)){if(t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace){if(this.freeTraceUpdateCounter=(this.freeTraceUpdateCounter||0)+1,this.freeTraceUpdateCounter%2!=0)return;if(t.currentFreePath||(t.currentFreePath=[]),!t.currentFreePath[t.currentPathIndex]){const e=document.createElementNS("http://www.w3.org/2000/svg","polyline"),s=t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width");e.setAttribute("stroke-width",s),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke","lightgreen"),e.setAttribute("points",`${h.x},${h.y}`),null===(i=t.svg)||void 0===i||i.appendChild(e),t.currentFreePath[t.currentPathIndex]=e,t.currentFreePolylinePoints=t.currentFreePolylinePoints||[],t.currentFreePolylinePoints[t.currentPathIndex]=[{x:h.x,y:h.y}],t.lastPointerPos=h,t.freeTracePointsCount=1}const s=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x:h.x,y:h.y}),t.currentFreePolylinePoints[t.currentPathIndex]=n;const r=n.map((t=>`${t.x},${t.y}`)).join(" ");t.currentFreePath[t.currentPathIndex].setAttribute("points",r),t.circle.setAttribute("cx",h.x.toString()),t.circle.setAttribute("cy",h.y.toString());const a=null===(e=t.svg)||void 0===e?void 0:e.childNodes;let l=!1;for(let t=0;t<((null==a?void 0:a.length)||0);t++){const i=null==a?void 0:a.item(t);if(i&&"circle"===i.tagName){l=!0;break}}return!l&&t.circle&&(null===(o=t.svg)||void 0===o||o.appendChild(t.circle)),t.lastPointerPos=h,void(n.length>=s&&(this.moveToNextPath(t),t.currentFreePath[t.currentPathIndex]=null,t.currentFreePolylinePoints[t.currentPathIndex]=[],t.freeTracePointsCount=0))}if(t.isDragging&&u.length>=t.lastLength){t.lastLength=u.length,(Math.abs(u.x-l.x)>1||Math.abs(u.y-l.y)>1)&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString()));const i=null===(n=t.svg)||void 0===n?void 0:n.childNodes;let e=!1;for(let t=0;t<((null==i?void 0:i.length)||0);t++){const s=null==i?void 0:i.item(t);if(s&&"circle"===s.tagName){e=!0;break}}!e&&t.circle&&(null===(r=t.svg)||void 0===r||r.appendChild(t.circle)),null===(a=c.greenPath)||void 0===a||a.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString());const s=.95;let o=t.lastLength/t.totalPathLength,h=c.getPointAtLength(0),d=c.getPointAtLength(c.getTotalLength());this.getDistanceSquared(h,d)<200&&t.totalPathLength>50?o>=s&&(await this.animatePathToEnd(t,c),t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()}}}animatePathToEnd(t,i,e=300){if(!i||!t.svg)return Promise.resolve();if(t._animatingToEnd)return Promise.resolve();t._animatingToEnd=!0;const s=t.lastLength||0,o=i.getTotalLength(),n=performance.now(),r=i.greenPath||i.parentNode&&i.parentNode.querySelector(".lido-trace-path-green");return new Promise((a=>{const h=l=>{const c=Math.min(1,(l-n)/e),d=s+(o-s)*c;t.lastLength=d;const u=i.getPointAtLength(d);if(t.circle&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString())),r&&r.setAttribute("stroke-dashoffset",(t.totalPathLength-d).toString()),c<1)requestAnimationFrame(h);else{if(t.lastLength=o,t.circle){const e=i.getPointAtLength(o);t.circle.setAttribute("cx",e.x.toString()),t.circle.setAttribute("cy",e.y.toString())}r&&r.setAttribute("stroke-dashoffset","0"),t._animatingToEnd=!1,a()}};requestAnimationFrame(h)}))}async moveToNextContainer(){if(this.isDragging=!1,this.moving)return;if(this.moving=!0,this.highlightTextId&&this.highlightLetter(this.currentSvgIndex),this.animationTrace&&await this.playTraceAnimation(),h(!0),console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`),this.currentSvgIndex<this.svgUrls.length-1)return await new Promise((t=>setTimeout(t,1e3))),this.currentSvgIndex++,await this.initializeSVG(),document.getElementById("lido-svgContainer").style.visibility="visible",this.moving=!1,void(this.el&&this.onCorrect&&await l(this.onCorrect,this.el));c(),console.log("All SVGs completed, hiding component.");const t=document.querySelector(d),i=t.getAttribute("onCorrect");t&&i&&(await new Promise((t=>setTimeout(t,1e3))),await l(i,this.el)),u()}getPointerPosition(t,i){var e;const s=i.createSVGPoint();s.x=t.clientX,s.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?s.matrixTransform(o):{x:t.clientX,y:t.clientY}}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i){const e=t.getTotalLength();let s={x:0,y:0,length:0},o=1/0,n={length:0},r=1/0;for(let s=0;s<=e;s+=40){const e=t.getPointAtLength(s),o=this.getDistanceSquared(i,e);o<r&&(r=o,n={x:e.x,y:e.y,length:s})}const a=Math.max(n.length-40,0),h=Math.min(n.length+40,e);for(let e=a;e<=h;e+=6){const n=t.getPointAtLength(e),r=this.getDistanceSquared(i,n);r<o&&(o=r,s={x:n.x,y:n.y,length:e})}return s}async loadAnotherSVG(t,i){t.isDragging=!1;try{t.svg&&this.cleanupPreviousSVG(t);const i=await this.fetchSVG(o(this.svgSource.split(";").map((t=>t.trim()))[this.currentSvgIndex]));this.insertSVG(i),t.svg=this.getSVGElement(),this.mode!==s.BlindTracing&&this.mode!==s.BlindFreeTrace||t.svg.querySelectorAll("image").forEach((t=>{t.style.display="none"})),t.paths=this.getPaths(t.svg),this.setupDrawingPath(t),this.setupDraggableCircle(t),this.addEventListeners(t)}catch(t){console.error(`Error loading SVG (${this.svgSource}):`,t)}}cleanupPreviousSVG(t){var i,e;t.circle&&(null===(i=t.svg)||void 0===i||i.removeChild(t.circle),t.circle=null),(null===(e=t.svg)||void 0===e?void 0:e.querySelectorAll(".lido-flow-indicator")).forEach((t=>{t.remove()})),t.currentPathIndex=0,t.lastLength=0,t.totalPathLength=t.paths[0].getTotalLength(),this.hideFingerHint(),this.resetIdleTimer(t)}async moveToNextPath(t){var i,e;if(t.isDragging=!1,t.currentPathIndex++,t.lastLength=0,this.hideFingerHint(),t.currentPathIndex>=t.paths.length)return void this.moveToNextContainer();const o=t.paths[t.currentPathIndex];if(!o)return void console.error("No valid path found at the next index");t.totalPathLength=o.getTotalLength();const n=o.getPointAtLength(0);null===(i=t.circle)||void 0===i||i.setAttribute("cx",n.x.toString()),null===(e=t.circle)||void 0===e||e.setAttribute("cy",n.y.toString()),t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(o)),this.resetIdleTimer(t)}async playTraceAnimation(){const t=document.getElementById(this.id);t&&(t.classList.add("trace-animate"),await new Promise((t=>setTimeout(t,500))),t.classList.remove("trace-animate"))}async highlightLetter(t){if(!document.getElementById(d))return;const i=this.el;if(!i)return;const e=this.highlightTextId;if(!e)return;const s=document.getElementById(e);if(!s)return;const n=this.audio;if(!n)return;this.audioUrls=n.split(";").map((t=>t.trim())),console.log("audioUrls",this.audioUrls);const r=s.getAttribute("span-type");if(!r)return;const a=s.querySelector(".lido-text-content");if(a){if("letters"===r){const e=a.querySelectorAll(".text-letters");if(t<0||t>=e.length)return;const n=e[t];if(n){const t=i.querySelector("#lido-svgContainer");if(await l("this.alignMatch='true';",s,t),t.style.animation="trace-animation 0.4s forwards",t.style.setProperty("--trace-width",n.offsetWidth-5+"px"),t.style.setProperty("--trace-height",n.offsetHeight-5+"px"),await l("this.alignMatch='true';",n,t),setTimeout((()=>{n.classList.add("letter-highlight"),t.style.transform="",t.style.animation="",t.style.visibility="hidden"}),500),this.audioUrls[this.currentSvgIndex]){console.log("Playing audio:",this.audioUrls[this.currentSvgIndex]);const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}if("words"===r){const i=a.querySelectorAll(".text-words");if(t<0||t>=i.length)return;const e=i[t];if(e&&(e.classList.add("word-highlight"),this.audioUrls[this.currentSvgIndex])){const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:f(this.height,t),width:f(this.width,t),top:f(this.y,t),left:f(this.x,t),zIndex:this.z}}render(){return w(g,{key:"3f7da73f3c075a90ea0ce27022ed06a60c814fb4",class:"lido-trace",id:this.id,audio:this.audio,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,tabindex:this.tabIndex,"disable-speak":this.disableSpeak},w("div",{key:"209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4",style:this.style,id:"lido-svgContainer"}))}static get assetsDirs(){return["svg","images"]}get el(){return this}static get watchers(){return{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}}static get style(){return":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}"}},[0,"lido-trace",{showSpeakIcon:[4,"show-speak-icon"],id:[1],svgSource:[1,"svg-source"],value:[1],height:[1],width:[1],audio:[1],x:[1],y:[1],z:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],tabIndex:[2,"tab-index"],mode:[1],fingerHintUrl:[1,"finger-hint-url"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],highlightTextId:[1,"highlight-text-id"],animationTrace:[4,"animation-trace"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],svgUrls:[32],audioUrls:[32],currentSvgIndex:[32],moving:[32],style:[32],fileIndex:[32],isDragging:[32],activePointerId:[32],freeTraceUpdateCounter:[32],idleTimer:[32],fingerImg:[32]},void 0,{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}]);function p(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),m))}))}p();export{m as L,p as d}

package/dist/components/p-BToRx4je.js

@@ -0,0 +1 @@
+import{t,p as e,H as i,T as o,n as a,c as n,i as r,o as s,q as l,h as u,b as h,r as d}from"./index.js";import{d as c,i as g}from"./p-XacgbiAe.js";const m=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.showDropBorder=!0,this.appendToDropOnCompletion=!1,this.id="",this.objective="",this.customStyle="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="auto",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.bgImage="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.canplay=!0,this.showCheck=!1,this.isContinueOnCorrect=!1,this.isAllowOnlyCorrect=!1,this.baseUrl="",this.margin="",this.showPrevButton="false",this.showNextButton="false",this.delayVisible="",this.disableSpeak=!1,this.templateId="",this.highlightWordByWord=!1,this.instructName="",this.speakFlag=!1}languageChanged(t){const e=t||this.resolveLanguage();this.updateChildTextLanguage(e)}componentWillLoad(){const t=this.resolveLanguage();this.updateChildTextLanguage(t),this.resolveInstructionAudio()}resolveInstructionAudio(){var t;this.instructName=null!==(t={flashcard:"instruction.flashcards",mcq:"instruction.mcq",tracing:"instruction.tracing",dragAndDrop:"instruction.dragAndDrop",arrangeLetters:"arrangeLetters",balancing:"balancing",balloonPop:"balloonPop",blender:"blender",bubbleType:"bubbleType",calculator:"calculator",categorize:"categorize",checkerBlocks:"checkerBlocks",createSentence:"createSentence",fillAnswer:"fillAnswer",fillBlank:"fillBlank",fillUp:"fillUp",flashcardtemplate:"flashcard",foodJar:"foodJar",grid:"grid",imageMatchWithQuestionImageAndMultiOption:"imageMatchWithQuestionImageAndMultiOption",inventedSpelling:"inventedSpelling",jumpSentence:"jumpSentence",letterBoard:"letterBoard",letterIdentification:"letterIdentification",letterPairing:"letterPairing",makeSentence:"makeSentence",matchingCard:"matchingCard",multiplyBeeds:"multiplyBeeds",nimbleTable:"nimbleTable",numberBoardOneTwo:"numberBoardOneTwo",numberPair:"numberPair",openWindow:"openWindow",orderTractor:"orderTractor",phonicTractor:"phonicTractor",pictureMeaningCocos:"pictureMeaningCocos",pictureWordMatch1:"pictureWordMatch1",pictureWordMatch2:"pictureWordMatch2",puzzleGame:"puzzleGame",questionBoard:"questionBoard",quizLiteracySentenceSentence:"quizLiteracySentenceSentence",quizLiteracySoundOnlyImage:"quizLiteracySoundOnlyImage",quizLiteracySoundOnlySentence:"quizLiteracySoundOnlySentence",quizLiteracySoundOnlyWord:"quizLiteracySoundonlyWord",quizLiteracyAndShapes1:"quizLiteracyAndShapes1",quizLiteracyImageWithText:"quizLiteracyImageWithText",quizliteracyImageWord:"quizliteracyImageWord",quizMathBiggerAndSmaller:"quizMathBiggerAndSmaller",quizMathBiggestAndSmallest:"quizMathBiggestAndSmallest",quizmathCustomNumberMagnitude:"quizmathCustomNumberMagnitude",quizMathHowMany:"quizMathHowMany",quizmathMissingnumberDrag:"quizmathMissingnumberDrag",quizMathNumberIdentification:"quizMathNumberIdentification",quizMathOperationWithobjects:"quizMathOperationWithobjects",quizMathoperationWithoutObjects:"quizMathoperationWithoutObjects",quizMathRecognizeNumber:"quizMathRecognizeNumber",quizMathShapes:"quizMathShapes",reorder:"reorder",rocketGame:"rocketGame",rowBlock:"rowBlock",sequenceBox1:"sequenceBox1",shapeTractor:"shapeTractor",spellDoor:"spellDoor",storyMaking:"storyMaking",storyTale:"storyTale",sumTogether:"sumTogether",tag:"tag",total:"total",writeCard:"writeCard",writeLetter:"writeLetter",writeNumber:"writeNumber",writeSet:"writeSet",writeWord:"writeWord",numberIdentification:"numberIdentification",wordBuildingWithAndWithoutImage:"wordBuildingWithAndWithoutImage",subsWithAndWithoutImage:"subsWithAndWithoutImage",sentenceMatchTemplate:"sentenceMatch",pictureClues:"pictureClues",palEgmaCalculateSumAndSumTogether:"palEgmaCalculateSumAndSumTogether",palEgmaPatternMatching:"palEgmaPatternMatchingAudio",palEgmaWordProblem:"palEgmaWordProblem",palEgraArrangePictures:"palEgraArrangePicturesAudio",palEgraBuildWord:"palEgraBuildWordAudio",palEgraMCQWithImage:"palEgraMCQWithImage",palEgraOddOneOut:"palEgraOddOneOutAudio",palEgraOptionWithAudio:"palEgraOptionWithAudio",palEgraWordFormation:"palEgraWordFormationAudio",palEgraWordMatch:"palEgraWordMatch",substractionWithImage:"substractionWithImageAudio",substractionWithoutImage:"substractionWithoutImageAudio",numberIdentificationWithImage:"numberIdentificationWithImageAudio",numberIdentificationWithoutImage:"numberIdentificationWithoutImageAudio",wordBuildingWithImage:"wordBuildingWithImageAudio",wordBuildingWithoutImage:"wordBuildingWithoutImageAudio",pictureWordMatchMultipleImages:"pictureWordMatchMultipleImagesAudio",pictureWordMatchSingleImage:"pictureWordMatchSingleImageAudio",sentenceMatch:"sentenceMatchAudio",imageMatch:"imageMatchAudio",palStoryTale:"palStoryTaleAudio",palEgmaWordProblemDragnDrop:"palEgmaWordProblemDragnDropAudio",palEgmaWordProblemClick:"palEgmaWordProblemClickAudio",palInventedSpelling:"palInventedSpellingAudio",palLetterIdentification:"palLetterIdentificationAudio",palStoryMaking:"palStoryMakingAudio",palegmasumtogether:"palegmasumtogetherAudio",palegmamultioption:"palegmamultioptionAudio",palegraoptionaudio:"palegraoptionAudio",palegrawordmatch:"palegrawordmatchAudio",palegramcqimages:"palegramcqimagesAudio"}[this.templateId])&&void 0!==t?t:"";const e=document.querySelector("lido-home");if(!e)return;const i=e.getAttribute(o)||"";this.speakFlag=i.includes(this.templateId),this.speakFlag||e.setAttribute(o,[i,this.templateId].filter(Boolean).join(","))}resolveLanguage(){var t,e;const i=this.el.closest("lido-root"),o=(null==i?void 0:i.Lang)||"";if(null==o?void 0:o.trim())return o;const a=this.el.closest("lido-home"),n=(null==a?void 0:a.Lang)||"";if(null==n?void 0:n.trim())return n;if(null===(t=this.Lang)||void 0===t?void 0:t.trim())return this.Lang;const r=this.el.getAttribute("Lang");return(null==r?void 0:r.trim())?r:null===(e=this.el.textContent)||void 0===e?void 0:e.trim()}convertToPixels(t,e=document.body){if(!t)return 0;if(t.endsWith("px"))return parseFloat(t);const i=document.createElement("div");i.style.position="absolute",i.style.visibility="hidden",i.style.height=t,e.appendChild(i);const o=i.offsetHeight;return e.removeChild(i),o}scaleContainer(t){const e=this.getClosestParentWithWidth();let i=0;e&&(i=Math.min(e.clientWidth/1600,e.clientHeight/900)),t.style.transform=`translate(-50%, -50%) scale(${0!=i?i:a()})`,t.style.left="50%",t.style.top="50%",t.style.position="absolute",this.screenOrientation()}getClosestParentWithWidth(){let t=this.el.parentElement;for(;t;){if(t.offsetWidth>0)return t;t=t.parentElement}return null}screenOrientation(){window.innerHeight>window.innerWidth?(this.el.style.height="1600px",this.el.style.width="900px"):(this.el.style.height="900px",this.el.style.width="1600px")}updateChildTextLanguage(t){const e=t||g.language||"en";g.changeLanguage(e),this.el.querySelectorAll("lido-text").forEach((t=>{t.Lang=e,t.dispatchEvent(new CustomEvent("languageChanged",{bubbles:!0}))}))}componentDidLoad(){this.scaleContainer(this.el);const t=this.bgImage?n(this.bgImage):"";if(document.body.style.pointerEvents="auto",document.body.style.backgroundColor=this.bgColor,document.body.style.backgroundImage=t?`url(${t})`:"none",document.body.style.backgroundPosition=t?"bottom":"none",window.addEventListener("resize",(()=>this.scaleContainer(this.el))),window.addEventListener("load",(()=>this.scaleContainer(this.el))),this.templateId?setTimeout((()=>{this.el.setAttribute("onEntry",`${this.templateId}.speak='${!this.speakFlag}'; `+this.el.getAttribute("onEntry")),r(this.el,this.type)}),100):r(this.el,this.type),this.customStyle){const t=document.createElement("style");t.innerHTML=this.customStyle,document.head.appendChild(t)}const e=this.resolveLanguage();this.updateChildTextLanguage(e),setTimeout((()=>{s()}),100),d(),l.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="",d(),l.getI().stop()}render(){const t={backgroundColor:this.bgColor,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",margin:this.margin,userSelect:"none"};return console.log("🚀 ~ LidoContainer ~ canplay:",this.canplay),u(h,{key:"b94060e2432a7e7d8580ffb53ceef4124a4fba25",id:"lido-container",Lang:this.Lang,"tab-index":0,class:"lido-container",objective:this.objective,baseUrl:this.baseUrl,style:t,"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,"highlight-word-by-word":`${this.highlightWordByWord}`},u("lido-text",{key:"7b433aa25be08cef849e9cefda243cebd7f6aef6",visible:"false",id:this.templateId,audio:"",string:this.instructName}),u("slot",{key:"95705c210ed7efbcf06e0ad7779b8c00fa4e1818"}))}get el(){return this}static get watchers(){return{Lang:[{languageChanged:0}]}}static get style(){return".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}"}},[260,"lido-container",{Lang:[1,"lang"],showDropBorder:[4,"show-drop-border"],appendToDropOnCompletion:[4,"append-to-drop-on-completion"],id:[1],objective:[1],customStyle:[1,"custom-style"],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],bgImage:[1,"bg-image"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],canplay:[4],showCheck:[4,"show-check"],isContinueOnCorrect:[4,"is-continue-on-correct"],isAllowOnlyCorrect:[4,"is-allow-only-correct"],baseUrl:[1,"base-url"],margin:[1],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],showPrevButton:[1,"show-prev-button"],showNextButton:[1,"show-next-button"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],templateId:[1,"template-id"],highlightWordByWord:[4,"highlight-word-by-word"],instructName:[32],speakFlag:[32]},void 0,{Lang:[{languageChanged:0}]}]);function p(){"undefined"!=typeof customElements&&["lido-container","lido-text"].forEach((e=>{switch(e){case"lido-container":customElements.get(t(e))||customElements.define(t(e),m);break;case"lido-text":customElements.get(t(e))||c()}}))}p();export{m as L,p as d}