lido-player 0.0.2-beta-18-dev → 0.0.2-beta-19-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 (229) hide show
  1. package/LICENSE +21 -21
  2. package/dist/cjs/{decode-DUZYNXIv.js → decode-Bny56MQ9.js} +1 -1
  3. package/dist/cjs/{index-BEjUmVtH.js → index-BY9fvbr8.js} +137 -64
  4. package/dist/cjs/{index-DnqQXD5x.js → index-DjsCseV8.js} +16 -10
  5. package/dist/cjs/index.cjs.js +2 -2
  6. package/dist/cjs/lido-avatar_22.cjs.entry.js +33 -33
  7. package/dist/cjs/lido-player.cjs.js +2 -2
  8. package/dist/cjs/loader.cjs.js +1 -1
  9. package/dist/collection/collection-manifest.json +1 -1
  10. package/dist/collection/components/avatar/lido-avatar.css +4 -4
  11. package/dist/collection/components/avatar/lido-avatar.js +1 -1
  12. package/dist/collection/components/avatar/lido-avatar.tsx +207 -207
  13. package/dist/collection/components/avatar/readme.md +49 -49
  14. package/dist/collection/components/calculator/lido-calculator.css +89 -89
  15. package/dist/collection/components/calculator/lido-calculator.js +2 -2
  16. package/dist/collection/components/canvas/lido-canvas.css +33 -33
  17. package/dist/collection/components/canvas/lido-canvas.js +1 -1
  18. package/dist/collection/components/cell/lido-cell.css +100 -100
  19. package/dist/collection/components/cell/lido-cell.js +12 -12
  20. package/dist/collection/components/column/lido-col.css +19 -19
  21. package/dist/collection/components/column/lido-col.js +6 -6
  22. package/dist/collection/components/container/lido-container.css +10 -10
  23. package/dist/collection/components/container/lido-container.js +8 -8
  24. package/dist/collection/components/flashCard/lido-flash-card.css +28 -28
  25. package/dist/collection/components/flashCard/lido-flash-card.js +4 -4
  26. package/dist/collection/components/float/lido-float.css +30 -30
  27. package/dist/collection/components/float/lido-float.js +2 -2
  28. package/dist/collection/components/home/lido-home.css +309 -309
  29. package/dist/collection/components/home/lido-home.js +5 -5
  30. package/dist/collection/components/image/lido-image.css +17 -17
  31. package/dist/collection/components/image/lido-image.js +6 -6
  32. package/dist/collection/components/keyboard/lido-keyboard.css +38 -38
  33. package/dist/collection/components/keyboard/lido-keyboard.js +3 -3
  34. package/dist/collection/components/mathMatrix/lido-math-matrix.css +56 -56
  35. package/dist/collection/components/mathMatrix/lido-math-matrix.js +1 -1
  36. package/dist/collection/components/position/lido-pos.css +16 -16
  37. package/dist/collection/components/position/lido-pos.js +2 -2
  38. package/dist/collection/components/random/lido-random.css +8 -8
  39. package/dist/collection/components/random/lido-random.js +2 -2
  40. package/dist/collection/components/root/lido-root.js +5 -5
  41. package/dist/collection/components/row/lido-row.css +10 -10
  42. package/dist/collection/components/row/lido-row.js +6 -6
  43. package/dist/collection/components/scale/assets/Shadow.svg +9 -9
  44. package/dist/collection/components/scale/lido-balance.css +145 -145
  45. package/dist/collection/components/scale/lido-balance.js +13 -13
  46. package/dist/collection/components/shape/lido-shape.css +216 -216
  47. package/dist/collection/components/shape/lido-shape.js +6 -6
  48. package/dist/collection/components/slideFill/lido-slide-fill.css +3 -3
  49. package/dist/collection/components/slideFill/lido-slide-fill.js +13 -13
  50. package/dist/collection/components/text/lido-text.css +53 -53
  51. package/dist/collection/components/text/lido-text.js +5 -5
  52. package/dist/collection/components/trace/assets/Tracing-hand.svg +8 -8
  53. package/dist/collection/components/trace/lido-trace.css +97 -97
  54. package/dist/collection/components/trace/lido-trace.js +2 -2
  55. package/dist/collection/components/wrap/lido-wrap.css +18 -18
  56. package/dist/collection/components/wrap/lido-wrap.js +6 -6
  57. package/dist/collection/css/animation.css +211 -211
  58. package/dist/collection/css/index.css +324 -315
  59. package/dist/collection/stories/Templates/Fill-Up/fill-up.stories.js +61 -61
  60. package/dist/collection/stories/Templates/LetterPairing/LetterPairing.stories.js +123 -123
  61. package/dist/collection/stories/Templates/RocketGame/rocketGame.stories.js +48 -48
  62. package/dist/collection/stories/Templates/Tag/tagGame.stories.js +39 -39
  63. package/dist/collection/stories/Templates/arrangeLetters/arrangeLetters.stories.js +44 -44
  64. package/dist/collection/stories/Templates/balancing/balancing.stories.js +35 -35
  65. package/dist/collection/stories/Templates/balloonPop/balloonPop.stories.js +38 -38
  66. package/dist/collection/stories/Templates/blender/blender.stories.js +59 -59
  67. package/dist/collection/stories/Templates/bubbleType/bubbleType.stories.js +42 -42
  68. package/dist/collection/stories/Templates/calculator/calculator.stories.js +28 -28
  69. package/dist/collection/stories/Templates/categorize/categorize.stories.js +37 -37
  70. package/dist/collection/stories/Templates/categorize2/categorize2.stories.js +67 -67
  71. package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js +29 -29
  72. package/dist/collection/stories/Templates/checkerBlock/checkerBlock.stories.js +13 -13
  73. package/dist/collection/stories/Templates/create-sentence/createSentence.stories.js +74 -74
  74. package/dist/collection/stories/Templates/dragAndDrop/drag-drop.stories.js +69 -69
  75. package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js +43 -43
  76. package/dist/collection/stories/Templates/fillBlank/fill-blank.stories.js +282 -282
  77. package/dist/collection/stories/Templates/foodJar/food-jar.stories.js +35 -35
  78. package/dist/collection/stories/Templates/grid/grid.stories.js +118 -118
  79. package/dist/collection/stories/Templates/gridGame/grid-game.stories.js +57 -57
  80. package/dist/collection/stories/Templates/imageMatch/imageMatch.stories.js +44 -44
  81. package/dist/collection/stories/Templates/jumpSentence/jumpSentence.stories.js +41 -41
  82. package/dist/collection/stories/Templates/letterboard/letterboard.stories.js +183 -183
  83. package/dist/collection/stories/Templates/makeSentence/make-sentence.stories.js +36 -36
  84. package/dist/collection/stories/Templates/matchBox/matchBox.stories.js +69 -69
  85. package/dist/collection/stories/Templates/matchBox/matchBox2.stories.js +84 -84
  86. package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js +31 -31
  87. package/dist/collection/stories/Templates/multipleOption/mcqWithQuestionImage.stories.js +112 -112
  88. package/dist/collection/stories/Templates/multipleOption/multiple-option.stories.js +47 -47
  89. package/dist/collection/stories/Templates/multiplyBeeds/multiplyBeeds.stories.js +57 -57
  90. package/dist/collection/stories/Templates/nimbleTable/nimbleTable.stories.js +53 -53
  91. package/dist/collection/stories/Templates/numberBoard/numberBoard.stories.js +46 -46
  92. package/dist/collection/stories/Templates/numberBoardTwo/numberBoardTwo.stories.js +45 -45
  93. package/dist/collection/stories/Templates/numberIdentification/numberIdentificationimageTotext.stories.js +56 -56
  94. package/dist/collection/stories/Templates/numberIdentification/numberIdentificationtextTotext.stories.js +53 -53
  95. package/dist/collection/stories/Templates/numberPair/numberPair.stories.js +127 -127
  96. package/dist/collection/stories/Templates/openwindow/openwindow.stories.js +47 -47
  97. package/dist/collection/stories/Templates/openwindow/openwindow2.stories.js +38 -38
  98. package/dist/collection/stories/Templates/order-tractor/order-tractor-ascending-order.stories.js +97 -97
  99. package/dist/collection/stories/Templates/order-tractor/order-tractor.stories.js +90 -90
  100. package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaMultiOption.stories.js +63 -63
  101. package/dist/collection/stories/Templates/palEgmaCalculateSum/palEgmaSumTogether.stories.js +45 -45
  102. package/dist/collection/stories/Templates/palEgmaPatternMatching/palEgmaPatternMatching.stories.js +63 -63
  103. package/dist/collection/stories/Templates/palEgmaWordProblem/palEgmaWordProblem.stories.js +79 -79
  104. package/dist/collection/stories/Templates/palEgraInventedSpelling/pal_egra_invented_spelling_schema.stories.js +32 -32
  105. package/dist/collection/stories/Templates/palEgraMCQWithImage/palEgraMCQWithImage.stories.js +42 -42
  106. package/dist/collection/stories/Templates/palEgraOptionWithAudio/palEgraOptionWithAudio.stories.js +63 -63
  107. package/dist/collection/stories/Templates/palEgraStoryMaking/pal_egra_story_making.stories.js +44 -44
  108. package/dist/collection/stories/Templates/palEgraTemplate1/palEgraLetterIdentification.stories.js +34 -34
  109. package/dist/collection/stories/Templates/palEgraWordMatch/palEgraWordMatch.stories.js +52 -52
  110. package/dist/collection/stories/Templates/palEgra_OddOneOut/palEgra_oddOneOut.stories.js +33 -33
  111. package/dist/collection/stories/Templates/palEgra_arrange_pictures/palEgra_arrange_pictures.stories.js +40 -40
  112. package/dist/collection/stories/Templates/palEgra_build_word/palEgra_build_word.stories.js +48 -48
  113. package/dist/collection/stories/Templates/palEgra_word_formation/palEgra_WordFormation.stories.js +48 -48
  114. package/dist/collection/stories/Templates/palStorytale/palStorytale.stories.js +18 -18
  115. package/dist/collection/stories/Templates/phonic-tractor/phonic-tractor.stories.js +44 -44
  116. package/dist/collection/stories/Templates/pictureClues/pictureClues.stories.js +34 -34
  117. package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch1.stories.js +36 -36
  118. package/dist/collection/stories/Templates/pictureWordMatch/pictureWordMatch2.stories.js +30 -30
  119. package/dist/collection/stories/Templates/picturemeaning/pictureMeaningCocos.stories.js +20 -20
  120. package/dist/collection/stories/Templates/puzzleGame/puzzleGame.stories.js +17 -17
  121. package/dist/collection/stories/Templates/questionBoard/questionBoard.stories.js +58 -58
  122. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracy.stories.js +50 -50
  123. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWithText.stories.js +36 -36
  124. package/dist/collection/stories/Templates/quizLiteracy/quizLiteracyImageWord.stories.js +43 -43
  125. package/dist/collection/stories/Templates/quizMaths/quizMaths.stories.js +631 -631
  126. package/dist/collection/stories/Templates/reorder/reorder.stories.js +63 -63
  127. package/dist/collection/stories/Templates/rowBlocks/rowBlocks.stories.js +47 -47
  128. package/dist/collection/stories/Templates/sentenceMatch/sentenceMatch.stories.js +29 -29
  129. package/dist/collection/stories/Templates/sequenceBox/sequenceBox1.stories.js +64 -64
  130. package/dist/collection/stories/Templates/sequenceBox/sequenceBox2.stories.js +62 -62
  131. package/dist/collection/stories/Templates/shapePair/shape-pair.stories.js +106 -106
  132. package/dist/collection/stories/Templates/shapeTractor/shape-tractor.stories.js +50 -50
  133. package/dist/collection/stories/Templates/spellDoor/spellDoor.stories.js +41 -41
  134. package/dist/collection/stories/Templates/storyTale/storyTale.stories.js +39 -39
  135. package/dist/collection/stories/Templates/substraction/substractionWithimg.stories.js +62 -62
  136. package/dist/collection/stories/Templates/substraction/substractionWithoutImg.stories.js +42 -42
  137. package/dist/collection/stories/Templates/sumTogether/sumTogether.stories.js +50 -50
  138. package/dist/collection/stories/Templates/tenBox/tenBox.stories.js +88 -88
  139. package/dist/collection/stories/Templates/total/total.stories.js +28 -28
  140. package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithimg.stories.js +35 -35
  141. package/dist/collection/stories/Templates/wordBuilding/wordBuildingwithoutimg.stories.js +34 -34
  142. package/dist/collection/stories/Templates/writeCard/writeCard.stories.js +31 -31
  143. package/dist/collection/stories/Templates/writeLetter/writeLetter.stories.js +58 -58
  144. package/dist/collection/stories/Templates/writeNumber/writeNumber.stories.js +44 -44
  145. package/dist/collection/stories/Templates/writeSet/writeSet.stories.js +31 -31
  146. package/dist/collection/stories/Templates/writeWord/writeWord.stories.js +34 -34
  147. package/dist/collection/stories/components/flash-card.stories.js +48 -48
  148. package/dist/collection/stories/components/keyboard.stories.js +10 -10
  149. package/dist/collection/stories/components/slider.stories.js +4 -4
  150. package/dist/collection/stories/components/trace.stories.js +5 -5
  151. package/dist/collection/utils/audioPlayer.js +2 -5
  152. package/dist/collection/utils/utils.js +49 -9
  153. package/dist/collection/utils/utilsHandlers/dragDropHandler.js +10 -10
  154. package/dist/collection/utils/utilsHandlers/highlightHandler.js +54 -54
  155. package/dist/collection/utils/utilsHandlers/sortHandler.js +53 -15
  156. package/dist/components/index.js +1 -1
  157. package/dist/components/lido-avatar.js +1 -1
  158. package/dist/components/lido-balance.js +1 -1
  159. package/dist/components/lido-calculator.js +1 -1
  160. package/dist/components/lido-canvas.js +1 -1
  161. package/dist/components/lido-cell.js +1 -1
  162. package/dist/components/lido-col.js +1 -1
  163. package/dist/components/lido-container.js +1 -1
  164. package/dist/components/lido-flash-card.js +1 -1
  165. package/dist/components/lido-float.js +1 -1
  166. package/dist/components/lido-home.js +1 -1
  167. package/dist/components/lido-keyboard.js +1 -1
  168. package/dist/components/lido-math-matrix.js +1 -1
  169. package/dist/components/lido-pos.js +1 -1
  170. package/dist/components/lido-random.js +1 -1
  171. package/dist/components/lido-root.js +1 -1
  172. package/dist/components/lido-row.js +1 -1
  173. package/dist/components/lido-shape.js +1 -1
  174. package/dist/components/lido-slide-fill.js +1 -1
  175. package/dist/components/lido-text.js +1 -1
  176. package/dist/components/lido-trace.js +1 -1
  177. package/dist/components/lido-wrap.js +1 -1
  178. package/dist/components/{p-yT7udDfd.js → p-B4YAipq-.js} +1 -1
  179. package/dist/components/{p-DdQ1eqJr.js → p-B8nzzM8c.js} +1 -1
  180. package/dist/components/{p-Sl9R-E6h.js → p-BBHM059l.js} +1 -1
  181. package/dist/components/{p-SPZTb5fI.js → p-BJMjg5wu.js} +1 -1
  182. package/dist/components/{p-Cj-6tqzU.js → p-BOQDbCrm.js} +1 -1
  183. package/dist/components/{p-CwDTdXe5.js → p-BeRr8u5m.js} +1 -1
  184. package/dist/components/{p-CjdDpXfk.js → p-BfqihbR6.js} +1 -1
  185. package/dist/components/{p-CPYnt0P-.js → p-C5WmmkI6.js} +1 -1
  186. package/dist/components/{p-useuhkjH.js → p-C70ykycD.js} +1 -1
  187. package/dist/components/{p-BE25wHoo.js → p-CCR42e0i.js} +1 -1
  188. package/dist/components/{p-BfwUqpXc.js → p-CTlcpv4a.js} +1 -1
  189. package/dist/components/{p-BNNX1Pew.js → p-CWwymnbk.js} +2 -2
  190. package/dist/components/{p-CyGxEcn7.js → p-CXHPZN3m.js} +1 -1
  191. package/dist/components/{p-Bw-OC9iR.js → p-CgsPIpg0.js} +1 -1
  192. package/dist/components/{p-D54c-ybm.js → p-CljvnHkI.js} +1 -1
  193. package/dist/components/p-CwIlwnQk.js +1 -0
  194. package/dist/components/p-DLyacZap.js +1 -0
  195. package/dist/components/p-DONbWJGn.js +1 -0
  196. package/dist/components/p-DVTigdH_.js +1 -0
  197. package/dist/components/{p-CTlwn9r7.js → p-DYFVwyRr.js} +1 -1
  198. package/dist/esm/{decode-BgBfbPZu.js → decode-Buyq-Iy5.js} +1 -1
  199. package/dist/esm/{index-D-29PaRa.js → index-CQXciux9.js} +137 -64
  200. package/dist/esm/{index-BeHFCsWf.js → index-DQZfuGjI.js} +16 -10
  201. package/dist/esm/index.js +2 -2
  202. package/dist/esm/lido-avatar_22.entry.js +33 -33
  203. package/dist/esm/lido-player.js +3 -3
  204. package/dist/esm/loader.js +2 -2
  205. package/dist/lido-player/assets/Shadow.svg +9 -9
  206. package/dist/lido-player/assets/Tracing-hand.svg +8 -8
  207. package/dist/lido-player/index.esm.js +1 -1
  208. package/dist/lido-player/lido-avatar.css +4 -4
  209. package/dist/lido-player/lido-avatar.tsx +207 -207
  210. package/dist/lido-player/lido-player.css +8 -8
  211. package/dist/lido-player/lido-player.esm.js +1 -1
  212. package/dist/lido-player/{p-856e1956.entry.js → p-37736e11.entry.js} +2 -2
  213. package/dist/lido-player/p-3Ry570XH.js +1 -0
  214. package/dist/lido-player/{p-BA2X6O7O.js → p-CFtq4Thh.js} +1 -1
  215. package/dist/lido-player/p-DQZfuGjI.js +3 -0
  216. package/dist/lido-player/readme.md +49 -49
  217. package/dist/types/stencil-public-runtime.d.ts +61 -55
  218. package/dist/types/types/json.d.ts +3 -3
  219. package/dist/types/utils/utils.d.ts +1 -1
  220. package/dist/types/utils/utilsHandlers/dragDropHandler.d.ts +1 -0
  221. package/dist/types/utils/utilsHandlers/sortHandler.d.ts +2 -0
  222. package/package.json +73 -73
  223. package/readme.md +113 -113
  224. package/dist/components/p-BSV5U72F.js +0 -1
  225. package/dist/components/p-D-B1groh.js +0 -1
  226. package/dist/components/p-DbR5sNOj.js +0 -1
  227. package/dist/components/p-leIEepjl.js +0 -1
  228. package/dist/lido-player/p-BeHFCsWf.js +0 -3
  229. package/dist/lido-player/p-TuBmCgtK.js +0 -1
