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

package/dist/components/p-DLyacZap.js

@@ -0,0 +1 @@
+import{t,p as i,H as s,k as o,i as e,u as a,v as l,a as n,h,b as d}from"./index.js";const r=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.id="",this.value="",this.z="0",this.tabIndex=0,this.visible=!1,this.onEntry="",this.delayVisible="",this.floatDirection="bottomToTop",this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}componentDidLoad(){o(this.el,this.delayVisible),e(this.el,this.type),this.initializeFloatElement()}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}initializeFloatElement(){let t=0;Array.from(this.el.children).forEach((i=>{const s=i;s.style.visibility="hidden",setTimeout((()=>{s.style.visibility="visible",a(s)}),t),t+=1e3,i.addEventListener("click",(()=>{l(s)}))}))}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:"leftToRight"!==this.floatDirection?"100%":n(this.height,t),width:"leftToRight"===this.floatDirection?"100%":n(this.width,t),backgroundColor:n(this.bgColor,t),zIndex:this.z,display:this.visible?"flex":"none"}}render(){return h(d,{key:"26ada4c2834a58fe1f45348a32f9d1dcecb79a14",class:"lido-float","float-direction":this.floatDirection,id:this.id,"tab-index":this.tabIndex,style:this.style,onEntry:this.onEntry},h("slot",{key:"6f4ca358f564e268390f221cc1f84af1f303761b"}))}get el(){return this}static get style(){return".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}#removeShadow{box-shadow:unset !important}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}"}},[260,"lido-float",{id:[1],value:[1],z:[1],tabIndex:[2,"tab-index"],visible:[4],onEntry:[1,"on-entry"],width:[1],height:[1],bgColor:[1,"bg-color"],type:[1],delayVisible:[1,"delay-visible"],floatDirection:[1,"float-direction"],style:[32]}]);function c(){"undefined"!=typeof customElements&&["lido-float"].forEach((i=>{"lido-float"===i&&(customElements.get(t(i))||customElements.define(t(i),r))}))}c();export{r as L,c as d}

package/dist/components/p-DONbWJGn.js

