lido-player 0.0.2-beta-24 → 0.0.2-beta-25-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/cjs/{decode-BCvdWRyT.js → decode-BSImuLEU.js} +1 -1
  2. package/dist/cjs/{index-DjM03fsg.js → index-DRw2yVbg.js} +112 -27
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/lido-avatar_22.cjs.entry.js +117 -17
  5. package/dist/cjs/lido-player.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/components/container/lido-container.css +24 -0
  8. package/dist/collection/components/container/lido-container.js +48 -2
  9. package/dist/collection/components/flashCard/lido-flash-card.js +14 -5
  10. package/dist/collection/components/home/lido-home.js +3 -6
  11. package/dist/collection/components/root/lido-root.js +1 -1
  12. package/dist/collection/components/text/lido-text.js +1 -1
  13. package/dist/collection/utils/audioPlayer.js +3 -1
  14. package/dist/collection/utils/utils.js +50 -7
  15. package/dist/collection/utils/utilsHandlers/slideHandler.js +58 -19
  16. package/dist/components/index.js +1 -1
  17. package/dist/components/lido-calculator.js +1 -1
  18. package/dist/components/lido-container.js +1 -1
  19. package/dist/components/lido-flash-card.js +1 -1
  20. package/dist/components/lido-float.js +1 -1
  21. package/dist/components/lido-home.js +1 -1
  22. package/dist/components/lido-image.js +1 -1
  23. package/dist/components/lido-keyboard.js +1 -1
  24. package/dist/components/lido-math-matrix.js +1 -1
  25. package/dist/components/lido-root.js +1 -1
  26. package/dist/components/lido-slide-fill.js +1 -1
  27. package/dist/components/lido-text.js +1 -1
  28. package/dist/components/lido-trace.js +1 -1
  29. package/dist/components/p-AaE392x7.js +1 -0
  30. package/dist/components/p-B-mIxynb.js +1 -0
  31. package/dist/components/{p-CFPSty2U.js → p-BSWrnLbC.js} +1 -1
  32. package/dist/components/{p-Bv1hunWk.js → p-BW0855oZ.js} +1 -1
  33. package/dist/components/{p-CFWohOId.js → p-BfJG1wmU.js} +1 -1
  34. package/dist/components/{p-B8nzzM8c.js → p-CK9M0Kcf.js} +1 -1
  35. package/dist/components/{p-DLyacZap.js → p-CSxwfvl3.js} +1 -1
  36. package/dist/components/{p-Bh_vemY3.js → p-CVZEVfip.js} +1 -1
  37. package/dist/components/{p-C5jvgiPE.js → p-Cf85Nc-6.js} +1 -1
  38. package/dist/components/{p-C-pHQRbp.js → p-CuDMRxx_.js} +1 -1
  39. package/dist/components/{p-Gwko4CTL.js → p-DPGOqpde.js} +1 -1
  40. package/dist/components/p-i3W5bJbL.js +12 -0
  41. package/dist/esm/{decode-BxzUG5XP.js → decode-D2f5bktc.js} +1 -1
  42. package/dist/esm/{index-C_uxZLF-.js → index-BB56Mo3L.js} +112 -28
  43. package/dist/esm/index.js +1 -1
  44. package/dist/esm/lido-avatar_22.entry.js +117 -17
  45. package/dist/esm/lido-player.js +1 -1
  46. package/dist/esm/loader.js +1 -1
  47. package/dist/lido-player/index.esm.js +1 -1
  48. package/dist/lido-player/lido-player.esm.js +1 -1
  49. package/dist/lido-player/p-53d245b0.entry.js +12 -0
  50. package/dist/lido-player/p-DKuh-2gv.js +1 -0
  51. package/dist/lido-player/{p-CsCr7DlS.js → p-DSlo480E.js} +1 -1
  52. package/dist/types/components/container/lido-container.d.ts +7 -0
  53. package/dist/types/utils/utils.d.ts +7 -0
  54. package/dist/types/utils/utilsHandlers/slideHandler.d.ts +1 -1
  55. package/package.json +1 -1
  56. package/dist/components/p-CgBwmr9A.js +0 -12
  57. package/dist/components/p-Ckb8QhUV.js +0 -1
  58. package/dist/components/p-DDwqmTYM.js +0 -1
  59. package/dist/lido-player/p-00993d1a.entry.js +0 -12
  60. package/dist/lido-player/p-v3GBrpv9.js +0 -1
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-CFPSty2U.js";const t=o,p=s;export{t as LidoCalculator,p as defineCustomElement}
1
+ import{L as o,d as r}from"./p-BSWrnLbC.js";const s=o,p=r;export{s as LidoCalculator,p as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-DDwqmTYM.js";const m=o,p=s;export{m as LidoContainer,p as defineCustomElement}
1
+ import{L as o,d as s}from"./p-AaE392x7.js";const a=o,p=s;export{a as LidoContainer,p as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-Ckb8QhUV.js";const p=o,r=s;export{p as LidoFlashCard,r as defineCustomElement}
1
+ import{L as o,d as s}from"./p-B-mIxynb.js";const m=o,p=s;export{m as LidoFlashCard,p as defineCustomElement}
@@ -1 +1 @@
1
- import{L as a,d as o}from"./p-DLyacZap.js";const p=a,s=o;export{p as LidoFloat,s as defineCustomElement}
1
+ import{L as o,d as s}from"./p-CSxwfvl3.js";const p=o,r=s;export{p as LidoFloat,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as r}from"./p-CgBwmr9A.js";const s=o,m=r;export{s as LidoHome,m as defineCustomElement}
1
+ import{L as o,d as s}from"./p-i3W5bJbL.js";const p=o,r=s;export{p as LidoHome,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-C5jvgiPE.js";const p=o,r=s;export{p as LidoImage,r as defineCustomElement}
1
+ import{L as o,d as s}from"./p-Cf85Nc-6.js";const p=o,r=s;export{p as LidoImage,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-Bv1hunWk.js";const p=o,r=s;export{p as LidoKeyboard,r as defineCustomElement}
1
+ import{L as o,d as s}from"./p-BW0855oZ.js";const p=o,r=s;export{p as LidoKeyboard,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-B8nzzM8c.js";const p=o,r=s;export{p as LidoMathMatrix,r as defineCustomElement}
1
+ import{L as o,d as s}from"./p-CK9M0Kcf.js";const p=o,r=s;export{p as LidoMathMatrix,r as defineCustomElement}
@@ -1 +1 @@
1
- import{t,p as s,H as o,getAssetPath as e,h as a}from"./index.js";import{d as i,i as r}from"./p-Gwko4CTL.js";import{d as l}from"./p-DG0KR2iN.js";import{d as m}from"./p-DNo3iX_r.js";import{d as n}from"./p-CFPSty2U.js";import{d}from"./p-C5WmmkI6.js";import{d as c}from"./p-CgsPIpg0.js";import{d as p}from"./p-CTlcpv4a.js";import{d as u}from"./p-DDwqmTYM.js";import{d as h}from"./p-Ckb8QhUV.js";import{d as b}from"./p-DLyacZap.js";import{d as f}from"./p-CgBwmr9A.js";import{d as k}from"./p-C5jvgiPE.js";import{d as E}from"./p-Bv1hunWk.js";import{d as x}from"./p-B8nzzM8c.js";import{d as g}from"./p-CXHPZN3m.js";import{d as j}from"./p-DONbWJGn.js";import{d as v}from"./p-C70ykycD.js";import{d as C}from"./p-DXy70SGv.js";import{d as L}from"./p-C-pHQRbp.js";import{d as U}from"./p-CFWohOId.js";import{d as w}from"./p-CsDu4kiC.js";const y=s(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.xmlPath="",this.initialIndex=0,this.margin="",this.canplay=!0,this.baseUrl="",this.zipUrl=""}connectedCallback(){this.setLanguage(this.Lang)}onLangChange(t){this.setLanguage(t)}setLanguage(t){r.changeLanguage(t||r.language)}async componentWillLoad(){var t,s;if(this.zipUrl)return void(this.xmlData="");const o=null!==(t=this.xmlPath)&&void 0!==t?t:this.baseUrl+((null===(s=this.baseUrl)||void 0===s?void 0:s.endsWith("/"))?"index.xml":"/index.xml");try{const t=o.startsWith("http")?o:e(o),s=await fetch(t);if(!s.ok)throw Error("Failed to fetch XML data: "+s.statusText);const a=await s.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",Object.assign({showNav:!0,activeContainerIndexes:[],initialIndex:this.initialIndex,canplay:this.canplay,xmlData:this.xmlData,baseUrl:this.baseUrl},this.zipUrl?{zipUrl:this.zipUrl}:{},{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"],zipUrl:[1,"zip-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 D(){"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((s=>{switch(s){case"lido-root":customElements.get(t(s))||customElements.define(t(s),y);break;case"lido-avatar":customElements.get(t(s))||l();break;case"lido-balance":customElements.get(t(s))||m();break;case"lido-calculator":customElements.get(t(s))||n();break;case"lido-canvas":customElements.get(t(s))||d();break;case"lido-cell":customElements.get(t(s))||c();break;case"lido-col":customElements.get(t(s))||p();break;case"lido-container":customElements.get(t(s))||u();break;case"lido-flash-card":customElements.get(t(s))||h();break;case"lido-float":customElements.get(t(s))||b();break;case"lido-home":customElements.get(t(s))||f();break;case"lido-image":customElements.get(t(s))||k();break;case"lido-keyboard":customElements.get(t(s))||E();break;case"lido-math-matrix":customElements.get(t(s))||x();break;case"lido-pos":customElements.get(t(s))||g();break;case"lido-random":customElements.get(t(s))||j();break;case"lido-row":customElements.get(t(s))||v();break;case"lido-shape":customElements.get(t(s))||C();break;case"lido-slide-fill":customElements.get(t(s))||L();break;case"lido-text":customElements.get(t(s))||i();break;case"lido-trace":customElements.get(t(s))||U();break;case"lido-wrap":customElements.get(t(s))||w()}}))}D();const B=y,I=D;export{B as LidoRoot,I as defineCustomElement}
1
+ import{t,p as s,H as o,getAssetPath as e,h as a}from"./index.js";import{d as i,i as l}from"./p-DPGOqpde.js";import{d as r}from"./p-DG0KR2iN.js";import{d as m}from"./p-DNo3iX_r.js";import{d as n}from"./p-BSWrnLbC.js";import{d}from"./p-C5WmmkI6.js";import{d as c}from"./p-CgsPIpg0.js";import{d as p}from"./p-CTlcpv4a.js";import{d as u}from"./p-AaE392x7.js";import{d as h}from"./p-B-mIxynb.js";import{d as f}from"./p-CSxwfvl3.js";import{d as b}from"./p-i3W5bJbL.js";import{d as k}from"./p-Cf85Nc-6.js";import{d as x}from"./p-BW0855oZ.js";import{d as E}from"./p-CK9M0Kcf.js";import{d as g}from"./p-CXHPZN3m.js";import{d as j}from"./p-DONbWJGn.js";import{d as v}from"./p-C70ykycD.js";import{d as C}from"./p-DXy70SGv.js";import{d as L}from"./p-CuDMRxx_.js";import{d as U}from"./p-BfJG1wmU.js";import{d as w}from"./p-CsDu4kiC.js";const B=s(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.xmlPath="",this.initialIndex=0,this.margin="",this.canplay=!0,this.baseUrl="",this.zipUrl=""}connectedCallback(){this.setLanguage(this.Lang)}onLangChange(t){this.setLanguage(t)}setLanguage(t){l.changeLanguage(t||l.language)}async componentWillLoad(){var t,s;if(this.zipUrl)return void(this.xmlData="");const o=null!==(t=this.xmlPath)&&void 0!==t?t:this.baseUrl+((null===(s=this.baseUrl)||void 0===s?void 0:s.endsWith("/"))?"index.xml":"/index.xml");try{const t=o.startsWith("http")?o:e(o),s=await fetch(t);if(!s.ok)throw Error("Failed to fetch XML data: "+s.statusText);const a=await s.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",Object.assign({showNav:!0,activeContainerIndexes:[],initialIndex:this.initialIndex,canplay:this.canplay,Lang:this.Lang,xmlData:this.xmlData,baseUrl:this.baseUrl},this.zipUrl?{zipUrl:this.zipUrl}:{},{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"],zipUrl:[1,"zip-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((s=>{switch(s){case"lido-root":customElements.get(t(s))||customElements.define(t(s),B);break;case"lido-avatar":customElements.get(t(s))||r();break;case"lido-balance":customElements.get(t(s))||m();break;case"lido-calculator":customElements.get(t(s))||n();break;case"lido-canvas":customElements.get(t(s))||d();break;case"lido-cell":customElements.get(t(s))||c();break;case"lido-col":customElements.get(t(s))||p();break;case"lido-container":customElements.get(t(s))||u();break;case"lido-flash-card":customElements.get(t(s))||h();break;case"lido-float":customElements.get(t(s))||f();break;case"lido-home":customElements.get(t(s))||b();break;case"lido-image":customElements.get(t(s))||k();break;case"lido-keyboard":customElements.get(t(s))||x();break;case"lido-math-matrix":customElements.get(t(s))||E();break;case"lido-pos":customElements.get(t(s))||g();break;case"lido-random":customElements.get(t(s))||j();break;case"lido-row":customElements.get(t(s))||v();break;case"lido-shape":customElements.get(t(s))||C();break;case"lido-slide-fill":customElements.get(t(s))||L();break;case"lido-text":customElements.get(t(s))||i();break;case"lido-trace":customElements.get(t(s))||U();break;case"lido-wrap":customElements.get(t(s))||w()}}))}y();const D=B,I=y;export{D as LidoRoot,I as defineCustomElement}
@@ -1 +1 @@
1
- import{L as p,d as o}from"./p-C-pHQRbp.js";const s=p,r=o;export{s as LidoSlideFill,r as defineCustomElement}
1
+ import{L as o,d as s}from"./p-CuDMRxx_.js";const p=o,r=s;export{p as LidoSlideFill,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-Gwko4CTL.js";const p=o,r=s;export{p as LidoText,r as defineCustomElement}
1
+ import{L as o,d as p}from"./p-DPGOqpde.js";const s=o,r=p;export{s as LidoText,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-CFWohOId.js";const p=o,r=s;export{p as LidoTrace,r as defineCustomElement}
1
+ import{L as o,d as s}from"./p-BfJG1wmU.js";const m=o,p=s;export{m as LidoTrace,p as defineCustomElement}
@@ -0,0 +1 @@
1
+ import{t,p as e,H as i,L as a,n as o,T as n,o as r,c as s,i as l,q as h,r as d,h as u,b as c,u as g}from"./index.js";import{d as p,i as m}from"./p-DPGOqpde.js";const b=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),this.shouldInitializePlayModeDragDrop=!1,this.isWriteCardContainer=()=>"writeCard"===this.templateId,this.syncWriteCardArrowHighlight=()=>{if(!this.isWriteCardContainer())return;const t=this.el.querySelector("#arrow");if(!t)return;const e=window.getComputedStyle(t);t.classList.toggle("flash-card-next-glowing",!("none"===e.display||"hidden"===e.visibility||"0"===e.opacity))},this.observeWriteCardArrow=()=>{var t;this.isWriteCardContainer()&&(null===(t=this.writeCardArrowObserver)||void 0===t||t.disconnect(),this.writeCardArrowObserver=new MutationObserver((()=>this.syncWriteCardArrowHighlight())),this.writeCardArrowObserver.observe(this.el,{subtree:!0,attributes:!0,attributeFilter:["class","style","visible"]}),this.syncWriteCardArrowHighlight())}}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)}canplayChanged(t,e){"foodJar"===this.templateId&&t&&!1===e&&(this.shouldInitializePlayModeDragDrop=!0)}componentDidRender(){this.shouldInitializePlayModeDragDrop&&this.canplay&&(this.shouldInitializePlayModeDragDrop=!1,o(this.el))}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(n)||"";this.speakFlag=i.includes(this.templateId),this.speakFlag||e.setAttribute(n,[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:r()})`,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?s(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")),l(this.el,this.type),this.observeWriteCardArrow()}),100):(l(this.el,this.type),this.observeWriteCardArrow()),this.customStyle){const t=document.createElement("style");t.innerHTML=this.customStyle,document.head.appendChild(t)}const a=this.resolveLanguage();this.updateChildTextLanguage(a),setTimeout((()=>{h()}),100),g(),d.getI().start()}disconnectedCallback(){var t;this.cleanupInteractionHandlers(),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad),null===(t=this.writeCardArrowObserver)||void 0===t||t.disconnect(),this.writeCardArrowObserver=void 0,document.body.style.backgroundColor="",document.body.style.backgroundImage="",g(),d.getI().stop()}render(){return u(c,{key:"c4063b11ee7b13e43701fa1573129c043f20bce3",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}`},u("lido-text",{key:"de5f9d8a8711ddc533dd105640e64152035dee9f",visible:"false",id:this.templateId,audio:"",string:this.instructName}),u("slot",{key:"ec46b584fa6d4982e69d8b8b2e72e8991bdc2458"}))}get el(){return this}static get watchers(){return{Lang:[{languageChanged:0}],canplay:[{canplayChanged: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}lido-container[template-id="writeCard"] #arrow{box-sizing:border-box;border:10px solid transparent;box-shadow:0px 8px 0px 0px #8b310f;animation:flash-card-next-attention 1.4s ease-in-out infinite}lido-container[template-id="writeCard"] #arrow.fading{opacity:1 !important}@keyframes flash-card-next-attention{0%,100%{border-color:#ffc34d;filter:drop-shadow(0 0 0 rgba(255, 195, 77, 0))}50%{border-color:#fff1a8;filter:drop-shadow(0 0 10px rgba(255, 195, 77, 0.95))}}'}},[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}],canplay:[{canplayChanged:0}]}]);function w(){"undefined"!=typeof customElements&&["lido-container","lido-text"].forEach((e=>{switch(e){case"lido-container":customElements.get(t(e))||customElements.define(t(e),b);break;case"lido-text":customElements.get(t(e))||p()}}))}w();export{b as L,w as d}
@@ -0,0 +1 @@
1
+ import{p as i,H as t,f as s,a as o,A as h,k as e,i as a,h as n,b as d,t as r}from"./index.js";const l=i(class i extends t{constructor(t){super(),!1!==t&&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.autoFlipAfter=4500,this.narrationTarget=null,this.narrationHandled=!1,this.instructionDone=!1,this.instructionStarted=!1,this.onAudioStarted=i=>{var t;const s=null===(t=i.detail)||void 0===t?void 0:t.target;s===this.instructionText()&&(this.instructionStarted=!0),s&&s===this.narrationTarget&&!this.narrationHandled&&(this.narrationGraceTimer&&window.clearTimeout(this.narrationGraceTimer),this.narrationGraceTimer=void 0)},this.onAudioPlaying=i=>{const t=i.detail,s=null==t?void 0:t.target;if("lido-avatar"!==(null==s?void 0:s.id))return;if(t.playbackContext!==this.goodJobPlaybackContext)return;const o=this.nextArrow();o&&this.flipped&&(this.goodJobPlaybackId=t.playbackId,o.classList.add("flash-card-next-glowing"))},this.onAudioEnded=i=>{var t,o,h;const e=null===(t=i.detail)||void 0===t?void 0:t.target,a=this.instructionText();if(e&&(e===a||"lido-avatar"===e.id||this.el.contains(e)))if(e!==this.narrationTarget||this.narrationHandled){if(!this.narrationHandled||e!==this.narrationTarget)if(e===this.instructionText())this.instructionDone=!0,this.frontStartTimer=window.setTimeout((()=>{this.speakFront()}),1200);else if(e===this.frontText()){if(this.flipped)return;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter)}else if(e===this.backText())this.flipped&&this.showArrow();else if("lido-avatar"===e.id){const t=null===(o=i.detail)||void 0===o?void 0:o.playbackId;if((null===(h=i.detail)||void 0===h?void 0:h.playbackContext)!==this.goodJobPlaybackContext||t!==this.goodJobPlaybackId)return;this.goodJobPlaybackId=void 0,s("this.avatarAnimate='Idle'",e)}}else this.finishNarration(e)},this.margin="",this.disableSpeak=!1,this.style={},this.delayVisible="",this.updateStyles=()=>{const i=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:o(this.height,i)||"200px",width:o(this.width,i)||"200px",backgroundColor:o(this.bgColor,i),top:o(this.y,i),left:o(this.x,i),zIndex:this.z,display:this.visible?this.display?o(this.display,i):"inline-block":"none",flexDirection:this.direction?o(this.direction,i):void 0,margin:o(this.margin,i)}},this.handleFlip=()=>{var i;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),h.getI().stop(),this.clearNarrationTimers();const t=!this.flipped;if(this.flipped=!this.flipped,this.stopGoodJobGlow(),this.setArrowVisible(!1),t){const t=this.backText();t&&(null===(i=t.textContent)||void 0===i?void 0:i.trim())?this.startNarration(t):this.showArrow()}else this.speakFront()},this.instructionText=()=>{const i=this.el.closest("lido-container"),t=null==i?void 0:i.getAttribute("template-id");return t?null==i?void 0:i.querySelector(`[id="${t}"]`):null},this.frontText=()=>this.el.querySelector(".card-front lido-text"),this.backText=()=>this.el.querySelector(".card-back lido-text"),this.nextArrow=()=>{var i;return null===(i=this.el.closest("lido-container"))||void 0===i?void 0:i.querySelector("#arrow")},this.stopGoodJobGlow=()=>{var i;this.goodJobPlaybackId=void 0,this.goodJobPlaybackContext=void 0,null===(i=this.nextArrow())||void 0===i||i.classList.remove("flash-card-next-glowing")},this.speakFront=()=>{var i,t;const s=this.frontText();this.instructionDone&&!this.flipped&&s&&(null===(i=s.textContent)||void 0===i?void 0:i.trim())?this.startNarration(s):!this.instructionDone||this.flipped||s&&(null===(t=s.textContent)||void 0===t?void 0:t.trim())||(this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter))},this.clearNarrationTimers=()=>{this.narrationGraceTimer&&window.clearTimeout(this.narrationGraceTimer),this.narrationGraceTimer=void 0,this.narrationTarget=null,this.narrationHandled=!1},this.continueAfterNarration=i=>{if(i===this.instructionText())this.instructionDone=!0,this.frontStartTimer=window.setTimeout((()=>this.speakFront()),1200);else if(i===this.frontText()){if(this.flipped)return;this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.autoFlipTimer=window.setTimeout((()=>{this.flipped||this.handleFlip()}),this.autoFlipAfter)}else i===this.backText()&&this.flipped&&this.showArrow()},this.finishNarration=i=>{i!==this.narrationTarget||this.narrationHandled||(this.narrationHandled=!0,this.narrationGraceTimer&&window.clearTimeout(this.narrationGraceTimer),this.narrationGraceTimer=void 0,this.continueAfterNarration(i))},this.startNarration=t=>{this.clearNarrationTimers(),this.narrationTarget=t,this.narrationGraceTimer=window.setTimeout((()=>{this.narrationHandled||this.finishNarration(t)}),i.narrationStartGrace),s("this.speak='true'",t)},this.showArrow=()=>{if(!this.flipped)return;const i=this.el.closest("lido-container");if("flashcardtemplate"!==(null==i?void 0:i.getAttribute("template-id")))return;const t=this.nextArrow();if(!t)return;t.getAttribute("onTouch")||t.setAttribute("onTouch","this.nextBtn='true';");const o=i.querySelector("#lido-avatar"),e=t.getAttribute("audio");o&&e&&o.setAttribute("audio",e),this.setArrowVisible(!0),t.classList.add("flash-card-next-glowing"),o&&(this.goodJobPlaybackContext={},this.goodJobPlaybackId=void 0,s("this.avatarAnimate='Idle speak'",o),h.getI().play(o,!0,this.goodJobPlaybackContext))},this.setArrowVisible=i=>{const t=this.el.closest("lido-container");if("flashcardtemplate"!==(null==t?void 0:t.getAttribute("template-id")))return;const s=t.querySelector("#arrow");if(!s)return;s.visible=i,s.setAttribute("visible",String(i)),s.style.display=i?"block":"none",s.style.visibility=i?"visible":"hidden",s.style.opacity=i?"1":"0",s.style.pointerEvents=i?"auto":"none";const o=s.querySelector("lido-image");o&&(o.style.display=i?"flex":"none",o.style.visibility=i?"visible":"hidden",o.style.opacity=i?"1":"0"),"function"==typeof s.updateStyles&&s.updateStyles()}}handleFlippedChange(){}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles),window.addEventListener("load",this.updateStyles)}componentDidLoad(){var i;e(this.el,this.delayVisible),a(this.el,this.type),window.addEventListener("lidoAudioStarted",this.onAudioStarted),window.addEventListener("lidoAudioPlaying",this.onAudioPlaying),window.addEventListener("lidoAudioEnded",this.onAudioEnded);const t=this.el.closest("lido-container");"flashcardtemplate"===(null==t?void 0:t.getAttribute("template-id"))&&(null===(i=t.querySelector("#lido-avatar"))||void 0===i||i.setAttribute("disable-speak","true"),this.instructionStartTimer=window.setTimeout((()=>{if(!this.instructionStarted&&!this.instructionDone){const i=this.instructionText();i&&this.startNarration(i)}}),150))}disconnectedCallback(){window.removeEventListener("lidoAudioEnded",this.onAudioEnded),window.removeEventListener("lidoAudioPlaying",this.onAudioPlaying),window.removeEventListener("lidoAudioStarted",this.onAudioStarted),this.autoFlipTimer&&window.clearTimeout(this.autoFlipTimer),this.instructionStartTimer&&window.clearTimeout(this.instructionStartTimer),this.frontStartTimer&&window.clearTimeout(this.frontStartTimer),this.clearNarrationTimers(),window.removeEventListener("resize",this.updateStyles),window.removeEventListener("load",this.updateStyles)}render(){return n(d,{key:"57b9dc5ecf618dc381a58e107fa2990b84f5517a",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:i=>{var t,s;(null===(s=null===(t=i.target)||void 0===t?void 0:t.closest)||void 0===s?void 0:s.call(t,"#lido-avatar"))||this.handleFlip()},"disable-speak":this.disableSpeak},n("div",{key:"3712fc66e33323bdd55e0abb747370ee461dc808",class:"card "+(this.flipped?"flipped":"")},n("div",{key:"eb8af2e445393592c0e8a3e4c5934c71dcab4b4e",class:"card-face card-front"},null!=this.front?this.front:n("slot",{name:"front"})),n("div",{key:"efa14cc7ea506714342151b12a9724bdcdb1eba8",class:"card-face card-back"},null!=this.back?this.back:n("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)}lido-container[template-id="flashcardtemplate"] #arrow{position:absolute !important;left:auto !important;top:50% !important;right:13.3% !important;transform:translateY(-50%);z-index:4 !important;overflow:visible;box-sizing:border-box;border:10px solid transparent;box-shadow:0px 8px 0px 0px #8b310f !important}lido-container[template-id="flashcardtemplate"] #arrow.flash-card-next-glowing{animation:flash-card-next-attention 1.4s ease-in-out infinite}@keyframes flash-card-next-attention{0%,100%{border-color:#ffc34d;filter:drop-shadow(0 0 0 rgba(255, 195, 77, 0))}50%{border-color:#fff1a8;filter:drop-shadow(0 0 10px rgba(255, 195, 77, 0.95))}}lido-container[template-id="flashcardtemplate"] #arrow:active{transform:translateY(calc(-50% + 8px)) !important;box-shadow:0px 0px 0px 0px !important}@media (orientation: portrait){lido-container[template-id="flashcardtemplate"] #arrow{right:-4.3% !important}}'}},[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],autoFlipAfter:[2,"auto-flip-after"],margin:[1],disableSpeak:[4,"disable-speak"],delayVisible:[1,"delay-visible"],style:[32]},void 0,{flipped:[{handleFlippedChange:0}]}]);function c(){"undefined"!=typeof customElements&&["lido-flash-card"].forEach((i=>{"lido-flash-card"===i&&(customElements.get(r(i))||customElements.define(r(i),l))}))}l.narrationStartGrace=800,c();export{l as L,c as d}
@@ -1 +1 @@
1
- import{t,p as i,H as o,d as e,e as s,S as a,s as r,C as l,A as n,f as c,g as d,j as h,h as u,c as p,b}from"./index.js";import{d as f}from"./p-CgsPIpg0.js";import{d as m}from"./p-Gwko4CTL.js";const x=i(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.onOk=e(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="",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 o=!1;const e=this.el.closest("lido-container");if(!e)return;if(this.objective&&""!=this.objective&&!this.objective.includes(","))o=Number(i)===Number(this.objective);else if(this.objective&&this.objective.includes(",")){const t="true"===e.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])&&(o=!0),t?o&&this.userAnswers.push(Number(i)):this.userAnswers.push(Number(i))}else if(""===this.objective){const t=e.getAttribute("equationCheck")||"";if(!t)return;try{const e=s(t);o=Number(e)===Number(i.trim())}catch(t){console.error("Error evaluating equation:",t),o=!1}}this.onOk.emit(o);const u=document.getElementById("btn-11");if(o){const s="nimbleTable"===e.getAttribute("template-id"),p=this.objective.includes(",");s&&p||e.setAttribute("game-completed","true"),this.tempInputs.push(i);const b=JSON.parse(null!==(t=e.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),e.setAttribute(a,JSON.stringify(f)),u.style.pointerEvents="none",this.displayValue="",r(o,l),s&&p){const t=e.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==e?void 0:e.getAttribute("onCorrect"))||"";if(await c(x,e),!x.includes("scrollCellAfterEquationSolved"))if(p){const t=this.objective.split(",").map((t=>t.trim()));this.userAnswers.length>=t.length&&(e.setAttribute("game-completed","true"),d(),h())}else d(),h()}else{u.style.pointerEvents="none",this.displayValue="",r(o,l);const t=(null==e?void 0:e.getAttribute("onInCorrect"))||"",i=(null==e?void 0:e.getAttribute("onCorrect"))||"",s="true"===e.getAttribute("is-continue-on-correct");s?await c(t,e):await c(i,e),s||(e.setAttribute("game-completed","true"),d(),h())}u.style.pointerEvents="auto"}render(){return u(b,{key:"ae833326069dd4cf9588701995962b0d1b3b0091",onEntry:this.onEntry,id:"lidoCalculator",style:{width:this.width,height:this.height,backgroundColor:this.bgColor,left:this.x,top:this.y}},u("lido-cell",{key:"135b08be24862393217a0a93d4afd3ec8647547c",visible:"true",height:"94px",width:"60px"},u("lido-text",{key:"e6fb20b06bef347d68e427748669bb176c30b7a3",visible:"true",id:"lido-calculator-penIcon",type:"click",height:"80px",x:"204%",width:"89px",onEntry:"this.position='relative';",class:"top-icon"},u("img",{key:"2b6077ffad1046fdedb816402fdcb906539afa5c",src:p(this.penIcon),alt:"pen",style:{width:"100%",height:"100%"}}))),u("div",{key:"96dfabdab176f66e16d6b03efb2e8ecad74c9d45",class:"lido-calculator-displayParent"},u("div",{key:"9c711dd53ada73ca9ddac1c37b0719c5c746a591",class:"lido-calculator-display"},this.displayValue)),u("div",{key:"5d595bf410fc1a75fa57c485fd08a8e97064016a",class:"lido-calculator-buttons"},["1","2","3","4","5","6","7","8","9","←","0","OK"].map(((t,i)=>u("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{--btn-bg-color:#014D4D !important;background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{--btn-bg-color:#029A9A !important;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:100px !important;height:88px !important;font-size:80px !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 g(){"undefined"!=typeof customElements&&["lido-calculator","lido-cell","lido-text"].forEach((i=>{switch(i){case"lido-calculator":customElements.get(t(i))||customElements.define(t(i),x);break;case"lido-cell":customElements.get(t(i))||f();break;case"lido-text":customElements.get(t(i))||m()}}))}g();export{x as L,g as d}
1
+ import{t,p as i,H as o,d as e,e as s,S as a,s as r,C as l,A as n,f as c,g as d,j as h,h as p,c as u,b}from"./index.js";import{d as f}from"./p-CgsPIpg0.js";import{d as m}from"./p-DPGOqpde.js";const x=i(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.onOk=e(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="",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 o=!1;const e=this.el.closest("lido-container");if(!e)return;if(this.objective&&""!=this.objective&&!this.objective.includes(","))o=Number(i)===Number(this.objective);else if(this.objective&&this.objective.includes(",")){const t="true"===e.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])&&(o=!0),t?o&&this.userAnswers.push(Number(i)):this.userAnswers.push(Number(i))}else if(""===this.objective){const t=e.getAttribute("equationCheck")||"";if(!t)return;try{const e=s(t);o=Number(e)===Number(i.trim())}catch(t){console.error("Error evaluating equation:",t),o=!1}}this.onOk.emit(o);const p=document.getElementById("btn-11");if(o){const s="nimbleTable"===e.getAttribute("template-id"),u=this.objective.includes(",");s&&u||e.setAttribute("game-completed","true"),this.tempInputs.push(i);const b=JSON.parse(null!==(t=e.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),e.setAttribute(a,JSON.stringify(f)),p.style.pointerEvents="none",this.displayValue="",r(o,l),s&&u){const t=e.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==e?void 0:e.getAttribute("onCorrect"))||"";if(await c(x,e),!x.includes("scrollCellAfterEquationSolved"))if(u){const t=this.objective.split(",").map((t=>t.trim()));this.userAnswers.length>=t.length&&(e.setAttribute("game-completed","true"),d(),h())}else d(),h()}else{p.style.pointerEvents="none",this.displayValue="",r(o,l);const t=(null==e?void 0:e.getAttribute("onInCorrect"))||"",i=(null==e?void 0:e.getAttribute("onCorrect"))||"",s="true"===e.getAttribute("is-continue-on-correct");s?await c(t,e):await c(i,e),s||(e.setAttribute("game-completed","true"),d(),h())}p.style.pointerEvents="auto"}render(){return p(b,{key:"ae833326069dd4cf9588701995962b0d1b3b0091",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:"135b08be24862393217a0a93d4afd3ec8647547c",visible:"true",height:"94px",width:"60px"},p("lido-text",{key:"e6fb20b06bef347d68e427748669bb176c30b7a3",visible:"true",id:"lido-calculator-penIcon",type:"click",height:"80px",x:"204%",width:"89px",onEntry:"this.position='relative';",class:"top-icon"},p("img",{key:"2b6077ffad1046fdedb816402fdcb906539afa5c",src:u(this.penIcon),alt:"pen",style:{width:"100%",height:"100%"}}))),p("div",{key:"96dfabdab176f66e16d6b03efb2e8ecad74c9d45",class:"lido-calculator-displayParent"},p("div",{key:"9c711dd53ada73ca9ddac1c37b0719c5c746a591",class:"lido-calculator-display"},this.displayValue)),p("div",{key:"5d595bf410fc1a75fa57c485fd08a8e97064016a",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{--btn-bg-color:#014D4D !important;background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{--btn-bg-color:#029A9A !important;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:100px !important;height:88px !important;font-size:80px !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 g(){"undefined"!=typeof customElements&&["lido-calculator","lido-cell","lido-text"].forEach((i=>{switch(i){case"lido-calculator":customElements.get(t(i))||customElements.define(t(i),x);break;case"lido-cell":customElements.get(t(i))||f();break;case"lido-text":customElements.get(t(i))||m()}}))}g();export{x as L,g as d}
@@ -1 +1 @@
1
- import{t,p as e,H as i,w as s,S as o,s as n,A as a,x as r,f as l,g as d,j as h,u as c,D as p,a as u,h as b,b as f}from"./index.js";import{d as y}from"./p-Gwko4CTL.js";const g=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.keys="",this.gap="10px",this.bgColor="",this.borderRadius="",this.keyboardInput=!1,this.columns="10",this.disableSpeak=!1,this.numberOfClick=0,this.inputString="",this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}async inputValidation(t){if("click"!==this.type)return;const e=document.getElementById(s);if(!t.target.getAttribute("value"))return;let i=JSON.parse(localStorage.getItem(o))||"";localStorage.setItem(o,JSON.stringify(i));const p=document.body.getBoundingClientRect(),u=Array.from(e.querySelectorAll(".bubble-element")).filter((t=>{const e=t.getBoundingClientRect();return e.left<p.right&&e.right>p.left&&e.top<p.bottom&&e.bottom>p.top})).find((t=>{const e=t.getAttribute("value");return(null==e?void 0:e.startsWith(this.inputString.toLowerCase()))?t:null}));if(u){if(this.inputString.toLowerCase()===u.getAttribute("value").toLowerCase()){n(!0),a.getI().play(u),r(u),setTimeout((()=>{this.inputString=""}),1e3);const t=u.getAttribute("onCorrect");if(await l(t,u),u.style.animation="none",u.style.pointerEvents="none",this.numberOfClick++,localStorage.removeItem(o),this.numberOfClick===this.letterLength){const t=e.getAttribute("onCorrect");e.style.pointerEvents="none",await l(t,this.el),d(),h()}else c(u)}}else{n(!1),setTimeout((()=>{this.inputString=""}),1e3),localStorage.removeItem(o);const t=e.getAttribute("onInCorrect");await l(t,this.el)}}componentDidLoad(){if(document.getElementById(s).getAttribute("drop-action")===p.InfiniteDrop){const t=this.el.querySelectorAll(".key-button"),e=t[0];t.forEach((t=>{t.style.width=e.offsetWidth+"px",t.style.height=e.offsetHeight+"px"}))}}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:u(this.height,t),width:u(this.width,t),backgroundColor:u(this.bgColor,t),top:u(this.y,t),left:u(this.x,t),zIndex:this.z,fontSize:u(this.fontSize,t),fontFamily:this.fontFamily,color:u(this.fontColor,t),display:"true"===u(`${this.visible}`,t)?"flex":"none",margin:u(this.margin,t),padding:u(this.padding,t),borderRadius:u(this.borderRadius,t),columns:u(`${this.columns}`,t),gap:u(this.gap,t)}}render(){const t=this.keys.split(",").map((t=>t.trim())),e="true"===document.getElementById(s).getAttribute("show-check");return b(f,{key:"5773e8189c512e90d63217048f9372d00e4a7fe9",class:"lido-keyboard",style:{width:this.style.width,height:this.style.height,position:"relative",margin:this.style.margin,zIndex:this.z}},this.keyboardInput&&b("div",{key:"136fa3a2b0459a9a63e14ac8e212997e4bd32224",class:"input-area"},b("input",{key:"d9a1dc064d615b40b1e0e2b008dbf79ec70eb19b",type:"text",value:this.inputString,class:"input-area",readonly:!0}),b("lido-text",{key:"e6c53ea590c607b355d1f57d445d078c0bcf9085",visible:e?"true":"false",string:"<<","bg-color":"black","font-color":"white","border-radius":"20px","font-size":"30px",width:"100px",height:"70px",type:"click",onClick:()=>{this.inputString=this.inputString.slice(0,-1),this.inputValidation(event)}}),b("lido-text",{key:"815877bd027aa3540871c511df5937cfb0b6f149",visible:e?"true":"false",id:"lido-checkButton",string:"Enter","bg-color":"green","font-color":"white","border-radius":"20px","font-size":"30px",width:"150px",height:"70px",type:"click"})),this.letterLength&&b("lido-text",{key:"73c08eac4f9c154f47371e812fb337de26b10691",visible:"true",string:`${this.numberOfClick}/${this.letterLength}`,"font-size":"60px","font-color":"white",onEntry:"this.position='absolute'; this.right='0'; this.fontWeight='800';",x:"unset"}),b("div",{key:"1e7855724f15fdb432320f6186fc356518a29224",class:"keyboard-wrapper",style:{display:"flex",flexWrap:"wrap",justifyContent:"center",alignContent:"stretch",gap:this.gap,width:"100%",height:"100%"}},t.map(((t,e)=>{const[i,s]=t.split("-"),o="disable"===s;let n="Space"===i?" ":i;return b("lido-text",{id:"key-button-"+e,style:{flex:`0 0 calc(${100/parseInt(this.style.columns)}% - ${this.style.gap})`},visible:"true","font-size":this.style.fontSize,"font-color":this.fontColor,"font-family":this.fontFamily,"bg-color":this.bgColor,string:i,onEntry:this.onEntry,"border-radius":this.style.borderRadius,value:i.toLowerCase(),type:this.type,class:"key-button"+(o?" disabled":""),onClick:()=>{this.inputString+=n,this.inputValidation(event)},"disable-speak":this.disableSpeak})}))))}get el(){return this}static get style(){return'.lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type="text"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}'}},[0,"lido-keyboard",{keys:[1],width:[1],height:[1],fontSize:[1,"font-size"],fontColor:[1,"font-color"],fontFamily:[1,"font-family"],gap:[1],bgColor:[1,"bg-color"],borderRadius:[1,"border-radius"],y:[1],x:[1],z:[1],margin:[1],padding:[1],visible:[1],onEntry:[1,"on-entry"],type:[1],keyboardInput:[4,"keyboard-input"],columns:[1],letterLength:[2,"letter-length"],disableSpeak:[4,"disable-speak"],numberOfClick:[32],inputString:[32],style:[32]}]);function x(){"undefined"!=typeof customElements&&["lido-keyboard","lido-text"].forEach((e=>{switch(e){case"lido-keyboard":customElements.get(t(e))||customElements.define(t(e),g);break;case"lido-text":customElements.get(t(e))||y()}}))}x();export{g as L,x as d}
1
+ import{t,p as e,H as i,x as s,S as o,s as n,A as a,y as r,f as l,g as d,j as h,v as c,D as p,a as u,h as b,b as f}from"./index.js";import{d as y}from"./p-DPGOqpde.js";const g=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.keys="",this.gap="10px",this.bgColor="",this.borderRadius="",this.keyboardInput=!1,this.columns="10",this.disableSpeak=!1,this.numberOfClick=0,this.inputString="",this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}async inputValidation(t){if("click"!==this.type)return;const e=document.getElementById(s);if(!t.target.getAttribute("value"))return;let i=JSON.parse(localStorage.getItem(o))||"";localStorage.setItem(o,JSON.stringify(i));const p=document.body.getBoundingClientRect(),u=Array.from(e.querySelectorAll(".bubble-element")).filter((t=>{const e=t.getBoundingClientRect();return e.left<p.right&&e.right>p.left&&e.top<p.bottom&&e.bottom>p.top})).find((t=>{const e=t.getAttribute("value");return(null==e?void 0:e.startsWith(this.inputString.toLowerCase()))?t:null}));if(u){if(this.inputString.toLowerCase()===u.getAttribute("value").toLowerCase()){n(!0),a.getI().play(u),r(u),setTimeout((()=>{this.inputString=""}),1e3);const t=u.getAttribute("onCorrect");if(await l(t,u),u.style.animation="none",u.style.pointerEvents="none",this.numberOfClick++,localStorage.removeItem(o),this.numberOfClick===this.letterLength){const t=e.getAttribute("onCorrect");e.style.pointerEvents="none",await l(t,this.el),d(),h()}else c(u)}}else{n(!1),setTimeout((()=>{this.inputString=""}),1e3),localStorage.removeItem(o);const t=e.getAttribute("onInCorrect");await l(t,this.el)}}componentDidLoad(){if(document.getElementById(s).getAttribute("drop-action")===p.InfiniteDrop){const t=this.el.querySelectorAll(".key-button"),e=t[0];t.forEach((t=>{t.style.width=e.offsetWidth+"px",t.style.height=e.offsetHeight+"px"}))}}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:u(this.height,t),width:u(this.width,t),backgroundColor:u(this.bgColor,t),top:u(this.y,t),left:u(this.x,t),zIndex:this.z,fontSize:u(this.fontSize,t),fontFamily:this.fontFamily,color:u(this.fontColor,t),display:"true"===u(`${this.visible}`,t)?"flex":"none",margin:u(this.margin,t),padding:u(this.padding,t),borderRadius:u(this.borderRadius,t),columns:u(`${this.columns}`,t),gap:u(this.gap,t)}}render(){const t=this.keys.split(",").map((t=>t.trim())),e="true"===document.getElementById(s).getAttribute("show-check");return b(f,{key:"5773e8189c512e90d63217048f9372d00e4a7fe9",class:"lido-keyboard",style:{width:this.style.width,height:this.style.height,position:"relative",margin:this.style.margin,zIndex:this.z}},this.keyboardInput&&b("div",{key:"136fa3a2b0459a9a63e14ac8e212997e4bd32224",class:"input-area"},b("input",{key:"d9a1dc064d615b40b1e0e2b008dbf79ec70eb19b",type:"text",value:this.inputString,class:"input-area",readonly:!0}),b("lido-text",{key:"e6c53ea590c607b355d1f57d445d078c0bcf9085",visible:e?"true":"false",string:"<<","bg-color":"black","font-color":"white","border-radius":"20px","font-size":"30px",width:"100px",height:"70px",type:"click",onClick:()=>{this.inputString=this.inputString.slice(0,-1),this.inputValidation(event)}}),b("lido-text",{key:"815877bd027aa3540871c511df5937cfb0b6f149",visible:e?"true":"false",id:"lido-checkButton",string:"Enter","bg-color":"green","font-color":"white","border-radius":"20px","font-size":"30px",width:"150px",height:"70px",type:"click"})),this.letterLength&&b("lido-text",{key:"73c08eac4f9c154f47371e812fb337de26b10691",visible:"true",string:`${this.numberOfClick}/${this.letterLength}`,"font-size":"60px","font-color":"white",onEntry:"this.position='absolute'; this.right='0'; this.fontWeight='800';",x:"unset"}),b("div",{key:"1e7855724f15fdb432320f6186fc356518a29224",class:"keyboard-wrapper",style:{display:"flex",flexWrap:"wrap",justifyContent:"center",alignContent:"stretch",gap:this.gap,width:"100%",height:"100%"}},t.map(((t,e)=>{const[i,s]=t.split("-"),o="disable"===s;let n="Space"===i?" ":i;return b("lido-text",{id:"key-button-"+e,style:{flex:`0 0 calc(${100/parseInt(this.style.columns)}% - ${this.style.gap})`},visible:"true","font-size":this.style.fontSize,"font-color":this.fontColor,"font-family":this.fontFamily,"bg-color":this.bgColor,string:i,onEntry:this.onEntry,"border-radius":this.style.borderRadius,value:i.toLowerCase(),type:this.type,class:"key-button"+(o?" disabled":""),onClick:()=>{this.inputString+=n,this.inputValidation(event)},"disable-speak":this.disableSpeak})}))))}get el(){return this}static get style(){return'.lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type="text"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}'}},[0,"lido-keyboard",{keys:[1],width:[1],height:[1],fontSize:[1,"font-size"],fontColor:[1,"font-color"],fontFamily:[1,"font-family"],gap:[1],bgColor:[1,"bg-color"],borderRadius:[1,"border-radius"],y:[1],x:[1],z:[1],margin:[1],padding:[1],visible:[1],onEntry:[1,"on-entry"],type:[1],keyboardInput:[4,"keyboard-input"],columns:[1],letterLength:[2,"letter-length"],disableSpeak:[4,"disable-speak"],numberOfClick:[32],inputString:[32],style:[32]}]);function x(){"undefined"!=typeof customElements&&["lido-keyboard","lido-text"].forEach((e=>{switch(e){case"lido-keyboard":customElements.get(t(e))||customElements.define(t(e),g);break;case"lido-text":customElements.get(t(e))||y()}}))}x();export{g as L,x as d}
@@ -1 +1 @@
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 v=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.activeTraceState=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){this.cleanupTraceState(this.activeTraceState);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,touchProximityThreshold:null,pointerTransform:null,pointerRect:null};this.activeTraceState=t;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),this.cleanupTraceState(this.activeTraceState),this.activeTraceState=null}cleanupTraceState(t){var i;t&&(null===(i=t.cleanup)||void 0===i||i.call(t),t.rafId&&cancelAnimationFrame(t.rafId),t.rafId=null,t.pointerMoveEvent=null,t.pathSamples=[],t.paths=[],t.svg=null,null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.hideFingerHint())}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._lidoTraceLength=n,i._lidoTraceStart=i.getPointAtLength(0),i._lidoTraceEnd=i.getPointAtLength(n),i._lidoTraceIsClosed=this.getDistanceSquared(i._lidoTraceStart,i._lidoTraceEnd)<200;const o=n/192||1,r=[];for(let t=0;t<=192;t++){const e=Math.min(n,t*o),s=i.getPointAtLength(e);r.push({x:s.x,y:s.y,length:e})}i._lidoTraceSamples=r,i._lidoTraceSampleStep=o,i.setAttribute("id","lido-path-"+e);const a=i.cloneNode();a.style.opacity="100",a.style["stroke-opacity"]="100";const h=i.style["stroke-width"]||i.getAttribute("stroke-width");a.setAttribute("stroke-width",h),a.setAttribute("stroke-dasharray",n.toString()),a.setAttribute("stroke-dashoffset",n.toString()),i.parentNode.appendChild(a,i),i.setAttribute("class","lido-trace-path"),a.setAttribute("class","lido-trace-path-green"),i.greenPath=a,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",h),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]._lidoTraceLength}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";const o=i=>{i.preventDefault(),t.pointerRect=t.svg.getBoundingClientRect(),t.pointerTransform=this.getSvgViewBoxTransform(t.svg,t.pointerRect);const e=this.getPointerPosition(i,t.svg,t.pointerTransform,t.pointerRect),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)},r=i=>{t.isDragging&&i.pointerId===t.activePointerId&&(i.preventDefault(),t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))},a=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,t.lastPointerPos=null,t.dragOffset=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(i=t.svg)||void 0===i||i.addEventListener("pointerup",a),null===(e=t.svg)||void 0===e||e.addEventListener("pointercancel",a);const h=t=>{t.preventDefault()};t.circle.addEventListener("pointerdown",o,{passive:!1}),null===(s=t.svg)||void 0===s||s.addEventListener("pointermove",r),null===(n=t.svg)||void 0===n||n.addEventListener("contextmenu",h),t.cleanup=()=>{var i,e,s,n,l;null===(i=t.circle)||void 0===i||i.removeEventListener("pointerdown",o),null===(e=t.svg)||void 0===e||e.removeEventListener("pointermove",r),null===(s=t.svg)||void 0===s||s.removeEventListener("pointerup",a),null===(n=t.svg)||void 0===n||n.removeEventListener("pointercancel",a),null===(l=t.svg)||void 0===l||l.removeEventListener("contextmenu",h),t.isDragging=!1,t.activePointerId=null}}async handlePointerMove(t){var i,e,n,o,r;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;if(t.isCompletingPath)return;this.hideFingerHint();const a=t.pointerMoveEvent,h=this.getPointerPosition(a,t.svg,t.pointerTransform,t.pointerRect),l=t.dragOffset?{x:h.x-t.dragOffset.x,y:h.y-t.dragOffset.y}:h,c={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};let d=1/0;if(t.lastPointerPos){const i=l.x-t.lastPointerPos.x,e=l.y-t.lastPointerPos.y;if(d=i*i+e*e,d<1)return}const u=t.paths[t.currentPathIndex];if(!u)return void console.error("No valid path found at the current index");const f=this.getProximityThresholdForEvent(t,a),w=f*f;if(this.getDistanceSquared(l,c)>w)return;const g=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace,m=this.getClosestPointOnPath(u,l,g?void 0:t.lastLength);if(this.getDistanceSquared(l,m)>w)return;if(g){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",`${l.x},${l.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:l.x,y:l.y}],t.lastPointerPos=l,t.freeTracePointsCount=1}const s=5;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x:l.x,y:l.y}),t.currentFreePolylinePoints[t.currentPathIndex]=n;const o=n.map((t=>`${t.x},${t.y}`)).join(" ");return t.currentFreePath[t.currentPathIndex].setAttribute("points",o),t.circle.setAttribute("cx",l.x.toString()),t.circle.setAttribute("cy",l.y.toString()),t.circle.parentNode!==t.svg&&(null===(e=t.svg)||void 0===e||e.appendChild(t.circle)),t.lastPointerPos=l,void(n.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)),p=Math.min(60,Math.max(24,.12*t.totalPathLength));let x=m,y=x.length>=t.lastLength-20&&x.length-t.lastLength<=80;if(!y){const i=this.getClosestPointOnPath(u,l),e=this.getDistanceSquared(l,i);d>=64&&e<=w&&i.length>=t.lastLength-20&&i.length-t.lastLength<=v&&i.length<t.totalPathLength-p&&(x=i,y=!0)}if(t.isDragging&&y)if(t.lastLength=Math.max(t.lastLength,x.length),t.lastPointerPos=l,(Math.abs(x.x-c.x)>1||Math.abs(x.y-c.y)>1)&&(t.circle.setAttribute("cx",x.x.toString()),t.circle.setAttribute("cy",x.y.toString())),t.circle.parentNode!==t.svg&&(null===(n=t.svg)||void 0===n||n.appendChild(t.circle)),null===(o=u.greenPath)||void 0===o||o.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString()),null!==(r=u._lidoTraceIsClosed)&&void 0!==r&&r&&t.totalPathLength>50){if(t.lastLength/t.totalPathLength>=.95){if(t.isCompletingPath)return;t.isCompletingPath=!0,await this.animatePathToEnd(t,u),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,e,s){var n;const o=this.getPointerPositionFromViewBox(t,i,e,s);if(o)return o;const r=i.createSVGPoint();r.x=t.clientX,r.y=t.clientY;const a=null===(n=i.getScreenCTM())||void 0===n?void 0:n.inverse();return a?r.matrixTransform(a):{x:t.clientX,y:t.clientY}}getPointerPositionFromViewBox(t,i,e,s){const n=s||i.getBoundingClientRect(),o=i.viewBox.baseVal;if(!(n.width&&n.height&&o.width&&o.height))return null;const{offsetX:r,offsetY:a,scaleX:h,scaleY:l}=e||this.getSvgViewBoxTransform(i,n);return{x:o.x+(t.clientX-n.left-r)/h,y:o.y+(t.clientY-n.top-a)/l}}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){var s;const n=null!==(s=t._lidoTraceLength)&&void 0!==s?s:t.getTotalLength(),o=t._lidoTraceSamples,r=t._lidoTraceSampleStep;if((null==o?void 0:o.length)&&r){const s=void 0===e?n:150,a=void 0===e?0:Math.max(0,e-s),h=void 0===e?n:Math.min(n,e+s);let l=o[Math.max(0,Math.min(o.length-1,Math.round((e||0)/r)))],c=1/0;for(const t of o){if(t.length<a||t.length>h)continue;const e=this.getDistanceSquared(i,t);e<c&&(c=e,l=t)}const d=6,u=Math.max(a,l.length-r),f=Math.min(h,l.length+r);let w=Object.assign({},l),g=c;for(let e=u;e<=f;e+=d){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<g&&(g=n,w={x:s.x,y:s.y,length:e})}return w}let a={x:0,y:0,length:0},h=1/0,l=0,c=n;void 0!==e&&(l=Math.max(0,e-150),c=Math.min(n,e+150));let d={length:l};for(let e=l;e<=c;e+=40){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<h&&(h=n,d={x:s.x,y:s.y,length:e})}const u=Math.max(0,d.length-40),f=Math.min(n,d.length+40);h=1/0;for(let e=u;e<=f;e+=6){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<h&&(h=n,a={x:s.x,y:s.y,length:e})}return a}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:"361e60977f10125a19ce2c3a358c4b450d3f2d6c",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:"f003ed4286f05229490221854c5cba19e7930425",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],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),v))}))}p();export{v as L,p as d}
1
+ import{t,p as i,H as e,E as s,getAssetPath as n,c as o,k as r,F as a,G as h,s as l,f as c,x as d,g as u,j as f,a as w,h as g,b as m}from"./index.js";const v=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.activeTraceState=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){this.cleanupTraceState(this.activeTraceState);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,touchProximityThreshold:null,pointerTransform:null,pointerRect:null};this.activeTraceState=t;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),this.cleanupTraceState(this.activeTraceState),this.activeTraceState=null}cleanupTraceState(t){var i;t&&(null===(i=t.cleanup)||void 0===i||i.call(t),t.rafId&&cancelAnimationFrame(t.rafId),t.rafId=null,t.pointerMoveEvent=null,t.pathSamples=[],t.paths=[],t.svg=null,null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.hideFingerHint())}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._lidoTraceLength=n,i._lidoTraceStart=i.getPointAtLength(0),i._lidoTraceEnd=i.getPointAtLength(n),i._lidoTraceIsClosed=this.getDistanceSquared(i._lidoTraceStart,i._lidoTraceEnd)<200;const o=n/192||1,r=[];for(let t=0;t<=192;t++){const e=Math.min(n,t*o),s=i.getPointAtLength(e);r.push({x:s.x,y:s.y,length:e})}i._lidoTraceSamples=r,i._lidoTraceSampleStep=o,i.setAttribute("id","lido-path-"+e);const a=i.cloneNode();a.style.opacity="100",a.style["stroke-opacity"]="100";const h=i.style["stroke-width"]||i.getAttribute("stroke-width");a.setAttribute("stroke-width",h),a.setAttribute("stroke-dasharray",n.toString()),a.setAttribute("stroke-dashoffset",n.toString()),i.parentNode.appendChild(a,i),i.setAttribute("class","lido-trace-path"),a.setAttribute("class","lido-trace-path-green"),i.greenPath=a,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",h),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]._lidoTraceLength}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";const o=i=>{i.preventDefault(),t.pointerRect=t.svg.getBoundingClientRect(),t.pointerTransform=this.getSvgViewBoxTransform(t.svg,t.pointerRect);const e=this.getPointerPosition(i,t.svg,t.pointerTransform,t.pointerRect),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)},r=i=>{t.isDragging&&i.pointerId===t.activePointerId&&(i.preventDefault(),t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))},a=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,t.lastPointerPos=null,t.dragOffset=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(i=t.svg)||void 0===i||i.addEventListener("pointerup",a),null===(e=t.svg)||void 0===e||e.addEventListener("pointercancel",a);const h=t=>{t.preventDefault()};t.circle.addEventListener("pointerdown",o,{passive:!1}),null===(s=t.svg)||void 0===s||s.addEventListener("pointermove",r),null===(n=t.svg)||void 0===n||n.addEventListener("contextmenu",h),t.cleanup=()=>{var i,e,s,n,l;null===(i=t.circle)||void 0===i||i.removeEventListener("pointerdown",o),null===(e=t.svg)||void 0===e||e.removeEventListener("pointermove",r),null===(s=t.svg)||void 0===s||s.removeEventListener("pointerup",a),null===(n=t.svg)||void 0===n||n.removeEventListener("pointercancel",a),null===(l=t.svg)||void 0===l||l.removeEventListener("contextmenu",h),t.isDragging=!1,t.activePointerId=null}}async handlePointerMove(t){var i,e,n,o,r;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;if(t.isCompletingPath)return;this.hideFingerHint();const a=t.pointerMoveEvent,h=this.getPointerPosition(a,t.svg,t.pointerTransform,t.pointerRect),l=t.dragOffset?{x:h.x-t.dragOffset.x,y:h.y-t.dragOffset.y}:h,c={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};let d=1/0;if(t.lastPointerPos){const i=l.x-t.lastPointerPos.x,e=l.y-t.lastPointerPos.y;if(d=i*i+e*e,d<1)return}const u=t.paths[t.currentPathIndex];if(!u)return void console.error("No valid path found at the current index");const f=this.getProximityThresholdForEvent(t,a),w=f*f;if(this.getDistanceSquared(l,c)>w)return;const g=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace,m=this.getClosestPointOnPath(u,l,g?void 0:t.lastLength);if(this.getDistanceSquared(l,m)>w)return;if(g){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",`${l.x},${l.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:l.x,y:l.y}],t.lastPointerPos=l,t.freeTracePointsCount=1}const s=5;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x:l.x,y:l.y}),t.currentFreePolylinePoints[t.currentPathIndex]=n;const o=n.map((t=>`${t.x},${t.y}`)).join(" ");return t.currentFreePath[t.currentPathIndex].setAttribute("points",o),t.circle.setAttribute("cx",l.x.toString()),t.circle.setAttribute("cy",l.y.toString()),t.circle.parentNode!==t.svg&&(null===(e=t.svg)||void 0===e||e.appendChild(t.circle)),t.lastPointerPos=l,void(n.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)),p=Math.min(60,Math.max(24,.12*t.totalPathLength));let x=m,y=x.length>=t.lastLength-20&&x.length-t.lastLength<=80;if(!y){const i=this.getClosestPointOnPath(u,l),e=this.getDistanceSquared(l,i);d>=64&&e<=w&&i.length>=t.lastLength-20&&i.length-t.lastLength<=v&&i.length<t.totalPathLength-p&&(x=i,y=!0)}if(t.isDragging&&y)if(t.lastLength=Math.max(t.lastLength,x.length),t.lastPointerPos=l,(Math.abs(x.x-c.x)>1||Math.abs(x.y-c.y)>1)&&(t.circle.setAttribute("cx",x.x.toString()),t.circle.setAttribute("cy",x.y.toString())),t.circle.parentNode!==t.svg&&(null===(n=t.svg)||void 0===n||n.appendChild(t.circle)),null===(o=u.greenPath)||void 0===o||o.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString()),null!==(r=u._lidoTraceIsClosed)&&void 0!==r&&r&&t.totalPathLength>50){if(t.lastLength/t.totalPathLength>=.95){if(t.isCompletingPath)return;t.isCompletingPath=!0,await this.animatePathToEnd(t,u),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,e,s){var n;const o=this.getPointerPositionFromViewBox(t,i,e,s);if(o)return o;const r=i.createSVGPoint();r.x=t.clientX,r.y=t.clientY;const a=null===(n=i.getScreenCTM())||void 0===n?void 0:n.inverse();return a?r.matrixTransform(a):{x:t.clientX,y:t.clientY}}getPointerPositionFromViewBox(t,i,e,s){const n=s||i.getBoundingClientRect(),o=i.viewBox.baseVal;if(!(n.width&&n.height&&o.width&&o.height))return null;const{offsetX:r,offsetY:a,scaleX:h,scaleY:l}=e||this.getSvgViewBoxTransform(i,n);return{x:o.x+(t.clientX-n.left-r)/h,y:o.y+(t.clientY-n.top-a)/l}}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){var s;const n=null!==(s=t._lidoTraceLength)&&void 0!==s?s:t.getTotalLength(),o=t._lidoTraceSamples,r=t._lidoTraceSampleStep;if((null==o?void 0:o.length)&&r){const s=void 0===e?n:150,a=void 0===e?0:Math.max(0,e-s),h=void 0===e?n:Math.min(n,e+s);let l=o[Math.max(0,Math.min(o.length-1,Math.round((e||0)/r)))],c=1/0;for(const t of o){if(t.length<a||t.length>h)continue;const e=this.getDistanceSquared(i,t);e<c&&(c=e,l=t)}const d=6,u=Math.max(a,l.length-r),f=Math.min(h,l.length+r);let w=Object.assign({},l),g=c;for(let e=u;e<=f;e+=d){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<g&&(g=n,w={x:s.x,y:s.y,length:e})}return w}let a={x:0,y:0,length:0},h=1/0,l=0,c=n;void 0!==e&&(l=Math.max(0,e-150),c=Math.min(n,e+150));let d={length:l};for(let e=l;e<=c;e+=40){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<h&&(h=n,d={x:s.x,y:s.y,length:e})}const u=Math.max(0,d.length-40),f=Math.min(n,d.length+40);h=1/0;for(let e=u;e<=f;e+=6){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<h&&(h=n,a={x:s.x,y:s.y,length:e})}return a}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:"361e60977f10125a19ce2c3a358c4b450d3f2d6c",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:"f003ed4286f05229490221854c5cba19e7930425",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],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),v))}))}p();export{v as L,p as d}
@@ -1 +1 @@
1
- import{t,p as i,H as e,i as s,c as o,w as n,a as l,e as a,s as h,y as r,h as c,b as d}from"./index.js";const u=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.rows="10",this.cols="10",this.defualtFill=0,this.leftIndex=!1,this.topIndex=!1,this.bottomIndex=!1,this.clickable=!0,this.activeOnlyVisible=!1,this.activeBgColor="transparent",this.deactiveBgColor="transparent",this.border="2px solid green",this.height="100%",this.width="100%",this.borderRadius="5px",this.visible="false",this.previousFilledSlot=-1,this.previousFilledSlotElement=null,this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}updateValue(t){this.el.setAttribute("value",t)}componentDidLoad(){const t=this.el.querySelectorAll(".slot");s(this.el,this.type),t.forEach((t=>{const i=t;i.style.setProperty("--active-bg-color",this.activeBgColor),i.style.setProperty("--deactive-bg-color",this.deactiveBgColor),i.style.pointerEvents=this.clickable?"":"none",i.style.border=this.border,i.style.color=this.fontColor,i.className.includes("slot-active")?(i.style.visibility="",this.matrixImage&&i.style.setProperty("--bg-image",`url(${o(this.matrixImage)})`)):this.activeOnlyVisible&&(i.style.visibility="hidden")})),this.updateSlots(),this.updateStyles()}componentWillLoad(){this.updateStyles(),this.updateSlots(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}updateSlots(){const t=this.el.querySelectorAll(".slot"),i=this.el.querySelector(".slot");if(!t.length||!i)return;const e=document.getElementById(n);let s=this.rows,o=this.cols;e&&"multiplyBeeds"===e.getAttribute("template-id")&&(o="9",s="1");const l=Number(s)<Number(o)?this.el.offsetHeight:this.el.offsetWidth,a=Number(s)>Number(o)?Number(s):Number(o),h=this.el.querySelectorAll(".slot-parent"),r=l/a;h.forEach((t=>{t.style.width=`${r}px`,Array.from(t.children).forEach((t=>{const i=t;i.style.width=`${r}px`,i.style.height=`${r}px`,"drop"!==this.type&&"drag"!==this.type&&"checkerBlock"!==this.type||(this.el.style.width="auto",this.el.style.height="auto"),(!this.topIndex&&i.classList.contains("topIndex")||!this.leftIndex&&i.classList.contains("leftIndex")||!this.bottomIndex&&i.classList.contains("bottomIndex"))&&(i.classList.contains("leftIndex")&&i.parentElement.remove(),i.remove())}))}))}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:l(this.height,t),width:l(this.width,t),zIndex:this.z,display:"true"===l(`${this.visible}`,t)?"flex":"none",borderRadius:l(this.borderRadius,t),left:l(this.x,t),top:l(this.y,t),cols:l(`${this.cols}`,t),rows:l(`${this.rows}`,t)}}handleClickSlot(t){const i=parseInt(t.className.split(" ")[1].split("-")[1]),e=this.el.querySelectorAll(".slot");if(e.forEach(((t,e)=>{const s=t;e<i?(s.classList.add("slot-active"),s.classList.remove("slot-inactive"),this.matrixImage&&s.style.setProperty("--bg-image",`url(${o(this.matrixImage)})`)):(s.classList.remove("slot-active"),s.classList.add("slot-inactive"))})),-1!==this.previousFilledSlot&&null!==this.previousFilledSlotElement&&(this.previousFilledSlotElement.textContent=""),t.textContent=i.toString(),this.previousFilledSlot=i,this.previousFilledSlotElement=t,i===e.length)try{const t=new CustomEvent("math-matrix-bottom-click",{detail:{matrix:this.el,cols:this.style.cols,rows:this.style.rows},bubbles:!0,composed:!0});this.el.dispatchEvent(t)}catch(t){console.warn("Error dispatching math-matrix-bottom-click from handleClickSlot",t)}this.updateValue(i.toString());const s=document.getElementById(n);if(this.clickable&&"checkerBlock"===this.type&&"mat1"===this.el.id&&(null==s?void 0:s.getAttribute("equationCheck"))&&s){const t=!!a(s.getAttribute("equationCheck"));console.log("Write Set checkerBlock click:",{result:t}),h(t)}r()}getSlotData(){const t={};return this.text?(this.text.split(",").forEach(((i,e)=>{const[s,o]=i.split("-"),n=parseInt(s.trim());isNaN(n)||(t[e]={text:s.trim(),color:null==o?void 0:o.trim()})})),t):t}render(){let t=1;const i=this.getSlotData();return c(d,{key:"2ef30835855363ba9fc7932122d1d505a451e055",class:"math-matrix",style:{height:this.style.height,width:this.style.width,z:this.style.z,display:this.style.display,top:this.style.top,left:this.style.left},type:this.type,value:this.value,"tab-index":this.tabIndex,rows:this.style.rows,cols:this.style.cols,text:this.text,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry},Array.from({length:parseInt(this.style.rows)+1},((e,s)=>c("div",{class:"slot-parent",key:`row-${s}`},c("div",{style:0===s&&{visibility:"hidden"},class:"topIndex"},s),Array.from({length:parseInt(this.style.cols)},((e,o)=>{var n,l;return 0===s?c("div",{class:"leftIndex"},++o):c("div",{class:`slot slot-${t} ${this.defualtFill>=t?"slot-active":"slot-inactive"}`,onClick:t=>this.handleClickSlot(t.currentTarget),key:`slot-${s}-${o}`,style:{borderRadius:this.style.borderRadius,backgroundColor:(null===(n=i[t-1])||void 0===n?void 0:n.color)||""}},null===(l=i[t-1])||void 0===l?void 0:l.text,t++&&null)})),c("div",{style:0===s&&{visibility:"hidden"},class:"bottomIndex"},parseInt(this.style.cols)*s)))))}get el(){return this}static get style(){return".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%;text-align:center;align-content:center;font-size:42px;font-weight:800;font-family:'Baloo Bhai 2';box-sizing:content-box}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:contain;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--deactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px;font-weight:600;font-family:'Baloo Bhai 2'}"}},[0,"lido-math-matrix",{rows:[1],cols:[1],defualtFill:[1538,"defualt-fill"],leftIndex:[4,"left-index"],topIndex:[4,"top-index"],bottomIndex:[4,"bottom-index"],clickable:[4],activeOnlyVisible:[4,"active-only-visible"],matrixImage:[1,"matrix-image"],activeBgColor:[1537,"active-bg-color"],deactiveBgColor:[1537,"deactive-bg-color"],border:[1537],height:[1537],width:[1537],borderRadius:[1,"border-radius"],z:[1],margin:[1],padding:[1],visible:[1],text:[1],type:[1],value:[1],tabIndex:[2,"tab-index"],x:[1],y:[1],fontColor:[1,"font-color"],onCorrect:[1,"on-correct"],onInCorrect:[1,"on-in-correct"],onEntry:[1,"on-entry"],previousFilledSlot:[32],previousFilledSlotElement:[32],style:[32]}]);function m(){"undefined"!=typeof customElements&&["lido-math-matrix"].forEach((i=>{"lido-math-matrix"===i&&(customElements.get(t(i))||customElements.define(t(i),u))}))}m();export{u as L,m as d}
1
+ import{t,p as i,H as e,i as s,c as o,x as n,a as l,e as a,s as h,z as r,h as c,b as d}from"./index.js";const u=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.rows="10",this.cols="10",this.defualtFill=0,this.leftIndex=!1,this.topIndex=!1,this.bottomIndex=!1,this.clickable=!0,this.activeOnlyVisible=!1,this.activeBgColor="transparent",this.deactiveBgColor="transparent",this.border="2px solid green",this.height="100%",this.width="100%",this.borderRadius="5px",this.visible="false",this.previousFilledSlot=-1,this.previousFilledSlotElement=null,this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}updateValue(t){this.el.setAttribute("value",t)}componentDidLoad(){const t=this.el.querySelectorAll(".slot");s(this.el,this.type),t.forEach((t=>{const i=t;i.style.setProperty("--active-bg-color",this.activeBgColor),i.style.setProperty("--deactive-bg-color",this.deactiveBgColor),i.style.pointerEvents=this.clickable?"":"none",i.style.border=this.border,i.style.color=this.fontColor,i.className.includes("slot-active")?(i.style.visibility="",this.matrixImage&&i.style.setProperty("--bg-image",`url(${o(this.matrixImage)})`)):this.activeOnlyVisible&&(i.style.visibility="hidden")})),this.updateSlots(),this.updateStyles()}componentWillLoad(){this.updateStyles(),this.updateSlots(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad)}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}updateSlots(){const t=this.el.querySelectorAll(".slot"),i=this.el.querySelector(".slot");if(!t.length||!i)return;const e=document.getElementById(n);let s=this.rows,o=this.cols;e&&"multiplyBeeds"===e.getAttribute("template-id")&&(o="9",s="1");const l=Number(s)<Number(o)?this.el.offsetHeight:this.el.offsetWidth,a=Number(s)>Number(o)?Number(s):Number(o),h=this.el.querySelectorAll(".slot-parent"),r=l/a;h.forEach((t=>{t.style.width=`${r}px`,Array.from(t.children).forEach((t=>{const i=t;i.style.width=`${r}px`,i.style.height=`${r}px`,"drop"!==this.type&&"drag"!==this.type&&"checkerBlock"!==this.type||(this.el.style.width="auto",this.el.style.height="auto"),(!this.topIndex&&i.classList.contains("topIndex")||!this.leftIndex&&i.classList.contains("leftIndex")||!this.bottomIndex&&i.classList.contains("bottomIndex"))&&(i.classList.contains("leftIndex")&&i.parentElement.remove(),i.remove())}))}))}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:l(this.height,t),width:l(this.width,t),zIndex:this.z,display:"true"===l(`${this.visible}`,t)?"flex":"none",borderRadius:l(this.borderRadius,t),left:l(this.x,t),top:l(this.y,t),cols:l(`${this.cols}`,t),rows:l(`${this.rows}`,t)}}handleClickSlot(t){const i=parseInt(t.className.split(" ")[1].split("-")[1]),e=this.el.querySelectorAll(".slot");if(e.forEach(((t,e)=>{const s=t;e<i?(s.classList.add("slot-active"),s.classList.remove("slot-inactive"),this.matrixImage&&s.style.setProperty("--bg-image",`url(${o(this.matrixImage)})`)):(s.classList.remove("slot-active"),s.classList.add("slot-inactive"))})),-1!==this.previousFilledSlot&&null!==this.previousFilledSlotElement&&(this.previousFilledSlotElement.textContent=""),t.textContent=i.toString(),this.previousFilledSlot=i,this.previousFilledSlotElement=t,i===e.length)try{const t=new CustomEvent("math-matrix-bottom-click",{detail:{matrix:this.el,cols:this.style.cols,rows:this.style.rows},bubbles:!0,composed:!0});this.el.dispatchEvent(t)}catch(t){console.warn("Error dispatching math-matrix-bottom-click from handleClickSlot",t)}this.updateValue(i.toString());const s=document.getElementById(n);if(this.clickable&&"checkerBlock"===this.type&&"mat1"===this.el.id&&(null==s?void 0:s.getAttribute("equationCheck"))&&s){const t=!!a(s.getAttribute("equationCheck"));console.log("Write Set checkerBlock click:",{result:t}),h(t)}r()}getSlotData(){const t={};return this.text?(this.text.split(",").forEach(((i,e)=>{const[s,o]=i.split("-"),n=parseInt(s.trim());isNaN(n)||(t[e]={text:s.trim(),color:null==o?void 0:o.trim()})})),t):t}render(){let t=1;const i=this.getSlotData();return c(d,{key:"2ef30835855363ba9fc7932122d1d505a451e055",class:"math-matrix",style:{height:this.style.height,width:this.style.width,z:this.style.z,display:this.style.display,top:this.style.top,left:this.style.left},type:this.type,value:this.value,"tab-index":this.tabIndex,rows:this.style.rows,cols:this.style.cols,text:this.text,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry},Array.from({length:parseInt(this.style.rows)+1},((e,s)=>c("div",{class:"slot-parent",key:`row-${s}`},c("div",{style:0===s&&{visibility:"hidden"},class:"topIndex"},s),Array.from({length:parseInt(this.style.cols)},((e,o)=>{var n,l;return 0===s?c("div",{class:"leftIndex"},++o):c("div",{class:`slot slot-${t} ${this.defualtFill>=t?"slot-active":"slot-inactive"}`,onClick:t=>this.handleClickSlot(t.currentTarget),key:`slot-${s}-${o}`,style:{borderRadius:this.style.borderRadius,backgroundColor:(null===(n=i[t-1])||void 0===n?void 0:n.color)||""}},null===(l=i[t-1])||void 0===l?void 0:l.text,t++&&null)})),c("div",{style:0===s&&{visibility:"hidden"},class:"bottomIndex"},parseInt(this.style.cols)*s)))))}get el(){return this}static get style(){return".math-matrix{width:100%;height:100%;display:flex;justify-content:center}.slot{width:100%;height:100%;text-align:center;align-content:center;font-size:42px;font-weight:800;font-family:'Baloo Bhai 2';box-sizing:content-box}.slot:hover{opacity:0.7}.slot-parent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.slot-active{background-color:var(--active-bg-color);background-image:var(--bg-image);background-size:contain;background-position:center;background-repeat:no-repeat}.slot-inactive{background-color:var(--deactive-bg-color);background-size:cover;background-position:center;background-repeat:no-repeat}.topIndex,.leftIndex,.bottomIndex{height:100%;width:100%;text-align:center;align-content:center;font-size:30px;font-weight:600;font-family:'Baloo Bhai 2'}"}},[0,"lido-math-matrix",{rows:[1],cols:[1],defualtFill:[1538,"defualt-fill"],leftIndex:[4,"left-index"],topIndex:[4,"top-index"],bottomIndex:[4,"bottom-index"],clickable:[4],activeOnlyVisible:[4,"active-only-visible"],matrixImage:[1,"matrix-image"],activeBgColor:[1537,"active-bg-color"],deactiveBgColor:[1537,"deactive-bg-color"],border:[1537],height:[1537],width:[1537],borderRadius:[1,"border-radius"],z:[1],margin:[1],padding:[1],visible:[1],text:[1],type:[1],value:[1],tabIndex:[2,"tab-index"],x:[1],y:[1],fontColor:[1,"font-color"],onCorrect:[1,"on-correct"],onInCorrect:[1,"on-in-correct"],onEntry:[1,"on-entry"],previousFilledSlot:[32],previousFilledSlotElement:[32],style:[32]}]);function m(){"undefined"!=typeof customElements&&["lido-math-matrix"].forEach((i=>{"lido-math-matrix"===i&&(customElements.get(t(i))||customElements.define(t(i),u))}))}m();export{u as L,m as d}
@@ -1 +1 @@
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}
1
+ import{t,p as i,H as s,k as o,i as e,v as a,w 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}