@@ -1 +1 @@
1
- import{t,p as i,H as s,i as o,a as e,h,b as n}from"./index.js";const a=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin="",this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}componentDidLoad(){o(this.el,this.type)}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:e(this.height,t),width:e(this.width,t),backgroundColor:e(this.bgColor,t),top:e(this.y,t),left:e(this.x,t),zIndex:this.z,display:JSON.parse(e(`${this.visible}`,t))?"block":"none",margin:e(this.margin,t)}}render(){return h(n,{key:"cfd38900b31991e89c21a099fc4f91f77663ae94",id:this.id,class:"lido-pos",type:this.type,"tab-index":this.tabIndex,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,minDrops:this.minDrops,maxDrops:this.maxDrops,value:this.value,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry},h("slot",{key:"73f7bfe2d8214693d6f40a4dab6d735906ad4eaa"}))}get el(){return this}static get style(){return".lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}"}},[260,"lido-pos",{id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[8],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1],style:[32]}]);function r(){"undefined"!=typeof customElements&&["lido-pos"].forEach((i=>{"lido-pos"===i&&(customElements.get(t(i))||customElements.define(t(i),a))}))}r();export{a as L,r as d}
1
+ import{t,p as i,H as s,i as o,a as e,h,b as n}from"./index.js";const a=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin="",this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles()}componentDidLoad(){o(this.el,this.type)}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:e(this.height,t),width:e(this.width,t),backgroundColor:e(this.bgColor,t),top:e(this.y,t),left:e(this.x,t),zIndex:this.z,display:JSON.parse(e(`${this.visible}`,t))?"block":"none",margin:e(this.margin,t)}}render(){return h(n,{key:"4c417a789cc167f7d701b8469890631f9871fe6f",id:this.id,class:"lido-pos",type:this.type,"tab-index":this.tabIndex,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,minDrops:this.minDrops,maxDrops:this.maxDrops,value:this.value,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry},h("slot",{key:"d5026f61804b53e63aa1cc6c15b3de91543cf426"}))}get el(){return this}static get style(){return".lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}"}},[260,"lido-pos",{id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[8],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1],style:[32]}]);function r(){"undefined"!=typeof customElements&&["lido-pos"].forEach((i=>{"lido-pos"===i&&(customElements.get(t(i))||customElements.define(t(i),a))}))}r();export{a as L,r as d}
@@ -1 +1 @@
1
- import{t as i,p as t,H as s,k as o,i as e,l as a,m as l,a as r,h,b as d}from"./index.js";const n=t(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.showSpeakIcon=!1,this.scrollbarWidth="",this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.gap="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible="false",this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.childElementsLength=9999,this.minLength=0,this.maxLength=9999,this.layout="wrap",this.minDrops=1,this.maxDrops=1,this.margin="",this.padding="",this.alignItems="",this.borderRadius="0px",this.flexDirection="",this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles(),this.delayVisible="",this.disableSpeak=!1}componentDidLoad(){o(this.el,this.delayVisible),e(this.el,this.type),a(this.el,this.minLength,this.maxLength,this.childElementsLength),setTimeout((()=>{const i=this.el.className.includes("lido-random")?this.el:null;if(i){const t=i.parentElement;if(!t)return;const s=t.offsetWidth,o=t.offsetHeight;Array.from(i.children).forEach((i=>{const t=s-i.offsetWidth,e=o-i.offsetHeight,a=Math.random()*t,l=Math.random()*e;i.style.position="absolute",i.style.left=`${a}px`,i.style.top=`${l}px`}))}}),50),this.showSpeakIcon&&l(this.el)}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 i=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:r(this.height,i),width:r(this.width,i),backgroundColor:r(this.bgColor,i),top:r(this.y,i),left:r(this.x,i),zIndex:this.z,margin:r(this.margin,i),padding:r(this.padding,i),borderRadius:r(this.borderRadius,i),gap:r(this.gap,i),"--scrollbar-width":r(this.scrollbarWidth||"0px",i),display:JSON.parse(r(`${this.visible}`,i))?"wrap"===r(this.layout,i)?"grid":"pos"===r(this.layout,i)||"random"===r(this.layout,i)?"block":"flex":"none",flexDirection:this.flexDirection?r(this.flexDirection,i):"",alignItems:this.alignItems?r(this.alignItems,i):""},this.el.className=`lido-${r(this.layout,i)}`}render(){return h(d,{key:"73bdf9dd33fdd8322c35465de011697da112193a",id:this.id,class:"lido-cell",value:this.value,type:this.type,"tab-index":this.tabIndex,style:this.style,minDrops:this.minDrops,maxDrops:this.maxDrops,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,"flex-direction":this.flexDirection,"disable-speak":this.disableSpeak},h("slot",{key:"6e9d4507b36716f04853d39ef66015441782aa88"}))}get el(){return this}static get style(){return".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}"}},[260,"lido-cell",{showSpeakIcon:[4,"show-speak-icon"],scrollbarWidth:[1,"scrollbar-width"],id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],gap:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[1],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],childElementsLength:[2,"child-elements-length"],minLength:[2,"min-length"],maxLength:[2,"max-length"],layout:[1],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1],padding:[1],alignItems:[1,"align-items"],borderRadius:[1,"border-radius"],flexDirection:[1,"flex-direction"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],style:[32]}]);function c(){"undefined"!=typeof customElements&&["lido-cell"].forEach((t=>{"lido-cell"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}c();export{n as L,c as d}
1
+ import{t as i,p as t,H as s,k as o,i as e,l as a,m as l,a as r,h,b as d}from"./index.js";const n=t(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.showSpeakIcon=!1,this.scrollbarWidth="",this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.gap="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible="false",this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.childElementsLength=9999,this.minLength=0,this.maxLength=9999,this.layout="wrap",this.minDrops=1,this.maxDrops=1,this.margin="",this.padding="",this.alignItems="",this.borderRadius="0px",this.flexDirection="",this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles(),this.delayVisible="",this.disableSpeak=!1}componentDidLoad(){o(this.el,this.delayVisible),e(this.el,this.type),a(this.el,this.minLength,this.maxLength,this.childElementsLength),setTimeout((()=>{const i=this.el.className.includes("lido-random")?this.el:null;if(i){const t=i.parentElement;if(!t)return;const s=t.offsetWidth,o=t.offsetHeight;Array.from(i.children).forEach((i=>{const t=s-i.offsetWidth,e=o-i.offsetHeight,a=Math.random()*t,l=Math.random()*e;i.style.position="absolute",i.style.left=`${a}px`,i.style.top=`${l}px`}))}}),50),this.showSpeakIcon&&l(this.el)}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 i=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:r(this.height,i),width:r(this.width,i),backgroundColor:r(this.bgColor,i),top:r(this.y,i),left:r(this.x,i),zIndex:this.z,margin:r(this.margin,i),padding:r(this.padding,i),borderRadius:r(this.borderRadius,i),gap:r(this.gap,i),"--scrollbar-width":r(this.scrollbarWidth||"0px",i),display:JSON.parse(r(`${this.visible}`,i))?"wrap"===r(this.layout,i)?"grid":"pos"===r(this.layout,i)||"random"===r(this.layout,i)?"block":"flex":"none",flexDirection:this.flexDirection?r(this.flexDirection,i):"",alignItems:this.alignItems?r(this.alignItems,i):""},this.el.className=`lido-${r(this.layout,i)}`}render(){return h(d,{key:"53d510e92a72d1f855e6d0cb0c0564c2f4351b64",id:this.id,class:"lido-cell",value:this.value,type:this.type,"tab-index":this.tabIndex,style:this.style,minDrops:this.minDrops,maxDrops:this.maxDrops,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,"flex-direction":this.flexDirection,"disable-speak":this.disableSpeak},h("slot",{key:"1af7a1f78e12bb1babcd91266eaf209b9d7530dc"}))}get el(){return this}static get style(){return".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}"}},[260,"lido-cell",{showSpeakIcon:[4,"show-speak-icon"],scrollbarWidth:[1,"scrollbar-width"],id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],gap:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[1],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],childElementsLength:[2,"child-elements-length"],minLength:[2,"min-length"],maxLength:[2,"max-length"],layout:[1],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1],padding:[1],alignItems:[1,"align-items"],borderRadius:[1,"border-radius"],flexDirection:[1,"flex-direction"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],style:[32]}]);function c(){"undefined"!=typeof customElements&&["lido-cell"].forEach((t=>{"lido-cell"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}c();export{n as L,c as d}
@@ -1 +1 @@
1
- import{t,p as e,H as i,L as a,T as o,n,c as r,i as s,o as l,q as u,h,b as d,r as c}from"./index.js";import{d as g,i as m}from"./p-Cj-6tqzU.js";const p=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.showDropBorder=!0,this.appendToDropOnCompletion=!1,this.id="",this.objective="",this.customStyle="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="auto",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.bgImage="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.canplay=!0,this.showCheck=!1,this.isContinueOnCorrect=!1,this.isAllowOnlyCorrect=!1,this.baseUrl="",this.margin="",this.showPrevButton="false",this.showNextButton="false",this.delayVisible="",this.disableSpeak=!1,this.templateId="",this.highlightWordByWord=!1,this.instructName="",this.speakFlag=!1,this.handleWindowResize=()=>this.scaleContainer(this.el),this.handleWindowLoad=()=>this.scaleContainer(this.el)}cleanupInteractionHandlers(){this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach((t=>{t.dispatchEvent(new Event(a))}))}languageChanged(t){const e=t||this.resolveLanguage();this.updateChildTextLanguage(e)}componentWillLoad(){const t=this.resolveLanguage();this.updateChildTextLanguage(t),this.resolveInstructionAudio()}resolveInstructionAudio(){var t;this.instructName=null!==(t={flashcard:"instruction.flashcards",mcq:"instruction.mcq",tracing:"instruction.tracing",dragAndDrop:"instruction.dragAndDrop",arrangeLetters:"arrangeLetters",balancing:"balancing",balloonPop:"balloonPop",blender:"blender",bubbleType:"bubbleType",calculator:"calculator",categorize:"categorize",checkerBlocks:"checkerBlocks",createSentence:"createSentence",fillAnswer:"fillAnswer",fillBlank:"fillBlank",fillUp:"fillUp",flashcardtemplate:"flashcard",foodJar:"foodJar",grid:"grid",imageMatchWithQuestionImageAndMultiOption:"imageMatchWithQuestionImageAndMultiOption",inventedSpelling:"inventedSpelling",jumpSentence:"jumpSentence",letterBoard:"letterBoard",letterIdentification:"letterIdentification",letterPairing:"letterPairing",makeSentence:"makeSentence",matchingCard:"matchingCard",multiplyBeeds:"multiplyBeeds",nimbleTable:"nimbleTable",numberBoardOneTwo:"numberBoardOneTwo",numberPair:"numberPair",openWindow:"openWindow",orderTractor:"orderTractor",phonicTractor:"phonicTractor",pictureMeaningCocos:"pictureMeaningCocos",pictureWordMatch1:"pictureWordMatch1",pictureWordMatch2:"pictureWordMatch2",puzzleGame:"puzzleGame",questionBoard:"questionBoard",quizLiteracySentenceSentence:"quizLiteracySentenceSentence",quizLiteracySoundOnlyImage:"quizLiteracySoundOnlyImage",quizLiteracySoundOnlySentence:"quizLiteracySoundOnlySentence",quizLiteracySoundOnlyWord:"quizLiteracySoundonlyWord",quizLiteracyAndShapes1:"quizLiteracyAndShapes1",quizLiteracyImageWithText:"quizLiteracyImageWithText",quizliteracyImageWord:"quizliteracyImageWord",quizMathBiggerAndSmaller:"quizMathBiggerAndSmaller",quizMathBiggestAndSmallest:"quizMathBiggestAndSmallest",quizmathCustomNumberMagnitude:"quizmathCustomNumberMagnitude",quizMathHowMany:"quizMathHowMany",quizmathMissingnumberDrag:"quizmathMissingnumberDrag",quizMathNumberIdentification:"quizMathNumberIdentification",quizMathOperationWithobjects:"quizMathOperationWithobjects",quizMathoperationWithoutObjects:"quizMathoperationWithoutObjects",quizMathRecognizeNumber:"quizMathRecognizeNumber",quizMathShapes:"quizMathShapes",reorder:"reorder",rocketGame:"rocketGame",rowBlock:"rowBlock",sequenceBox1:"sequenceBox1",shapeTractor:"shapeTractor",spellDoor:"spellDoor",storyMaking:"storyMaking",storyTale:"storyTale",sumTogether:"sumTogether",tag:"tag",total:"total",writeCard:"writeCard",writeLetter:"writeLetter",writeNumber:"writeNumber",writeSet:"writeSet",writeWord:"writeWord",numberIdentification:"numberIdentification",wordBuildingWithAndWithoutImage:"wordBuildingWithAndWithoutImage",subsWithAndWithoutImage:"subsWithAndWithoutImage",sentenceMatchTemplate:"sentenceMatch",pictureClues:"pictureClues",palEgmaCalculateSumAndSumTogether:"palEgmaCalculateSumAndSumTogether",palEgmaPatternMatching:"palEgmaPatternMatchingAudio",palEgmaWordProblem:"palEgmaWordProblem",palEgraArrangePictures:"palEgraArrangePicturesAudio",palEgraBuildWord:"palEgraBuildWordAudio",palEgraMCQWithImage:"palEgraMCQWithImage",palEgraOddOneOut:"palEgraOddOneOutAudio",palEgraOptionWithAudio:"palEgraOptionWithAudio",palEgraWordFormation:"palEgraWordFormationAudio",palEgraWordMatch:"palEgraWordMatch",substractionWithImage:"substractionWithImageAudio",substractionWithoutImage:"substractionWithoutImageAudio",numberIdentificationWithImage:"numberIdentificationWithImageAudio",numberIdentificationWithoutImage:"numberIdentificationWithoutImageAudio",wordBuildingWithImage:"wordBuildingWithImageAudio",wordBuildingWithoutImage:"wordBuildingWithoutImageAudio",pictureWordMatchMultipleImages:"pictureWordMatchMultipleImagesAudio",pictureWordMatchSingleImage:"pictureWordMatchSingleImageAudio",sentenceMatch:"sentenceMatchAudio",imageMatch:"imageMatchAudio",palStoryTale:"palStoryTaleAudio",palEgmaWordProblemDragnDrop:"palEgmaWordProblemDragnDropAudio",palEgmaWordProblemClick:"palEgmaWordProblemClickAudio",palInventedSpelling:"palInventedSpellingAudio",palLetterIdentification:"palLetterIdentificationAudio",palStoryMaking:"palStoryMakingAudio",palegmasumtogether:"palegmasumtogetherAudio",palegmamultioption:"palegmamultioptionAudio",palegraoptionaudio:"palegraoptionAudio",palegrawordmatch:"palegrawordmatchAudio",palegramcqimages:"palegramcqimagesAudio",drawShape:"drawshape",drawshape:"drawshape"}[this.templateId])&&void 0!==t?t:"";const e=document.querySelector("lido-home");if(!e)return;const i=e.getAttribute(o)||"";this.speakFlag=i.includes(this.templateId),this.speakFlag||e.setAttribute(o,[i,this.templateId].filter(Boolean).join(","))}resolveLanguage(){var t,e;const i=this.el.closest("lido-root"),a=(null==i?void 0:i.Lang)||"";if(null==a?void 0:a.trim())return a;if(null===(t=this.Lang)||void 0===t?void 0:t.trim())return this.Lang;const o=this.el.getAttribute("Lang");return(null==o?void 0:o.trim())?o:null===(e=this.el.textContent)||void 0===e?void 0:e.trim()}convertToPixels(t,e=document.body){if(!t)return 0;if(t.endsWith("px"))return parseFloat(t);const i=document.createElement("div");i.style.position="absolute",i.style.visibility="hidden",i.style.height=t,e.appendChild(i);const a=i.offsetHeight;return e.removeChild(i),a}scaleContainer(t){const e=this.getClosestParentWithWidth();let i=0;e&&(i=Math.min(e.clientWidth/1600,e.clientHeight/900)),t.style.transform=`translate(-50%, -50%) scale(${0!=i?i:n()})`,t.style.left="50%",t.style.top="50%",t.style.position="absolute",this.screenOrientation()}getClosestParentWithWidth(){let t=this.el.parentElement;for(;t;){if(t.offsetWidth>0)return t;t=t.parentElement}return null}screenOrientation(){window.innerHeight>window.innerWidth?(this.el.style.height="1600px",this.el.style.width="900px"):(this.el.style.height="900px",this.el.style.width="1600px")}updateChildTextLanguage(t){const e=t||m.language||"en";m.changeLanguage(e),this.el.querySelectorAll("lido-text").forEach((t=>{t.Lang=e,t.dispatchEvent(new CustomEvent("languageChanged",{bubbles:!0}))}))}componentDidLoad(){this.scaleContainer(this.el);const t=this.bgImage?r(this.bgImage):"",e=this.el.closest("lido-standalone"),i="true"===(null==e?void 0:e.getAttribute("bg-image"))?e:document.body;if(i.style.backgroundColor=this.bgColor,i.style.backgroundImage=t?`url(${t})`:"none",i.style.backgroundPosition=t?"bottom":"none",document.body.style.pointerEvents="auto",window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.templateId?setTimeout((()=>{this.el.setAttribute("onEntry",`${this.templateId}.speak='${!this.speakFlag}'; `+this.el.getAttribute("onEntry")),s(this.el,this.type)}),100):s(this.el,this.type),this.customStyle){const t=document.createElement("style");t.innerHTML=this.customStyle,document.head.appendChild(t)}const a=this.resolveLanguage();this.updateChildTextLanguage(a),setTimeout((()=>{l()}),100),c(),u.getI().start()}disconnectedCallback(){this.cleanupInteractionHandlers(),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad),document.body.style.backgroundColor="",document.body.style.backgroundImage="",c(),u.getI().stop()}render(){return h(d,{key:"1862e30fedda58726edc107f81fae1f63e96d009",id:"lido-container",Lang:this.Lang,"tab-index":0,class:"lido-container",objective:this.objective,baseUrl:this.baseUrl,style:{backgroundColor:this.bgColor,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",margin:this.margin,userSelect:"none"},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,onTouch:this.onTouch,onInCorrect:this.onInCorrect,onCorrect:this.onCorrect,onEntry:this.onEntry,"show-check":`${this.showCheck}`,"is-continue-on-correct":`${this.isContinueOnCorrect}`,"is-allow-only-correct":`${this.isAllowOnlyCorrect}`,canplay:`${this.canplay}`,appendToDropOnCompletion:`${this.appendToDropOnCompletion}`,"show-prev-button":`${this.showPrevButton}`,"show-next-button":`${this.showNextButton}`,"show-drop-border":`${this.showDropBorder}`,"bg-image":this.bgImage,"exit-button-url":this.exitButtonUrl,"prev-button-url":this.prevButtonUrl,"next-button-url":this.nextButtonUrl,"speaker-button-url":this.speakerButtonUrl,"disable-speak":`${this.disableSpeak}`,"template-id":this.templateId,audio:this.audio,"highlight-word-by-word":`${this.highlightWordByWord}`},h("lido-text",{key:"86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7",visible:"false",id:this.templateId,audio:"",string:this.instructName}),h("slot",{key:"c3128ea2164892757b32cb076d717436947f9a4c"}))}get el(){return this}static get watchers(){return{Lang:[{languageChanged:0}]}}static get style(){return".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}"}},[260,"lido-container",{Lang:[1,"lang"],showDropBorder:[4,"show-drop-border"],appendToDropOnCompletion:[4,"append-to-drop-on-completion"],id:[1],objective:[1],customStyle:[1,"custom-style"],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],bgImage:[1,"bg-image"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],canplay:[4],showCheck:[4,"show-check"],isContinueOnCorrect:[4,"is-continue-on-correct"],isAllowOnlyCorrect:[4,"is-allow-only-correct"],baseUrl:[1,"base-url"],margin:[1],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],showPrevButton:[1,"show-prev-button"],showNextButton:[1,"show-next-button"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],templateId:[1,"template-id"],highlightWordByWord:[4,"highlight-word-by-word"],instructName:[32],speakFlag:[32]},void 0,{Lang:[{languageChanged:0}]}]);function b(){"undefined"!=typeof customElements&&["lido-container","lido-text"].forEach((e=>{switch(e){case"lido-container":customElements.get(t(e))||customElements.define(t(e),p);break;case"lido-text":customElements.get(t(e))||g()}}))}b();export{p as L,b as d}
1
+ import{t,p as e,H as i,L as a,T as o,n,c as r,i as s,o as l,q as u,h,b as d,r as c}from"./index.js";import{d as g,i as m}from"./p-BOQDbCrm.js";const p=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.showDropBorder=!0,this.appendToDropOnCompletion=!1,this.id="",this.objective="",this.customStyle="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="auto",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.bgImage="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.canplay=!0,this.showCheck=!1,this.isContinueOnCorrect=!1,this.isAllowOnlyCorrect=!1,this.baseUrl="",this.margin="",this.showPrevButton="false",this.showNextButton="false",this.delayVisible="",this.disableSpeak=!1,this.templateId="",this.highlightWordByWord=!1,this.instructName="",this.speakFlag=!1,this.handleWindowResize=()=>this.scaleContainer(this.el),this.handleWindowLoad=()=>this.scaleContainer(this.el)}cleanupInteractionHandlers(){this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach((t=>{t.dispatchEvent(new Event(a))}))}languageChanged(t){const e=t||this.resolveLanguage();this.updateChildTextLanguage(e)}componentWillLoad(){const t=this.resolveLanguage();this.updateChildTextLanguage(t),this.resolveInstructionAudio()}resolveInstructionAudio(){var t;this.instructName=null!==(t={flashcard:"instruction.flashcards",mcq:"instruction.mcq",tracing:"instruction.tracing",dragAndDrop:"instruction.dragAndDrop",arrangeLetters:"arrangeLetters",balancing:"balancing",balloonPop:"balloonPop",blender:"blender",bubbleType:"bubbleType",calculator:"calculator",categorize:"categorize",checkerBlocks:"checkerBlocks",createSentence:"createSentence",fillAnswer:"fillAnswer",fillBlank:"fillBlank",fillUp:"fillUp",flashcardtemplate:"flashcard",foodJar:"foodJar",grid:"grid",imageMatchWithQuestionImageAndMultiOption:"imageMatchWithQuestionImageAndMultiOption",inventedSpelling:"inventedSpelling",jumpSentence:"jumpSentence",letterBoard:"letterBoard",letterIdentification:"letterIdentification",letterPairing:"letterPairing",makeSentence:"makeSentence",matchingCard:"matchingCard",multiplyBeeds:"multiplyBeeds",nimbleTable:"nimbleTable",numberBoardOneTwo:"numberBoardOneTwo",numberPair:"numberPair",openWindow:"openWindow",orderTractor:"orderTractor",phonicTractor:"phonicTractor",pictureMeaningCocos:"pictureMeaningCocos",pictureWordMatch1:"pictureWordMatch1",pictureWordMatch2:"pictureWordMatch2",puzzleGame:"puzzleGame",questionBoard:"questionBoard",quizLiteracySentenceSentence:"quizLiteracySentenceSentence",quizLiteracySoundOnlyImage:"quizLiteracySoundOnlyImage",quizLiteracySoundOnlySentence:"quizLiteracySoundOnlySentence",quizLiteracySoundOnlyWord:"quizLiteracySoundonlyWord",quizLiteracyAndShapes1:"quizLiteracyAndShapes1",quizLiteracyImageWithText:"quizLiteracyImageWithText",quizliteracyImageWord:"quizliteracyImageWord",quizMathBiggerAndSmaller:"quizMathBiggerAndSmaller",quizMathBiggestAndSmallest:"quizMathBiggestAndSmallest",quizmathCustomNumberMagnitude:"quizmathCustomNumberMagnitude",quizMathHowMany:"quizMathHowMany",quizmathMissingnumberDrag:"quizmathMissingnumberDrag",quizMathNumberIdentification:"quizMathNumberIdentification",quizMathOperationWithobjects:"quizMathOperationWithobjects",quizMathoperationWithoutObjects:"quizMathoperationWithoutObjects",quizMathRecognizeNumber:"quizMathRecognizeNumber",quizMathShapes:"quizMathShapes",reorder:"reorder",rocketGame:"rocketGame",rowBlock:"rowBlock",sequenceBox1:"sequenceBox1",shapeTractor:"shapeTractor",spellDoor:"spellDoor",storyMaking:"storyMaking",storyTale:"storyTale",sumTogether:"sumTogether",tag:"tag",total:"total",writeCard:"writeCard",writeLetter:"writeLetter",writeNumber:"writeNumber",writeSet:"writeSet",writeWord:"writeWord",numberIdentification:"numberIdentification",wordBuildingWithAndWithoutImage:"wordBuildingWithAndWithoutImage",subsWithAndWithoutImage:"subsWithAndWithoutImage",sentenceMatchTemplate:"sentenceMatch",pictureClues:"pictureClues",palEgmaCalculateSumAndSumTogether:"palEgmaCalculateSumAndSumTogether",palEgmaPatternMatching:"palEgmaPatternMatchingAudio",palEgmaWordProblem:"palEgmaWordProblem",palEgraArrangePictures:"palEgraArrangePicturesAudio",palEgraBuildWord:"palEgraBuildWordAudio",palEgraMCQWithImage:"palEgraMCQWithImage",palEgraOddOneOut:"palEgraOddOneOutAudio",palEgraOptionWithAudio:"palEgraOptionWithAudio",palEgraWordFormation:"palEgraWordFormationAudio",palEgraWordMatch:"palEgraWordMatch",substractionWithImage:"substractionWithImageAudio",substractionWithoutImage:"substractionWithoutImageAudio",numberIdentificationWithImage:"numberIdentificationWithImageAudio",numberIdentificationWithoutImage:"numberIdentificationWithoutImageAudio",wordBuildingWithImage:"wordBuildingWithImageAudio",wordBuildingWithoutImage:"wordBuildingWithoutImageAudio",pictureWordMatchMultipleImages:"pictureWordMatchMultipleImagesAudio",pictureWordMatchSingleImage:"pictureWordMatchSingleImageAudio",sentenceMatch:"sentenceMatchAudio",imageMatch:"imageMatchAudio",palStoryTale:"palStoryTaleAudio",palEgmaWordProblemDragnDrop:"palEgmaWordProblemDragnDropAudio",palEgmaWordProblemClick:"palEgmaWordProblemClickAudio",palInventedSpelling:"palInventedSpellingAudio",palLetterIdentification:"palLetterIdentificationAudio",palStoryMaking:"palStoryMakingAudio",palegmasumtogether:"palegmasumtogetherAudio",palegmamultioption:"palegmamultioptionAudio",palegraoptionaudio:"palegraoptionAudio",palegrawordmatch:"palegrawordmatchAudio",palegramcqimages:"palegramcqimagesAudio",drawShape:"drawshape",drawshape:"drawshape"}[this.templateId])&&void 0!==t?t:"";const e=document.querySelector("lido-home");if(!e)return;const i=e.getAttribute(o)||"";this.speakFlag=i.includes(this.templateId),this.speakFlag||e.setAttribute(o,[i,this.templateId].filter(Boolean).join(","))}resolveLanguage(){var t,e;const i=this.el.closest("lido-root"),a=(null==i?void 0:i.Lang)||"";if(null==a?void 0:a.trim())return a;if(null===(t=this.Lang)||void 0===t?void 0:t.trim())return this.Lang;const o=this.el.getAttribute("Lang");return(null==o?void 0:o.trim())?o:null===(e=this.el.textContent)||void 0===e?void 0:e.trim()}convertToPixels(t,e=document.body){if(!t)return 0;if(t.endsWith("px"))return parseFloat(t);const i=document.createElement("div");i.style.position="absolute",i.style.visibility="hidden",i.style.height=t,e.appendChild(i);const a=i.offsetHeight;return e.removeChild(i),a}scaleContainer(t){const e=this.getClosestParentWithWidth();let i=0;e&&(i=Math.min(e.clientWidth/1600,e.clientHeight/900)),t.style.transform=`translate(-50%, -50%) scale(${0!=i?i:n()})`,t.style.left="50%",t.style.top="50%",t.style.position="absolute",this.screenOrientation()}getClosestParentWithWidth(){let t=this.el.parentElement;for(;t;){if(t.offsetWidth>0)return t;t=t.parentElement}return null}screenOrientation(){window.innerHeight>window.innerWidth?(this.el.style.height="1600px",this.el.style.width="900px"):(this.el.style.height="900px",this.el.style.width="1600px")}updateChildTextLanguage(t){const e=t||m.language||"en";m.changeLanguage(e),this.el.querySelectorAll("lido-text").forEach((t=>{t.Lang=e,t.dispatchEvent(new CustomEvent("languageChanged",{bubbles:!0}))}))}componentDidLoad(){this.scaleContainer(this.el);const t=this.bgImage?r(this.bgImage):"",e=this.el.closest("lido-standalone"),i="true"===(null==e?void 0:e.getAttribute("bg-image"))?e:document.body;if(i.style.backgroundColor=this.bgColor,i.style.backgroundImage=t?`url(${t})`:"none",i.style.backgroundPosition=t?"bottom":"none",document.body.style.pointerEvents="auto",window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.templateId?setTimeout((()=>{this.el.setAttribute("onEntry",`${this.templateId}.speak='${!this.speakFlag}'; `+this.el.getAttribute("onEntry")),s(this.el,this.type)}),100):s(this.el,this.type),this.customStyle){const t=document.createElement("style");t.innerHTML=this.customStyle,document.head.appendChild(t)}const a=this.resolveLanguage();this.updateChildTextLanguage(a),setTimeout((()=>{l()}),100),c(),u.getI().start()}disconnectedCallback(){this.cleanupInteractionHandlers(),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad),document.body.style.backgroundColor="",document.body.style.backgroundImage="",c(),u.getI().stop()}render(){return h(d,{key:"9dd374c6cdfcc88a5b18e7dc7fec527c853a4719",id:"lido-container",Lang:this.Lang,"tab-index":0,class:"lido-container",objective:this.objective,baseUrl:this.baseUrl,style:{backgroundColor:this.bgColor,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",margin:this.margin,userSelect:"none"},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,onTouch:this.onTouch,onInCorrect:this.onInCorrect,onCorrect:this.onCorrect,onEntry:this.onEntry,"show-check":`${this.showCheck}`,"is-continue-on-correct":`${this.isContinueOnCorrect}`,"is-allow-only-correct":`${this.isAllowOnlyCorrect}`,canplay:`${this.canplay}`,appendToDropOnCompletion:`${this.appendToDropOnCompletion}`,"show-prev-button":`${this.showPrevButton}`,"show-next-button":`${this.showNextButton}`,"show-drop-border":`${this.showDropBorder}`,"bg-image":this.bgImage,"exit-button-url":this.exitButtonUrl,"prev-button-url":this.prevButtonUrl,"next-button-url":this.nextButtonUrl,"speaker-button-url":this.speakerButtonUrl,"disable-speak":`${this.disableSpeak}`,"template-id":this.templateId,audio:this.audio,"highlight-word-by-word":`${this.highlightWordByWord}`},h("lido-text",{key:"8295782a74ce6ef8ca9a623de8a28b539d9f6d4f",visible:"false",id:this.templateId,audio:"",string:this.instructName}),h("slot",{key:"eb3c995b777986e07dcb6aa935ef38d41aa1e7e7"}))}get el(){return this}static get watchers(){return{Lang:[{languageChanged:0}]}}static get style(){return".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}"}},[260,"lido-container",{Lang:[1,"lang"],showDropBorder:[4,"show-drop-border"],appendToDropOnCompletion:[4,"append-to-drop-on-completion"],id:[1],objective:[1],customStyle:[1,"custom-style"],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],bgImage:[1,"bg-image"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],canplay:[4],showCheck:[4,"show-check"],isContinueOnCorrect:[4,"is-continue-on-correct"],isAllowOnlyCorrect:[4,"is-allow-only-correct"],baseUrl:[1,"base-url"],margin:[1],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],showPrevButton:[1,"show-prev-button"],showNextButton:[1,"show-next-button"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],templateId:[1,"template-id"],highlightWordByWord:[4,"highlight-word-by-word"],instructName:[32],speakFlag:[32]},void 0,{Lang:[{languageChanged:0}]}]);function b(){"undefined"!=typeof customElements&&["lido-container","lido-text"].forEach((e=>{switch(e){case"lido-container":customElements.get(t(e))||customElements.define(t(e),p);break;case"lido-text":customElements.get(t(e))||g()}}))}b();export{p as L,b as d}
@@ -0,0 +1 @@
1
+ import{t,p as a,H as i,k as e,i as r,a as o,h,b as s}from"./index.js";const d=a(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.shapeType="circle",this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin="",this.delayVisible="",this.disableSpeak=!1,this.style={}}componentDidLoad(){e(this.el,this.delayVisible),r(this.el,this.type),this.updateStyles(),this.lido3DShapes()}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={x:o(`${this.x}`,t),y:o(`${this.y}`,t),height:o(`${this.height}`,t),width:o(`${this.width}`,t)}}lido3DShapes(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";"lido-cube"===this.shapeType&&this.el.querySelectorAll(".face").forEach((a=>{const i=a;i.style.setProperty("--face-width",o(`${this.width}`,t));const e=parseInt(o(`${this.width}`,t))/2;i.style.setProperty("--face-translate",`${e}px`),i.style.setProperty("--face-bg-color",this.bgColor)}))}render(){return h(s,{key:"326d0e58f7d2bd177ae04c4ac8eac74b277a0392",class:`lido-shape ${this.shapeType}`,value:this.value,type:this.type,"tab-index":this.tabIndex,style:{height:"polygon"!==this.shapeType?this.style.height:void 0,width:"polygon"!==this.shapeType?this.style.width:void 0,top:this.style.y,left:this.style.x,display:this.visible?"block":"none",zIndex:this.z,backgroundColor:"polygon"!==this.shapeType?this.bgColor:"transparent",margin:this.margin},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,minDrops:this.minDrops,maxDrops:this.maxDrops,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,"disable-speak":this.disableSpeak},"lido-cube"===this.shapeType&&h("div",{key:"f5f762fa74733659b970d5c476da5da10cc9f4c5",class:"cube"},h("div",{key:"5324a04af38cfbc5eca4c5aa32df51a3e0e5443c",class:"face top"}),h("div",{key:"a265a3ebfe41e0da844ac934c6af1045cde6cfad",class:"face bottom"}),h("div",{key:"58ce610d7fb003313c3e8ce3be019142086919e5",class:"face left"}),h("div",{key:"9c8ee3317a0331f9c3eeb3527963999765c10144",class:"face right"}),h("div",{key:"eb674c98aa795f89094b1d510b59f96f742d7c6a",class:"face front"}),h("div",{key:"918b2aa2d5babbb700838d08dbdad100fc846f54",class:"face back"})))}get el(){return this}static get style(){return".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezium{width:var(--trapeziumWidth);height:var(--trapeziumHeight);background-color:var(--bgColor);clip-path:polygon( 20% 0%, 80% 0%, 100% 100%, 0% 100% )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon( 15% 10%, 25% 4%, 35% 1%, 50% 0%, 65% 1%, 75% 4%, 85% 10%, 50% 100% )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY( 0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0), radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0), red}.lido-sphere{position:relative;width:var(--width);height:var(--width);border-radius:50%;background:radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%), radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);box-shadow:inset -22px -26px 40px rgba(5, 0, 70, 0.38), inset 14px 14px 24px rgba(255, 255, 255, 0.05), 0 4px 2px rgba(0, 0, 0, 0.78);overflow:visible}.lido-sphere::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:16%;border-radius:50%;border-top:2px dashed rgba(0, 0, 0, 0.65);border-bottom:3px solid rgba(0, 0, 0, 0.85);box-sizing:border-box;transform:translate(-50%, -50%);pointer-events:none}"}},[0,"lido-shape",{id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],shapeType:[1,"shape-type"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],style:[32]}]);function l(){"undefined"!=typeof customElements&&["lido-shape"].forEach((a=>{"lido-shape"===a&&(customElements.get(t(a))||customElements.define(t(a),d))}))}l();export{d as L,l as d}
@@ -0,0 +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}
@@ -0,0 +1 @@
1
+ import{t,p as i,H as s,m as o,h as e,b as h}from"./index.js";const n=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin=""}componentDidLoad(){setTimeout((()=>{const t=this.el.parentElement;if(!t)return;const i=t.offsetWidth,s=t.offsetHeight;Array.from(this.el.children).forEach((t=>{const o=i-t.offsetWidth,e=s-t.offsetHeight,h=Math.random()*o,n=Math.random()*e;t.style.position="absolute",t.style.left=`${h}px`,t.style.top=`${n}px`}))}),50),this.showSpeakIcon&&o(this.el)}render(){return e(h,{key:"e0ed354e54ea3c5112d0e068b2a94356ef437874",class:"lido-random",type:this.type,"tab-index":this.tabIndex,value:this.value,style:{height:this.height,width:this.width,top:this.y,left:this.x,display:this.visible?"block":"none",zIndex:this.z,backgroundColor:this.bgColor,margin:this.margin},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,minDrops:this.minDrops,maxDrops:this.maxDrops,onInCorrect:this.onInCorrect,onEntry:this.onEntry},e("slot",{key:"ed0386cda3ba55d89fb08607775a49a4180f08b3"}))}get el(){return this}static get style(){return".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}"}},[260,"lido-random",{showSpeakIcon:[4,"show-speak-icon"],id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1]}]);function a(){"undefined"!=typeof customElements&&["lido-random"].forEach((i=>{"lido-random"===i&&(customElements.get(t(i))||customElements.define(t(i),n))}))}a();export{n as L,a as d}
@@ -0,0 +1 @@
1
+ import{t as i,p as t,H as e,a as s,k as a,i as d,h,b as n}from"./index.js";const o=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.visible=!0,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.flipped=!1,this.margin="",this.disableSpeak=!1,this.style={},this.delayVisible="",this.updateStyles=()=>{const i=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:s(this.height,i)||"200px",width:s(this.width,i)||"200px",backgroundColor:s(this.bgColor,i),top:s(this.y,i),left:s(this.x,i),zIndex:this.z,display:this.visible?this.display?s(this.display,i):"inline-block":"none",flexDirection:this.direction?s(this.direction,i):void 0,margin:s(this.margin,i)}},this.handleFlip=()=>{this.flipped=!this.flipped}}handleFlippedChange(){}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles),window.addEventListener("load",this.updateStyles)}componentDidLoad(){a(this.el,this.delayVisible);const i=this.el.querySelector(".card");i&&setTimeout((()=>{i.classList.add("flipped"),setTimeout((()=>{i.classList.remove("flipped")}),500)}),500),d(this.el,this.type)}disconnectedCallback(){window.removeEventListener("resize",this.updateStyles),window.removeEventListener("load",this.updateStyles)}render(){return h(n,{key:"cd0d8539f24de1fd7805b271de839ee8efeb4287",value:this.value,"tab-index":this.tabIndex,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,type:this.type,onClick:this.handleFlip,"disable-speak":this.disableSpeak},h("div",{key:"a97eaa100216652cc4deaf8b6f73e9ea07a125f2",class:"card "+(this.flipped?"flipped":"")},h("div",{key:"7a6f94b89da76b2c7fc911c44d2aaa63a3d2164d",class:"card-face card-front"},null!=this.front?this.front:h("slot",{name:"front"})),h("div",{key:"15936f96d44db217c042584cc225a42dc3f74e98",class:"card-face card-back"},null!=this.back?this.back:h("slot",{name:"back"}))))}get el(){return this}static get watchers(){return{flipped:[{handleFlippedChange:0}]}}static get style(){return".card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}"}},[260,"lido-flash-card",{value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],direction:[1],display:[1],front:[8],back:[8],flipped:[1540],margin:[1],disableSpeak:[4,"disable-speak"],delayVisible:[1,"delay-visible"],style:[32]},void 0,{flipped:[{handleFlippedChange:0}]}]);function r(){"undefined"!=typeof customElements&&["lido-flash-card"].forEach((t=>{"lido-flash-card"===t&&(customElements.get(i(t))||customElements.define(i(t),o))}))}r();export{o as L,r as d}
@@ -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 p=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.svgSource="",this.svgUrls=[],this.audioUrls=[],this.currentSvgIndex=0,this.moving=!1,this.value="",this.height="auto",this.width="auto",this.audio="",this.x="0px",this.y="0px",this.z="0",this.ariaLabel="",this.ariaHidden="",this.tabIndex=0,this.mode=s.ShowFlow,this.fingerHintUrl=n("assets/Tracing-hand.svg"),this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles(),this.fileIndex=-1,this.isDragging=!1,this.activePointerId=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){let t={fileIndex:-1,currentPathIndex:0,lastLength:0,totalPathLength:0,isDragging:!1,circle:null,paths:[],svg:null,proximityThreshold:60,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null,dragOffset:null,isCompletingPath:!1,touchProximityThreshold:null};const i=this.svgUrls[this.currentSvgIndex];i&&""!==i.trim()?(await this.fetchSVG(o(i)),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){r(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),this.currentSvgIndex=0,this.showSpeakIcon&&(a(this.el),this.el.append(a(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}resetIdleTimer(t){null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.idleTimer=window.setTimeout((()=>{this.showFingerHint(t)}),3e3)}showFingerHint(t){var i;if(this.fingerImg)return;const e=t.paths[t.currentPathIndex];if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","image"),n=new Image;n.onload=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(this.fingerHintUrl))},n.onerror=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(h))},n.src=o(this.fingerHintUrl||h),s.setAttribute("width","40"),s.setAttribute("height","40"),s.setAttribute("id","lido-finger-hint"),s.style.pointerEvents="none",s.style.opacity="0.8",s.setAttribute("x","0"),s.setAttribute("y","0");const r=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");r.setAttribute("dur","2s"),r.setAttribute("repeatCount","indefinite");const a=document.createElementNS("http://www.w3.org/2000/svg","mpath");a.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(a),s.appendChild(r),null===(i=t.svg)||void 0===i||i.appendChild(s),this.fingerImg=s}hideFingerHint(){this.fingerImg&&this.fingerImg.parentNode&&this.fingerImg.parentNode.removeChild(this.fingerImg),this.fingerImg=null}async fetchSVG(t){const i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch SVG (${t}): ${i.statusText}`);return await i.text()}calculateBoundingBox(t,i=22){let e=1/0,s=1/0,n=-1/0,o=-1/0;return t.forEach((t=>{const i=t.getTotalLength();for(let r=0;r<=100;r++){const a=t.getPointAtLength(r/100*i);a.x<e&&(e=a.x),a.y<s&&(s=a.y),a.x>n&&(n=a.x),a.y>o&&(o=a.y)}})),e-=i,s-=i,n+=i,o+=i,{minX:e,minY:s,maxX:n,maxY:o}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.classList.add("lido-trace-svg"),e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),n=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${n.minX} ${n.minY} ${n.maxX-n.minX} ${n.maxY-n.minY}`)}getSVGElement(){return document.getElementById("lido-svgContainer").querySelector("svg")}getPaths(t){return Array.from(t.querySelectorAll("path, line"))}createFlowMarkersForPath(t){var i;if(!t)return;const e=t.ownerSVGElement;if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t.getAttribute("d")||""),s.setAttribute("stroke","blue"),s.setAttribute("stroke-width","2"),s.setAttribute("stroke-dasharray","6,6"),s.setAttribute("fill","none"),s.setAttribute("class","lido-flow-indicator"),null===(i=t.parentNode)||void 0===i||i.appendChild(s);let n=e.querySelector("defs#lido-flow-defs");n||(n=document.createElementNS("http://www.w3.org/2000/svg","defs"),n.setAttribute("id","lido-flow-defs"),e.insertBefore(n,e.firstChild));const o=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",o),r.setAttribute("markerWidth","10"),r.setAttribute("markerHeight","10"),r.setAttribute("refX","5"),r.setAttribute("refY","5"),r.setAttribute("orient","auto"),r.setAttribute("markerUnits","strokeWidth");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d","M0,0 L10,5 L0,10 L2,5 Z"),a.setAttribute("fill","blue"),r.appendChild(a),n.appendChild(r),s.setAttribute("marker-end",`url(#${o})`),s}updateFlowIndicators(t){t.svg.querySelectorAll(".lido-flow-indicator").forEach((i=>{t.mode===s.NoFlow?i.style.display="none":t.mode===s.ShowFlow&&(i.style.display="block")}))}setupDrawingPath(t){t.paths.forEach(((i,e)=>{const n=i.getTotalLength();i._lidoTraceLength=n,i._lidoTraceStart=i.getPointAtLength(0),i._lidoTraceEnd=i.getPointAtLength(n),i._lidoTraceIsClosed=this.getDistanceSquared(i._lidoTraceStart,i._lidoTraceEnd)<200,i.setAttribute("id","lido-path-"+e);const o=i.cloneNode();o.style.opacity="100",o.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");o.setAttribute("stroke-width",r),o.setAttribute("stroke-dasharray",n.toString()),o.setAttribute("stroke-dashoffset",n.toString()),i.parentNode.appendChild(o,i),i.setAttribute("class","lido-trace-path"),o.setAttribute("class","lido-trace-path-green"),i.greenPath=o,i.classList.add(t.mode),t.mode===s.BlindTracing||t.mode===s.BlindFreeTrace?i.setAttribute("stroke","none"):(i.setAttribute("stroke","#000"),i.setAttribute("stroke-width",r),i.setAttribute("fill","none"),i.setAttribute("stroke-dasharray",n.toString()),i.setAttribute("stroke-dashoffset","0")),e===t.currentPathIndex&&t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(i))})),t.totalPathLength=t.paths[t.currentPathIndex].getTotalLength()}setupDraggableCircle(t){var i;const e=t.paths[0].getPointAtLength(0),s=document.createElementNS("http://www.w3.org/2000/svg","circle");t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width"),s.setAttribute("id","lido-draggableCircle"),s.setAttribute("cx",e.x.toString()),s.setAttribute("cy",e.y.toString()),s.setAttribute("r","20"),s.setAttribute("fill","#CF1565"),null===(i=t.svg)||void 0===i||i.appendChild(s),t.circle=s,this.resetIdleTimer(t)}addEventListeners(t){var i,e,s,n;if(!t.circle||!t.paths||0===t.paths.length)return;t.svg.style.touchAction="none",t.circle.style.touchAction="none",t.circle.addEventListener("pointerdown",(i=>{i.preventDefault();const e=this.getPointerPosition(i,t.svg),s={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))},n=this.getDistanceSquared(e,s),o=this.getProximityThresholdForEvent(t,i);if(n<=o*o||"touch"===i.pointerType){t.isDragging=!0,t.activePointerId=i.pointerId,t.dragOffset={x:e.x-s.x,y:e.y-s.y};try{t.circle.setPointerCapture(i.pointerId)}catch(t){}t.lastPointerPos=s}this.hideFingerHint(),this.resetIdleTimer(t)}),{passive:!1}),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(i.preventDefault(),t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const o=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,t.lastPointerPos=null,t.dragOffset=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",o),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",o),null===(n=t.svg)||void 0===n||n.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,n,o,r;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),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=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x: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 p=Math.min(320,Math.max(160,.45*t.totalPathLength)),v=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<=p&&i.length<t.totalPathLength-v&&(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){var e;const s=this.getPointerPositionFromViewBox(t,i);if(s)return s;const n=i.createSVGPoint();n.x=t.clientX,n.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?n.matrixTransform(o):{x:t.clientX,y:t.clientY}}getPointerPositionFromViewBox(t,i){const e=i.getBoundingClientRect(),s=i.viewBox.baseVal;if(!(e.width&&e.height&&s.width&&s.height))return null;const{offsetX:n,offsetY:o,scaleX:r,scaleY:a}=this.getSvgViewBoxTransform(i,e);return{x:s.x+(t.clientX-e.left-n)/r,y:s.y+(t.clientY-e.top-o)/a}}getSvgViewBoxTransform(t,i=t.getBoundingClientRect()){const e=t.viewBox.baseVal,s=t.preserveAspectRatio.baseVal,n=i.width/e.width,o=i.height/e.height;if(1===s.align)return{offsetX:0,offsetY:0,scaleX:n,scaleY:o};const r=2===s.meetOrSlice?Math.max(n,o):Math.min(n,o),a=e.width*r,h=e.height*r;let l=0,c=0;const d=s.align;return 3===d||6===d||9===d?l=(i.width-a)/2:4!==d&&7!==d&&10!==d||(l=i.width-a),5===d||6===d||7===d?c=(i.height-h)/2:8!==d&&9!==d&&10!==d||(c=i.height-h),{offsetX:l,offsetY:c,scaleX:r,scaleY:r}}getProximityThresholdForEvent(t,i){const e=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold:t.proximityThreshold;if("touch"!==(null==i?void 0:i.pointerType)||!t.svg)return e;const n=t.svg.getBoundingClientRect(),o=t.svg.viewBox.baseVal;if(!(n.width&&n.height&&o.width&&o.height))return e;const{scaleX:r,scaleY:a}=this.getSvgViewBoxTransform(t.svg,n),h=44*Math.max(1/r,1/a);return Math.max(e,h)}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i,e){var s;const n=null!==(s=t._lidoTraceLength)&&void 0!==s?s:t.getTotalLength();let o={x:0,y:0,length:0},r=1/0,a=0,h=n;void 0!==e&&(a=Math.max(0,e-150),h=Math.min(n,e+150));let l={length:a};for(let e=a;e<=h;e+=40){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<r&&(r=n,l={x:s.x,y:s.y,length:e})}const c=Math.max(0,l.length-40),d=Math.min(n,l.length+40);r=1/0;for(let e=c;e<=d;e+=6){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<r&&(r=n,o={x:s.x,y:s.y,length:e})}return o}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:"4955636a199ba56ca7f6d73144aca42ab4e3f411",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:"b732946e97fefb0d4cb192e5c9b6863568ff64be",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 v(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),p))}))}v();export{p as L,v as d}
1
+ import{t,p as i,H as e,B as s,getAssetPath as n,c as o,k as r,E as a,F as h,s as l,f as c,w as d,g as u,j as f,a as w,h as g,b as m}from"./index.js";const p=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.svgSource="",this.svgUrls=[],this.audioUrls=[],this.currentSvgIndex=0,this.moving=!1,this.value="",this.height="auto",this.width="auto",this.audio="",this.x="0px",this.y="0px",this.z="0",this.ariaLabel="",this.ariaHidden="",this.tabIndex=0,this.mode=s.ShowFlow,this.fingerHintUrl=n("assets/Tracing-hand.svg"),this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.handleWindowResize=()=>this.updateStyles(),this.handleWindowLoad=()=>this.updateStyles(),this.fileIndex=-1,this.isDragging=!1,this.activePointerId=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){let t={fileIndex:-1,currentPathIndex:0,lastLength:0,totalPathLength:0,isDragging:!1,circle:null,paths:[],svg:null,proximityThreshold:60,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null,dragOffset:null,isCompletingPath:!1,touchProximityThreshold:null};const i=this.svgUrls[this.currentSvgIndex];i&&""!==i.trim()?(await this.fetchSVG(o(i)),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){r(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("load",this.handleWindowLoad),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),this.currentSvgIndex=0,this.showSpeakIcon&&(a(this.el),this.el.append(a(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("load",this.handleWindowLoad)}resetIdleTimer(t){null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.idleTimer=window.setTimeout((()=>{this.showFingerHint(t)}),3e3)}showFingerHint(t){var i;if(this.fingerImg)return;const e=t.paths[t.currentPathIndex];if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","image"),n=new Image;n.onload=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(this.fingerHintUrl))},n.onerror=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(h))},n.src=o(this.fingerHintUrl||h),s.setAttribute("width","40"),s.setAttribute("height","40"),s.setAttribute("id","lido-finger-hint"),s.style.pointerEvents="none",s.style.opacity="0.8",s.setAttribute("x","0"),s.setAttribute("y","0");const r=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");r.setAttribute("dur","2s"),r.setAttribute("repeatCount","indefinite");const a=document.createElementNS("http://www.w3.org/2000/svg","mpath");a.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(a),s.appendChild(r),null===(i=t.svg)||void 0===i||i.appendChild(s),this.fingerImg=s}hideFingerHint(){this.fingerImg&&this.fingerImg.parentNode&&this.fingerImg.parentNode.removeChild(this.fingerImg),this.fingerImg=null}async fetchSVG(t){const i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch SVG (${t}): ${i.statusText}`);return await i.text()}calculateBoundingBox(t,i=22){let e=1/0,s=1/0,n=-1/0,o=-1/0;return t.forEach((t=>{const i=t.getTotalLength();for(let r=0;r<=100;r++){const a=t.getPointAtLength(r/100*i);a.x<e&&(e=a.x),a.y<s&&(s=a.y),a.x>n&&(n=a.x),a.y>o&&(o=a.y)}})),e-=i,s-=i,n+=i,o+=i,{minX:e,minY:s,maxX:n,maxY:o}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.classList.add("lido-trace-svg"),e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),n=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${n.minX} ${n.minY} ${n.maxX-n.minX} ${n.maxY-n.minY}`)}getSVGElement(){return document.getElementById("lido-svgContainer").querySelector("svg")}getPaths(t){return Array.from(t.querySelectorAll("path, line"))}createFlowMarkersForPath(t){var i;if(!t)return;const e=t.ownerSVGElement;if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t.getAttribute("d")||""),s.setAttribute("stroke","blue"),s.setAttribute("stroke-width","2"),s.setAttribute("stroke-dasharray","6,6"),s.setAttribute("fill","none"),s.setAttribute("class","lido-flow-indicator"),null===(i=t.parentNode)||void 0===i||i.appendChild(s);let n=e.querySelector("defs#lido-flow-defs");n||(n=document.createElementNS("http://www.w3.org/2000/svg","defs"),n.setAttribute("id","lido-flow-defs"),e.insertBefore(n,e.firstChild));const o=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",o),r.setAttribute("markerWidth","10"),r.setAttribute("markerHeight","10"),r.setAttribute("refX","5"),r.setAttribute("refY","5"),r.setAttribute("orient","auto"),r.setAttribute("markerUnits","strokeWidth");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d","M0,0 L10,5 L0,10 L2,5 Z"),a.setAttribute("fill","blue"),r.appendChild(a),n.appendChild(r),s.setAttribute("marker-end",`url(#${o})`),s}updateFlowIndicators(t){t.svg.querySelectorAll(".lido-flow-indicator").forEach((i=>{t.mode===s.NoFlow?i.style.display="none":t.mode===s.ShowFlow&&(i.style.display="block")}))}setupDrawingPath(t){t.paths.forEach(((i,e)=>{const n=i.getTotalLength();i._lidoTraceLength=n,i._lidoTraceStart=i.getPointAtLength(0),i._lidoTraceEnd=i.getPointAtLength(n),i._lidoTraceIsClosed=this.getDistanceSquared(i._lidoTraceStart,i._lidoTraceEnd)<200,i.setAttribute("id","lido-path-"+e);const o=i.cloneNode();o.style.opacity="100",o.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");o.setAttribute("stroke-width",r),o.setAttribute("stroke-dasharray",n.toString()),o.setAttribute("stroke-dashoffset",n.toString()),i.parentNode.appendChild(o,i),i.setAttribute("class","lido-trace-path"),o.setAttribute("class","lido-trace-path-green"),i.greenPath=o,i.classList.add(t.mode),t.mode===s.BlindTracing||t.mode===s.BlindFreeTrace?i.setAttribute("stroke","none"):(i.setAttribute("stroke","#000"),i.setAttribute("stroke-width",r),i.setAttribute("fill","none"),i.setAttribute("stroke-dasharray",n.toString()),i.setAttribute("stroke-dashoffset","0")),e===t.currentPathIndex&&t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(i))})),t.totalPathLength=t.paths[t.currentPathIndex].getTotalLength()}setupDraggableCircle(t){var i;const e=t.paths[0].getPointAtLength(0),s=document.createElementNS("http://www.w3.org/2000/svg","circle");t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width"),s.setAttribute("id","lido-draggableCircle"),s.setAttribute("cx",e.x.toString()),s.setAttribute("cy",e.y.toString()),s.setAttribute("r","20"),s.setAttribute("fill","#CF1565"),null===(i=t.svg)||void 0===i||i.appendChild(s),t.circle=s,this.resetIdleTimer(t)}addEventListeners(t){var i,e,s,n;if(!t.circle||!t.paths||0===t.paths.length)return;t.svg.style.touchAction="none",t.circle.style.touchAction="none",t.circle.addEventListener("pointerdown",(i=>{i.preventDefault();const e=this.getPointerPosition(i,t.svg),s={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))},n=this.getDistanceSquared(e,s),o=this.getProximityThresholdForEvent(t,i);if(n<=o*o||"touch"===i.pointerType){t.isDragging=!0,t.activePointerId=i.pointerId,t.dragOffset={x:e.x-s.x,y:e.y-s.y};try{t.circle.setPointerCapture(i.pointerId)}catch(t){}t.lastPointerPos=s}this.hideFingerHint(),this.resetIdleTimer(t)}),{passive:!1}),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(i.preventDefault(),t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const o=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,t.lastPointerPos=null,t.dragOffset=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",o),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",o),null===(n=t.svg)||void 0===n||n.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,n,o,r;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),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=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x: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 p=Math.min(320,Math.max(160,.45*t.totalPathLength)),v=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<=p&&i.length<t.totalPathLength-v&&(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){var e;const s=this.getPointerPositionFromViewBox(t,i);if(s)return s;const n=i.createSVGPoint();n.x=t.clientX,n.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?n.matrixTransform(o):{x:t.clientX,y:t.clientY}}getPointerPositionFromViewBox(t,i){const e=i.getBoundingClientRect(),s=i.viewBox.baseVal;if(!(e.width&&e.height&&s.width&&s.height))return null;const{offsetX:n,offsetY:o,scaleX:r,scaleY:a}=this.getSvgViewBoxTransform(i,e);return{x:s.x+(t.clientX-e.left-n)/r,y:s.y+(t.clientY-e.top-o)/a}}getSvgViewBoxTransform(t,i=t.getBoundingClientRect()){const e=t.viewBox.baseVal,s=t.preserveAspectRatio.baseVal,n=i.width/e.width,o=i.height/e.height;if(1===s.align)return{offsetX:0,offsetY:0,scaleX:n,scaleY:o};const r=2===s.meetOrSlice?Math.max(n,o):Math.min(n,o),a=e.width*r,h=e.height*r;let l=0,c=0;const d=s.align;return 3===d||6===d||9===d?l=(i.width-a)/2:4!==d&&7!==d&&10!==d||(l=i.width-a),5===d||6===d||7===d?c=(i.height-h)/2:8!==d&&9!==d&&10!==d||(c=i.height-h),{offsetX:l,offsetY:c,scaleX:r,scaleY:r}}getProximityThresholdForEvent(t,i){const e=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold:t.proximityThreshold;if("touch"!==(null==i?void 0:i.pointerType)||!t.svg)return e;const n=t.svg.getBoundingClientRect(),o=t.svg.viewBox.baseVal;if(!(n.width&&n.height&&o.width&&o.height))return e;const{scaleX:r,scaleY:a}=this.getSvgViewBoxTransform(t.svg,n),h=44*Math.max(1/r,1/a);return Math.max(e,h)}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i,e){var s;const n=null!==(s=t._lidoTraceLength)&&void 0!==s?s:t.getTotalLength();let o={x:0,y:0,length:0},r=1/0,a=0,h=n;void 0!==e&&(a=Math.max(0,e-150),h=Math.min(n,e+150));let l={length:a};for(let e=a;e<=h;e+=40){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<r&&(r=n,l={x:s.x,y:s.y,length:e})}const c=Math.max(0,l.length-40),d=Math.min(n,l.length+40);r=1/0;for(let e=c;e<=d;e+=6){const s=t.getPointAtLength(e),n=this.getDistanceSquared(i,s);n<r&&(r=n,o={x:s.x,y:s.y,length:e})}return o}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:"2f62ab117a595ba9af7f926ad7240902caf7fd99",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:"5a14b9bc1ff4d71ffc740c8afaa1d07754044a9d",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 v(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),p))}))}v();export{p as L,v as d}
@@ -1,4 +1,4 @@
1
- import { g as getDefaultExportFromCjs } from './index-D-29PaRa.js';
1
+ import { g as getDefaultExportFromCjs } from './index-CQXciux9.js';
2
2
 
3
3
  function _mergeNamespaces(n, m) {
4
4
  m.forEach(function (e) {
@@ -1,4 +1,4 @@
1
- import { c as getAssetPath } from './index-BeHFCsWf.js';
1
+ import { c as getAssetPath } from './index-DQZfuGjI.js';
2
2
 
3
3
  const DragMapKey = 'lidoDragMap';
4
4
  const SelectedValuesKey = 'lidoSelectedValues';
@@ -765,7 +765,7 @@ function animateDragToTarget(dragElement, targetElement, container, transition =
765
765
  const dy = dropRect.top - dragRect.top;
766
766
  const finalX = currentX + dx * (1 / calculateScale());
767
767
  const finalY = currentY + dy * (1 / calculateScale());
768
- dragElement.style.transition = 'transform 0.5s ease';
768
+ dragElement.style.transition = 'transform 1s ease';
769
769
  dragElement.style.transform = `translate(${finalX}px, ${finalY}px)`;
770
770
  }
771
771
  async function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData) {
@@ -1177,14 +1177,14 @@ async function onClickDropOrDragElement(element, type) {
1177
1177
  if (!document.querySelector('#dynamic-highlight-style')) {
1178
1178
  const style = document.createElement('style');
1179
1179
  style.id = 'dynamic-highlight-style';
1180
- style.innerHTML = `
1181
- .highlight {
1182
- // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
1183
- // border-radius: 12px; /* Larger rounded corners */
1184
- // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
1185
- // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
1186
- // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
1187
- }
1180
+ style.innerHTML = `
1181
+ .highlight {
1182
+ // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
1183
+ // border-radius: 12px; /* Larger rounded corners */
1184
+ // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
1185
+ // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
1186
+ // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
1187
+ }
1188
1188
  `;
1189
1189
  document.head.appendChild(style);
1190
1190
  }
@@ -1372,34 +1372,34 @@ function highlightSpeakingElement(element) {
1372
1372
  if (!document.getElementById(styleId)) {
1373
1373
  const style = document.createElement('style');
1374
1374
  style.id = styleId;
1375
- style.innerHTML = `
1376
- .speaking-highlight {
1377
- --base-transform: ${element.style.transform};
1378
- box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
1379
- // border: 3px solid green !important;
1380
- // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
1381
- // transform: scale(1.05); /* Subtle scale effect to pop the element */
1382
- // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
1383
-
1384
- }
1385
-
1386
- @keyframes pulseEffect {
1387
- 0% {
1388
- box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
1389
- // transform: var(--base-transform) scale(1.05);
1390
- // background-color: #FFFF0B;
1391
- }
1392
- 50% {
1393
- box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
1394
- // transform: var(--base-transform) scale(1.1);
1395
- // background-color: #FFFF0B;
1396
- }
1397
- 100% {
1398
- box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
1399
- // transform: var(--base-transform) scale(1.05);
1400
- // background-color: #FFFF0B;
1401
- }
1402
- }
1375
+ style.innerHTML = `
1376
+ .speaking-highlight {
1377
+ --base-transform: ${element.style.transform};
1378
+ box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
1379
+ // border: 3px solid green !important;
1380
+ // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
1381
+ // transform: scale(1.05); /* Subtle scale effect to pop the element */
1382
+ // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
1383
+
1384
+ }
1385
+
1386
+ @keyframes pulseEffect {
1387
+ 0% {
1388
+ box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
1389
+ // transform: var(--base-transform) scale(1.05);
1390
+ // background-color: #FFFF0B;
1391
+ }
1392
+ 50% {
1393
+ box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
1394
+ // transform: var(--base-transform) scale(1.1);
1395
+ // background-color: #FFFF0B;
1396
+ }
1397
+ 100% {
1398
+ box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
1399
+ // transform: var(--base-transform) scale(1.05);
1400
+ // background-color: #FFFF0B;
1401
+ }
1402
+ }
1403
1403
  `;
1404
1404
  document.head.appendChild(style);
1405
1405
  }
@@ -1638,11 +1638,8 @@ class AudioPlayer {
1638
1638
  this.resolvePlaybackWait();
1639
1639
  }
1640
1640
  };
1641
- this.audioElement.onstalled = () => {
1642
- if (this.playbackHasStarted) {
1643
- this.resolvePlaybackWait();
1644
- }
1645
- };
1641
+ // Buffering is temporary: keep waiting for the clip to finish.
1642
+ this.audioElement.onstalled = null;
1646
1643
  this.audioElement.onerror = () => {
1647
1644
  if (this.playbackHasStarted) {
1648
1645
  this.resolvePlaybackWait();
@@ -2111,11 +2108,11 @@ function enableReorderDrag(element) {
2111
2108
  onDropToCategory(element, category);
2112
2109
  }
2113
2110
  if (divEl) {
2114
- const keyframes = `
2115
- @keyframes widthDecrease {
2116
- 0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
2117
- 100% { width: 0px; height: 0px;}
2118
- }
2111
+ const keyframes = `
2112
+ @keyframes widthDecrease {
2113
+ 0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
2114
+ 100% { width: 0px; height: 0px;}
2115
+ }
2119
2116
  `;
2120
2117
  const styleSheet = document.styleSheets[0];
2121
2118
  styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2124,11 +2121,16 @@ function enableReorderDrag(element) {
2124
2121
  divEl.remove();
2125
2122
  });
2126
2123
  }
2124
+ resetElementStyles(element);
2127
2125
  }
2128
2126
  else {
2129
2127
  if (element.parentElement['type'] !== 'category') {
2130
- executeActions('this.alignMatch=true', divEl, element);
2131
- divEl.replaceWith(element);
2128
+ animateDragToTarget(element, divEl, container);
2129
+ // executeActions('this.alignMatch=true', divEl, element);
2130
+ setTimeout(() => {
2131
+ divEl.replaceWith(element);
2132
+ resetElementStyles(element);
2133
+ }, 500);
2132
2134
  }
2133
2135
  else {
2134
2136
  const categoryElement = element.parentElement;
@@ -2147,13 +2149,16 @@ function enableReorderDrag(element) {
2147
2149
  });
2148
2150
  optionArea.appendChild(element);
2149
2151
  element.classList.remove('dropped');
2152
+ element.classList.remove("category-dropped-onCorrect");
2153
+ element.classList.remove("category-dropped-onInCorrect");
2150
2154
  element.removeAttribute('drop-to');
2151
2155
  if (dummy) {
2152
2156
  dummy.remove();
2153
2157
  }
2158
+ resetElementStyles(element);
2154
2159
  }
2155
2160
  }
2156
- resetElementStyles(element);
2161
+ // resetElementStyles(element);
2157
2162
  return;
2158
2163
  }
2159
2164
  if (findMostoverlappedElement(element, 'blank')) {
@@ -2208,6 +2213,8 @@ function enableReorderDrag(element) {
2208
2213
  resetElementStyles(element);
2209
2214
  dummy.replaceWith(element);
2210
2215
  element.classList.remove('dropped');
2216
+ element.classList.remove("category-dropped-onCorrect");
2217
+ element.classList.remove("category-dropped-onInCorrect");
2211
2218
  element.removeAttribute('drop-to');
2212
2219
  }, 100);
2213
2220
  return;
@@ -2328,11 +2335,11 @@ function moveWithAnimation(target, overlapped) {
2328
2335
  const dummy = createDummyElement(target);
2329
2336
  dummy.style.visibility = 'hidden';
2330
2337
  dummy.setAttribute('type', 'dummy');
2331
- const keyframes = `
2332
- @keyframes widthIncrease {
2333
- 0% { width: 0px; height: 0px; }
2334
- 100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
2335
- }
2338
+ const keyframes = `
2339
+ @keyframes widthIncrease {
2340
+ 0% { width: 0px; height: 0px; }
2341
+ 100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
2342
+ }
2336
2343
  `;
2337
2344
  if (!overlapped) {
2338
2345
  const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -2377,8 +2384,34 @@ const wordDropComplete = (block, element) => {
2377
2384
  handleShowCheck();
2378
2385
  }
2379
2386
  };
2387
+ const categoryPlayback = new WeakMap();
2388
+ const categoriseCompleted = (container) => {
2389
+ const pendingPlayback = categoryPlayback.get(container);
2390
+ if (pendingPlayback)
2391
+ return pendingPlayback;
2392
+ const playback = playCategories(container).finally(() => {
2393
+ categoryPlayback.delete(container);
2394
+ });
2395
+ categoryPlayback.set(container, playback);
2396
+ return playback;
2397
+ };
2398
+ const playCategories = async (container) => {
2399
+ const allCategoriseBox = container.querySelectorAll('[type="category"]');
2400
+ const audioPlayer = AudioPlayer.getI();
2401
+ for (const categoryBox of Array.from(allCategoriseBox)) {
2402
+ const headingElement = categoryBox.parentElement.children[0];
2403
+ await audioPlayer.play(headingElement);
2404
+ for (const child of Array.from(categoryBox.children)) {
2405
+ child.scrollIntoView({
2406
+ behavior: 'smooth',
2407
+ block: 'end' // Aligns the bottom of the child with the bottom of the container
2408
+ });
2409
+ await audioPlayer.play(child);
2410
+ }
2411
+ }
2412
+ };
2380
2413
  async function onDropToCategory(dragElement, categoryElement) {
2381
- dragElement.classList.add('dropped');
2414
+ // dragElement.classList.add('dropped');
2382
2415
  let dragSelected = buildDragSelectedMapFromDOM();
2383
2416
  let elementArr = dragSelected[categoryElement.getAttribute('tab-index')];
2384
2417
  if (Array.isArray(elementArr)) {
@@ -73004,11 +73037,11 @@ const afterDropDragHandling = (dragElement, dropElement) => {
73004
73037
  }
73005
73038
  dummyElement.setAttribute('id', dragElement.getAttribute('id'));
73006
73039
  dragElement.replaceWith(dummyElement);
73007
- const keyframes = `
73008
- @keyframes widthDecrease {
73009
- 0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
73010
- 100% { width: 0px; height: 0px; margin: 0px;}
73011
- }
73040
+ const keyframes = `
73041
+ @keyframes widthDecrease {
73042
+ 0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
73043
+ 100% { width: 0px; height: 0px; margin: 0px;}
73044
+ }
73012
73045
  `;
73013
73046
  if (!isInfinite) {
73014
73047
  dummyElement.style.width = element.style.width;
@@ -73232,6 +73265,8 @@ async function onActivityComplete(dragElement, dropElement) {
73232
73265
  // storingEachActivityScore(isCorrect);
73233
73266
  if (isCorrect) {
73234
73267
  if (dropElement.getAttribute('type') === "category") {
73268
+ dragElement.classList.remove("category-dropped-onInCorrect");
73269
+ dragElement.classList.add("category-dropped-onCorrect");
73235
73270
  gameScore.rightMoves += 1;
73236
73271
  console.log("Right Moves : ", gameScore.rightMoves);
73237
73272
  console.log("Wrong Moves : ", gameScore.wrongMoves);
@@ -73249,9 +73284,33 @@ async function onActivityComplete(dragElement, dropElement) {
73249
73284
  }
73250
73285
  else {
73251
73286
  if (dropElement.getAttribute('type') === "category") {
73287
+ dragElement.classList.remove("category-dropped-onCorrect");
73288
+ dragElement.classList.add("category-dropped-onInCorrect");
73252
73289
  gameScore.wrongMoves += 1;
73253
73290
  console.log("Right Moves : ", gameScore.rightMoves);
73254
73291
  console.log("Wrong Moves : ", gameScore.wrongMoves);
73292
+ const categorizeArea = container.querySelector(`[type="optionArea"]`);
73293
+ const sameElArr = Array.from(container.querySelectorAll(`[value="${dragElement.getAttribute('value')}"]`));
73294
+ sameElArr.find(el => el !== dragElement && el.tagName === 'DIV');
73295
+ setTimeout(() => {
73296
+ const dummyEl = document.createElement("div");
73297
+ dummyEl.style.width = dragElement.offsetWidth + "px";
73298
+ dummyEl.style.height = dragElement.offsetHeight + "px";
73299
+ categorizeArea.appendChild(dummyEl);
73300
+ const dragX = dragElement.offsetLeft;
73301
+ const dragY = dragElement.offsetTop;
73302
+ dragElement.style.position = "absolute";
73303
+ dragElement.style.transition = '';
73304
+ dragElement.style.transform = `translate(${dragX}px, ${dragY}px)`;
73305
+ animateDragToTarget(dragElement, dummyEl, container);
73306
+ setTimeout(() => {
73307
+ dummyEl.replaceWith(dragElement);
73308
+ resetElementStyles(dragElement);
73309
+ dragElement.classList.remove("category-dropped-onInCorrect");
73310
+ dragElement.classList.remove("dropped");
73311
+ dragElement.removeAttribute("drop-to");
73312
+ }, 1000);
73313
+ }, 2000);
73255
73314
  }
73256
73315
  const onInCorrect = dropElement.getAttribute('onInCorrect');
73257
73316
  if (onInCorrect && !isBlender) {
@@ -73346,7 +73405,8 @@ const storeActivityScore = (score) => {
73346
73405
  ACTIVYTY_TIME_SPEND_ARRAY.length = 0;
73347
73406
  }
73348
73407
  };
73349
- const handleShowCheck = () => {
73408
+ const pendingCategoryChecks = new WeakSet();
73409
+ const handleShowCheck = async () => {
73350
73410
  var _a, _b, _c;
73351
73411
  const container = document.getElementById(LidoContainer);
73352
73412
  const objectiveString = container['objective'];
@@ -73361,7 +73421,20 @@ const handleShowCheck = () => {
73361
73421
  (_b = checkButton === null || checkButton === void 0 ? void 0 : checkButton.classList) === null || _b === void 0 ? void 0 : _b.remove('lido-disable-check-button');
73362
73422
  }
73363
73423
  else {
73364
- if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && !container.querySelector("[type='category']") && ((_c = container.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== DropMode.EnableAnimation.toLowerCase()) {
73424
+ if (!container.getAttribute("game-completed") && !container.querySelector("[type='slide']") && ((_c = container.getAttribute('dropAttr')) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== DropMode.EnableAnimation.toLowerCase()) {
73425
+ if (container.querySelector("[type='category']")) {
73426
+ if (pendingCategoryChecks.has(container))
73427
+ return;
73428
+ pendingCategoryChecks.add(container);
73429
+ try {
73430
+ await categoriseCompleted(container);
73431
+ await validateObjectiveStatus();
73432
+ }
73433
+ finally {
73434
+ pendingCategoryChecks.delete(container);
73435
+ }
73436
+ return;
73437
+ }
73365
73438
  validateObjectiveStatus();
73366
73439
  }
73367
73440
  }