@@ -0,0 +1 @@
+import{t,p as i,H as s,m as o,h as e,b as h}from"./index.js";const n=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin=""}componentDidLoad(){setTimeout((()=>{const t=this.el.parentElement;if(!t)return;const i=t.offsetWidth,s=t.offsetHeight;Array.from(this.el.children).forEach((t=>{const o=i-t.offsetWidth,e=s-t.offsetHeight,h=Math.random()*o,n=Math.random()*e;t.style.position="absolute",t.style.left=`${h}px`,t.style.top=`${n}px`}))}),50),this.showSpeakIcon&&o(this.el)}render(){return e(h,{key:"e0ed354e54ea3c5112d0e068b2a94356ef437874",class:"lido-random",type:this.type,"tab-index":this.tabIndex,value:this.value,style:{height:this.height,width:this.width,top:this.y,left:this.x,display:this.visible?"block":"none",zIndex:this.z,backgroundColor:this.bgColor,margin:this.margin},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,minDrops:this.minDrops,maxDrops:this.maxDrops,onInCorrect:this.onInCorrect,onEntry:this.onEntry},e("slot",{key:"ed0386cda3ba55d89fb08607775a49a4180f08b3"}))}get el(){return this}static get style(){return".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}"}},[260,"lido-random",{showSpeakIcon:[4,"show-speak-icon"],id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],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"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1]}]);function a(){"undefined"!=typeof customElements&&["lido-random"].forEach((i=>{"lido-random"===i&&(customElements.get(t(i))||customElements.define(t(i),n))}))}a();export{n as L,a as d}

package/dist/components/p-DVTigdH_.js

@@ -0,0 +1 @@
+import{t as i,p as t,H as e,a as s,k as a,i as d,h,b as n}from"./index.js";const o=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!0,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.flipped=!1,this.margin="",this.disableSpeak=!1,this.style={},this.delayVisible="",this.updateStyles=()=>{const i=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:s(this.height,i)||"200px",width:s(this.width,i)||"200px",backgroundColor:s(this.bgColor,i),top:s(this.y,i),left:s(this.x,i),zIndex:this.z,display:this.visible?this.display?s(this.display,i):"inline-block":"none",flexDirection:this.direction?s(this.direction,i):void 0,margin:s(this.margin,i)}},this.handleFlip=()=>{this.flipped=!this.flipped}}handleFlippedChange(){}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles),window.addEventListener("load",this.updateStyles)}componentDidLoad(){a(this.el,this.delayVisible);const i=this.el.querySelector(".card");i&&setTimeout((()=>{i.classList.add("flipped"),setTimeout((()=>{i.classList.remove("flipped")}),500)}),500),d(this.el,this.type)}disconnectedCallback(){window.removeEventListener("resize",this.updateStyles),window.removeEventListener("load",this.updateStyles)}render(){return h(n,{key:"cd0d8539f24de1fd7805b271de839ee8efeb4287",value:this.value,"tab-index":this.tabIndex,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,type:this.type,onClick:this.handleFlip,"disable-speak":this.disableSpeak},h("div",{key:"a97eaa100216652cc4deaf8b6f73e9ea07a125f2",class:"card "+(this.flipped?"flipped":"")},h("div",{key:"7a6f94b89da76b2c7fc911c44d2aaa63a3d2164d",class:"card-face card-front"},null!=this.front?this.front:h("slot",{name:"front"})),h("div",{key:"15936f96d44db217c042584cc225a42dc3f74e98",class:"card-face card-back"},null!=this.back?this.back:h("slot",{name:"back"}))))}get el(){return this}static get watchers(){return{flipped:[{handleFlippedChange:0}]}}static get style(){return".card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}"}},[260,"lido-flash-card",{value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],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"],direction:[1],display:[1],front:[8],back:[8],flipped:[1540],margin:[1],disableSpeak:[4,"disable-speak"],delayVisible:[1,"delay-visible"],style:[32]},void 0,{flipped:[{handleFlippedChange:0}]}]);function r(){"undefined"!=typeof customElements&&["lido-flash-card"].forEach((t=>{"lido-flash-card"===t&&(customElements.get(i(t))||customElements.define(i(t),o))}))}r();export{o as L,r as d}

package/dist/components/{p-Uluc7jQ7.js → p-DuvxecDX.js}

@@ -1 +1 @@
-import{t,p as e,H as i,L as a,T as o,n,c as r,i as s,o as l,q as u,h,b as d,r as c}from"./index.js";import{d as g,i as m}from"./p-C2p0KZh4.js";const p=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,this.handleWindowResize=()=>this.scaleContainer(this.el),this.handleWindowLoad=()=>this.scaleContainer(this.el)}cleanupInteractionHandlers(){this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach((t=>{t.dispatchEvent(new Event(a))}))}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",drawShape:"drawshape",drawshape:"drawshape"}[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"),a=(null==i?void 0:i.Lang)||"";if(null==a?void 0:a.trim())return a;if(null===(t=this.Lang)||void 0===t?void 0:t.trim())return this.Lang;const o=this.el.getAttribute("Lang");return(null==o?void 0:o.trim())?o: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 a=i.offsetHeight;return e.removeChild(i),a}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:n()})`,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||m.language||"en";m.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?r(this.bgImage):"",e=this.el.closest("lido-standalone"),i="true"===(null==e?void 0:e.getAttribute("bg-image"))?e:document.body;if(i.style.backgroundColor=this.bgColor,i.style.backgroundImage=t?`url(${t})`:"none",i.style.backgroundPosition=t?"bottom":"none",document.body.style.pointerEvents="auto",window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.templateId?setTimeout((()=>{this.el.setAttribute("onEntry",`${this.templateId}.speak='${!this.speakFlag}'; `+this.el.getAttribute("onEntry")),s(this.el,this.type)}),100):s(this.el,this.type),this.customStyle){const t=document.createElement("style");t.innerHTML=this.customStyle,document.head.appendChild(t)}const a=this.resolveLanguage();this.updateChildTextLanguage(a),setTimeout((()=>{l()}),100),c(),u.getI().start()}disconnectedCallback(){this.cleanupInteractionHandlers(),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad),document.body.style.backgroundColor="",document.body.style.backgroundImage="",c(),u.getI().stop()}render(){return h(d,{key:"1862e30fedda58726edc107f81fae1f63e96d009",id:"lido-container",Lang:this.Lang,"tab-index":0,class:"lido-container",objective:this.objective,baseUrl:this.baseUrl,style:{backgroundColor:this.bgColor,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",margin:this.margin,userSelect:"none"},"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:"86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7",visible:"false",id:this.templateId,audio:"",string:this.instructName}),h("slot",{key:"c3128ea2164892757b32cb076d717436947f9a4c"}))}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 b(){"undefined"!=typeof customElements&&["lido-container","lido-text"].forEach((e=>{switch(e){case"lido-container":customElements.get(t(e))||customElements.define(t(e),p);break;case"lido-text":customElements.get(t(e))||g()}}))}b();export{p as L,b as d}
+import{t,p as e,H as i,L as a,T as o,n,c as r,i as s,o as l,q as u,h,b as d,r as c}from"./index.js";import{d as g,i as m}from"./p-CIbBOu51.js";const p=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,this.handleWindowResize=()=>this.scaleContainer(this.el),this.handleWindowLoad=()=>this.scaleContainer(this.el)}cleanupInteractionHandlers(){this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach((t=>{t.dispatchEvent(new Event(a))}))}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",drawShape:"drawshape",drawshape:"drawshape"}[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"),a=(null==i?void 0:i.Lang)||"";if(null==a?void 0:a.trim())return a;if(null===(t=this.Lang)||void 0===t?void 0:t.trim())return this.Lang;const o=this.el.getAttribute("Lang");return(null==o?void 0:o.trim())?o: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 a=i.offsetHeight;return e.removeChild(i),a}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:n()})`,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||m.language||"en";m.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?r(this.bgImage):"",e=this.el.closest("lido-standalone"),i="true"===(null==e?void 0:e.getAttribute("bg-image"))?e:document.body;if(i.style.backgroundColor=this.bgColor,i.style.backgroundImage=t?`url(${t})`:"none",i.style.backgroundPosition=t?"bottom":"none",document.body.style.pointerEvents="auto",window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.templateId?setTimeout((()=>{this.el.setAttribute("onEntry",`${this.templateId}.speak='${!this.speakFlag}'; `+this.el.getAttribute("onEntry")),s(this.el,this.type)}),100):s(this.el,this.type),this.customStyle){const t=document.createElement("style");t.innerHTML=this.customStyle,document.head.appendChild(t)}const a=this.resolveLanguage();this.updateChildTextLanguage(a),setTimeout((()=>{l()}),100),c(),u.getI().start()}disconnectedCallback(){this.cleanupInteractionHandlers(),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad),document.body.style.backgroundColor="",document.body.style.backgroundImage="",c(),u.getI().stop()}render(){return h(d,{key:"9dd374c6cdfcc88a5b18e7dc7fec527c853a4719",id:"lido-container",Lang:this.Lang,"tab-index":0,class:"lido-container",objective:this.objective,baseUrl:this.baseUrl,style:{backgroundColor:this.bgColor,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",margin:this.margin,userSelect:"none"},"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:"8295782a74ce6ef8ca9a623de8a28b539d9f6d4f",visible:"false",id:this.templateId,audio:"",string:this.instructName}),h("slot",{key:"eb3c995b777986e07dcb6aa935ef38d41aa1e7e7"}))}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 b(){"undefined"!=typeof customElements&&["lido-container","lido-text"].forEach((e=>{switch(e){case"lido-container":customElements.get(t(e))||customElements.define(t(e),p);break;case"lido-text":customElements.get(t(e))||g()}}))}b();export{p as L,b as d}

package/dist/components/p-Dv1cIsyS.js

@@ -0,0 +1 @@
+import{t,p as i,H as e,B as s,getAssetPath as n,c as o,k as r,E as a,F as h,s as l,f as c,w as d,g as u,j as f,a as w,h as g,b as m}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=n("assets/Tracing-hand.svg"),this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles(),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:60,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null,dragOffset:null,isCompletingPath:!1};const i=this.svgUrls[this.currentSvgIndex];i&&""!==i.trim()?(await this.fetchSVG(o(i)),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){r(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),this.currentSvgIndex=0,this.showSpeakIcon&&(a(this.el),this.el.append(a(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}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(h))},n.src=o(this.fingerHintUrl||h),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 a=document.createElementNS("http://www.w3.org/2000/svg","mpath");a.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(a),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){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,n=-1/0,o=-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>n&&(n=a.x),a.y>o&&(o=a.y)}})),e-=i,s-=i,n+=i,o+=i,{minX:e,minY:s,maxX:n,maxY:o}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.classList.add("lido-trace-svg"),e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),n=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${n.minX} ${n.minY} ${n.maxX-n.minX} ${n.maxY-n.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 n=e.querySelector("defs#lido-flow-defs");n||(n=document.createElementNS("http://www.w3.org/2000/svg","defs"),n.setAttribute("id","lido-flow-defs"),e.insertBefore(n,e.firstChild));const o=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",o),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),n.appendChild(r),s.setAttribute("marker-end",`url(#${o})`),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 n=i.getTotalLength();i.setAttribute("id","lido-path-"+e);const o=i.cloneNode();o.style.opacity="100",o.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");o.setAttribute("stroke-width",r),o.setAttribute("stroke-dasharray",n.toString()),o.setAttribute("stroke-dashoffset",n.toString()),i.parentNode.appendChild(o,i),i.setAttribute("class","lido-trace-path"),o.setAttribute("class","lido-trace-path-green"),i.greenPath=o,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",n.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","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,n;if(!t.circle||!t.paths||0===t.paths.length)return;t.svg.style.touchAction="none",t.circle.style.touchAction="none",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"))},n=this.getDistanceSquared(e,s),o=this.getProximityThresholdForEvent(t,i);if(n<=o*o||"touch"===i.pointerType){t.isDragging=!0,t.activePointerId=i.pointerId,t.dragOffset={x:e.x-s.x,y:e.y-s.y};try{t.circle.setPointerCapture(i.pointerId)}catch(t){}t.lastPointerPos=s}this.hideFingerHint(),this.resetIdleTimer(t)}),{passive:!1}),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(i.preventDefault(),t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const o=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,t.lastPointerPos=null,t.dragOffset=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",o),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",o),null===(n=t.svg)||void 0===n||n.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,n,o,r,a;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;if(t.isCompletingPath)return;this.hideFingerHint();const h=t.pointerMoveEvent,l=this.getPointerPosition(h,t.svg),c=t.dragOffset?{x:l.x-t.dragOffset.x,y:l.y-t.dragOffset.y}:l,d={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};let u=1/0;if(t.lastPointerPos){const i=c.x-t.lastPointerPos.x,e=c.y-t.lastPointerPos.y;if(u=i*i+e*e,u<1)return}const f=t.paths[t.currentPathIndex];if(!f)return void console.error("No valid path found at the current index");const w=this.getProximityThresholdForEvent(t,h),g=w*w;if(this.getDistanceSquared(c,d)>g)return;const m=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace,p=this.getClosestPointOnPath(f,c,m?void 0:t.lastLength);if(this.getDistanceSquared(c,p)>g)return;if(m){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",`${c.x},${c.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:c.x,y:c.y}],t.lastPointerPos=c,t.freeTracePointsCount=1}const s=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let o=t.currentFreePolylinePoints[t.currentPathIndex]||[];o.push({x:c.x,y:c.y}),t.currentFreePolylinePoints[t.currentPathIndex]=o;const r=o.map((t=>`${t.x},${t.y}`)).join(" ");t.currentFreePath[t.currentPathIndex].setAttribute("points",r),t.circle.setAttribute("cx",c.x.toString()),t.circle.setAttribute("cy",c.y.toString());const a=null===(e=t.svg)||void 0===e?void 0:e.childNodes;let h=!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){h=!0;break}}return!h&&t.circle&&(null===(n=t.svg)||void 0===n||n.appendChild(t.circle)),t.lastPointerPos=c,void(o.length>=s&&(this.moveToNextPath(t),t.currentFreePath[t.currentPathIndex]=null,t.currentFreePolylinePoints[t.currentPathIndex]=[],t.freeTracePointsCount=0))}const v=Math.min(320,Math.max(160,.45*t.totalPathLength)),x=Math.min(60,Math.max(24,.12*t.totalPathLength));let y=p,k=y.length>=t.lastLength-20&&y.length-t.lastLength<=80;if(!k){const i=this.getClosestPointOnPath(f,c),e=this.getDistanceSquared(c,i);u>=64&&e<=g&&i.length>=t.lastLength-20&&i.length-t.lastLength<=v&&i.length<t.totalPathLength-x&&(y=i,k=!0)}if(t.isDragging&&k){t.lastLength=Math.max(t.lastLength,y.length),t.lastPointerPos=c,(Math.abs(y.x-d.x)>1||Math.abs(y.y-d.y)>1)&&(t.circle.setAttribute("cx",y.x.toString()),t.circle.setAttribute("cy",y.y.toString()));const i=null===(o=t.svg)||void 0===o?void 0:o.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=f.greenPath)||void 0===a||a.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString());const s=.95;let n=t.lastLength/t.totalPathLength,h=f.getPointAtLength(0),l=f.getPointAtLength(f.getTotalLength());if(this.getDistanceSquared(h,l)<200&&t.totalPathLength>50){if(n>=s){if(t.isCompletingPath)return;t.isCompletingPath=!0,await this.animatePathToEnd(t,f),t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()}}else if(t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex<t.paths.length-1){if(t.isCompletingPath)return;t.isCompletingPath=!0,this.moveToNextPath(t)}else if(t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex===t.paths.length-1){if(t.isCompletingPath)return;t.isCompletingPath=!0,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,n=i.getTotalLength(),o=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-o)/e),d=s+(n-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=n,t.circle){const e=i.getPointAtLength(n);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(),l(!0),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 c(this.onCorrect,this.el));const t=document.querySelector(d),i=t.getAttribute("onCorrect");t&&i&&(await new Promise((t=>setTimeout(t,1e3))),await c(i,this.el)),u(),f()}getPointerPosition(t,i){var e;const s=this.getPointerPositionFromViewBox(t,i);if(s)return s;const n=i.createSVGPoint();n.x=t.clientX,n.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?n.matrixTransform(o):{x:t.clientX,y:t.clientY}}getPointerPositionFromViewBox(t,i){const e=i.getBoundingClientRect(),s=i.viewBox.baseVal;if(!(e.width&&e.height&&s.width&&s.height))return null;const{offsetX:n,offsetY:o,scaleX:r,scaleY:a}=this.getSvgViewBoxTransform(i,e);return{x:s.x+(t.clientX-e.left-n)/r,y:s.y+(t.clientY-e.top-o)/a}}getSvgViewBoxTransform(t,i=t.getBoundingClientRect()){const e=t.viewBox.baseVal,s=t.preserveAspectRatio.baseVal,n=i.width/e.width,o=i.height/e.height;if(1===s.align)return{offsetX:0,offsetY:0,scaleX:n,scaleY:o};const r=2===s.meetOrSlice?Math.max(n,o):Math.min(n,o),a=e.width*r,h=e.height*r;let l=0,c=0;const d=s.align;return 3===d||6===d||9===d?l=(i.width-a)/2:4!==d&&7!==d&&10!==d||(l=i.width-a),5===d||6===d||7===d?c=(i.height-h)/2:8!==d&&9!==d&&10!==d||(c=i.height-h),{offsetX:l,offsetY:c,scaleX:r,scaleY:r}}getProximityThresholdForEvent(t,i){const e=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold:t.proximityThreshold;if("touch"!==(null==i?void 0:i.pointerType)||!t.svg)return e;const n=t.svg.getBoundingClientRect(),o=t.svg.viewBox.baseVal;if(!(n.width&&n.height&&o.width&&o.height))return e;const{scaleX:r,scaleY:a}=this.getSvgViewBoxTransform(t.svg,n),h=44*Math.max(1/r,1/a);return Math.max(e,h)}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i,e){const s=t.getTotalLength();let n={x:0,y:0,length:0},o=1/0,r=0,a=s;void 0!==e&&(r=Math.max(0,e-150),a=Math.min(s,e+150));let h={length:r};for(let e=r;e<=a;e+=40){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<o&&(o=n,h={x:s.x,y:s.y,length:e})}const l=Math.max(0,h.length-40),c=Math.min(s,h.length+40);o=1/0;for(let e=l;e<=c;e+=6){const s=t.getPointAtLength(e),r=this.getDistanceSquared(i,s);r<o&&(o=r,n={x:s.x,y:s.y,length:e})}return n}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,t.isCompletingPath=!1,this.hideFingerHint(),t.currentPathIndex>=t.paths.length)return void this.moveToNextContainer();const n=t.paths[t.currentPathIndex];if(!n)return void console.error("No valid path found at the next index");t.totalPathLength=n.getTotalLength();const o=n.getPointAtLength(0);null===(i=t.circle)||void 0===i||i.setAttribute("cx",o.x.toString()),null===(e=t.circle)||void 0===e||e.setAttribute("cy",o.y.toString()),t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(n)),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()));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 c("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 c("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]){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:w(this.height,t),width:w(this.width,t),top:w(this.y,t),left:w(this.x,t),zIndex:this.z}}render(){return g(m,{key:"0877050db2c93ff5ca0795ea8a209e2bb2c3e1b3",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:"c0fa2b7c825a4bbbb3b0a95cc700a6f01b873943",style:this.style,id:"lido-svgContainer"}))}static get assetsDirs(){return["assets"]}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}.lido-trace-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 v(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),p))}))}v();export{p as L,v as d}

package/dist/esm/{decode-CGJIPA4t.js → decode-To5V_Qqp.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './index-C854B63S.js';
+import { g as getDefaultExportFromCjs } from './index-CEJsA_x_.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{index-C854B63S.js → index-CEJsA_x_.js}

@@ -1,4 +1,4 @@
-import { d as getAssetPath } from './index-Dq-Z8Dx0.js';
+import { c as getAssetPath } from './index-Dnvog_Mm.js';
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -319,7 +319,7 @@ function dragDropAnimation(container, dragElement, dropElement) {
         dropElement.classList.remove('zoom-fade-in');
         dragElement.classList.add('zoom-fade-out');
         dropElement.classList.add('zoom-fade-out');
-        setTimeout(() => {
+        const cleanup = () => {
             div.remove();
             container.style.pointerEvents = 'auto';
             if (isObjectiveComplete) {
@@ -327,7 +327,14 @@ function dragDropAnimation(container, dragElement, dropElement) {
                 triggerNextContainer();
                 container.removeAttribute(AnimationVanishedValuesKey);
             }
-        }, 800); // match animation duration
+        };
+        const templateId = (container.getAttribute('template-id') || '').toLowerCase();
+        if (templateId === 'letterpairing' || templateId === 'numberpair') {
+            cleanup();
+        }
+        else {
+            setTimeout(cleanup, 800); // match animation duration
+        }
     }, 250);
 }
 
@@ -1150,14 +1157,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1345,34 +1352,34 @@ function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1437,9 +1444,18 @@ function highlightElement() {
 }
 
 class AudioPlayer {
+    resolvePlaybackWait() {
+        if (!this.endPromiseResolve) {
+            return;
+        }
+        const resolve = this.endPromiseResolve;
+        this.endPromiseResolve = null;
+        resolve();
+    }
     constructor() {
         this.currentTargetElement = null;
         this.pendingReplayElement = null;
+        this.playbackHasStarted = false;
         this.highlightOverlay = null;
         this.wordRects = [];
         this.activeWordIndex = -1;
@@ -1497,15 +1513,12 @@ class AudioPlayer {
             window.speechSynthesis.cancel();
         }
         // Resolve any pending "ended" wait so callers can continue.
-        if (this.endPromiseResolve) {
-            const resolve = this.endPromiseResolve;
-            this.endPromiseResolve = null;
-            resolve();
-        }
+        this.resolvePlaybackWait();
         if (!preserveReplay) {
             this.pendingReplayElement = null;
         }
         this.currentTargetElement = null;
+        this.playbackHasStarted = false;
         this.audioElement.pause();
         this.audioElement.currentTime = 0;
         this.audioElement.src = '';
@@ -1543,6 +1556,7 @@ class AudioPlayer {
     }
     async play(targetElement) {
         this.registerVisibilityEvents();
+        this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
             this.pendingReplayElement = targetElement;
             await this.stop(true);
@@ -1596,6 +1610,24 @@ class AudioPlayer {
         if (audioUrl) {
             audioUrl = convertUrlToRelative(audioUrl);
             this.audioElement.src = audioUrl;
+            this.audioElement.onplaying = () => {
+                this.playbackHasStarted = true;
+            };
+            this.audioElement.onpause = () => {
+                if (this.playbackHasStarted && !this.audioElement.ended) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onstalled = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
+            this.audioElement.onerror = () => {
+                if (this.playbackHasStarted) {
+                    this.resolvePlaybackWait();
+                }
+            };
             try {
                 // setDraggingDisabled(true);
                 const language = container.getAttribute('Lang') || 'en';
@@ -1625,10 +1657,7 @@ class AudioPlayer {
                 await new Promise(resolve => {
                     this.endPromiseResolve = resolve;
                     this.audioElement.onended = () => {
-                        if (this.endPromiseResolve === resolve) {
-                            this.endPromiseResolve = null;
-                        }
-                        resolve();
+                        this.resolvePlaybackWait();
                     };
                 });
             }
@@ -2062,11 +2091,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2279,11 +2308,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -2350,6 +2379,12 @@ async function onDropToCategory(dragElement, categoryElement) {
 }
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
+const syncSlideOrder = (container) => {
+    const slideOrder = Array.from(container.querySelectorAll("[type='slide']"))
+        .map(item => item['value']);
+    container.setAttribute(SelectedValuesKey, JSON.stringify(slideOrder));
+    return slideOrder;
+};
 const slideAnimation = async () => {
     const container = document.getElementById(LidoContainer);
     if (!container)
@@ -2410,6 +2445,9 @@ function slidingWithScaling(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    // Slide activities can start in the correct order. Keep their initial DOM
+    // order available to the Next/check validation before the first swap occurs.
+    syncSlideOrder(container);
     const onStart = (event) => {
         removeHighlight(element);
         isDragging = true;
@@ -2583,15 +2621,8 @@ function slidingWithScaling(element) {
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
 const slideCompleted = (slideElement) => {
-    var _a;
     const container = document.getElementById(LidoContainer);
-    const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-    const allSlideElements = document.querySelectorAll("[type='slide']");
-    let index = 0;
-    allSlideElements.forEach(item => {
-        slideArr[index++] = item['value'];
-    });
-    container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
+    const slideArr = syncSlideOrder(container);
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
     const elementIndex = slideArr.indexOf(slideElement['value']);
@@ -3955,6 +3986,14 @@ function addClickListenerForClickType(element) {
     const container = document.getElementById(LidoContainer);
     if (container.getAttribute('canplay') === 'false')
         return;
+    const isBubbleTypeKeyboardKey = (container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'bubbleType' &&
+        element.closest('lido-keyboard') !== null;
+    // BubbleType manages key clicks and audio in lido-keyboard.tsx directly.
+    // Letting the generic click handler attach here creates a competing stop/play
+    // path that can interrupt the first bubble audio.
+    if (isBubbleTypeKeyboardKey) {
+        return;
+    }
     element.style.cursor = 'pointer';
     if (!element) {
         console.error('No element provided.');
@@ -72043,27 +72082,24 @@ const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 /* ------------------ animation ------------------ */
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, container) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
-      }`;
-        const styleSheet = document.styleSheets[0];
-        styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
-        activeCell.style.animation = `widthDecrease 0s`;
-        activeCell.addEventListener("animationend", () => {
-            activeCell.remove();
+        let removed = false;
+        const removeActiveCell = () => {
+            if (removed)
+                return;
+            removed = true;
+            if (activeCell.isConnected) {
+                activeCell.remove();
+            }
             // Trigger next container only after the last calculate cell is removed
             const remainingCalculateTypes = container.querySelectorAll("[type='calculate']");
             if (remainingCalculateTypes.length === 0) {
                 setTimeout(() => triggerNextContainer(), 2000);
             }
             resolve();
-        }, { once: true });
+        };
+        // Nimble uses a zero-duration removal; remove synchronously so progression
+        // does not depend on a browser animationend event.
+        removeActiveCell();
     });
 };
 /* ------------------ PRACTICE MODE ------------------ */
@@ -72877,11 +72913,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
                 dummyElement.style.width = element.style.width;
@@ -73080,6 +73116,7 @@ const calculateScore = () => {
     gameScore.totalRightMovesCount += rightMoves;
     gameScore.totalWrongMovesCount += wrongMoves;
     let finalScore = Math.floor((rightMoves / (rightMoves + wrongMoves)) * 100);
+    console.log('[Activity Score]', { rightMoves, wrongMoves, activityScore: finalScore });
     storeActivityScore(finalScore);
     gameScore.rightMoves = 0;
     gameScore.wrongMoves = 0;
@@ -73188,7 +73225,7 @@ const storeActivityScore = (score) => {
     activityScore[activityScoreKey] = score;
     //send Custom Event to parent
     // window.dispatchEvent(new CustomEvent(ActivityEndKey, { detail: { index: index, totalIndex: totalIndex, score: score } })); 
-    const actualActivitySeconds = Math.ceil(Timer.getI().getElapsed() / 1000);
+    const actualActivitySeconds = Number((Timer.getI().getElapsed() / 1000).toFixed(1));
     ACTIVYTY_TIME_SPEND_ARRAY.push(actualActivitySeconds);
     console.log(`[Utils][Activity Time] Activity ${index + 1}/${totalIndex} - Time spent: ${actualActivitySeconds}s`);
     const lessonTrackingParams = getLessonTrackingParams();
@@ -73200,7 +73237,7 @@ const storeActivityScore = (score) => {
         gameScore.finalScore = Math.floor(finalScore);
         console.log('Total Score : ', gameScore.finalScore);
         // window.dispatchEvent(new CustomEvent(LessonEndKey, { detail: { score: finalScore } }));
-        const timeSpendForLesson = ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0);
+        const timeSpendForLesson = Number(ACTIVYTY_TIME_SPEND_ARRAY.reduce((sum, current) => sum + current, 0).toFixed(1));
         console.log(`[Utils][Lesson Time] Total lesson time spent: ${timeSpendForLesson}s`);
         dispatchLessonEndEvent(totalIndex, gameScore.totalRightMovesCount, gameScore.totalWrongMovesCount, finalScore, timeSpendForLesson, lessonTrackingParams);
         gameScore.totalRightMovesCount = 0;

package/dist/esm/{index-Dq-Z8Dx0.js → index-Dnvog_Mm.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'lido-player';
 const BUILD = /* lido-player */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\r\n    height 25ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}";
+const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\n    180deg,\n    rgba(255, 235, 59, 0.95),\n    rgba(255, 214, 0, 0.95)\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\n    height 25ms ease-out,\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}";
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
@@ -2065,4 +2065,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as d, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, getElement as a, bootstrapLazy as b, getAssetPath as c, createEvent as d, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { $ as format } from './index-C854B63S.js';
-import './index-Dq-Z8Dx0.js';
+export { $ as format } from './index-CEJsA_x_.js';
+import './index-Dnvog_Mm.js';